یادگیری HTML در 10 دقیقه!

سایت های مدرن معمولا با رابط کاربری چشم نواز و کدهای پیچیده ایجاد می شوند با این حال با فراگیری چند کد ساده شما هم قادر به ایجاد صفحات ساده خواهید بود. در این مطلب به توضیح ۱۷ تگ و نکات دیگری پرداخته ایم که امکان توسعه یک سایت ساده یا تغییر صفحاتی نظیر وردپرس را به شما می دهند.
برای توضیح بهتر این تگ ها کدهای HTML و خروجی آن را با یک مثال ارائه کرده ایم. با نگارش کدها در یک ادیتور و بارگذاری آن در مرورگر به صورت عینی حاصل کار را مشاهده کرده و برای مدتی سرگرم می شوید.

۱. < ! DOCTYPE html >

در ابتدای تمامی اسناد HTML به این کد نیاز دارید. دلیل اینکار اعلام HTML بودن کدها به مرورگر است. هرچند این کد در واقع یک تگ محسوب نمی شود اما فراگیری آن ضروری است.

۲. < html >

این تگ هم HTML بودن کدها را به مرورگر اعلام کرده و دقیقا بعد از DOCTYPE قرار می گیرد. در پایان تمامی کدها و اسکریپت ها باید با نگارش < / html > اتمام این تگ را به مرورگر اعلام کنید.

۳. < head >

این تگ هدر یا سربرگ فایل شما را شروع می کند. مواردی که در این تگ قید می شوند روی صفحه، نمایش داده نشده و حاوی متاداده ها برای موتورهای جستجو و اطلاعات خاصی برای مرورگر هستند.
برای صفحات ساده تگ < head > تنها شامل عنوان است اما می توانید موارد دیگری را هم در آن قرار دهید که در ادامه به آن می پردازیم.

۴. < title >

این تگ عنوان صفحه شما را تنظیم می کند و تنها کاری که باید بکنید قرار دادن عنوان در تگ و بستن آن است؛ برای مثال:

< head >
< title > My Website < / title >
< / head >

به محض باز شدن این صفحه در مرورگر عبارت My Website روی تب نشان داده می شود.

۵. < meta >

متادیتا هم مثل تگ عنوان در ناحیه هدر صفحه قرار گرفته و کاربرد اصلی آن ارائه اطلاعاتی در مورد صفحه به موتورهای جستجو است. متادیتا شامل فیلدهای متنوعی است اما رایج ترین آنها عبارتند از:

description: شرح مختصر صفحه
keywords: منتخبی از کلمات کلیدی مربوط به صفحه
author: مشخصات نویسنده صفحه
Viewport: تگی که نمایش صحیح صفحه در دستگاه های مختلف را تضمین می کند.

مثالی از بکارگیری این فیلدها در یک صفحه:

< meta name="description" content="A basic HTML tutorial" >
< meta name="keywords" content="HTML,code,tags" >
< meta name="author" content="MakeUseOf" >
< meta name="viewport" content="width=device-width, initial-scale=1.0" >

برای اطمینان از نمایش درست صفحه در موبایل و کامپیوترها تگ viewport همیشه باید حاوی “width=device-width, initial-scale=1.0” باشد.

۶. < body >

بعد از بستن هدر نوبت به بدنه کدها می رسد. این بخش را با نوشتن تگ < body > کلید زده و با تگ < / body > در انتهای کدها و قبل از < / html > به پایان می رسانید. تمامی محتوای صفحه وب بین این تگ ها قرار می گیرند:

< body >
تمام آنچه که روی صفحه نمایش داده می شوند
< / body >

۷. < h1 >

این تگ یک هدر سطح اول را در صفحه تعریف می کند که معمولا عنوان است. در حالت ایده ال تنها یک مورد از آن در صفحه وجود دارد.
تگ < h2 > هدرهای سطح دوم مثل تیترهای هر بخش، < h3 > هدرهای سطح سوم و ... در نهایت < h6 > هدرهای سطح ششم را تعریف می کنند. برای مثال اسامی تگ ها در این مقاله هدرهای سطح ۲ هستند.

