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

صفحه اصلیآموزش HTMLبرنامه نویسی تحت وب

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

شرکت طراحی دکوراسیون داخلی رامسین افتخار دارد با بیست سال سابقه درخشان در زمینه دکوراسیون داخلی پروژه های زیادی را تحویل و به سامان برساند.

دکوراسیون رنگیِ آپارتمان ۸۵ متری مهکامه
عوامل موثر در طراحی دکوراسیون داخلی منازل و محیط کار
طراحی دکوراسیون داخلی منزل + ویدیو

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

آموزش پایه HMTL

در این جلسه قصد داریم به آموزش پایه HTML بپردازیم. همانطور که می‌دانید در سیستم‌های کامپیوتری هر فایلی دارای یک پسوند است. برای مثال پسوند فایل‌های کتاب الکترونیک pdf است. هر فایل در سیستم‌های کامپیوتری با توجه به پسوندی که دارد شناسایی می‌شود. برای کار با پسوندهای مختلف نیاز به نرم افزار های متفاوتی داریم.

برای مثال برای اینکه بتوانیم فایل‌های pdf را مشاهده کنیم، می‌توانیم نرم افزار adobe reader را نصب کنیم. یا برای مشاهده فایل‌های ویدیویی (با پسوند‌های مختلف) نیاز به نرم‌افزاری مثل KM Player داریم.

پسوند فایل‌های HTML

وقتی که به زبان HTML کد می‌نویسیم. در نهایت این کدها را با پسوند htm ذخیره می‌کنیم. یعنی کل خروجی کار ما یک یا چند فایل با پسوند htm. می‌شود. خب نرم افزاری که بتواند فایل‌های htm را اجرا کند چه نرم‌افزاری است؟ مرورگرهای صفحات وب یا همان Web Browser ها.

در حال حاضر بهترین مرورگر دنیا نرم افزار Google Chrome است که کاربران زیادی را به خود جذب کرده است. از دیگر مرورگرهای معروف می‌توان به Firefox، Opera، Safari و Internet Explorer اشاره کرد.

پس این نکته مهم را یاد گرفتید که فایل htm که خروجی کار ماست را می‌توانیم با مرورگر‌های مختلف اجرا کنیم و نتیجه کار خود را ببینیم.

نکته: کدهای html را می‌توان با دو پسوند htm و html ذخیره کرد. در عمل این دو پسوند هیچ تفاوتی باهم ندارند اما نکته بسیار مهمی در اینجا وجود دارد. در سیستم‌های کامپیوتری اکثر پسوند‌ها ۳ حرفی هستند و ممکن است که بعضی از سیستم ها از پسوند‌های ۴ حرفی و غیره پشتیبانی نکنند. پس برای اینکه به مشکلی برنخورید بهتر است همیشه از پسوند htm استفاده کنید.

مفاهیم پایه HTML

کدهای HTML از ده‌ها، صدها و حتی گاهی اوقات هزاران تگ (tag) در کنار هم تشکیل می‌شود. زبان HTML صدها تگ دارد که هرکدام وظیفه و عملکرد مخصوص به خود را دارند. نگران نباشید، یادگیری این تگ‌ها بسیار آسان است و ما از درس‌های آینده سعی می‌کنیم در هر جلسه چند تگ مهم و کاربردی را به شما آموزش دهیم.

تگ‌ها چگونه نوشته می‌شوند؟ چند نوع تگ داریم؟

از لحاظ نوشتن تگ‌ها می‌توان آنها را به دو دسته تقسیم کرد:

  1. تگ‌های جفت
  2. تگ‌های تهی

تگ‌های جفت

تگ‌های جفت به صورت زوج‌های دوتایی نوشته می‌شوند. به اولی تگ باز و به دومی تگ بسته گفته می‌شود. هر چیزی که بین این دو تگ قرار گیرد جزو محتوای درون آن محسوب می‌شود. به مثال زیر دقت کنید:

<p> content </p>

در این مثال <p> تگ باز و <p/> تگ بسته است. عبارت content هم محتوای درون تگ حساب می‌شود. دقت کنید تگ بسته هم دقیقا مانند تگ باز نوشته می‌شود با این تفاوت که قبل از نام تگ یک کاراکتر / قرار می‌دهیم. تگ p وظیفه ایجاد یک پاراگراف در صفحه را دارد.

تگ‌های تهی

