آموزش قالب ساده HTML به صورت گام به گام همراه با مثال های کاربردی

در ادامه مجموعه آموزش های مربوط به طراحی سایت می خواهیم شما را با ساختار و چارچوب اصلی یک قالب ساده HTML آشنا کنیم. می دانیم که خیلی از سایت هایی اینترنتی به صورت یک صفحه ی ساده HTML هستند که تنها اطلاعات ثابت و بدون تغییر را نمایش می دهند.

اینگونه صفحات مناسب مناسبت و زمان های خاص است که اصطلاحا به آنها Landing Page هم گفته می شود، مانند صفحه ی تخفیف ویژه شب یلدا یا روز مادر و …

در این مقاله می خواهیم در مورد اسلوب و روش ساخت یک قالب ساده با HTML به طور کامل بحث کنیم و با برخی از تگ های اصلی از زبان نشانه گذاری متن و همچنین استایل های زبان CSS آشنا شویم.

زبان نشانه گذاری متن HTML چیست؟

عبارت HTML آن را مخفف عبارت Hyper Text Markup Language می دانیم به معنی زبان نشانه گذاری متن و یا زبان علامت گذاری ابر متن می باشد.

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

با استفاده از زبان HTML می توان تمامی فرآیند ساخت و چارچوب صفحه ی وب را به طور کامل بررسی کرد.

یک صفحه ی وب فارغ از اینکه با چه زبان برنامه نویسی مانند PHP یا ASP.NET نوشته شده باشد، باید در درون قالب خود کدها و تگ های استاندارد زبان HTML را قرار داده باشد.

آشنایی ابتدایی با ساختار صفحه وب

در ساختار یک صفحه وب جزئیات و بخش های مختلفی قرار می گیرند که هر کدام از آنها وظیفه ی نمایش یک جزء از صفحه وب سایت اینترنتی را دارند.

این جزئیات شامل عنوان صفحه، سر تیتر مطالب، محتوای مطلب، عکس، فیلم و انیمیشن های مختلف در یک صفحه وب است.

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

• آموزش طراحی سایت — کلیک کنید

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

در جواب باید گفت با مفهوم تگ Tag باید آشنا شویم.

معرفی تگ Tag در HTML

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

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

تگ های زبان HTML متعدد هستند و به طور مثال تگ هایی برای نمایش متن، تگ برای نمایش عکس، تگ برای نمایش فیلم، تگ برای نمایش سر تیتر با سایز های مختلف وجود دارند که می توانیم بنا به سلیقه و نیاز خود از آنها استفاده کنیم.

تگ ها در HTML به دو شکل زیر هستند :

• تگ باز 
• تگ بسته

• مشخصات تگ های باز 

اینگونه تگ ها در زبان HTML به طور تنها استفاده می شوند و محتوا در درون همین تگ فرا خواهد گرفت.

به طور مثال می توانیم به تگ نمایش عکس اشاره کنیم که تگ img هست.

<img src=“Yocode.ir/test1.jpg”>

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

• مشخصات تگ بسته

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

به طور مثال برای نمایش یک بخش از پاراگراف متنی در یک قالب HTML باید از تگ P استفاده کنیم که به شکل زیر است.

<p>

This is Youcode Education Paragraph.

</p>

تا اینجا با تگ ها و انواع آن آشنا شدیم، حال به سراغ ایجاد یک فایل با قالب ساده HTML خواهیم رفت. شما هم گام به گام با ما همراه باشید.

ابزارهای مورد نیاز طراحی قالب HTML

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

• مجموعه آموزش برنامه نویسی — مشاهده کنید

برخی از این برنامه ها شامل موارد زیر هستند  :

• نرم افزار Sublime Text
• نرم افزار Dream Weaver
• نرم افزار Eclipse 
• نرم افزار ++Notepad

