آموزش مرحله به مرحله HTML

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

XHTML چیست ؟
XHTML از سال 2000 به بعد توسط کنسرسیوم W3C جایگزین زبان HTML شده است . یادگیری زبان XHTML راحت تر از زبان HTML می باشد . شاید سوال برای شما پیش بیاید که XHTML چیست ؟ XHTML ترکیب دو زبان HTML و XML می باشد که باعث پایداری و قابل فهم بودن بیشتر وب سایت توسط مرورگرها می شود .
اگر به بخش طراحی وب سایت های بخش آموزش سری زده باشید متوجه می شوید که در ابتدای هر قسمت از قالب ها از کدهای XHTML در ایتدای تگهای HTML جهت استاندارد سازی و منطبق نمودن قالبها با مرورگرهای مختلف استفاده کرده ام .

XHTML دارای 3 حالت می باشد که در ادامه به طور کامل شرح داده می شود .
Strict : از این قسمت هنگامی که بخواهیم کدهای استاندارد ایجاد کنیم استفاده می شود .
Frameset : هنگامیکه بخواهیم در تگ های وب سایت خودمان از فریم استفاده کنیم از این گزینه استفاده می کنیم .
transitional : این نسخه از HTML برای اغلب مرورگرها مناسب می باشد ؛ اعلان این نسخه به مرورگرها اعلام می کند که شما از HTML به روز شده استفاده می کنید . نوشتن اسناد به این سبک بسیار ساده و متداول است و بهتر است اسناد نسخه های قدیمی از این نسخه پیروی کنند .

ساختار دستورات HTML
تقریبا تمام دستورات HTML بین دو تگ <> قرار می گیرند .
ساختار کلی و نوع نوشتن پایه و استاندارد دستورات HTML به شکل زیر می باشد .

<html>
<head>
<title>عنوان صفحهtitle>
head>
<body>
***** دستورات ایجاد کننده صفحه وب*****
body>
html>

حال می خواهم ازDOCTYPE Transitional برای استاندارد سازی این صفحه از وب در ابتدای کد ها استفاده کنم .

"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtda>">
<html>
  <head>
       <title>عنوان صفحهtitle>
  head>
         <body>
                 ***** دستورات ایجاد کننده صفحه وب*****
         body>
html>

برای اجرای دستورات HTML نیاز به برنامه خاصی ندارید می توانید نوت پد ویندوز را باز کرده، دستورات خود را تایپ و سپس با فرمت html. ذخیره کنید .
نکته : در صورتیکه در بین دستورات خود از متن فارسی استفاده می کنید هنگام ذخیره کردن کدینگ را برابر با UTF-8 قرار دهید .

در این درس می خواهم شما را با تنظیمات مربوط به متن در Html آشنا کنم . یکی از قسمتهای مهم در HTML یادگیری تغییر متون صفحه می باشد .

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

متن صفحه (در کدهای Html) دارای تنظیمات زیادی از نظر اندازه ، نوع فونت ، رنگ بندی ، تراز متن و نحوه قرارگیری می باشد که در ادامه به توضیح کامل هر تگ می پردازم .
در این بخش آموزش بیشتر کردن ضخامت متن و زیر خط دارد و مورب کردن متن را به صورت کامل آموزش میدهم و سعی میکنم در درس های بعدی این بخش را کامل کنم .

برای بیشتر کردن ضخامت متن از تگ در html استفاده می شود . روش استفاده از این تگ به صورت زیر می باشد .

1

2

3

4

5

6

7

8

<html>

<head>

<title>عنوان صفحهtitle>

head>

<body>

    <b>بیشتر کردن ضخامت متنb>

body>

html>

خروجی کد در مرورگر به شکل زیر نمایش داده می شود :
بیشتر کردن ضخامت متن

جهت مورب کردن متن تایپ شده از تگ استفاده می شود

1

2

3

4

5

6

7

8

<html>

<head>

<title>عنوان صفحهtitle>

head>

<body>

    <i>مورب کردن متن تایپ شده i>

body>

html>

خروجی کد در مرورگر به شکل زیر نمایش داده می شود :
مورب کردن متن تایپ شده

جهت زیر خط دار کردن متن تایپ شده از تگ استفاده می شود .

1

2

3

4

5

6

7

8

<html>

<head>

<title>عنوان صفحهtitle>

head>

<body>

     <u>زیر خط دار کردن متن تایپ شده u>

body>

html>

خروجی کد در مرورگر به شکل زیر نمایش داده می شود :
زیر خط دار کردن متن تایپ شده

برای اینکه بین متن تایپ شده یک خط به صورت افقی نمایش داده شود از تگ ~~استفاده می شود~~

1

2

3

4

5

6

7

8

<html>

<head>

<title>عنوان صفحهtitle>

head>

<body>

     <strike>کشیدن یک خط به صورت افقی روی متن strike>

body>

html>

خروجی کد در مرورگر به شکل زیر نمایش داده می شود :
کشیدن یک خط به صورت افقی روی متن

پاراگراف در HTML

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

پاراگراف ها با تگ

مشخص می شوند. روش درج تگ

به شکل زیر می باشد
تگ

در HTML

<html>
<head>
<title>عنوان صفحهtitle>
head>
<body>
<p>این
 یک پاراگراف می باشد . شما می توانید متن دلخواه را بین این دو تگ قرار 
داده سپس بوسیله یک سلکتور تغییرات لازم را اعمال کنید p>
body>
html>

در صورتیکه بخواهید پاراگراف شما در صفحه وب سایت به سمت راست / چپ / وسط یا از هر دو طرف تراز شود ، باید داخل تگ

از ویژگی align استفاده کنید . به کدهای زیر توجه کنید بهتر متوجه می شوید .

<html>
<head>
<title>عنوان صفحهtitle>
head>
<body>
    <p align="right">این پاراگراف به سمت راست منتقل می شودp>
    <p align="left">این پاراگراف به سمت چپ منتقل می شود p>
    <p align="center">این پاراگراف در وسط قرار می گیرد p>
    <p align="justfy">این پاراگراف  از دو طرف تراز می شود . بدلیل p>
body>
html>

تگ

 در HTML
در 
بعضی از مواقع احتیاج می شود که کد یا متن نوشته شده به همان صوتی که تایپ 
می شود در HTML به همان صورت نیز در صفحه مرورگر نمایش داده شود .به مثال 
زیر توجه کنید . متن یا همان فاصله و نوع تایپ در صفحه مرورگر نمایش داده 
می شود .

<html>
<head>
<title>عنوان صفحهtitle>
head>
<body>
<pre>این یک پاراگراف می باشد .
شما می توانید متن دلخواه را بین این دو تگ قرار داده سپس بوسیله یک سلکتور
تغییرات
لازم را اعمال کنید pre>
body>
html>

مجید غفوری

دانستنیها

دانستنیها

علمی,تاریخ،تکنولوژی،هنر,تغذیه,هوش,ورزش,رایانه,سلامتی,اندیشه,ادبی,روانشناسی و دیگر مطالب

تاریخ علم و دانش

تاریخ

هنر

طبیعت،حفظ محیط زیست

فرهنگ و ادب

ما وراء الطبیعة

دانستنیهای تغذیه

تفکر و اندیشه

سلامت و پزشکی-روانشناسی

علم و دانش

رایانه و ترفند های کامپیوتری

ورزشی،بدنسازی

دانستنها