برای این منظور ویرایشگر NotePad را اجرا نموده، كد html موردنظر خود را در آن تایپ نمایید و سپس آن را با پسوند htm. يا html . ذخیره نمایید. درنهایت برای مشاهده صفحه از یک مرورگر، مانند Internet Explorer استفاده نمایید.
آموزش html
می توان html را پایه ای ترین ساختمان برای طراحی وب سایت در نظر گرفت.
(ادامه مطلب آموزش html)
ساخت اولین صفحه وب
زبان html از تعداد زیادی تگ تشکیل می شود. هر یک از این تگها دارای ویژگی هایی نیز می باشند. این تگها تعیین می کنند که یک صفحه چگونه باید در مرورگر برای کاربری که از طریق اینترنت آن را مشاهده می کند، نمایش داده شود. هر تگ در داخل >> قرار میگیرد. تعداد زیادی از تگهای html دارای تگ شروع و تگ پایان هستند. توجه: زبان html نسبت به حروف بزرگ یا کوچک حساس نیست، ولی ما برای تمایز بین تگهای html و دیگر عناصر، آنها را با حروف بزرگ نمایش می دهیم
<html > معروف ترین و ساده ترین تگ در زبان html است. تمام دستورات و تگهای html باید بين <html > و <html /> قرار گیرد.
تگ <head> باید بلافاصله بعد از تگ html > قرار گیرد. این تگ باید با تگ <head/> خاتمه یابد. به طور کلی هر صفحه html از دو قسمت head و body تشکیل می گردد. دربخش head برخی ویژگی های صفحه مانند عنوان آن تعیین می شود. مهمترین تگی که در داخل تگ <head> قرار می گیرد، تگ <title> است. تگ <title> نیز با تگ <title/> خاتمه می یابد. عنوان یک صفحه، توضیحی در مورد صفحه است که در نوار عنوان مرورگر ظاهر می شود.
توجه: توضیحی که برای عنوان یک صفحه قرار می گیرد، فقط می تواند شامل حروف و اعداد باشد.
کل بدنه صفحه، باید در بین تگهای <body> و <body/> قرار بگیرد. قسمت بدنه، بخش اصلی هر صفحه وب است که شامل متن، تصوير، جدولها و عناصر دیگری است که کاربردر هنگام ملاقات صفحه در وب، آنها را مشاهده خواهد کرد.
(ادامه مطلب آموزش html)
مشاهده صفحه در مرورگر
برای مشاهده صفحه ای که ساخته اید، از یک مرورگراستفاده نمایید. این کار باعث می شود تا درستی صفحه وب خود را در اینترنت بررسی نمایید. مرورگر، صفحه حاوی کدهای html را خوانده و تگهای آن را تفسیں نموده و آن را به نمایش در می آورد. با توجه به اینکه مرورگرهای مختلف ممکن است صفحه شما را به طرق مختلفی تفسیر نموده و نمایش دهند، بهتر است آن را در مرورگرهای دیگر نیز مشاهده نمایید.
شروع یک پاراگراف جديد
یک پاراگراف، متنی شامل یک یا چند سطر است، که مفهوم تقریبا مستقلی دارد و از سطر جدیدی شروع می شود. در اغلب صفحات وب معمولا از متون و پاراگرافها بسیار استفاده می شود.در صورتی که شما در نوشتن پاراگراف خود از کلید Enter برای رفتن به سطر جدید استفاده نمایید.معمولا اغلب مرورگرها آن را نادیده می گیرند. در html برای شروع یک پاراگراف جدید، باید متن مورد نظر را دربین تگهای <P> و <P/> قرار داد.
(ادامه مطلب آموزش html)
شروع یک سطر جديد
برای شروع یک سطر جديد، باید از تگ <br> استفاده نمود. نام این تگ از کلمه break به معنای شکستن گرفته شده است. به این معنی که هر متنی که بعد از <br> قرار بگیرد، شکسته شده و در سطر جديد قرار می گیرد. این تگ برخلاف تگهای دیگری که تا اینجا آموختید، تگ پایان ندارد.
ایجاد سرتیتر (heading)
سرتیترها عناوینی از یک صفحه هستند که باعث وضوح بیشتر صفحه شده و موجب میشوند کاربر سریعتر یه اطلاعات خود دست یابد.سرتیترها به صورت درشت و Bold نمایش داده می شوند.
شش سطح از سر تیترها در html وجود دارند که با h1,h2,h3,h4,h5,h6 بیان می شوند.تگ <h1> درشترین و تگ <h6> ریزترین سرتیتر است.این تگ ها دارای تگ پایانی هستند.متنی که می خواهید به عنوان سرتیتر نمایش دهید در بین این تگ ها قرار دهید.
به عنوان مثال :
<h1>یک متن سرتیتر</h1>
پیش فرمت کردن متن (PreFormat)
همان طور که قبلا اشاره شد، معمولا مرورگرها فاصله های درج شده در متن را نادیده می گیرند. تگ<pre> باعث می شود مرورگر هر متنی که در بین <pre> و <pre > قرار دارد را از این قاعده مستثنی نماید. به عبارت دیگر در این مورد مرورگر فواصل درج شده در متن را در نظر میگیرد. هنگامی که شما متنی را پیش فرمت می نمایید، مرورگر در هنگام نمایش آن، علاوه بر لحاظ نمودن فواصل موجود در متن، حتی برای تنظیم متن با اندازه پنجره مرورگر، عمل Wrapping نیز انجام نمی دهد. در این مورد خود برنامه نویس باید فواصل را به طور مناسب تنظیم نماید. یکی دیگر از فواید این تگ، ایجاد جدول های ساده در متن بدون استفاده از تگ <table> می باشد. با توجه به عمل پیش فرمت، فواصل موجود بین ستون های جدول در مرورگر به خوبی نمایش می یابد.
(ادامه مطلب آموزش html)
افزودن توضیحات (Comments)
توضيحات، قسمتهایی از یک سند html هستند که حاوی دستور یا تگ html نيستند و مرورگر آنها را نادیده می گیرد. توضيحات متونی هستند که برنامه نویس برای اطلاع خود به کد html اضافه می نماید. مثلا توضیحی برای علت استفاده از یک دستور و یا به خاطر سپردن کاری که باید بعدا در آن نقطه انجام شود.
برای اضافه کردن توضیحات باید آنها را در بین علائم –!> و <– قرار داد. مرورگر هر متنی که در بین این دو علامت قرار داشته باشد را نادیده می گیرد.
مثال:
<– example –!>
نکته: در مواردی که برنامه نویسان وب از کدهای جاوا اسکریپت در بین کدهای html استفاده میکنند ولی با مرورگری سروکار دارند که کدهای جاوا اسکرییت را پشتیبانی نمی کند، می توانند برای پنهان کردن این کدها از دید مرورگر، آنها را به توضیحات تبدیل نمایند.
تیم طراحی سایت و سئو سایت وب داران شما را به خواندن ادامه مطلب دعوت می نماید.
درج کاراکترهای ویژه
در html استاندارد می توان کاراکترهای ویژه ای که بر روی صفحه کلید وجود ندارند را جهت نمایش در مرورگر، درج نمود. هر کاراکتر دارای کد اسکی منحصربه فردی است. برای درج یک کاراکتر خاص در متن، باید از علامت ;?#& استفاده کرد. به جای ? كد اسکی آن کاراکتر قرار می گیرد. همچنین هر کاراکتر در html دارای نام مشخصی است که در صورت دانستن نام آن می توان از علامت ;?& استفاده نمود. به جای ? باید نام کاراکتر ویژه را قرار داد.
توجه: کاراکترهای >< ,& از دید html جزکاراکترهای ویژه محسوب می گردند,چون هر یک از آنها جزء کلمات کلیدی در html هستند. مثلا علائم <> برای تگ های html استفاده می شوند. صورتی که می خواهید از آنها استفاده دیگری بنمایید، باید آنها را به صورت فوق درج نمایید.لازم به ذکراست که در این کاراکترها به ترتیب برابر 60 ,62 .34 ,38 وی معادل اسمی آنها به ترتیب برابر ;lt&و ;amp ; & quot ; , & gt& است.
ویژگی های عام در html
قبل از اینکه این فصل را به پایان ببریم، بد نیست نگاهی به چند ویژگی عمومی که تقریبا در تمام تگ های html قابل استفاده هستند، بیندازیم. این ویژگی ها شامل style ، CLASS، ID و title هستند
(ادامه مطلب آموزش html)
ویژگی ID
این ویژگی یک شناسه يكتا به دستوری از html نسبت می دهد. از این شناسه در ارجاعهای بعدی به این دستور استفاده می شود. نامی که برای شناسه انتخاب می شود، باید ترکیبی از حروف و ارقام باشد به طوری که با رقم شروع نشود. یکی از کاربردهای ID در شیوه نامه ها است، که بعدا در مورد آن بیشتر صحبت خواهیم کرد.
ویژگی CLASS
این ویژگی، نام کلاسی که این دستور از html به آن کلاس تعلق دارد را تعیین می کند. این ویژگی باعث می شود که بتوانیم مجموعه ای از دستورات html را به دلخواه انتخاب نموده و آنها را در یک کلاس مشخص قرار دهیم. بعدا میتوانیم برای تمام دستوراتی که متعلق به این کلاس هستند.عمل معینی را انجام دهیم، یک کاربرد این ویژگی در شیوه نامه ها است.
ویژگی style
ویژگی style این امکان را میدهد که بتوانیم قواعد خاصی را تعریف نماییم و آن را در کل صفحه تعميم دهیم. کاربرد اصلی این ویژگی در شیوه نامه است. با استفاده از این ویژگی می توان قواعد شيوه – نامه را برای کل سند html تعريف و اعمال کرد.
ویژگی title
این ویژگی برای ایجاد متن توضیحی برای یک عنصر از html به کار می رود. وقتی نشانگر ماوس در مرورگر بر روی این عنصر قرار گیرد، این متن توضیحی برای راهنمایی کاربر، نمایان می شود.
علاوه بر این شما می توانید برای آموزش های حرفه ای به سایت https://www.w3schools.com/html/ مراجعه فرمایید.
