HTML

Front-end Development
HTML CSS JS
Structure/Layout Style Logic

HTML
Hyper Text Markup Language
HTML is the code that is used to structure a web page and its
content.
The components used to design the structure of websites are called

HTML tags.
First HTML File
index.html
It is the default name for a website's homepage

HTML Tag
A container for some content or other HTML tags
Opening Tag Closing Tag
<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 the parent of the head & and body tag
Most of HTML elements have opening & and 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 homeland

Comments in HTML
This is part of code that should not be parsed.


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="https://google.com"> Google </a>

Image Tag
Used to add images to your page
<img src="/image.png" alt="Random Image“/>

Br Tag
Used to add next line (line breaks) to your page
<br>
Bold, Italic & Underline Tags
Used to highlight text on your page
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>

Big & Small Tags
Used to display big and 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 it 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="https://google.com" target="blank"> 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
Div is a container used for other HTML elements
Block Element (takes full width)

List : Div Tags
<address> <fieldset> <nav>
<article> <figcaption> <noscript>
<aside> <figure> <ol>
<blockquote> <footer> <p>
<canvas> <form> <pre>
<dd> <h1>-<h6> <section>
<div> <header> <table>
<dl> <hr> <tfoot>
<dt> <li> <ul>
<main> <video>
Span Tag
Span is also a container used for other HTML elements
Inline Element (takes width as per size)

List : Span Tags
<a> <code> <object> <span>

<abbr> <dfn> <tt> <strong>
<acronym> <em> <var> <sub>
<b> <i> <output> <sup>
<bdo> <img> <q> <textarea>
<big> <input> <samp> <time>
<br> <kbd> <script>
<button> <label> <select>
<cite> <map> <small>
List in HTML
Lists are used to represent real life list data.real-life
unordered ordered
<ul> <ol>
<li> Apple </li> <li> Apple </li>
<li> Mango </li> <li> Mango </li>
</ul> </ol>
Tables in HTML
Tables are used to represent real life table data.
<tr> used to display table row

<td> used to display table data
<th> used to display table header
Tables in HTML
<table>
<tr> Name Roll No
<th> Name </t h > 1639
Pankaj
<th> Roll No </t h >
</tr>
<tr>
<td> Pankaj </t h >
<th> 1639 </t h >
</tr>
</table>
Caption in Tables
<caption> Student Data </caption>
Student Data
Name Roll No
Pankaj 1639
thead & tbody in Tables
<thead> to wrap table head

<tbody> to wrap table body
Colspan Attribute
colspan="n"
used to create cells that span over multiple columns
Data
Pankaj 1639
Deepesh 1890
Form in HTML
Forms are used to collect data from the user
Eg- sign up/login/help requests/contact me
<form>
form content
</form>
Action in Form
Action attribute is used to define what action needs to be

performed when a form is submitted
<form action="/action.php" >

Form Element : Input
<input type="text" placeholder="Enter Name">

Label
<label for="id1">
<input type="radio" value="class X" name="class" id="id1">
</label>
<label for="id2">
<input type="radio" value="class X" name="class" id="id2">
</label>
Class & Id
<div id="id1" class="group1">
</div>
<div id="id2"> class="group1">
</div>
Checkbox
<label for="id1">
<input type="checkbox" value="class X" name="class"

id="id1"
>
</label>
<label for="id2">
<input type="checkbox" value="class X" name="class"

id="id2"
>
Textarea
<textarea name="feedback" id="feedback" placeholder="Please add

Feedback">
</textarea>
Select
<select name="city" id="city">
<option value="Delhi"> Delhi </option>
<option value="Mumbai"> Delhi </option>
<option value="Banglore"> Delhi </option>
</select>
iframe Tag
website inside website
<iframe src="link"> Link </option>

Video Tag
<video src="myVid.mp4"> My Video </video>
Attributes
• controls
• height
• width
• loop
• autoplay

HTML

Uploaded by

Copyright:

Available Formats

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

Front-end Development

Structure/Layout Style Logic

Hyper Text Markup Language

The components used to design the structure of websites are called

It is the default name for a website's homepage

Opening Tag Closing Tag

<p> This is a paragraph </p>

<html> root of an html document

<head> container for metadata

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

We can use inspect element/view page source to edit homeland

This is part of code that should not be parsed.

Used to add paragraphs in HTML

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

Used to add links to your page

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

Used to add images to your page

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

Used to add next line (line breaks) to your page

Used to highlight text on your page

<b> Bold </b>

<i> Italic </i>

<u> Underline </u>

Used to display big and small text on your page

<big> Big </big>

<small> Small </small>

Used to display a horizontal ruler, used to separate content

Used to display a horizontal ruler, used to separate content

<sub> subscript </sub>

Used to display text as it is (without ignoring spaces & next line)

Using Semantic tags for layout

Section Tag For a section on your page

Article Tag For an article on your page

Aside Tag For content aside main content(ads)

for new tab

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

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

Div is a container used for other HTML elements

Block Element (takes full width)

Span is also a container used for other HTML elements

Inline Element (takes width as per size)

<a> <code> <object> <span>

Tables are used to represent real life table data.

<tr> used to display table row

<caption> Student Data </caption>

<thead> to wrap table head

Forms are used to collect data from the user

Eg- sign up/login/help requests/contact me

Action attribute is used to define what action needs to be

<form action="/action.php" >

<input type="text" placeholder="Enter Name">

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

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

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

<input type="checkbox" value="class X" name="class"

<input type="checkbox" value="class X" name="class"

<textarea name="feedback" id="feedback" placeholder="Please add

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

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