آموزش سریع HTML – قسمت دوم

سلام من علی هستم با قسمت دوم آموزش HTML و در این قسمت میخواهم در مورد تگ های مربوط به متن و لینک ها صحبت کنم . چون عمده مطالب وب سایت لینک و متن و عنوان است پس بهتره قسمت دوم را به این موضوع اختصاص دهم . یک سری تگها هم هستند که الان دیگه کاربری ندارند یا خیلی کم کاربرد هستند و من اونها رو اصلا آموزش نمیدهم . همانطور که در جلسه قبل هم گفتم این تگهایی که میخوام امروز براتون شرح بدم باید در تگ مادر ( شایدم پدر ) body قرار میگیرند پس خودتون دیگه این رو بدونید تا منم مجبور نشم هی تگ body را بنویسم .

تگ عنوان یا هدر

تگ های عنوان برای نوشتن عنوان هستند دیگه … حالا این عنوان میتونه عنوان اصلی سایت باشه ، عنوان مقالات باشه یا … فقط لازمه سلسله مراتب را رعایت کنید مثلا عنوان سایت باید با تگ h1 باشد راستی این تگ عنوان دارای ۶ لول میباشد که هرچه عدد بزرگتر گردد اهمیت تگ از نظر سئو کمتره و در عناوین پایین تری قرار میگیرد . مثلا عنوان سایت از عنوان یک مقاله مهمتر است پس نباید این دو در یک لول قرار بگیرند برای سئو کار مناسبی نیست . قبلا میگفتند هر صفحه باید یک تگ h1 داشته باشد اما بعدا که html5 اومد تگ hgroup ایجاد شد و میگفتند اگر داخل این تگ h1 هم قرار دهید موتور جستجو ایرادی نمیگیرد اما من یک بار تست کردم و این کار مخالف استانداردهای w3c بود بازم من نمیدونم چون سئو کار نیستم . خب تگهای عنوان به شکل زیر نوشته میشوند و یادتون نره تگ را ببندید . فونت استایل و … این تگها هم با css تغییر میکند الکی دنبال راه حل نباشید چون برای سئو ساختاری وب سایتتون مناسب نیست .

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

بجای heading 1-6 میتونید متن فارسی خودتون را قرار بدهید . برای دیدن نتیجه هم میتونید اینجا کلیک کنید  این تگ یک تگه پدر است ( دوست دارم بگم پدر والا ) و نمیتونید داخل تگ های متنی دیگر آنرا قرار دهید اصلا کار خضیه .

تگ پاراگراف

تگ p  برای نوشتن پاراگراف میباشد ، پاراگراف ینی متن مقالات یا کلا متون چند خطی که وجود دارد . داخل این تگ نباید تگهای عنوان را بکار ببرید و بلعکس و این نکته را هم بگم که این تگ نسبت به فاصله یا space بیش از یدونه بین کلمات بی تفاوت است و برای قرار دادن space  بیشتر باید از معادل دسیمال ( بگمانم همین بود) آن استفاده کرد که میشود

&nbsp;

هر بار نوشتن مقدار بالا برابر با یک فاصله است . برای قرار دادن فاصله میان خطوط یا enter هم دو راه حل وجود دارد که یکی قرار دادن تگ br بشکل زیر

<p>
more text <br> more text2
</p>

باید بگم که قبلا نگارش این تگ این شکلی بود

<br />

که در html5 بشکل بالا راحت تر شد . راه حل بعدی قرار دادن دو تگ p  پس از یک دیگر است و لطفا از نبوغتون برای قرار دادن دو تگ p داخل هم استفاده نکنید چون مشکل داره این کار و هرکی کدتونو ببینه  بهتون میخنده . اما بریم سر بحثمون در حالت پیش فرض هم بین دو تگ p فاصله ای وجود دارد راستی برای اینکه فاصله خطوطتون بیشتر شود نباید br استفاده کنید فقط برای نقطه سر خط استفاده کنید .

<p>
more Text
</p>
<p>
text
</p>

تگ pre

این تگ برای نوشتن کدها بیشتر استفاده میشه یا مثلا برای دیباگ کردن پروژه یا چاپ یک ریزالت( چقدر فارسیش زشت شد :D)  استفاده میشود و تمامی فاصله ها و … که شما در کدتون وارد میکنید را نمایش میدهد نگارش این تگ بشکل زیر است و خواهشا داخل تگ h یا p  ازش سو استفاده نکنید چون کدتون را خراب میکنه .

<pre>
more Code
</pre>

تگ span

اهمیت این تگ را بعدا توی css میفهمید حالا من هرچی بگم فایده نداره اما اینجوری بگم این تگ یک تگ متنی میباشد که داخل تگ های عنوان و پاراگراف میتونید ازش استفاده کنید مثلا بخواهید یک متن یا کلمه خاص را با سایز و رنگی متفاوت نمایش دهید راستی داخل این تگ نیایید تگ عنوان یا پاراگراف قرار دهید

