HTML (HyperText Markup Language) is the foundation of web development. It is used to structure content on the web. Below is a complete HTML course covering everything from basics to advanced topics.
—
1. Introduction to HTML
What is HTML?
Difference between HTML, CSS, and JavaScript
History and versions of HTML (HTML4, XHTML, HTML5)
Setting up an HTML environment (Text Editor: VS Code, Sublime Text, Notepad++)
—
2. Basic HTML Structure
<!DOCTYPE> Declaration
<html>, <head>, and <body> Tags
Metadata (<meta>, <title>, <link>)
Comments in HTML (<!– Comment –>)
—
3. HTML Text Formatting
Headings (<h1> to <h6>)
Paragraphs (<p>)
Line Breaks (<br>) and Horizontal Lines (<hr>)
Bold (<b>), Italic (<i>), Underline (<u>), Strikethrough (<s>)
Subscript (<sub>) and Superscript (<sup>)
—
4. HTML Lists
Ordered List (<ol>)
Unordered List (<ul>)
Definition List (<dl>, <dt>, <dd>)
Nested Lists
—
5. HTML Links and Navigation
Anchor Tag (<a href=”URL”>)
Target Attribute (_blank, _self, _parent, _top)
Internal vs External Links
Email and Phone Links (mailto: and tel:)
—
6. HTML Images and Media
Image Tag (<img src=”image.jpg” alt=”Description”>)
Image Attributes (width, height, alt)
Adding Audio (<audio> tag)
Adding Video (<video> tag)
Embedding YouTube Videos (<iframe>)
—
7. HTML Tables
Creating a Table (<table>)
Table Rows (<tr>) and Columns (<td>)
Table Headings (<th>)
Spanning Rows and Columns (rowspan, colspan)
Styling Tables
—
8. HTML Forms and Input Elements
Form Basics (<form>, action, method)
Input Types (text, password, email, number, date, radio, checkbox, file, submit, etc.)
Labels (<label for=””>)
Select Dropdown (<select> and <option>)
Textarea (<textarea>)
Form Validation (Required Fields, Pattern Matching)
—
9. HTML Semantic Elements
Importance of Semantic HTML
Common Semantic Tags:
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
Accessibility Benefits
—
10. HTML5 Features and APIs
New Input Types (e.g., date, color, range, etc.)
<canvas> for Drawing Graphics
<svg> for Scalable Vector Graphics
Geolocation API
Local Storage and Session Storage
Web Workers
—
11. HTML Best Practices and SEO
Proper HTML Structure
Use of Meta Tags for SEO (<meta description>, <meta keywords>)
Image Optimization (alt text, srcset)
Mobile-Friendly Design (viewport meta tag)
—
12. HTML Project
Creating a Simple Website
Using External CSS and JavaScript
Making the Site Responsive
—
13. Learning Resources
Websites: W3Schools, MDN Web Docs, FreeCodeCamp
Books: “HTML and CSS: Design and Build Websites” by Jon Duckett
Practice: CodePen, JSFiddle, LeetCode (for Web Challenges)
HTML முழு 코ர்ஸ் (Tamil) – அடிப்படைகள் முதல் மேம்பட்டவை வரை
HTML (HyperText Markup Language) என்பது வலைப்பக்கங்களை உருவாக்க மற்றும் வடிவமைக்க பயன்படும் அடிப்படை மொழியாகும். இந்த முழுமையான பாடத்திட்டம் HTML-ன் அடிப்படைகள் முதல் மேம்பட்ட அம்சங்கள் வரை எல்லாவற்றையும் விளக்குகிறது.
—
1. HTML அறிமுகம்
HTML என்றால் என்ன?
HTML, CSS, JavaScript இடையேயான வேறுபாடு
HTML-ன் வரலாறு மற்றும் வெர்ஷன்கள் (HTML4, XHTML, HTML5)
HTML எழுதி இயக்க தேவையான சூழல் அமைத்தல் (VS Code, Notepad++, Sublime Text)
—
2. HTML அடிப்படை கட்டமைப்பு
<!DOCTYPE> பிரகடனம்
<html>, <head>, <body> டேக்கள்
மெட்டா தரவுகள் (<meta>, <title>, <link>)
குறிப்புரை சேர்ப்பது (<!– Comment –>)
—
3. HTML உரை வடிவமைப்பு (Text Formatting)
தலைப்புகள் (<h1> முதல் <h6> வரை)
பத்திகள் (<p>)
வரியை உடைப்பது (<br>), கிடைமட்ட கோடு (<hr>)
கோரி (<b>), செருகல் (<i>), அடிக்கோடு (<u>), கோடிடல் (<s>)
கீழ்க்குறிப்பு (<sub>), மேல்குறிப்பு (<sup>)
—
4. HTML பட்டியல்கள் (Lists)
வரிசை பட்டியல் (<ol>)
வரிசையில்லா பட்டியல் (<ul>)
வரையறை பட்டியல் (<dl>, <dt>, <dd>)
பிணைக்கப்பட்ட பட்டியல்கள்
—
5. HTML இணைப்புகள் மற்றும் வழிசெலுத்தல் (Links & Navigation)
இணைப்பு குறிச்சொல் (<a href=”URL”>)
இலக்கு பண்புகள் (_blank, _self, _parent, _top)
உள்ளமைவுள்ள vs வெளிப்புற இணைப்புகள்
மின்னஞ்சல் மற்றும் தொலைபேசி இணைப்புகள் (mailto: மற்றும் tel:)
—
6. HTML படங்கள் மற்றும் மீடியா (Images & Media)
படம் சேர்த்தல் (<img src=”image.jpg” alt=”விளக்கம்”>)
படம் பண்புகள் (width, height, alt)
ஒலியை சேர்த்தல் (<audio> குறிச்சொல்)
வீடியோ இணைத்தல் (<video> குறிச்சொல்)
YouTube வீடியோக்களை எம்பெட் செய்வது (<iframe>)
—
7. HTML அட்டவணைகள் (Tables)
அட்டவணை உருவாக்கம் (<table>)
வரிசைகள் (<tr>) மற்றும் நெடுவரிசைகள் (<td>)
அட்டவணை தலைப்பு (<th>)
செருகல் மற்றும் இணைத்தல் (rowspan, colspan)
அட்டவணை வடிவமைப்பு
—
8. HTML படிவங்கள் மற்றும் உள்ளீடுகள் (Forms & Inputs)
படிவ அடிப்படை (<form>, action, method)
உள்ளீடு வகைகள் (text, password, email, number, date, radio, checkbox, file, submit, etc.)
லேபிள்கள் (<label for=””>)
தேர்வு பட்டியல் (<select> மற்றும் <option>)
உரை பகுதி (<textarea>)
படிவ சரிபார்ப்பு (அவசியமான புலங்கள், முறையைப் பின்பற்றுதல்)
—
9. HTML அர்த்தவியல் குறிச்சொற்கள் (Semantic Elements)
Semantic HTML முக்கியத்துவம்
பொதுவான Semantic குறிச்சொற்கள்:
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>
அணுகல் மேம்படுத்தல் (Accessibility Benefits)
—
10. HTML5 புதிய அம்சங்கள் மற்றும் API-கள்
புதிய உள்ளீடு வகைகள் (e.g., date, color, range, etc.)
<canvas> மூலம் வரைபடம் வரையுதல்
<svg> மூலம் வெக்டார் வரைபடம்
Geolocation API
Local Storage & Session Storage
Web Workers
—
11. HTML சிறந்த நடைமுறைகள் மற்றும் SEO (Best Practices & SEO)
சரியான HTML கட்டமைப்பு
SEO-விற்கு முக்கியமான மெட்டா டேக்குகள் (<meta description>, <meta keywords>)
படம் செயல்படுத்தல் (alt உரை, srcset)
மொபைல் நட்பு வடிவமைப்பு (viewport meta tag)
—
12. HTML செயல்முறை திட்டம் (Project)
ஒரு எளிய இணையதளத்தை உருவாக்குதல்
CSS மற்றும் JavaScript-ஐ இணைத்தல்
இணையதளத்தை பதிலளிக்கக்கூடியதாக (Responsive) மாற்றுதல்
—
13. HTML கற்றல் வளங்கள் (Learning Resources)
இணையதளங்கள்: W3Schools, MDN Web Docs, FreeCodeCamp
புத்தகங்கள்: “HTML and CSS: Design and Build Websites” – Jon Duckett
பயிற்சி செய்ய: CodePen, JSFiddle, LeetCode (Web Challenges)
—