آموزش گام به گام و تصویری HTML قسمت ششم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"]
HTML[/caption]
ویژگی Style
کلمه ی style در لغت به معنی «سبک» یا «طرح» یا همان «استایل» ای است که در فارسی نیز می گوییم. در واقع کار این تگ اعمال دستورات زبان CSS در کد های HTML است. ساختار کلی style به این شکل است:(ایران گستر)
1 | <tagname style="property:value;"> |
در این ساختار، property یک خصوصیت CSS (مانند سایز فونت و …) است و value نیز مقداری که آن خصوصیت می گیرد (مانند 25px و …). در مورد این تگ در دوره ی آموزشی CSS به طور مفصل صحبت خواهیم کرد.(ایران گستر)
بهترین راه برای یادگیری این ویژگی استفاده از مثال های مختلف است بنابراین چندین مثال از آن را برایتان آماده کرده ایم.
رنگ پس زمینه در HTML
خصوصیت background-color، یک رنگ پس زمینه را برای سند HTML ما و یا یکی از عناصر آن تعیین می کند. در مثال زیر رنگ پس زمینه ی سند HTML را به رنگ powderblue تنظیم کرده ایم. اگر نمی دانید این رنگ چیست می توانید در گوگل جست و جو کنید.(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
سوال: من از کجا بدانم چه رنگ هایی می توانم به عنوان value بگذارم؟
پاسخ: جواب این سوال طولانی است اما به صورت خلاصه بدانید که رنگ ها در CSS به دو صورت حرفی (مانند brown به معنی قهوه ای و ..) و کُدی (مانند fff#) انتخاب می شوند. در دوره ی CSS با آن ها به طور کامل آشنا خواهیم شد اما برخی از این رنگ ها را به صورت خلاصه به شما معرفی می کنم.(ایران گستر)
| نام رنگ به صورت حرفی | کد HEX |
| Aqua | #00FFFF |
| Black | #000000 |
| CadetBlue | #5F9EA0 |
| Coral | #FF7F50 |
| Crimson | #DC143C |
| Cyan | #00FFFF |
| DarkOrange | #FF8C00 |
| DeepSkyBlue | #00BFFF |
| HotPink | #FF69B4 |
شما می توانید از هر کدام از این رنگ ها که خواستید استفاده کنید. در واقع تعداد این رنگ ها بیشتر از این ها است و جدول بالا تنها مشتی از خروار است! اگر دقت کرده باشید متوجه می شوید رنگ هایی که در جدول بالا آورده ایم هم نام دارند و هم کد. این یعنی در زبان CSS می توانید به جای کد هایشان از نام هایشان استفاده کنید (مانند "style="background-color:powderblue) اما بسیاری از رنگ هایی که ما می خواهیم دارای نام نیستند بنابراین تنها راه استفاده از آن ها تعیین رنگ به وسیله ی کد HEX است.(ایران گستر)
اگر نیاز به کد رنگ خاصی دارید، می توانید به وب سایت htmlcolorcodes.com یا امثال آن مراجعه کنید.
سوال: آیا رنگ ها فقط در کد HEX هستند؟
پاسخ: خیر رنگ ها در قالب های HSL و HSA و … نیز موجود هستند که در دوره ی CSS مورد بحث قرار خواهند گرفت.(ایران گستر)
رنگ متون
خصوصیت color رنگ متن یک عنصر HTML را تعیین می کند. به مثال زیر توجه کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body> </html> |
فونت متون
خصوصیت font-family نوع فونت یک متن را انتخاب می کند. البته بر اساس نحوه ی استفاده، می توانید فونت کل سند HTML را نیز تغییر دهید. مثال:(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p> </body> </html> |
همانطور که در خروجی مشاهده می کنید در این متن از دو فونت verdana و courier استفاده کرده ایم.
سوال: آیا می توانیم نام هر فونتی را به این خصوصیت بدهیم؟(ایران گستر)
پاسخ: بستگی دارد! اگر فونتی که انتخاب کرده اید از فونت های پیش فرض موجود در مرورگر ها نباشد باید آن را import کنید که خودش بحث جداگانه ای دارد و در دوره ی CSS مورد بحث قرار خواهد گرفت.(ایران گستر)
اندازه ی متون
خصوصیت font-size اندازه ی فونت یک عنصر را مشخص می کند. در واقع این خصوصیت همان خصوصیتی است که در قسمت های قبلی در موردش صحبت کردیم و گفتیم می توانید با آن اندازه ی heading ها را تغییر دهید! به مثال زیر توجه کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p> </body> </html> |
اگر خروجی این کد را مشاهده کنید می بینید که اندازه ی تگ های h1 و p به اندازه ی پیش فرضشان نیستند و بزرگترشان کرده ایم.(ایران گستر)
سوال: چرا اندازه ی فونت ها به درصد تعیین شده است؟
پاسخ: در CSS شما می توانید از واحد های مختلفی برای تعیین سایز عناصر، سایز متون و … استفاده کنید. یکی از آن ها درصد است. از دیگر واحد ها می توان پیکسل (px) را نام برد. توضیح کامل این موارد مربوط به دوره ی CSS است و در بحث ما نمی گنجد، بلکه نگاه ما به این کد ها به عنوان ویژگی (attribute) های HTML است.(ایران گستر)
تراز کردن افقی متون
خصوصیت text-align کار ترازبندی افقی متون را بر عهده دارد. به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> </body> </html> |
در این مثال ما ترازبندی را center (به معنی «وسط») قرار داده ایم و در خروجی نیز مشخص است که متون ما در وسط صفحه قرار گرفته اند.(ایران گستر)
سوال: آیا می توانیم چندین خصوصیت را به یک ویژگی style بدهیم؟
پاسخ: بله! این کار را در مثال زیر انجام داده ام:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body> <p>I am normal</p> <p style="color:red; font-size:300%; text-align:center;">I am red</p> <p style="color:blue; font-family:courier;">I am blue</p> <p style="font-size:50px; font-family:calibri;">I am big</p> </body> </html> |
آموزش گام به گام و تصویری HTML قسمت پنجم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. ار این پس آموزش های HTML مارا دنبال کنید.
HTML[/caption]Heading چیست؟
<h1> شروع شده و تا <h6> ادامه پیدا می کنند. به صورتی که <h1> مهم ترین عنوان یا تیتر و <h6> کم اهمیت ترین عنوان را مشخص می کند.(ایران گستر)به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> |
همانطور که در خروجی مشاهده کردید، این تگ ها در ظاهر نیز با هم متفاوت هستند و هر چه اهمیتشان بیشتر باشد، بزرگتر می شوند اما اهمیت اصلی آن ها در ظاهرشان نیست چرا که ظاهر را می توان با CSS نیز تغییر داد. اهمیت اصلی در مسئله ی سئو است؛ موتورهای جست و جو از heading ها استفاده می کنند تا ساختار یک صفحه ی وب را ایندکس کنند. بنابراین نباید از ساختار صفحات وب خود غافل شوید.(ایران گستر)
برای ساختاربندی صحیح توجه کنید که <h1> همیشه باید عنوان اصلی تمامِ صفحه باشد بنابراین نباید در هر صفحه بیشتر از یک عدد <h1> داشته باشیم. سپس به ترتیب اهمیت از تگ های <h2> و <h3> و … استفاده کنید. برای مشاهده ی ساختار HTML صفحه ی خود می توانید از وب سایت هایی مانند HTML 5 Outliner استفاده کنید. برای مثال ما سایت روکسو را به آن دادیم و نتیجه به شکل زیر بود:(ایران گستر)
این ساختار، ساختار صحیح و درستی است. همانطور که می بینید هر دسته به همراه زیر مجموعه هایش و بر اساس اهمیت جداسازی شده اند اما اگر شما در سایتتان از heading های صحیح استفاده نکنید دیگر با چنین ساختار مرتبی مواجه نخواهید شد. همیشه به این فکر کنید که کدام مطلب زیر مجموعه ی کدام مطلب دیگر است.(ایران گستر)
همچنین کاربران سایت نیز صفحات شما را بر اساس heading ها بررسی می کنند تا مطالب مورد نظرشان را پیدا کنند.
سوال: اگر بخواهیم heading من اندازه ی بزرگتری داشته باشد چکار کنم؟(ایران گستر)
پاسخ: همانطور که گفتیم تمام این موارد در CSS نوشته می شود اما برای مثال این مورد را برایتان توضیح میدهم. شما می توانید از font-size استفاده کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <h1 style="font-size:60px;">Heading 1</h1> <p>You can change the size of a heading with the style attribute, using the font-size property.</p> </body> </html> |
من سایز این heading را روی 60 پیکسل گذاشته ام. شما می توانید به JSBin بروید و این مقدار را تغییر دهید تا ببینید چطور کوچک و بزرگ می شود.(ایران گستر)
استفاده از <hr>
تگ <hr> در زبان HTML هنگامی استفاده می شود که بخواهیم یک قسمت از صفحه را از قسمتی دیگر جدا کنیم. معمولا زمانی که قسمتی از مطلب ما از مطالب دیگر جدا است از این تگ استفاده می کنیم. خروجی این تگ به صورت یک خط افقی در صفحه است:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> </body> </html> |
اگر می خواهید خروجی این تگ را ببینید باید آن را در JSBin مشاهده کنید.
برچسب <head> چیست؟
بسیاری از طراحان مبتدی تگ <head> را با heading ها اشتباه می گیرند اما واقعیت این است که این دو تگ هیچ ارتباطی با هم ندارند. در واقع عنصر <head> نگهدارنده ی اطلاعات metadata است و بین تگ های <html> و <body> قرار می گیرد. metadata اطلاعاتی است که در مورد خودِ سند HTML است و هیچ گاه به نمایش در نمی آیند. بگذارید مثالی را ببینیم:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <title>My First HTML</title> <meta charset="UTF-8"> </head> <body> <p>The HTML head element contains meta data.</p> <p>Meta data is data about the HTML document.</p> </body> </html> |
به غیر از عناصر p در کد بالا چیز دیگری به نمایش در نمی آید. یکی از metadata هایی که در کد بالا استفاده کرده ایم meta charset است که مشخص می کند سند ما از چه نوع encoding ای پشتیبانی می کند. برای زبان فارسی باید UTF-8 را به کار ببرید اما امروزه پیشنهاد می شود به طور کلی از هر زبانی استفاده کردید این مقدار را روی UTF-8 تنظیم کنید. در مورد این تگ ها نیز بعدا به طور مفصل صحبت خواهیم کرد.(ایران گستر)
آموزش گام به گام و تصویری HTML قسمت چهارم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. ار این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"] هر عنصر HTML می تواند Attribute هایی داشته باشد[/caption]
Attribute ها چه کار می کنند؟
همانطور که می دانید هر عنصر HTML می تواند Attribute هایی (به معنی «ویژگی») داشته باشد. کار این Attribute ها ارائه ی اطلاعات بیشتر به این عناصر است و همیشه در تگ آغازین حاضر می شوند. در اکثر مواقع این Attribute ها دارای جفت های “name=”value هستند که در ادامه با مهم ترین آن ها آشنا می شویم.(ایران گستر)
ویژگی href
لینک ها در زبان HTML با تگ <a> تعریف می شوند و برای آدرس دهی این لینک ها از Attribute ای به نام href استفاده می شود. مثال:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body> <h2>The href Attribute</h2> <p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p> <a href="https://roxo.ir/plus">This is a link</a> </body> </html> |
همانطور که می بینید آدرس لینک را توسط href به تگ <a> داده ایم. در مورد لینک ها و تگ <a> بعدا به شکل مفصل صحبت خواهیم کرد.(ایران گستر)
ویژگی src
تصاویر در زبان HTML با تگ <img> تعریف می شوند اما این تگ تنها تعریف کننده ی یک تصویر است. اینکه کدام تصویر به نمایش در بیاید به عهده ی src می باشد. این Attribute آدرس فایل تصویری مورد نظر را به تگ <img> می دهد. به مثال زیر توجه کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body> <h2>The src Attribute</h2> <p>HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute:</p> <img src="https://www.roxo.ir/wp-content/uploads/2019/03/HTML-define-element.jpg" width="800" height="500"> </body> </html> |
مشاهده ی خروجی این کد در JSBin
در مورد تصاویر و Attribute هایشان بعدا به صورت مفصل صحبت خواهیم کرد و اینجا تنها قصد آشنایی با Attribute ها را داریم.
ویژگی alt
alt متنی را مشخص می کند تا اگر به هر دلیلی تصویر ما به کاربر نمایش داده نشد (مانند حذف شدن تصویر از سرور ما، تحریم شدن تصویر در ایران، ناسازگار بودن مرورگر کاربر با سایت ما و …) به جای آن متنی نمایش داده شود تا کاربر بداند آن عکس چه بوده است. همچنین این نوشته می تواند توسط screen reader ها خوانده شود (دستگاه هایی که محتوای صفحه را برای افراد نابینا می خوانند) تا افراد نابینا یا کسانی که نمی توانند صفحه را ببینند بتوانند آن را بخوانند.(ایران گستر)
از دیگر فایده های این Attribute کمک کردن به طراحی سایت است. تصور کنید در src آدرس اشتباه یک تصویر را بدهید. زمانی که سایتتان بالا می آید دیگر تصویری در کار نیست و اگر برایش alt تعریف نکرده باشید، ممکن است یادتان رفته باشد که این تصویر چه بوده است. حالا باید بگردید و ببینید این تصویر مربوط به چه پست یا مطلبی بوده اما با alt می توانید به راحتی بفهمید کدام تصویر مد نظر بوده است.(ایران گستر)
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <body> <h2>The alt Attribute</h2> <p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p> <img src="https://www.roxo.ir/wp-content/uploads/2019/03/HTML-define-element.jpg" alt="HTML5 Tutorials from Roxo.ir" width="800" height="500"> </body> </html> |
اگر خروجی این این کد را در JSBin مشاهده کنید
متوجه می شوید که در ظاهر هیچ تفاوتی ایجاد نشده است. همین مسئله باعث می شود که بسیاری از طراحان سایت آن را نادیده بگیرند اما باید بدانید این Attribute از مهم ترین Attribute هایی است که باید برای تک تک عناصر تصویری تان تعریف کنید چرا که علاوه بر حرفه ای کردن صفحه تان، در موتورهای جست و جو و مسائل سئو اهمیت ویژه ای پیدا می کند.(ایران گستر)
ویژگی style
این Attribute مربوط به استایل (همان سبک و سیاق ظاهری عناصر) می باشد مانند رنگ متن، اندازه ی فونت ها و … . مثال:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body> <h2>The style Attribute</h2> <p>The style attribute is used to specify the styling of an element, like color:</p> <p style="color:red">I am a paragraph.</p> </body> </html> |
با استفاده از این روش ساده، متن خود را قرمز رنگ کرده ایم! این Attribute مربوط به زبان CSS است که همیشه در کنار زبان HTML می‌باشد. ما در این دوره و در قسمت های آینده به صورت خلاصه در مورد CSS صحبت خواهیم کرد و در آینده ای نزدیک یک دوره ی جداگانه برای آن خواهیم داشت.(ایران گستر)
ویژگی lang
شما می توانید زبان یک سند را در تگ <html> تعریف کنید. این کار از طریق lang (مخفف language به معنی «زبان») انجام می شود. مثال:(ایران گستر)
1 2 3 4 5 6 7 8 | <!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html> |
مشخص کردن زبان صفحه تان برای موتور های جست و جو ضروری است. اگر به کد بالا نگاه کنید میبینید که زبان صفحه را en-US گذاشته ایم. دو حرف اول (یعنی en که مخفف English یا همان زبان انگلیسی است) مشخص کننده ی زبان است و دو حرف دوم (یعنی US یا همان آمریکا) تنها در صورتی می آیند که زبان ما چندین گویش داشته باشد. به طور مثال زبان انگلیسی گویش های آمریکایی، استرالیایی، بریتانیایی و … دارد. ما اینجا گویش آمریکایی را انتخاب کرده ایم.
ویژگی title
در واقع title متنی را مشخص می کند که به آن tooltip میگوییم. tooltip ها همان متن هایی هستند که اگر موس را روی عنصر خاصی نگه دارید ظاهر می شوند. حتما با آن ها در اینترنت آشنا هستید. به طور مثال اگر به سایتی بروید و موس را روی عنصری که title را به عنوان attribute داشته باشید نگه دارید، نوشته ای ظاهر می شود که معمولا شامل توضیحات اضافی در مورد آن عنصر است. در مثال زیر ما یک title را به تگ <p> اضافه کرده ایم:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html dir='rtl' align='middle'> <body> <h2 title="من یک تیتر هستم">The title Attribute</h2> <p title="هستم tooltip من یک"> موس خود را روی این متن بیاورید و تکان ندهید تا توضیحات را ببینید. </p> </body> </html> |
زمانی که به JSBin رفتید، موس خود را روی پاراگرافی که میبینید نگه دارید تا متن tooltip به نمایش در بیاید.(ایران گستر)
حروف بزرگ یا کوچک؟
همانطور که می دانید در attribute های زبان HTML و تگ های مختلف آن الزامی به نوشتن حروف به صورت بزرگ یا کوچک نیست. شما می توانید title را به صورت title و یا TITLE بنویسید و تفاوتی در کد هایتان ایجاد نمی شود اما کنسرسیوم جهانی وب (W3C) پیشنهاد می کند در اسناد HTML از حروف کوچک استفاده کنید اما در اسنادی که قوانین سخت گیرانه تری دارند (مانند XHTML) مجبور هستید از حروف کوچک استفاده کنید. تقریبا در تمام دنیا HTML را با حروف کوچک می نویسند بنابراین ما نیز همین کار را می کنیم.(ایران گستر)
مثال بد و غیر استاندارد:
1 | <a href=https://roxo.ir> |
مثال صحیح و استاندارد:
1 | <a href="https://roxo.ir"> |
همچنین در مواقعی نیز مجبور هستید از quotation استفاده کنید. به مثال زیر نگاه کنید:
1 | <p title=About roxo.ir> |
از آن جایی که این attribute دارای اسپیس است اگر quotation ها را حذف کنید، دیگر اجرا نخواهد شد.
آموزش گام به گام و تصویری HTML قسمت سوم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. ار این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"] شیوه تعریف عناصر HTML[/caption]
ساختار عناصر HTML
شیوه تعریف عناصر HTML به صورت زیر می باشد:(ایران گستر )
<tagname> محتوا در این قسمت قرار می‌گیرد </tagname>
بنابراین هر عنصر HTML برابر است با تگ آغازین + محتوا + تگ پایانی. مثال:(ایران گستر )
<p>My first paragraph.</p>
نکته: عناصر HTML ای که دارای محتوا نباشند «عناصر خالی» یا empty element نام دارند و دارای تگ پایانی نیز نیستند. یکی از مثال های بارز این تگ ها، تگ <br> است که معادل اینتر زدن و به خط بعد رفتن در هنگام نوشتن است.(ایران گستر )
«به خط جدید رفتن» اصطلاح خاص خودش را دارد؛ line break. به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 | <!DOCTYPE html> <html> <body> <p>This is a <br> paragraph with a line break.</p> </body> </html> |
برای مشاهده ی خروجی این کد در مرورگتان روی این لینک کلیک کنید.
در HTML5 نیازی به بستن عناصر خالی ندارید اما اگر دوست دارید کدهایتان را در نهایت استاندارد بنویسید و همچنین کد هایتان توسط تجزیه کنندگان XML قابل خواندن باشد می توانید آن ها را به این شکل ببیندید:(ایران گستر )
<br />
توجه کنید که در این حالت، تگ ها دو عدد (تگ آغازین و پایانی) نمی شوند بلکه همان تگ اول تغییر شکل پیدا می کند.
عناصر تو در تو (nested)
به طور مثال در کد زیر چهار عنصر HTML وجود دارد:(ایران گستر )
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
اگر به کد بالا نگاه کنید متوجه می شوید عنصر <html> تمام سند HTML را تعریف می کند و دارای تگ های آغازین و پایانی است. محتوای درون این تگ، یک تگ دیگر به نام <body> است. این عنصر بدنه ی سند را تعریف می کند و مشخصا دارای تگ های آغازین و پایانی است. حالا محتوای خود عنصر <body> شامل دو تگ <h1> و <p> است، یعنی این قسمت:(ایران گستر )
1 2 3 4 5 6 | <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> |
حالا تگ <h1> یک تیتر را تعیین می کند و دارای تگ های <h1> و <h1/> می باشد. تگ <p> نیز تعریف کننده ی یک پاراگراف است که شامل تگ های <p> و <p/> می شود. این توضیح ساختار تو در توی بالا بود. حالا می فهمیم معنی تو در تو بودن چیست.(ایران گستر )
تگ های پایانی
زبان HTML مانند دیگر زبان ها آنچنان قوانین سفت و سختی ندارد. منظور من از این حرف چیست؟ منظور من این است که در بسیاری از زبان های برنامه نویسی با جا انداختن کوچک ترین علامت و نوشتار، در اکثر اوقات برنامه از کار می افتد اما در زبان HTML مسئله به شکل دیگری است.(ایران گستر )
در زبان HTML اگر برخی از قسمت ها را جا بیندازید صفحه تان هنوز هم نمایش داده می شود! به طور مثال:
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <p>This is a paragraph. <p>This is a paragraph. </body> </html> |
در مثال بالا تگ های پایانی عنصر <p> را قرار نداده ایم اما هنوز هم صفحه ی ما نمایش داده می شود. برای اجرای این کد در مرورگرتان روی این لینک کلیک کنید.(ایران گستر )
در واقع تگ آغازین در مثال بالا دلخواه فرض شده است اما جدا هشدار می دهیم که هیچ گاه به این شکل کدنویسی نکنید چرا که:
- این خطا ها برخی اوقات صفحه ی شما را کاملا به هم میریزد و اینطور نیست که همیشه برایتان بدون هزینه باشد.
- حتی اگر صفحه به درستی نمایش داده شود، موتور های جست و جو آن را به عنوان خطا و HTML غیر معتبر می بینند. بنابراین در نتایج جست و جو جریمه می شوید.
- هنگام ویرایش کدهایتان به مشکل برمی خورید چرا که همه چیز به هم ریخته خواهد شد و سر و ته هیچ چیز مشخص نخواهد بود.(ایران گستر )
بزرگی و کوچکی حروف
در زبان HTML بزرگی و کوچکی حروف اهمیتی ندارد بنابراین <P> با <p> یکی است اما تقریبا در تمام دنیا شیوه ی کدنویسی HTML به صورت حروف کوچک است. شما می توانید همین الان به هر سایتی که دوست دارید سر بزنید و کد های HTML آن را مشاهده کنید. 99 درصد سایت های جهان به حروف کوچک HTML می نویسند. همچنین سندهایی که سخت گیری های بیشتری از HTML دارند (مانند XHTML) حروف بزرگ را قبول نمی کنند. بر همین اساس ما در تمام کدنویسی ها و پروژه های آینده از حروف کوچک استفاده می کنیم.(ایران گستر )
XHTML چیست؟
به عبارت دیگر می توانیم بگوییم XHTML همان HTML است که به عنوان یک برنامه ی XML تعریف شده است. از نظر پشتیبانی نیز خیالتان راحت باشد، XHTML توسط تمام مرورگر های جدید پشتیبانی می شود.(ایران گستر )
سوالی که پیش می آید این است که چرا باید از این زبان استفاده کنیم؟ پاسخ ساده است. اگر به کد زیر نگاه کنید، می فهمیم که دارای نقص هایی است:
1 2 3 4 5 6 7 8 | <html> <head> <title>This is bad HTML</title> <body> <h1>Bad HTML <p>This is a paragraph </body> |
مانند مثال قبلی ما، تگ های پایانی اش جا افتاده اند.
مرورگر های جدید ویندوز و مکینتاش و لینوکس و … توانایی حدس زدن و صحیح نمایش دادن این کد را دارند اما دستگاه های کوچکتر مانند گوشی های موبایل ممکن است نتوانند این کد را تصحیح کنند و محتوای صفحه را به هم ریخته نمایش دهند.(ایران گستر )
حتما با خودتان می گویید من هیچ گاه چنین کاری انجام نمی دهم و حواسم به تگ های پایانی هست. مشکل آن جاست که مسئله فقط تگ های پایانی نیست، زبان HTML اجازه می دهد بسیاری از موارد غیر استاندارد را اجرا کنید و زمانی که کد هایتان تبدیل به 800 خط، 1000 خط و بیشتر شد احتمال خطا بسیار بالا می رود.(ایران گستر )
آموزش گام به گام و تصویری HTML قسمت دوم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. ار این پس آموزش های HTML مارا دنبال کنید.
محیط کد نویسی HTML
برای یادگیری HTML و کدنویسی آن می توانید از ادیتور های پیشرفته مانند PHPStorm یا Visual Studio Code استفاده کنید اما در ابتدای کار بهتر است از ادیتور های متنی ساده مانند notepad خودِ ویندوز استفاده کنید.(ایران گستر)
دلیل این مسئله آن است که ادیتورهای پیشرفته به شما در کدنویسی کمک می کنند و شما مطلب را از خودتان نمی نویسید و فراموشش می کنید.(ایران گستر)
برای کد نویسی به شکل ساده در notepad ابتدا باید آن را باز کنید و سپس به صورت ساده عناصر زیر را در آن بنویسید:
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
این عناصر تنها یک نمونه هستند تا با کدنویسی در notepad آشنا شویم، بعدا می توانید آن را تغییر دهید. کد هایتان در notepad به این شکل خواهند بود:(ایران گستر)
حالا برای ذخیره سازی این فایل به شکل یک سند HTML باید به این شکل عمل کنید:(ایران گستر)
- ابتدا از سمت بالا و چپ پنجره، گزینه ی File را انتخاب کنید.
- سپس گزینه ی Save as را انتخاب کنید.
- در پنجره ای که برایتان باز می شود نام فایل را index.html یا index.htm بگذارید
- و در آخر نیز Encoding را روی مقدار UTF-8 قرار دهید.
این مراحل را در تصویر زیر می بینید:(ایران گستر)
نکات مربوط به مراحل بالا:(ایران گستر)
- شما می توانید پسوند فایل را html یا htm بگذارید و باید بدانید این دو هیچ تفاوتی با هم ندارند. دلیل وجود htm این است که بعضی از سرور ها فایل هایی با پسوند چهار حرفی را قبول نمی کنند. بنابراین htm یک جایگزین برای html است و انتخاب پسوند با شما است.(ایران گستر)
- دلیل اضافه کردن نام index به فایل HTML این است که وب سرور ها فایل هایی با نام index.html و index.htm و … را به عنوان صفحه ی پیش فرض حساب می کنند و آن را خودکار اجرا می کنند. بنابراین معمولا صفحات اصلی سایت ها را به شکل index نام گذاری می کنند تا وب سرور به صورت خودکار آن را برای کاربر اجرا کند.(ایران گستر)
- قرار دادن encoding روی utf-8 به این دلیل است که ما ممکن است از زبان فارسی، شکلک ها و یا کاراکتر های غیر معمول نیز استفاده کنیم. اگر چنین تصمیمی بگیریم (مثلا وب سایت ما فارسی باشد) اما به عنوان utf-8 تنظیم نشده باشد تمام کاراکتر ها بهم خواهند ریخت. البته مسئله فقط زبان فارسی نیست و ممکن است بعضی از کاراکتر ها نیز بدون utf-8 پشتیبانی نشوند بنابراین توصیه می کنیم همیشه تمام فایل هایتان را روی utf-8 قرار دهید.(ایران گستر)
پس از اینکه فایل را ذخیره کردید می توانید آن را در مرورگر خود باز کنید:
اما برای دوره ی ما استفاده از ادیتور هایی مثل notepad ممکن نیست چرا که قرار است همه با هم یاد بگیریم. بنابراین از همان ادیتور آنلاین جاوا اسکریپت استفاده می کنیم , به طور مثال کد زیر را در ادیتور آنلاین اجرا می کنیم:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html dir='rtl' align='center'> <head> <title>این عنوان کل صفحه است</title> </head> <body> <h1>این یک تیتر است!</h1> <p>این یک پاراگراف است.</p> </body> </html> |
برای نمایش این کد در مرورگرتان روی این لینک کلیک کنید.
عناصر پایه ای HTML
اگر در این قسمت با تگ هایی آشنا شدید که قبلا آن ها را یاد نگرفته اید، جای نگرانی نیست. فعلا می خواهیم با عناصر پایه ای HTML آشنا شویم و در جلسات بعد تمام این تگ ها را توضیح خواهیم داد.(ایران گستر)
ساختار اسناد HTML
همه می دانیم که تمام اسناد HTML با یک declaration (به معنی «اعلان») شروع می شود: <DOCTYPE html!>. پس از آن تگ های <html> و <html/> را داریم که تمام تگ های دیگر در آن ها نوشته می شوند. البته از بین این تگ ها، تنها تگ هایی که بین <body> و <body/> قرار می گیرند برای کاربر قابل مشاهده هستند. مثال زیر را ببینید:(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> |
Heading ها در HTML
این تیتر ها از <h1> شروع می شوند و تا <h6> ادامه دارند. این تگ ها به ترتیب اهمیت نام گذاری شده اند بنابراین <h1> یعنی مهم ترین و اصلی ترین تیتر و <h6> یعنی فرعی ترین تیتر. به مثال زیر دقت کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html> |
ما یک سری نوشته را با heading های مختلف نوشته ایم. حالا روی این لینک کلیک کنید تا خروجی را در مرورگرتان ببینید. همانطور که مشاهده کردید، بزرگی و bold بودن این نوشته ها متفاوت است. بگذارید یک مثال عملی برایتان بزنم. به صفحه ی Iran System encoding در ویکی پدیا بروید.
در این عکس که قسمتی از همان صفحه است متوجه دو عدد heading می شویم؛ heading اول “Iran System encoding” و heading دوم “Character set” است. همانطور که می بینید، یکی از دیگری بزرگتر است. heading اول در تگ h1 و heading دوم در تگ h2 قرار دارد. آیا می دانید چرا؟(ایران گستر)
مسئله مربوط به کدنویسی نیست، بلکه کاملا منطقی و انسانی است. اگر مقاله ای داشته باشیم که در مورد encoding در ایران باشد، مشخص است که Iran System encoding (به معنی «سیستم کدگذاری ایران») باید تگ h1 باشد چرا که کل مقاله در مورد آن است. سپس متوجه می شویم که لیست کاراکتر ها یا همان Character set یک شاخه ی فرعی یا یک موضوع فرعی است اما هنوز هم تیتر محسوب می شود. بنابراین آن را در تگ h2 قرار می دهیم. حالا اگر تیتر دیگری داشتیم که در مورد برخی از Character set ها بود، باید به آن h3 می دادیم و الی آخر.(ایران گستر)
پاراگراف ها
در زبان HTML پاراگراف ها با <p> مشخص می شوند:(ایران گستر)
1 2 | <p>This is a paragraph.</p> <p>This is another paragraph.</p> |
لینک ها
لینک ها در این زبان با استفاده از تگ <a> مشخص می شوند:(ایران گستر)
1 | <a href="https://www.w3schools.com">This is a link</a> |
همانطور که میبینید این تگ دارای مقداری به نام href است که تگ آغازین اش چسبیده است. به href و امثال آن attribute می گوییم که در جلسات بعد با آن ها آشنا خواهیم شد. کار این attribute ها این است که اطلاعات بیشتری به تگ ضمیمه کنند.
تصاویر
برای استفاده از تصاویر در زبان HTML باید از تگ <img> استفاده کنید:(ایران گستر)
1 | <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> |
دکمه ها
برای نمایش دکمه ها (مانند دکمه ی «ورود به حساب کاربری» و …) از تگ <button> استفاده می کنیم:(ایران گستر)
1 | <button>Click me</button> |
لیست ها
برای استفاده از لیست ها در زبان HTML از دو تگ <ul> (مخفف unordered list به معنی «لیست بدون ترتیب») یا <ol> (مخفف ordered list به معنی «لیست مرتب») استفاده می شود:(ایران گستر)
1 2 3 4 5 | <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> |
از <ul> ها زمانی استفاده می شود که ترتیب موارد لیست اهمیتی نداشته باشد و از <ol> نیز زمانی استفاده می شود که ترتیب اهمیت داشته باشد. در مثال بالا مهم نیست که اول coffee (قهوه) بیاید یا tea (چای) یا milk (شیر). بنابراین از <ul> استفاده کرده ایم.