وبلاگ چیتا وب


blog post
در این درس کمی با تاریخچه ی اینترنت، زبان HTML و همچنین برخی از تگ های مهم و اساسی که وجود آن ها در یک صفحه وب الزامی ست آشنا میشوید. تگ های زبان HTML5 برای مرورگر بسیار مهم و ضروری است چرا که بر اساس آن هاست که یک صفحه وب، استاندارد میشود.

معرفی HTML5 و کاربرد آن:

در ابتدای اینترنت، همه چیز بدون رنگ ، عکس و ویدئو و پر از متن های نوشته شده بود. سپس زبان HTML به وجود آمد و همه چیز را متحول کرد، HTML مخفف (Hyper Text Markup Language) است، که به طراحان و توسعه دهندگان وب این امکان را میدهد که صفحه های خود را با طرح زیبا و متن های خوانا تر برای کاربران ارائه دهند.

برای تمرین و استفاده از کدها کافی است که notepad را باز کنید و دستورات را در داخل آن بنویسید، در ادامه editor های خوب و کارآمد را معرفی میکنیم تا با نصب آن ها کدهای خود را بهتر بنویسید.
خب بهتر است که کاربرد آن را همین حالا یاد بگیریم!

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <title>Document</title>
    </head>
    <body>
         Hello World!!
    </body>
 </html>

کدهای HTML در یک صفحه notepad نوشته میشوند، که نتیجه ی آن در عکس بعدی میبینید.

hello world result

اولین خط کد نوشته شده <DOCTYPE html!> است و به مرورگر این اطلاع را میدهد که این کد از دستورالعمل های HTML5 استفاده میکند.
زبان HTML تاکنون دچار تغییرات زیادی شده و HTML5 برای طراحی وب استاندارد است، به همین دلیل است که بیشتر مرورگرهای به روز دنیا مانند chrome, firefox زبان HTML5 و دستورات و تگ های آن را پشتیبانی میکنند.
در نتیجه با نوشتن <DOCTYPE html!> کدهای ما جز کدهای استاندارد قرار میگیرد، البته باید بدانید که این خط کد کافی نیست زیرا که استاندارهای دیگری هم در طول نوشتن کدها وجود دارند که در ادامه با همه ی آن ها آشنا میشویم.

تگ ها ( tag ) :

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

نکته
تعداد کمی از تگ ها هستند که تگ بسته ندارند!
تگ هایی که تگ بسته دارند، الزامی است که تگ بسته آن ها را بنویسید!!

اولین تگی که معرفی میکنیم تگ html است.

<html lang="en"></html>

در صفحه ای که شروع به کد نوشتن میکنید بعد از نوشتن کد <DOCTYPE html!> باید تگ باز و بسته ی html را بنویسید.

<!DOCTYPE html>
<html lang="en">
 </html>

داخل تگ html از تگ head و تگ body استفاده میکینم، فقط همین دو تگ را در داخل تگ html مینویسیم. هر دو تگ head , body هم تگ باز دارند هم تگ بسته:

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
    </body>
 </html>

در داخل تگ body از تگ هایی استفاده میشود که تماما در صفحه وب ما نمایش داده میشوند، یعنی اگر در تگ body جمله یا کلمه ای(مثل hello world) را تایپ کنید آن را در مرورگر خود میبینید.
برای مشاهده آنچه تا کنون انجام داده اید کافی ست که notepad را با فرمت .html ذخیره کنید. ساختن و ذخیره کردن یک صفحه وب

تا این جا در داخل تگ body جمله ی hello world را تایپ کردیم و نتیجه را برروی صفحه نمایش دیدیم، اما بهتر است که به سراغ تگ head برویم، تگی که در بالای تگ body قرار گرفته است.
در تگ head کدهایی که نوشته میشوند در صفحه وب ما نمایش داده نمیشود، درواقع تمام آنچیزی که در body نوشته میشود از ابتدا تا اننتها و به ترتیب در صفحه، نمایش داده میشوند، پس سوالی که مطرح است این است که تگ head برای چه چیزی استفاده میکنیم؟!
در تگ head از تگ هایی مثل ، تگ و تگ استفاده میکینم، تگ meta و تگ link جز تگ هایی هستند که تگ بسته ندارند.
تگ meta را برای مشخص کردن حروف میگذاریم، گفته شد که تگ meta تگ بسته ندارد و برای نوشتن دستورات در آن از ویژگی ها (attribute) استفاده میکنیم. دستورات هر ویژگی باید درون quotation یا double quotation قرار بگیرند.

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

در تگ meta ، اینگونه attribute را مینویسیم:

<meta charset="UTF-8">

ویژگی character set مشخص کننده رمزگذاری (encode) کاراکتر است.
تگ link برای متصل کردن صفحات دیگر به این صفحه است که آن را با ویژگی (attribute) های rel و href مینویسیم.

<link rel="stylesheet" href="">

ویژگی rel برای مشخص کردن رابطه ی صفحات و ویژگی href برای آدرس دهی استفاده میشود.
در تگ title عنوان صفحه یا اسم آن را مینویسیم، و اسمی را که نوشتیم در قسمت تب بروزر نشان میدهد.

testing the title

در تگ html نیز از ویژگی lang استفاده میشود که زبان نوشتن کدها را مشخص میکند:

<html lang="en">

برای مرور مطالب به کد زیر نگاه کنید و سعی کنید آن را خودتان در notepad امتحان کنید.

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <link rel="stylsheet" href="">
         <title>Document</title>
    </head>
    <body>
         Hello World!!
    </body>
 </html>

این مطلب را به اشتراک بگذارید

about author

ثمین یدالهی

فارغ التحصیل مهندسی IT

دیدگاه ها

دیدگاهی بگذارید: