تمام صفحات وب با نوعی از HTML ساخته می شوند. لذا برای ایجاد وب سایت های پیشرفته یادگیری HTML ضروری می باشد. در این دوره آموزشی سعی شده است که با به کارگیری مثال های فراوان و دوری از هر گونه اضافه گوِیی در سریعترین زمان ممکن توانایی ایجاد صفحات وب بدون نیاز به برنامه ای کمکی در شما ایجاد گردد.
مقدمه ای بر وب و HTML
وب گسترده جهانی
وب گسترده جهانی(www , World Wide Web) که معمولا فقط وب گفته می شود؛ شبکه ای است که تمام رایانه های متصل به آن را در سراسر جهان به هم وصل می کند؛ و تمام رایانه ها در وب می توانند با هم ارتباط داشته باشند.
www چگونه کار می کند ؟
اطلاعات وب در فایلهایی به نام Web Page قرار می گیرند که آنها نیز در رایانه هایی به نام Web Server قرار دارند و رایانه ها برای دیدن صفحات وب از استانداردی ارتباطی به نام HTTP (Hyper Text Transfer Protocol ) استفاده می کنند. رایانه های متصل به وب اطلاعات موجود در Web Page ها را از طریق برنامه هایی با نام مرورگر وب (Web Browser) نشان می دهند. معمولترین مرورگرها که مورد استفاده قرار می گیرند Internet Explorer وNetscape Navigator می باشند.
چگونه مرورگرها صفحات وب را نشان می دهند ؟
همه صفحات وب شامل دستورالعمل هایی برای نمایش توسط مرورگر ها هستند، و مرورگر ها با خواندن این دستورالعمل ها صفحات را نشان می دهند. دستورالعمل های نمایش صفحات وب، برچسبهای HTML
(Hyper Text Markup Language) نامیده می شوند مانند:
یک فایل HTML چیست ؟
یک فایل HTML فایل متنی ساده ای شامل برچسب ها (Tag) می باشد؛ که بهتر است پسوند html یا htm داشته باشد و می تواند توسط یک ویرایشگر ساده متن مانند Notepad ساخته شود. برای بهتر روشن شدن مطلب بهتر است یک فایل HTML بسازیم. در Windows برنامه Notepad را اجرا کنید و متن زیر را بنویسید :
این فایل را با نام "Test.htm" ذخیره کنید. حال مرورگر اینترنت خود را باز کرده و گزینه Open یا Open Page را از منوی File مرورگر انتخاب کنید؛ یک جعبه محاوره ای باز خواهد شد، Browse یا Choose Fileرا انتخاب کنید و فایل"Test.htm" که هم اکنون ساخته اید را بیابید، انتخابش کنید و روی Open کلیک کنید. حال شما یک آدرس مانند:
"D:\My Documents\Test.htm" را در جعبه محاوره ای خواهید دید. روی OK کلیک کنید، مرورگر صفحه ساخته شده توسط شما را نشان می دهد.
بدین ترتیب شما اولین صفحه HTML خود را بدون استفاده از برنامه های طراحی وب و فقط با یک ویرایشگر متن ساده ساختید و نتیجه آن را نیز توسط مرورگر دیدید. حال بیایید کمی درباره صفحه ای که ساخته اید صحبت کنیم :
اولین برچسب در فایل HTML شما <html> است. این برچسب به مرورگر می گوید که این شروع یک فایل HTML است. آخرین برچسب در فایل شما </html> است. این برچسب به مرورگر می گوید که این پایان یک فایل HTML است. نوشته های بین برچسب <head> و برچسب </head> اطلاعات سربرگ می باشند و در پنجره مرورگر نمایش داده نمی شوند. متن بین برچسب <title> و برچسب </title> عنوان فایل می باشد و در نوار عنوان مرورگر نمایش داده خواهد شد. متن بین <body> و </body> توسط مرورگر نشان داده خواهد شد. همچنین متن بین <b> و</b> به صورت پررنگ نمایش داده می شود.
نکته ای درباره ویرایشگرهای HTML :
شما می توانید صفحات HTML را با ویرایشگرهای WYSIWYG
(What You See Is What You Get) مانند: FrontPage و Claris Home Page و Adobe PageMillبه جای نوشتن برچسبهای مورد نیاز در یک فایل متنی ساده؛ ویرایش نمایید. اما اگر می خواهید یک طراح حرفه ای صفحات وب شوید بهتر است از یک ویرایشگر ساده متن استفاده کنید تا HTML را به خوبی درک کنید و در مباحث پیشرفته به درستی و با تسلط از آن استفاده کنید.
برچسبهای HTML
برچسبها برای مشخص کردن عناصر فایل HTML استفاده می شوند و توسط دو حرف < و > احاطه می شوند. برچسبها معمولا به صورت جفت استفاده می شوند مانند <b> و </b> ؛ برچسب اول، برچسب ابتدایی و برچسب دوم، برچسب انتهایی نامیده می شود و متن بین آنها مندرجات عنصر می باشد. برچسبها به بزرگی یا کوچکی حروف حساس نیستند مثلا <b> همانند <B> می باشد اما ما در این کتاب از حروف کوچک استفاده می کنیم. اگر می خواهید خود را برای استفاده از نسل جدید HTML آماده کنید شما نیز بهتر است از حروف کوچک استفاده کنید. ضمنا این پیشنهادی است که W3C (World Wide Web Consortium) برای استفاده از XHTML می کند.
عناصر HTML
برای روشن شدن مفهوم عنصر به دو مثال زیر بسنده می کنیم:
خط زیر یک عنصر است:
این عنصر با برچسب ابتدایی <b> شروع شده و با برچسب انتهایی </b> پایان می پذیرد و This text is bold نیز مندرجات عنصر است.
خطوط زیر نیز مجموعا یک عنصر می باشد که شروع آن با برچسب ابتدایی <body> و پایان آن با برچسب انتهایی </body> می باشد.
مشخصه برچسبها
برچسبها می توانند دارای مشخصه (Attribute) باشند. مشخصه ها می توانند اطلاعات بیشتری در باره عناصر HTML صفحه شما تدارک ببینند.
برچسب <body> عنصر بدنه صفحه شما را تعریف می کند. با اضافه کردن مشخصه bgcolor شما می توانید به مرورگر بگویید که رنگ پس زمینه شما مثلا قرمز باشد؛ مانند:
برچسب <table> یک جدول ایجاد می کند. با اضافه کردن مشخصه border می توانید به مرورگر بگویید که مثلا جدول شما حاشیه ندارد؛ مانند:
مشخصه ها همواره به شکل جفت نام و مقدار به کار می روند: name="value" ؛ و همواره به برچسب ابتدایی اضافه می شوند. در ضمن بهتر است که مقدار مشخصه ها بین علامتهای نقل قول قرار گیرند.
برچسبهای اساسی HTML
عنوانها
عنوانها توسط برچسب <h1> تا <h6> ایجاد می شوند که <h1> بزرگترین عنوان و <h6> کوچکترین عنوان را ایجاد می کند. HTML به طور خودکار یک خط خالی قبل و بعد از عنوان اضافه می کند. به مثال زیر توجه کنید.
پاراگراف
پاراگرافها توسط برچسب <p> ایجاد می شوند؛ و همانند عنوانهای HTML به طور خودکار یک خط خالی قبل و بعد از عنوان اضافه می کند.
شامل 48 صفحه فایل word قابل ویرایش
دانلود مقاله دوره آموزش HTML