<span> More Text </span>

تگ نقل قول یا blockquote

این تگ برای وارد کردن نقل قول در سایت استفاده میشود و بازم نباید داخل تگ پاراگراف یا عنوان قرار بگیرد . در این تگ باید یک صفت نیز ست شود ، صفات در html یا attribiute ها در تگ اغازین قرار میگیرند و با یک space  از هم جدا میشوند، این صفات گاهی حالت عمومی دارند و گاهی مختص یک عنصر هستند . حالا خیلی وارد این بحث نمیشم چون هنوز زوده . برای نگارش این تگ میتونید به این شکل عمل کنید .

    <blockquote cite="http://www.worldwildlife.org/who/index.html">
 For 50 years, WWF has been protecting the future of nature. The world's
 leading conservation organization, WWF works in 100 countries and is 
supported by 1.2 million members in the United States and close to 5 
million globally.
 </blockquote>

خب در این تگ یک صفت داریم به نام cite که شما میتونید داخلش منبع نقل قول را وارد کنید اینجوری موتورهای جستجو برای مقاله شما ارزش بیشتری قائل میشوند .

تگ لینک

برای ساخت دکمه ، یا لینک مثل لینک وب سایت ، یا هر چیز دیگه میتونید از تگ a استفاده کنید که دارای دو صفت میباشد . این تگ را میتونید در هر جایی استفاده کنید ، هم میتواند داخل تگ p و عنوانهای قرار گیرد و هم تمامی تگها داخل اون قرار بگیرند ( نه که برید تگ html داخلش بذارید ولی خیلی تگها توش قرار میگیرند ) این تگ به صورت زیر نوشته میشود

<a href="ureLinke" title="more Name"> more Name </a>

بجز اینها یک صفت target قرار میگیرد که خیلی استفاده نداره و منم نمیگم و اگر خواستید یکم سرچ کنید و بیابید اما وظیفه این صفت نحوه باز نمودن لینکه که مثلا لینک در همین صفحه باز شود یا اینکه در صفحه دیگری و قبلا موقع استفاده از iframe و قبل از ورود ajax کاربرد داشت ( مثلا گفتم توضیح نمیدم)

در تگ a یک صفت بنام href وجود دارد که لینک مورد نظر در اون قرار میگیرد ، حال این لینک میتواند به دو شکل باشد یکی اینکه لینک دارای دامنه و http و دیگری لینک نسبی که از صفحه فعلی حساب میشود مانند :

href="img/logo.png"
img -> logo.png
href="../index.php"
go back -> select index.php

حالت اول یک پوشه بنام img را باز میکند و حالت دوم یک مرحله به عقب برمیگردد و سپس یک فایل انتخاب میکند .

مقدار title : این مقدار را سعی کنید مقدار دهی کنید زیرا در زمان استفاده افراد روشن دل، از وب سایت یعنی خواندن وب سایت با screen reader این مقدار خوانده میشود .

خب اینها تگهای مهم برای نوشتن متن و لینک بودند ، حالا یکی میاد تگ b استفاده میکنه تا یکم نوشتش bold بشه اشکال داره فکر نکنید کار مهمی انجام میده چون بهترین کار اینه که تمامی استایل در css  اعمال شود .

” تنهایی بدترین جلوه تهی دستی و فقر است “

جورج اورول

بدرود

Add a comment

*Please complete all fields correctly

مقالات مرتبط

HTML3 آموزش HTML
Posted by علی اله دادی | ۱۳۹۷-۰۶-۱۸
آموزش سریع HTML – قسمت اول
HTML سلام من علی با آموزش html در خدمت شما هستم و سعی میکنم قسمت های کاربردی html را براتون توضیح بدهم . پیش از شروع باید بدانید که html...
Website Wireframe Sketch And Programming Code On Digital Tablet طراحی وب
Posted by علی اله دادی | ۱۳۹۷-۰۶-۱۶
آموزش طراحی وب قسمت صفر
طراحی وب و نکاتی مهم در این مورد طراحی وب را یاد میگیرید پس حتما این مقاله را مطالعه کنید. با سلام و عرض ادب و احترام ، من علی...
1_hUuioUcs_0tzu7mMwr9udA لاراول (Laravel) چیست؟
Posted by admin44 | ۱۳۹۷-۰۵-۰۹
لاراول (Laravel) چیست؟
           لاراول (Laravel) چیست؟ لاراول (Laravel) یک چارچوب متن باز پی اچ پی (PHP) است. لاراول از کوچکترین نرم افزارهای برنامه نویسی گرفته تا بزرگترین پروژه ها...