Header Ads Widget

html 1st class

mafas January 03, 2025

 


HTML உடனான முதலாம் வகுப்பு பாடங்களைத் தமிழில் தெளிவாகக் கற்பதற்காக, கீழே உள்ள அடிப்படை தகவல்கள் மற்றும் எடுத்துக்காட்டுகள் வழிகாட்டும் வகையில் கொடுக்கப்பட்டுள்ளன:

HTML ?

  • HTML என்பது HyperText Markup Language என்பதற்கான சுருக்கமாகும்.
  • இது ஒரு வலைப்பக்கத்தின் அடிப்படை கட்டமைப்பை உருவாக்க பயன்படுகிறது.
  • HTML மூலம், எளிய உரை (Text) வலைப்பக்கமாக மாற்றப்படுகிறது.

HTML அடிப்படை கட்டமைப்பு

<!DOCTYPE html>
<html>
<head>
    <title>என் முதல் HTML பக்கம்</title>
</head>
<body>
    <h1>வணக்கம், உலகமே!</h1>
    <p>இது என் முதல் HTML பக்கம்.</p>
</body>
</html>

விளக்கம்:

  1. <!DOCTYPE html>
    • இது ஆவணத்தின் வகையைச் சுட்டிக்காட்டுகிறது (HTML5).
  2. <html>
    • HTML ஆவணத்தின் தொடக்கம்.
  3. <head>
    • தலைப்பு தகவல்கள் (Title, Metadata) சேர்க்கும் பகுதி.
  4. <body>
    • உள்பக்கம் காணப்படும் தகவல்களை உள்ளடக்கும் பகுதி.

HTML குறிச்சொற்கள் (Tags)

  1. தலைப்பு (Heading):

    • தலைப்புகளை உருவாக்க h1 முதல் h6 வரை பயன்படுத்தலாம்.
    <h1>இது முதன்மை தலைப்பு</h1>
<h2>இது இரண்டாம் நிலை தலைப்பு</h2>

  2. பத்தியம் (Paragraph):

    • பத்திகளை உருவாக்க p குறிச்சொல் பயன்படுத்தப்படுகிறது.
    <p>இது ஒரு உதாரண பத்தி.</p>

  3. உரையழுத்தம் (Formatting):

    • கனரிய உரை: <b>, <strong> 
      <b>இது கனரிய உரை</b>
    • சாய்வுரையாக்கம்: <i>, <em> 
      <i>இது சாய்வு உரை</i>

  4. பட்டியல் (Lists):

    • அணுக்க பட்டியல் (Ordered List): 
      <ol>
    <li>வகுப்பு ஒன்று</li>
    <li>வகுப்பு இரண்டு</li>
</ol>
    • அணுக்காத பட்டியல் (Unordered List): 
      <ul>
    <li>பொருள் ஒன்று</li>
    <li>பொருள் இரண்டு</li>
</ul>

  5. இணைப்பு (Link):

    <a href="https://www.google.com" target="_blank">கூகுளுக்கு செல்</a>

  6. படம் (Image):

    <img src="image.jpg" alt="இதுவொரு படம்" width="300">

HTML கற்றல்: பயிற்சி

  • ஒரு text editor (Notepad, VS Code) மற்றும் ஒரு browser (Chrome, Firefox) உதவியைப் பயன்படுத்தி உங்கள் HTML கோப்புகளை உருவாக்கவும் மற்றும் ஒளிபரப்பவும்.
  • பின்வருவனவற்றை முயற்சிக்கவும்:
    1. தலைப்பு, Paragarph, Table.
    2. உங்கள் பெயர் மற்றும் முகவரியுடன் HTML வடிவமைக்கவும்.

தொடர்ந்த பாடங்களை நாங்கள் விரிவாக வழங்க உள்ளோம்   வேறு உதவி தேவைப்பட்டால் தெரிவிக்கவும்! 😊

mafas

Posted by: mafas

Post a Comment

0 Comments