Unit 1: Introduction to HTML
By Notes Vandar
1.1 Getting Started with a Simple Web Page
Creating a simple web page is the first step in learning HTML. In this section, we’ll cover the basics of HTML structure and create a very simple web page.
1.1.1 What is HTML?
HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It structures content on the web by using various elements represented by tags.
1.1.2 Basic Structure of an HTML Document
An HTML document consists of several key elements that provide structure to the page. Below is the basic structure of an HTML document:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my first web page.</p>
</body>
</html>
1.1.3 Explanation of the Basic Structure
<!DOCTYPE html>: This declaration defines the document type and version of HTML being used (HTML5 in this case).<html lang="en">: This tag represents the root element of the HTML document. Thelangattribute specifies the language of the document (English in this case).<head>: This section contains meta-information about the document, such as the character set, viewport settings for responsive design, and the title.<meta charset="UTF-8">: This specifies the character encoding for the document, allowing it to support a wide range of characters.<meta name="viewport" content="width=device-width, initial-scale=1.0">: This tag ensures that the web page is responsive and displays well on different devices by setting the viewport width.<title>: This defines the title of the web page that appears in the browser tab.<body>: This section contains the content that will be displayed on the web page. This is where you’ll add text, images, links, and other elements.<h1>: This is a heading element.<h1>is the highest level of heading, typically used for the main title of the page.<p>: This represents a paragraph of text.
1.1.4 Creating Your First Web Page
To create your first web page, follow these steps:
- Open a Text Editor: Use any text editor (like Notepad, Visual Studio Code, or Sublime Text).
- Copy the HTML Structure: Copy the basic structure of the HTML document provided above.
- Save the File: Save the file with a
.htmlextension (e.g.,index.html). - Open in a Browser: Open the saved file in a web browser (like Chrome, Firefox, or Edge) to view your web page.
1.1.5 Example
Here’s an example of a simple web page that you can create:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is my very first web page created with HTML. I am excited to learn more!</p>
<p>Stay tuned for more content.</p>
</body>
</html>
1.2 Block and Inline Elements
Understanding the difference between block and inline elements is essential for structuring and styling your HTML documents. This section will explain both types of elements, how they behave in a web layout, and provide examples.
1.2.1 Block Elements
Block elements are those that occupy the full width available, with a line break before and after the element. They create a “block” of content that can be styled as a separate section on a web page. Block elements are commonly used for structuring the layout of a page.
Common Block Elements:
<div>: A generic container for flow content, often used for styling purposes.<h1>to<h6>: Heading elements, with<h1>being the highest level and<h6>the lowest.<p>: Paragraph element, used for blocks of text.<ul>: Unordered list.<ol>: Ordered list.<li>: List item.<blockquote>: A block of text that is quoted from another source.<header>,<footer>,<article>,<section>: Semantic elements that define different parts of a webpage.
Example of Block Elements:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Block Elements Example</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph of text that provides some information.</p>
<div>
<h2>Subheading</h2>
<p>This is another paragraph inside a div element.</p>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
1.2.2 Inline Elements
Inline elements do not start on a new line; instead, they appear within the flow of a block element. They only take up as much width as necessary and are often used for formatting parts of a text or small components within a block.
Common Inline Elements:
<span>: A generic inline container for text or other inline elements.<a>: Anchor element used to create hyperlinks.<img>: Used to embed images.<strong>: Indicates strong importance; typically displayed in bold.<em>: Indicates emphasis; typically displayed in italics.<br>: Inserts a line break.<code>: Displays a snippet of code.<small>: Renders text in a smaller size.
Example of Inline Elements:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Inline Elements Example</title>
</head>
<body>
<p>This is a <strong>bold</strong> word and this is an <em>italic</em> word in a paragraph.</p>
<p>Here is a link to <a href=”https://www.example.com”>Example Website</a> and an image below:</p>
<img src=”image.jpg” alt=”Example Image” />
<span>This is an inline span element.</span>
</body>
</html>
1.2.3 Visual Representation
- Block Elements:
- Start on a new line and stretch out to fill the width of the parent container.
- Example: A
<div>containing paragraphs will stack vertically.
- Inline Elements:
- Do not start on a new line and only take up as much width as necessary.
- Example: An
<a>tag within a paragraph will appear inline with the text.
1.2.4 Combining Block and Inline Elements
It’s common to combine both block and inline elements to create well-structured layouts. For example, you might have a block <div> containing inline elements like <span> and <a>.
Example of Combining Both:
<h1>Welcome to My Website</h1>
<p>This is a <strong>great</strong> place to learn about <a href=”#”>HTML</a>!</p>
</div>
1.3 Presentation and Phrase Elements
In HTML, presentation and phrase elements are used to enhance the appearance of text and other content on a web page. While HTML primarily focuses on structure and semantics, presentation elements are important for defining how the content should be displayed. This section will cover common presentation elements, their usage, and their significance in web design.
1.3.1 Presentation Elements
Presentation elements are used to indicate how content should be visually styled rather than its meaning. They can affect the text’s appearance, such as making it bold or italic.
Common Presentation Elements:
<b>: Bold text without any semantic meaning.<i>: Italic text without any semantic meaning.<u>: Underlined text.<strong>: Strongly emphasized text, usually displayed in bold. This element has semantic meaning, indicating importance.<em>: Emphasized text, typically displayed in italics, indicating emphasis in meaning.<mark>: Highlighted text, used to mark important parts of the text.<small>: Smaller text, often used for fine print or secondary information.<del>: Strikethrough text, indicating that the text has been deleted.<ins>: Underlined text, indicating that the text has been inserted.
Example of Presentation Elements:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Presentation Elements Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is an example of <strong>strongly emphasized</strong> text and <em>emphasized</em> text.</p>
<p>Here is some <b>bold</b> text, <i>italic</i> text, and <u>underlined</u> text.</p>
<p>This text is <mark>highlighted</mark> for importance.</p>
<p>Here is some <small>small text</small> for additional information.</p>
<p>This text has been <del>deleted</del> and this is <ins>inserted</ins>.</p>
</body>
</html>
1.3.2 Phrase Elements
Phrase elements are typically used to style small sections of text and convey specific meanings. They can be inline elements that can be nested within block elements.
Common Phrase Elements:
<a>: Anchor element for hyperlinks, used to link to other pages or resources.<span>: Generic inline container used for styling or scripting.<code>: Represents a fragment of computer code, typically displayed in a monospaced font.<kbd>: Represents user input (e.g., keyboard input).<var>: Represents a variable in mathematical expressions or programming.<cite>: Represents the title of a work (e.g., book, film) and is often italicized.<abbr>: Abbreviation or acronym, usually displayed in a shorter form.<time>: Represents a specific period or time, with the ability to include machine-readable formats.
Example of Phrase Elements:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Phrase Elements Example</title>
</head>
<body>
<h1>Phrase Elements in Action</h1>
<p>To learn more about HTML, visit <a href=”https://www.w3schools.com”>W3Schools</a>.</p>
<p>Here is a piece of code: <code>console.log(‘Hello, World!’);</code></p>
<p>Type the following command: <kbd>npm install package-name</kbd></p>
<p>In the equation, <var>x</var> represents the variable.</p>
<p>Read the book <cite>The Great Gatsby</cite> for more information.</p>
<p>The abbreviation for United States is <abbr title=”United States of America”>USA</abbr>.</p>
<p>The event will take place on <time datetime=”2024-10-31″>October 31, 2024</time>.</p>
</body>
</html>
1.3.3 Importance of Presentation and Phrase Elements
- Accessibility: Using semantic elements like
<strong>,<em>, and<mark>improves accessibility by helping screen readers convey the importance or emphasis of certain content. - SEO: Search engines can better understand the structure and relevance of the content when appropriate elements are used.
- Styling: Presentation elements can be styled using CSS to enhance the visual appearance of the content, making it more engaging for users.
1.4 Empty and Non-empty Elements
In HTML, elements can be categorized as either empty or non-empty based on whether they can contain content. Understanding the difference between these types of elements is essential for writing valid HTML and structuring your documents effectively.
1.4.1 Empty Elements
Empty elements (also known as void elements) do not have any content between an opening and closing tag. They do not require a closing tag and are self-contained. Empty elements are typically used to insert a specific item into the document without any inner content.
Common Empty Elements:
<br>: Inserts a line break in the text.<hr>: Creates a horizontal rule (line) to separate content.<img>: Embeds an image.<input>: Creates an input field for forms.<link>: Links to external resources (usually stylesheets).<meta>: Contains metadata about the HTML document.<source>: Specifies multiple media resources for<audio>and<video>elements.<track>: Specifies text tracks for<video>elements.
Example of Empty Elements:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Empty Elements Example</title>
</head>
<body>
<h1>Empty Elements</h1>
<p>This is a paragraph with a line break.<br>Here is the new line.</p>
<hr>
<p>Below is an image:</p>
<img src=”image.jpg” alt=”Example Image”>
<p>Here is an input field:</p>
<input type=”text” placeholder=”Enter your name”>
</body>
</html>
1.4.2 Non-empty Elements
Non-empty elements (also known as container elements) can contain text, other HTML elements, or both. These elements have both an opening and a closing tag, and the content resides between these tags.
Common Non-empty Elements:
<div>: A generic container for block-level content.<p>: Defines a paragraph of text.<h1>to<h6>: Heading elements for different levels of headings.<ul>: Unordered list.<ol>: Ordered list.<li>: List item.<table>: Defines a table and can contain rows and cells.<form>: Creates a form for user input.
Example of Non-empty Elements:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Non-empty Elements Example</title>
</head>
<body>
<h1>Non-empty Elements</h1>
<div>
<h2>This is a Subheading</h2>
<p>This paragraph provides information about the heading above.</p>
</div>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<form>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
1.4.3 Summary of Differences
| Aspect | Empty Elements | Non-empty Elements |
|---|---|---|
| Content | Do not contain any content | Can contain text and/or other elements |
| Tags | Do not require a closing tag | Require both opening and closing tags |
| Usage | Used for standalone items (e.g., images, line breaks) | Used for structuring and organizing content |
| Examples | <br>, <img>, <input> |
<div>, <p>, <ul> |
1.5 HTML character entities
HTML character entities are used to represent special characters that cannot be typed directly into HTML documents. They are particularly useful for displaying characters that have specific meanings in HTML or for characters that are not readily available on a keyboard.
1.5.1 What are Character Entities?
A character entity consists of an ampersand (&), followed by the entity name or number, and ending with a semicolon (;). When the browser encounters a character entity, it renders the corresponding character.
Examples:
- Named entities: Use predefined names for special characters.
- Numeric entities: Use a numerical code to represent a character.
1.5.2 Common HTML Character Entities
Here are some of the most commonly used HTML character entities:
| Character | Named Entity | Numeric Entity |
|---|---|---|
& |
& |
& |
< |
< |
< |
> |
> |
> |
" |
" |
" |
' |
' |
' |
© |
© |
© |
® |
® |
® |
™ |
™ |
™ |
€ |
€ |
€ |
£ |
£ |
£ |
¥ |
¥ |
¥ |
1.5.3 When to Use Character Entities
- Reserved Characters: When you need to display characters like
<,>, or&, which are reserved for HTML syntax. - Special Symbols: When including special symbols that may not be easily typed.
- Ensuring Valid HTML: Using character entities helps maintain valid HTML and ensures that browsers render the content correctly.
1.5.4 Examples of Using Character Entities
Here’s an example of how character entities can be used in an HTML document:
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>HTML Character Entities Example</title>
</head>
<body>
<h1>Using HTML Character Entities</h1>
<p>To display the symbols of greater than and less than, we use: < and >.</p>
<p>To include an ampersand, we write: &.</p>
<p>Here is a copyright symbol: © 2024 My Website.</p>
<p>Special characters can enhance your text, such as: € for Euro, £ for Pound, and ¥ for Yen.</p>
</body>
</html>
1.6 HTML Lists, Tables, and Links (Internal and External)
HTML provides various elements to structure content, including lists, tables, and links. Each of these elements serves a specific purpose and helps organize and present information effectively.
1.6.1 HTML Lists
HTML supports three types of lists: ordered lists, unordered lists, and description lists.
1.6.1.1 Unordered Lists (<ul>) An unordered list is used for items that do not have a specific order. Each list item is represented by the <li> tag and typically appears with bullet points.
Example of Unordered List:
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
1.6.1.2 Ordered Lists (<ol>) An ordered list is used for items that have a specific order. Each item is also represented by the <li> tag, and items are usually numbered.
Example of Ordered List:
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
1.6.1.3 Description Lists (<dl>) A description list is used for terms and their descriptions. It consists of <dt> for the term and <dd> for the description.
Example of Description List:
<dt>HTML</dt>
<dd>A markup language for creating web pages.</dd>
<dt>CSS</dt>
<dd>A stylesheet language for styling HTML documents.</dd>
</dl>
1.6.2 HTML Tables
Tables are used to display data in a structured format, consisting of rows and columns. The <table> element is used to create a table, and it can include header cells, data cells, and captions.
Example of a Table:
<caption>Sample Table</caption>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
Table Elements:
<table>: The container for the table.<caption>: The title of the table.<thead>: A group of header rows.<tbody>: A group of body rows.<tr>: A table row.<th>: A header cell (bold and centered by default).<td>: A standard data cell.
1.6.3 HTML Links
Links are created using the <a> (anchor) element. Links can be internal (pointing to another section of the same document) or external (pointing to a different website).
1.6.3.1 External Links External links point to a different website or page. The href attribute specifies the URL of the link.
Example of External Link:
1.6.3.2 Internal Links Internal links point to another section within the same document. You can create internal links by using anchor tags with id attributes.
Example of Internal Link:
<p>Content of section 1.</p>
<a href=”#section1″>Go to Section 1</a>
1.7 Multimedia Content: Images, Audio, Video, and YouTube Player
Multimedia content enhances the user experience on a web page by incorporating various types of media, such as images, audio, and video. HTML provides specific elements to embed these multimedia types effectively.
1.7.1 Images
Images can be embedded into web pages using the <img> tag. This tag is an empty element, meaning it does not have a closing tag. The src attribute specifies the path to the image file, and the alt attribute provides alternative text for accessibility and in case the image fails to load.
Example of an Image:
Attributes:
src: The source of the image file (can be a relative or absolute URL).alt: Text that describes the image for screen readers and displays if the image cannot be loaded.widthandheight: Optional attributes to specify the dimensions of the image.
1.7.2 Audio
The <audio> element is used to embed audio content. You can include different audio file formats using the <source> tag to ensure compatibility across browsers.
Example of Audio:
<source src=”path/to/audio.mp3″ type=”audio/mpeg”>
<source src=”path/to/audio.ogg” type=”audio/ogg”>
Your browser does not support the audio element.
</audio>
Attributes:
controls: Displays audio controls (play, pause, volume).autoplay: Automatically plays the audio when the page loads (not recommended for user experience).loop: Repeats the audio indefinitely.
1.7.3 Video
The <video> element is used to embed video content. Similar to audio, you can use the <source> tag to specify multiple video formats.
Example of Video:
<source src=”path/to/video.mp4″ type=”video/mp4″>
<source src=”path/to/video.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
Attributes:
controls: Displays video controls (play, pause, volume).autoplay: Automatically plays the video when the page loads.loop: Repeats the video indefinitely.muted: Mutes the audio of the video.
1.7.4 YouTube Player
You can embed YouTube videos directly into your web pages using the <iframe> tag. YouTube provides an embed code for each video, which can be copied and pasted.
Example of Embedding a YouTube Video:
title=”YouTube video player” frameborder=”0″ allow=”accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture” allowfullscreen>
</iframe>
Attributes:
src: The URL for the YouTube video (replaceVIDEO_IDwith the actual video ID).allowfullscreen: Allows the video to be viewed in fullscreen mode.
1.8 Form Elements (text, password, file, radio, checkbox, text area, hidden, select option, button, date, email)
HTML forms are essential for collecting user input. They allow users to submit data, such as text, selections, and files, to a server for processing. This section covers various form elements and their uses.
1.8.1 Basic Structure of a Form
A form is created using the <form> element, which can include various input fields, buttons, and other elements.
Basic Form Example:
action: The URL to which the form data will be sent upon submission.method: The HTTP method used to send data (typicallyGETorPOST).
<!– Form elements will go here –>
</form>
Attributes:
1.8.2 Common Form Elements
1.8.2.1 Text Input The <input> element with type="text" creates a single-line text field.
Example:
<input type=”text” id=”name” name=”name”>
1.8.2.2 Password Input The <input> element with type="password" creates a text field that masks user input.
Example:
<input type=”password” id=”password” name=”password”>
1.8.2.3 File Input The <input> element with type="file" allows users to upload files.
Example:
<input type=”file” id=”file-upload” name=”file-upload”>
1.8.2.4 Radio Buttons The <input> element with type="radio" allows users to select one option from a set.
Example:
<label><input type=”radio” name=”gender” value=”female”> Female</label>
1.8.2.5 Checkboxes The <input> element with type="checkbox" allows users to select multiple options.
Example:
1.8.2.6 Textarea The <textarea> element creates a multi-line text input area.
Example:
<textarea id=”message” name=”message” rows=”4″ cols=”50″></textarea>
1.8.2.7 Hidden Input The <input> element with type="hidden" allows you to include data that is not visible to the user.
Example:
1.8.2.8 Select Dropdown The <select> element creates a dropdown list for selecting one or more options.
Example:<label for=”country”>Country:</label>
<select id=”country” name=”country”>
<option value=”usa”>United States</option>
<option value=”canada”>Canada</option>
<option value=”uk”>United Kingdom</option>
</select>
1.8.2.9 Button The <button> element creates a clickable button that can submit a form or trigger a JavaScript function.
Example:
1.8.2.10 Date Input The <input> element with type="date" creates a date picker.
Example:
<input type=”date” id=”birthday” name=”birthday”>
1.8.2.11 Email Input The <input> element with type="email" validates email addresses.
Example:
<input type=”email” id=”email” name=”email”>
1.8.3 Complete Form Example
Here’s a complete example of a form that incorporates various elements:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Sample Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form action=”/submit” method=”POST”>
<label for=”name”>Name:</label>
<input type=”text” id=”name” name=”name” required><br><br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required><br><br>
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password” required><br><br>
<label>Gender:</label>
<label><input type=”radio” name=”gender” value=”male”> Male</label>
<label><input type=”radio” name=”gender” value=”female”> Female</label><br><br>
<label><input type=”checkbox” name=”subscribe” value=”yes”> Subscribe to newsletter</label><br><br>
<label for=”country”>Country:</label>
<select id=”country” name=”country”>
<option value=”usa”>United States</option>
<option value=”canada”>Canada</option>
<option value=”uk”>United Kingdom</option>
</select><br><br>
<label for=”birthday”>Birthday:</label>
<input type=”date” id=”birthday” name=”birthday”><br><br>
<label for=”file-upload”>Upload a file:</label>
<input type=”file” id=”file-upload” name=”file-upload”><br><br>
<label for=”message”>Message:</label>
<textarea id=”message” name=”message” rows=”4″ cols=”50″></textarea><br><br>
<input type=”hidden” name=”user_id” value=”12345″>
<button type=”submit”>Submit</button>
</form>
</body>
</html>