لرن HTML5

۱۰ مطلب در تیر ۱۳۹۸ ثبت شده است

فرمت بندی متن در HTML

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

چند نمونه متن فرمت بندی شده

This text is bold

This text is italic

This is subscript and superscript

عناصر فرمت بندی متن در HTML

در فصل قبلی، شما درباره ی صفت استایل یاد گرفتید.

همچنین در HTML عناصر ویژه ای برای دادن معنی خاصی به متن تعریف شده اند.

HTML از عناصری مانند <b> (بولد کردن متن) و <i> (ایتالیک کردن متن) برای فرمت بندی متون استفاده می کند.

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

  • <b> - متن بولد (پررنگ)
  • <strong>; - متن مهم
  • <i> - متن ایتالیک (کج)
  • <em> - متن تاکید شده
  • <mark> - متن مارک شده (نشانه گذاری شده)
  • <small> - متن کوچک
  • <del> - متن حذف شده
  • <ins> - متن اضافه شده
  • <sub> - متن زیرنویس
  • <sup> - متن بالانویس

عناصر b و strong در HTML

عنصر <b> متن را بولد می کند، بدون این که از نظر معنایی اهمیت بیشتری به متن بدهد.

مثال

<b>This text is bold</b>

ولی عنصر <strong> متن قوی را تعریف میکند. از نظر ظاهری متن قرار گرفته داخل این عنصر هیچ تفاوتی با متن بولد شده ندارد ولی از نظر معنایی اهمیت بسیار بیشتری دارد.

مثال

<strong>This text is strong</strong>

عناصر i و em در HTML

عنصر <i> یک متن ایتالیک (کج) تعریف می کند، بدون اینکه از نظر معنایی اهمیت بیشتری به متن بدهد.

مثال

<i>This text is italic</i>

ولی عنصر <em> یک متن تاکید شده را تعریف میکند. از نظر ظاهری متن قرار گرفته داخل این عنصر هیچ تفاوتی با متن ایتالیک ندارد ولی از نظر معنایی اهمیت بسیار بیشتری دارد.

مثال

<em>This text is emphasized</em>

نکته: مرورگرها <strong> را مثل <b> و <em> را مثل <i> نمایش می دهند. با این حال در معنای این تگ ها تفاوت وجود دارد: <b> و <i>متن بولد و ایتالیک را مشخص می کنند، اما <strong> و <em> بدین معنی هستند که متن مهم است.

عنصر small در HTML

عنصر <small> یک متن کوچک را تعریف می کند:

مثال

<h2>HTML <small>Small</small> Formatting</h2>

عنصر mark در HTML

عنصر <mark> یک متن مارک یا هایلایت شده را تعریف می کند:

مثال

<h2>HTML <mark>Marked</mark> Formatting</h2>

عنصر del در HTML

عنصر <del> برای مشخص کردن متون حذف شده استفاده می شود:

مثال

<p>My favorite color is <del>blue</del> red.</p>

عنصر ins در HTML

عنصر <ins> یک متن اضافه شده را تعریف میکند:

مثال

<p>My favorite <ins>color</ins> is red.</p>

عنصر sub در HTML

عنصر <sub> یک متن زیرنویس شده را تعریف می کند:

مثال

<p>This is <sub>subscripted</sub> text.</p>

عنصر sup در HTML

عنصر <sup>یک متن بالانویس شده را تعریف می کند:

مثال

<p>This is <sup>superscripted</sup> text.</p>

