HTML Notes
Introduction to HTML
Structure · Attributes · Images · Forms
Topic 1: Introduction to HTML
1.1 What is HTML?
HTML stands for HyperText Markup Language. It is the standard language used to create web
pages. HTML is not a programming language — it does not do calculations or make decisions.
Instead, it marks up content, telling the browser how to display text, images, links, and more.
HTML was created in 1991 by Tim Berners-Lee. The version used today, HTML5 (2014), added
video/audio support, semantic elements, and better integration with CSS and JavaScript.
1.2 Creating an HTML File
All you need is a text editor (Notepad, VS Code, Sublime Text) and a web browser.
1. Open your text editor.
2. Create a file with a .html extension, for example: [Link].
3. Write your HTML code and save the file.
4. Open the file in a browser by double-clicking it.
1.3 Document Structure
Every HTML document follows this standard layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome!</h1>
<p>This is my first web page.</p>
</body>
</html>
Attribute Description
<!DOCTYPE Tells the browser this is an HTML5 document.
html>
<html> The root element — contains everything on the page.
<head> Holds metadata: title, stylesheet links, scripts.
Linux Learning Center | Page 1
HTML Notes
<title> Sets the page title shown in the browser tab.
<body> Everything visible on the page — headings, text, images.
1.4 Tags & Elements
Tags are written inside angle brackets. Most come in pairs — an opening tag and a closing tag:
<p>This is a paragraph.</p>
An element = opening tag + content + closing tag. Some elements are self-closing and need no
closing tag:
<br> <!-- line break -->
<hr> <!-- horizontal line -->
<img src="[Link]" alt="A photo">
Common Tags
• <h1> to <h6> — Headings. <h1> is the largest, <h6> the smallest.
• <p> — Paragraph of text.
• <a> — Hyperlink to another page or website.
• <img> — Displays an image.
• <ul> / <ol> — Unordered (bulleted) or ordered (numbered) lists.
• <li> — A list item inside <ul> or <ol>.
• <div> — A container used to group other elements.
Topic 2: HTML Attributes
2.1 What are Attributes?
Attributes provide extra information about HTML elements. They are always written inside the
opening tag using the name="value" format:
<img src="[Link]" width="400" alt="A photo">
Here, src, width, and alt are all attributes of the <img> element.
2.2 Key Attributes
Attribute Description
src Path to an image or resource. Use relative URLs (e.g. images/[Link]) for
portability.
href Used with <a> to set the link destination URL.
width / Controls image dimensions in pixels. e.g. width="500" height="300".
height
alt Alternative text shown if image fails to load. Essential for accessibility.
lang Declares the document language. e.g. <html lang="en">
Linux Learning Center | Page 2
HTML Notes
style Applies inline CSS. e.g. style="color:red;". Prefer external CSS for larger projects.
Tip: Use relative URLs for src and href whenever possible — they make your project
portable and easier to move between servers.
Topic 3: HTML Images
3.1 The <img> Tag
Use the <img> tag to embed images in a page. It is self-closing — no closing tag needed:
<img src="[Link]" alt="Description of photo">
The two essential attributes are src (the file path) and alt (alternative text for accessibility).
3.2 Background Images
Images can also be used as backgrounds using CSS, either inline or in a <style> block:
<!-- Inline style -->
<body style="background-image: url('[Link]');">
<!-- In <style> block -->
<style>
body {
background-image: url('[Link]');
background-size: cover;
background-repeat: no-repeat;
}
</style>
Background Size Options
• background-repeat: no-repeat — prevents the image from tiling.
• background-size: cover — fills the element, preserving aspect ratio.
• background-size: 100% 100% — stretches image to fill width and height.
• background-attachment: fixed — keeps the background fixed when scrolling.
Topic 4: HTML Forms
4.1 What is an HTML Form?
Forms collect user input and send it to a server. The <form> element wraps all form controls like
text fields, buttons, and checkboxes.
4.2 Basic Form Example
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
Linux Learning Center | Page 3
HTML Notes
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
Tip: action specifies the URL where data is sent. method="GET" appends data to the URL
(visible); method="POST" sends it in the request body (more secure — use for passwords
and sensitive info).
4.3 Common Form Elements
Attribute Description
type="text" Short text input (name, username, etc.).
type="passwor Password field — hides the typed text.
d"
type="email" Email field with built-in format validation.
type="radio" Select exactly one option from a group.
type="checkbo Select one or more options (can check multiple).
x"
type="submit" Button that submits the form.
<select> Dropdown menu with <option> items inside.
<textarea> Multi-line text input field.
4.4 Useful Form Attributes
Attribute Description
placeholder Hint text inside the field, e.g. "Enter your email".
required Field must be filled before form can be submitted.
disabled Prevents user from interacting with the field.
readonly Field is visible but cannot be edited by the user.
name Identifies the field — sent to the server with the data.
value The value submitted when the form is sent.
4.5 Built-in Validation (HTML5)
HTML5 includes built-in form validation so you can check user input without writing JavaScript:
<!-- Required field -->
<input type="text" name="username" required>
Linux Learning Center | Page 4
HTML Notes
<!-- Email format check -->
<input type="email" name="email" required>
<!-- Pattern match (5-digit zip code) -->
<input type="text" pattern="\d{5}" title="5-digit zip">
End of Notes
Linux Learning Center | Page 5