تگ‌های تهی به تگ‌هایی گفته می‌شود که هیچ محتوایی نمی‌تواند درون آنها قرار گیرد. یعنی عملکرد و وظیفه تگ تهی طوری است که به هیچ محتوای درونی نیاز ندارد. به مثال زیر توجه کنید:

<p> name <br> ali soltani </p>

در این مثال بازهم از تگ p برای ایجاد یک پاراگراف استفاده شده. درون این پاراگراف عبارتی وجود دارد. همچنین درون تگ p از تگ <br> استفاده شده. این تگ وظیفه شکستن خط را دارد (مانند کلید Enter در هنگام تایپ). اگر دقت کنید این تگ اصلا تگ بسته ندارد. چون اصلا نیازی به تگ بسته ندارد. این تگ یک وظیفه خاص دارد و ما نمی‌توانیم چیزی را درون آن قرار دهیم. خروجی مثال بالا عبارت زیر می‌شود:

name
ali soltani

نکته: اگر دقت کنید در این مثال ما تگ br را درون تگ p نوشته‌ایم. یعنی تگ‌ها می‌توانند بدون هیچ محدودیتی بصورت تو در تو نوشته شوند.

صفت یا attribute چیست؟

برای اینکه بتوان یک عنصر (تگ) را بهتر توصیف کرد، از صفت یا همان attribute استفاده می‌شود. بگذارید با یک مثال توضیح دهیم.

تگ <a> وظیفه ایجاد پیوند (link) در صفحات وب را دارد. کد زیر عبارت ادمین سایت را به آدرس adminesite.com لینک می‌کند.

همانطور که مشاهده می‌کنید، در این مثال از تگ a برای ایجاد لینک استفاده شده. صفت href در این مثال آدرس مقصد لینک را تعیین می‌کند.

صفت‌ها همیشه در تگ شروع (تگ باز) نوشته می‌شوند، همچنین مقدار صفت‌ها باید همیشه در جفت کوتیشن قرار گیرد و با یک علامت مساوی به صفت نسبت داده می‌شود. یک تگ می‌تواند به تعداد نامحدودی صفت داشته باشد. و این صفت‌ها تنها با یک کاراکتر فاصله (space) از هم جدا می‌شوند.

 

ساختار کدهای HTML

صفحات وب جدا از موارد ظاهری‌شان، ساختاری دارند که در همه آنها یکسان است و باید حفظ شود. این ساختار را در مثال پایین برای شما آورده‌ایم و در ادامه خط به خط این کدها را بررسی می‌کنیم:

در خط اول تگ <DOCTYPE html!> را می‌بینید. این تگ یک تگ تهی است و باید دقیقا به همین صورت در ابتدای کدها نوشته شود. این تگ را تگ اعلامیه هم می‌گویند. یعنی به مرورگر اعلام می‌کند که این فایل حاوی کدهای html ورژن 5 است.

در خط بعدی تگ html را می‌بینید. اگر دقت کنید تگ بسته آن در انتهای کدها قرار دارد. به عبارتی تمام تگ‌های دیگر درون این تگ قرار می‌گیرند و هیچ تگی جز تگ اعلامیه نمی‌تواند خارج از این تگ قرار گیرد. به همین علت به این تگ عنصر ریشه (root) گفته می‌شود.

در خط سوم تگ head را مشاهده می‌کنید. این تگ بصورت جفت نوشته می‌شود و تمام اطلاعات و پیوست‌های یک صفحه وب درون این تگ اعلام می‌شوند.

در خط چهارم تگ title وجود دارد. این تگ عنوان صفحه وب را تعیین می‌کند. یعنی هر عبارتی که درون این تگ نوشته شود در عنوان صفحه نمایش داده می‌شود. همانطور که مشاهده می‌کنید این تگ درون تگ head نوشته می‌شود.

در خط ششم تگ body را مشاهده می‌کنید. به تگ body عنصر بدنه هم می‌گویند. هر تگی که درون این تگ نوشته شود در صفحه مرورگر نمایش داده می‌شود.

از این ساختار در تمام صفحات وب استفاده می‌شود. پس این کدها را خوب به یاد داشته باشید و عملکرد هرکدام را بخاطر بسپارید.

تمرین: پیشنهاد می‌کنیم برای روان شدن دستتان در تایپ انواع تگ‌ها، و یادگیری ساختار کدهای HTML، قطعه کد بالا را ده ها بار در یک ادیتور متن مثل Notepad بنویسید.

نحوه ‌ذخیره و اجرای کدهای HTML

قدم اول: یک نرم‌افزار ویرایشگر متن (مانند Notepad) را باز کرده و کدهای ساختار html را درون آن بنویسید.

