Scribd
Upload
4 views21 pages

HTML Notes1

The document provides an overview of HTML, including its basic structure and essential tags such as paragraph, anchor, image, and heading tags. It explains the use of attributes, comments, and the importance of semantic tags for layout. Additionally, it highlights HTML's case sensitivity and various formatting options for text.

Uploaded by

sristysharmacpr2001
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
4 views21 pages

HTML Notes1

The document provides an overview of HTML, including its basic structure and essential tags such as paragraph, anchor, image, and heading tags. It explains the use of attributes, comments, and the importance of semantic tags for layout. Additionally, it highlights HTML's case sensitivity and various formatting options for text.

Uploaded by

sristysharmacpr2001
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

HTML Tag

A container for some content or other HTML tags

<p> This is a paragraph </p>

Content

Element
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 part of code that should not be parsed.

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


HTML is NOT case sensitive
<html> = <HTML>

<p> = <P>

<head> = <HEAD>

<body> = <BODY>
Basic HTML Tags
HTML Attributes
Attributes are used to add more information to the tag

<html lang="en">
Heading Tag
Used to display headings in HTML

h1 (most important)

h2
h3
h4
h5
h6 (least important)
Paragraph Tag
Used to add paragraphs in HTML

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


Anchor Tag
Used to add links to your page

<a href="[Link] Google </a>


Image Tag
Used to add images to your page

<img src="/[Link]" alt="Random Image">

relative url
Br Tag
Used to add next line(line breaks) to your page

<br>
Bold, Italic & Underline Tags
Used to highlight text in your page

<b> Bold </b>

<i> Italic </ i>

<u> Underline </u>


Big & Small Tags
Used to display big & small text on your page

<big> Big </big>

<small> Small </small>


Hr Tag
Used to display a horizontal ruler, used to separate content

<hr>
Subscript & Superscript Tag
Used to display a horizontal ruler, used to separate content

<sub> subscript </sub>

H2O
<sup> superscript </sup>
n
A+B
Pre Tag
Used to display text as i t is (without ignoring spaces & next line)

<pre> This
is a sample
text.
</pre>
Page Layout Techniques
using Semantic tags for layout
using the Right Tags

<header>
<main>
<footer>
Inside Main Tag
Section Tag For a section on your page
<section>

Article Tag For an article on your page


<article>

Aside Tag For content aside main content(ads)


<aside>
Revisiting Anchor Tag
<a href="[Link] target="_main"> Google </a>

for new tab

<a href="[Link] <img src="link"> </a>

clickable pic
Revisiting Anchor Tag
<a href="[Link] target="_main> <img src="link"> </a>

clickable pic
Revisiting Image Tag
<img src="link" height=50px >

set height

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

set width

You might also like