خانه / مقالات آموزشی / آموزش طراحی وب / آموزش طراحی وب مقدماتی – درس اول آشنایی با HTML

آموزش طراحی وب مقدماتی – درس اول آشنایی با HTML

آشنایی اولیه با HTML

تاریخچه طراحی صفحات وب

وب یا World Wide Web که در منابع فارسی از آن با عنوان تارنمای جهان گستر یاد میشود یکی از سرویس هایی است که دسترسی به اسناد متصل به هم را در بستر اینترنت امکان پذیر می سازد.

از آنجا که به جز وب، سرویسهای دیگری نظیر پست الکترونیک، انتقال فایل و … هم بر روی اینترنت به منظور دســتیابی کاربران به اطلاعات موردنظر ارایه می شود لذا تصور عمومی در مورد یکسان بودن دو مفهوم اینترنت و وب نادرست است.

در این میان، وب با ارایه اســتانداردی جهت تولید صفحات حاوی متن، عکس و صدا و تصویر که توسط ابرپیوند به یکدیگر مرتبط هستند توانسته دسترسی به انبوهی از اطلاعات موجود در اینترنت را به سادگی امکان پذیر سازد.

ماهیت متنی این صفحات باعث شده امکان سازمان دهی حجم انبوهی از اطلاعات و جستجو میان مطالب آنها فراهم آید و این مسأله از مزیتهای مهم وب محسوب میشود.

هم اینک بیش از ۱۱۰ میلیون وبســایت حاوی چندین میلیارد صفحه وب بر روی اینترنت وجود دارد که هر لحظه به تعداد آنها افزوده میشــود و به همین دلیل میتوان وب را مهمترین و مؤثرترین سرویس موجود در اینترنت قلمداد کرد.

زبان های نشانه گذاری و تاریخچه آن ها

زبانهای Markup یا نشانه گذاری نوعی از زبانهای توصیفی هستند که متن و اطلاعاتی در مورد نحوه تفسیر متن را با هم ادغام میکنند. این نوع زبانها را نمیتوان جزو زبانهای برنامه نویسی قلمداد کرد چون فاقد الگوریتم برای انجام محاسبات یا کنترل کردن یک سیستم هستند.

سابقه ایجاد زبانهای نشانه گذاری به دهۀ ۸۰ میلادی و زبان SGML برمی گردد. این زبان را که میتوان پدر زبانهای نشانه گذاری محسوب کرد با هدف قالب بندی اسناد متنی ایجاد شد تا برای نمونه مشــخص کند هر بخش از متن باید چه فونت، حالت و رنگی داشته باشد.

این زبان به گونه ای طراحی شــده بود که بتواند مجموعه ای از داده ها و نیز اطلاعاتی در مورد نحوه تفسیر آنها را در کنار هم جای دهد و به بیان بهتر، داده ها را نشــانه گذاری یا Markup کند. زبان های نشانه گذاری حاوی مجموعه ای از برچسب ها هستند که داده ها را در برمی گیرند و برای تفسیر آنها کاربرد دارند.

هنگامــی که اولیــن ایده ها برای ایجــاد صفحات وب و انتقــال داده ها میان ســرویس گیرنده و ســرویس دهنده شــکل می گرفت، اســتاندارد SGML مورد توجه قرار گرفت و بر مبنای آن یک زبان استاندارد شده با نام HTML یا زبان نشانهگذاری ابرمتن ساخته شد.

برچسب های این زبان بر خلاف SGML که توسط هر کاربر قابل تعریف و تغییر بودند، محدود و استاندارد بود تا بتوان صفحات وب را در قالــب یک فایل متنی به رایانه کاربر انتقال داد و در آنجا یک نرم افزار که بعداًمرورگر نام گرفت، صفحه را بازسازی کند. ویژگی ابرمتن یا Hyper Text بودن این زبان هم باعث میشد امکان ایجاد پیوند در صفحه وب و هدایت کاربر به سایر صفحات فراهم آید.

تاریخچه HTML

در سال ۱۹۹۲ در دانشگاه مینه سوتا سیستمی به نام web به وجود آمد که دارای دو ویژگی خاص بود.

  1. Graphic, Multi Media
  2. Hyper Text (کلیک کردن و در سایت حرکت کردن)

