1. Introduction to HTML
- HTML (HyperText Markup Language): Standard markup language for creating web pages.
- Uses tags to define content and structure.
- Web browsers interpret HTML to display pages.
1.1 HTML Document Structure
Basic HTML page layout:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
Content goes here
</body>
</html>
- <html>: Root element
- <head>: Metadata, title, links to CSS/JS
- <body>: Visible content
1.2 HTML Tags
- Document Tags: <html>, <head>, <body>
- Structure Tags: <header>, <footer>, <section>, <article>
- Formatting Tags:
- Text-level: <b>, <i>, <u>, <em>, <strong>
- Block-level: <p>, <div>, <h1>–<h6>
- Text-level: <b>, <i>, <u>, <em>, <strong>
- List Tags:
- Ordered: <ol>
- Unordered: <ul>
- List item: <li>
- Ordered: <ol>
- Hyperlink Tags: <a href=”URL”>Link Text</a>
- Executable Content Tags: <script>, <embed>, <object>
2. Images & Imagemaps
- Images: <img src=”image.jpg” alt=”description”>
- Imagemaps:
- Client-side: <map> + <area>
- Server-side: Handled by server scripts
- Alternative text: alt attribute for accessibility
- Client-side: <map> + <area>
3. HTML Tables
- Structure: <table>, <tr> (row), <td> (cell), <th> (header)
- Attributes:
- Alignment: align, valign
- Width & Height: width, height
- Border: border=”1″
- Cell spacing & padding: cellspacing, cellpadding
- Alignment: align, valign
- Advanced:
- Rowspan & Colspan: rowspan, colspan
- Background color: bgcolor
- Rowspan & Colspan: rowspan, colspan
- Tables as design tools: Using tables for layout (deprecated in modern HTML)
4. HTML Frames
- Frames split browser window into multiple sections
- Tags:
- <frameset>: Defines frames layout
- <frame>: Loads content into a frame
- <noframes>: Fallback content
- <frameset>: Defines frames layout
- Targeting frames: target attribute for links
- Nesting framesets: Frames within frames
5. HTML Forms
- Used to collect user input
- attributes:
- action: URL to submit data
- method: GET or POST
- action: URL to submit data
- Input elements:
- Text: <input type=”text”>
- Password: <input type=”password”>
- File upload: <input type=”file”>
- Radio button: <input type=”radio”>
- Checkbox: <input type=”checkbox”>
- Submit/reset buttons: <input type=”submit”>, <input type=”reset”>
- Text area: <textarea>
- Drop-down: <select><option>
- Text: <input type=”text”>
- Form events: onchange, onsubmit, onfocus, etc.
- Labeling fields: <label for=”id”>Label Text</label>
6. Introduction to CSS
- CSS (Cascading Style Sheets): Styles the visual presentation of HTML elements
- Approaches:
- External CSS: <link rel=”stylesheet” href=”style.css”>
- Internal CSS: <style> within <head>
- Inline CSS: style attribute inside HTML tag
- External CSS: <link rel=”stylesheet” href=”style.css”>
6.1 CSS Properties
- Text formatting: color, font-family, font-size, text-align
- Box model: margin, padding, border, width, height
- Background: background-color, background-image
- Positioning: position, top, left, right, bottom
- Display: block, inline, inline-block, none
7. Key Takeaways
- HTML defines structure and content of web pages
- CSS defines visual style and layout
- Forms collect user input, tables display structured data, frames divide browser view
- Imagemaps allow interactive images
- Proper combination of HTML + CSS ensures accessible, responsive, and attractive web pages
