๐Ÿฟ CornPop

Setting Up the HTML Document Structure

2 min read

ูƒู„ ู…ุณุชู†ุฏุงุช ุงู„ู€ HTML ู„ูŠู‡ุง ู‡ูŠูƒู„ ุฃุณุงุณูŠ ู„ุงุฒู… ูŠูƒูˆู† ู…ูˆุฌูˆุฏุŒ ูˆุงู„ู‡ูŠูƒู„ ุฏู‡ ููŠู‡ declaration and elements ุฏูŠ: <!DOCTYPE html>, <html>, <head>, ูˆ <body>.

<!DOCTYPE html>

  • ุฅุนู„ุงู† ู†ูˆุน ุงู„ู…ุณุชู†ุฏ ุฏู‡ุŒ ุงู„ู„ูŠ ู‡ูˆ <!DOCTYPE html>ุŒ ุจูŠุนุฑู ุงู„ู€ web browsers (ุงู„ู…ุชุตูุญุงุช) ู†ุณุฎุฉ ุงู„ู€ HTML ุงู„ู„ูŠ ุจู†ุณุชุฎุฏู…ู‡ุง ุฅูŠู‡.
  • ุจูŠุชุญุท ููŠ ุฃูˆู„ ุณุทุฑ ุฎุงู„ุต ููŠ ู…ุณุชู†ุฏ ุงู„ู€ HTML.

<html>

  • ุจุนุฏ ุฅุนู„ุงู† ู†ูˆุน ุงู„ู…ุณุชู†ุฏ ุนู„ุทูˆู„ุŒ ุจูŠูŠุฌูŠ ุงู„ู€ <html> element.
  • ุฏู‡ ุจูŠุนุชุจุฑ ุนู„ุงู…ุฉ ุจุฏุงูŠุฉ ุงู„ู…ุณุชู†ุฏ ูƒู„ู‡.

ุฎุงุตูŠุฉ lang

  • ุงู„ู€ lang ุฏูŠ ุนุจุงุฑุฉ ุนู† attribute (ุฎุงุตูŠุฉ) ุจู†ุถูŠูู‡ุง ู„ู„ู€ <html> element .
  • ุงุชูƒู„ู…ู†ุง ุนู† ุงู„ู€ Attributes ู‚ุจู„ ูƒุฏุง Attributes HTML.
  • ุจู†ุณุชุฎุฏู…ู‡ุง ุนุดุงู† ู†ุญุฏุฏ ุงู„ู„ุบุฉ (language) ุงู„ู„ูŠ ู…ูƒุชูˆุจุฉ ุจูŠู‡ุง ุตูุญุฉ ุงู„ูˆูŠุจ.
<html lang="en">
<!-- 'en' ู„ู„ูƒูˆุฏ ุจุชุงุน ุงู„ุฅู†ุฌู„ูŠุฒูŠ -->
<!-- ููŠู‡ ุฃูƒูˆุงุฏ ู„ูƒู„ ุงู„ู„ุบุงุช -->
</html>
  • ุฌูˆู‡ ุงู„ู€ <html> elementุŒ ุจู†ู„ุงู‚ูŠ ุงู„ู€ <head> element.
  • ุฏู‡ ุจูŠู…ุซู„ ุงู„ุฌุฒุก ุงู„ุนู„ูˆูŠ ู…ู† ุงู„ู…ุณุชู†ุฏุŒ ูˆุจูŠุญุชูˆูŠ ุนู„ู‰ ุฃูŠ metadata (ูŠุนู†ูŠ ู…ุนู„ูˆู…ุงุช ุนู† ุงู„ุตูุญุฉ ู†ูุณู‡ุง).
  • ู†ู‚ุทุฉ ู…ู‡ู…ุฉ: ุงู„ู…ุญุชูˆู‰ ุงู„ู„ูŠ ุฌูˆู‡ ุงู„ู€ <head> ู…ุด ุจูŠุธู‡ุฑ ููŠ ุตูุญุฉ ุงู„ูˆูŠุจ ู†ูุณู‡ุง ู„ู„ู…ุณุชุฎุฏู….
  • ุทูŠุจ ุจูŠุญุชูˆูŠ ุนู„ู‰ ุฅูŠู‡ุŸ ู…ู…ูƒู† ูŠูƒูˆู† ููŠู‡:
    • ุนู†ูˆุงู† ุงู„ู…ุณุชู†ุฏ (title) ุงู„ู„ูŠ ุจูŠุธู‡ุฑ ููŠ ุงู„ู€ title bar ุจุชุงุน ุงู„ู€ browser.
    • ู„ูŠู†ูƒุงุช ู„ุฃูŠ ู…ู„ูุงุช ุฎุงุฑุฌูŠุฉ (ุฒูŠ ู…ู„ูุงุช ุงู„ู€ CSS ุฃูˆ JavaScript).
    • ุฃูŠ metadata ุชุงู†ูŠุฉ ู…ููŠุฏุฉ.

ุฎุงุตูŠุฉ charset ุฌูˆู‡ <meta>

  • ุงู„ู€ charset ุฏูŠ attribute ุจู†ุณุชุฎุฏู…ู‡ุง ุนุดุงู† ู†ูˆุตู ู…ุฌู…ูˆุนุฉ ุงู„ุญุฑูˆู (character set) ุงู„ู…ุณุชุฎุฏู…ุฉ ููŠ ุงู„ุตูุญุฉ.
  • ุนุจุงุฑุฉ ุนู† Attributes HTML
  • ุจู†ุณุชุฎุฏู…ู‡ุง ุฌูˆู‡ ุนู†ุตุฑ ุงุณู…ู‡ <meta>. ุงู„ู€ <meta> ุฏู‡ ุจูŠุญุชูˆูŠ ุนู„ู‰ data about the data (ุจูŠุงู†ุงุช ุนู† ุจูŠุงู†ุงุช ุงู„ุตูุญุฉ).
  • ุงู„ู€ <meta> element ู…ู„ูˆุด closing tag (ุจูŠุจู‚ู‰ Self-Closing Elements HTML).
<head>
  <!-- UTF-8 ุฏู‡ ุจูŠุดู…ู„ ู…ุนุธู… ุงู„ุญุฑูˆู ุงู„ู…ุณุชุฎุฏู…ุฉ ููŠ ุงู„ุฅู†ุฌู„ูŠุฒูŠ ูˆู„ุบุงุช ูƒุชูŠุฑ -->
  <meta charset="UTF-8" />
  <title>ุนู†ูˆุงู† ุงู„ุตูุญุฉ</title>
  <!-- ู…ู…ูƒู† ู†ุถูŠู ู„ูŠู†ูƒุงุช ู‡ู†ุง -->
</head>

<body>

  • ูƒู„ ุงู„ู…ุญุชูˆู‰ ุงู„ู„ูŠ ุจู†ุดูˆูู‡ ุจุนู†ูŠู†ุง ููŠ ุตูุญุฉ ุงู„ูˆูŠุจ ุจูŠุชุญุท ุฌูˆู‡ ุงู„ู€ <body> element.
  • ูŠุนู†ูŠ ุงู„ู†ุตูˆุตุŒ ุงู„ุตูˆุฑุŒ ุงู„ุฌุฏุงูˆู„ุŒ ุงู„ููˆุฑู…ุฒุŒ ูƒู„ ุญุงุฌุฉ ุธุงู‡ุฑุฉ ู„ู„ู…ุณุชุฎุฏู… ุจุชูƒูˆู† ู‡ู†ุง.

ุงู„ูƒูˆุฏ ุงู„ุฃุณุงุณูŠ (Start Code)

ุฏู‡ ุดูƒู„ ุงู„ู‡ูŠูƒู„ ุงู„ุฃุณุงุณูŠ ู„ู…ุณุชู†ุฏ HTML ุจุณูŠุท:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"> <!-- ุงุณุชุฎุฏุงู… UTF-8 ุดุงุฆุน -->
    <title>Hello World</title> <!-- ุฏู‡ ุนู†ูˆุงู† ุงู„ุตูุญุฉ ุงู„ู„ูŠ ุจูŠุธู‡ุฑ ููˆู‚ -->
    <link rel="stylesheet" href="styles.css" >
  </head>
  <body>
    <!-- ู‡ู†ุง ุจู†ุญุท ุงู„ู…ุญุชูˆู‰ ุงู„ู„ูŠ ู‡ูŠุธู‡ุฑ -->
    <h1>Hello World</h1> <!-- ุฏู‡ ุนู†ูˆุงู† ุฑุฆูŠุณูŠ -->
    <p>This is a web page.</p> <!-- ุฏูŠ ูู‚ุฑุฉ ู†ุตูŠุฉ -->
  </body>
</html>

Graph View

Backlinks