لرن HTML5

عناصر در HTML

جلسه بعدی ❯ ❮ جلسه قبلی

عناصر HTML

یک عنصر HTML معمولا شامل یک تگ شروع و یک تگ پایان، با محتوای بین آن ها است:

<tagname>Content goes here...</tagname>

عنصر HTML شامل هر چیزی از تگ شروع تا تگ پایان می شود:

<p>My first paragraph.</p>
تگ شروع محتوای عنصر تگ پایان>
<h1> My First Heading </h1>
<p> My First Paragraph </p>
<br>

نکته: عناصر HTML بدون محتوا عناصر خالی (empty elements) نامیده می شوند. عناصر خالی (empty elements) تگ پایان ندارند، مانند عنصر <br> (که همچون کلید Enter باعث ایجاد یک خط خالی جدید میشود)

عناصر HTML Nested

عناصر HTML میتوانند Nested (عناصری که میتوانند عناصر دیگر را در خود جای دهند) باشند.

همه ی سند های HTML حاوی عناصر Nested هستند.

مثال زیر شامل چهار عنصر HTML است:

مثال

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
خودتان امتحان کنید »

توضیحات مثال بالا

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

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

عنصر <body> درون عنصر <html> قرار می گیرد.

<html>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

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

این عنصر یک تگ شروع <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>
خودتان امتحان کنید »

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

اما باز گذاشتن تگ هرگز توصیه نمی شود زیرا در بعضی از مواقع فراموش کردن تگ پایان نتایج عیر منتظره ای به همراه دارد.

عناصر خالی (empty) در HTML

عناصر بدون محتوای HTML عناصر خالی (empty) نامیده می شوند.

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

مثال

<p>This is a <br> paragraph with a line break.</p>
خودتان امتحان کنید »

عناصر خالی می توانند در تگ باز خود بسته شوند مانند مثال زیر:

<br />

در HTML5 نیازی به بستن عناصر خالی (empty) نیست. اما اگر میخواهید سند شما برای تجزیه کننده های XML خوانا باشد، باید تمام عناصر HTML را به درستی ببندید.

HTML به کوچک یا بزرگ بودن حروف حساس نیست

تگ های HTML حساس به کوچک یا بزرگ بودن حروف نیستند: <P> به همان معنی <p> است.

در استاندارد HTML5 لازم نیست که تگ ها با حروف کوچک تایپ شوند، اما در سند هایی مانند XHTML استفاده از حروف کوچک اجباری است. 

منبع

https://www.w3schools.com/html/html_elements.asp

