close
تبلیغات در اینترنت
HTML را مرحله به مرحله یاد بگیرید
آخرین مطالب

تبلیغات

 

آموزش HTML | فصل اول

آموزش HTML | فصل اول



با اچتمل شما میتوانید یک وبسایت ایجاد کنید.اچتمل برای یادگیری آسان است و شما از آن لذت خواهید برد. این آموزش ها همه چیز را درباره ی html به شما می آموزد.

اچتمل چیست؟   html یک زبان برای توصیف اسناد وب(صفحات وب) است.

 

  • HTML مخفف Hyper Text  Markup Language است.
  • زبان html شامل مجموعه ای از زبانه های نشانه گذری شده است.
  • اسناد html توسط Html tag توضیح داده شده اند.
  • هر تگ html اسناد مختلفی را توصیف میکند.

  

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


 یک سند کوچک html ایجاد کنید


 

<!DOCTYPE html>

<html>

<body>

 

<h1>My First Heading</h1>

 

<p>My first paragraph.</p>

 

</body>

</html>

 

      تشریح مثال

 

  • در این مثال DOCTYPE نوع سند را مشخص میکند.
  • متن های بین <HTML> و </ html> توصیف سند وب
  • متن های بین <body> و </ body> و توصیف محتوای قابل مشاهده در صفحه 
  • متن های بین های <h1> و </ h1> شرح عنوان
  • متن های بین <p> و </ p> شرح بند

با استفاده از این توضیحات،یک مرورگر وب میتواند این اسناد را به صفحات وب تبدیل کند.

 


برچسب های htm

html توسط برچسب ها احاطه شده است.این برچسب ها ابتدا توسط angle brackets ارائه شدند.


<tagname> مطالب </ tagname>

 


 

  • بر چسب های html معمولا بصورت جفت می آیند. مانند <p> و  <ا1>
  • اولین برچسب دوتایی برچسب شروع است،برچسب دومی ،برچسب پایانی است.
  • برچسب دومی مانند برچسب اولی نوشته میشود با تفاوت یک اسلش قبل از نام برچسب

 


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

 


 

مرورگرهای وب

هدف از مرورگر وب تبدیل اسناد html به صفحات وب است. 


 

-متون در اچتمل

همه ی اسناد(منظور از اسناد متون است)در اچتمل باید با <!DOCTYPE html> شروع شوند.

این سند خودش با <html>  شروع و با <html/> پایان می یابد.

بخش قابل مشاهده از سند خود در بین دستورات <body> و <body/> قرار می گیرد.

 مثال :

<!DOCTYPE html>

<html>

<body>

 

<h1>My First Heading</h1>

 

<p>My first paragraph.</p>

 

</body>

</html>

   آموزش عناصر html

- عنوان گذاری در html

عنوان یا سر فصل در HTML بین تگ <h1> تا <h6> قرار میگیرد.

مثال

 

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

 

-پاراگراف در html

 پاراگراف در HTML با تگ <P> تعریف میشود.

مثال


<p>This is a paragraph.</p>

 

<p>This is another paragraph.</p>


-لینک ها در HTML

لینک ها در HTML با تگ <a> میشود

مثال


 

<a href="http://www.w3schools.com">This is a link</a>

آدرس لینک با ویژگی href مشخص میشود.


-تصاویر در HTML

تصاویر در html با <img>  میشود.

منبع فایل (SRC)، متن جایگزین (ALT)، و اندازه ( width and height ) به عنوان ویژگی های img ارائه شده اند:


مثال


 

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

سعی کنید خودتان مانند این ها را بسازید،در مثال های بالا عبارات آبی رنگ را تغییر دهید.


عناصر در HTML

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

 

 

 


<tagname> مطالب </tagname>


به جدول زیر دقت کنید؛

عناصر HTML.Lampبرخی از عناصر HTML تگ پایانی ندارند.


عناصر تودر توی htm

عناصر html می توانند تودر تو باشند(عناصر میتوانند عناصری زیر خود داشته باشند)

همه ی اسناد html از عناصر تو در تو تشکیل شده اند

مثال زیر شامل 4 عنصر html است:

مثال


<!DOCTYPE html>

<html>

<body>

  <h1>My First Heading</h1>

  <p>My first paragraph.</p>

</body>

</html>


توضیح مثال داده شده:

 

<html> این عنصر کل سند را تعریف میکند.

این یک تگ شروع <html> و یک تگ پایانی دارد </html>

