HTML Introduction
Definition: HTML (HyperText Markup Language) is a standard markup language used to create web
pages.
Purpose: HTML is used to define the structure and content of web pages, including headings,
paragraphs, images, links, forms, tables, and more.
Example: A simple HTML document can be created using a text editor and saved with an `.html`
extension.
HTML Editors
Definition: An HTML editor is a software application used to create, edit, and manage HTML
documents.
Types:
- Text editors (e.g., Notepad++, Sublime Text)
- Code editors (e.g., Visual Studio Code, Atom)
- WYSIWYG editors (e.g., Adobe Dreamweaver)
Example: Popular HTML editors include Visual Studio Code, Sublime Text, and Atom.
HTML Structure
Definition: The basic structure of an HTML document includes the `<!DOCTYPE html>`, `<html>`,
`<head>`, and `<body>` elements.
Syntax:
```
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- content goes here -->
</body>
</html>
```
Example: The `<!DOCTYPE html>` declaration specifies the document type, while the `<html>`
element contains the entire document.
HTML Elements
Definition: HTML elements are represented by tags and are used to define the structure and content
of web pages.
Syntax: `<tagname>content</tagname>`
Examples:
- `<p>This is a paragraph.</p>`
- `<h1>This is a heading.</h1>`
- `<img src="[Link]" alt="An image">`
HTML Attributes
Definition: HTML attributes provide additional information about elements and are used to modify
their behavior or appearance.
Syntax: `<tagname attribute="value">content</tagname>`
Examples:
- `<a href="[Link] [Link]</a>`
- `<img src="[Link]" alt="An image" width="500" height="300">`
- `<input type="text" id="username" name="username">`
Headings
Definition: Headings are used to define headings in a document, helping to structure and organize
content.
Syntax (HTML): <h1>Heading</h1> , <h2>Heading</h2> , ..., <h6>Heading</h6>
Examples:
- <h1>Main Heading</h1>
- <h2>Subheading</h2>
- <h3>Sub-subheading</h3>
Paragraphs
Definition: Paragraphs are used to define a paragraph of text, helping to organize and structure
content.
Syntax (HTML): <p>Paragraph text</p>
Examples:
<p>This is a paragraph of text.</p>
<p>This is another paragraph of text.</p>
Styles
Definition: Styles are used to control the layout and appearance of content, including font, color,
spacing, and more.
Syntax (CSS): selector { property: value; }
Examples:
h1 { color: blue; } (sets the color of all h1 headings to blue)
p { font-size: 18px; } (sets the font size of all paragraphs to 18px)
Formatting
Definition: Formatting refers to the visual arrangement of text and other elements, including bold,
italic, underline, and more.
Syntax (HTML):
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
Examples:
<p>This text is <b>bold</b> and this text is <i>italic</i>.</p>
<p>This text is <u>underlined</u>.</p>
Quotations
Definition: Quotations are used to set apart quoted text from the rest of the content.
Syntax (HTML):
<blockquote>Quotation text</blockquote> (for block-level quotations)
<q>Quotation text</q>(for inline quotations)
Examples:
<blockquote>This is a block-level quotation.</blockquote>
<p>This is a sentence with a <q>short quotation</q>.</p>
Comments
Definition: Comments are used to add notes or comments to code or documents, helping to explain
complex code or provide context.
Syntax (HTML): <!-- Comment text -->
Syntax (CSS): /* Comment text */
Examples:
<!-- This is an HTML comment -->
/* This is a CSS comment */