Scribd
Upload
86 views15 pages

HTML Notes

HTML is the standard markup language used to create web pages. Key HTML elements include headings, paragraphs, links, images, lists and tables. HTML pages use tags like <h1> for headings, <p> for paragraphs, and <a> for links. The basic structure of an HTML page includes <html>, <head>, and <body> tags. CSS and JavaScript can be used to style and add interactivity to HTML pages.

Uploaded by

Tusshar Gurav
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
86 views15 pages

HTML Notes

HTML is the standard markup language used to create web pages. Key HTML elements include headings, paragraphs, links, images, lists and tables. HTML pages use tags like <h1> for headings, <p> for paragraphs, and <a> for links. The basic structure of an HTML page includes <html>, <head>, and <body> tags. CSS and JavaScript can be used to style and add interactivity to HTML pages.

Uploaded by

Tusshar Gurav
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/ 15

HTML

INTRODUCTION
* HTML = Hyper Text Markup Language
* HTML is the language of the web. It is used to create websites

we use HTML tags to define look & feel of a websites


with understanding of these tags and how to put them together, we can create beautiful website
easily
HTML is used for defining layout of a page A barebone page structure
CSS is used to add styling to that barebone page create using HTML
JavaScript is used to program logic for the page layout

we can start building a website by creating a file named index.html


index.html is a special filename which is presented when the website root address is typed.

A Basic HTML Page

<!Doctype html> ---> specifis this is HTML5 doc


<html> ---> root of an HTML page
<head> ---> contain page metadata
<title> Tushar websites </title> ---> contain title
</head>
</body> ---> The main body of page (read by browser )
<h1>This is Heading</h1> ---> heading tag
<p> My paragraph</p> ---> paragraph tag
</body> ---> closing body tag
</html> ---> closing html tag

Head & body tags are children of HTML tag HTML IS PARENT OF Head & body tags

* Most of the Html element have opening and closing tags with content in between opening &
closing tags
* Some HTML tags have no content These are called Empty elements eg <br>
* we can either use HTML or htm extension you can use inspect element or view page source
option from chrome to look into a websites HTML code.

HTML element = start tag + content + End tag

comments in HTML comments in HTML are used to make text which should not be passed they
can help document sourse code

<!-- HTML comment -->

Case sensitivity

HTML is not a case sensitive language <H1> and <h1> tags are the same
we can add elements inside the body tags to define the page layout
HTML element
Everything from starting to the ending tag

<body> opening tag


content
</body> closing tag

HTML attributes
used to add more information corresponding to an HTML tag
ex --> <a href = “https://example.com/”>website</a> --> href is attribute here

The Heading tag


Heading tag is used to mark heading in HTML from h1 to h6, we have tags for the most importent
to the least important heading

<h1>Most important heading </h1> Note :- we should not use HTML heading to make test
<h2 another heading h2 </h2> thick or bold
<h3>another heading h3</h3>
<h4>another heading h4</h4>
<h5> another heading h5 </h5>
<h6> another heading h6 </h6>

The paragraph Tags


Paragraph tags are used to add paragraphs to an HTML page

<p> This is a paragraph </p>


The Anchor Tag
the Anchor tag is used to ass links to an existing content inside an HTML Page

<a href = “https://google.com”>click me </a>

The image tag


img tag is used to add images in an HTML page

<img src = “image.png”> url of an images

Bold, Italic and underline tags


we can use bold, italic and underline tags to highlight the text as follows

<b> This is bold </b>


<i>This is italic </i>
<u>This is underline</u>

br tag
The br tag is used to create line breaks in an HTML document

* big & Small tags

we can make the text a bit larger and bit smaller using big and small tags respectively

<big> Big Text </big>


</small>small Text</small>

hr tag
<hr> tag in HTML is used to creating a horizental ruler often used to spearate the content

subscript & super script

we can add subscript & superscript in HTML as follows

<sub> this </sub> is subscript


<sup> this </sup> is superscript

pre tag

HTML always ignors extra spaces and new lines In order to display a piece of text as is, we can use
pre tag

<pre>
this is written
using pre Rendered as it is
tag
</pre>

when we use the right tag in right place it result in a better page layout , better indexing by search
engines and better user exprience we use the following tag to get the job

<header> contains nav tag


<main> website layout
<footer>

Inside the main tag we inspect the following tags

<main> ---> The main opening tag


<section> ---> a page section
<aritical> ---> a self contained content
<aside> ---> contain aside from the content (eg ads ext)
</main> ---> the main closing tag

creating a page like this is not necessary but it creates a readable & structure layout. Also they are
useful for SEO