قدم دوم: این کدها را با استفاده از کلید‌های ترکیبی Ctrl+S یا از طریق منوی File و انتخاب گزینه save ذخیره کنید. حواستان باشد که باید فایل را با پسوند .htm ذخیره کنید.

قدم سوم: فایلی که ذخیره کرده‌اید را با یک مرورگر (مانند Google Chrome) باز کنید تا کدها اجرا شوند و نتیجه را مشاهده کنید. (البته فعلا چیزی جز یک صفحه سفید و خالی مشاهده نمی‌کنید!)

نحوه ذخیره فایل های html

نکته: هربار که فایل کدهای خود را ویرایش کردید تنها کافیست تا با زدن کنترل ترکیبی Ctrl+S تغییرات را ذخیره کرده و صفحه مرورگر را Refresh کنید تا تغییرات را مشاهده کنید.

مطالب گفته شده در این جلسه را مو به مو یاد بگیرید تا هیچ ابهامی نداشته باشید. در این جلسه تمام مباحث پایه یادگیری زبان HTML گفته شد.

لیست کامل تگ های HTML بهمراه توضیح و مثال

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

در لیست زیر یک ستون وجود دارد که در آن علامتیعنی آن تگ در HTML5 یک تگ جدید/اضافه شده می باشد و علامتیعنی آن تگ در HTML5 منسوخ شده می باشد.

برای مشاهده مثال آنلاین هر یک از تگ ها ، لطفا بروی دکمه ( مثال ) که در لیست زیر وجود دارد کلیک نمایید تا بصورت آنلاین مثال آن تگ را مشاهده نمایید.

Free-Learn

تگ ها به ترتیب حروف الفبای انگلیسی می باشند