هر کدام از این نرم افزار ها نمای ظاهری و پوسته خاص خود را دارند و بنا به سلیقه خود می توانید با یک یا چند برنامه کار کنید. ما در این آموزش از نرم افزار رایگان ++Notepad استفاده می کنیم که محیط خیلی ساده و کاربردی دارد.

ایجاد ساختار اصلی قالب HTML

برای اینکه یک قالب HTML داشته باشیم از ابتدا باید به صورت منظم و زیبا کار ساخت یک قالب را انجام دهیم.

1. ابتدا برای پروژه قالب خود یک پوشه به نام Template انتخاب می کنیم.
2. نرم افزاری که انتخاب کرده ایم مانند ++Notepad را باز می کنیم.
3. از بخش نوار منو، منوی فایل را انتخاب و گزینه ی New را کلیک می کنیم.
4. در بخش منوی بالایی بخش Encoding گزینه ی utf-8 را انتخاب می کنیم.
5. فایل را با پسوند index.html در درون پوشه ی Template ذخیره می کنیم.

با انجام مراحل فوق توانستیم یک فایل قالب HTML را ایجاد کنیم تا در مراحل بعدی کدهای مورد نظر در داخل آن قرار دهیم.

در ادامه ی بخش آموزش ساختار یک صفحه HTML، حال باید با استفاده از نرم افزار ++Notepad کدهای زیر را درون فایلی با نام index.html که ایجاد کردیم قرار بدهیم.

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

ابتدا در پوشه ی Template فایل index.html را با برنامه ی ++Notepad باز می کنیم.

کدهای مشخص شده در این قسمت را داخل آن قرار می دهیم.

1- <!DOCTYPE html>

2- <html lang=”fa” dir=”rtl”>

3- <head>

4- <meta charset=”utf-8″>

5- <title>HTML Amoozesh</title>

</head>

6- <body>

7- <h1>Youcode first heading</h1>

8- <p>This is a paragraph</p>

</body>

</html>

بهتر است برای یادگیری بیشتر خودتان این کدها را به صورت دستی تایپ کنید.

هدف ما در درجه اول یادگیری شماست نه اینکه تنها مطالب را حفظ کنیم!

• آموزش طراحی سایت با HTML و CSS — کلیک کنید

توضیح کامل ساختار اصلی قالب HTML

در این بخش می خواهیم تمامی خط های درج شده در قطعه کد بالا که ساختار اصلی قالب ساده HTML را تشکیل می دهد توضیح دهیم.

1- در خط اول عبارت DOCTYPE html! مشخص می کند که یک سند با نوع HTML ایجاد شده است.

2- در خط دوم تگ مهم و سر آغاز html درج شده که مشخص کننده شروع کدهای HTML است و از این بخش تگ ها شروع می شوند. تگ html یک تگ باز است و در انتهای فایل مشاهده می کنید که تگ html بسته شده است.

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

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

4- در خط چهارم برای اینکه به مرورگر اینترنتی اطلاع دهیم وبسایت ما از زبان فارسی استفاده می کند باید از متا تگ charset بهره ببریم و در مقابل آن مقدار utf-8 که مناسب برای نمایش زبان فارسی است را قرار می دهیم.

5- در خط پنجم تگ title قرار می گیرد که درون این تگ عنوان کامل صفحه وب قرار می گیرد و در انتها تگ را می بندیم.

6- در خط ششم تگ body همان بدنه کامل صفحه ی سایت را تشکیل می دهد و هرآنچه که درون این تگ قرار می گیرد در مرورگر ما نمایش داده می شود. بعد از اینکه تمامی اطلاعات را وارد کردیم این تگ را هم باید با دستور <body/> ببندیم.

7- در خط هفتم از تگ سر تیتر1 یا h1 استفاده می کنیم که عنوان نوشته ی ما را نمایش می دهد.

8- در خط هشتم محتوای یک پاراگراف قرار خواهد گرفت که با تگ p نمایش داده می شود.

افزودن توضیحات و کامنت در سند HTML

