جلسه چهارم آموزش html – خط افقی

آموزش اچ تی ام ال
۰۵ دی
0

سلامی دوباره
با چهارمین جلسه آموزش html در خدمتتون هستیم
در این جلسه میخوایم با کدهای اچ تی ام ال خطوط افقی در صفحه رسم کنیم
برای این کار باید از تگ <hr> استفاده کنیم
این تگ حالت بسته نداره… وقتی شما تگ <hr> رو در یک سند html بنویسین به صورت اتوماتیک اچ تی ام ال یک خط افقی به عرض کل صفحه براتون ایجاد میکنه. مثل خط زیر:


کد زیر رو توی نت پد بنویسین و باز هم همونطور که در جلسه اول بهتون آموزش دادم به صورت یک فایل اچ تی ام ال ذخیره کنین تا ببینین خط به چه صورتی ایجاد میشه

<!DOCTYPE html>
<html>
<head>
<title>چهارمین جلسه آموزش اچ تی ام ال - خطوط افقی</title>
</head>
<body>
خط اول
<hr>
خط دوم
<hr>
خط سوم
<hr>
</body>
</html>

فایل مربوط به این آموزش رو میتونین از باکس زیر دانلود کنین:

 

اولین جلسه آموزش html – آشنایی با html

آموزش اچ تی ام ال
۰۱ دی
2+

با سلام

در اولین کلاس از سری آموزشهای html در خدمت شما هستیم.

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

خب اول از همه باید یک سری اطلاعاتی از html در اختیارتون قرار بدم.

زبان html یک زبان ساده ولی همه کاره است… یعنی از این زبان فقط برای صفحات وب استفاده میشه، ولی این صفحاتی که با html آماده میشه میتونه حتی توی برنامه های اندروید هم استفاده بشه… همین نرم افزارهایی که همه ی ما توی گوشیهای اندرویدیمون داریم.

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

شما چیزی که برای آموزش html نیاز دارین.. ابتدا یک نرم افزار بسیار بسیار سنگین به اسم notepad می باشد! 🙂

بعدش به یه مرورگر نیاز دارین که مسلما دارینش چون دارین این سایت رو میبینینن!!

یک سند html باید حاوی تگ های  <html> (بهش میگیم اچ تی ام ال باز) و <html/> (بهش میگیم اچ تی ام ال بسته) باشه… حالا برای زیبایی کار بعضیا میان ابتدای سند یعنی بالای بالای صفحه <!DOCTYPE html> رو مینویسن…

این زیاد اجباری نیست… فقط یه رسمه…

در واقع این دو تگ <html> و <html/> به یک صفحه ی معمولی که در notepad بازش کردین میفهمونه که این سند یک سند html هست.

در سند اچ تی ام ال دو تگ اجباری دیگه هم داریم….
یکی <head> و <head/> هستش و دیگری <body> و <body/>

تگ head اون قسمتی از سند هست که به مرورگر میفهمونه که عنوان صفحه چیه… البته یه سری اطلاعات دیگه هم توش قرار میگیره که به مرور میگیم خدمتتون.

تگ  body همونطور که از معنی کلمه اش هم پیداست…در واقع همون بدنه ی اصلی صفحه وب هست که همه ی اطلاعات توش قرار میگیره و به نمایش در میاد

برای اینکه بخواین به صفحه مون عنوان یا تایتل بدیم هم تگ <title> و <title/> رو در داخل تگ head استفاده مکنیم..

خب ابتدا با notepad یک صفحه باز کنین

این کد رو به همین صورت توش قرار بدین

<!DOCTYPE html>
<html>
<head>
<title>اولین جلسه کلاسهای آموزش اچ تی ام ال آنزیم</title>
</head>
<body>
بدنه ی اصلی صفحه وب
</body>
</html>

و کلید ترکیبی کنترل+S رو برای ذخیره شدنش بزنین…

اما صبر کنین… برای ذخیره شدنش عجله نکنین

موقع ذخیره شدن بعد زدن کنترل+S در پنجره ای که باز میشه در پایین صفحه  گزینه ی جلوی  Encoding رو به utf-8 تغییر بدین و سپس در قسمت file name نام نوشته شده رو پاک کنید و نام index.html رو تایپ کنین و سند رو هرجایی که دوست دارین (ترجیحا داخل یک فولدر جداگانه) ذخیره اش کنین.

حالا  اگر خواستین صفحه رو ببینین باید با یک مرورگر مثلا فایرفاکس (پیشنهاد ما هم همینه) بازش کنین تا بتونین صفحه ی ساخته شده خودتون رو ببینین.. و اگر خواستین این صفحه رو ویرایش کنین باید روی فایلتون کلیک راست کنین و این فایل رو با نوت پد بازش کنین.

فایلتون باید مثل فایلی که من آماده کردم باشه…میتونین فایل وبی رو که من نوشتم رو از باکس پایین صفحه دانلود کنین…

خب برای جلسه ی اول زیاد حرف زدم… 🙂

تا جلسه ی بعد خدا یار و نگهدارتون