صفحات این سیستم توسط برنامه ای به نام HTML ساخته شد.

تعریف HTML

قبل از تعریف HTML ابتدا باید انواع برنامه های تحت وب را بشناسیم. برنامه های تحت وب بصورت کلی به دو دسته تقسیم می شوند:

  • برنامه های استاتیک (Static): برنامه هایی هستند که صفحات آنها از متن، تصاویر،صوت و … تشکیل شده است. در واقع این نوع صفحات با کاربر تعاملی ندارند و صرفاً کاربر میتواند موارد داخل این صفحات را مشاهده کند.
  • برنامه های داینامیک (Dynamic): برنامه هایی هستند که داده ای را از کاربر گرفته، و آن را پردازش می کنند، و در انتها نتیجه‌ آن در اختیار کاربر قرار می گیرد.

HTML زبانی برای ساختن صفحات استاتیک هست که به وسیله آن میتوان صفحات وبی را ساخت که در آن از عکس ها، فیلم ها، موزیک ها، پاراگراف ها، جداول و… استفاده کرد.

Html زبان استاندارد طراحی صفحات وب است و کلیه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهایت به کدهای HTML تبدیل شده و توسط مرورگر نمایش داده می شوند. HTML یک زبان نشانه گذاری است به این معنی که بخش های مختلف توسط اجزایی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند .

این تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و باید به چه صورت نمایش داده شود. هر یک از کدهای html ، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند. مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند.

یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن (Text–based) است که معمولاً با پسوند .htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آن‌ها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی (Render) می‌کنند.

اچ‌تی‌ام‌ال زبان برنامه‌نویسی نیست، بلکه زبانی برای نشانه‌گذاری ابرمتن است و اساساً برای ساخت‌ و مستند کردن اطلاعات و جدایش اجزای منطقی یک نوشتار نظیر عناوین ، تصاویر ، فهرست‌ها ، بندها و جداول به کار می‌رود. از سوی دیگر، اچ تی ام ال را نباید به عنوان زبانی برای صفحه‌ آرایی یا نقاشی صفحات وب به کار بُرد؛ این وظیفه اکنون بر دوش فناوری‌های دیگری همچون سی اس اس ( Css ) است.

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

  • HTML در واقع زبان ساخت صفحات وب می باشد.
  • زبان HTML توسط دنیس ریچی ابداع و ثبت شد.
  • HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
  • یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاری است.
  • بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد.
  • یک فایل HTML باید دارای پسوند html. یا htm. باشد.
  • یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود.

برای شروع کار با HTML شما به ابزاری نیاز دارید که در لیست زیر آمده است:

شما به یک ویرایشگر متن نیاز دارید مثل Notepad++، Adobe Dreamweaver، Notepad. در ویندوز شما می توانید از برنامه Notepad استفاده کنید. نرم افزار Notepad را می توانید از طریق منوی استارت در قسمت Accessories پیدا کنید.

توصیه می شود برای کد نویسی HTML از نرم افزار ++Notepad استفاده شود این نرم افزار رایگان، شناسایی کدهای برنامه نویسی به اکثر زبان های مورد استفاده برنامه نویسان از جمله HTML و … را برای شما آسان می کند. این نرم افزار را می توان ورژن تکمیل شده ی Notepad برای کد نویسان و برنامه نویسان دانست .

ویژگی خاص این نرم افزار سبک بودن نرم افزار و پشتیبانی از انواع زبان ها می باشد.. جهت دانلود این نرم افزار بر روی لینک زیر کلیک کنید.

دانلود نرم افزار ++Notepad

شما به یک مرورگر وب به انتخاب خود نیاز دارید. می توانید از Microsoft Internet Explorer استفاده کنید که با ویندوز نصب می شود یا از Google Chrome ، Firefox و نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند.

بهتر است صفحاتی را که می نویسید با چند مرورگر آزمایش کنید. زیرا در HTML قسمتهایی وجود دارد که مختص به یک مرورگر خاص است و با سایر مرورگرها کار نمی کند.

تگ ها

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

عنصر

تگ ها معمولا به صورت جفتی به کار می روند و ساختار جدیدی به نام عنصر (element) را تشکیل می دهند. همانطور که در مثال بالا می بینید یک عنصر از سه قسمت اصلی تشکیل می شود:

