آموزشگاه برنامه نویسی

مبانی html

HTML چیست؟

HTML مخفف Hyper Text Markup Language بوده و در فارسی به آن زبان نشانه‌ گذاری ابرمتن می‌گویند. دقت کنید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشان‌گذاری یا Markup language به حساب می‌آید. کدنویسی با HTML قدم گذاشتن در جای پای بزرگان وب و شروع ساخت سایت‌های شگفت‌انگیز است.

زبان نشانه‌گذاری چه تفاوتی با زبان برنامه نویسی دارد؟

زبان برنامه نویسی ابزاری قدرتمند است که به وسیله آن می‌توانیم با کامپیوترها حرف بزنیم. زبان‌های برنامه نویسی به کمک دستورالعمل‌هایی که برای کامپیوتر قابل فهم هستند با آن‌ها ارتباط برقرار کرده و به طور عمده از ساختارهای کنترلی و شرطی استفاده می‌کنند. سخت افزار برای این که درست کار کند نیاز به یک سری دستورالعمل دارد. این دستورالعمل‌ها توسط برنامه نویس و زبانی که برای کامپیوتر قابل فهم باشد، به سخت افزار داده می‌شود. انواع مختلفی از زبان نشانه گذاری وجود دارد که معروف‌ترین آن HTML است. اگر به اسم زبان نشانه گذاری دقت کنید، متوجه مفهوم آن خواهید شد. در زبان‌های نشانه گذاری خبری از ساختارهای رایج برنامه‌نویسی مثل شرط، حلقه، تکرار و غیره وجود ندارد و شما داخل متن خود از یک سری نشانه استفاده می‌کنید. در حقیقت در این زبان‌ها شما به کمک این نشانه‌ها متن را از سایر عناصر صفحه جدا می‌کنید تا به کمک آن‌ها المان‌های مختلف را داخل یک صفحه وب قرار داده و ساختار صفحه را مشخص کنید.

تاریخچه زبان HTML

برای اینکه بدانیم HTML از کجا آمده باید سفر کوتاهی به سال 1991 داشته باشیم. زمانی که آقای Tim Berners-Lee کار خود را روی 18 Tag یا همان برچسب ساده شروع کرد و اولین نسخه HTML را طراحی کرد. HTML روز به روز پیشرفت کرد و در هر نسخه امکانات بیشتری را در قالب تگ‌‌های کاربردی‌تر در اختیار طراحان قرار داد. به این ترتیب این زبان مشکلات قبلی خود را به مرور رفع کرد. HTML4 در سال 1999 معرفی شد و توانست تا مدت‌ها توسط طراحان وب مورد استفاده قرار گیرد، تا این که بزرگترین تحول تاریخ HTML با معرفی HTML5 اتفاق افتاد. این نسخه از زبان HTML توانست بیش از پیش به توسعه دهندگان در طراحی سایت‌ها کمک کند که در ادامه می‌خواهیم با آن بیشتر آشنا شویم.

HTML5 چیست؟

قصد داریم در این بخش به این موضوع بپردازیم که HTML5 چیست و چه فرقی با HTML دارد. تا سال 2008 بازار HTML4 داغ بود و به طور گسترده استفاده می‌شد. اما مشخص بود که این نسخه از HTML ضعف‌هایی دارد و باید بروزرسانی شود. به همین دلیل کمپانی WHATWG توسعه این زبان را در دست گرفت و استانداردهای آن را ارتقا داد. ضعف اصلی که باید روی آن کار می‌شد مربوط به چندرسانه‌ای (multimedia) و گرافیک بود. HTML5 در سال 2014 یک آپدیت مهم و اساسی را تجربه کرد. در این آپدیت تگ‌های HTML جدیدی اضافه شدند که تاثیر بسیار مثبتی در بالا بردن کیفیت و بهبود تجربه کاربران داشتند. پس از این آپدیت طراحی سایت‌ها ساختار منظمی پیدا کرد و مفاهیم قدیمی (مانند استفاده از table در بدنه اصلی صفحات) کنار گذاشته شدند.

HTML چطور کار می‌کند؟