درون محتوای عنصر اصلی،عناصر دیگری هم هستند( مانند عنصر <body> که زیر رده یا عنصر html است)

 

<!DOCTYPE html>

<html>

<body>

  <h1>My First Heading</h1>

  <p>My first paragraph.</p>

</body>

</html>

 

 عنصر <body> بدنه ی سند را تعریف میکند

این یک برچسب شروع <body> و یک تگ پایانی <body />

محتوای عنصر HTML دو عنصر دیگر است (های <h1> و <p>)

<body>

  <h1>My First Heading</h1>

  <p>My first paragraph.</p>

</body>

 عنصر <h1> عنوان صفحه را تعریف میکند

این یک برچسب شروع <h1> با یک برچسب پایانی دارد </ h1>

محتوای عنصر این است :My First Heading
          
                         <h1>My First Heading</h1>

 

عنصر <p> یک پاراگراف را تعریف میکند.

این یک برچسب شروع <p>و یک تگ پایانی </ p> دارد.

 محتوی عنصر این است: My first paragraph

<p>My first paragraph.</p>

برچسب پایانی را فراموش نکنید

برخی از عناصر html به درستی نمایش داده خواهند شد،حتی اگر شما تگ پایانی را فراموش کنید

مثال

 

>HTML<


>body<

  <p>This is a paragraph

  <p>This is a paragraph 

>/body<


 

>/html<


مثال بالا در همه ی مرورگرها بدرستی کار میکند،زیرا این تگ اختیاری در نظر گرفته شده است.

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


عناصر خالی در html

عناصر بدون محتوا ،عناصر خالی نامیده میشوند.

<br> است یک عنصر خالی که تگ پایانی ندارد(تگ <br> یک خط شکسته تعریف میکند)

عناصر خالی را میتوان در همان شروع آنها را بست (مانند <br/>)

در html5 نیازی به بستن عنصر خالی نیست.اما اگر شما تصحیح کننده ی سخت گیر تری هستید و میخواهید سند شما برای تجزیه کنندگان xml خواناتر باشد حتما همه ی عناصر html را ببندید.

نکته: استفاده از حروف کوچک در html:

برچسب های html به کوچکی و بزرگی حروف حساس نیستند. تگ <p> همانند تگ <P> خونده میشود.

در استاندارد html5نیازی به دقت در کوچکی یا بزرگی حروف نیست ،اما Lum همیشه به استفاده از حروف کوچک توصیه میکند.

 


ویژگی های HTML

ویژگی های HTML

ویژگی های (خواص) HTML اطلاعات بیشتری در مورد عناصر html ارائه میکنند.
ویژگی های HTML:
  • عناصر html میتوانند شامل عناصری باشند
  • خواص html اطلاعات بیشتری را در مورد عناصر html نمایش می دهند
  • خواص html همیشه در برچسب شروع مشخص میشوند
  • خواص در نام و مقدار می آیند name="value"
 در این با فصل ویژگی های html یا همان attribute آشنا خواهید شد ویژگی زبان
زبان سند را می توان در تگ <html> اعلام کرد
زبان با خواص html اعلام میشود
اعلام یک زبان برای خوانندگان و موتورهای جستجو بسیار مهم است
<!DOCTYPE html>
<html lang="en-US">
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
با دو حرف اول زبان،زبان خود را اعلام کنید(en)اگر گویش وجود دارد از دو حرف بیشتر استفاده کنید(us) در مثال بالا زبان انتخاب شده انگلیسی با گویش امریکایی است.

عنوان خواص
پاراگراف html با p> تعریف شده است
در این مثال <p> عنوان خواص است.مقدار خواص است: about LUM
مثال
<p title="About W3Schools">
W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
خروجی :
W3Schools is a web developer's site. It provides tutorials and references covering many aspects of web programming, including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.


ویژگی های Href
در html لینک ها با تگ <a> تعریف میشوند.آدرس لینک در ویژگی href مشخص شده :
  مثال

             <a href="http://www.w3schools.com">This is a link</a>
خروجی:


شما بیشتر در مورد html و تگ <a> یاد می گیرید

اندازه ی ویژگی ها
تصاویر html با تگ <img> تعریف میشوند
نام فایل منبع (SRC)، و اندازه تصویر (width and height) همه از ویژگی های ارائه شده است:

         مثال

    <img src="w3schools.jpg" width="104" height="142">
خروجی:  

 اندازه ی تصویر به پیکسل مشخص شده است.width="104" یعنی 140 پیکسل روی یک صفجه نمایش گسترده

    ویژگی alt
