Chapter 1: Introduction to HTML
What is HTML?
HTML (Hypertext Markup Language) is the standard language which is used to create and design web pages.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
History of HTML
HTML was created by Tim Berners-Lee in 1991. It has evolved over time with several versions, the latest being HTML5, which was finalized in 2014.
Structure of HTML Document
An HTML document typically consists of the <!DOCTYPE> declaration, <html>, <head>, and <body> elements.
<!DOCTYPE html>
<html>
<head>
<title>Document Structure</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Chapter 2: HTML Basic Structure
HTML Elements
HTML elements are the building blocks of HTML pages. They consist of a start tag, content, and an end tag.
<p>This is a paragraph.</p>
HTML Tags
Tags are used to create HTML elements. Most tags come in pairs with an opening tag <tagname> and a closing tag </tagname>.
<h1>This is a heading</h1>
HTML Attributes
Attributes provide additional information about HTML elements. They are always included in the opening tag.
<a href="https://www.example.com">Visit Example</a>
Chapter 3: HTML Document Structure
“!DOCTYPE” Declaration
The <!DOCTYPE> declaration defines the document type and version of HTML being used. It must be the very first thing in an HTML document.
<!DOCTYPE html>
‘html’, ‘head’, and ‘body’ Elements
The <html> element is the root of an HTML document. The <head> element contains meta-information, and the <body> element contains the content.
<html>
<head>
<title>Document Structure</title>
</head>
<body>
<h1>Content Goes Here</h1>
</body>
</html>
Meta Tags
Meta tags provide metadata about the HTML document, such as author, description, and keywords.
<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, JavaScript"> <meta name="author" content="John Doe">
Title Tag
The <title> tag defines the title of the document, which appears in the browser’s title bar or tab.
<title>My Web Page</title>
Chapter 4: Text Formatting
Headings
Headings are defined with <h1> to <h6> tags. <h1> defines the most important heading, and <h6> the least important.
<h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2>
Paragraphs
Paragraphs are defined with the <p> tag. They automatically add some space before and after the content.
<p>This is a paragraph.</p>
Formatting Tags
Formatting tags include <b> for bold, <i> for italic, and <u> for underline.
<b>Bold text</b> <i>Italic text</i> <u>Underlined text</u>
Chapter 5: Lists
Ordered Lists
Ordered lists are defined with the <ol> tag. List items are marked with <li> and displayed with numbers.
<ol> <li>First item</li> <li>Second item</li> </ol>
Unordered Lists
Unordered lists are defined with the <ul> tag. List items are marked with <li> and displayed with bullet points.
<ul> <li>First item</li> <li>Second item</li> </ul>
Definition Lists
Definition lists are used for terms and descriptions, defined with <dl>, <dt>, and <dd> tags.
<dl> <dt>HTML</dt> <dd>HyperText Markup Language</dd> </dl>
Chapter 6: Links
Anchor Tags
Anchor tags <a> are used to create hyperlinks. The href attribute specifies the URL of the page the link goes to.
<a href="https://www.example.com">Visit Example</a>
Linking to External Resources
Links can be used to navigate to external websites or resources.
<a href="https://www.google.com">Google</a>
Linking Within a Page
Links can also be used to jump to a section within the same page using the id attribute.
<a href="#section1">Go to Section 1</a> <h2 id="section1">Section 1</h2>
Chapter 7: Images
Image Tag
The <img> tag is used to embed images in an HTML page. It is an empty tag and contains attributes only.
<img src="image.jpg" alt="Description of Image">
Image Attributes
Common attributes for the <img> tag include src for the image source, alt for alternative text, and width and height.
<img src="image.jpg" alt="Description of Image" width="500" height="600">
Chapter 8: Tables
Creating Tables
Tables are created using the <table> tag. Inside, rows are defined with <tr> and columns with <td> tags.
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
Table Elements
Table elements include <thead>, <tbody>, and <tfoot> for defining table head, body, and footer sections.
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
</tr>
</tfoot>
</table>
Chapter 9: Forms
Form Structure
Forms are used to collect user input. They are defined with the <form> tag and contain input elements.
<form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name"> <input type="submit" value="Submit"> </form>
Input Elements
Input elements are used to create interactive controls in a form. Common types include text, radio, checkbox, and submit.
<input type="text" name="username"> <input type="radio" name="gender" value="male"> Male <input type="checkbox" name="subscribe"> Subscribe <input type="submit" value="Submit">
Form Attributes
Form attributes include action (URL to submit the form data), method (GET or POST), and enctype (encoding type for file upload).
<form action="/submit" method="post" enctype="multipart/form-data"> <input type="file" name="fileupload"> <input type="submit" value="Upload"> </form>
Chapter 10: Semantic Elements
Semantic Elements
Semantic elements clearly describe their meaning in a human- and machine-readable way. Examples include <article>, <section>, and <nav>.
<article> <h2>Article Title</h2> <p>Article content...</p> </article>
Importance of Semantic Markup
Semantic markup improves accessibility, SEO, and the overall structure of web content by using elements that convey meaning.
<section> <h1>Main Section</h1> <p>This is a section of content.</p> </section>
Chapter 11: HTML5 New Features
Canvas
The <canvas> element is used to draw graphics on the fly via JavaScript. It provides a space for dynamic, scriptable rendering of 2D shapes and images.
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 150, 75);
</script>
Video and Audio
The <video> and <audio> elements are used to embed media content. They support native playback without third-party plugins.
<video controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <audio controls> <source src="audio.mp3" type="audio/mp3"> Your browser does not support the audio tag. </audio>
SVG
SVG (Scalable Vector Graphics) is an XML-based format for vector images. It supports interactivity and animation, making it ideal for graphics.
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>
PDF Downloads Link
Send download link to: