HTML Basics
HTML stands for HyperText Markup Language. It is the standard language used to create and structure web pages and web applications.
HTML is the backbone of all web pages, providing structure to content through various elements and tags.
Tags and Attributes
An HTML tag is a piece of markup used to indicate how content should be displayed. Tags are usually enclosed in angle brackets like <p>. Attributes provide additional information about HTML elements and are always specified in the start tag.
Example of an attribute:
<a href="https://www.example.com">This is a link</a>
Open Tags and Closed Tags
Most HTML elements have an opening tag and a closing tag. The closing tag includes a forward slash before the tag name.
- Open Tag: <p>
- Closed Tag: </p>
Some tags are self-closing, such as <br> or <img>, meaning they do not require a separate closing tag.
Essential Tags
Essential tags form the basic structure of an HTML document, including <html>, <head>, and <body>.
Text Styles and Text Arrangements
Text styles and arrangements allow you to format text for readability and emphasis.
- Bold Text: Use <strong> or <b> to make text bold.
- Italic Text: Use <em> or <i> to italicize text.
- Paragraphs and Line Breaks: Use <p> for paragraphs and <br> for line breaks.
Exposure to Various Tags
Other common text arrangement tags include headings (<h1> to <h6>), blockquotes, and preformatted text (<pre>).
Color and Background of Web Pages
You can define the colors and backgrounds of web pages or elements using attributes or style rules.
Background color can be applied using CSS properties like background-color.
Lists and their Types
Lists are used to group related items together in a structured manner.
- Unordered Lists: Created using <ul> and list items with <li>. Bullet points are used by default.
- Ordered Lists: Created using <ol> and list items with <li>. Numbers or letters are used by default.
Order and their Types
Ordered lists can be customized using attributes such as type (e.g., numbers, letters, Roman numerals) and start to dictate the sequence order.
Hypertext, Hyperlink, Links, Anchors, and URLs
Navigation on the web relies heavily on links connecting different documents and resources.
- Hypertext: Text containing links to other texts.
- Hyperlink / Link: A reference to data that the user can follow by clicking or tapping.
- Anchors: Defined using the <a> tag to create hyperlinks.
- URL: Uniform Resource Locator, the address of a unique resource on the web.
Links to External Documents
You can link to external web pages or files by specifying the target URL inside the href attribute of an anchor tag.
Creating Table, Frame, Form, and Style Sheet
Creating Tables
Tables are used to display data in a grid format of rows and columns.
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <tr> | Defines a table row |
| <th> | Defines a table header |
| <td> | Defines a table cell |
Frames
Frames were traditionally used to divide a browser window into multiple sections, each displaying a different HTML document using the <frameset> and <frame> tags (note that frames are largely obsolete in modern HTML).
Forms
Forms are used to collect user input. Common form elements include <form>, <input>, <textarea>, <select>, and <button>.
Style Sheet
Style sheets (CSS) are used to style and layout web pages. They can be included inline, internally within <style> tags, or linked externally using <link> tags.