منبع

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

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

    استایل ها در HTML

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

    مثال

    I am Red

    I am Blue

    I am Big

    صفت style در HTML

    با صفت style می توان تنظیمات مربوط به اندازه، فونت، رنگ و ... یک عنصر را در HTML مقدار دهی کرد.

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

    <tagname style="property:value;">

    Property یک ویژگی از جنس CSS و value یک مقدار از جنس CSS است

    توجه: شما در آموزش های بعدی درباره ی CSS بیشتر یاد خواهید گرفت

    ویژگی background-color

    ویژگی background-color رنگ پس زمینه را برای یک عنصر HTML تعریف می کند.

    در این مثال رنگ پس زمینه صفحه با رنگ powderblue مقدار دهی شده است:

    مثال

    <body style="background-color:powderblue;">

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

    </body>

    ویژگی Color

    color رنگ متن یک عنصر HTML تعریف می کند:

    مثال

    <h1 style="color:blue;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>

    ویژگی font-family

    ویژگی font-family فونت یک عنصر HTML را تعریف می کند:

    مثال

    <h1 style="font-family:verdana;">This is a heading</h1>
    <p style="font-family:courier;">This is a paragraph.</p>

    ویژگی font-size

    ویژگی font-size اندازه متن یک عنصر HTML را تعریف می کند:

    مثال

    <h1 style="font-size:300%;">This is a heading</h1>
    <p style="font-size:160%;">This is a paragraph.</p>

    ویژگی text-align

    ویژگی text-alignترازبندی یک عنصر HTML را تعریف می کند:

    مثال

    <h1 style="text-align:center;">Centered Heading</h1>
    <p style="text-align:center;">Centered paragraph.</p>

    منبع

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

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

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

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

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

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

    مثال

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

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

    نحوه نمایش صفحات HTML

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

    در HTML، شما نمی توانید با اضافه کردن فضاهای خالی یا خط های اضافی در کدهای HTML خروجی کدهایتان در مرورگر را تغییر دهید.

    مرورگر فضاهای اضافی و خطوط اضافی را وقتی صفحه نمایش داده می شود حذف می کند:

    مثال

    <p>
    This paragraph
    contains a lot of lines
    in the source code,
    but the browser
    ignores it.
    </p>

    <p>
    This paragraph
    contains         a lot of spaces
    in the source         code,
    but the        browser
    ignores it.
    </p>

    تگ پایان را فراموش نکنید

    با این حال اگر تگ پایان را فراموش کنید بیشتر مرورگرها صفحه HTML را بدرستی نمایش خواهند داد:

    مثال

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

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

    نکته: به کار نبردن تگ پایان ممکن است که نتایج غیر منتظره ای به همراه داشته باشد و یا سبب ارورهای متعدد شود.

    رفتن به خط بعد در HTML

    عنصر <br> در HTML باعث رفتن به خط بعد میشود.

    شما می توانید زمانی از <br> استفاده کنید که میخواهید بدون شروع یک پاراگراف جدید به خط بعدی بروید:

    مثال

    <p>This is<br>a paragraph<br>with line breaks.</p>

    تگ <br> یک تگ خالی (empty) است، که بدان معنی است که تگ پایانی ندارد.

    مشکل نمایش درست شعرها

    در خروجی کد زیر شعرها در یک خط نمایش داده می شوند:

    مثال

    <p>
      My Bonnie lies over the ocean.

      My Bonnie lies over the sea.

      My Bonnie lies over the ocean.

      Oh, bring back my Bonnie to me.
    </p>

    عنصر pre در HTML

    عنصر <pre> در HTML متنی را که از پیش فرمت بندی شده تعریف می کند.

    متن داخل عنصر <pre> با یک فونت پیشفرض (معمولا courier) نمایش داده میشود، و همچنین فضاها و خطوط خالی اضافه شده داخل این عنصر حفظ می شوند.

    مثال

    <pre>
      My Bonnie lies over the ocean.

      My Bonnie lies over the sea.

      My Bonnie lies over the ocean.

      Oh, bring back my Bonnie to me.
    </pre>

    منبع

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

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

    عنوان ها در HTML

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

    عنوان ها (Headings)

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    عنوان ها (Headings) در HTML

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

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

    مثال

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

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

    عنوان ها (Headings) با اهمیت هستند

    موتورهای جستجو از عنوان ها برای ایندکس کردن ساختار و محتوای صفحات وب استفاده می کنند.

    کاربران اغلب از عنوان ها برای انتخاب صفخات وب استفاده می کنند، برای همین استفاده از عنوان ها برای نشان دادن ساختار سند بسیار مهم است.

    از تگ <h1> برای نشان دادن مهم ترین عنوان ها استفاده میشود، به دنبال آن از تگ <h2>، و بعد از آن از <h3> و غیره برای نشان دادن عنوان های کم اهمیت تر استفاده میشود.

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

    عنوان های بزرگتر

    هر عنوان در HTML دارای اندازه پیش فرض است. با این حال، شما می توانید برای هر عنوان با صفت style با استفاده از ویژگی font-size در CSS اندازه مورد نظر خود را مشخص کنید.

    مثال

    <h1 style="font-size:60px;">Heading 1</h1>

    خط افقی در HTML

    تگ <hr> یک تغییر موضوع (thematic break) را در صفحه HTML نشان می دهد و اغلب به عنوان یک خط افقی نمایش داده می شود.

    عنصر <hr> برای جدا کردن محتوا (یا تعریف یک تغییر) در یک صفحه HTML استفاده می شود:

    مثال

    <h1>This is heading 1</h1>
    <p>This is some text.</p>
    <hr>
    <h2>This is heading 2</h2>
    <p>This is some other text.</p>
    <hr>

    عنصر head در HTML

    عنصر <head> در HTML فضایی برای قرارگیری metadata ها است. metadata ها حاوی داده هایی درباره سند HTML ما هستند که نمایش داده نمی شوند، اما برای نمایش درست صفحات وبسایت لازم هستند.

    عنصر <head> بین تگ <html> و <body> قرار می گیرد:

    مثال

    <!DOCTYPE html>
    <html>

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

    <body>
    .
    .
    .

    نکته: metadata ها معمولا عنوان سند، کاراکتر ست ، استایل ها، اسکریپت ها و دیگر متا اطلاعات تعریف می کنند.

    چطور کدهای منبع (source) یک صفحه HTML را مشاهده کنیم؟

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

    مشاهده کد منبع (source code) صفحه HTML:

    برای مشاهده کد منبع (source code) صفحه HTML روی صفحه مورد نظر کلیک راست کرده و گزینه ی "view page source" (در Chrome) یا "view sorce" (در Edge)  و یا شبیه به اینها را در دیگر مرورگرها انتخاب کنید. پنجره ای که باز خواهد شد حاوی کدهای منبع HTML آن صفحه است.

    بازبینی (inspect) کردن بر روی یک عنصر HTML:

    برای انجام این کار بر روی یک عنصر (یا یک فضای خالی) راست کلیک کرده و گزینه "Inspect" یا "Inspect Element" را انتخاب کنید تا چگونه ساخته شدن آن عنصر را مشاهده کنید (شما با انجام این کار هم کدهای HTML  و هم کدهای CSS را مشاهده خواهید کرد). همچنین شما میتوانید کدهای CSS و HTML در پنل باز شده تغییر دهید و نتیجه را به صورت آنی مشاهده کنید، البته توجه داشته باشید که این تغییرات فقط برای شما قابل مشاهده هستند و در صورت رفرش کردن صفحه از بین می روند.

    منبع

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

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

    صفات در HTML

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

    صفات (attributes) در HTML اطلاعات اضافی را برای عناصر ارائه می دهند. در این فصل از آموزش HTML به بررسی برخی از این صفات می پردازیم.

    صفات در HTML

    • تمام عناصر HTML می توانند دارای صفات باشند
    • صفات اطلاعات اضافی را درباره یک عنصر فراهم می کندد
    • صفات همیشه در تگ شروع قرار می گیرند
    • صفات معمولا به صورت نام/مقدار تعریف می شوند، به این صورت: "name="value

    صفت href

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

    مثال

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

    در آموزش های بعدی درباره ای لینک ها و تگ <a> بیشتر یاد خواهید گرفت.

    صفت src

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

    نام فایل منبع تصویر در صفت src مشخص می شود:

    مثال

    <img src="img_girl.jpg">
    خودتان امتحان کنید »

    صفات عرض (width) و ارتفاع (height)

    عکس ها در HTML همچنین دارای صفات width و height هستند، که عرض و ارتفاع تصاویر را مشخص می کند:

    مثال

    <img src="img_girl.jpg" width="500" height="600">
    خودتان امتحان کنید »

    صفات عرض و ارتفاع به صورت پیشفرض با واحد پیکسل مقدار دهی می شوند، بنابراین "width="500 به معنای عرض 500 پیکسل است.

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

    صفت alt

    اگر تصویر به هر دلیلی قابل نمایش نباشد، صفت alt یک متن جایگزین را به جای عکس نمایش می دهد.

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

    مثال

    <img src="img_girl.jpg" alt="Girl with a jacket">
    خودتان امتحان کنید »

    صفت alt همچنین برای زمانی که تصویر ما قابل نمایش نباشد نیز مفیداست (مثلا وقتی که تصویر وجود نداشته باشد).

    مثال

    در مثال زیر می توانید مشاهده کنید که اگر سعی کنیم تصویری را که وجودخارجی ندارد نشان دهیم چه اتفاقی می افتد:

    <img src="img_typo.jpg" alt="Girl with a jacket">
    خودتان امتحان کنید »

    صفت style

    صفت style برای مشخص کردن ظاهر یک عنصر در مواردی همچون رنگ، فونت، اندازه و غیره استفاده می شود.

    مثال

    <p style="color:red">This is a paragraph.</p>
    خودتان امتحان کنید »

    صفت lang

    زبان سند را میتوان در تگ <html> مشخص کرد.

    زبان با صفت lang مشخص می شود.

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

    <!DOCTYPE html>
    <html lang="en-US">
    <body>

    ...

    </body>
    </html>

    دو حرف اول، زبان (en) را مشخص می کند. اگر گویش خاصی مد نظرتان است دو حرف دیگر اضافه کنید (us).

    صفت title

     در اینجا صفت title به عنصر <p> اضافه شده است. مقدار صفت title وقتی که موس روی پاراگراف قرار بگیرد در یک تول تیپ (tooltip) کوچک نمایش داده می شود:

    مثال

    <p title="I'm a tooltip">
    This is a paragraph.
    </p>
    خودتان امتحان کنید »

    پیشنهاد ما: صفات را با حروف کوچک تایپ کنید

    در HTML5 استفاده از حروف کوچک برای نوشتن نام صفات اجباری نیست.

    برای مثال نوشتن تگ title به دو صورت title و TILTLE صحیح است.

    W3C استفاده از حروف کوچک را توصیه می کند.

    پیشنهاد ما: ارزش (value) صفات را داخل نقل قول ("") قرار دهید

    در HTML5 اجباری به استفاده از  نقل قول ("") در اطراف ارزش (value) صفات وجود ندارد.

    صفت href  که در مثال های بالا استفاده شده بود می تواند بدون نقل قول ("") نوشته شود:

    بد

    <a href=https://www.w3schools.com>
    خودتان امتحان کنید »

    خوب

    <a href="https://www.w3schools.com">
    خودتان امتحان کنید »

    با این حال W3C پیشنهاد می کند که از نقل قول ("") استفاده کنید.

    گاهی لازم است که از نقل قول ("") استفاده شود، مثلا زمانی که بین دو کلمه از ارزش یک صفت فضای خالی (space) وجود دارد. مثال زیر ارزش صفت title را به درستی نشان نمی دهد زیرا دارای یک فضای خالی (space) است.

    مثال

    <p title=About W3Schools>
    خودتان امتحان کنید »

    استفاده از کوتیشن تکی (' ') یا دو تایی (" ")؟

    استفاده از کوتیشن دوتایی (" ") در اطراف مقدار صفات در HTML رایج تر است، اما کوتیشن تکی (' ') نیز می تواند مورد استفاده قرار گیرد.

    در بعضی مواقع که مقدار صفت خود شامل کوتیشن دوتایی (" ") است، استفاده از کوتیشن تکی به صورت زیر ضروری است:

    <p title='John "ShotGun" Nelson'>

    یا برعکس:

    <p title="John 'ShotGun' Nelson">
    خودتان امتحان کنید »

    خلاصه ی فصل

    • تمام عناصر HTML می توانند دارای صفات باشند
    • صفت title محتوای تول تیپ (tooltip) را مشخص میکند
    • صفت href آدرس لینک را مشخص می کند
    • صفات width و height اندازه عکس را تعیین می کنند
    • صفت alt متنی جایگزین را به جای عکس مشخص می کند
    • برای نوشتن صفات استفاده از حروف کوچک توصیه می شود
    • توضیه می شود که مقدار صفات را داخل کوتیشن قرار دهید.

    منبع

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

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

    عناصر در 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
    ساخت وبلاگ در بلاگ بیان، رسانه متخصصان و اهل قلم