نام تگ توضیح HTML5 مثال
<!–…–> برای تعریف/ایجاد توضیحات در صفحه وب مثال
<!DOCTYPE> برای مشخص کردن نوع یا نسخه صفحه وب مثال
<a> برای ایجاد یا تعریف لینک ها در صفحه وب مثال
<abbr> برای تعریف مخفف ها یا اختصارها در صفحه وب مثال
<acronym> برای تعریف مخفف ها یا اختصارها در صفحه وب مثال
<address> برای تعریف اطلاعات تماس نویسنده یک صفحه وب مثال
<applet> برای تعریف یا جاسازی اپلت ها در صفحه وب
<area> برای تعریف یک نقشه تصویری ( یک تصویر با نقاط قابل کلیک ) مثال
<article> برای ایجاد پست / مقاله / مطالب در یک صفحه وب مثال
<aside> برای تعریف محتوا فرعی ( محتوایی که در ارتباط با محتوای اصلی است ) مثال
<audio> برای گذاشتن آهنگ / موسیقی و.. در یک صفحه وب مثال
<b> یک متن را برجسته یا کلفت می کند ( بدون هیچ ارزش محتوایی ) مثال
<base> برای تعریف یک لینک پایه در یک صفحه وب مثال
<basefont> برای تعریف یک فونت پایه در یک صفحه وب مثال
<bdi> برای تعریف جهت یک محتوا ( مثلا برای گذاشتن متن انگلیسی در متن فارسی ) مثال
<bdo> برای برعکس کردن محتوا مثال
<bgsound> برای گذاشتن موزیک در پس زمینه صفحه مثال
<big> اندازه یک متن را کمی بزرگتر میکند مثال
<Blink> برای ایجاد یک متن چشمک زن ( روشن و خاموش شدن متن )
<blockquote> برای ایجاد یک نقل قول از یک سورس یا منبع خارجی مثال
<body> برای ایجاد بدنه اصلی یک صفحه وب مثال
<br> برای شکستن خط و رفتن به سطر جدید مثال
<button> برای ایجاد یک دکمه در صفحه وب مثال
<canvas> یک ظرف برای نگهداری اشکل گرافیکی ایجاد شده توسط اسکریپت مثال
<caption> برای تعریف عنوان یا کپشن برای یک جدول مثال
<center> یک متن یا عناصر را در وسط صفحه قرار میدهد مثال
<cite> برای تعریف عنوان یک کار یا اثر یا یک عمل انجام شده مثال
<code> برای قرار دادن کدهای کامپیوتری در یک صفحه وب مثال
<col> برای انتخاب یک یا چندین ستون جدول مثال
<colgroup> برای انتخاب یک یا چندین ستون جدول مثال
<data> ایجاد یک محتوا قابل خواندن و قابل ترجمه توسط ماشین های مترجم مثال
<datalist> یک لیست از گزینه های از پیش تعریف شده را مشخص میکند مثال
<dd> یک توضیح / شرح برای آیتم های یک لیست توضیحی مشخص میکند مثال
<del> برای حذف کردن یک محتوا (برویش خط میکشد) مثال
<details> برای ایجاد یک باکس بازشو جهت نمایش محتوا به کاربر مثال
<dfn> میتوان یک اصطلاح را تعریف کرد مثال
<dialog> برای ایجاد یک باکس دیالوگ جهت نمایش در مرورگر مثال
<dir> برای ایجاد یک لیست نامرتب مثال
<div> برای ایجاد طرح بندی یک قالب وبسایت مثال
<dl> برای ایجاد یک لیست دارای توضیحات در صفحه وب مثال
<dt> برای ایجاد آیتم های یک لیست دارای توضیحات در صفحه وب مثال
<em> برای تاکید بروی یک محتوا مثال
<embed> یک ظرف برای نگهداری محتوای خارج از صفحه وب (مثله فایل های فلش یا PDF) مثال
<fieldset> برای گروه بندی عناصر یک فرم مثال
<figcaption> ایجاد یک عنوان برای تگ <figure> مثال
<figure> برای گذاشتن یک محتوای مستقل در یک صفحه وب (مثله نمودارها،تصاویر و..) مثال
<font> برای تعریف یک محتوا با فونت و اندازه و رنگ مشخص شده مثال
<footer> برای ایجاد فوتر یا پایینی ترین قسمت یک سایت مثال
<form> برای ایجاد یک فرم در صفحه وب مثال
<frame> برای تعریف فریم ها در یک صفحه وب مثال
<frameset> برای تعریف فریم ها در یک صفحه وب مثال
<h1> – <h6> برای ایجاد تگ های تیتر یا عنوان در صفحه وب مثال
<head> برای تعریف یا ایجاد قسمت هد یک صفحه وب مثال
<header> برای ایجاد هدر سایت مثال
<hgroup> برای گروه بندی کردن تگ های تیتر یا هدینگ مثال
<hr> یک خط افقی صاف برای جدا کردن محتوا از همدیگر مثال
<html> ریشه و ستون اصلی یک صفحه وب را تعریف میکند مثال
<i> متن را کمی کج نمایش میدهد مثال
<iframe> برای ایجاد فریم ها در صفحه وب (مثلا قرار دادن یک سایت در یک صفحه وب) مثال
<img> برای گذاشتن عکس / تصویر در صفحه وب مثال
<input> برای قرار دادن کنترل های ورودی در یک فرم مثال
<ins> یک خط به زیر محتوا میکشد مثال
<isindex> برای ارسال یک query یا پرس جو به سمت سرور
<kbd> برای تعریف ورودی های صفحه کلید مثال
<keygen> برای تولید یک جفت کلید یا کد رمزنگاری شده در سمت کاربر و سرور
<label> تعریف یک لیبل یا برچسب برای کنترل های ورودی مثال
<legend> برای ایجاد یک عنوان/کپشن برای تگ <fieldset> مثال
<li> برای تعریف آیتم های یک لیست نامرتب یا مرتب مثال
<link> برای تعریف رابطه بین صفحه جاری و محتوای خارجی (صفحه یا فایلی که بهش لینک شده) مثال
<main> برای ایجاد بخش اصلی از یک صفحه وب مثال
<map> برای تعریف یک نقشه تصویری
(تصویری که بروی آن تعدادی لینک وجود داشته باشد)
مثال
<mark> ماژیک زرد – برای رنگی کردن محتوا مثال
<marquee> برای متحرک سازی متن یا تصویر بصورت افقی یا عمودی مثال
<menu> برای ایجاد یک منو یا لیستی از دستورات یا آیتم ها مثال
<menuitem> برای ایجاد آیتم های تگ <menu> مثال
<meta> برای تعریف متاداده ها در یک صفحه وب مثال
<meter> میتوان یک گیج (Gauge) اندازه گیری را در یک صفحه وب ایجاد کرد مثال
<nav> برای ایجاد منو – (میتونه منوی اصلی سایت باشه) مثال
<nobr> از شکستن متن به سطرهای بعد جلوگیری می کند. مثال
<noframes> برای تعریف یک متن دلخواه – جهت نمایش به کاربر
در صورت عدم پشتیبانی مرورگر کاربر از تگ
مثال
<noscript> برای تعریف یک متن دلخواه – جهت نمایش به کاربر
در صورت عدم پشتیبانی مرورگر کاربر از تگ
مثال
<object> برای ایجاد یا تعریف پلاگین ها در صفحه وب مثال
<ol> برای ایجاد یک لیست مرتب شده در صفحه وب مثال
<optgroup> برای ایجاد یک عنوان از دسته یا گروهی از آیتم های لیست بازشو مثال
<option> آیتم یا گزینه های لیست بازشو را مشخص میکند مثال
<output> برای نمایش خروجی یک عمل انجام شده (مثله عمل ماشین حساب) مثال
<p> برای ایجاد پاراگراف در یک صفحه وب مثال
<param> برای تعریف پارامترهای پلاگین <object> مثال
<picture> یک ظرف برای نگهداری مجموعه ای از تصاویر مثال
<plaintext> برای ایجاد متن ساده و بدون هیچگونه قالب بندی
<pre> برای ایجاد یک محتوا با فرمت و قالب بندی دلخواه مثال
<progress> برای نمایش میزان پیشرفت یک عمل/کار یا پروژه مثال
<q> برای ایجاد یک نقل قول کوتاه مثال
<rp> برای حاشیه نویسی در تایپوگرافی زبان های شرق آسیا مثال
<rt> برای حاشیه نویسی در تایپوگرافی زبان های شرق آسیا مثال
<ruby> برای حاشیه نویسی در تایپوگرافی زبان های شرق آسیا مثال
<s> برای خط کشیدن بروی یک متن (یعنی اون متن تاریخ اعتبارش تموم شده) مثال
<samp> برای نمایش یک خروجی مثله خروجی کامپیوتر مثال
<script> برای تعریف یا استفاده از جاوااسکریپت در صفحه وب مثال
<section> برای ایجاد یک بخش / قسمت در یک صفحه وب مثال
<select> برای ایجاد یک لیست بازشو مثال
<small> اندازه یک متن را کمی کوچکتر نمایش میدهد مثال
<source> برای مشخص کردن سورس/منبع یک فایل چندرسانه ای مثال
<spacer> برای ایجاد فضای خالی ( فاصله ) بصورت افقی و عمودی
<span> یک تگ Inline (اینلاینی) برای ایجاد محتوای درون خطی مثال
<strike> برای خط کشیدن بروی یک متن مثال
<strong> یک متن را برجسته یا کلفت میکند. ( با ارزش محتوایی بالا ) مثال
<style> برای تعریف یا استفاده از دستورات CSS درون صفحه وب مثال
<sub> برای ایجاد یک متن پایین نویس مثال
<summary> برای ایجاد عنوان برای تگ <details> مثال
<sup> برای ایجاد یک متن بالا نویس مثال
<svg> یک ظرف برای نگهداری اشکال گرافیکی ایجاد شده توسط SVG مثال
<table> برای ایجاد جدول در صفحه وب مثال
<tbody> برای ایجاد بدنه اصلی یک جدول مثال
<td> برای ایجاد سلول های یک جدول مثال
<template> برای مخفی کردن محتوا در سمت کاربر ( Client ) مثال
<textarea> برای ایجاد یک ناحیه متنی ( باکس متن ) برای دریافت اطلاعات مثال
<tfoot> برای ایجاد فوتر یک جدول مثال
<th> برای ایجاد هدر ستون های یک جدول مثال
<thead> برای ایجاد هدر یک جدول مثال
<time> برای ایجاد یک زمان – (تاریخ و ساعت) در یک صفحه وب مثال
<title> برای ایجاد عنوان یک صفحه وب در مرورگرها و موتورهای جستجوگر مثال
<tr> برای ایجاد سطرهای یک جدول مثال
<track> برای ایجاد محتوای متنی یک رسانه (مثله زیرنویس ویدئو) مثال
<tt> برای ایجاد یک متن تله تایپ مثال
<u> برای خط کشیدن به زیر یک متن مثال
<ul> برای ایجاد لیست های نامرتب مثال
<var> برای تعریف متغیرها در صفحه وب مثال
<video> برای گذاشتن ویدئو در صفحه وب مثال
<wbr> جهت شکستن خط به سطر جدید مثال
<xmp> این تگ در HTML منسوخ شده می باشد و دقیقا شبیه تگ pre عمل میکند.
لذا شماهم بجای این تگ از تگ pre استفاده کنید.

لیست کامل تگ های HTML بهمراه توضیح و مثال

نظرات

وردپرس: 0