HTML عناصر مختلفی را از جمله پاراگراف، لیست، عکس، صوت و غیره کنار هم قرار می‌دهد تا چهارچوب اصلی صفحه وب را ایجاد کند. به زبان ساده‌تر ما با HTML بدنه اصلی صفحه وب را می‌سازیم. حال که با اصلی‌ترین وظیفه HTML آشنا شدید، بگذارید به سراغ بررسی یک مثال برویم. اگر HTML را شبیه به یک ساختمان در حال ساخت در نظر بگیریم، مهندس عمران که پی ساختمان را ریخته و اسکلت آن را می‌سازد حکم کسی را دارد که ساختار اصلی صفحات وب را با HTML می‌سازد. همچنین مهندس معماری که وظیفه دارد ظاهر ساختمان را زیباتر کند مانند کسی است که به کدنویسی با CSS می‌پردازد. البته در دنیای وب معمولا وظیفه کدنویسی HTML و CSS به عهده یک نفر خواهد بود. فایل‌‌های HTML با پسوند .htm یا .html در سیستم ذخیره می‌شوند. این فایل‌ها تقریبا توسط همه مرورگرهای وب پشتیبانی می‌شوند و به راحتی می‌توانند محتویات آن را رندر کنند. منظور از رندر کردن این است که عناصر داخل سایت که ترکیبی از کد، تصویر، انیمیشن، ویدئو یا غیره هستند، تبدیل به اطلاعات قابل نمایش برای کاربران می‌شوند.

اجزای صفحه‌های html

تمام صفحه‌های اچ تی ام ال دارای مجموعه‌ای از المان‌های ویژه مانند تگ‌ها و مشخصه‌ها است. این المان‌ها مانند آجرهای ساختمان عمل می‌کنند و بخش‌های مختلف صفحه وب را تشکیل می‌دهند. تگ‌ها به مرورگر نقطه شروع و پایان المان‌ها را نشان می‌دهند، درحالی‌که مشخصه‌ها ویژگی یک المان را برای مرورگر توصیف می‌کنند. به عبارتی سه بخش اصلی هر المان را می‌توانیم به‌صورت زیر تقسیم‌بندی کنیم:

تگ شروع: نقطه شروع یک المان را مشخص می‌کند تا بتواند تأثیر خود را نشان دهد.

محتوا: همان خروجی است که کاربران آن را مشاهده خواهند کرد.

تگ پایان: مانند تگ شروع است اما با این تفاوت که پیش از اسم المان یک ممیز یا اسلش قرار می‌گیرد.

تگ چیست؟

HTML به کمک برچسب‌‌ها (Tags) عناصر مختلف را کنار هم می‌چیند و هر کاربر با توجه به نیاز خود از آن‌ها استفاده می‌کند. شاید بپرسید تگ چیست؟ تگ‌ها عناصری هستند که وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام می‌شود. مثلا برای نوشتن پاراگراف‌ها در زبان HTML از تگ p استفاده می‌شود و زمانی که پاراگراف تمام شده، تگ هم بسته می‌شود. همچنین برای نشان دادن لینک‌ها از تگ a استفاده در صفحات وب استفاده می‌شود.

تگ‌های HTML در حقیقت همان دستورالعمل‌های این زبان هستند که به مرورگر می‌گویند صفحه مورد نظر از چه عناصری تشکیل شده است. هر کدام از این Tag معنا و مفهوم خاصی دارند و به شما امکاناتی مانند تغییر شکل ظاهری متن‌ها، ساخت لیست‌های مختلف و به هم متصل کردن صفحات را می‌دهند. همچنین از آن‌ها برای کار با صدا، تصویر و غیره استفاده می‌شود.

مهمترین تگ‌های HTML را بشناسید

تنوع تگ‌ها در HTML بسیار بالاست و این تگ‌ها در نسخه‌های جدید در حال پیشرفت و بهبود هستند. بعضی از آن‌ها محبوبیت چندانی نداشته و به ندرت توسط طراحان وب استفاده می‌شوند. مثلا تگ meter که برای اندازه‌گیری است به ندرت توسط طراحان سایت استفاده می‌شود. از طرفی دیگر تگ div که برای تقسیم کردن صفحه به بخش‌های مختلف به کار می‌رود، تقریبا بخش جدا نشدنی در طراحی سایت می‌باشد. پس اگر قصد دارید بر این زبان مسلط شوید، به شما توصیه می‌کنیم که به بررسی و مطالعه تگ‌های مختلف HTML بپردازید.

کاربردها ، مزایا و معایب زبان HTML چیست؟

HTML در کنار css و js هسته اصلی وب را تشکیل می‌دهد و یک زبان بسیار مهم در دنیای وب حساب می‌شود. این زبان مزیت‌ها و محدودیت‌هایی هم دارد که در ادامه به آن‌ها اشاره می‌کنیم و میبینیم دلیل اصلی ماندگاری HTML چیست و چرا این زبان با تمام مشکلاتش هنوز زبان شماره یک وب به حساب می‌آید. برخی از مهمترین مزایا و معایب این زبان عبارتند از:

مزایای HTML :

1. یادگیری آسان و لذت‌بخش
2. قابلیت اجرا در تمام مرورگرها
3. متن باز و رایگان بودن
4. ادغام آسان با زبان‌های سمت سرور مثل php

معایب HTML:

1. استاتیک بودن و وابستگی به زبان‌های سمت سرور برای تعامل با کاربر
2. ضعف در پشتیبانی از مرورگرهای قدیمی
3. نیاز به طراحی جداگانه هر صفحه به دلیل نبود قواعد منطقی برنامه نویسی

آموزش زبان HTML

گر از ویندوز استفاده می‌کنید، نرم افزار notepad برای این منظور در دسترس شما خواهد بود. ویرایشگرهای کد بسیار زیادی وجود دارند که از این زبان پشتیبانی کرده و یک محیط کدنویسی HTML به حساب می‌آیند. مثلا Adobe Dreamweaver یا Jetbrain PHPMystorm که جزء محبوب‌ترین ویرایشگرهای کد در طراحی وب هستند.

برای ساخت یک صفحه HTML می‌توان از یک ویرایش‌گر متن ساده مثل نرم‌افزار Notepad‌ استفاده کرد. برای تبدیل فایل متنی به فرمت HTML باید پسوند آن را به «html.» تغییر داد.

تگ doctype یک مقدمه الزامی است. در زمان‌های دور،‌ وقتی HTML جوان بود (حدوداً سال ۱۳۷۰)،‌ doctypeها با هدف ایجاد ارتباط با یک مجموعه قواعد استفاده می‌شدند که صفحه HTML باید از آن‌ها پیروی می‌کرد تا به عنوان HTML‌ مطلوب در نظر گرفته شود. این به معنای بررسی خودکار خطاها و سایر موارد کاربردی بود. اگرچه امروزه، doctypeها کار چندانی انجام نمی‌دهند و فقط برای اطمینان از اینکه سند HTML به درستی رفتار می‌کند به کار می‌روند. در سطح مبتدی، اطلاعات در مورد doctype در همین حد کافی است.

عنصر html تمام محتوای یک صفحه را در داخلش محصور می‌کند و گاهی به عنوان عنصر ریشه شناخته می‌شود.

عنصر head به عنوان یک محفظه برای تمام عناصری استفاده می‌شود که قصد نمایش محتوای آن‌ها به بازدید کنندگان صفحه HTML‌ وجود ندارد. این عناصر شامل مواردی مثل کلمات کلیدی، توضیحات صفحه برای ظاهر شدن در نتایج جستجو،‌ کدهای CSS برای طراحی محتوا، تعریف مجموعه کاراکترها و سایر موارد می‌شود.

meta charset=utf-8 این عنصر، مجموعه کاراکتری (Character Set) را که سند مربوطه باید از آن استفاده کند، روی UTF-8 تنظیم می‌کند. UTF-8 حاوی اکثر کاراکترها در تعداد زیادی از زبان‌‌های نوشتاری است. به این وسیله، لزوماً امکان مدیریت و ویرایش هر نوع محتوای متنی برای استفاده در صفحه HTML‌ وجود دارد. دلیلی وجود ندارد که مجموعه کاراکتر را تنظیم نکرد چرا که، این کار می‌تواند از بروز برخی مشکلات در آینده جلوگیری کند.

عنصر title همان‌طور که از نامش پیداست برای تنظیم و تعیین عنوان صفحه HTML‌ استفاده می‌شود. این عنوان در سربرگ (Tab) مرورگری که صفحه در آن بارگذاری شده ظاهر می‌شود. همچنین، این عنوان برای زمانی که صفحه نشان‌دار (Bookmark) می‌شود مورد استفاده قرار می‌گیرد. نشان‌دار کردن صفحه به معنی قرار دادن آن در لیست علاقه‌مندی‌های مرورگر است.

عنصر body حاوی تمام محتوایی است که در زمان بازدید از صفحه مربوطه به کاربران وب نمایش داده می‌شود. چه این محتوا متن، تصویر، ویدئو،‌ بازی، قطعات صوتی قابل پخش و چه هر چیز دیگری باشد.

در زبان xhtml از شش نوع سر فصل استفاده میشود که h1 بزرگترین و h6 کوچکترین سرفصل است

لیست غیر ترتیبی ul , لیست ترتیبی ol در xhtml

حرکت به بالای صفحه