جلسه بعدی ❯ ❮ جلسه قبلی
  • ۳ پسندیدم
  • ۸ نظر
    • سه شنبه ۲۵ تیر ۹۸

    اصول پایه HTML

    در این قسمت از آموزش زبان برنامه نویسی HTML برخی از عناصر پایه ای به طور مختصر توضیح داده شده تا یادگیری فصل های بعدی برای شما آسان تر باشد.

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

    جلسه بعدی ❯ ❮ جلسه قبلی

    اسناد HTML

    تمام اسناد HTML باید با یک اعلامیه برای تعریف نوع سند شروع شود: <!DOCTYPE html>

    اسناد HTML با تگ <html> آعاز شده و با تگ </html> به پایان میرسند.

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

    مثال

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    </body>
    </html>
    خودتان امتحان کنید »

    عنوان ها در HTML

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

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

    مثال

    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    خودتان امتحان کنید »

    پاراگراف ها در HTML

    پاراگراف ها در HTML با تگ <p> تعریف می شوند:

    مثال

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    خودتان امتحان کنید »

    لینک ها در HTML

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

    مثال

    <a href="https://learnhtml5.blog.ir">This is a link</a>
    خودتان امتحان کنید »

    مقصد لینک با استفاده از صفت href مشخص می شود.

    صفت ها در HTML برای ارائه اطلاعات اضافی درباره عناصر به کار برده می شوند.

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

    تصاویر در HTML

    تصاویر در HTML با تگ <img> تعریف می شوند.

    آدرس منبع تصویر (src)، متن جایگزین برای تصویر(alt)، عرض width و ارتفاع height از صفات این عنصر هستند:

    مثال

    <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
    خودتان امتحان کنید »

    دکمه ها در HTML

    دکمه ها در HTML با تگ <button> تعریف می شوند:

    مثال

    <button>Click me</button>
    خودتان امتحان کنید »

    لیست ها در HTML

    لیست ها در HTML با تگ <ul> (برای لیست های نامرتب) و یا تگ <ol> (برای لیست های مرتب) تعریف می شوند، تگ <li> برای تعریف آیتم های لیست بکار میرود:

    مثال

    <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>

    <ol>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>
    خودتان امتحان کنید »

    منبع

    https://www.w3schools.com/html/html_basic.asp

    جلسه بعدی ❯ ❮ جلسه قبلی
  • ۶ پسندیدم
  • ۸ نظر
    • دوشنبه ۲۴ تیر ۹۸

    ویرایشگرهای HTML

    جلسه بعدی ❯ ❮ جلسه قبلی

    نوشتن HTML با استفاده از Notepad یا TextEdit

    صفحات وب را می توان با استفاده از ویرایشگرهای حرفه ای HTML ایجاد و اصلاح کرد.

    با این حال، برای یادگیری HTML ما یک ویرایشگر متن ساده مانند Notepad یا TextEdit را توصیه میکنیم.

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

    مراحل زیر را دنبال کنید تا اولین صفحه وب خود را با Notepad یا TextEdit ایجاد کنید.

    مرحله 1: Notepad را باز کنید

    در ویندوز 8 یا بالاتر:

    پنجره ی جستجوی ویندوز را باز کنید. کلمه Notepad را تایپ کنید.

    در ویندوز 7 یا پایین تر:

    این مسیر را دنبال کنید: Start > Programs > Accessories > Notepad

    مرحله 1: TextEdit را باز کنید

    این مسیر را دنبال کنید: Finder > Applications > TextEdit

    همچنین می تونید برخی از تنظیمات را تغییر دهید تا برنامه را به درستی ذخیره کنید. برای اینکار در قسمتPreferences > Format، گزینه ی "Plain Text" را انتخاب کنید.

    مرحله 2: نوشتن کدهای HTML

    نوشتن یا کپی کردن کدهای HTML در Notepad.

    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    </body>
    </html>

    نوشتن کدهای HTML در Notepad

    مرحله 3: صفحه HTML خودتان را ذخیره کنید

    برای ذخیره کردن فایل HTML در کامپیوتر خود در منو Notepad روی گزینه File در منوی بالای Notepad کلیک کنید و از زیر منوی باز شده Save as را انتخاب کنید.

    نام فایل مورد نظر را index.htm قرار داده و انکدینگ فایل را UTF-8 (که رمزگذاری توصیه شده برای فایل های HTML است) قرار دهید.

    ذخیر فایل HTML

    شما می توانید از هر یک از پسوندهای htm. یا html. برای ذخیره فایل خود استفاده کنید. هیچ تفاوتی بین این دو پسوند نیست، این مورد به انتخاب شما بستگی دارد.

    مرحله 4: صفحه HTML خود را در مرورگر مشاهده کنید

    فایل HTML ذخیره شده را در مرورگر مورد علاقه خود باز کنید (روی فایل دوبار کلیک کنید و یا می توانید با راست کلیک و انتخاب گزینه Open with فایل HTML در مرورگر دلخواهتان باز کنید).

    مشاهده صفحه HTML در مرورگر وب

    منبع

    https://www.w3schools.com/html/html_editors.asp

    جلسه بعدی ❯ ❮ جلسه قبلی
  • ۴ پسندیدم
  • ۷ نظر
    • يكشنبه ۲۳ تیر ۹۸

    معرفی HTML

    جلسه بعدی ❯ ❮ خانه

    HTML چیست؟

    HTML زبان نشانه گذاری استاندارد برای ایجاد صفحات وب است.

    • HTML مخفف Hyper Text Markup Language است.
    • HTML ساختار یک صفحه وب را توصیف می کند.
    • HTML شامل مجموعه ای از عناصر است.
    • عناصر HTML به مرورگر می گویند که چگونه محتوای نمایش داده شود.
    • عناصر HTML با برچسب ها نمایش داده می شوند.
    • تگ های HTML تکه های محتوا مانند عنوان، پاراگراف، جدول، و غیره را برچسب گذاری می کند.
    • مرورگرها تگ های HTML را نمایش نمی دهند، بلکه از آنها برای نمایش  محتویات صفحه استفاده می کنند.

    یک سند ساده HTML

    نمونه مثال زیر یک سند بسیار ساده و ابتدایی HTML است که خروجی آن یک عنوان و یک پاراگراف است:

    مثال

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>My First Heading</h1>
    <p>My first paragraph.</p>

    </body>
    </html>
    خودتان امتحان کنید »

    توضیحات مثال بالا

    • اعلامیه <!DOCTYPE html> یک سند HTML5 را تعریف میکند
    • عنصر <html>عنصر ریشه برای یک صفحه HTML است
    • عنصر <head>شامل متا اطلاعاتی در مورد سند HTML است
    • عنصر <title>یک عنوان را برای سند مشخص میکند
    • عنصر <body>دارای محتوای قابل مشاهده صفحه است
    • عنصر <h1> بزرگترین و مهم ترین عنوان یک نوشه را تعریف میکند
    • عنصر <p> یک پاراگراف را تعریف می کند

    تگ های HTML

    تگ های HTML اسامی عناصر هستند که توسط <> (براکت های زاویه دار) محصور شده اند:

    <tagname>content goes here...</tagname>
    • تگ ها در HTML معمولا به صورت جفت هستند. مانند: <p>و </p>
    • تگ اول، تگ آغازین و تگ دوم تگ پایانی نامیده می شود
    • تگ پایانی همانند تگ آغازین نوشته می شود با این تفاوت که قبل اسم تگ (tagname) یک اسلش (/) قرار می گیرد

    نکته: تگ آعازین به اسم تگ باز, و تگ پایانی به اسم تگ بسته نیز نامیده می شوند.

    مرورگرهای وب

    هدف یک مرورگر وب (کروم، ادج، فایرفاکس و سافاری)، خواندن اسناد HTML و نمایش آنها است.

    مرورگر تگ های HTML را نمایش نمی دهد، بلکه از آنها برای تعیین نحوه نمایش سند استفاده می کند:

    مرورگرهای وب

    ساختار صفحه HTML

    در زیر میتوانید ساختار یک صفحه وب را مشاهده کنید:

    ساختار صفحه HTML

    نکته: فقط محتوای داخل بخش <body> (قسمت سفید در بالا) در مرورگر نمایش داده می شود.

    اعلامیه <DOCTYPE!>

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

    این تگ فقط یک بار در بالای صفحه (قبل از همه ی تگ های HTML) قرار می گیرد.

    اعلامیه <!DOCTYPE> حساس به حروف بزرگ نیست.

    نمونه کد زیر نحوه استفاده از اعلامیه <!DOCTYPE>برای HTML5 را نشان می دهد:

    <!DOCTYPE html> 

    نسخه های HTML

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

    نسخه سال انتشار
    HTML 1991
    HTML 2.0 1995
    HTML 3.2 1997
    HTML 4.01 1999
    XHTML 2000
    HTML5 2014

     

    منبع

    https://www.w3schools.com/html/html_intro.asp

    جلسه بعدی ❯ ❮ خانه
  • ۶ پسندیدم
  • ۲ نظر
    • يكشنبه ۲۳ تیر ۹۸

    آموزش HTML5

    آموزش مقدماتی تا پیشرفته HTML5

    ادامه مطلب
  • ۱۶ پسندیدم
  • ۴۷ نظر
    • يكشنبه ۲۳ تیر ۹۸
    Designed By Erfan template no. 50
    ساخت وبلاگ در بلاگ بیان، رسانه متخصصان و اهل قلم