< h1 >Big and Important Header< / h1 >
< h2 >Slightly Less Big Header< / h2 >
< h3 >Sub-Header< / h3 >

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

۸. < p >

این تگ یک پاراگراف جدید ایجاد کرده و معمولا دو خط بین آنها فاصله می اندازد.

برای مثال فاصله بین خط قبلی و این خط را در نظر بگیرید؛ این همان کاری است که تگ < p > انجام می دهد.

< p >Your first paragraph.< / p >
< p >Your second paragraph.< / p >

نتیجه:

Your first paragraph.

Your second paragraph.

امکان استفاده از استایل های CSS هم در تگ پاراگراف وجود دارد. برای مثال این کد اندازه متن را تا ۲۰ درصد بزرگتر می کند.

< p style="font-size: 120%;" >20% larger text< / p >

نتیجه:

20% larger text

۹. < br >

این تگ تنها یک خط فاصله ایجاد می کند.

< p >The first line.< br > The second line (close to the first one).< / p >

نتیجه:

The first line.
The second line (close to the first one).

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

۱۰. < strong >

این تگ بخش های مهم متن را برجسته کرده و به صورت بولد در می آورد. البته با استفاده از CSS می توان متن را به شکل کاملا متفاوتی به نماش درآورد.

< strong >Very important things you want to say.< / strong >

نتیجه:

Very important things you want to say.

اگر با تگ < b > و بولد کردن متن با آن آشنا باشید، هنوز امکان استفاده از آن وجود دارد اما ممکن است در نسخه های بعدی HTML پشتیبانی از آن پایان یابد.

۱۱. < em >

< em > و < i> مثل < b > و < strong > ارتباط تنگاتنگی با هم دارند و تگ < em > نیز با پررنگ کردن بخشی از متن آن را از قسمت های دیگر متمایز می سازد. اینجا هم می توان به لطف CSS متن را به شکل کاملا متفاوتی به نمایش دراورد.

< em >An emphasized line.< / em >

نتیجه:

An emphasized line.

تگ < i > هم کاربرد مشابهی دارد اما بعید نیست با نسخه های آتی HTML سازگاری نداشته باشد.

۱۲. < a >

< a > یا لنگر امکان ایجاد لینک را به شما می دهد. یک لینک ساده چنین ظاهری دارد:

< a href="// www.sematec-co.com />Go to sematec< / a >

نتیجه:

go to sematec

صفت href مقصد لینک را مشخص می کند که در اغلب موارد صفحه ای دیگر است؛ با این حال مقصد می تواند یک فایل، تصویر یا PDF هم باشد.
دیگر صفت های مفید شامل target و title است که مورد اول منحصرا برای بازکردن لینک در صفحه جدید کاربرد دارد:

< a href =" target="_blank">Go to sematec in a new tab ; < / a>

نتیجه:

Go to sematec in a new tab

صفت title هم هنگام بردن نشانگر موس روی لینک، یک متن را نمایش می دهد. برای مثال در کد زیر این متن "سایت سماتک" است که با نگه داشتن نشانگر روی لینک به نمایش درمی آید:

< a href="// www.sematec-co.com/" title="سایت سماتک"> GO to sematic < / a >

نتیجه:

GO to sematec

۱۳. < img >

اگر قصد گذاشتن تصویر در صفحه را دارید، باید از تگ img استفاده کنید. این تگ معمولا همراه با صفت src برای مشخص کردن تصویر بکار می رود. برای مثال:

< img src="wp-content/uploads/2019/04/sunlit-birds.jpg" >

دیگر صفت های در دسترس شامل height، width و alt است که در صورت بکارگیری آنها کد بدین شکل در می آید:

< img src=" wp-content/uploads/2019/04/sunlit-birds.jpg" alt= "the name of your image" >

