Scribd
Upload
18 views43 pages

HTML PPT

The document provides an overview of HTML, including its structure, basic tags, and attributes used to create web pages. It covers essential elements such as headings, paragraphs, links, images, lists, tables, and forms, along with examples of how to implement them. Additionally, it includes tasks for practical application of the concepts learned, such as creating a registration form and a webpage showcasing tourist destinations.

Uploaded by

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

HTML PPT

The document provides an overview of HTML, including its structure, basic tags, and attributes used to create web pages. It covers essential elements such as headings, paragraphs, links, images, lists, tables, and forms, along with examples of how to implement them. Additionally, it includes tasks for practical application of the concepts learned, such as creating a registration form and a webpage showcasing tourist destinations.

Uploaded by

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

HTML CSS JS

Structure/ Styl Logi


layout e c
HTML

Hyper Text Markup Language

HTML is the code that is used


to structure a web page and its
content.

The component used to design the


structure of websites are called
HTML tags.
FIRST HTML
FILE
index.html

I t is the default name for a website's


homepage
A container for some content or other
HTML tags

<p> This is a
paragraph </p>
Conten
t

HTML TAG
Eleme
nt
BASIC HTML PAGE
<!DOCTYPE tells the browser you are using
HTML5
html> root of an html
document
<html> container for
metadata
<head >
<title>My First page
title
Page</title>
</ head
<bod y>> contains all data rendered by the
browser
<p>hello paragraph
world</p> 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
h (most
important)

1
h
2
h3 (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">

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>


H2
O
<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="https://google.com" target="_main">


Google </a>

for new tab

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


src="link"> </a>

clickable pic
DIV TAG

Div is a container used for other HTML


elements

Block Element (takes full width)


LIST : DIV
TAGS
<address> <fieldset <nav>
> <noscrip
<article>
<figcaptio t>
<aside> n> <ol>
<blockquot <figure>
e> <p>
<footer> <pre>
<canvas>
<form> <section
<dd>
<h1>- >
<div> <h6> <table>
<dl> <header> <tfoot>
<dt> <hr> <ul>
SPAN TAG

Span is also a container used for other HTML


elements

Inline Element (takes width as per size)


<CODE> <output>
List : Span Tags <dfn> <q>
<a> <em> <samp>
<abbr> < i> <script>
<acronym> <img> <select>
<b> <input> <small>
<bdo> <kbd> <span>
<big> <label> <strong>
<br> <map> <sub>
<button> <object> <sup>
<cite> <tt> <textarea>
<var> <time>
LIST IN HTML
Lists are used to represent real life
list data.

unorder ordere
ed d
<ul <ol
> >
<li> Apple <li> Apple
</ li > </ li >
<li> Mango <li> Mango
</ li > </ li >
</ </
ul> ol>
TABLES IN HTML
Tables are used to represent real life
table
<tr daus
taed
. to display table
> row
used to display table
<td data
<th used to display table
>
> header
Tables in NAME Roll No
HTML
<table>
John 1664
<tr>
<th> Name
</t h >
<th> Roll No
</t h >
</tr>
<tr>
<td> Shradha
</t h >
</
table> <t h> 1664
</t h >
CAPTION IN TABLES

<caption> Student Data


</caption>

Student Data
Name Roll
John 166No
4
THEAD & TBODY IN TABLES

<thead> to wrap table


head
<tbody> to wrap table
body
COLSPAN ATTRIBUTE
colspan="n"
used to create cells which spans over multiple
columns

Data
John 166
4
Ama 189
n 0
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.html" >


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"


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>
VIDEO TAG
<video src="myVid.mp4">My Video </video>
A ttributes
 controls
 height
- width
 loop
 autoplay
TASK-1
Create a simple Student Registration Form using only
HTML. The form should include fields for name,
email, password, gender selection (radio button),
course selection (checkbox), and a submit button.

Task-2
Create a simple Tourist Places Webpage that showcases
three famous destinations with their images and
descriptions. Clicking on the images should redirect the
user to a webpage for more details.
TASK-3
Create a Favorite Movie List page that
displays a table of movies with their
posters, names, and release years.

You might also like