تخفیف ویژه زمستانه پی استور
تا 60 درصد تخفیف
شامل پروژه‌ها و دوره‌های آموزشی
روز
ساعت
دقیقه
ثانیه
تخفیف ویژه زمستانه پی استور
قبل از یادگیری HTML باید معنای آن را درک کنیم. HTML مخفف عبارت Hyper Text Markup Language است. این عبارت به معنی زبان نشانه گذاری ابر متن است. این تعریف اندکی گنگ به نظر می‌رسد و اچ تی ام ال را به صورت واضح توضیح نمی‌دهد. اما اگر بخواهیم یک تعریف ساده داشته باشیم، می‌گوییم تمامی کدهای همه زبان‌های برنامه نویسی برای این که در مرورگرها نمایش داده شوند به کدهای HTML تبدیل می‌شوند.
به این معنی که همه مرورگرها فقط کدهای HTML را می‌شناسند و هیچ مرورگری کدهای زبان PHP و یا ASP و … را درک نمی‌کنند. در نهایت کدهای هر زبان برنامه نویسی به کدهای قابل فهم HTML تبدیل یا کامپایل شده و به مرورگر فرستاده میشود که برای مرورگر قابل فهم و درک است.
نشانه گذاری در HTML
منظور از نشانه گذاری در بحث آموزش HTML چیست؟ وقتی می‌گوییم HTML زبان نشانه گذاری است یعنی تمامی اجزا در صفحه نشانه گذاری می‌شوند و به مرورگر دستور داده میشود که هر چیزی را در کجا نشان بدهد. این وظیفه بر عهده تگ هاست. تگها بخش‌های مختلف را از هم جدا می‌کنند و محل نمایش آن‌ها را تعیین می‌نمایند که به این کار نشانه گذاری گفته میشود.
مثلا فرض کنید شما می‌خواهید یک ساختمان بسازید. شما باید محل مناسب آشپزخانه، راه پله، پذیرایی و حتی دستشویی را مشخص نمایید. هیچ وقت حمام نمی‌تواند وسط پذیرایی باشد یا آشپزخانه بیرون از آپارتمان قرار بگیرد. به این کار نشانه گذاری می‌گوییم و مشخص می‌کنیم هر المانی کجا قرار بگیرد و در عین حال از هم جدا باشند.
حال فرض کنید در یک صفحه وب شما می‌خواهید از یک عکس در ابتدای صفحه استفاده کنید و یا یک سایدبار در سمت چپ صفحه ایجاد نمایید. پس هیچگاه footer نمی‌تواند در ابتدای صفحه مرورگر باشد. شما باید دقیقا نشانه گذاری کنید که چه المانی در کجا قرار بگیرد. این کار از طریق HTML صورت می‌گیرد.
تگ در انگلیسی (Tag) به معنای برچسب است. عمل جداسازی بخش‌ها و نشانه گذاری آن‌ها به وسیله تگها انجام می‌گیرد. به‌عبارتی HTML به‌وسیله تگها هر بخش را برچسب گذاری می‌کند و ترتیب نمایش و محل نمایش آن‌ها را تعیین می‌کند. همانطور که قدرت یک ارتش از سربازان آن نشات می‌گیرد، قدرت اچ تی ام ال هم از تگ‌هایش تامین میشود.
تگها انواع گوناگونی دارند. هر کدام از آن‌ها برای نمایش یک نوع از المان یا بخش به کار می‌رود. به عبارتی وظیفه هر تگ مشخص و مجزا بوده و هر کدام مسئولیتی دارند. مثلا برای نمایش یک پاراگراف نیاز به تگ p داریم اما برای نمایش عکس‌ها باید از تگ img استفاده کنیم. شما نمی‌توانید برای نمایش متن از تگ img استفاده کنید. شما با استفاده از تگها می‌توانید جدول بسازید یا یک عکس را وارد مرورگر کنید و یا یک لیست تهیه نمایید یا سایت دیگری را لینک یا پیوند کنید اما هر کدام از این تگها باهم متفاوت هستند.
در ادامه آموزش HTML می‌خواهیم با همدیگر شروع به برنامه نویسی با HTML کنیم. اجرای فایل‌های اچ تی ام ال نیاز به سرور و هیچ فن آوری یا غول شاخداری ندارد. تنها چیزی که شما نیاز دارید یک مرورگر یا Internet Explorer است و یک ادیتور editor شما می‌توانید از مرورگرهای زیر استفاده کنید:
و برای ادیتور هم می‌توان از همه این‌ها استفاده کرد:
و…
در این مقاله و آموزش 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 استفاده از این تگ الزامی نیست اما نبود آن نیز مشکلات بزرگی در مورد نحوه نمایش صفحات سایت‌های شما بوجود خواهد آورد، پس الزامی است به عبارتی این تگ به مرورگر اعلام می‌کند که این صفحه یک صفحه html است و در ضمن نسخه html را هم به مرورگر اطلاع می‌دهد.
پس اگر می‌خواهید صفحات سایت شما در تمامی مرورگرها شناخته شده و نمایشی یکسان داشته باشند از این تگ استفاده کنید. این تگ، تگ انتهایی ندارد و توسط علامت / هم بسته نمی‌شود و جهت استفاده کافیست آن را در ابتدای کدهای خود به این صورت تایپ نمایید:
<DOCTYPE html!>
این تگ ستون اصلی صفحه شماست. این تگ همانند یک کاسه یا ظرف است که تمامی تگ‌های دیگر باید داخل آن قرار بگیرند. تنها تگی که نباید داخل این ظرف قرار بگیرد تگ <DOCTYPE html!> است.
تگ <html> با تگ پایانی <html/> بسته میشود. فضای داخل این دو عبارت، ظرف یا محدوده کدهای html شما را تعیین می‌کند به عبارتی کدهای HTML شما باید داخل این دو تگ آغاز و پایان قرار بگیرند. در ادامه آموزش HTML تگ هد را بررسی خواهیم کرد.
جهت مطالعه بیشتر در مورد این تگ، می‌توانید به مقاله تگ html مراجعه بفرمایید.
به هیچ عنوان نگران اصطلاحات و تگ‌های توضیح داده شده در آموزش HTML نباشید. به مرور همه آن‌ها توضیح داده خواهد شد.
این تگ شامل اطلاعات متا، عنوان صفحه و لینک‌های شما خواهد بود. این تگ باید شامل تگ <head> باشد که در پاراگراف بعدی توضیح داده خواهد شد. تگ <head> بعد از تگ html و قبل از تگ body ایجاد شود. شما نمی‌توانید در این قسمت عکس یا جدول یا یک نوشته را اضافه کنید. این قسمت با تگ پایانی <head/> بسته شود.
تگ‌هایی که اجازه درج در داخل این تگ را دارند به صورت زیر می‌باشند: (از توضیحات تگها نترسید، به مرور در آموزش HTML توضیح داده خواهند شد)
داده های اندکی در تگ head به کاربر نمایش داده میشود اما باز وجود این قسمت در هر صفحه برای دسترسی ربات‌های مرورگرها حیاتی است. به عبارتی این قسمت از صفحات سایت شما کمک شایانی به سئوی سایت شما خواهند نمود.
آموزش HTML |تگ title
این تگ عنوان صفحه شما را مشخص خواهد نمود. در مثال قبل چناچه به عکس دقت کنید در بالاترین قسمت صفحه عنوان Page Title را مشاهده خواهید نمود. این عبارت همان است که ما با تگ title نوشتیم :
<title>Page Title</title>
این تگ الزاما باید داخل تگ head نوشته شود. وجود این تگ برای سئو نیز الزامی است.
تگ body در آموزش HTML
تمامی چیزهایی که می‌خواهید به کاربر نمایش داده شود، باید داخل این تگ باشند. دقت کنید که این با تعریف تگ <html> متفاوت است. در معرفی تگ html گفتیم که باید تمامی تگها داخل آن قرار بگیرند اما حال در تعریف تگ body می‌گوییم که هر چیزی که در داخل این تگ باشد نمایش داده خواهد شد.
این تگ بدنه هر صفحه‌ای است و هرچیزی که بیرون آن باشد نمایش داده نخواهد شد. این تگ به تگ بدنه هم معروف است. این تگ بعد از بسته شدن تگ head ، باز شده و قبل از بسته شدن تگ html ، با تگ پایانی <body/> بسته میشود.
آموزش HTML |طبقه بندی تگها :
این نوع از تگها، به اندازه محتوای داخل خود جا می‌گیرند نه بیشتر. تگ‌های img ، span ، a ، em و … جزو تگ‌های Inline Level هستند. فضای اشغالی توسط این تگها به اندازه محتوای داخل آن‌هاست.
برخلاف تگ‌های inline level این نوع از تگها، یک سطر از صفحه را اشغال می‌کنند. مانند تگ‌های div ، p ، form و … این تگها حتی اگر محتوای داخل شان کمتر از یک سطر باشد باز به اندازه یک سطر فضا اشغال می‌کنند.
پس از تگ بدنه در آموزش HTML به تگ هدینگ می‌رسیم. تگ‌های heading برای نوشتن عنوان‌ها یا تیترهای صفحه شما به کار می‌روند. این تگها در ۶ سایز (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 هستند.
این تگ مهم‌ترین تگ صفحه است. در استفاده از آن وسواس به خرج بدهید. مهم‌ترین عنوان یا سر تیتر صفحه باید در آن نوشته شود و لزوما تنها یکبار در هر صفحه استفاده نمایید. این نکته یکی از نکات مهم آموزش HTML است.
از این تگ برای نوشتن زیر عنوان‌ها یا تیترهای کوچک استفاده میشود. اهمیت آن از h1 کم و از h3 زیاد است.
آموزش 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 بودن آن است.
در 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>
و در خروجی داریم:
اسم این تگ از اولین حرف کلمه Italic به معنای مورب و کج گرفته شده است. از این تگ برای نشان دادن و معرفی یک اسم، یک اصطلاح فنی یا خارجی، یک تفکر و … استفاده میشود. این دستور محتوا را به صورت کج یا italic نشان می‌دهد و این موضوع باعث اشتیاق برنامه نویسان جوان برای استفاده آن میشود اما بهتر است تنها در مواردی که گفته شد از این تگ استفاده شود.
این تگ باید با تگ پایانی <i/> بسته شود و جزو تگ‌های Inline Level است.
نام این تگ از اولین حرف واژه emphasize گرفته شده است که به معنی تاکید است. این تگ ظاهرا همان کار تگ i را انجام می‌دهد اما در عمل به محتوای داخلش نیز تاکید می‌کند. پس هر موقع نیاز داشتیم به مرورگر اعلام کنیم که روی مطلبی تاکید داریم بهتر است از این تگ استفاده کنیم. این تگ باید با تگ پایانی <em/> بسته شود و جزو تگ‌های Inline Level است.
اسم تگ <b> از اول کلمه Bold گرفته شده و چنانچه از نامش آشکار است، محتوای داخل خود را برجسته و توپر نشان می‌دهد. در آموزش HTML استفاده از این تگ زمانی توصیه میشود که شما تگ مناسبی پیدا نکنید به عبارتی این تگ باید گزینه آخر شما برای استفاده باشد.
می‌توانید تیترهای مهم را با تگ‌های Heading که قبلا اشاره شد نشان دهید از قبیل h1 و h2 و … .و یا متن‌هایی که می‌خواهید روی آن‌ها تاکید کنید باید داخل تگ <em> بنویسد و متن‌های مهم در داخل <strong> باشند اما تگ <b> را به همین راحتی استفاده نکنید. شما می‌توانید به جای این تگ از تگ <strong> استفاده کنید. هر دو تگ جزو گروه Inline Level بوده و باید با تگ پایانی بسته شوند.
در ظاهر هر دو وظیفه برجسته کردن محتوا را برعهده دارن اما در پشت پرده تگ <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 است. نام تگ 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 می‌رسیم. از این تگ برای ترسیم خط افقی استفاده می‌کنیم. ما می‌توانید در هر جای سایت که نیاز به یک خط افقی دارید از این تگ استفاده کنید اما در سئو توصیه میشود زمانی این خط را بکشید که می‌خواهید دو موضوع متفاوت را از هم جدا سازید.
این تگ جز تگ‌های 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> برای ایجاد خط استفاده نمودیم و خروجی :
این تگ متن داخلش را یک سایز کوچک‌تر از بقیه نشان می‌دهد. این کوچک‌تر شدن تنها از لحاظ ظاهر و فونت است نه معنی. به عبارتی محتوای داخل تگ small به هیچ عنوان کم اهمیت‌تر از سایر مطالب صفحه نخواهد شد.
این تگ با تگ پایانی <small/> بسته شده و جزو تگ‌های Inline Element است.
مثال:
<body>
<p>ProgramStore.ir</p>
<p><small>Copyright 1999-2050 by Refsnes Data</small></p>
</body>
و خروجی :
اسم این تگ از سه حرف ابتدایی کلمه subscript به معنای زیرنویس گرفته شده است. از این تگ برای نوشتن پایین نویس‌ها استفاده میشود. این تگ محتوای داخل خود را با سایز نیم یا ۵۰ درصد و زیر خط فعلی نشان می‌دهد. از این تگ برای نوشتن فرمول‌های شیمیایی نیز استفاده میشود. مثال:
<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 است.
محتوای داخل تگ sup به صورت بالانویس نشان داده میشود. بالانویس‌ها به اندازه نیم سایز سایر کاراکترها و بالاتر از بقیه حروف و کلمات نشان داده می‌شوند. بیشترین استفاده این تگ مربوط به فرمول‌های ریاضیات است:
<body>
<p>X<sup>2</sup>+Y<sup>3</sup>=Z</p>
</body>
این تگ با تگ پایانی <sup/> بسته شده و جزو تگ‌های Inline Element است.
گاهی اوقات لازم است شما در مورد یک تکه کد یک توضیح مختصر بنویسید اما در مرورگر نمایش داده نشود. این کاریست که اکثر حرفه‌ای‌ها انجام می‌دهند تا هم بقیه تیم به‌راحتی منظور شما را از آن کد بفهمند و هم نوعی یادداشت یادآوری برای خودشان است. درادامه آموزش HTML این مورد بررسی میشود.
برای این کار کافیست یادداشت‌ها و کامنت‌های خود را در داخل این عبارت <– –!> تایپ کنید. به مثال زیر دقت کنید:
<body>
<!-- این پاراگراف درمورد سایت پی استور می باشد -->
<p>ProgramStore.ir is the best for education.</p>
</body>
پس از اجرای کد مشاهده می‌کنید که متن داخل کامنت در مرورگر نمایش داده نمی‌شود اما شما به محض دیدن آن، می‌فهمید که پاراگراف درمورد سایت آموزشی ProgramStore.ir است.
این تگ جزو المان‌هایی است که شما در تمامی صفحات وب و آموزش HTML حداقل یک بار از آن استفاده خواهید نمود. به عبارتی جزو مهم‌ترین تگ‌های HTML است. این تگ برای لینک دهی به کار می‌رود. اگر می‌خواهید کاربر با کلیک کردن روی کلمه “خانه” به صفحه home.html برود، یا با کلیک روی کلمه آپارات، به سایت آپارات هدایت شود، باید از این تگ استفاده کنید.
هنگام استفاده از این تگ، لازم است آدرس مقصد لینک را در داخل خصوصیت href قرار دهید. به فرض چنانچه بخواهیم لینکی بسازیم که کاربر با کلیک روی “پی استور” به آدرس https://programstore.ir/ باید چنین عمل کنیم:
<a href="https://programstore.ir/">پی استور</a>
چنانچه مشاهده می‌کنید آدرس url در داخل href نوشته شد و کلمه نمایشی مابین تگ آغازی و پایانی.
این خصوصیت به شما کمک می‌کند تا نحوه باز شدن صفحه مقصد یا لینک را تعیین کنید. مقادیری که بیشتر استفاده می‌شوند و توضیح عملکردشان:
<a href="https://programstore.ir/" target="_blank" > Pstore Site </a> <a href="https://programstore.ir/" > Pstore Site </a>
تگ a جزو تگ‌های Inline Level است و باید با تگ پایانی </a> بسته شود.
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 همان مخفف کلمه image به معنی تصویر است پس بدیهی است که برای نمایش عکس‌ها و تصاویر از آن‌ها استفاده می‌کنیم. این تگ با خصوصیت src آن قابل استفاده است. src مخفف کلمه source به معنی منبع است. در این خصوصیت باید آدرس تصویر درج شود.
مثال:
<!DOCTYPE html> <html> <head> <title>program store</title> </head> <body> <img src="flower.jpg"> </body> </html>
در آموزش HTML توصیه میشود تگ img را همراه با این خصوصیت استفاده کنید. در این قسمت توضیح بسیار کوتاهی درمورد عکس تایپ می‌کنند. فرض کنید به هر دلیلی تصویر شما در صفحه بارگزاری نشد، آن‌جاست که خصوصیت alt وارد عمل شده و به جای تصویر نمایش داده خواهد شد:
<img src="flower.jpg" alt="An image of a flower">
پر کردن قسمت alt کمک بزرگی به سئوی سایت شما خواهد کرد.
این خصوصیت عنوان تصویر شما خواهد بود و زمانی که کاربر ماوس را روی تصویر می‌برد مقدار آن در یک کادر بسیار کوچک نمایش داده خواهد شد.
<img src="flower.jpg" title="Rose flower">
می‌توان با خصوصیت‌های height و width به ترتیب ارتفاع و عرض تصویر را تعیین کرد :
<img src="flower.jpg" alt="An image of a flower" height="500" width="20">
پس از اجرای برنامه حتماً متوجه شدید که چه تغییراتی روی تصویر اتفاق افتاد و خروجی عجیبی برایتان رقم زد. فکر کنم به خوبی متوجه شدید که width و height کدام مقادیر هستند.
توجه : بهتر است شما فقط یک طرف تصویر را تغییر دهید به عبارتی یا width را تغییر دهید و یا height را. بعد دیگر تصویر به‌صورت اتوماتیک و متناسب با بعد تغییر یافته تغییر خواهد یافت. لازم به ذکر است که مقادیر width و height بر حسب پیکسل است.
شاید شما بخواهید وقتی کاربر روی عکس کلیک می‌کند فایل عکس باز شود یا اصلا به سایت مربوط به آن عکس برود:
با این دستور با کلیک روی عکس فایل flower.jpg که در کنار آن است باز خواهد شد. خودتان امتحان کنید:
<body> <a href="flower.jpg"><img src="flower.jpg" alt="An image of a flower"></a> </body>
تگ img جزو تگ‌های Inline Level بوده و نیز لازم نیست با تگ پایانی بسته شود.
در ادامه آموزش 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
اگر می‌خواهید دکمه‌های کنترل ویدیو نظیر دکمه چخش، تنظیم صدا، توقف، بزرگنمایی، صدا و … را نیز داشته باشد باید از این خصوصیت استفاده کنید.
این خصوصیت برای آن است که ویدیو بعد از اتمام دوباره اتوماتیک وار پخش شود. به نوعی همان auto repeat است.
مانند تگ img شما در تگ video نیز قادر به تغییر ارتفاع و عرض ویدیو می‌باشید که به ترتیب با خصوصیت‌های height و width با واحد پیکسل تعیین می‌شوند:
در جدول زیر با سایر خصوصیت‌های تگ video آشنا می‌شوید :
| خصوصیت | مقدار | توضیح |
| autoplay | بدون مقدار | در صورتی که وجود داشته باشد ویدئو به محض اینکه آماده شود خود به خود پخش می شود |
| controls | بدون مقدار | افزودن دکمه کنترل ویدیو مثل استارت، استاپ، تنظیم صدا و … |
| height | پیکسل | تنظیم ارتفاع ویدیو |
| width | پیکسل | تنظیم پهنای ویدیو |
| loop | بدون مقدار | در صورت وجود پس از اتمام ویدیو دوباره پخش خواهد شد |
| muted | بدون مقدار | بی صدا کردن ویدیو به صورت پیش فرض |
| poster | آدرس | آدرس تصویری که می خواهید به عنوان پیش نمایش ویدیو باشد |
| Preload | بدون مقدار | ویدئو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay تنظیم شده باشد این خاصیت نادیده گرفته می شود. |
| src | آدرس | آدرس فایل ویدیویی که باید پخش کنیم |
این مطلب به عنوان یک مطلب تکمیلی و حرفه‌ای است. می‌توانیم تگ video را به صورت زیر هم استفاده کنیم:
اما اشکال کار چیست و چرا اغلب تگ ویدیو اینگونه به کار برده نمی‌شود؟
در جدول فرمت‌ها دیدیم که پسوند ogg در مرورگرهای کروم و فایرفاکس پشتیبانی میشود اما برای مرورگرهای سافاری و Internet Explorer بدون مفهوم است. پس کروم و فایرفاکس ویدیو را لود خواهند کرد اما سافاری و Internet Explorer خیر.
تگ source به شما این امکان را می‌دهد که شما به چندین فایل لینک بدهید. پس می‌توانید ویدیوی موردنظر را در دو پسوند mp4 و یکی از پسوندهای دیگر مثلا ogg تهیه نموده و با استفاده از تگ source به هردوی آن‌ها اشاره کنید. مرورگر اولین فایلی که می‌شناسد را انتخاب خواهد کرد. اگر به هر دلیلی مرورگر فایل اول را نشناسد، آن‌گاه به سراغ فایل دوم رفته و آن را اجرا خواهد کرد. پس می‌توانید مطمئن باشید که ویدیوی شما لود خواهد شد :
مبحث مهم دیگر دز آموزش HTML تگ iframe است. این تگ جهت نمایش عکس، ویدیو، یک صفحه از سایت خود یا سایت دیگر و … به کار می‌رود. فرض کنید شما می‌خواهید در یکی از صفحات سایت خود، صفحه دیگری از سایت دیگر یا یک ویدیو از یوتیوب و آپارات قرار دهید. اینجاست که این تگ ارزش واقعی خود را نشان خواهد داد.
Iframe یک پنجره یا قاب در صفحه شما ایجاد می‌کند که موارد ذکر شده در آن نمایش داده می‌شوند. مثال :
<iframe src="https://programstore.ir"></iframe>
می‌توانید با زدن اجرای برنامه خودتان ببینید که خروجی به چه صورت است. مشاهده می‌فرمایید که در یک پنجره اما در صفحه‌ای از سایت خودتان، توانستیم صفحه‌ای از سایت programstore را بیاوریم. در ادامه آموزش HTML به توضیح خصوصیت‌های مهم این تگ می‌پردازیم.
src مهم‌ترین خصوصیت iframe است. همانگونه که در تگ img از src استفاده کردیم در این خصوصیت نیز باید آدرس عکس، ویدیو و یا صفحه سایت مورد نظر را وارد کنیم. ابتدا می‌خواهیم یک عکس که در دایرکتوری خود پروژه است (کنار فایل index.html) وارد کنیم:
به آدرس فایل در خصوصیت src توجه نمایید. از کد زیر اجرا بگیرید و خروجی آن را مشاهده کنید.
<iframe src="flower.jpg"></iframe>
مشاهده می‌کنید که عکس مورد نظر وارد شد اما با طول و عرض کم که در بحث‌های بعدی به تنظیم طول و عرض آن نیز خواهیم پرداخت. می‌توانیم یک فایل ویدیویی هم که در همان دایرکتوری کارمان هست را وارد کنیم:
اینجا نیز آدرس فایل ویدیویی را در src وارد کردیم. ویدئوی video.mp4 یک فایل هست که قبلاً در دایرکوتری قرار دادیم. برای مشاهده اجرای برنامه زیر را ببینید.
<iframe src="video.mp4"></iframe>
می‌توان عرض و ارتفاع پنجره تگ iframe را با این خصوصیت تغییر داد. می‌خواهیم در همان عکس تصویر را کمی بزرگ‌تر کنیم:
توجه داشته باشید که مقادیر width و height هر دو بر اساس پیکسل می‌باشند. در خروجی می‌توانید نتیجه را پس از اجرای برنامه مشاهده کنید.
<iframe src="flower.jpg" width="1000" height="1000"></iframe>
یکی دیگر از خصوصیت‌های تگ 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 در اطراف قاب یا پنجره مشاهده خواهید نمود و شاید بخواهید این خط و خطوط را از اطراف قاب حذف کنید. اینجاست که خصوصیت style به کارتان خواهد آمد :
<body>
<iframe src="https://www.programstore.ir" style="border: none;"></iframe>
</body>
بدین ترتیب حاشیه خط مانند از اطراف قاب حذف خواهد شد.
برای اضافه کردن یکی از ویدیوهای سایت آپارات می توان از تگ iframe استفاده کنیم:
ابتدا یک تگ iframe ایجاد کنید ولی قسمت src آن را خالی بگذارید.
یکی از ویدیوهای سایت آپارات را باز می‌کنیم:
در شکل بالا قسمت سه نقطه که دورش خط مشکی کشیده شده است را کلیک کرده و سپس دریافت کد امبد را انتخاب می‌کنیم:
سپس مطابق شکل زیر گزینه “کد آی فریم” را فعال کرده (مرحله ۱) و سپس کلید کپی را کلیک می‌کنیم (مرحله۲) :
کد کپی شده را در جایی paste می‌کنیم و از از میان کدها src را پیدا کرده و مقدارش را در iframe ای که خودمان قبلا ایجاد کرده‌ایم می‌گذاریم. نهایتا در مرورگر ویدیوی انتخابی شما نمایش داده خواهد شد. در این حالت می‌توانیم حتی طول و عرض و سایر استایل‌ها را به ویدیو اضافه نماییم.
در ادامه آموزش HTML می‌رسیم به نمایش ویدئوها یوتیوب در سایت. جهت نمایش هر یک از ویدیوهای youtube مراحل زیر را دنبال کنید:
مطابق شکل بالا گزینه share را کلیک کنید. از پنجره باز شده گزینه Embed را انتخاب نمایید:
مطمئنا پنجره زیر باز خواهد شد که شما باید گزینه copy را کلیک بفرمایید :
حال می‌توانید در هر قسمتی از کد هایتان، چیزی را که کپی کردهاید، paste کنید. مشاهده خواهید کرد که شما در واقع یک تگ iframe با یک src و استایل‌های خاص کپی کرده بودید و در مرورگر نیز خواهید داشت :
لازم به تذکر است که انجام این عملیات نیازمند عبور از فیلترهاست.
ul مخفف عبارت Unordered List به معنای لیست نامرتب است. تگ ul و li برای ایجاد لیست‌هایی به کار می‌رود که ترتیبی بر اساس شماره گذاری ندارد. در کنار همه آیتم‌های لیست شما، تنها یک داریره توپر مشکی خواهد افتاد.
در آموزش HTML برای ایجاد این لیست، ابتدا یک تگ ul باز کرده و مابین تگ آغازی و پایانی ul ، تگ li را ایجاد می‌کنیم. سپس موارد لیست داخل تگ li نوشته خواهد شد:
<body>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>
</body>
با استفاده از این خصوصیت می‌توان شکل مربوط به دایره‌های توپر را تغییر داد. مثلا اگر بخواهیم این دایره‌ها به صورت مربع درآید از مقدار 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;">
ol مخفف عبارت Ordered List و به معنای لیست مرتب است. زیرا لیست‌هایی که با این تگ ساخته می‌شوند می‌توانند بر اساس اعداد، حروف انگلیسی و یونانی مرتب سازی شوند. لازم به ذکر است که استفاده ار این تگ نیز مستلزم استفاده از تگ li است. در زیر می‌توانید مثال کوچکی از کاربرد این تگ را از آموزش HTML ببینید:
<body>
<ol>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ol>
</body>
همانگونه که مشاهده می‌فرمایید اجزای لیست با اعداد انگلیسی به ترتیب شماره گذاری شده است. البته می‌توان با خصوصیت type به جای اعداد از حروف انگلیسی و رومی نیز استفاده کرد :
در خصوصیت type می‌توان تعیین نمود که لیست بر چه اساسی نمایش داده شود. در مثال زیر می‌خواهیم اجزای لیست با حروف انگلیسی بزرگ ترتیب بندی شوند:
<body>
<ol type="A">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Olive</li>
</ol>
</body>
در جدول زیر مقادیری که می‌توان برای type انتخاب نمود، توضیح داده می‌شوند:
| مقدار | توضیح مقدار |
| ۱ | این مقدار لیست را با اعداد مرتب خواهد کرد. |
| a | این مقدار لیست را با حروف کوچک انگلیسی مرتب خواهد کرد. |
| A | این مقدار لیست را با حروف بزرگ انگلیسی مرتب خواهد کرد. |
| i | این مقدار لیست را با حروف کوچک رومی مرتب خواهد کرد. |
| I | این مقدار لیست را با حروف بزرگ رومی مرتب خواهد کرد. |
Reversed به معنای معکوس شد است. پس طبیعی است که با وارد کردن این خصوصیت لیست معکوس خواهد شد.
<body>
<ol type="A" reversed>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Olive</li>
</ol>
</body>
حتی می‌توان تعیین کرد که لیست شما از کدام شماره شروع شود.
<body>
<ol start="10">
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
<li>Olive</li>
</ol>
</body>
نام این تگ از کلمه 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 با کلاس جداگانه تعریف کرد.
از این تگ برای ایجاد تغییرات 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 استفاده میشود. به کاربردن این تگ مستلزم استفاده از تگ‌های دیگری است در زیر به آن‌ها می‌پردازیم:
یک جدول بدون سطر در واقع یک چیز خالی است. هر جدول با سطرهایش معنی پیدا می‌کند.این تگ برای ایجاد سطر استفاده میشود.
این تگ برای ایجاد سلول‌های داخلی جدول استفاده میشود. ما نیاز داریم اطلاعات را در قالب سلول‌ها در جدول ذخیره کنیم. هر 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 انجام می‌دهیم.
<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 داخل تگ 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>
حال در بحث آموزش 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>
در این بخش از آموزش HTML می‌رسیم به بحث متا تگها. تگ‌های meta یا متا تگها در HTML تگ meta تگی است که هیچ تاثیر ظاهری در صفحه ما ندارد. به عبارتی این تگها در مرورگر نمایش داده نمی‌شوند و تاثیر آن‌ها در پشت پرده است.
متا تگها اطلاعات مفید و بزرگی درمورد صفحه ما به مرورگرها، ربات‌ها و هر نوع ماشین دیگری می‌دهند. اطلاعاتی چون نحوه نمایش صفحه، اطلاعات نویسنده، کلمات کلیدی و تعیین یونیکد صفحه. تمامی تگ‌های meta باید در داخل تگ head نوشته شوند. به عبارتی آن‌ها اجازه نوشته شدن در تگ body را ندارند.
البته می‌توان این متاها را از طریق inspect گرفتن از صفحه مشاهده نمود. برای این کار کافیست روی صفحه کلیک راست کرده و گزینه Inspect را بزنید:
متا تگها را می‌توان با source گرفتن از صفحه نیز مشاهده کرد . برای این کار کافیست روی صفحه کلیک راست کرده و گزینه View page source را بزنید:
این متا تگ برای تعیین یونیکد صفحه استفاده میشود. در این نوع متا، متا تگ با خصوصیت charset به کار گرفته میشود. برای صفحات فارسی مقدار این خصوصیت باید برابر UTF8 باشد:
<head> <meta charset="UTF-8"> </head>
در آموزش HTML به این متا تگ توجه ویژه داشته باشید. از این متا تگ برای رسپانسیو کردن یا واکنش گرا بودن سایت استفاده می شود. اگر این متا برای هر صفحه تعریف نشود، نهایتا صفحه ما در نمایشگرهای مختلف، بزرگ یا کوچک شده و کاربر نیاز به اسکرول کردن عرض صفحه خواهد داشت. استفاده از این تگ به صورت زیر است.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0”>
این متا برای معرفی کلمات کلیدی به مرورگرها به کار می‌رود. کافیست کلمات کلیدی خود را در قسمت content وارد نمایید.
<meta name=”keywords” content=”HTML, CSS, JavaScript”>
در مثال بالا کلمات کلیدی ما، HTML و CSS و JavaScript است.
این متا تگ به معرفی نویسنده یا گردآورنده صفحه می‌پردازد. روش استفاده از این تگ به این صورت است که در خصوصیت name حتما باید عبارت author تایپ شود اما در خصوصیت content نام خود یا نویسنده را می‌نویسید.
<meta name="author" content="John Doe">
این متا توضیحاتی درمورد صفحه ارائه می‌دهد. استفاده از این تگ برای ارتقای سئوی سایت مهم است. در آموزش HTML تاکید بر این است که این تگ استفاده شده و توضیحات مختصر و مفید نوشته شود.
<meta name="description" content="Web tutorials for HTML and CSS">
در این مقاله به معرفی و آموزش HTML با یک دیدگاه ساده و خاص پرداخته شد. ساختار کلی فایل‌های html، تمامی تگ‌های مورد نیاز و استفاده عملی آن‌ها به طور کامل و قابل فهم برای تمام سنین تشریح گردید. این مقاله برای افرادی که قصد آموزش HTML بصورت کامل را دارند، بهترین و کامل‌ترین آموزش در کم‌ترین زمان می‌باشد.
به طوریکه در تمامی سایت‌های آموزشی فارسی، مقاله‌ای به این جامعیت نخواهید یافت. برتری دیگر این آموزش، اجرای آنلاین همه کدها و مثال‌های مورد بحث است به طوریکه می‌توانید هرگونه تغییری در کدها داده و با اجرای آنلاین، خروجی کدهایتان را مشاهده بفرمایید. هر چند مطالعه این مقاله به تنهایی موجب پیشرفت چشمگیر شما در آموزش اچ تی ام ال خواهد شد، باز تمرین عملی، مستمر و روزانه مطالب گفته شده امری ضروری در آموزش کامل آن است.
15 پاسخ
سلام آیا در وان درایو داخل تگ نویسی فقط عبارت انگلیسی قابل سرچه یا تگ فارسی هم قابل سرچ هست یا خیر
سلام برای نوشتن کادر برای رزومه از چه تگی باید استفاده کنم؟
بهترین ویرایشگر انلاین html که تا حالا دیدم
*********************
سلام من میخوام تصویر دوربین فیلمبرداری را به صورت زنده روی سایتم پخش کنم
میشه راهنماییم کنید؟
سلام
اگه دنبال مشتری هستید و میخواید پروژه برنامه نویسی برای مشتری انجام بدید.
یا اگه میخواید کسی برنامه ای براتون بنویسه
می تونید در کانال ما عضو بشید:
https://t.me/doorkaari
سلام
ای کاش درباره form هم میگفتین
تشکر بسیار بسیار عالی