اولین برچسب HTML
اولین 10 برچسب HTML شماست
فقط شروع با HTML در اینجا 10 تگ HTML ضروری است که باید هنگام ساخت صفحات وب خود بدانید. اگر شما یاد بگیرید که چگونه این 10 برچسب ها کار می کنند، شما دانش کافی برای جمع کردن یک صفحه اولیه خواهید داشت.
در انتهای آموزش، کد را برای یک صفحه وب نمونه که شامل همه 10 برچسب است، پیدا خواهید کرد تا بتوانید ببینید که چگونه از آنها استفاده کنید.
برچسب ها و عناصر
یک تگ HTML یک کلمه یا حرف خاص است که توسط براکت های زاویه احاطه شده اند، <و>. شما از تگ ها برای ایجاد عناصر HTML مانند پاراگراف ها یا لینک ها استفاده می کنید.
بسیاری از عناصر یک تگ باز و یک تگ بستن دارند - مثلا یک عنصر p (paragraph) دارای برچسب <p> است و بعد از آن متن پاراگراف و به دنبال تگ closing </ p> است.
برخی از عناصر یک برچسب بسته را ندارند. اینها عناصر خالی هستند. به عنوان مثال، عنصر br برای قرار دادن شکست خط به صورت ساده نوشته شده است.
اگر شما با XHTML کار می کنید، عبارات خالی را با استفاده از برچسب های خودکفا می کنید - به عنوان مثال، <br />.
حالا اجازه دهیم که 10 برچسب را ببینیم
1. <html> ... </ html> - عنصر ریشه
تمام صفحات وب با عنصر HTML آغاز می شود. این عنصر ریشه نیز نامیده می شود، زیرا در ریشه درخت عناصری است که یک صفحه وب را تشکیل می دهند.
عنصر HTML و درخت سند
عنصر اچ تی ام ال در ریشه درخت عناصر در یک صفحه وب نشسته است.
برای ایجاد عنصر HTML، یک تگ <html> باز کنید و سپس تگ closing </ html> را بنویسید. هر چیز دیگری در صفحه وب شما بین این دو برچسب قرار می گیرد:
<html>
(تمام عناصر صفحه دیگر به اینجا می آیند)
</ html>
2. <head> ... </ head> - سر سند
عنصر سر حاوی اطلاعاتی در مورد صفحه وب است، در مقایسه با محتوای صفحه وب خود. عناصر زیادی وجود دارد که می توانید داخل عنصر سر قرار دهید مانند:
عنوان (شرح داده شده در زیر)
لینک، که شما می توانید برای اضافه کردن صفحات سبک و favicons به صفحه خود استفاده کنید
متا، برای مشخص کردن چیزهایی مانند مجموعه کاراکترها، توضیحات صفحات و کلمات کلیدی برای موتورهای جستجو
اسکریپت، برای اضافه کردن کد جاوا اسکریپت به صفحه
در اینجا یک عنصر سرمندی معمول است:
<head>
<title> ماجراهای گربه خوش شانس </ title>
<meta http-equiv = "Content-type" content = "text / html؛ charset = utf-8">
<meta name = "description" content = "ماجراهای حیوان خانگی حیوان خانگی من خوش شانس با داستان ها، عکس ها و فیلم ها">
<meta name = "keywords" content = "cat، lucky، pet، animal">
<link rel = "stylesheet" type = "text / css" href = "/ style.css">
<link rel = "icon shortcut" href = "/ favicon.ico">
</ head>
3. <title> ... </ title> - عنوان صفحه
عنصر عنوان حاوی عنوان صفحه است. عنوان در نوار عنوان مرورگر (نوار در بالای پنجره مرورگر)، و همچنین در بوک مارک ها، نتایج موتور جستجو و بسیاری از مکان های دیگر نمایش داده می شود.
عنوان باید محتوای صفحه را به صورت مختصر و دقیق توصیف کند. سعی کنید هر صفحه از سایت خود را عنوان خود منحصر به فرد خود را.
در اینجا یک مثال است:
<title> ماجراهای گربه خوش شانس </ title>
4. <body> ... </ body> - محتوای صفحه
عنصر بدن بعد از عنصر head در صفحه ظاهر می شود. این باید شامل تمام محتوای صفحه وب شما باشد: متن، تصاویر و غیره. تمام صفحات وب دارای یک عنصر بدن واحد هستند، به استثنای صفحات frameset، که در عوض شامل عناصر فریم هستند.
در اینجا فرمت عمومی عنصر بدن است:
<body>
(محتوای تمام صفحه اینجا می رود)
</ body>
5. <h1> ... </ h1> - عنوان بخش
عنوانها به شما اجازه می دهد تا محتوای صفحه خود را به تکه های قابل خواندن برسانید. آنها در یک کتاب یا یک گزارش بسیار شبیه عنوان ها و زیر شاخه ها کار می کنند.
HTML در واقع 6 عناصر عنوان را پشتیبانی می کند: h1، h2، h3، h4، h5، و h6. h1 برای مهم ترین عنوان ها است، h2 برای زیرمجموعه های کمتر مهم است و غیره. به طور معمول شما نیازی به استفاده از h1، h2 و h3 ندارید، مگر اینکه صفحه شما بسیار طولانی و پیچیده باشد.
در اینجا یک مثال از عنصر header h1 است:
<h1> ماجراهای گربه خوش شانس </ h1>
6. <p> ... </ p> - یک بند
عنصر p به شما اجازه می دهد پاراگراف های متن را ایجاد کنید. اکثر مرورگرها پاراگرافها را با شکاف عمودی بین هر پاراگراف نمایش می دهند، به سادگی متن را تجزیه می کنند.
در حالی که شما می توانید "پاراگراف" متن فقط با استفاده از تگ های # برای قرار دادن خطوط خالی بین تکه های متن ایجاد کنید، بهتر است از عناصر p استفاده کنید. نه تنها آن را خنثی می کند، بلکه به مرورگرها، موتورهای جستجو و سایر افراد غیر انسانی می پردازد که اندیشه ای بهتر از چگونگی ساخت صفحه شما داشته باشد.
در اینجا یک مثال از یک بند است:
<p> گربه خوش شانس ماجراهای زیادی دارد. دیروز او یک موش گرفت و امروز صبح او دو نفر را گرفت. </ p>
قوانین خوبی در هنگام نوشتن متن برای وب این است که مطمئن شوید که هر پاراگراف شامل یک نقطه، موضوع یا تفکر است. اگر می خواهید در مورد 2 چیز مختلف صحبت کنید، از 2 پاراگراف استفاده کنید.
7. <a> ... </a> - لینک
یکی از مهمترین عناصر در یک صفحه وب، عنصر به شما اجازه می دهد تا پیوندهای دیگر را ایجاد کنید. محتوا می تواند در سایت خود یا در سایت دیگری باشد.
برای ایجاد یک پیوند، تگهای <a> و </a> را در اطراف محتوی که میخواهید برای پیوند استفاده کنید قرار دهید و آن را ارائه دهید
URL برای پیوند به صفت href در <a> برچسب.
در اینجا نحوه ایجاد برخی از متنهایی که به www.example.com پیوند دارند، میپردازیم:
<a href="http://www.example.com/"> از این وبسایت عالی بازدید کنید </a>
8. <img> - یک تصویر
عنصر img به شما امکان می دهد تصاویر را در صفحات وب خود قرار دهید. برای قرار دادن یک تصویر، ابتدا تصویر را به سرور وب خود آپلود کنید، سپس از تگ <img> برای اشاره به نام تصویر آپلود شده استفاده کنید. در اینجا یک مثال است:
<img src = "myphoto.jpg" alt = "عکس من">
ویژگی alt برای تمام برچسب های IMG مورد نیاز است. این مرورگرها که تصاویر را نمایش نمی دهند برای دادن متن جایگزین به بازدید کننده مورد استفاده قرار می گیرد.
در مورد استفاده از تصاویر در صفحات وب بیشتر بدانید.
9. <div> ... </ div> - یک مخزن بلوک برای محتوا
عنصر div یک ظرف عمومی است که می توانید از آن برای اضافه کردن ساختار بیشتر به محتوای صفحه خود استفاده کنید. به عنوان مثال، شما ممکن است چند پاراگراف یا سرصفحه را که برای یک هدف مشابه در داخل یک عنصر div قرار دارند، گروه بندی کنید. به طور معمول، عناصر div برای مواردی مانند:
هدر صفحه و پاورقی
ستون ها و ستون های فرعی
جعبه های برجسته در جریان متن
حوزه های صفحه با یک هدف خاص، مانند نقاط آگهی
گالری عکس
با اضافه کردن صفات کلاس و / یا id به عناصر div شما می توانید CSS را به سبک و جایگذاری div ها بکار ببرید. این مبنای ایجاد پوسته صفحه مبتنی بر CSS است.
در اینجا یک مثال است که از div برای محتویات یک نوار کناری در صفحه استفاده می کند:
<div id = "sidebar">
<h1> عنوان نوار کناری </ h1>
<p> متن نوار کناری </ p>
<p> متن نوار کناری بیشتر </ p>
</ div>
10. <span> ... </ span> - یک ظرف درونی برای محتوا
عنصر span شبیه به div است که برای اضافه کردن ساختار به محتوای شما استفاده می شود. تفاوت این است که div یک عنصر block-level است، در حالی که span یک عنصر درون خطی است:
عناصر سطح بلوک مانند div، h1، و p، عناصر هستند که برای نگهداری بلوک های نسبتا بزرگ یا مستقل از محتوا مانند پاراگراف متن طراحی شده اند. یک عنصر سطح بلوک همیشه در یک خط جدید شروع می شود.
عناصر درونی مانند span، a و img برای طراحی قطعات کوچکتری مانند چند کلمه یا جمله در یک محتوا بزرگتر طراحی شده اند. اضافه کردن یک عنصر درون یک خط جدید ایجاد نمی کند. عناصر بلوک سطح می توانند شامل عناصر درون خطی باشند، اما عناصر درون خطی نمی توانند عناصر بلوک سطح باشند.
همانطور که با div، شما اغلب یک کلاس و / یا ویژگی id را به یک فاصله اضافه کنید تا بتوانید با استفاده از CSS آن را سبک کنید.
مثال زیر از عناصر span برای نشان دادن نام محصولات در یک پاراگراف استفاده می کند. سپس این نام محصول می تواند با استفاده از CSS برجسته شود. یک موتور جستجوی سفارشی نیز می تواند به طور بالقوه از اطلاعات ارائه شده توسط عناصر طولی برای شناسایی محصولات درون صفحه استفاده کند.
<p> برخی از محصولات ما <span class = "product"> SuperWidgets </ span>، <span class = "product"> MegaWidgets </ span> و <span class = "product"> WonderWidgets </ span> . </ p>
آوردن همه اینها با هم
اکنون که این 10 تگ HTML ضروری را آموخته اید، همه آنها را در یک صفحه وب قرار می دهیم:
<html>
<head>
<title> ماجراهای گربه خوش شانس </ title>
<meta http-equiv = "Content-type" content = "text / html؛ charset = utf-8">
<meta name = "description" content = "ماجراهای حیوان خانگی حیوان خانگی من خوش شانس با داستان ها، عکس ها و فیلم ها">
<meta name = "keywords" content = "cat، lucky، pet، animal">
<link rel = "stylesheet" type = "text / css" href = "/ style.css">
<link rel = "icon shortcut" href = "/ favicon.ico">
</ head>
<body>
<h1> ماجراهای گربه خوش شانس </ h1>
<div id = "mainContent">
<p> گربه خوش شانس ماجراهای زیادی دارد. دیروز او <a href="mouse.html"> ماوس را گرفت </a> و امروز صبح او دو نفر را گرفت! </ p>
<p> در اینجا یک عکس از خوش شانس است: </ p>
<img src = "lucky.jpg" alt = "خوش شانس">
</ div>
<div id = "sidebar">
<h2> مسائل ما را بخرید </ h2>
<p> برخی از محصولات ما <span class = "product"> SuperWidgets </ span>، <span class = "product"> MegaWidgets </ span> و <span class = "product"> WonderWidgets </ span> . </ p>
</ div>
</ body>
</ html>
همانطور که می بینید، می توانید کل صفحه وب را فقط با استفاده از این 10 تگ HTML ایجاد کنید. اکنون آماده هستیم تا برخی از تگ های دیگر را با مرور سایر آموزش های HTML خود یاد بگیریم. خوش بگذره!
FILED زیر: HTML با: A، BODY، DIV، H1، HEAD، HTML، IMG، P، SPAN، TAGS، TITLE