تگ ابتدایی، محتوای تگ (که می تواند یک متن ساده، یک عنصر دیگر و یا خالی باشد) و تگ پایانی. تگ ابتدایی مشخص کننده آغاز تگ و تگ پایانی، مشخص کننده انتهای تگ است.

هر تگ HTML ،باید حتما در ادامه توسط تگ پایانی بسته شود. کلیه نوشته ها و تگ های دیگری که در بین تگ ابتدا و پایان نوشته می شوند،

محتویات تگ را تشکیل می دهند.

مثال: عنصر پاراگراف به صورت زیر است:

  • تگ های HTML، کلمات کلیدی (نام تگ) هستند که توسط براکت های زاویه ، مانند <html> احاطه شده اند.
  • تگ های HTML معمولا به صورت جفت می آیند مانند <b> و <b/>
  • تگ اول تگ شروع و تگ دوم تگ پایان نامیده می شوند.
  • تگ پایانی مانند تگ شروع، نوشته شده می شود ، اما با یک اسلش قبل از نام تگ.
  • یک عنصر HTML با یک تگ آغاز (بازکننده) شروع می شود.
  • یک عنصر HTML با یک تگ پایان (پایان دهنده) تمام می شود.
  • محتوای عنصر همه چیزی است که بین تگ آغاز و پایان قرار می گیرد.
  • محتوای برخی از عناصر HTML خالی می باشد.
  • عناصر خالی در همان تگ آغاز ، بسته می شوند.
  • اکثر عناصر HTML میتوانند دارای صفات (attributes) باشند.

هر تگ HTML محتویات درون خود را تحت تاثیر قرار می دهد. برای مثال تگ <b> برای توپر کردن ( bold ) نوشته به کار می رود و چنانچه متنی بین تگ باز و بسته <b> قرار بگیرد ، توپر می شود.

یک تگ همیشه با علامت کوچکتر ریاضی یعنی علامت > آغاز می شود و با علامت بزرگتر < به پایان می رسد. مثلاً تگی که باعث ایجاد زیرخط در کلمات می شود اینطور نوشته می شود:

این علامت را قبل از متنی که می خواهیم زیر آن خط کشیده شود قرار می دهیم. تگ پایانی با این علامت شروع می شود: />

اگر بخواهید متن بالا را با زیرخط در مرورگر خود ببینید باید آنرا مطابق خط روبرو در ویرایشگر متن خود بنویسید:

نتیجه را به این صورت می بینید:

در HTML همه تگ ها به یک تگ پایانی نیاز ندارند برای مثال تگی که برای وارد کردن عکس استفاده می شود، به این صورت می باشد:

عناصر HTML تو در تو

اکثر عناصر HTML می توانند به صورت تو در تو ویرایش شوند. یعنی هر عنصر می توانند شامل عنصر یا عنصر های دیگری باشد. اسناد HTML از عناصر تو در تو تشکیل شده اند.

مثالی از عناصر تو در تو:

در این کد ۳ عنصر وجود دارد که شامل یک عنصر body و دو عنصر p می باشد.

  • نکته ۱:

ضرورتی ندارد که حتماً تگ ها با حروف بزرگ نوشته شوند مثلاً<ِDIV> همان <div> است در واقع مرورگر وب نسبت به استفاده از حروف بزرگ یا کوچک حساسیت ندارد.

البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته شود به گونه ای که کنسرسیوم شبکه گسترده جهانی (W3C) در نظریه HTML4 خود برچسب های حروف کوچک را توصیه کرده و XHTML(نسل بعدی HTML) برچسبهای حروف کوچک را خواستار شده است.

  • نکته ۲:

بر خلاف زبان های برنامه نویسی دیگر، اگر شما ایرادی در HTML داشته باشید، برنامه متوقف نمی شود و ایراد به سادگی با رفتن در داخل سند HTML بر طرف می شود.

مرورگرها، دارای یک کتابخانه لغات کوچک می باشند. یکی از جنبه های جذاب HTML، این است که اگر Browser شما نداند که تگی که در آن نوشته شده چیست ، آن را نادیده می گیرد.

ایجاد اولین سند HTML

