Unit IV: Website Designing - In-Depth Notes
1. Introduction to HTML
HTML (HyperText Markup Language) is the backbone of any website. It structures web content
using a series of elements (tags). Every HTML document starts with a DOCTYPE declaration and
includes elements like <html>, <head>, and <body>. The <head> contains meta-information (title,
links to CSS, etc.), and <body> contains the content to be displayed. HTML is not a programming
language but a markup language.
2. Tags and Attributes
Tags in HTML are predefined keywords enclosed in angle brackets. They usually come in pairs: an
opening tag and a closing tag (e.g., <p>...</p>). Attributes are used inside the opening tag to add
extra information. For instance, the <a> tag uses the 'href' attribute to define the link's destination.
Global attributes like 'id', 'class', 'style', and 'title' can be applied to most tags.
3. Text Formatting
HTML provides tags to enhance the presentation of text:
- <b>, <strong>: bold text (strong indicates importance)
- <i>, <em>: italicized text (emphasized)
- <u>: underlined text
- <mark>: highlighted text
- <sup>, <sub>: superscript and subscript
- <br>: line break
- <hr>: horizontal rule
4. Fonts
Font styles are handled using CSS in modern HTML. Use 'font-family' to define the font, 'font-size'
for size, 'font-weight' for boldness, and 'font-style' for italics. Example:
p{
font-family: 'Arial';
font-size: 14px;
color: #333;
5. Hypertext Links
The <a> tag is used to create links. Common attributes include:
- href: URL of the page
- target: '_blank' opens link in a new tab
- title: tooltip on hover
Example:
<a href='https://example.com' target='_blank'>Visit Site</a>
6. Tables
Tables organize data into rows and columns. Use:
- <table>: main container
- <tr>: table row
- <th>: table header cell
- <td>: table data cell
- Attributes: border, rowspan, colspan
Example:
<table border='1'>...</table>
7. Images
Images are embedded using the <img> tag. Essential attributes include:
- src: path to the image
- alt: alternate text for accessibility
- width/height: dimensions in pixels or %
Example:
<img src='image.jpg' alt='Description' width='200'>
8. Lists
HTML supports three list types:
- Ordered (<ol>): items numbered
- Unordered (<ul>): items bulleted
- Definition (<dl>): dictionary-like terms
Each list item is contained in <li> for ol and ul, and <dt>/<dd> for dl.
9. Forms
Forms collect user input using various fields:
- <input>: single-line text, radio buttons, checkboxes
- <textarea>: multi-line text
- <select> with <option>: dropdowns
- <button> or <input type='submit'> for submission
Attributes: action, method (GET or POST), name, id, placeholder, required.
10. Frames
Frames used <frameset> and <frame> to split a window into multiple sections. Syntax:
<frameset cols='50%,50%'>
<frame src='left.html'>
<frame src='right.html'>
</frameset>
Note: Deprecated in HTML5. Use CSS and JavaScript instead (like <iframe> or flexbox layouts).
11. Cascading Style Sheets (CSS)
CSS enhances the look of a webpage. It can be applied in three ways:
- Inline: style='color:red;'
- Internal: <style> block in <head>
- External: linked .css file
CSS controls layout (margin, padding, display), typography (font, size, color), background, borders,
and positioning. CSS uses selectors to target HTML elements.