ویژگی  alt یک متن جایگزین به عنصر اضافه میکند،تا اگر عنصر برای خواننده نمایش نیافت،این متن جایگزین نمایش داده شود
مثال
        <img src="w3schools.jpg" alt="lum.blogsky.com" width="104" height="142">
        در بالا lum.blogsky.com  ویژگی alt می باشد.

نقل قول تکی یا دوتایی؟(نقل قول یعنی کاراکتر " و ' )
نقل قول نوع دوتایی درhtml بسیار شایع است،اما ازنقل قول تکی هم میتوان استفاده کرد
 در برخی شرایط که مقدار ویژگی خود دارای نقل قول دوتایی است،لازم است از نقل قول تکی استفاده کنیم:

   مثال

<p title='John "ShotGun" Nelson'>
 
یا برعکس:

مثال

<p title="John 'ShotGun' Nelson">
از این نظر هیچ تفاوتی ندارد که شما از کدام نقل قول استفاده کنید،اما ما به استفاده از نقل قول دوتایی پیشنهاد می کنیم.چرا که نقل قول دوتایی رواج بیشتری داشته و مرسوم تر است.

خلاصه ی فصل:
همه عناصر HTML می توانند شامل عناصری باشند،
ویژگی href اطلاعات آدرس را برای لینک فراهم میکند
ویژگی width و height اندازه ها را تعین میکنند
ویژگی alt در html برای عناصر متن جایگزین فراهم می کند

عنوان گذاری در HTML

سرعنوان یا heading در html بسیار مهم است.

سرعنوان ها در html با <h1> تا <h6> معرفی میشوند.

<h1> مهمترین عنوان  و <h6> عناوین کم اهمییت را معرفی می کند.

مثال:

 

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3

 

 

توجه: مرورگر به طور خودکار مقداری فضای خالی(به حاشیه) به قبل و بعداز عنوان اضافه می کند.


آیا سرعنوان مهم است؟

از سرعنوان فقط برای نمایش عنوان استفاده کنید.از آن برای ساخت متن bold یا BIG استفاده نکنید.

موتورهای جستجو سر عنوان شما را به عنوان محتویات سایتتان در وب ثبت می کنند، و این به ضرر شماست.

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

از سرفصل <h1> برای نمایش عنوان صفحه ،<h2> بدنبال آن، بعدی <h3> و همینطور تا <h6>


خط افقی html

تگ <hr> یک خط افقی در صفحه ی html شما درست می کند.
از عنصر hr میتوان در جدا کردن مطالب از هم استفاده کرد.
مثال
<p>This  is  a  paragraph.</p>
<hr>
<p>This  is  a  paragraph.</p>
<hr>
<p>This  is  a  paragraph.</p>
   خروجی:

.This  is  a  paragraph


.This  is  a  paragraph


.This  is  a  paragraph


  <head> عنصر در html
هد عنصر یا سر عنصر هیچ ربطی به سر عنوان در html ندارد.
سر عنصر تنها حاوی اطلاعات متا ها است.
در html سرعنصر میان تگ <HTML> و تگ <BODY> قرار می گیرد.
مثال
<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
.
.
.[داده های متا(meta data) به معنی اطلاعاتی درباره ی اطلاعات.متا در مورد اطلاعات سندhtml است]

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

عنصر <meta> در html
این مجموعه کاراکترهای مورد استفاده در صفحه ی html را تعریف می کند.

نکته: چگونه کدهای html به صورت صفحه ی وب به نمایش در می اید.
شده تا بحال سایتی را ببینید و با تعجب بگویید؛هی!این چطور کار میکند؟
برای پیدا کردن سورس(Source به معنی منبع و ریشه)هر سایت روی یک قسمت از فضای خالی آن سایت راست کلیک کنید و"View Page Source"(در گوگل کروم)  یا "View Source"(در اینترنت اکسپلورر) (ودر دیگر مرورگرها مشابه این است) را بزنید.
به دین ترتیب یک پنجره حاوی کد html آن صفحه باز می شود.
 مرجع برچسب های html

شما در فصل های بعدی از آموزش html در مورد تگ ها و صفات بیشتر خواهید آموخت.

این مطلب از سایت w3schools.com به زبان فارسی بازگردانی شده و کپی برداری از آن بدون درج نام نویسنده و لینک زدن به این صفحه ممنوع میباشد.
ارسال نظر برای این مطلب

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتیرفرش کد امنیتی