* links Attributes
<a href = “/contact”> contact us </a> contact page
we can put any content inside an anchor tag images heading etc are all allowed

If the page is inside to directory we need to make sure that we link to the correct page some applies
to img tag as well
we can add links to images link this

<a href = “/about”><img src = “a.png” width=”120”> </a>


The Div tag
div tag is aften used as a contains for other elements div is a block element
----> always takes full width

The span tag


span is an inline container
---> Takes as much width as need

lists are used to display content which represents a list


unordered list used to list unorder items

<ul>
<li>Home</li>
<li>About</li>
</ul>
ordered list :- used to list ordered items

<ol>
<li>phone</li>
<li>Pc</li>
<li>laptop</li>
</ol>
tables
The tables tag is used to define tables in HTML. It is used to format and display data

tr tag : - used to display table row

tr tag : - used to display table data

th tag :- used to place of table data for displaying table heading

we can define as many tables row as we want to add a caption to the table we use <caption>
tag inside table

thead tag used to wrap table head (cation & tr with th + body tag) :- used to wrap the table body

colspan attribute

this attribute is used to create cells spanning multiple columns

<th colspan = “3”>Tushar</th>

HTML form
An HTML forms is used to collect input from the user form tag is used the same

<form>
<!-- Element of the form -->
</form>

There are different form elements of different kinds of user input

input Elements :- can be of type text, checkbox radio button and submit we can also have a file type
Textarea elements :- defines a multi line text input col and row attributes can be used to size the text
area

Select elements :- defines a drop down list

<marquee direction =”right”>This is a moving text </marquee>

HTML Praticals

Paragraph

<p>This is paragraph</p>

* Commant

* Heading

==>

* Line (<hr>) & break line (<br>)


* pre formate

*Bold tag
<b>Bold</b>

Strong tag
<strong>This is string tag </strong>
To add string value for (SEO) = Search Engine Optimation.

* Itlic tag

<i> itlic</i>

*Small tag
<small>This is small Tag </small>

* Mark tag
<mark>This is mark tag </mark>

* Delete Tag
<del>Tag </del>

* Insterted tag
<ins>tag </ins>

*Sub tag
X<sub>2</sub>

Super tag
X <sup>2<sup>
Quation tag

<q>This is quation</q>

Blockquote

<blockquote> This is blockquote </blockquote>

Abbration tag

<abbr title =”Wold Health Organization”>WHO</abbr>

Address Tag

<address>Kolhapur , India<address>

cite tag
<cite>The Book </cite> is written by ..

Ancar tag
open link in same tab
<a href =”https://google.com/”>read more </a>

Open link in another tab

<a href =”https://google.com/” target = “_blank” title = “google.com”>read more </a>

ID attrubuite
Email Link
contact us on <a href “mailto:[email protected]”>[email protected]</a>

Contact us on <a href = “mailto: [email protected]? Subject = Hello how are you”
>[email protected]</a>

Image tag

Marquee tag

Ordered list

Ordered list by starting number

Unorder list
Description list

Table

Nested Tables

Div and span


two type of structure Elements
<div> --> blck element
<span> --> inline element

Ifream
<iframe src ="bing.com" hight = "500" width="1000"></iframe>
HTML Audio

<audio controls source src = "Om_Jai_Jagdish_Hare.mp3" type="audio/mpeg"></audio>

Video Files

<video controls src="VID20210209184332.mp4" type="video/mp4"></video>

if controls change to autoplay video play auto just refresh page

pdf = Embed

<embed src = "HTML.pdf" type="application/pdf" width="1000" hidden="1000">

Embed youtube video

go to youtube.com share video select embed option copy sentex and pest it to your code

* Embed Google Map


go to google.map.com – official web search location share location embed map option set size and
copy link and pest it to your code

*HTML entities
embed <&> sign in
name &it;div&gt;
&#60;div&#62; number

search in google for HTML entities

HTML symbols

go to google for HTML symbols


&copy;

HTML Emojis
&#128516
google and search HTML emojies and use it

Semantic elements

<header></header>
<header> <section>
<article>
<nav> <figure>
<img>
<figcaption></figcation>
<articale> <figure>
</article>
<sidebar> </section>
<footer></footer>
<section>

<footer>

Image map

add one or more that one links in one image is know as image map

go to google.com and search image map generator and create links

HTML Forms
Form File Upload
Input Attributes

Select list
Radio button

HTML checkbox

Lable Fieldset and Legends


Favicon
go to falcon generator in web and create Image create code copy past in your code

responsive
<meta name = “viewport” content=”width=device-width, initial-scale=1.0”>

You might also like