آموزش زبان html به زبان ساده(مبتدی)
سلام قرار توی این پست بریم باهم دیگه زبان نشانه گذاری HTML رو یاد بگیریم
توی قدم اول بریم ببینیم که اصلا HTML چیه
زبان html چیست؟
زبان HTML یک زبان نشانه گذای محسوب میشه که مخفف شده کلمه Hypertext Markup Language هست.
یعنی کد های که ما یاداشت میکنیم برای نمایش محتوا داخل سایت استفاده میشه. زبان HTML کد های برنامه نویسی نداره بلکه تگ داره و ما دستورات خود را داخل تگ های مورد نیاز استفاده میکنیم.به طور کلی میتونیم بگیم که زبان HTML یک زبان تگ محور محسوب میشه.تگ ها میتونن یک متن,تصویر,ویدیو,موزیک و … رو برای ما نمایش بدن که توی این پست قرار باهم دیگه آموزش ببینیم
ابزار های مورد نیاز برای نوشتن زبان HTML
خوب ما گفتیم که HTML یک زبان برنامه نویسی محسوب نمیشه پس ابزار خاصی هم نمیخوادش برای نوشتن تگ هامون.برای نوشتن تگ های که قرار آموزش ببینیم ما میتونیم از برنامه های ساده ای مثل
Notepad++ ,Notepad یا Visual Studio Code استفاده کنیم.چون قرار که HTML رو به زبان ساده آموزش ببینیم مبنای آموزش رو میزاریم روی این که با برنامه Notepad قرار کار کنیم.
ساخت و اجرای فایل HTML
برای اینکه بتونیم دستورات خودمون رو داخل نود پد یاداشت کنیم لازمه که اول یک فایل نودپد هر کجای کامپیوتر که دوست داریم درست کنیم.بعد از ساخت فایل فقط کافیه که پسوند فایل رو از text به HTML تغیر بدیم.اگر تغییر پسوند فایل رو بلد نیستین میتونین از اینجا نگاه کنید.
بعد از ساخت و تغییر اسم فایل به HTML فقط کافیه کن اون رو اجرا کنیم.برای اجرا کردن فایل کافیه که اون رو با مرورگر خودتون بازش کنید تا فایل اجرا بشه.
تگ های اصلی HTML چیست؟
زبان HTML از چند تا تگ اصلی تشکیل شده که قرار باهم یک نگاهی به انها بندازیم
برای نوشتن دستورات خود داخل سند HTML اول از همه باید این رو بدونین که بیشتر تگ ها HTML از تگ های شروع و پایان تشکیل میشن.برای نوشتن تگ شروع فقط کافیه که علامت کوچکتر و بزرگتر رو یاداشت کنیم و اسم تگ رو درون آن بنویسیم.به عنوان مثال:<اسم تگ مورد نظر ما>
برای تگ بسته هم فقط کافیه که دوباره همون کار رو انجام بدیم و فقط اینبار یک علامت اسلش ‘/’ یاداشت کنیم.حواسمون باشه که اسم تگ شروع با پایان باید یگی باشه به عنوان مثال کامل:<p> </p>
اولین تگ اصلی که قرار باهم آموزش ببینیم تگی به اسم HTML هست که تگ باز و بسته اون رو یاداشت میکنیم و سایر تگ هامون رو داخلش مینویسیم.به عنوان مثال:
< HTML/> سایر تگ ها اینجا یاداشت میشه < HTML>
دومین تگ اصلی که قرار باهم اموزش ببینیم تگ head هستش.تگ باز و بسته head رو داخل تگ HTML یاداشت میکنیم به عنوان مثال:
< HTML>
<head></head>
< HTML/>
ما هر تگی یا هر چیزی که داخل تگ head یاداشت میکنیم کاربر نمیتونه اون هارو ببینه و برای خود سایت به کار میره مثل اسم سایت,متا تگ ها,وصل کردن فایل css به سند HTML
تگ سومی که قرار باهم یاد بگیریم تگ title هست
از اسم تگ معلومه که برای اسم سایت ما استفاده میشه
تگ title رو داخل تگ head یاداشت میکنیم و داخل اون اسم مورد نظر سایت رو مینویسیم.به عنوان مثال:
< HTML>
<head>
<title>
اسم سایت
<title/>
<head/>
< HTML/>
کد بالا یک نمونه مثال برای نوشتن تگ title هستش
خوب میرسیم که اخرین تگ اصلی که تگی نسیت جز تگ body
تگ بادی رو خارج از تگ head یاداشت میکنیم
ما هر تگی که قرار آموزش ببینم رو داخل تگ بادی یاداشت میکنیم و به طور کلی ما هر چیزی که داخل تگ بادی یاداشت کنیم کاربر میتونه اون رو ببینه.به عنوان مثال:
< HTML>
<head>
<title>
اسم سایت
<title/>
<head/>
<body>
اینجا هرچی یاداشت کنیم کاربر اون رو میتونه داخل سایت ما ببینه
<body/>
< HTML/>
تگ های مربوط به متن در HTML
ما تقریبا میتونیم برای نوشتن متن از تگ های زیادی استفاده کنیم اما یک تگ اصلی وجود داره برای این کار
تگی که برای نوشتن متن استفاده میکنیم تگ P هستش
این تگ نخفف کلمه پاراگراف ‘Paragraphs’ هستش
ساختار این تگ به این شکله که ما اون رو درون تگ بادی استفاده میکنیم
< HTML>
<head>
<title>
اسم سایت
<title/>
<head/>
<body>
<p>
درون این تگ هر متنی یاداشت کنیم
به نمایش در میاد
<p/>
<body/>
< HTML/>
تگ های عنوان یا h1 تا h6
اسم تگ های h مخفف شده کلمه هدینگ’heading’ هستش.فرقی این تگ ها با سایر تگ ها توی اینه که نا به تعداد مشخصی میتونیم از این تگ ها استفاده
به عنوان مثال این تگ هارو میتونیم برای عنوان درون سایت خودمون استفاده کنیم و به این صورت هستش که از مهم ترین که تگ h1 هستن شروع میشه و هرچی عدد اون ها کمتر میشه از اهمیت اون هم کمتر میشه
به صورت پیش فرض ما هر متنی رو یاداشت کنیم و بریم سطح بعدی متن نمیره درون خط جدید.برای اینکه بتونیم درون متن بریم به خط بعدی باید از تگی به اسم br استفاده کینم که ساختار اون به صورت یک تگ باز است و تگ بسته نداره.مثال:<br/> ما به این تگ ها که فقط یک تگ باز هست میگیم single تگ یعنی یک تگ تنها و تگ باز و بسته اون درون خودشه نمونش رو میتونین بالا مشاهده کنید.
صفت های تگ ها
بعضی از تگ ها یک صفت دارن که ما به کمک اون ها میتونیم کار های بیشتر و بهتری انجام بدیم صفت های مثل:href,src,type و … که تو ادامه باهم دیگه آموزش میبینیم
ایجاد لینک درون سایت با تگ a
ما برای اینکه بتونیم یک لینک یا یک ادرس خارجی یا داخلی رو داخل سایت و سند HTML قرار بدیم باید از تگ a و صفت کمکی href استفاده کنیم.به عنوان مثال:
<a href=www.google.com>
هرچی که بین این تگ باشه تو خروجی لینک میشه
و با کلیک روی اون میتونم بریم به صفحه ای که میخوایم
</a>
یک مثال از روش ادرس دهی بالا گفتم که شما میتونین ادرس مورد نظر خودتون رو یاداشت کنید.
برجسته کردن متن با تگ b
برای اینکه ما بتونیم متن رو برجسته یا به اصطلاح bold کنیم باید اون تیکه از متن مورد نظر خودمون رو دا تگ b قرار بدیم.به عنوان مثال:
<p>سلام خوش آمدید به سایت
<b>
اوشن سئو
</b>
</p>
درون مثال بالا کلمه اوشن سئو در خروجی به صورت برجسته یا بولد نشون داده میشه.فقط این رو باید بدونیم که این روش از بولد کردن یا برجسته کردن به متن ما هیچ ارزشی محتوایی نمیده و فقط متن رو برجسته یا بولد میکنه
آموزش ساخت دکمه با تگ button
برای اینکه ما بتونیم یک دکمه رو داخل سایت خودمون درست کنیم باید از تگ button استفاده کنیم که یک تگ باز و بسته است.این تگ یک صفت و یک روداد دارد اما در این پست آموزشی ما قرار نیست بپردازیم به روداد اون
اسم صفت این تگ type هستش که مشخص میکنه نوع دکمه ما به چه صورت باشه
به طور کلی ما دو مدل میتونیم دکمه درست کنیم
مدل اول داخل صفت type اسم button را یاداشت میکنیم که به این صورت هستش:
<button type=”button”>
اینجا ما هر متن یا عکس یا هرچیزی که قرار بدیم به صورت
یک دکمه عمل میکنه
<button/>
این مدل از دکمه یک مدل ساده از دکمه محسوب میشه
مدل دوم از نوع دکمه نوع ارسال یا submit هستش
که به صورت زیر نوشته میشه:
<button type=”submit”>
دکمه ارسال
<button/>
ما از مدل دوم که مدل ارسال سند یا فرم یا هر چیز دیگه هستش برای برقراری با پایگاه داده کار میکنیم.
کشیدن خط روی متن یا عدد با تگ del
تاحالا شده برید توی یه سایتی که روی اسم محصول یا قیمت محصول خطی کشیده که یعنی این محصول رو تمام کردیم.خوب این کار رو با تگdel انجام میدن
برای این کار فقط کافیه که تگ باز و بسته del رو یاداشت کنی و چیزی که میخوای روش خط بکشی رو داخلش یاداشت کنی و تمام به همین راحتی.پایین یه مثال میزنم یه ببینی.
<body>
<del>
اینجا هرچی باشه روش خط میکشه
<del/>
<body/>
تگ div
قبل از html 5 تگ هایی تقسیم بندی مثل header, footer, nav, article, aside
برای همین از تگ div استفاده میکردن.میشه اینجوری گفت که این تگ هنوز هم یکی از اصلی ترین تگ ها برای تقسیم بندی استفاده میشه.به صورت تگ جفت باز و بسته هستش
که ما با class و اسمی که به اون میتونیم بدیم اون رو از بقیه قسمت ها مجزا میکنیم
درست کردن فورم با تگ form
برای اینکه ما بتونیم یک فرم درست بکنیم باید از تگ باز و بسته فرم استفاده بکینم.روش کار با این تگ به این صورت هست که تگ باز و بسته فرم رو یاداشت میکنیم و و هر محتوایی که بخوایم رو داخلش مینویسیم و تو خروجی مشاهده میکنیم.این رو باید بدونیم که هر محتوایی که میخوایم یاداشت بکنیم برای اینکه از بقیه جدا باشه باید داخل تگ <label></label> قرار بگیره.میتونید هم تگ لیبلرو یاداشت نکنید ولی یه قانون نانوشته هست که میگه باید باشه.در پایین مثالی از این تگ میزنم.
<body>
<form>
<lable>
اینجا هر چیزی میتونید یاداشت کنید
<lable/>
<form/>
<body/>
فوتر سایت با تگ footer
خوب اول بگم که فوتر سایت چیه و کجایی سایت قرار داره
فوتر سایت به پایین ترین قسمت یک سایت میگن.زیاد دیدن سایت هایی که پایین صفحه اولشون عکس نماد اعتماد یا شماره تلفن یا راه های ارتباطی رو گذاشتن
اونجا دقیقا فوتر صفحه حساب میشه که میتونید داخل همه صفحه ها بزارید یا میتونید نزارید.این تگ هم به صورت یک تگ جفتی باز و بسته محسوب میشه.قبلا از تگ div که درس دادم به جایی این تگ استفاده میکردن ولی العان دیگه از خود تگ فوتر استفاده میکنن.در پایین یک مثال ازش میزنم:
<body>
<footer>
اینجا هرچیزی میتونید یاداشت کنید
<footer/>
<body/>
گرفتن ورودی و اطلاعات از کاربر
گرفتن ورودی و اطلاعات از کاربر یا تگ input
قطعا شده وارد یک سایت شدین که گفته نام کاربری یا ایمیل یا رمز یا شماره خودت رو وارد کن.فیلد هایی که داخل اونها میتونید اطلاعات رو وارد کنید رو با تگ input درست میکنن.این یک تگ تکی هست فقط تگ شروع داره و تگ بسته نداره.<input/> اما این تگ مدل یا type های زیادی داره.تایپ های مثل:رمز,اسم,ایمیل,تاریخ,ساعت و … که برای استفاده خودتون باید مدل اون رو مشخص کنید مثلا:
<“input type=”text>
<“input type=”number>
<“input type=”password>
<“input type=”email>
<“input type=”date>
<“input type=”time>
<“input type=”checbox>
<“input type=”radio>
<“input type=”button>
<“input type=”color>
<“input type=”url>
<“input type=”tel>
<“input type=”range>
<“input type=”submit>
چند تا از پرکاربرد ترین مدل های ورودی این تگ رو براتون نوشتم یا داشته باشینش
جدا کردن بخش های مختلف با تگ hr
فکر کن که میخوای یک بخش رو از بخش بعدی توی سایت جدا بکنی
مثال:
HTML
یک زبان برای ساخت صفحه های سایت است
CSS
یک زبان برای استایل دادن به سایت است
JavaScript
یک زبان برای مغز سایت است
فکر کن که میخوای بین این زبان ها یک خط افقی بکشی تا از هم دیگه جدا بشه.خوب برای این کار فقط کافی از تگی که هستی بیایی بیرون و تگ hr رو یاداشت کنی
این تگ یک تگ تنها هستش و تگ بسته نداره.نحوه نوشتن تگ رو پایین تر نگاه کنید
<body>
<p>
HTML
یک زبان برای ساخت صفحه های سایت است
<P/>
<hr>
<p>
CSS
یک زبان برای استایل دادن به سایت است
<p/>
<hr>
<p>
JavaScript
یک زبان برای مغز سایت است
<p/>
<hr>
<body/>
خروجی قطعه کد بالا به شکل زیر هستش
HTML
یک زبان برای ساخت صفحه های سایت است
___________________________________________________
CSS
یک زبان برای استایل دادن به سایت است
___________________________________________________
JavaScript
یک زبان برای مغز سایت است
ما با کمک css میتونم ضخامت و رنگ این خط رو تغییر بدیم که داخل آموزش css که صورت کامل توضیح دادم
نمایش عکس با تگ img
اگه ما بخواییم که یک عکس رو روی سایت به کاربر نمایش بدیم باید از تگ img استفاده کنیم.این تگ مخفف کلمه image هستش و به صورت یک تگ تنها نوشته میشه و تگ بسته نداره.این تگ دوتا صفت داره که حتما باید اون هارو رعایت کنید.اسم صفت اول src هستش که برای ادرس دادن به عکس استفاده میشه و صفت دوم صفت alt هست
صفت alt برای این استفاده میشه که به هر دلیلی عکس ما برای کاربر نمایش داده نشد یک نوشته به جای اون عکس نمایش داده بشه و برای سئو سایت هم خیلی مهمه
نحوه نوشتن این تگ به این صورت هست:
<body>
<“”=img src=”” alt>
</body>
داخل صفت src ما باید آدرسی که عکس مورد نظر ما داخل کامپیوتر هست رو وارد کنیم که به کاربر نمایش داده بشه.
با کمک css هم میتونیم اندازه و جهت عکس رو تغیر بدیم
ساخت لیست ها با ol و ul
خوب رسیدیم به درست کردن لیست ها درون html
برای اینکه ما یک لیست درست کنیم میتونیم از دوتا تگ به اسم های ol و ul استفاده کنیم که فرق چندانی ندارن با هم دیگه
ol از کلمه ordered list میادش و مخفف شده اونه یعنی لیست های مرتب
ul از کلمه unordered list میادش و مخفف شده اونه یعنی لیست های غیرمرتب
همونجوری که گفتم فرق زیادی باهم ندارن و به یک شکل نوشته میشن
تگ ol,ul تگ های جفتی یا باز و بسته هستن که تگ های والد هم محسوب میشن
فرزند این تگ ها تگ های li هستن که اون ها هم تگ های جفتی هستن
یک مثال از مدل نوشتن این تگ ها پایین میزنم تا بهتر درک کنید
<body>
<ol>
<li>این جا هرچی میتونید یاداشت کنید</li>
<ol/>
<ul>
<li>این جا هرچی میتونید یاداشت کنید</li>
<ul/>
<body/>
شما برای نوشتن تگ های li که تگ های فرزند نیز نحسوب میشن هیچ تعداد مشخصی ندارین یعنی هر چند تا که دوست دارین میتونین یاداشت کنید
پایین نویس متن با تگ sub
فکر کنید که میخواید یک متن رو توی همون سطحی که هستین پایین تر یاداشت کنید مثال:
سلامخوبی
العان کلمه “خوبی”توی همون خطی هستش که “سلام”هست
برای اینکه بتونیم این کار رو انجام بدیم باید از تگ sub استفاده کنیمونحوه نوشتن این تگ به این شکل هست:
<body>
<p> سلام <sub>خوبی<sub/>
<p/>
<body/>
خروجی این کد دقیقا میشه مثالی که اول زدم
بالا نوشتن یا توان در متن با تگ sup
حالا فکر کن که میخوای به عدد توان بدی یا یک حرفی رو بالای متن اصلی یاداشت کنی مثلا:
52
سلامخوبی
برای این کار ما از تگ sup استفاده میکنیم
نحوه نوشتن این تگ به این صورت هست:
<body>
<p> سلام <sup>خوبی<sup/>
</p>
<p> 5 <sup> 2 </sup> </p>
<body/>
قطعه کد بالا خروجیش دقیقا دوتا مثالی میشه که اول زدم
درست کردن جدول با تگ table
برای این که ما بتونیم درون سایت خودمون یک جدول درست کنیم باید از تگ table استفاده کنیم
این تگ یک تگ جفتی محسوب میشه یعنی تگ باز و بسته داره.این تگ یک تگ والد به حساب میاد و فرزند های این تگ تگ هایی:tr,td,th
تگ های فرزند هم مثل تگ والدشون تگ های جفتی هستن
تگ فرزند tr
این تگ برای درست کردن سطر های سلول استفاده میشه
تگ فرزند td
این تگ برای ساختن سلول های جدول استفاده میشه
تگ فرزند th
این تگ هم برای ستون های جدول استفاده میشه
در پایین تر یک نمونه از کد کامل درست کردن جدول هست که با نگاه کردن و خوندش راحتر متوجه میشین
<body>
<table>
<tr>
<th/>نام<th>
<th/>فامیلی<th>
<tr>
<tr/>
<td/>پوریا<td>
<td/>افشار<td>
<tr>
<tr/>
<td>محسن<td>
<td>محمدی<td>
<tr>
<tr/>
<td/>زهرا<td>
<td/>حسینی<td>
<tr/>
<table/>
<body/>
| نام | فامیلی |
| پوریا | افشار |
| هرمز | کیا |
| مسعود | تکبری |
قطعه کد بالا دقیقا خروجی زیر رو نمایش میده
برای اینکه ما بتونیم دور جدول خطی ایجاد کنیم و سطر هارو جدا کنیم باید از css استفاده کنیم
نمایش فیلم در سایت با تگ video
برای این که ما یک فیلم رو درون سایت نمایش بدیم باید از تگ video استفاده کنیم
این تگ یک تگ باز و بسته هستش که تگ والد هم محسوب میشه
فرزند این تگ, تگ source هستش که این تگ هم تگ باز و بسته به حساب میاد
تگ فرزند دوتا صفت یا خصوصیت داره
اولین صفت src هست که همونجوری که میدونید برای نوشتن ادرس دهی فیلم مورد نظر ما استفاده میشه
خصوصیت بعدی تگ فرزند نوع یا type هستش که ما باید نوع فرمت فیلم رو درون این تگ یاداشت کنیم
تگ های ویدیو
تگ والد هم باید بک خاصیت داشته باشد که معمولا خاصیت controls رو بهش اختصاص میدن.نمونه این کد رو پایین تر میتونید نگاه کنید:
<body>
<video controls>
<source src=”demo.mp4″ type=”video/mp4″>
<video/>
<body/>
خط کشیدن زیر متن با تگ u
اگه ما بخوایم که زیر یک متن خط بکشیم به عنوان مثال:
سلام دنیا
باید از تگ u استفاده کنیم.این تگ هم یک تگ باز و بسته محسوب میشه.در پایین تر میتونید مثال کدش رو ببینید:
<body>
<p> Hello <u>World</u></p>
<body/>
خروجی کد بالا میشه:
Hello World
فقط باید این رو بدونیم که این تگ به متن ما هیچ ارزش محتوایی نمیده
بولد کردن متن همراه یا ارزش محتوایی
اگر ما بخوایم که یک متن رو هم بولد کنیم هم بهش ارزش محتوا بدیم باید از تگ strong استفاده کنیم
این تگ یک تگ جفتی یا باز و بسته به حساب میادش
پایین تر میتونید یک نمونه یک از این تگ رو نگاه کنید:
<body>
Salam Khobi? Man <strong>Poriya</strong> Hastam
</body>
در خروجی اسم پوریا هم بولد شده و هم ارزش محتوایی داره که خیلی استفاده میشه
