طراحی وب با HTML (آموزش کامل با یک مثال گام به گام)
اگر می خواهید ساختن وبسایت تان را خودتان شروع کنید، زبان نشانه گذاری فرامتنی یا HTML برای این کار عالی است. ساختار یک وب سایت را می توان با استفاده از HTML ایجاد کرد. صفحه بندی یک وب سایت با ترکیبHTML ، CSS و جاوا اسکریپت تکمیل می شود. اگر می خواهید به عنوان یک برنامه نویس یا مبتدی HTML شروع به کار کنید، این راهنما کمک تان خواهد کرد.
توسعه وب با HTML
HTML شامل رابط، عناصر و ساختار مورد نیاز برای ساخت کد HTML یک وب سایت است. محتویات آن با استفاده از پاراگراف ها، لیست های بالت دار، تصاویر، جداول و موارد دیگر سازماندهی می شوند. بسیار مهم است که همیشه برای تبدیل شدن به یک برنامه نویس وب با HTML شروع کنید تا بتوانید نحوه چیدمان صفحات وب را یاد بگیرید. در این آموزش، نحوه طراحی و اصلاح یک وب سایت با استفاده از عناصر و تکنیک های استاندارد HTML را خواهید آموخت.
ایجاد پروژه HTML با ویژوال استودیو کد یا هر ویرایشگر کد دیگری
می توانید ساختن یک وب سایت را با باز کردن ویرایشگر VS Code و ایجاد یک پوشه پروژه جدید با نام “Tutorials” شروع کنید. این پوشه حاوی تمام فایل ها و پوشه هایی که قرار است در این آموزش ایجاد شوند، خواهد بود. بعد در داخل پوشه tutorials با کلیک راست روی پوشه پروژه تان و افزودن یک فایل جدید به نام index.HTML، یک فایل جدید بسازید.
حتما دانلود کنید: آموزش صفر تا صد اچ تی ام ال با 14 درس رایگان
مشاهده سورس کد سند HTML
برای مشاهده کد منبع یک صفحه، ترجیحا مرورگر کروم را باز و از هر وب سایتی دیدن کنید. روی صفحه وب سایت کلیک راست کنید و با پیدا کردن گزینه View Page source سورس کد را ببینید. این کد وب سایت HTML را نشان می دهد.
درک عناصر HTML و استفاده از آن ها
یک سند HTML از دو بخش اصلی، عنوان (Head) و بدنه (Body) تشکیل شده است. هر جزء از یک سند HTML از یک سری تگ های بسته و باز تشکیل شده است، با این حال، برخی از تگ ها به طور پیش فرض خودشان بسته می شوند. نمونه کد زیر را ببینید ، آن را در فایل index.HTML تان ذخیره و در مرورگر مشاهده کنید.
Hello World
از کد بالا، تگ HTML کل کد وب سایت تان را در خودش جای می دهد. تگ head حاوی تگ های دیگری است که توضیحات بیشتری در مورد وبسایت تان می دهند. تگ head حاوی تگ های دیگری هم هست که به ما در بارگیری منابع خارجی کمک می کند.
در نهایت ، تگ body محتوای یک وب سایت را در خودش جای می دهد. 98٪ از تگ ها در HTML در تگ بدنه هستند.
حتما همه تگ های اچ تی ام ال را بلد باشید (لیست کامل در اینجا)
استفاده از عناصر درون خطی و بلوکی در HTML
در سندHTML ، عناصر می توانند درون خط (Inline level) یا درون بلوکی (In-block) ظاهر شوند . عناصر درون خطی به صورت افقی پشت سر هم می‌آیند، در حالی که عناصر بلوکی به صورت عمودی پشت سر هم ظاهر می شوند. نمونه کد زیر را ببینید.
In-line Elements Example
These
Tags
Appear
In-line
Block Elements Example
These
Tags
Appear
In block
تو در تو کردن عناصر HTML
یکی از متد های رایج درHTML ، قرار دادن یک تگ داخل یک تگ دیگر یا Nest کردن است. در واقع تگها در داخل تگ‌های دیگر مثل مادر و فرزندش کنار هم قرار می‌گیرند. مثال زیر را در مورد نحوه Nest کردن در HTML ببینید.
List of ingredients
- Rice
- Fish
- Cubes
- Onion
استفاده از ویژگی های HTML
Attribute یا ویژگی ها شما را قادر می سازند تا رفتار های بیشتری را به یک عنصر HTML اضافه یا آن را کنشی تر کنید. این ویژگی ها معمولا از سینتکس زیر پیروی می کند.
اضافه کردن تصاویر به صفحه وب با استفاده از HTML
ما از تگ برای درج تصاویر در صفحه HTML استفاده می کنیم. سینتکس را می توان به این صورت بیان کرد.
تگ کانتینر تصویر است، در حالی که image_url محل منبع تصویر در کل وب است . مثال زیر را ببینید.
<img
src=”https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg”
width=”500px”
/>
اضافه کردن هایپرلینک در HTML
هایپرلینک ها رابط و اتصال‌دهنده هایی برای وب هستند. آن ها مسئول وصل کردن یک صفحه به صفحه دیگر و یک صفحه به یک وب سایت می باشند . سینتکس آن به این صورت است:
Href به معنای مرجع فرامتنی و مخفف Hypertext Reference است. این ویژگی مسئول تعیین مکانی است که وب سایت شما باید به آن لینک دهد. به عنوان مثال کد زیر را ببینید.
حتما دانلود کنید: آموزش طراحی سایت از صفر تا صد (16 درس رایگان)
استفاده از یک
Divها برای تقسیم بندی عناصر به بخش های مختلف استفاده می شوند. این تگ شما را قادر می سازد تا عناصرتان را در بخش های مختلف گروه بندی و سازماندهی کنید.
درست مثل هر عنصر دیگری درHTML ، تگ div انواع مختلفی از ویژگی ها را در داخل خودش می پذیرد. مثال زیر را ببینید، جایی که عرض ، ارتفاع و رنگ پس‌زمینه در ویژگی style مشخص شده، تگ div است.
A div text.
اگر فایل را ذخیره و مرورگر را Refresh کنید. یک کادر آبی با ابعاد 300 در 150 پیکسل دریافت خواهید کرد.
علاوه بر این، عناصر div را می توان در داخل سایر تگ های div قرار داد. مثال زیر را ببینید ، ما یک عنصر div زرد را در یک کانتینر div آبی قرار دادیم.
بعد از ذخیره فایل، مرورگر را دوباره بارگیری کنید.
دانلود کنید: آموزش صفر تا صد سی اس اس
تغییر رنگ عناصر HTML
تغییر رنگ عناصر HTML به راحتی با مشخص کردن مشخصه رنگ در ویژگی styles امکان پذیر است. این را می توان در تصویر زیر مشاهده کرد.
This is blue text.
این کد را در فایل index.HTML تان قرار بدهید و سپس مرورگر را اجرا کنید.
ویژگی style و border برای تغییر رنگ حاشیه استفاده می شوند.
<img
src=”https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg”
style=”border: 10px solid green;”
/>
کد بالا را در فایل index.HTML تان قرار دهید و آن را در مرورگر باز کنید تا ببینید کار می کند یا خیر.
ایجاد پروژه وب سایت HTML
برای ایجاد یک وب سایت ساده با استفاده ازHTML ، مراحل زیر را انجام دهید:
- یک پوشه پروژه به نام tutorials ایجاد کنید.
- یک فایل با نام index.HTML در پروژه HTML ایجاد کنید .
- کد زیر را داخل فایلindex.HTML تان قرار بدهید و ذخیره کنید.
<!– codes go in here… –>
اضافه کردن یک عنصر هد HTML به صفحه وب تان
تگاطلاعاتی در مورد وبسایت تان ارائه می دهد و همچنین منابع خارجی را در وبسایت تان بارگذاری می کند. مثال زیر را ببینید.
با این که تگابرداده ای را به وبسایت تان اضافه می کند، عنوان به صفحه وب شما یک برچسب می دهد.
اضافه کردن یک فاویکون با HTML به وبسایت تان
برای پیاده سازی فاویکون (Favicon) یا آیکون سایت در پروژه های توسعه وب تان با استفاده از HTML، اول یک تصویر آیکون شفاف را (ترجیحا به صورت png) دانلود کنید و در پوشه پروژه‌تان قرار بدهید . سپس پسوند تصویر را به .ico تغییر دهید. تصویر زیر نحوه قرار دادن فاویکون در تگرا بیان می کند.
…
…
مرورگرتان را ذخیره و بازخوانی کنید تا فاویکون تان را ببینید.
استایل دهی به عنصر body HTML
کد زیر به سادگی رنگ پس‌زمینه کل وب سایت تان را به قرمز تغییر می دهد.
<!– Code goes in here –>
بعد از ذخیره فایل، مرورگر را دوباره بارگیری کنید.
حالا که می دانید چه طور عنصر بدنه در HTML استایل دهی می شود، می توانید خودتان بیشتر تمرین کنید.
ایجاد بخش بالای صفحه اصلی تان با HTML
کد زیر نحوه ایجاد یک بخش بالای صفحه ساده درHTML که به عنوان یک ابزار ناوبری عمل می کند را توضیح می دهد.
اضافه کردن تصویر پس زمینه به قسمت بالای صفحه وب با HTML
کد های زیر به شما نشان می دهند که چه طور به سرعت یک تصویر پس زمینه را در قسمت بالای صفحه وب تان اضافه کنید.
<div
style=”
background-image: url(‘https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg’);
background-repeat: no-repeat;
height: 500px;
width: 100%;
background-size: cover;
“
>
اضافه کردن یک تصویر نمایه استایل دهی شده به صفحه وب با HTML
کد زیر یک عکس پروفایل را به تگ هدر اضافه می کند.
<header
style=”
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 10px;
box-shadow: 1px 1px 3px #cccccc;
“
>
<img
src=”https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg”
alt= “profile”
style=”height: 50px; width: 50px; border-radius: 50%; object-fit: cover;”
/>
<div
style=”
background-image: url(‘https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg’);
background-repeat: no-repeat;
height: 500px;
width: 100%;
background-size: cover;
“
>
نتیجه را در صفحه وب تان مشاهده کنید.
اضافه کردن عنوان و استایل دهی به آن با HTML
برای استایل دهی درHTML ، فایلindex.HTML تان را با کد زیر تغییر دهید.
<header
style=”
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 10px;
box-shadow: 1px 1px 3px #cccccc;
“
>
<img
src=”https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg”
alt= “profile”
style=”
height: 50px;
width: 50px;
border-radius: 50%;
object-fit: cover;
“
/>
<div
style=”
background-image: url(‘https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg’);
background-repeat: no-repeat;
height: 500px;
width: 100%;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
“
>
<h4
style=”
color: white;
font-size: 10rem;
font-weight: 600;
background-color: rgba(0, 0, 0, 0.353);
padding: 10px;
“
>
Hello world
با پی اچ پی هم میشه سایت ساخت! روش ساخت سایت با PHP با یک مثال ساده
برخی از سوالات متداول
1-چرا توسعه دهندگان وب باید HTML بلد باشند؟
توسعه دهندگان وب به HTML نیاز دارند زیرا نقطه شروعی برای ساخت یک وب سایت و همین طور تبدیل شدن به یک برنامه نویس وب است.
2- آیا می توان فقط با HTML و CSS یک وب سایت ساخت؟
البته! بسیاری از وب سایت های ساده فقط با استفاده از HTML و CSS ایجاد شده اند.
3- توسعه وب با HTML،CSS ، JS و یا با جنگو (پایتون)؟ کدام موثرتر است و ارزش یادگیری دارد؟
اگر قصد دارید یک توسعه دهنده فول استک شوید، جاوا اسکریپت بهترین است. اما در کل بهتر است توسعه وب را بیشتر باHTML ، CSS و JS انجام بدهید تا جنگو! علتش این است که برای کار با جنگو ، لازم است بر جاوا اسکریپت هم مسلط باشید.
4- کدام نرم افزار برای توسعه وب بهترین است؟
VS Code یا ویژوال استودیو کد بهترین ویرایشگر برای توسعه برنامه ها با چندین زبان برنامه نویسی است. علتش هم استفاده گسترده و حمایت یک جامعه بزرگ از آن است.
در ادامه بخوانید: طراحی سایت با CSS با 4 درس آموزشی
