آموزش HTML بصورت کامل همراه با مثال عملی
برای آموزش هر زبان برنامه نویسی مبتنی بر وب ابتدا باید HTML را یاد بگیرید. زیرا برای نمایش کدهای شما در مرورگر باید از اچ تی ام ال استفاده کرد. ساده بگویم پایه و پیش نیاز هر زبان برنامه نویسی، آموزش HTML بصورت صحیح و اصولی است که برای ساختن یک صفحه وب و محتوای آن استفاده می‌شود. به عنوان مثال، محتوای یک صفحه‌ی وب با استفاده از مجموعه‌ای از پاراگراف‌ها، تصاویر و جداول داده ساخته می‌شود. مطالبی که در ادامه مطرح می شود درک ساده‌ای از آموزش HTML و توابع آن را به شما میدهد.
آموزش HTML |HTML چیست؟
قبل از آموزش HTML باید معنای آن را درک کنیم. HTML مخفف عبارت Hyper Text Markup Language است. این عبارت به معنی زبان نشانه گذاری فرا متن است. این تعریف اندکی گنگ به نظر می رسد و اچ تی ام ال را به صورت واضح توضیح نمی دهد. اما اگر بخواهیم یک تعریف ساده داشته باشیم، می گوییم تمامی کد های همه زبان های برنامه نویسی برای این که در مرورگر ها نمایش داده شوند به کدهای HTML تبدیل می شوند.
به این معنی که همه مرورگر ها فقط کدهای HTML را می شناسند و هیچ مرورگری کد های زبان PHP و یا ASP و … را درک نمی کنند. در نهایت کدهای هر زبان برنامه نویسی به کد های قابل فهم HTML تبدیل یا کامپایل شده و به مرورگر فرستاده می شود که برای مرورگر قابل فهم و درک است.
نشانه گذاری در آموزش HTML
منظور از نشانه گذاری در بحث آموزش HTML چیست؟ وقتی می گوییم HTML زبان نشانه گذاری است یعنی تمامی اجزا در صفحه نشانه گذاری می شوند و به مرورگر دستور داده می شود که هر چیزی را در کجا نشان بدهد. این وظیفه بر عهده تگ هاست. تگ ها بخش های مختلف را از هم جدا می کنند و محل نمایش آنها را تعیین می نمایند که به این کار نشانه گذاری گفته می شود.
مثلا فرض کنید شما می خواهید یک ساختمان بسازید. شما باید محل مناسب آشپزخانه، راه پله، پذیرایی و حنی دستشویی را مشخص نمایید. هیچ وقت حمام نمی تواند وسط پذیرایی باشد یا آشپزخانه بیرون از آپارتمان قرار بگیرد. به این کار نشانه گذاری می گوییم و مشخص می کنیم هر المانی کجا قرار بگیرد و در عین حال از هم جدا باشند.
حال فرض کنید در یک صفحه وب شما می خواهید از یک عکس در ابتدای صفحه استفاده کنید و یا یک سایدبار در سمت چپ صفحه ایجاد نمایید. پس هیچگاه footer نمی تواند در ابتدای صفحه مرورگر باشد. شما باید دقیقا نشانه گذاری کنید که چه المانی در کجا قرار بگیرد. این کار از طریق HTML صورت می گیرد.
مفهوم تگ Tag در آموزش HTML
تگ در انگلیسی (Tag) به معنای برچسب است. عمل جداسازی بخش ها و نشانه گذاری آن ها به وسیله تگ ها انجام می گیرد. بعبارتی HTML بوسیله تگ ها هر بخش را برچسب گذاری می کند و ترتیب نمایش و محل نمایش آنها را تعیین می کند. همانطور که قدرت یک ارتش از سربازان آن نشات می گیرد، قدرت اچ تی ام ال هم از تگ هایش تامین می شود.
انواع تگ ها در آموزش HTML
تگ ها انواع گوناگونی دارند. هر کدام از آنها برای نمایش یک نوع از المان یا بخش به کار می رود. به عبارتی وظیفه هر تگ مشخص و مجزا بوده و هر کدام مسئولیتی دارند. مثلا برای نمایش یک پاراگراف نیاز به تگ p داریم اما برای نمایش عکس ها باید از تگ img استفاده کنیم. شما نمی توانید برای نمایش متن از تگ img استفاده کنید.
شما با استفاده از تگ ها می توانید جدول بسازید یا یک عکس را وارد مرورگر کنید. و یا یک لیست تهیه نمایید یا سایت دیگری را لینک یا پیوند کنید اما هر کدام از این تگ ها باهم متفاوت هستند.
شروع برنامه نویسی و اولین صفحه HTML
در ادامه آموزش HTML می خواهیم با همدیگر شروع به برنامه نویسی با HTML کنیم. اجرای فایل های اچ تی ام ال نیاز به سرور و هیچ فن آوری یا غول شاخداری ندارد. تنها چیزی که شما نیاز دارید یک مرورگر یا Internet Explorer است و یک ادیتور editor شما میتوانید از مرورگر های زیر استفاده کنید:
- گوگل کروم
- موزیلا فایرفاکس
- سافاری
و برای ادیتور هم می توان از همه این ها استفاده کرد:
- Notepad
- ++Notepad
- io
- Sublime Text
و…
در این مقاله و آموزش HTML بنده از ++Notepad و مرورگر کروم استفاده کرده ام که به راحتی قابل دانلود است شما میتوانید از Notepad خود ویندوز هم استفاده کنید.
روش اول:
ابتدا ++Notepad را باز کرده و کدهای زیر را در آن قرار دهید:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p>Hello World!</p> </body> </html>
سپس از طریق منوی file و سپس زیرمنوی save فایل را در هر جایی که خواستیم ذخیره می کنیم فقط دقت کنید که پسوند فایل باید html. باشد. حال اگر به مسیری که فایل را در آن ذخیره کرده اید مراجعه کنید خواهید دید که شمایل فایل به صورت آیکون مرورگرتان خواهد بود.
پس در این مرحله مهم ترین چیز نوشتن صحیح پسوند html. است. چنانچه اگر فایل شما دارای این پسوند نباشد در مرورگر اجرا نخواهد شد. حال اگر به مسیر فایل رفته و آن را باز کنید مرورگر این صفحه را به شما نشان خواهد داد:
در قسمت آدرس بار آدرس فایل را مشاهده می کنید. و در داخل صفحه پاراگراف !Hello World نمایش داده شده است. بدین ترتیب شما اولین فایل و اولین برنامه HTML خود را در نخستین گام آموزش HTML ساختید. تبریک !
روش دوم:
در یکی از درایو ها یک دایرکتوری یا همان فولدر با هر نامی که خواستید ایجاد کنید. بنده در درایو E دایرکتوری به نام HTMLProject ساختم. در داخل دایرکتوری در بالا سربرگ یا منوی view را کلیک کنید. سپس در قسمت راست گزینه options را بزنید. در پنجره باز شده منوی View را بزنید و تیک گزینه Hide extensions for known file types را بردارید تا غیر فعال شود.
در داخل دایرکتوری کلیک سمت راست کنید و از گزینه New گزینه Text Document را کلیک کنید و یک نام دلخواه و پسوند html. با حروف کوچک وارد کنید تا فایل برایتان ساخته شود.
قاعدتا باید شکل و شمایل فایل ساخته شده شبیه آیکون مرورگر شما شود که اگر این چنین نشد باید rename کرده و مجددا در درستی پسوند دقت نمایید. حال باید در ادیتورتان فایل را باز کرده و داخل آن کدهای بالا را قرار دهید سپس اگر فایلتان در مرورگر باز است رفرش کنید یا اگر باز نیست فایل را اجرا کنید. دقت کنید که بعد از هر بار تغییرات در ادیتور، باید فایل را ذخیره و مرورگر را رفرش کنید Ctrl + F5.
آموزش HTML | توضیحات تگ ها
برای آموزش HTML باید از توضیح تگ ها شروع کنیم. در این آموزش تا حد ممکن انواع تگ ها را برای شما توضیح خواهیم داد.
آموزش HTML |تگ DOCTYPE
این تگ جزو تگ ها یا دستورات html نیست و تنها یک دستور العمل راهنما برای مرورگر هاست. در آموزش HTML استفاده از این تگ الزامی نیست اما نبود آن نیز مشکلات بزرگی در مورد نحوه نمایش صفحات سایت های شما بوجود خواهد آورد، پس الزامی است به عبارتی این تگ به مرورگر اعلام می کند که این صفحه یک صفحه html است و در ضمن نسخه html را هم به مرورگر اطلاع می دهد. پس اگر می خواهید صفحات سایت شما در تمامی مرورگر ها شناخته شده و نمایشی یکسان داشته باشند از این تگ استفاده کنید. این تگ، تگ انتهایی ندارد و توسط علامت / هم بسته نمی شود و جهت استفاده کافیست آن را در ابتدای کد های خود به این صورت تایپ نمایید:
<DOCTYPE html!>
آموزش HTML |تگ html
این تگ ستون اصلی صفحه شماست. این تگ همانند یک کاسه یا ظرف است که تمامی تگ های دیگر باید داخل آن قرار بگیرند. تنها تگی که نباید داخل این ظرف قرار بگیرد تگ <DOCTYPE html!> است.
تگ <html> با تگ پایانی <html/> بسته می شود. فضای داخل این دو عبارت ، ظرف یا محدوده کدهای html شما را تعیین می کند به عبارتی کد های HTML شما باید داخل این دو تگ آغاز و پایان قرار بگیرند. در ادامه آموزش HTML تگ هد را بررسی خواهیم کرد.
جهت مطالعه بیشتر در مورد این تگ، می توانید به مقاله تگ html مراجعه بفرمایید.
آموزش HTML |تگ head
به هیچ عنوان نگران اصطلاحات و تگ های توضیح داده شده در آموزش HTML نباشید. به مرور همه آنها توضیح داده خواهد شد.
این تگ شامل اطلاعات متا، عنوان صفحه و لینک های شما خواهد بود. این تگ باید شامل تگ <head> باشد که در پاراگراف بعدی توضیح داده خواهد شد. تگ <head> بعد از تگ html و قبل از تگ body ایجاد شود. شما نمی توانید در این قسمت عکس یا جدول یا یک نوشته را اضافه کنید. این قسمت با تگ پایانی <head/> بسته شود.
تگ هایی که اجازه درج در داخل این تگ را دارند به صورت زیر می باشند: (از توضیحات تگ ها نترسید، به مرور در آموزش HTML توضیح داده خواهند شد)
- تگ <title> برای مشخص نمودن عنوان صفحه
- تگ <style> برای اضافه کردن دستورات CSS یا همان زیباسازی
- تگ <link> برای اضافه کردن فایل های خارجی
- تگ <meta> ارائه اطلاعاتی خاص برای مرورگر ها و ربات ها و خزنده های موتورهای جستجو
- تگ <script> برای اضافه کردن فایل ها یا دستورات جاوااسکریپت
- تگ <base> برای مشخص کردن یک لینک پایه برای تمام لینک های موجود
- تگ <noscript> برای کاربرانی که script مرورگر آنها غیر فعال است متنی جایگزین تعریف می نماید.
داده های اندکی در تگ head به کاربر نمایش داده می شود اما باز وجود این قسمت در هر صفحه برای دسترسی ربات های مرورگر ها حیاتی است. به عبارتی این قسمت از صفحات سایت شما کمک شایانی به سئوی سایت شما خواهند نمود.
آموزش HTML |تگ title
این تگ عنوان صفحه شما را مشخص خواهد نمود. در مثال قبل چناچه به عکس دقت کنید در بالاترین قسمت صفحه عنوان Page Title را مشاهده خواهید نمود. این عبارت همان است که ما با تگ title نوشتیم :
<title>Page Title</title>
این تگ الزاما باید داخل تگ head نوشته شود. وجود این تگ برای سئو نیز الزامی است.
تگ body در آموزش HTML
تمامی چیزهایی که می خواهید به کاربر نمایش داده شود، باید داخل این تگ باشند. دقت کنید که این با تعریف تگ <html> متفاوت است. در معرفی تگ html گفتیم که باید تمامی تگ ها داخل آن قرار بگیرند اما حال در تعریف تگ body می گوییم که هر چیزی که در داخل این تگ باشد نمایش داده خواهد شد.
این تگ بدنه هر صفحه ای است و هرچیزی که بیرون آن باشد نمایش داده نخواهد شد. این تگ به تگ بدنه هم معروف است. این تگ بعد از بسته شدن تگ head ، باز شده و قبل از بسته شدن تگ html ، با تگ پایانی <body/> بسته می شود.
آموزش HTML |طبقه بندی تگ ها :
-
تگ های Inline Level
این نوع از تگ ها، به اندازه محتوای داخل خود جا می گیرند نه بیشتر. تگ های img ، span ، a ، em و … جزو تگ های Inline Level هستند. فضای اشغالی توسط این تگ ها به اندازه محتوای داخل آنهاست.
-
تگ های Block Level
برخلاف تگ های inline level این نوع از تگ ها، یک سطر از صفحه را اشغال می کنند. مانند تگ های div ، p ، form و … این تگ ها حتی اگر محتوای داخل شان کمتر از یک سطر باشد باز به اندازه یک سطر فضا اشغال می کنند.
آموزش HTML |تگ های Heading
پس از تگ بدنه در آموزش HTML به تگ هدینگ می رسیم. تگ های heading برای نوشتن عنوان ها یا تیتر های صفحه شما به کار می روند. این تگ ها در 6 سایز (h1 و h2 و h3 و h4 و h5 و h6) در دسترس هستند. سایز بندی این تگ ها بر اساس درجه اهمیت است. به این صورت که تگ h1 بیشترین درجه اهمیت را دارد پس باید مهم ترین تیتر صفحه در آن نوشته شود و تگ h6 دارای کمترین اهمیت است. علاوه بر درجه اهمیت، هر چقدر از تگ h1 به تگ h6 میرویم سایز فونت نیز کوچکتر می شود. به مثال زیر دقت کنید:
<h1>ProgramStore.ir</h1> <h2>ProgramStore.ir</h2> <h3>ProgramStore.ir</h3> <h4>ProgramStore.ir</h4> <h5>ProgramStore.ir</h5> <h6>ProgramStore.ir</h6>
و اما خروجی :
تمامی تگ های Heading جرو تگ های Block Level هستند.
-
تگ h1
این تگ مهمترین تگ صفحه است. در استفاده از آن وسواس به خرج بدهید. مهمترین عنوان یا سر تیتر صفحه باید در آن نوشته شود. و لزوما تنها یکبار در هر صفحه استفاده نمایید. این نکته یکی از نکات مهم آموزش HTML است.
-
تگ h2
از این تگ برای نوشتن زیر عنوان ها یا تیتر های کوچک استفاده می شود. اهمین آن از h1 کم و از h3 زیاد است.
- از سایر تگ های heading می توان در تیتر های کوچکتر استفاده کرد.
آموزش HTML |تگ p
به این تگ، تگ پاراگراف نیز گفته می شود. برای نمایش یک یا چندین پاراگراف از تگ P استفاده می شود. این تگ توسط تگ پایانی <p/> باید بسته شود و نیز جزو تگ های Block Level می باشد.
وقتی شما یک متن را با تگ p ننمایش می دهید مرورگر ها بلافاصله پاراگراف را تشخیص داده و یک خط خالی به اول و آخر آن به عنوان حاشیه یا margin اضافه می کنند که این فاصله می تواند با دستورات CSS حذف شود.
نمونه استفاده از تگ p در آموزش HTML :
<body>
<p>این یک پاراگراف است </p>
</body>
و خروجی :
آموزش HTML |خاصیت style استایل
یکی از موارد مهم در آموزش HTML یادگیری استایل های تگ هاست. خصوصیات بصری یا جلوه های زیبا نظیر رنگ، حاشیه، فاصله، راست چین یا چپ چین بودن، اندازه فونت، رنگ پشت زمینه و … می توانند به سه روش به تگ ها یا کل فایل HTML اعمال گردند :
- روش خطی
- روش داخلی
- روش خارجی
ما در آموزش HTML به توضیح روش اول خواهیم پرداخت و شما در طول مقاله و آموزش با بقیه روش ها به خوبی آشنا خواهید شد.
در روش خطی ما می توانیم برای تگ هایمان یک خاصیت به نام style تعریف کنیم و سپس دستورات css مربوط به آن تگ را در داخل این خصوصیت بنویسیم. مثلا:
<body> <p style="color:red;">این یک پاراگراف است </p> <p style="color:blue;">این یک پاراگراف است </p> <p style="color:yellow;">این یک پاراگراف است </p> </body>
و در خروجی روی مرورگر داریم :
توجه نمایید که هر تگ p یک سطر را اشغال کرده و این همان خاصیت Block Level بودن آن است.
- خاصیت منسوخ align برای تگ p
در HTML 4 و نسخه های قبل از آن خاصیتی به نام align به تگ p اختصاص داده بودند که به پاراگراف و متن جهت می داد. مثلا راست چین یا چپ چین و غیره . اما در HTML5 این خصوصیت منسوخ اعلام گردید و حال می توان این خصوصیت را به صورت یک دستور css در داخل خاصیت style تعریف کرد :
<body>
<p style="text-align: right;">این یک پاراگراف راست چین است</p>
<p style="text-align: left;">این یک پاراگراف چپ چین است</p>
<p style="text-align: center;">این یک پاراگراف وسط چین است</p>
<p style="text-align: justify;">این یک پاراگراف مرتب است</p>
</body>
و در خروجی داریم:
آموزش HTML |تگ i
اسم این تگ از اولین حرف کلمه Italic به معنای مورب و کج گرفته شده است. از این تگ برای نشان دادن و معرفی یک اسم، یک اصطلاح فنی یا خارجی، یک تفکر و … استفاده می شود. این دستور محتوا را به صورت کج یا italic نشان میدهد و این موضوع باعث اشتیاق برنامه نویسان جوان برای استفاده آن می شود اما بهتر است تنها در مواردی که گفته شد از این تگ استفاده شود.
این تگ باید با تگ پایانی <i/> بسته شود و جزو تگ های Inline Level است.
آموزش HTML |تگ em
نام این تگ از اولین حرف واژه emphasize گرفته شده است که به معنی تاکید است. این تگ ظاهرا همان کار تگ i را انجام می دهد اما در عمل به محتوای داخلش نیز تاکید می کند. پس هر موقع نیاز داشتیم به مرورگر اعلام کنیم که روی مطلبی تاکید داریم بهتر است از این تگ استفاده کنیم.
این تگ باید با تگ پایانی <em/> بسته شود و جزو تگ های Inline Level است.
آموزش HTML |تگ b و تگ strong
اسم تگ <b> از اول کلمه Bold گرفته شده و چنانچه از نامش آشکار است، محتوای داخل خود را برجسته و توپر نشان می دهد. در آموزش HTML استفاده از این تگ زمانی توصیه می شود که شما تگ مناسبی پیدا نکنید به عبارتی این تگ باید گزینه آخر شما برای استفاده باشد.
می توانید تیتر های مهم را با تگ های Heading که قبلا اشاره شد نشان دهید از قبیل h1 و h2 و … .و یا متن هایی که می خواهید روی آنها تاکید کنید باید داخل تگ <em> بنویسد و متن های مهم در داخل <strong> باشند اما تگ <b> را به همین راحتی استفاده نکنید. شما می توانید به جای این تگ از تگ <strong> استفاده کنید.
هر دو تگ جزو گروه Inline Level بوده و باید با تگ پایانی بسته شوند.
آموزش HTML |تقاوت تگ b و تگ strong
در ظاهر هر دو وظیفه برجسته کردن محتوا را برعهده دارن اما در پشت پرده تگ <strong> محتوا را از نظر معنایی نیز مهم حساب می کند. به عبارتی محتوایی که داخل تگ b قرار میگیرند تنها به صورت بولد نشان می دهد بدون اینکه آن را مهم جلوه بدهد. اما تگ strong هم محتوا را برجسته می کند و هم به مرورگر القا می کند که این متن یا کلمه، محتوایی مهم است.
در مثال زیر به خروجی هر چهار تگ i و b و em و strong و ترکیب آنها در آموزش HTML پرداخته ایم :
<body>
<p>my name is <i>Pstore</i></p>
<p>my name is <em>Pstore</em></p>
<p>my name is <b>Pstore</b></p>
<p>my name is <strong>Pstore</strong></p>
<p>my name is <b><i>Pstore</i></b></p>
<p>my name is <strong><em>Pstore</em></strong></p>
</body>
آموزش HTML |تگ br
راحت ترین تگ در آموزش HTML تگ br است. نام تگ br از کلمه Break به معنای شکستن گرفته شده است. این تگ سطر فعلی را شکسته و بقیه متن را به ابتدای سطر بعدی انتقال می دهد. در واقع یک تگ خالی و تهی است. پس هر موقع نیاز داشتیم بدون ایجاد پاراگراف جدید به ابتدای سطر بعد برویم باید از این تگ استفاده کنیم.
در اکثر مواقع زمانی این تگ را به کار می برند که می خواهند در پاراگرافی یک آدرس یا یک شعر بنویسند. به این صورت که قبل و بعد از آدرس یا شعر از تگ break استفاده می کنند.
br یک تگ باز است به این معنی که دیگر نیاز نیست آن را ببندید اما اگر در آینده قصد داشتید با فرمت های XHTML کار کنید باید از الان و در این آموزش HTML به نوشتن این تگ به صورت <br /> عادت کنید.
مثال :
<body>
<p>
ProgramStore.ir
is
the
best.
</p>
<p>
ProgramStore.ir<br />
is<br />
the<br />
best.
</p>
</body>
توجه: اگر دقت کنید در پاراگراف اول ما از دکمه Enter برای ایجاد خط جدید اضافه کرده ایم و در پاراگراف دوم از تگ <br /> اما این نکته که کدام یک عملا سطر جدید ایجاد خواهد کرد باید در خروجی مشاهده کنیم و خروجی :
پس حتما متوجه شدید که استفاده از دکمه Enter کیبورد در قسمت کد، عملا هیچ خط جدیدی ایجاد نخواهد کرد بلکه باید از تگ br استفاده کنیم.
آموزش HTML |تگ hr
در ادامه آموزش HTML به تگ hr می رسیم. از این تگ برای ترسیم خط افقی استفاده می کنیم. ما میتوانید در هر جای سایت که نیاز به یک خط افقی دارید از این تگ استفاده کنید اما در سئو توصیه می شود زمانی این خط را بکشید که می خواهید دو موضوع متفاوت را از هم جدا سازید.
این تگ جز تگ های Block Level بوده و نیز تگ پایانی ندارد، به عبارتی تگ باز است. در نسخه های قبل به صورت <hr> از این تگ استفاده می کردند که امروز هم در بین بعضی برنامه نویس ها رایج است.
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages.....</p>
<hr/>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements.....</p>
</body>
توجه فرمایید که ما دو مطلب با موضوعات متفاوت داریم پس از تگ </ hr> برای ایجاد خط استفاده نمودیم و خروجی :
آموزش HTML |تگ small
این تگ متن داخلش را یک سایز کوچک تر از بقیه نشان می هد. این کوچک تر شدن تنها از لحاظ ظاهر و فونت است نه معنی. به عبارتی محتوای داخل تگ small به هیچ عنوان کم اهمیت تر از سایر مطالب صفحه نخواهد شد.
این تگ با تگ پایانی <small/> بسته شده و جزو تگ های Inline Element است.
مثال:
<body>
<p>ProgramStore.ir</p>
<p><small>Copyright 1999-2050 by Refsnes Data</small></p>
</body>
و خروجی :
آموزش HTML |تگ sub
اسم این تگ از سه حرف ابتدایی کلمه subscript به معنای زیرنویس گرفته شده است. از این تگ برای نوشتن پایین نویس ها استفاده می شود. این تگ محتوای داخل خود را با سایز نیم یا 50 درصد و زیر خط فعلی نشان می دهد. از این تگ برای نوشتن فرمول های شیمیایی نیز استفاده می شود. مثال:
<body>
<p>Almost every developer's favorite molecule is
C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, also known as "caffeine."</p>
</body>
این تگ با تگ پایانی <sub/> بسته شده و جزو تگ های Inline Element است.
آموزش HTML |تگ sup
محتوای داخل تگ sup به صورت بالانویس نشان داده می شود. بالانویس ها به اندازه نیم سایز سایر کاراکتر ها و بالایتر از بقیه حروف و کلمات نشان داده می شوند. بیشترین استفاده این تگ مربوط به فرمول های ریاضیات است:
<body>
<p>X<sup>2</sup>+Y<sup>3</sup>=Z</p>
</body>
این تگ با تگ پایانی <sup/> بسته شده و جزو تگ های Inline Element است.
آموزش HTML | کامنت نویسی در HTML
گاهی اوقات لازم است شما در مورد یک تکه کد یک توضیح مختصر بنویسید اما در مرورگر نمایش داده نشود. این کاریست که اکثر حرفه ای ها انجام می دهند تا هم بقیه تیم به راحتی منظور شما را از آن کد بفهمند و هم نوعی یادداشت یادآوری برای خودشان است. درادامه آموزش HTML این مورد بررسی می شود.
برای این کار کافیست یادداشت ها و کامنت های خود را در داخل این عبارت <– –!> تایپ کنید. به مثال زیر دقت کنید:
<body>
<!-- این پاراگراف درمورد سایت پی استور می باشد -->
<p>ProgramStore.ir is the best for education.</p>
</body>
پس از اجرای کد مشاهده می کنید که متن داخل کامنت در مرورگر نمایش داده نمی شود اما شما به محض دیدن آن، می فهمید که پاراگراف درمورد سایت آموزشی ProgramStore.ir است.
آموزش HTML |تگ a
این تگ جزو المان هایی است که شما در تمامی صفحات وب و آموزش HTML حداقل یک بار از آن استفاده خواهید نمود. به عبارتی جزو مهمترین تگ های HTML است. این تگ برای لینک دهی به کار می رود. اگر می خواهید کاربر با کلیک کردن روی کلمه “خانه” به صفحه home.html برود، یا با کلیک روی کلمه آپارات، به سایت آپارات هدایت شود، باید از این تگ استفاده کنید.
خاصیت href در تگ a
هنگام استفاده از این تگ، لازم است آدرس مقصد لینک را در داخل خصوصیت href قرار دهید. به فرض چنانچه بخواهیم لینکی بسازیم که کاربر با کلیک روی “پی استور” به آدرس https://programstore.ir/ باید چنین عمل کنیم:
<a href="https://programstore.ir/">پی استور</a>
چنانچه مشاهده می کنید آدرس url در داخل href نوشته شد و کلمه نمایشی مابین تگ آغازی و پایانی.
خاصیت target در تگ a
این خصوصیت به شما کمک می کند تا نحوه باز شدن صفحه مقصد یا لینک را تعیین کنید. مقادیری که بیشتر استفاده می شوند و توضیح عملکردشان:
- blank_ : با قرار دادن این مقدار در خصوصیت target به مرورگر اعلام می کنید که لینک را در یک تب جدید باز کن
- self_ : این مقدار به مرورگر اعلام می کند که آدرس لینک را در این تب باز کن. این مقدار همان مقدار default یا دایمی تگ a است. چنانچه شما خصوصیت target را برای لینک ننویسید این مقدار به صورت پیش فرض تنظیم خواهد شد.
<a href="https://programstore.ir/" target="_blank" > Pstore Site </a> <a href="https://programstore.ir/" > Pstore Site </a>
تگ a جزو تگ های Inline Level است و باید با تگ پایانی </a> بسته شود.
آموزش HTML و انواع مقصد در لینک دهی
-
به صفحات داخلی سایت
- اگر فایل ما و مقصد برادر باشند
index.html فایل ماست و همانطور که در شکل بالا سمت چپ دیده می شود این فایل فرزند دایرکتوری HTMLProject و ما می خواهیم در فایلمان لینکی بسازیم با نام HOME که وقتی کلیک می شود به فایل home.html که در همان پوشه است و در واقع او هم فرزند دایرکتوری HTMLProject است، هدایت شود. به href تگ a دقت فرمایید که تنها نام فایل و پسوندش را درج کردیم. زیرا هر دو فایل برادر هستند.
-
- مقصد و فایل ما عمو و برادرزاده باشند
مشاهده می کنید که فایل ما همان فایل index.html و برادر دایرکتوری views است. اما فایل مقصد یا home.html فرزند دایرکتوری views است. به عبارتی index عموی فایل home است. پس در آدرس دهی در فایل عمو ابتدا نام پدر فایل مقصد سپس / و سپس نام فایل مقصد آورده می شود.
اما اگر بخواهیم از فایل برادرزاده به فایل عمو لینک بدهیم باید مطابق شکل زیر عمل کنیم:
همانطور که مشاهده می کنید ابتدا با علامت /.. به یک مرحله قبل یا به یک دایرکتوری قبل باز میگردیم و سپس اسم فایل مقصد را می نویسیم. به عبارتی وقتی علامت /.. را تایپ می کنیم می گوییم از دایرکتوری views خارج شو و برو به دایرکتوری HTMLProject و فایل index آنجاست.
حال فرض کنید ترتیب فایل ها و دایرکتوری به صورت زیر باشد:
حال اگر بخواهیم داخل فایل index به فایل home لینک بدهیم باید href تگ a را اینگونه بنویسیم. اما اگر بخواهیم در داخل فایل home به فایل index لینک بدهیم چه؟
به href دقت کنید. می بینید که ما از /../.. استفاده کردیم که می شود گفت دو بار از /.. استفاده کرده ایم. این به این معنی است که گفته ایم از دایرکتوری views خارج شو و برو به دایرکتوری pages و سپس از دایرکتوری pages هم خارج شو و برو به دایرکتوری HTMLProjest و آنجا فایل index را خواهی یافت.
-
به یک بخش از صفحه فعلی
اگر صفحه فعلی شما طولانی است و می خواهید با قرار دادن یک لینک و کلیک کردن آن، کاربر به قسمتی در میانه ها یا اواخر صفحه هدایت شود، می توانید آیتم مبدا را با id اسم گذاری کنید و سپس در href تگ a آدرس آن آی دی را بدهید.
فرض کنید مقاله ای داریم درمورد آموزش HTML که بسیار طولانی است. می خواهیم در انتهای مقاله لینکی قرار دهیم که کاربر با کلیک روی آن به ابتدای مقاله برود. پس ابتدا، جایی که قرار است کاربر هدایت شود را با id نامگذاری می کنیم:
<h1 id="top">Newspaper<h1>
سپس باید این لینک را آخر صفحه بگذاریم :
<p> <a href="#top"> Top </a></p>
همینطور می توانیم مقاله خود را در ابتدای آن فصل بندی کنیم (مشابه آنچه در این مقاله یعنی آموزش HTML قرار داده ایم) و به صورت لینک قرار دهیم تا کاربر با کلیک روی هر قسمت به مطلب آن هدایت شود.
-
به آدرس خارجی
اگر بخواهیم یک صفحه از صفحات یک سایت دیگر را لینک دهی کنیم، باید آدرس آن صفحه را در قسمت href بیاوریم. به عنوان مثال می خواهیم وقتی کاربر روی کلمه “آپارات” کلیک کرد به سایت آپارات برود :
<a href="https://www.aparat.com/">Aparat</a>
-
- شماره تلفن
می توان در قسمت href تگ a شماره تماس هم درج کرد :
<a href="tel:0214444444">Phone Number</a>
-
- آدرس ایمیل :
<a href="mailto:salar.abapour@gmail.com">gmail address</a>
تگ img در آموزش HTML
تگ img همان مخفف کلمه image به معنی تصویر است پس بدیهی است که برای نمایش عکس ها و تصاویر از آنها استفاده می کنیم. این تگ با خصوصیت src آن قابل استفاده است. src مخفف کلمه source به معنی منبع است. در این خصوصیت باید آدرس تصویر درج شود.
مثال:
<!DOCTYPE html> <html> <head> <title>program store</title> </head> <body> <img src="flower.jpg"> </body> </html>
خاصیت alt برای تگ img
در آموزش HTML توصیه می شود تگ img را همراه با این خصوصیت استفاده کنید. در این قسمت توضیح بسیار کوتاهی درمورد عکس تایپ می کنند. فرض کنید به هر دلیلی تصویر شما در صفحه بارگزاری نشد، آنجاست که خصوصیت alt وارد عمل شده و به جای تصویر نمایش داده خواهد شد:
<img src="flower.jpg" alt="An image of a flower">
پر کردن قسمت alt کمک بزرگی به سئوی سایت شما خواهد کرد.
خاصیت title
این خصوصیت عنوان تصویر شما خواهد بود و زمانی که کاربر ماوس را روی تصویر می برد مقدار آن در یک کادر بسیار کوچک نمایش داده خواهد شد.
<img src="flower.jpg" title="Rose flower">
تنظیم طول و عرض تصویر در تگ img
می توان با خصوصیت های height و width به ترتیب ارتفاع و عرض تصویر را تعیین کرد :
<img src="flower.jpg" alt="An image of a flower" height="500" width="20">
پس از اجرای برنامه حتماً متوجه شدید که چه تغییراتی روی تصویر اتفاق افتاد و خروجی عجیبی برایتان رقم زد. فکر کنم به خوبی متوجه شدید که width و height کدام مقادیر هستند.
توجه : بهتر است شما فقط یک طرف تصویر را تغییر دهید به عبارتی یا width را تغییر دهید و یا height را. بعد دیگر تصویر به صورت اتوماتیک و متناسب با بعد تغییر یافته تغییر خواهد یافت. لازم به ذکر است که مقادیر width و height بر حسب پیکسل است.
قرار دادن تگ img در داخل تگ a
شاید شما بخواهید وقتی کاربر روی عکس کلیک می کند فایل عکس باز شود یا اصلا به سایت مربوط به آن عکس برود:
با این دستور با کلیک روی عکس فایل flower.jpg که در کنار آن است باز خواهد شد. خودتان امتحان کنید:
<body> <a href="flower.jpg"><img src="flower.jpg" alt="An image of a flower"></a> </body>
تگ img جزو تگ های Inline Level بوده و نیز لازم نیست با تگ پایانی بسته شود.
آموزش HTML |تگ video
در ادامه آموزش HTML تگ ویدئو توضیح داده می شود. این تگ برای نمایش فایل های ویدیویی و کلیپ ها به کار می رود. این تگ از HTML5 اضافه شده و از سه فرمت یا پسوند MP4 ، WebM و Ogg پشتیبانی می کند. به عبارتی تنها ویدیو هایی قابل نمایش خواهند بود که جزو یکی از سه فرمت بالا باشند.
استفاده از این تگ بدون <source> امکان پذیر نیست:
همانطور که مشاهده می کنید ابتدا تگ video را تشکیل دادیم و سپس داخل این تگ از تگ source استفاده کردیم. همانند تگ img گزینه src در تگ source نشانگر آدرس فایل ویدیویی است و نیز باید مقدار type را متناسب با نوع فایل تنظیم کنید:
| فرمت یا پسوند فایل ویدویی | نوع فایل |
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
باز یادآور می شویم که تمام روابط پدر و پسر و فلان وفلان در تگ a در این src هم حاکم است. و اما درمورد پشتیبانی مرورگر های مختلف از انواع فرمت های ویدیویی داریم :
| Browser | MP4 | WebM | Ogg |
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES from Firefox 21 from Firefox 30 for Linux |
YES | YES |
| Safari | YES | NO | NO |
| Opera | YES From Opera 25 |
YES | YES |
چناچه مشاهده می کنید مرورگر کروم و فایرفاکس از هر سه فرمت پشتیبانی می کند اما مرورگر سافاری تنها از پسوند MP4 و این نکته باید به هنگام طراحی صفحات مد نظر شما باشد.
اگر ویدیو لود نشد:
اگر در شکل بالا دقت کنید عبارت “Your browser does not support the video tag.” را نیز می بینید. این عبارت بین تگ آغاز و پایان video و پس از source نوشته شده است اما این عبارتی تنها زمانی قابل مشاهده است که فایل ویدیویی شما به هر دلیلی بالا نیاید و لود نشود. پس شما می توانید از عبارت هایی نظیر این در هنگام لود نشدن ویدیو استفاده کنید.
توجه: لازم به ذکر است که خصوصیت های زیر متعلق به تگ video است نه تگ source
خاصیت controls
اگر می خواهید دکمه های کنترل ویدیو نظیر دکمه چخش، تنظیم صدا، توقف، بزرگنمایی، صدا و … را نیز داشته باشد باید از این خصوصیت استفاده کنید.
خاصیت loop
این خصوصیت برای آنست که ویدیو بعد از اتمام دوباره اتوماتیک وار پخش شود. به نوعی همان auto repeat است.
تنظیم طول و عرض تگ video
مانند تگ img شما در تگ video نیز قادر به تغییر ارتفاع و عرض ویدیو می باشید که به ترتیب با خصوصیت های height و width با واحد پیکسل تعیین می شوند:
در جدول زیر با سایر خصوصیت های تگ video آشنا می شوید :
| خصوصیت | مقدار | توضیح |
| autoplay | بدون مقدار | در صورتی که وجود داشته باشد ویدئو به محض اینکه آماده شود خود به خود پخش می شود |
| controls | بدون مقدار | افزودن دکمه کنترل ویدیو مثل استارت، استاپ، تنظیم صدا و … |
| height | پیکسل | تنظیم ارتفاع ویدیو |
| width | پیکسل | تنظیم پهنای ویدیو |
| loop | بدون مقدار | در صورت وجود پس از اتمام ویدیو دوباره پخش خواهد شد |
| muted | بدون مقدار | بی صدا کردن ویدیو به صورت پیش فرض |
| poster | آدرس | آدرس تصویری که می خواهید به عنوان پیش نمایش ویدیو باشد |
| Preload | بدون مقدار | ویدئو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay تنظیم شده باشد این خاصیت نادیده گرفته می شود. |
| src | آدرس | آدرس فایل ویدیویی که باید پخش کنیم |
نکته مهم درمورد تگ video
این مطلب به عنوان یک مطلب تکمیلی و حرفه ای است. می توانیم تگ video را به صورت زیر هم استفاده کنیم:
اما اشکال کار چیست و چرا اغلب تگ ویدیو اینگونه به کار برده نمی شود؟
در جدول فرمت ها دیدیم که پسوند ogg در مرورگر های کروم و فایرفاکس پشتیبانی می شود اما برای مرورگر های سافاری و Internet Explorer بدون مفهوم است. پس کروم و فایرفاکس ویدیو را لود خواهند کرد اما سافاری و Internet Explorer خیر.
تگ source به شما این امکان را میدهد که شما به چندین فایل لینک بدهید. پس میتوانید ویدیوی موردنظر را در دو پسوند mp4 و یکی از پسوند های دیگر مثلا ogg تهیه نموده و با استفاده از تگ source به هردوی آنها اشاره کنید. مرورگر اولین فایلی که می شناسد را انتخاب خواهد کرد. اگر به هر دلیلی مرورگر فایل اول را نشناسد، آنگاه به سراغ فایل دوم رفته و آن را اجرا خواهد کرد. پس می توانید مطمئن باشید که ویدیوی شما لود خواهد شد :
آموزش HTML |تگ iframe
مبحث مهم دیگر دز آموزش HTML تگ iframe است. این تگ جهت نمایش عکس، ویدیو، یک صفحه از سایت خود یا سایت دیگر و … به کار می رود. فرض کنید شما می خواهید در یکی از صفحات سایت خود، صفحه دیگری از سایت دیگر یا یک ویدیو از یوتیوب و آپارات قرار دهید. اینجاست که این تگ ارزش واقعی خود را نشان خواهد داد.
Iframe یک پنجره یا قاب در صفحه شما ایجاد می کند که موارد ذکر شده در آن نمایش داده می شوند. مثال :
<iframe src="https://programstore.ir"></iframe>
می توانید با زدن اجرای برنامه خودتان ببینید که خروجی به چه صورت است. مشاهده می فرمایید که در یک پنجره اما در صفحه ای از سایت خودتان، توانستیم صفحه ای از سایت programstore را بیاوریم. در ادامه آموزش HTML به توضیح خصوصیت های مهم این تگ می پردازیم.
خاصیت src در تگ iframe
src مهمترین خصوصیت iframe است. همانگونه که در تگ img از src استفاده کردیم در این خصوصیت نیز باید آدرس عکس، ویدیو و یا صفحه سایت مورد نظر را وارد کنیم. ابتدا می خواهیم یک عکس که در دایرکتوری خود پروژه است (کنار فایل index.html) وارد کنیم:
به آدرس فایل در خصوصیت src توجه نمایید. از کد زیر اجرا بگیرید و خروجی آن را مشاهده کنید.
<iframe src="flower.jpg"></iframe>
مشاهده می کنید که عکس مورد نظر وارد شد اما با طول و عرض کم که در بحث های بعدی به تنظیم طول و عرض آن نیز خواهیم پرداخت. می توانیم یک فایل ویدیویی هم که در همان دایرکتوری کارمان هست را وارد کنیم:
اینجا نیز آدرس فایل ویدیویی را در src وارد کردیم. ویدئوی video.mp4 یک فایل هست که قبلاً در دایرکوتری قرار دادیم. برای مشاهده اجرای برنامه زیر را ببینید.
<iframe src="video.mp4"></iframe>
خاصیت width و height و تنظیم ابعاد تگ iframe
می توان عرض و ارتفاع پنجره تگ iframe را با این خصوصیت تغییر داد. می خواهیم در همان عکس تصویر را کمی بزرگتر کنیم:
توجه داشته باشید که مقادیر width و height هر دو بر اساس پیکسل می باشند. در خروجی می توانید نتیجه را پس از اجرای برنامه مشاهده کنید.
<iframe src="flower.jpg" width="1000" height="1000"></iframe>
خاصیت name
یکی دیگر از خصوصیت های تگ iframe خصوصیت نام است. شما می توانید برای تگ iframe نام تعریف کنید و از آن در فایل های جاوا اسکریپت استفاده نمایید. اما می خواهیم کاربرد جالب تر و کاربردی تر این خصوصیت را در اینجا توضیح دهیم :
<body> <iframe src="flower.jpg" name="iframe_1"></iframe> <br/> <a href="https://www.programstore.ir" target="iframe_1">Pstore</a> </body
در آموزش HTML مشاهده می کنید که ابتدا یک iframe تعریف کردیم که عکس یک گل را نشان خواهد داد و نیز یک نام با خصوصیت name به آن اختصاص دادیم تا در بتوان در لینک زیرش استفاده کنیم. اما در پایین لینکی تعریف کردیم که خصوصیت target آن همان نام iframe بالایی است. به عبارتی وقتی روی کلمه PStore کلیک شود، سایت programstore در قاب بالایی نشان داده خواهد شد:
حذف border از تگ iframe
اگر در مثال های بالا به خروجی ها دقت کنید، یک خط یا همان border در اطراف قاب یا پنجره مشاهده خواهید نمود. و شاید بخواهید این خط و خطوط را از اطراف قاب حذف کنید. اینجاست که خصوصیت style به کارتان خواهد آمد :
<body>
<iframe src="https://www.programstore.ir" style="border: none;"></iframe>
</body>
بدین ترتیب حاشیه خط مانند از اطراف قاب حذف خواهد شد.
آموزش HTML |اضافه نمودن ویدیوی آپارات
برای اضافه کردن یکی از ویدیوهای سایت آپارات می توان از تگ iframe استفاده کنیم:
ابتدا یک تگ iframe ایجاد کنید ولی قسمت src آن را خالی بگذارید.
یکی از ویدیوهای سایت آپارات را باز می کنیم:
در شکل بالا قسمت سه نقطه که دورش خط مشکی کشیده شده است را کلیک کرده و سپس دریافت کد امبد را انتخاب می کنیم:
سپس مطابق شکل زیر گزینه “کد آی فریم” را فعال کرده(مرحله 1) و سپس کلید کپی را کلیک می کنیم(مرحله2) :
کد کپی شده را در جایی paste می کنیم و از از میان کد ها src را پیدا کرده و مقدارش را در iframe ای که خودمان قبلا ایجاد کرده ایم می گذاریم. نهایتا در مرورگر ویدیوی انتخابی شما نمایش داده خواهد شد. در این حالت می توانیم حتی طول و عرض و سایر استایل ها را به ویدیو اضافه نماییم.
آموزش HTML |نمایش ویدیوهای یوتیوب در سایت
در ادامه آموزش HTML می رسیم به نمایش ویدئوها یوتیوب در سایت. جهت نمایش هر یک از ویدیو های youtube مراحل زیر را دنبال کنید:
مطابق شکل بالا گزینه share را کلیک کنید. از پنجره باز شده گزینه Embed را انتخاب نمایید:
مطمئنا پنجره زیر باز خواهد شد که شما باید گزینه copy را کلیک بفرمایید :
حال می توانید در هر قسمتی از کد هایتان، چیزی را که کپی کرده اید، paste کنید. مشاهده خواهید کرد که شما در واقع یک تگ iframe با یک src و استایل های خاص کپی کرده بودید. و در مرورگر نیز خواهید داشت :
لازم به تذکر است که انجام این عملیات نیازمند عبور از فیلتر هاست.
آموزش HTML | لیست در HTML و تگ ul و li
ul مخفف عبارت Unordered List به معنای لیست نامرتب است. تگ ul و li برای ایجاد لیست هایی به کار می رود که ترتیبی بر اساس شماره گذاری ندارد. در کنار همه آیتم های لیست شما، تنها یک داریره توپر مشکی خواهد افتاد.
در آموزش HTML برای ایجاد این لیست، ابتدا یک تگ ul باز کرده و مابین تگ آغازی و پایانی ul ، تگ li را ایجاد می کنیم. سپس موارد لیست داخل تگ li نوشته خواهد شد:
<body>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</body>
خاصیت type
با استفاده از این خصوصیت می توان شکل مربوط به دایره های توپر را تغییر داد. مثلا اگر بخواهیم این دایره ها به صورت مربع درآید از مقدار square برای type استفاده کنیم:
<body>
<ul type="square">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</body>
در زیر مقادیری که می توان برای خصوصیت type اختصاص داد و عملکرد هر مقدار توضیح داده شده است:
| مقدار | توضیح مقدار |
| disk | این مقدار پیش فرض است و باعث نمایش دایره توپر می شود. |
| circle | این مقدار به جای دایره توپر، دایره توخالی نمایش خواهد داد. |
| square | این مقدار به جای دایره توپر، مربع توپر نمایش خواهد داد. |
| none | این مقدار هیچ علامتی را نشان نخواهد داد. |
لازم به ذکر است که خصوصیت type در HTML5 دیگر پشتیبانی نمی شود اما باز می توانیم تمامی مقادیر بالا را در خصوصیت style بدین ترتیب وارد کنیم :
<ul style="list-style-type:square;">
آموزش HTML |تگ ol و لیست مرتب در HTML
ol مخفف عبارت Ordered List و به معنای لیست مرتب است. زیرا لیست هایی که با این تگ ساخته می شوند می توانند بر اساس اعداد، حروف انگلیسی و یونانی مرتب سازی شوند. لازم به ذکر است که استفاده ار این تگ نیز مستلزم استفاده از تگ li است. در زیر می توانید مثال کوچکی از کاربرد این تگ را از آموزش HTML ببینید:
<body>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ol>
</body>
همانگونه که مشاهده می فرمایید اجزای لیست با اعداد انگلیسی به ترتیب شماره گذاری شده است. البته می توان با خصوصیت type به جای اعداد از حروف انگلیسی و رومی نیز استفاده کرد :
خاصیت type
در خصوصیت type می توان تعیین نمود که لیست بر چه اساسی نمایش داده شود. در مثال زیر می خواهیم اجزای لیست با حروف انگلیسی بزرگ ترتیب بندی شوند:
<body>
<ol type="A">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Olive</li>
</ol>
</body>
در جدول زیر مقادیری که می توان برای type انتخاب نمود، توضیح داده می شوند:
| مقدار | توضیح مقدار |
| 1 | این مقدار لیست را با اعداد مرتب خواهد کرد. |
| a | این مقدار لیست را با حروف کوچک انگلیسی مرتب خواهد کرد. |
| A | این مقدار لیست را با حروف بزرگ انگلیسی مرتب خواهد کرد. |
| i | این مقدار لیست را با حروف کوچک رومی مرتب خواهد کرد. |
| I | این مقدار لیست را با حروف بزرگ رومی مرتب خواهد کرد. |
خاصیت reversed
Reversed به معنای معکوس شد است. پس طبیعی است که با وارد کردن این خصوصیت لیست معکوس خواهد شد.
<body>
<ol type="A" reversed>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Olive</li>
</ol>
</body>
خاصیت start
حتی می توان تعیین کرد که لیست شما از کدام شماره شروع شود.
<body>
<ol start="10">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Olive</li>
</ol>
</body>
آموزش HTML | تگ div
نام این تگ از کلمه Division که به معنای بخش و تقسیم است گرفته شده است. این تگ یکی از پر کاربرد ترین تگ های HTML است. از این تگ برای بخش بندی و جداسازی قسمت های مختلف یک صفحه HTML استفاده می شود. تمامی تگ هایی که داخل تگ body کاربرد دارند می توانند در داخل این تگ به کار روند.
در بحث آموزش HTML می توان گفت تگ div به تنهایی استفاده نمی شود بلکه باید داخلش از تگ های دیگر نیز استفاده کرد. مثال:
<body>
<div class="A" style="color: red;">
<h1>Hello World</h1>
</div>
<div class="B" style="color: blue;">
<ol start="10">
<li>Apple</li>
<li>Orange</li>
</ol>
</div>
<div class="C" style="background: yellow;">
<p>ProgramStore.ir</p>
<a href="welcome.html">Home</a>
</div>
</body>
مشاهده می کنید که این تگ باید با تگ پایانی <div/> بسته شود.
این تگ می تواند با خصوصیت های class و id تعریف شود تا بتوان در فایل های css و js به آنها استایل داده شده و مورد استفاده قرار گیرند. در واقع class و id نام تگ برای شناسایی است. بهتر است برای بخش های مختلف صفحه یک div با کلاس جداگانه تعریف کرد.
آموزش HTML |تگ span
از این تگ برای ایجاد تغییرات inline در بعضی از المان ها استفاده می شود. اگر این تعریف برایتان اندکی نامفهوم است شما را به مشاهده مثال زیر دعوت می کنم :
مثال : در آموزش HTML فرض کنید می خواهیم در مرورگر عبارت ProgramStore را تایپ کنیم اما با این وصف که رنگ کلمه Program آبی باشد ولی رنگ کلمه Store قرمز، اما به شرطی که کل کلمه ProgramStore در یک خط و بهم پیوسته باشد بعبارتی Inline باشند.
راه حل : اگر هر یک از کلمات را در یک تگ p یا h قرار دهیم به جهت BlockLevel بودن این تگ ها Program و Store در یک سطر نخواهند افتاد. پس راه حل واقعی استفاده از span است :
<body>
<p>
<span style="color: red;">Program</span>
<span style="color: blue;">Store</span>
</p>
</body>
تگ span جزو تگ های Inline Level است و باید با تگ پایانی </span> بسته شود.
آموزش HTML | تگ table برای ایجاد جدول در HTML
در ادامه آموزش HTML با نحوه ایجاد جدول آشنا می شویم. تگ table جهت ایجاد جدول ها در HTML استفاده می شود. به کاربردن این تگ مستلزم استفاده از تگ های دیگری است در زیر به آنها می پردازیم:
تگ tr
یک جدول بدون سطر در واقع یک چیز خالی است. هر جدول با سطر هایش معنی پیدا می کند.این تگ برای ایجاد سطر استفاده می شود.
تگ td
این تگ برای ایجاد سلول های داخلی جدول استفاده می شود. ما نیاز داریم اطلاعات را در قالب سلول ها در جدول ذخیره کنیم. هر td یک سلول جدید در یک سطر ایجاد خواهد کرد.
<body>
<table>
<tr>
<td>Amin</td>
<td>Rezayi</td>
<td>20</td>
</tr>
<tr>
<td>Amir</td>
<td>Hasani</td>
<td>32</td>
</tr>
</table>
</body>
توضیح: در جدول بالا ابتدا اقدام به تعریف سطر با استفاده از tr می کنیم سپس سلول های داخل هر سطر را برای افزودن اطلاعات با تگ td ایجاد کردیم. پس از اجرا مشاهده می کنیم که در جدول بالا نام، نام خانوادگی و سن هستند. اما این تیتر ها در جدول موجو نیستند. برای افزودن سرتیتر ها از تگ th استفاده می کنیم.
تگ th
در هر جدولی نیاز داریم نام ستون ها را مشخص کنیم. به عبارتی کاربر باید با دیدن جدول بداند فلان ستون، ستون نام هاست و دیگری مربوط به سن و …. این کار را از طریق تگ th انجام می دهیم.
<body>
<table>
<tr>
<th>name</th>
<th>last</th>
<th>age</th>
</tr>
<tr>
<td>Amin</td>
<td>Rezayi</td>
<td>20</td>
</tr>
<tr>
<td>Amir</td>
<td>Hasani</td>
<td>32</td>
</tr>
</table>
</body>
می توانید با استفاده از خصوصیت style به جدول border اضافه کنید:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black;}
</style>
</head>
<body>
<table>
<tr>
<th>name</th>
<th>last</th>
<th>age</th>
</tr>
<tr>
<td>Amin</td>
<td>Rezayi</td>
<td>20</td>
</tr>
<tr>
<td>Amir</td>
<td>Hasani</td>
<td>32</td>
</tr>
</table>
</body>
</html>
می توان طول و عرض جدول را هم تغییر داد:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid green;}
table {width: 500px;}
</style>
</head>
<body>
<table>
<tr>
<th>name</th>
<th>last</th>
<th>age</th>
</tr>
<tr>
<td>Amin</td>
<td>Rezayi</td>
<td>20</td>
</tr>
<tr>
<td>Amir</td>
<td>Hasani</td>
<td>32</td>
</tr>
</table>
</body>
</html>
تگ caption
همچنین می توانیم برای جدول عنوان بنویسیم. این کار توسط تگ caption داخل تگ table صورت می گیرد. قبلا گفته بودم که تگ table به تنهایی قدرتی ندارد.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid green;}
table {width: 500px;}
</style>
</head>
<table style="width:500px">
<caption>Titr Of Table</caption>
<tr>
<th>name</th>
<th>last</th>
<th>age</th>
</tr>
<tr>
<td>Amin</td>
<td>Rezayi</td>
<td>20</td>
</tr>
<tr>
<td>Amir</td>
<td>Hasani</td>
<td>32</td>
</tr>
</table>
</body>
</html>
تگ tbody و تگ tfoot
حال در بحث آموزش HTML نوبت تگ tbody و تگ tfoot است. علی رغم اینکه جدول های بالا به خوبی کار خواهند، با این حال نیاز داریم جدول های حرفه ای تری بنویسیم. به طور مثال فرض کنید می خواهیم دخل و خرج هر ماه را به صورت یک جدول در بیاوریم. مطمئنا ما هم در هر ستون نیاز به تیتر و نهایتا نیاز به جمع هر ستون داریم. به صورت واضح تر، ما باید میزان دخل هر سال و خرج آن سال را در یک سطر ایجاد کنیم. اینجاست که ما نیاز به تگ های tbody و tfoot پیدا خواهیم کرد:
<!DOCTYPE html>
<html>
<head>
<style media="screen">
table, th, td { border: 1px solid black;}
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>فصل</th>
<th>درآمد</th>
<th>مخارج</th>
</tr>
</thead>
<tbody>
<tr>
<td>بهار</td>
<td>3 میلیون</td>
<td>2.5 میلیون</td>
</tr>
<tr>
<td>تابستان</td>
<td>5 میلیون</td>
<td>2.5 میلیون</td>
</tr>
<tr>
<td>پاییز</td>
<td>4 میلیون</td>
<td>2.5 میلیون</td>
</tr>
<tr>
<td>زمستان</td>
<td>6 میلیون</td>
<td>2.5 میلیون</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>جمع</td>
<td>18 میلیون</td>
<td>10 میلیون</td>
</tr>
</tfoot>
</table>
</body>
</html>
تگ meta جزو مهمترین بخش های آموزش HTML
در این بخش از آموزش HTML می رسیم به بحث متا تگ ها. تگ های meta یا متا تگ ها در HTML تگ meta تگی است که هیچ تاثیر ظاهری در صفحه ما ندارد. به عبارتی این تگ ها در مرورگر نمایش داده نمی شوند و تاثیر آنها در پشت پرده است.
متا تگ ها اطلاعات مفید وو بزرگی درمورد صفحه ما به مرورگر ها، ربات ها و هر نوع ماشین دیگری می دهند. اطلاعاتی چون نحوه نمایش صفحه، اطلاعات نویسنده، کلمات کلیدی و تعیین یونیکد صفحه. تمامی تگ های meta باید در داخل تگ head نوشته شوند. به عبارتی آنها اجازه نوشته شدن در تگ body را ندارند.
مشاهده متا تگ های هر صفحه
البته می توان این متا ها را از طریق inspect گرفتن از صفحه مشاهده نمود. برای ان کار کافیست روی صفحه کلیک راست کرده و گزینه Inspect را بزنید:
متا تگ ها را می توان با source گرفتن از صفحه نیز مشاهده کرد . برای ان کار کافیست روی صفحه کلیک راست کرده و گزینه View page source را بزنید:
آموزش HTML | متا تگ charset
این متا تگ برای تعیین یونیکد صفحه استفاده می شود. در این نوع متا، متا تگ با خصوصیت charset به کار گرفته می شود. برای صفحات فارسی مقدار این خصوصیت باید برابر UTF8 باشد:
<head> <meta charset="UTF-8"> </head>
آموزش HTML |متا تگ viewport
در آموزش HTML به این متا تگ توجه ویژه داشته باشید. از این متا تگ برای رسپانسیو کردن یا واکنش گرا بودن سایت استفاده می شود. اگر این متا برای هر صفحه تعریف نشود، نهایتا صفحه ما در نمایشگر های مختلف، بزرگ یا کوچک شده و کاربر نیاز به اسکرول کردن عرض صفحه خواهد داشت. استفاده از این تگ به صورت زیر است.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
آموزش HTML |متا تگ keywords یا متای کلمات کلیدی
این متا برای معرفی کلمات کلیدی به مرورگر ها به کار میرود. کافیست کلمات کلیدی خود را در قسمت content وارد نمایید.
<meta name=”keywords” content=”HTML, CSS, JavaScript”>
در مثال بالا کلمات کلیدی ما، HTML و CSS و JavaScript است.
آموزش HTML |متا تگ Author
این متا تگ به معرفی نویسنده یا گردآورنده صفحه می پردازد. روش استفاده از این تگ به این صورت است که در خصوصیت name حتما باید عبارت author تایپ شود اما در خصوصیت content نام خود یا نویسنده را می نویسید.
<meta name="author" content="John Doe">
آموزش HTML |متا تگ Description یا توضیحات
این متا توضیحاتی درمورد صفحه ارائه می دهد. استفاده از این تگ برای ارتقای سئوی سایت مهم است. در آموزش HTML تاکید بر این است که این تگ استفاده شده و توضیحات مختصر و مفید نوشته شود.
<meta name="description" content="Web tutorials for HTML and CSS">
نتیجه گیری
در این مقاله به معرفی و آموزش HTML با یک دیدگاه ساده و خاص پرداخته شد. ساختار کلی فایل های html، تمامی تگ های مورد نیاز و استفاده عملی آنها به طور کامل و قابل فهم برای تمام سنین تشریح گردید.
این مقاله برای افرادی که قصد آموزش HTML بصورت کامل را دارند، بهترین و کاملترین آموزش در کمترین زمان می باشد. به طوریکه در تمامی سایت های آموزشی فارسی، مقاله ای به این جامعیت نخواهید یافت. برتری دیگر این آموزش، اجرای آنلاین همه کد ها و مثال های مورد بحث است به طوریکه می توانید هرگونه تغییری در کد ها داده و با اجرای آنلاین، خروجی کد هایتان را مشاهده بفرمایید.
هر چند مطالعه این مقاله به تنهایی موجب پیشرفت چشمگیر شما در آموزش اچ تی ام ال خواهد شد، باز تمرین عملی، مستمر و روزانه مطالب گفته شده امری ضروری در آموزش کامل آن است.
قالب های آماده HTML
مطالب زیر را حتما مطالعه کنید
html و css چیست – راهنمای یادگیری html و css + معرفی منابع آموزشی
آموزش ساخت قالب ساده html – طراحی صفحه وب با HTML و CSS
تگ عکس img
لینک در html – تگ لینک یا تگ a
تگ p در HTML
بهترین ویرایشگر انلاین html که تا حالا دیدم
*********************
سلام من میخوام تصویر دوربین فیلمبرداری را به صورت زنده روی سایتم پخش کنم
میشه راهنماییم کنید؟
سلام
اگه دنبال مشتری هستید و میخواید پروژه برنامه نویسی برای مشتری انجام بدید.
یا اگه میخواید کسی برنامه ای براتون بنویسه
می تونید در کانال ما عضو بشید:
https://t.me/doorkaari
سلام
ای کاش درباره form هم میگفتین
تشکر بسیار بسیار عالی
[…] در html جزو تگ های Inline Level است. این به این معنیه که تگ a یه سطر رو اشغال نمیکنه و […]
[…] سطر جدید شروع میشه. اگه با بحث block-level آشنایی ندارین به مقاله آموزش html ما مراجعه […]
[…] h1 تا h6 از سری آموزش html، عنوان اصلی این جلسه ماست. در این مقاله نحوه نوشتن […]
[…] تگ ها و به صورت یک مقاله جامع دارید، شما را به مطالعه مقاله آموزش جامع اچ تی ام ال دعوت […]
[…] و اسکریپت‌های آن بر روی سرور اجراشده و نتیجه به‌صورت کدهای html به مرورگر کاربر ارسال می‌شود. به خاطر داشتن خاصیت Html […]