ساختار اصلی یک صفحه وب:

هر صفحه وب (HTML) با تگ <html> شروع و به تگ بسته‌ <html/> ختم می شود. در واقع با این عنصر به مرورگر می گوییم که اولاً با یک صفحه از نوع HTML روبروست، ثانیاً صفحه با تگ باز <html> شروع و با تگ پایانی <html/> پایان می یابد.

سه عنصر <head> , <html> و <body> با هم ساختار اصلی یک صفحه وب را تشکیل می دهند. مثال زیر قالب اصلی یک فایل HTML را نشان می دهد:

آنالیز کد بالا

۱- اعلامیه <DOCTYPE!>

اعلامیه <DOCTYPE!> اولین سطر از کد صفحه وب است و به مرورگر نوع و نسخه استفاده شده از زبان برنامه نویسی HTML یا XHTML را اعلام می کند . لازم به ذکر است که هر صفحه فقط می تواند یک نوع Doctype داشته باشد.

اعلامیه <DOCTYPE!> به مرورگر کمک می کند تا یک صفحه وب را به درستی نمایش دهد. بسیاری از اسناد و مدارک مختلف بر روی وب وجود دارد و یک مرورگر تنها زمانی می تواند صفحه HTML را ۱۰۰٪ به درستی نمایش دهد که نوع و نسخه مورد استفاده آن HTML را بداند. در هر سند HTML کد نویسی با داک تایپ <DOCTYPE!> شروع می شود.

اعلامیه های مشترک برای ورژن های مختلف HTML

الف) HTML 5 :

ب) HTML 4.01 :

ج) XHTML 1.0 :

۲- تگ <html>

اولین تگ کد بالا، تگ <html> است که علامت شروع یک متن HTML است و تگ پایانی آن <html/> است که همانطور که ممکن است حدس زده باشید نشانه پایان متن HTML است.

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

۳- تگ <head>

تگ بعدی تگ <head> است. تگ < head > در بر گیرنده ااطلاعات کلی درباره سند وب است که این اطلاعات Meta-Information به معنای “اطلاعات درباره” نامیده می شود .

این تگ مشخص کننده بخشی است که عنوان صفحه، کلمات کلیدی، استایل های خارجی و داخلی ، جاوا اسکریپت های خارجی و داخلی ، آیکون صفحه ، توضیحاتی راجع به سازنده و دیگر توضیحات برای صفحه در آن قرار می گیرد. این بخش هم با <head/> به پایان می رسد. در مثال بالا تنها تگی که در قسمت HEAD قرار دارد عنوان صفحه می باشد که با <title> مشخص می شود. .اطلاعات داخل header معمولا در پنجره مرورگر نشان داده نخواهد شد.

تگ های مورد استفاده ی این بخش بصورت زیر است: <title>, <meta>, <link>, <script>, <style>

۴- تگ <title>

یکی از مهمترین تگ ها هم برای کاربران و بازدید کننده های سایت و هم برای جستجوگرهای وب تگ عنوان ( تگ Title) می باشد. تگ <title> به شما اجازه می دهد برای صفحه خود یک عنوان برگزینید. این قسمت مورد استفاده موتورهای جستجو قرار می گیرد و همان متنی است که به هنگام مشاهده صفحه در نوار عنوان مرورگر نشان داده می شود.

برای پایان دادن به تگ عنوان از این تگ استفاده می شود: <title/> در مثال بالا عنوانی که برای صفحه نشان داده می شود عبارت “عنوان صفحه در این جا قرار می گیرد.” می باشد. توجه داشته باشید متن داخل این تگ در صورت زیاد بودن ادامه ی آن توسط مرورگر حذف میشود پس از عناوین کوتاه استفاده کنید.

۵- تگ <body>

مشخص کننده بدنه اصلی صفحه است و در واقع حاوی اطلاعاتی است که قرار است در پنجره مرورگر نمایش داده شود. این قسمت از تگ <body> و تگ بسته <body/> و هر چیزی که بین آنهاست تشکیل می شود.تگ body در تصویر زیر با کادر قرمز مشخص شده است.