در بعضی مواقع احتیاج داریم تا یک سری توضیحات و کامنت هایی را درون یک قالب HTML قرار دهیم.

برای این منظور که در جهت توضیح کدها و تگ های استفاده شده توسط برنامه نویس است، باید از تگ توضیح به صورت زیر استفاده کنیم :

<!– توضیحات مورد نیاز اینجا درج می شود –>

یک نکته اینکه توضیحات در مرورگر ها نمایش داده نمی شود. پس اگر بخواهیم قطعه کدی را غیرفعال کنیم میتوانیم آن را به صورت یک کامنت در بیاوریم.

آشنایی با تگ های مهم پرکاربرد HTML

همانطور که گفته شد زبان HTML یک زبان نشانه گذاری متن است و این نشانه گذاری را هم باید با تگ های تعریف شده در این زبان اضافه کرد.

در این بخش به معرفی تگ های مهم و پر استفاده در زبان HTML می پردازیم.

• تگ <div>

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

<div>
<p>This is a Paragraph.</p>
</div>

نکته : هر گاه از تگ div استفاده می کنیم باید بدانیم که تمام عرض مرورگر را می گیرد و تگ div را از نوع block می دانیم و به شکل inline نیست.

• تگ های عنوان <h1> تا <h6>

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

در مورد این تگ ها باید بدانیم که اهمیت بالایی در محتوا سازی و سئو سایت دارد.

• برای آموزش سئو و بهینه سازی سایت — کلیک کنید

درجه اهمیت آنها طبق شماره بندی از تگ H1 تا  H6 کاهش پیدا می کند. پس یعنی تگ H1 اهمیت بالاتری نسبت به تگ H3 خواهد داشت و به همین ترتیب تگ H4 هم اهمیت بالاتری نسبت به تگ H6 دارد.

نکته : تگ های H1 تا H6 هم مانند تگ div به صورت block هستند و در مرورگر زیر هم قرار می گیرند. تگ های عنوان و تگ div از نوع تگ بسته هستند.

• تگ پاراگراف <p>

از جمله پر استفاده و پر کاربردترین تگ هایی که در هر قالب ساده HTML می توانیم مشاهده کنیم تگ پاراگراف است. چون در یک مطلب و محتوای سایت پاراگراف های زیادی قرار دارند که باید درون تگ <p> قرار بگیرند.

<p>.این یک پاراگراف است</p>

نکته : تگ <p> هم مانند تگ های فوق از نوع block است و همچنین از نوع تگ های بسته است.

• تگ تصویر <img>

یکی از مهمترین تگ هایی که نیاز است با جزئیات و ساختار آن آشنا شویم تگ تصویر است. که این نوع مقدار دهی متفاوتی با تگ های فوق دارد. در ادامه با ساختار تگ <img> و ویژگی و مقدار دهی آن در یک قالب HTML آشنا می شویم.

مثال : در این مثال به بیان هر ویژگی و مقدار دهی آن می پردازیم :

<img src=”youcode.jpg” alt=”Best Code Programming” title=”You Code” width=”500″ height=”600″>

ویژگی src : در این بخش باید آدرس تصویر را مقدار دهی کنیم و حتما باید نام تصویر مورد نظر همراه با پسوند (الزامی) وارد شود.

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

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

ویژگی title : این ویژگی نام تصویر را مشخص می کند که وقتی موس روی تصویر هاور می شود و بر روی آن قرار می گیرد به صورت یک نوشته کوچک کنار موس نمایش داده می شود که اصطلاحا به آن نوشته Tooltip هم گفته می شود.

ویژگی width : این گزینه عرض عکس را مشخص می کند.

ویژگی height : این گزینه هم طول عکس را نمایان می کند.

جمع بندی نهایی درباره قالب ساده HTML

همانطور که در این مقاله مشاهده کردیم با قالب ساده HTML به سادگی آشنا شدیم و در ادامه سری مطالب آموزش زبان HTML به بررسی جزئیات بیشتر خواهیم پرداخت.

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