در ادامه مطالب ” آموزش html css ” امروز میخواهیم به تگ های اولیه html بپردازیم، به صورت پیشفرض وقتی شما میخواهید صفحات سایت خود را با html ایجاد نمایید یک سری کدها باید تعریف شود که به اصلاح کدهای اولیه html یا تگ های پیشفرض html گفته می شود.
تگ های اولیه html :
اگر شما قصد ” طراحی صفحات وب ” را دارید و می خواهید بر پایه html طراحی خود را بچینید، باید بدانید که html از یک بدنه اصلی کدهای تعریف شده است که سایر کدهای صفحات و بخش های مختلف آن درون این ساختار قرار میگیرند.
اگر شما از این قوانین تبعیت نکنید و ساختار اصلی کدهای اچ تی ام ال را نادیده بگیرید با مشکلات زیادی مواجه می شوید که یکی از این مشکلات می تواند عدم نمایش سایر کدها باشد، وقتی صحبت از کدنویسی استاندارد در طراحی سایت به میان می آید، یکی از الزامات اجرایی این موضوع توجه به استانداردهای اولیه html است.
بدنه ی اصلی کدهای اچ تی ام ال :
میپردازیم به کدهای پیشفرض و مهم اچ تی ام ال که به ترتیب این موارد در اولویت است و نباید به هیچ عنوان ترتیب این موارد را تغییر دهید، تغییر چیدمان این کدها مساوی است با خطاها و مشکلات مرتبط با نمایش صفحه ی html شما.
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<h4>این یک عنوان متن به صورت تست می باشد</h4>
<p>در این قسمت می توانید متن تشریحی خود را بنویسید</p>
</body>
</html>
به ترتیب موارد را توضیح می دهیم :
<!DOCTYPE html>
به طور خلاصه، <!DOCTYPE html> سندی است که به تشخیص مرورگر ها در شناسایی نسخه html کمک می کند، در ” HTML5 ” که جدیدترین نسخه است به این صورت نوشته می شود ( <!DOCTYPE html> ) ، اما برای مثال در نسخه های قدیمی تر این دستورالعمل وجود داشت اما شیوه ی نوشتاری آن کمی متفاوت تر بوده است.
مثال HTML 4.1
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html> <html/>
استفاده از این دستورالعمل بسیار مهم و الزامی است، شما بعد از نوشتن <!DOCTYPE html> باید دستور html به صورت باز و بسته را در صفحه قرار دهید. چرا که از این لحظه به ترتیب بخش های مختلف به صورت خوشه ای زیر مجموعه ی یکدیگر قرار میگیرند.
اگر توجه کرده باشید، یک دستور <html> باز در ابتدای صفحه و یک دستور <html/> بسته در انتهای کد قرار گرفته است. با این کار به مرورگر در شناسایی نوع کد و استاندارد صفحه جهت رندر گیری کمک میکنید. در نظر داشته باشید که تگ و دستورهای دیگر زیر مجموعه ی دستور <html> قرار میگرند .
<head> <head/>
در درون دستور <head>، تگ های فراخوانی اطلاعات از فولدرها، آدرس ها و … قرار میگیرد، به طوری که اگر قرار باشد شما فایل های استایل، فونت، مجموعه آیکون ها و … را فراخوانی کنید و در صفحه ی خود به نمایش در آورید می توانید از کد هایی که در درون بخش <head> قرار میدهید اجرا نمایید.
برای مثال شما هیچگاه نمی توانید از <link rel=”stylesheet” href=”styles.css”> در <body> صفحه استفاده کنید چرا که اینکار کامل غیر استاندارد بوده و علاوه بر عدم نمایش و اجرا کد توسط مرورگر، با خطاهایی هم مواجه خواهید شد. بهترین نمایش و استاندارد آن قرار گیری همین تگ، زیر مجموعه ی تگ head می باشد.
به طور استاندارد تگ هایی که درون تگ head قرار میگیرند شامل :
- فراخوانی استایل ها
- فراخوانی فایل های بوت استرپ
- فونت ها
- تگ عنوان صفحه
- تگ های توضیحات و کلمات کلیدی صفحه
- فایل های اسکریپت ورودی، مانند سرچ کنسول گوگل ، گوگل آنالیتیکس و …
- نام نویسنده صفحه
- و …
<body><body/>
میرسم به بخشی که زیر مجموعه و درون تگ <html> <html/> قرار می گیرد اما جدا از <head> است، تگ body وظیفه ی نمایش محتوای صفحه را بر عهده دارد. هر آن چیزی که شما در صفحه مشاهده می کنید به صورت متنی یا تصویر، توسط نوشتن محتوای آن ها درون تگ Body است.
برای مثال اگر یک پاراگراف متن داشته باشید و بخواهید آن در صفحه مرورگر خود به تصویر بکشانید حتما می بایست محتوای خود را درون BODY قرار دهید و ذخیره نمایید. به طور کلی اطلاعاتی که شما در یک صفحه مشاهده میکنید که حامی محتوا است ( مانند تصاویر، متن ها و … ) مجموعه ای از دستور و تگ ها مربوطه در BODY صفحه است.
نتیجه گیری :
مواردی که در این مطلب به آن ها اشاره شد، مقدمه ای از ” مسیر یادگیری HTML ” است. باید بدانید کدهای اولیه کدامند و نحوه چیدمان و بکارگیری از آن ها را به درستی رعایت کنید تا از ابتدا تا انتها پروژه طراحی وب خود را بر اساس استانداردهای وب پیش ببرید.
اگر میخواهید زمان خود را در کدنویسی کدها کوتاه تر کنید حتما باید از یک نرم افزار خوب استفاده نمایید که در این راستا ” بهترین نرم افزار طراحی سایت ” را بخوانید.