به طور مثال در کد ابتدای درس، متنی که در صفحه مرورگر دیده می شود به صورت زیر است: “اطلاعاتی که در اینجا قرار می گیرد در صفحه وب قابل رؤیت است.”

  • نکته ۱ : معمولا آنچه که در قسمت head صفحه قرار میگیرد در صفحه نمایش داده نمی شود اما هر آنچه که در قسمت body قرار گیرد در صفحه نمایش داده خواهد شد.

تمرین عملی ۱:

ابتدا برنامه ویرایشگر (notepad یا ++notepad) خود را باز کنید و کد زیر را وارد کنید:

سپس فایل را تحت عنوان “test.htm” ذخیره کنید. برای ذخیره کردن فایل در notepad در قسمت منو بر روی File کلیک کرده و سپس گزینه Save As را انتخاب کنید. در پنجره باز شده در قسمت File Name نام فایل را (در اینجا test) به همراه پسوند htm یا html وارد کنید. شما می توانیدhtm و یا html را برای فرمت فایل استفاده کنید.

بدین صورت که نام فایل را وارد کنید و سپس htm. یا html. را در انتهای نام فایل قرار دهید. در قسمت Save as Type هم گزینه All Files را انتخاب کنید و سپس بر روی save کلیک کنید. هیچ تفاوتی بین htm و html وجود ندارد، این مسئله کاملا اختیاری است.

اگر در فایل HTML تان از متن فارسی استفاده می کنید , قسمت encoding را بروی TF-8 تنظیم کنید .فایل را در یک پوشه ذخیره کنید که نام آن به آسانی قابل یادآوری باشد.
اکنون شما اولین سند HTML خود را با موفقیت ساخته اید برای مشاهده این صفحه بر روی فایل ایجاد شده (test.htm) دابل کلیک کنید، به صورت پیش فرض فایل در مرورگر وب Inernet Explorer باز می شود.

برای اینکه بتوانید فایل را در مرورگرهای دیگر هم مشاهده کنید می توانید بر روی فایل کلیک راست کرده و با انتخاب گزینه Open With مرورگر مورد نظر خود را انتخاب کنید. راه دیگر مشاهده صفحه وب ایجاد کرده، به این صورت است که ابتدا مرورگر وب خود را باز کنید از منوی File گزینه Open را انتخاب کنید(برای مشاهده منوی مرورگر Firefox و IE کلید alt را فشار دهید)

از کادر محاوره ای که باز می شود ، سند مورد نظر ایجاد شده را باز کنید .نتیجه به صورت شکل زیر می باشد:

  • نکته ۲: در کد نویسی های HTML زدن دکمه اینتر(Enter) بین نوشته ها و کد ها در خروجی ای که روی مرورگر کاربر نمایش داده می شود هیچ اثر خاصی ندارد. شما اگر بخواهید بین خطوط نوشته هایتان فاصله بدهید ، باید از تگ مخصوص این کار که بعداً معرفی خوهد شد، استفاده کنید.

پرسش و پاسخ:

سوال: پس از اینکه فایل HTML را ویرایش می کنم نمی توانم نتیجه را در مرورگر مشاهده کنم. چرا؟

جواب: اطمینان حاصل کنید که فایل را با یک نام و پسوند صحیح ذخیره کرده اید مثل”C:mypage.htm”. همچنین اطمینان حاصل کنید که از همان نام هنگام باز کردن فایل در مرورگر استفاده کرده اید.

سوال: من سعی کردم فایل HTML ام را ویرایش کنم. اما تغییرات در مرورگرم نشان داده نشد. چرا؟

جواب: مرورگر صفحه را Cache کرده بنا بر این یک صفحه را دو بار نمی خواند. هنگامی که شما یک صفحه را تغییر می دهید مرورگر متوجه نمی شود. از کلید REFRESH/RELOAD مرورگر استفاده کنید تا آن را مجبور کنید صفحه را دوباره بخواند.

سوال: از چه مرورگری باید استفاده کنیم؟

جواب: شما می توانید تمام این آموخته ها را با مرورگرهای متعارف انجام دهید مثل Internet Explorer,Google Chrome ,Mozilla و Opera.

تمرین عملی ۲:

یک صفحه وب ایجاد کنید که در قسمت عنوان(title) آن نام خود را به انگلیسی نمایش دهد و در قسمت بدنه(body) هم عبارت “Filup” را نشان دهد.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هاست