آموزش زبان Html
فهرست مطالب
آخرین به روزرسانی در 21/10/2022
در این مقاله قصد داریم در رابطه با زبان html صحبت کنیم.
html یکی از هسته و پایه های اصلی برنامه نویسی سمت کلاینت هر وبسایتی می باشد.
در واقع شما هیچ وبسایتی را نمی توانید بدون استفاده از html پیدا کنید زیراکه در ابتدای کار
مفهوم وب با زبان html شروع شد و سپس به این نقطه ای که در آن هستیم تبدیل شد.
پس تا پایان این آموزش با ما همراه باشید تا نکات بیشتری را از html بیاموزیم.
Html چیست ؟
HTML مخفف Hypertext Markup Language است و یک زبان برنامه نویسی پرکاربرد است
که برای توسعه صفحات وب استفاده می شود. از طریق این آموزش ابتدایی HTML، معنای HTML، ویژگیهای HTML، تگ ها و عناصر اصلی استفاده شده و موارد دیگر را در این زبان برنامه نویسی پر کاربرد خواهیم فهمید.
HTML یک زبان نشانه گذاری است که برای ایجاد صفحات وب استفاده می شود.
زبان نشانه گذاری به معنای متن بین تگ هایی است که ساختار را تعریف می کند.
این زبان ساختار صفحه وب ما را تشکیل می دهد یا تعریف می کند.
کاربردهای Html
توسعه صفحات وب
همانطور که گفته شد اولین و محبوب ترین کاربر زبان HTML برای ایجاد صفحات وب می باشد.
هر صفحه وب حاوی مجموعه ای از تگ ها و لینک های HTML است که برای اتصال صفحات دیگر استفاده می شود.
هر صفحه در اینترنت با استفاده از HTML نوشته شده است.
پیمایش در اینترنت
پیمایش در اینترنت بدون HTML کار بسیار خسته کننده ای بود. تگ های لینک HTML به ما اجازه می دهد تا صفحات را پیوند داده و به راحتی پیمایش کنیم.
دنیای وب را بدون تگ های لینک تصور کنید، به معنای واقعی کلمه باید هر بار ورود URL مورد نظر وارد کنید.
تعبیه تصاویر و ویدئوها
HTML به ما امکان می دهد تصاویر و فیلم ها را به راحتی جاسازی کنیم و ویژگی هایی را برای تنظیم ارتفاع، موقعیت و حتی نوع رندر به ما می دهد.
میتوانید کنترلر ها، بازه های زمانی و موارد دیگر را نیز برای ویدیوها تنظیم کنید.
قبلاً این کار با استفاده از Flash انجام می شد اما HTML با کمک تگ <video> کار را آسان کرده است.
ذخیره سازی سمت کلاینت
HTML5 ذخیره سازی سمت کلاینت را با استفاده از localStorage و IndexD امکان پذیر کرده است.
به همین دلیل ما دیگر نیازی به پاسخ دادن به کوکی ها نداریم.
هر دوی این تاکتیک ها مجموعه ای از قوانین و ویژگی های خاص خود را دارند.
همچنین ذخیره سازی جدول هش مبتنی بر رشته توسط localStorage ارائه شده است.
API آن ساده است و توابع setItem، getItem و removeItem در دسترس توسعه دهندگان است.
از سوی دیگر، IndexDB یک ذخیرهسازی دادههای سمت مشتری بزرگتر و توانمندتر است.
که با اجازه کاربر، پایگاه داده IndexDB را می توان بزرگ تر نیز کرد.
توسعه بازی
اگرچه نمیتوانید بازیهای ویدیویی پیچیدهای با کیفیت بالا با HTML ایجاد کنید،
اما عنصر canvas> HTML> میتواند برای ساخت بازیهای دوبعدی و سه بعدی با استفاده از CSS
و جاوا اسکریپت استفاده شود که میتواند بر روی مرورگرها اجرا شود.
(برای کسب اطلاعات بیشتر در رابطه با توسعه ی بازی های تحت وب بر روی مقاله ی بازی های تحت وب کلیک کنید.)
پشتیبانی از ورود اطلاعات
با استفاده از استانداردهای جدید HTML5 در مرورگر های جدید ، توسعه دهندگان می توانند به سادگی تگ های فیلدهای مورد نیاز، متن، فرمت داده و … را اضافه کنند و داده ها را دریافت کنند.
HTML5 جدید دارای چندین ویژگی جدید برای اهداف ورود و اعتبارسنجی داده است.
تعامل با API های محلی
با کمک HTML می توانید با سیستم عامل خود تعامل داشته باشید.
با استفاده از این ویژگی، میتوانید به راحتی فایلها را برای آپلود، تمام صفحه یک ویدیو و موارد دیگر به صفحه وب بکشید.
HTML Editor
لازم به ذکر است زبان html زبان بسیار ساده ای است که نیاز به کامپیالر و کامپایل شدن ندارد و در واقع
شما از هر ویرایشگر متن ساده ای می توانید برای این زبان استفاده کنید و از پروژه ران بگیرید ، فقط تنها
کافی است فایل را با فرمت html ذخیره کنید.
ما در قسمت پایین چندتا از متداول ترین و ساده ترین ویراشگرهای متنی که برای html استفاده می شود را معرفی کرده ایم.
- Notepad
- Notepad++
- Atom
- Sublime Text
اسکلت html
Html از یک ساختار کلی تشکیل شده است که این ساختار برای شروع هر نوع کد نویسی در html باید
به صورت پایه وجود داشته باشد ، این ساختار به شرح زیر می باشد :
<!DOCTYPE html>
دستورالعمل مرورگر در مورد نسخه HTML.
<html>
عنصر ریشه که به عنوان یک محفظه برای نگهداری همه کدها عمل می کند.
<head>
هر چیزی که در این بخش نوشته می شود هرگز در مرورگر نمایش داده نمی شود.
این بخش شامل اطلاعات کلی در مورد داکیومنت است.
این اطلاعات کلی شامل : عنوان، تعاریف CSS و برگه های اسکریپت می باشد.
<body>
هر آنچه در اینجا نوشته شده است در مرورگر نمایش داده می شود.
به عنوان مثال این اطلاعات شامل متون، تصاویر، لینک ها ، فرم ها و سایر اطلاعاتی است که از طریق تگ ها به وجود آمده اند.
HTML Comment
نظرات در مرورگر دیده نمی شود و تنها برای کدنویسان دیگر پروژه مورد استفاده قرار می گیرد.
نظرات به درک بهتر کد ما کمک می کند و آن را خواناتر می کند.
معمولا برای نظرات از از / یا // استفاده می کنند ، مثال :
hello manataz//
عناصر در html
تمامی عناصر در html با استفاه از تگ های ایجاد می شوند.
در واقع تگ ها هسته ی اصلی html هستند.
تگ ها می توانند تو در تو یا خالی باشند.
HTML Attributes
ویژگی های مرتبط با هر تگ را Attribute می نامند.
در واقع اتربیوت ها یک سری خصوصیات و استایل هایی را برای هر تگ ارائه می دهند.
ساختار اتریبیوت ها در تگ ها به صورت زیر می باشد :
(لازم به ذکر است برخی از اتربیوت ها هستند که می توان آن ها را به صورت عمومی برای همه ی تگ ها تعریف کرد که در بخشقرار می گیرند که در بخش های بعدی به آنها خواهیم پرداخت.)
این اتربیوت ها به شرح زیر می باشد :
Title : نمایش اطلاعات اضافی
Style : استایل دهی به تگ (این استایل دهی شامل ویژگی های css مانند : رنگ ، فونت ، بک گراند و … می باشد.)
لازم به ذکر است برخی از ویژگی ها وجود دارند که می توانند برای برچسب های خاص اعمال شوند به عنوان مثال :
<img src=” URL” width=”100” height=”70” alt=” File cannot be loaded”>
در تگ بالا شاهد تعریف و افزودن یک تصویر هستیم که دارای ویژگی های تعریف شده ی زیر است :
src مشخصه ای است که در تگ تصویر برای تعریف مسیر استفاده می شود.
Width یک ویژگی است که برای تعریف عرض در پیکسل استفاده می شود.
Height یک ویژگی است که برای تعریف عرض در پیکسل استفاده می شود.
Alt مربوط به سئو می شود که به عنوان متن جایگذین معنی می شود و باید توصیف کوتاهی از تصویر باشد.
اگر مثال دیگری از تگ ها و ویژگی های آن بزنیم می توان به تگ a که برای لینک دهی استفاده می شود اشاره کنیم :
<a href=” URL”> Name of the link </a>
در اینجا ویژگی href برای تعریف مسیر لینک استفاده می شود.
HTML Tags
بالاخره رسیدیم به بخشی که انتظارش را می کشیدیم یعنی بخش تگ ها که در این بخش
سعی می کنیم تمامی تگ های مهم زبان html را به شما معرفی کنیم.
خب در ابتدای کار باید بدانید که تگ ها با دو تگ باز و بسته به صورت زیر تعریف می شوند :
<> تگ باز
</> تگ بسته
حال در ادامه به هر کدام از مهم ترین تگ ها و کاربرد آن ها خواهیم پرداخت :
<title>
آموزش html با ماناتاز
</title>
این تگ عنوان صفحه را مشخص می کند به عنوان مثال ما در بین این دو تگ عبارت “آموزش html با ماناتاز” را قرار داده ایم
که به این معناست که عنوان برگه ی ما این است.
<p > This is our first Paragraph </p>
این تگ برای ایجاد پاراگرافت و نوشتن متن استفاده می شود.
(لازم به ذکر است از اینجا به بعد دیگر تگ بسته را نمی نویسیم زیراکه به شما آموزش دادیم که تگ بسته تنها یک اسلش اضافه تر در ابتدای کار می گیرد.)
<br>
این تگ مانند کلید enter در کیبورد عمل می کند و یک فاصله می اندازد.
این تگ برای ایجاد تصویر است که یک ویژگی به نام src می گیرد که در این قسمت باید آدرس فراخوانی تصویر را مشخص کنید که درواقع تصویر از چه آدرسی خوانده شود.
<h1>
تا
<h6>
تگ های هدینگ که از 1 تا 6 را دارا هستند برای عنوان پاراگراف ها مورد استفاده قرار می گیرد و این 1 تا 6 بر اساس
اولیوت آن ها است.
به عنوان مثال مهم ترین عناوین شما در تگ h1 قرار می گیرد و به همین ترتیب عنوان های کم اهمیت بعدی در یک مقاله در
هدینگ ها بعدی.
<strong>
این تگ به بولد کردن متن کمک می کند ، چیزی که در ماکروسافت ورد و نرم افزارهای نوشتاری نیز خواهیم دید.
<ol>
این تگ برای تعریف مجموعه ای از رویدادها است که به صورت ترتیبی اتفاق می افتد.
در واقع به شما کمک می کند یک لیست را بسازید.
<ul>
برای تعریف مجموعه ای از رویدادها که در آن ترتیب مهم نیست.
در واقع این شامل ایجاد یک لیست نامرتب است.
<li>
این تگ داخل تگ <ol>یا <ul> قرار می گیرد و موارد لیست را
تعریف میکند ، به مثال زیر توجه کنید :
- Cricket
- Football
- Hockey
نتیجه ی ران کردن :
- Cricket
- Football
- Hockey
- Cricket
- Football
- Hockey
نتیجه ی ران کردن :
- Cricket
- Football
- Hockey
تگ <div> و <span>
هر دوی این تگ ها برای گروه بندی تگ های مختلف استفاده می شوند.
در واقع مانند یک ظرفی عمل می کنند که می توان تگ های دیگر را درون آنها ریخت.
کاربرد اصلی این گروه بندی در زمان استایل بندی مشخص می شوند که می خواهید به گروهی از
تگ های استایل ثابتی را اختصاص دهید.
تفاوت این دو در این است تگ div برون خطی و تگ span درون خطی است.
تگ <table>
برای ایجاد جدول در یک صفحه وب استفاده می شود.
برای تکمیل ساخت جدول به تگ های دیگری نیاز دارید.
<tr>: برای علامت گذاری ردیف جدول (همه چیز داخل این تگ قرار می گیرد.)
<th> : برای هدر جدول
<td> : برای داده های ستون جدول
<thead> : برای حفظ تمام داده های هدر
<tbody> : برای حفظ تمام داده های بادی
مثال :
Color Chart
My first Color Chart
Name
Type
Mixed with
Red
Turns to pink
White
Dark Blue
Turns to Sky Blue
White
Green
Turns to Black
Blue
تگ form
Register
Register Form
خروجی :
کار با فرم ها در زبان html به همینجا ختم نمی شود و ما در ادامه به ویژگی های اساسی برای هر تگ خواهیم پرداخت.
1- ویژگی های تگ action
1
همانطور که گفته شد، ویژگی action عملی را که باید هنگام ارسال فرم انجام شود را مشخص می کند.
هنگامی که کاربر روی دکمه ارسال کلیک می کند، داده های فرم به فایلی که روی سرور است ارسال می شود.
اجازه دهید با مثال زیر بهتر منظورمان را شرح دهیم :
در مثال زیر داده های فرم به فایلی با نام “action_sample.php” ارسال می شود.
فایل شامل یک اسکریپت سمت سرور است که داده های فرم را مدیریت می کند:
مثال :
2- ویژگی های تگ Target
2
همانطور که از نام این تگ مشخص است، ویژگی target مشخص می کند که پاسخ پس از ارسال فرم توسط کاربر در کجا نمایش داده می شود.
ویژگی target می تواند یکی از مقادیر زیر را داشته باشد که در جدول زیر ذکر شده است:
مقدار پیش فرض ویژگی هدف _self است که به این معنی است که پاسخ در پنجره فعلی نمایش داده می شود.
_blank | این مقدار به این معنی است که پاسخ در یک پنجره یا تب جدید نمایش داده می شود. |
_self | این مقدار به این معنی است که پاسخ در پنجره فعلی نمایش داده می شود. |
_parent | این مقدار به این معنی است که پاسخ در قاب والد نمایش داده می شود. |
_top | این مقدار به این معنی است که پاسخ در تمام بدنه پنجره نمایش داده می شود. |
framename | این مقدار به این معنی است که پاسخ در یک iframe با نام نمایش داده می شود.
|
3- ویژگی های Method
3
ویژگی متد برای تعیین روش HTTP مورد استفاده در هنگام ارسال داده های فرم استفاده می شود.
متد GET روش پیشفرض HTTP است که هنگام ارسال دادههای فرم استفاده میشود.
فرم-داده به عنوان متغیرهای URL (با متد=”get”) یا به عنوان یک روش پست HTTP (با متد=”post”) ارسال می شود.
اجازه دهید مثالی بزنیم که از روش GET هنگام ارسال داده های فرم استفاده می کند:
<”form action=”/action_sample.php” method=”get>
نمونه ای با استفاده از روش he POST هنگام ارسال داده های فرم به شرح زیر است:
<”form action=”/action_sample.php” method=”post>
نکات مهمی که در استفاده از روش GET باید به خاطر بسپارید عبارتند از:
داده های فرم با متد Get، به صورت جفت نام/مقدار به URL اضافه می شوند.
ما هرگز نباید از روش Get برای ارسال داده های حساسی که قرار نیست افشا شوند استفاده کنیم.
به این دلیل است که داده های فرم ارسال شده در URL قابل مشاهده است. بنابراین اطلاعات حساس افشا خواهد شد.
طول URL هنگام استفاده از روش Get به 2048 کاراکتر محدود می شود.
روش GET باید برای داده های غیر ایمن مانند رشته های پرس و جو در Google استفاده شود.
نکات مهمی که در استفاده از روش POST باید به خاطر بسپارید عبارتند از:
روش پست دادههای فرم را داخل بدنه درخواست HTTP اضافه میکند. داده های فرم ارسال شده در URL نشان داده نمی شود.
روش ارسال می تواند برای ارسال داده های بزرگ استفاده شود. محدودیت سایز نداره.
فرم های ارسالی که با روش ارسال انجام می شود را نمی توان نشانه گذاری کرد.
توجه: اگر دادههای فرم حاوی اطلاعات حساسی هستند که قرار نیست افشا شوند، همیشه باید از این روش ارسال استفاده کنیم.
4- ویژگی های Novalidate
4
ویژگی Novalidate فرم HTML یک ویژگی بولی است. همانطور که می دانیم، Boolean به معنای 2 مقدار است، بله یا خیر.
بنابراین وقتی ویژگی novalidate فرم HTML وجود دارد، نشان میدهد یا مشخص میکند که دادههای فرم نباید هنگام ارسال اعتبارسنجی شوند.
نمونه ای از فرم با ویژگی novalidate به شرح زیر است:
<form action=”/action_sample.php” novalidate>
5- ویژگی size
5
ویژگی اندازه عنصر ورودی HTML، عرض یک فیلد ورودی را برحسب کاراکتر مشخص می کند که مقدار پیش فرض آن 20 است.
مثال :
The input size attribute
خروجی کد بالا :
6- ویژگی maxlength
6
این ویژگی حداکثر تعداد کاراکترهایی را که می توان در یک فیلد ورودی مجاز دانست، مشخص می کند.
مثال :
The input maxlength attribute
7- ویژگی multiple
7
ویژگی multiple در عنصر فرم HTML مشخص می کند که کاربر مجاز است بیش از یک مقدار را در یک فیلد ورودی وارد کند.
مثال:
The input multiple attributes
8- ویژگی pattern
8
ویژگی pattern عنصر ورودی HTML یک عبارت منظم را مشخص میکند که هنگام ارسال فرم توسط کاربر، مقدار فیلد ورودی بررسی میشود.
مثال :
The input pattern attribute
9- ویژگی required
9
این ویژگی مشخص می کند که یک فیلد ورودی باید حتما پر شود در غیر اینصورت امکان ارسال فرم برای کاربر نباشد.
مثال :
The input required attribute
10- ویژگی list
10
این ویژگی مقادیر از پیش تعیین شده را تعریف می کند ، به مثال زیر توجه کنید ، خواهید دید که زمانیکه کاربر بر روی فیلدهای ورودی کلیک می کند مقادیری از پیش تعریف شده برای آن نمایش داده می شود.
مثال :
The input list attribute
خروجی :
متا تگ ها در html
متا تگ ها در زبان html مربوط به سئو می شوند که در آن ها می توانید اطلاعاتی را ائم از کلمات کلیدی
تا تگ های متای عنوان و توضیحات اضافه کنید.
(برای آموزش کامل با این متا تگ ها به دوره ی آموزش پیشرفته ی سئو مراجعه کنید.)
Html و Css
Html و Css دو زبانی هستند که کاملا با یکدیگر در ارتباط تنگاتنگی بوده و با یکدیگر رو به جلو می روند.
در واقع به همان اندازه ای که وجود زبان html برای صفحات وب حیاتی و حائز اهمیت می باشد؛ وجود Css نیز از اهمیت بالایی برخوردار است.
در واقع پیاده سازی و منطق تگ ها و عناصر با استفاده از html بوده و استایل بندی آن ها با استفاده از Css .
ما در مقاله ای مجزا به آموزش مقدماتی تا متوسطه ی Css خواهیم پرداخت اما در این بخش صرفا قصد داریم نحوه ی استفاده از کدهای Css در html را شرح دهیم.
1- روش Inline :
در این روش CSS درون خطی برای اعمال یک سبک به یک عنصر HTML در یک زمان با کمک ویژگی style استفاده می شود.
در واقع استایل دهی به عناصر درون خود فایل html انجام می شود.
به مثال زیر توجه کنید :
HTML Tutorials
Paragraph1
Paragraph2
همانطور که در مثال می بینید استایل رنگ ها درون خود فایل html استفاده و تگ ها استفاده شده است.
2- روش External :
این روش قطعا روش بهتر و بهینه تری است و باعث می شود که شما کدنویسی بهینه تری را داشته باشید و روش برون خطی نیز نام دارد.
در این روش دیگر کدهای Css با کدهای html تلفیق نمی شود بلکه برای هر تگ کلاس یا آی دی ای تعریف شده و در فایلی جداگانه استایل دهی ها به آنها داده می شود و تنها در فایل html فراخوانی می شوند.
(در ادامه و بخش های بعدی با مفهوم کلاس ها و آی دی آشنا خواهیم شد.)
با کمک تگ در قسمت head می توانید یک داکیومنت css را به یک یا چند داکیومنت HTML پیوست کنید.
به مثال زیر توجه کنید :
HTML Tutorials
Paragraph1
Paragraph2
کلاس ها در html
ویژگی class عناصر HTML را در گروه هایی سازماندهی می کند که شما بتوانید دستورات کلی را برای این گروه ها تعیین کنید.
عناصر مختلف HTML می توانند به یک نام کلاس تعلق داشته باشند.
با کمک ویژگیهای کلاس، میتوانید از استایل دهی های برون خطی استفاده کنید تا استایلها را بهطور هم زمان به همه عناصر کلاسبندی شده اعمال کنید یا همه آنها را با یک اسکریپت ویرایش کنید.
برای استایل دادن به کلاس باید کافی است پس از نام کلاس یک . بگذاریم :
.نام کلاس
به مثال زیر توجه کنید :
Engineering
Paragraph about IT engineering
Paragraph about Mechanical engineering
Paragraph about Civil engineering
در مثال بالا می بینید که کلاس fields برای تگ ها هدینگ 1 تا 3 تعریف شده است و در بخش <head>
با استفاده از فراخوانی کلاس fields رنگ تمامی هدینگ ها را آبی کرده ایم.
در واقع کلاس ها یک منطق بهینه سازی هستند و کار کدنویسی را بسیار و بسیار ساده کرده اند شما به جای
اینکه برای هر هدینگ استایل دهی رنگ را تعیین کنید با استفاده از یک کلاس به تمامی آنها ویژگی یکسانی را
بخشیده اید.
Id در html
آی دی کاملا مشابه کلاس بوده و کاربرد یکسانی را دارد با این تفاوت که خصوصیت class را
در گروه های مختلفی می توانیم تکرار کرده و با اسم های یکسان در گروه ها و تگ های مختلف به کار بریم.
اما خصوصیت عمومی id تنها مخصوص یک عنصر و یا یک گروه تگ می باشد.
لذا در خصوصیت id شما نمی توانید آن اسم را به تگ یا گروه تگ دیگری اختصاص دهید.
آی دی به صورت زیر تعریف می شود :
#نام آیدی
به مثال زیر توجه کنید :
Engineering
Paragraph about IT engineering
فایل های چند رسانه ای در html
فایل های چند رسانه ای یکی از پر کاربردترین فایل ها در دنیای وب امروز است.
فایل چند رسانه ای می تواند تقریباً هر چیزی باشد، مانند تصاویر، فایل های صوتی، فیلم، ضبط، موسیقی، انیمیشن و …
با کمک تگ embed می توانید فایل های چند رسانه ای را در وب سایت خود جاسازی کنید.
فرمت های صوتی و تصویری زیادی وجود دارد. استاندارد زبان HTML پشتیبانی از فرمتهای MP4، WebM و Ogg برای ویدیو و فرمتهای MP3، WAV و Ogg برای صدا است.
HTML5 تگ های صوتی و تصویری محلی را به صورت video و audio ارائه می کند.
ما هر دو روش را برای جاسازی چند رسانه ای در یک صفحه وب بررسی می کنیم.
برخی از ویژگی های مورد نیاز برای این عناصر به شرح زیر:
Src : مسیر/URL برای پخش فایل های صوتی/تصویری.
Height : ارتفاع ویدیو.
Width : عرض ویدیو.
Controls : کنترل هایی را برای صدا/تصویر مانند پخش، مکث، صدا و .. می دهد.
مثال :
HTML Frames
فریم های HTML برای تقسیم پنجره مرورگر به چند بخش استفاده می شود که در آن می توان یک داکیومنت HTML جداگانه
در هر بخش بارگذاری کرد. دسته فریم هایی که در پنجره مرورگر نمایش داده می شوند، frameset نامیده می شوند.
HTML Frames
HTML Iframes
<iframe>
مخفف Inline Frame است. تگ iframe برای جاسازی یک فایل HTML جداگانه در یک صفحه وب استفاده میشود که میتواند جداگانه بارگذاری شود. آی فریم ها از فریم ها متمایز هستند زیرا در یک صفحه وب مانند تصویر یا ویدیو اضافه می شوند.
آی فریم ها بیشتر برای فراخوانی یک فایل ویدویویی ، تصویری و یا صوتی از یک سایت و سرور دیگری مورد استفاده قرار می گیرند.
Iframes examle
مهرشاد شادان مهر
مدرس سئو ، طراح سایت ، انیماتور
قهرمان زندگی شما در چند سال آینده ی شما می باشد