Scribd
Upload
6 views6 pages

HTML

This document provides a comprehensive overview of HTML, including its structure, basic tags, and attributes. It covers various elements such as headings, paragraphs, links, images, lists, tables, and forms, along with their usage and syntax. Additionally, it discusses semantic tags for layout and multimedia elements like videos and iframes.

Uploaded by

pallavi.reddi1407
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
6 views6 pages

HTML

This document provides a comprehensive overview of HTML, including its structure, basic tags, and attributes. It covers various elements such as headings, paragraphs, links, images, lists, tables, and forms, along with their usage and syntax. Additionally, it discusses semantic tags for layout and multimedia elements like videos and iframes.

Uploaded by

pallavi.reddi1407
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/ 6

HTML

11 February 2025

05:05 PM

• HTML - Structure/Layout

LEVEL - 1

• HTML - (Hyper Text Markup Language)

• HTML is not case sensitive

• First line - !

HTML Tag

• <p> This is a paragraph </p>

Basic HTML Page

<!DOCTYPE html> // tells browser you are using HTML5

<html> // root of an html document

<head> // container for metadata

<title>My First Page</title> // page title

</head>

<body> // contains all data rendered by the browser

<p>hello world</p> // paragraph tag

</body>

</html>

Quick Points

• Html tag is parent of head & body tag

• Most of html elements have opening & closing tags with content in between

• Some tags have no content in between, eg - <br>

• We can use inspect element/view page source to edit html

Comments in HTML
<!-- This is an HTML Comment -->

LEVEL - 2

Basic HTML tags

• HTML Attributes

<html lang="en">

• Heading Tag

h1 (most important)

h2

h3

h4

h5

h6 (least important)

• Paragraph Tag

<p> This is a simple paragraph </p>

• Anchor Tag

<a href="https://google.com"> Google </a>

• Image Tag

<img src="/image.png" alt="Random Image" >

• Br Tag

<br> // add next line (line breaks)

• Bold, Italic & Underline Tags

<b> Bold </b>

<i>> Italic </i>

<u> Underline </u>

• Big & Small Tags

<big> Big </big>

<small> Small </small>

• Hr Tag

<hr> // horizontal ruler


• Subscript & Superscript Tag

<sub> subscript </sub>

<sup> superscript </sup>

• Pre Tag

<pre> This

is a sample

text.

</pre>

LEVEL - 3

• Page Layout Techniques

using Semantic tags for layout

- <header>

- <main>

- <footer>

using the Right Tags

• Inside Main Tag

Section Tag - <section>

Article Tag - <article>

Aside Tag - <aside>

• Revisiting Anchor Tag

<a href="https://google.com" target="_main"> Google </a> // for new tab

<a href="https://google.com"> <img src="link"> </a> // clickable pic

• Revisiting Image Tag

<img src="link" height=50px> // set height

<img src="link" width=50px> // set width

• Div Tag

Container used for other HTML elements

Block Elements (takes full width)

• Span Tag
Container used for other HTML elements

Inline Element (takes width as per size)

LEVEL - 4

• List in HTML

- unordered (bullet points)

<ul>

<li> Apple </li>

<li> Mango </li>

</ul>

- ordered (sequence or in an order)

<ol>

<li> Apple </li>

<li> Mango </li>

</ol>

• Tables in HTML

<tr> (table row)

<td> (table data)

<th> (table header)

<th colspan="2" > // colspan is used to merge columns

• Caption in Tables

<caption> Student Data </caption>

• thead & tbody in Tables

<thead> to wrap table head

<tbody> to wrap table body

• Forms in HTML

<form>

Form content

</form>
<form action="/action.php">

<input type="text" placeholder="username">

<input type="password" placeholder="password">

</form>

• Action in Form

<form action="/action.php">

• Label

<label for="id1">

<input type="radio" value="class X" name="class" id="id1">

</label>

Radio button - only one option can be selected

• Class & Id

<div id="id1" class="group1">

</div>

• Checkbox

<label for="id1">

<input type="checkbox" value="class X" name="class" id="id1">

</label>

Checkbox - we can select any number of options

• Text Area

<textarea name="feedback" id="101" placeholder="please give your feedback here"


rows="5">Feedback</textarea>

• Select

<select name="city" id="city">

<option value="Delhi"> Delhi </option>

<option value="Mumbai"> Mumbai </option>

<option value="Bangalore"> Bangalore </option>

</select>

• iframe Tag

website inside website


<iframe src="link">

• Video Tag

<video src="myVid.mp4"> My Video </video>

Attributes

- controls

- height

- width

- loop

- autoplay

You might also like