Introduction to HTML & Web Pages
เคตेเคฌเคธाเคเค เคฌเคจाเคจे เคा เคธเคฌเคธे เคชเคนเคฒा เคเคฐ เคธเคฌเคธे เฅเคฐूเคฐी เคเคฆเคฎ, เคซुเคฒ เคกिเคेเคฒ्เคธ เคे เคธाเคฅ!
เคเคฌ เคเคช เค เคชเคจे เคंเคช्เคฏूเคเคฐ เคฏा เคฎोเคฌाเคเคฒ เคฎें เคोเค เคญी เคตेเคฌเคธाเคเค เคोเคฒเคคे เคนैं (เคैเคธे Google, Facebook, เคฏा เคोเค เคจ्เคฏूเค़ เคธाเคเค), เคคो เคเคชเคे เคธाเคฎเคจे เคो เคชेเค เคुเคฒเคเคฐ เคเคคा เคนै, เคเคธे Web Page (เคตेเคฌ เคชेเค) เคเคนเคคे เคนैं। เคเคฐ เคฆुเคจिเคฏा เคा เคนเคฐ เคตेเคฌ เคชेเค—เคाเคนे เคตเคน เคिเคคเคจा เคญी เคเคกเคตांเคธ เค्เคฏों เคจ เคนो—HTML เคे เคฌिเคจा เคจเคนीं เคฌเคจ เคธเคเคคा। HTML เคंเคเคฐเคจेเค เคी เคตो 'เคंเค เคเคฐ เคธीเคฎेंเค' เคนै, เคिเคธเคธे เคชूเคฐी เคกिเคिเคเคฒ เคฆुเคจिเคฏा เคी เคเคฎाเคฐเคค เคเฅी เคนै। เคเคธ เคเคจ-เคกेเคช्เคฅ เคाเคเคก เคฎें เคนเคฎ HTML เคे เคเคเคฆเคฎ เค़ीเคฐो (0) เคฒेเคตเคฒ เคธे เคถुเคฐू เคเคฐเคे เคเคธเคे เคชूเคฐे เคเคฐ्เคिเคेเค्เคเคฐ เคो เคนैเคเคฐ्เคธ เคเคฐ เคช्เคฐो-เคกेเคตเคฒเคชเคฐ्เคธ เคी เคคเคฐเคน เคธเคฎเคेंเคे।
เคตेเคฌ เคชेเค เคी เคชเคฐिเคญाเคทा
เคตेเคฌ เคชेเค เคंเคเคฐเคจेเค เคชเคฐ เคฎौเคूเคฆ เคเค เคกिเคिเคเคฒ เคชเคจ्เคจा (Digital Document) เคนोเคคा เคนै। เคिเคธ เคคเคฐเคน เคिเคธी เคिเคคाเคฌ เคฎें เคฌเคนुเคค เคธाเคฐे เคชเคจ्เคจे เคนोเคคे เคนैं, เคเคธी เคคเคฐเคน เคเค 'Web Site' เคฎें เคฌเคนुเคค เคธाเคฐे 'Web Pages' เคนोเคคे เคนैं। เคเคจ เคชेเคों เคो เคเคชเคा เคฌ्เคฐाเคเค़เคฐ (เคैเคธे Chrome เคฏा Firefox) เคंเคเคฐเคจेเค เคธे เคกाเคเคจเคฒोเคก เคเคฐเคคा เคนै เคเคฐ เคเคชเคो เคธ्เค्เคฐीเคจ เคชเคฐ เคฆिเคाเคคा เคนै।
เคเค เคเคธाเคจ เคเคฆाเคนเคฐเคฃ
เคฎाเคจ เคฒीเคिเคฏे 'Amazon' เคเค เคชूเคฐी เคिเคคाเคฌ (Website) เคนै। เคเคฌ เคเคช เคเคธ เคชเคฐ เค्เคฒिเค เคเคฐเคे 'Mobiles' เคे เคธेเค्เคถเคจ เคฎें เคाเคคे เคนैं, เคคो เคตเคน 'Mobiles' เคा เคชेเค เคเคธ เคिเคคाเคฌ เคा เคเค เคชเคจ्เคจा (Web Page) เคนै। เคนเคฐ เคตेเคฌ เคชेเค เคा เค เคชเคจा เคเค เค เคฒเค 'URL' (เคฒिंเค) เคนोเคคा เคนै।
HTML เคा เคซुเคฒ เคซॉเคฐ्เคฎ เคนै HyperText Markup Language। เคเคเค เคเคธ เคญाเคฐी-เคญเคฐเคเคฎ เคถเคฌ्เคฆ เคो เคคोเฅเคเคฐ เคธเคฎเคเคคे เคนैं:
HyperText (เคนाเคเคชเคฐเคेเค्เคธ्เค)
เคนाเคเคชเคฐเคेเค्เคธ्เค เคा เคฎเคคเคฒเคฌ เคนै "เคตो เคेเค्เคธ्เค เคिเคธเคे เค ंเคฆเคฐ เคฒिंเค (Link) เคुเคชा เคนो"। เคเคฌ เคเคช เคंเคเคฐเคจेเค เคชเคฐ เคจीเคฒे เคฐंเค เคे เคिเคธी เคถเคฌ्เคฆ เคชเคฐ เค्เคฒिเค เคเคฐเคคे เคนैं เคเคฐ เคฆूเคธเคฐे เคชेเค เคชเคฐ เคชเคนुँเค เคाเคคे เคนैं, เคคो เคเคธे เคนाเคเคชเคฐเคेเค्เคธ्เค เคเคนเคคे เคนैं। เคฏเคนी เคตेเคฌ เคो เคเค-เคฆूเคธเคฐे เคธे เคोเฅเคคा เคนै।
Markup (เคฎाเคฐ्เคเค เคช)
เคฎाเคฐ्เคเค เคช เคा เคฎเคคเคฒเคฌ เคนै 'เคกिเค़ाเคเคจ เคเคฐเคจा' เคฏा 'เคธ्เค्เคฐเค्เคเคฐ เคฆेเคจा'। HTML เคเคชเคे เคंเคช्เคฏूเคเคฐ (เคฌ्เคฐाเคเค़เคฐ) เคो เคฌเคคाเคคा เคนै เคि เคชेเค เคชเคฐ เคोเค เคेเค्เคธ्เค 'Heading' เคนै, 'Paragraph' เคนै, 'Table' เคนै เคฏा เคोเค 'Image' เคนै। เคฏเคน เคฌ्เคฐाเคเค़เคฐ เคो เคเค เคจिเคฐ्เคฆेเคถ (Instruction) เคฆेเคคा เคนै।
Language (เคฒैंเค्เคตेเค)
เคฏเคน เคเค เคญाเคทा เคนै เคिเคธे เคนเคฎाเคฐा เคตेเคฌ เคฌ्เคฐाเคเค़เคฐ (Chrome/Edge) เคธเคฎเคเคคा เคนै। (เคง्เคฏाเคจ เคฆें: เคฏเคน เคोเค Programming Language เคจเคนीं เคนै, เค्เคฏोंเคि เคเคธเคฎें เคोเค เคฒॉเคिเค (Plus, Minus, if/else) เคจเคนीं เคนोเคคा, เคฏเคน เคธिเคฐ्เคซ เคกिเฅाเคเคจ เคा เคธ्เค्เคฐเค्เคเคฐ เคฌเคจाเคคी เคนै)।
เคฆुเคจिเคฏा เคी เคนเคฐ เคตेเคฌเคธाเคเค (เคाเคนे Facebook เคนो เคฏा Google) เคे HTML เคोเคก เคा เคฌेเคธिเค เคขांเคा (Skeleton) เคเค เคैเคธा เคนी เคนोเคคा เคนै। เคเคธे เคง्เคฏाเคจ เคธे เคฆेเคें:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Head เคे เค ंเคฆเคฐ เคी เคीเค़ें เคธ्เค्เคฐीเคจ เคชเคฐ เคจเคนीं เคฆिเคเคคीं (เคैเคธे Title, SEO, CSS) -->
<title>My First Web Page</title>
</head>
<body>
<!-- Body เคे เค ंเคฆเคฐ เคตो เคธเคฌ เคเคคा เคนै เคो เคฏूเค़เคฐ เคो เคธ्เค्เคฐीเคจ เคชเคฐ เคฆिเคเคคा เคนै -->
<h1>Hello World!</h1>
<p>Welcome to my heavy details HTML tutorial.</p>
</body>
</html>
เคช्เคฐो เคिเคช: Tags เคเคฐ Elements เคฎें เค ंเคคเคฐ!
เคจเค เคธ्เคूเคกेंเค्เคธ เค
เค्เคธเคฐ Tag เคเคฐ Element เคो เคเค เคนी เคीเค़ เคฎाเคจ เคฒेเคคे เคนैं।
• <h1> เคเค Start Tag เคนै เคเคฐ </h1> เคเค End Tag เคนै।
• เคฒेเคिเคจ <h1>Hello</h1> (เคैเค्เคธ เคे เคธाเคฅ เคฌीเค เคा เคंเคेंเค เคฎिเคฒाเคเคฐ) เคเค เคชूเคฐा HTML Element เคเคนเคฒाเคคा เคนै। เคนเคฎेเคถा เคฏाเคฆ เคฐเคें, เคนเคฐ เคธ्เคाเคฐ्เค เคैเค เคो เค्เคฒोเค़ (/) เคเคฐเคจा เคฌเคนुเคค เค़เคฐूเคฐी เคนोเคคा เคนै, เคตเคฐเคจा เคตेเคฌเคธाเคเค เคा เคกिเฅाเคเคจ เคूเค เคธเคเคคा เคนै!
เคเค เคชूเคฐी เคตेเคฌเคธाเคเค เคฌเคจाเคจे เคे เคฒिเค เคฏे เคคीเคจों เคीเค़ें เคฎिเคฒเคเคฐ เคाเคฎ เคเคฐเคคी เคนैं। เคเคธे เคฎाเคจเคต เคถเคฐीเคฐ (Human Body) เคे เคเคฆाเคนเคฐเคฃ เคธे เคธเคฎเคें:
| 1. HTML (เคंเคाเคฒ เคคंเคค्เคฐ) | 2. CSS (เคค्เคตเคा เคเคฐ เคเคชเคก़े) | 3. JavaScript (เคฆिเคฎाเค เคเคฐ เคจเคธें) |
|---|---|---|
| เคฏเคน เคตेเคฌเคธाเคเค เคा 'เคนเคก्เคกिเคฏों เคा เคขांเคा' (Skeleton) เคนै। เคฏเคน เคคเคฏ เคเคฐเคคा เคนै เคि เคเคนाँ เคชเคฐ เคेเค्เคธ्เค เคนोเคा เคเคฐ เคเคนाँ เคซोเคो เคนोเคी। | เคฏเคน เคตेเคฌเคธाเคเค เคी 'เคธुंเคฆเคฐเคคा' (Design/Styling) เคนै। เคฏเคน เคคเคฏ เคเคฐเคคा เคนै เคि เคฐंเค เคौเคจ เคธा เคนोเคा, เคกिเฅाเคเคจ เคैเคธा เคฆिเคेเคा เคเคฐ เคฒेเคเคเค เคैเคธा เคนोเคा। | เคฏเคน เคตेเคฌเคธाเคเค เคा 'เคฆिเคฎाเค' (Logic/Action) เคนै। เคฏเคน เคคเคฏ เคเคฐเคคा เคนै เคि เคฌเคเคจ เคฆเคฌाเคจे เคชเคฐ เค्เคฏा เคนोเคा เคฏा เคोเค เคชॉเคช-เค เคช เคैเคธे เคเคเคा। |
Q1. เค्เคฏा HTML เคोเคกिंเค เคธीเคเคจे เคे เคฒिเค เคोเค เคฎเคนँเคा เคธॉเคซ्เคเคตेเคฏเคฐ เคाเคนिเค?
.html (เคैเคธे index.html) เคฒเคाเคจा เคนोเคคा เคนै। เคช्เคฐो เคกेเคตเคฒเคชเคฐ्เคธ เคाเคฎ เคคेเค़ी เคธे เคเคฐเคจे เคे เคฒिเค VS Code (Visual Studio Code) เคจाเคฎ เคा เคซ्เคฐी เคธॉเคซ्เคเคตेเคฏเคฐ เคเคธ्เคคेเคฎाเคฒ เคเคฐเคคे เคนैं।
Q2. HTML5 เค्เคฏा เคนै? เค्เคฏा เคฏเคน HTML เคธे เค เคฒเค เคนै?
<audio>) เคเคฐ เคตीเคกिเคฏो (<video>) เคฒเคाเคจे เคे เคฒिเค เคจเค เคैเค्เคธ เคฆिเค เคเค เคนैं, เคिเคจเคे เคฒिเค เคชเคนเคฒे เค
เคฒเค เคธे 'Flash Player' เคกाเคฒเคจा เคชเคก़เคคा เคฅा। เคเค เคฆुเคจिเคฏा เคी เคนเคฐ เคตेเคฌเคธाเคเค HTML5 เคा เคนी เคเคธ्เคคेเคฎाเคฒ เคเคฐเคคी เคนै।
Q3. เค्เคฏा HTML เคนैเค (Hack) เคนो เคธเคเคคा เคนै?
Final Words
HTML เคธीเคเคจा เคฌเคนुเคค เคนी เคเคธाเคจ เคเคฐ เคฎเฅेเคฆाเคฐ เคนै। เค
เคเคฐ เคเคช เคฆिเคจ เคฎें เคธिเคฐ्เคซ 1 เคंเคा เคญी เคฆें, เคคो เคเคช 7 เคฆिเคจों เคे เค
ंเคฆเคฐ เคชूเคฐी HTML เคธीเค เคธเคเคคे เคนैं เคเคฐ เค
เคชเคจा เคुเคฆ เคा เคเค เคตेเคฌ เคชेเค (Web Page) เคฌเคจाเคเคฐ เคฌ्เคฐाเคเฅเคฐ เคฎें เคเคฒा เคธเคเคคे เคนैं। เคฏाเคฆ เคฐเคें, เคฆुเคจिเคฏा เคा เคोเค เคญी เคฌเฅा เคตेเคฌ เคกेเคตเคฒเคชเคฐ เคเคธी <html> เคैเค เคธे เค
เคชเคจी เคถुเคฐुเคเคค เคเคฐเคคा เคนै। เคोเคกिंเค เคी เคช्เคฐैเค्เคिเคธ เคเค เคนी เคถुเคฐू เคเคฐें!