صفات height و width به ترتیب برای تنظیم ارتفاع و عرض تصویر کاربرد دارند. برای اجتناب از به هم خوردن تصویر بهتر است تنها یکی از آنها را تنظیم کرده و مورد دیگر را به عهده سیستم بگذارید. در صورت تنظیم هردو ممکن است تصویر کشیده شود.
تگ alt به مرورگر می گوید در صورت عدم نمایش تصویر به هر دلیل متنی را به جای آن نمایش دهد. استفاده از این متن ایده خوبی است چرا که اگر یک نفر به خاطر سرعت پایین اینترنت یا استفاده از مرورگرهای قدیمی قادر به مشاهده تصویر نباشد، حداقل متن مرتبط با آن را خواهد دید.

۱۴. < ol >

این تگ برای ایجاد لیست های منظم و شماره دار کاربرد دارد. برای تمامی آیتم های موجود در لیست باید از تگ آیتم لیست (< li >) استفاده کنید. برای مثال:

< ol >
< li >First thing< / li >
< li >Second thing< / li >
< li >Third thing< / li >
< / ol >

نتیجه:

1. First thing
2. Second thing
3. Third thing

در HTML5 می توانید از < ol reversed > برای معکوس کردن ترتیب شماره ها استفاده کنید. با استفاده از یک صفت خاص هم می توان شماره آغازین را به صورت دلخواه تعیین کنید.
صفت type نوع نماد ایتم های لیست را برای مرورگر مشخص می کند و می تواند شماره، حرف یا نمادی دیگر باشد، برای مثال:

< ol type= "A" >

۱۵. < ul >

این تگ به لیست نامرتب مربوط می شود و به مراتب از مورد قبلی ساده تر است؛ در واقع با استفاده از آن در کنار همه موارد تنها یک بولت نمایش داده می شود:

< ul >
< li >First item< / li >
< li >Second item< / li >
< li >Third item< / li >
< / ul >

نتیجه:

• First item
• Second item
• Third item

لیست نامرتب هم از صفت type بهره می برد اما تنها می توان آن را به شکل دیسک، دایره یا مربع تنظیم کرد.

۱۶. < table >

هرچند استفاده از جداول برای فرمت بندی چندین مطلوب نیست اما در موارد زیادی ممکن است برای بخش بندی اطلاعات ناچار به استفاده از سطرها و ستون ها باشید. برای ایجاد جدول باید از چند تگ استفاده کنید که در ادامه به آنها اشاره شده است:

< table >
< tbody >
< tr >
< th >1st column< / th >
< th >2nd column< / th >
< /tr >
< tr >
< td >Row 1, column 1< /td >
< td >Row 1, column 2< /td >
< /tr >
< td >Row 2, column 1< /td >
< td >Row 2, column 2< /td >
< / tbody >
< / table >

تگ های ٰ< table > و < /table > شروع و پایان جدول را تعیین می کنند. تگ < tbody > نیز شامل تمام محتوای جدول است.
هر سطر جدول در یک تگ < tr > قرار می گیرد. هر سلول موجود در یک سطر در یکی از تگ های < th > برای هدر ستون یا تگ های < td > برای داده قرار می گیرند. برای هر یک از ستون های موجود در هر سطر به یکی از این دو نیاز دارید. نتیجه کد بالا بدین شکل است:

1st column	2nd column
Row 1, column 1	Row 1, column 2
Row 2, column 1	Row 2, column 2

۱۷. < blockquote >

وقتی از یک شخص یا سایت دیگر نقل قول می کنید، بهتر است این بخش از متن را از قسمت های دیگر متمایز بسازید. برای این کار باید از تگ blockquote استفاده کرده و متن را در آن قرار دهید؛ برای مثال:

< blockquote >The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.< /blockquote >

با HTML به پیش برانید

با این ۱۷ تگ html قادر به ایجاد یک سایت ساده خواهید بود. کدهای ذکر شده را می توانید در یک ادیتور وارد کرده و پس از بارگذاری در مرورگر نتیجه نهایی را مشاهده کنید.

دوره های مرتبط:

دوره آنلاین Front End Developer فرانت اند

17 Simple HTML Code Examples You Can Learn in 10 Minutes
دانلود مقاله