Scribd
Upload
159 views4 pages

HTML Full Course

This document provides a comprehensive guide to HTML, covering its basic structure, text formatting, links, images, lists, tables, forms, inline CSS, semantic tags, media embedding, and the use of divs and spans. It also includes instructions for linking CSS and JavaScript files, as well as project ideas for practical application. Resources for further practice are suggested, including W3Schools, FreeCodeCamp, and MDN Web Docs.

Uploaded by

puneetpramanik1228
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
159 views4 pages

HTML Full Course

This document provides a comprehensive guide to HTML, covering its basic structure, text formatting, links, images, lists, tables, forms, inline CSS, semantic tags, media embedding, and the use of divs and spans. It also includes instructions for linking CSS and JavaScript files, as well as project ideas for practical application. Resources for further practice are suggested, including W3Schools, FreeCodeCamp, and MDN Web Docs.

Uploaded by

puneetpramanik1228
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML Full Course - Beginner to Advanced

1. Introduction to HTML

HTML (HyperText Markup Language) is the standard language for creating webpages. It uses "tags" to

define elements within the page.

Example basic structure:

<!DOCTYPE html>

<html>

<head><title>Title</title></head>

<body>Content goes here</body>

</html>

2. Text Formatting Tags

<h1> to <h6>: Heading tags (h1 is the largest, h6 is smallest)

<p>: Paragraph tag

<b>: Bold text

<i>: Italic text

<u>: Underlined text

<strong>: Important text (bold)

<em>: Emphasized text (italic)

<mark>: Highlighted text

<small>: Smaller text

<del>: Deleted (strikethrough) text

<ins>: Inserted (underlined) text

3. Links and Images

<a href="url">: Creates a hyperlink

<img src="image.jpg" alt="description">: Embeds an image with alternate text

width and height attributes can resize the image

4. Lists
HTML Full Course - Beginner to Advanced

<ol>: Ordered (numbered) list

<ul>: Unordered (bulleted) list

<li>: List item

5. Tables

<table>: Defines a table

<tr>: Table row

<th>: Table header cell (bold and centered)

<td>: Table data cell

Example:

<table border="1">

<tr><th>Name</th><th>Age</th></tr>

<tr><td>John</td><td>20</td></tr>

</table>

6. Forms and Inputs

<form>: Starts a form

<input>: Input field (various types: text, email, radio, checkbox, etc.)

<label>: Label for input

<textarea>: Multi-line text input

<select>: Drop-down menu

7. Inline CSS Basics

Add styling directly using the style attribute.

<p style="color:red;">Red Text</p>

Common CSS properties: color, background, font-size, margin, padding

8. Semantic HTML5 Tags

<header>: Top of page or section


HTML Full Course - Beginner to Advanced

<footer>: Bottom of page or section

<nav>: Navigation links

<main>: Main content area

<section>: A section in the document

<article>: Independent content block

<aside>: Side content like ads or tips

9. Media in HTML

<audio>: Embeds sound content

<video>: Embeds video content

Attributes: controls, autoplay, loop, muted

Example:

<video controls>

<source src="video.mp4" type="video/mp4">

</video>

10. Divs and Spans

<div>: Block-level container (for sections)

<span>: Inline container (for styling small parts)

Used with CSS for layout and styling

11. Linking CSS and JavaScript

<link rel="stylesheet" href="style.css">: Links external CSS file

<script src="script.js"></script>: Links external JavaScript file

12. Final Projects & Practice

Ideas:

- Resume Website

- Portfolio Page
HTML Full Course - Beginner to Advanced

- Registration Form

- Simple Quiz App

Practice on:

- W3Schools.com

- FreeCodeCamp.org

- MDN Web Docs

You might also like