Scribd
Upload
5 views33 pages

M2 Part1

Uploaded by

Aman
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
5 views33 pages

M2 Part1

Uploaded by

Aman
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/ 33

HTML5

Introduction
2

HTML?

HTML – Hyper Text Markup


Language
3

Introduction
 HTML - Developed with the
intention of defining the layout
of files such as headings,
paragraphs, lists, and so on

 To encourage the exchange of


scientific facts between
researchers
4

Why we need to
use?
 To format net pages

 MUST for students and working


professionals to operate in the
Web Development Domain

 Need to understand HTML to


deliver the first rate results.
5

Benefits
 Can create a Web site only
with html
 Web Understanding
 Interoperability
 Search ability
 High performance
 Responsive
6

Basics in HTML5
 Structure based language

 Head and body tags


- Can include title and links of CSS

 Comments and doctype

 Tags, Elements and Attributes


7

Paired Tags
 A tag is said to be a paired tag if the
text is placed between a tag and its
companion tag.
 In paired tags, the first tag is
referred to as Opening Tag and the
second tag is referred to as Closing
Tag.
 Example:
<p>Paragraph</p>
8

Unpaired Tags
 An unpaired tag does not have
a companion tag. Unpaired tags
are also known as Singular
tags or Stand-Alone Tags.
 Example:
 <br>
 <img src='test.png' >
Structure of 9

HTML document
 Basic structure:
10

Example
<!DOCTYPE html>
<html>
<head>
<title>First Program</title>
</head>
<body>
<h1>Hello World! </h1>
</body>
</html>

Output: Hello World!


11

Attributes
 Tags have their own attributes
Attribute Value
 The below table shows BODY
background URL tag attributes
bgcolor color
text color Example:
link color
vlink color <body bgcolor = “black”>
alink color
Obsolete in HTML5, use CSS instead
12

HR tag

Obsolete in HTML5, use CSS


13

Meta tag
 Written in head tag
 Mainly used for SEO
Example:
 <meta charset = “utf-8”>
 <meta name = “description” content
= “VIT university, Chennai”>
14

Heading tags (h1..h6)


Example : <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heading Levels</title>
</head>
<body>
<h1>Hello World!</h1>
<h2>Hello World!</h2>
<h3>Hello World!</h3>
<h4>Hello World!</h4>
<h5>Hello World!</h5>
<h6>Hello World!</h6>
</body>
</html>

Output: + HO
OR: RUOG

Hello World!
Hello World!

Hello World!
Hello World!

Hello World!
15

Text Formatting
tags
 <b> - bold
 <i> - italic
 <u> - underline
 <small> - to make a text in small
 <big> - to make a text in big
 <sub> - subscript
 <sup> - superscript
 <mark> - defines marked or highlighted text
 <q>…</q> - quotation
 <address>
16

<!DOCTYPE html>
Text Formatting - Example
<html>
<head>
<meta charset="utf-8">
<title>Text Formatting Example</title>
</head>
<body>
<b>Text</b>
<i>Text</i>
<u>Text</u>
<small>Text</small>
<big>Text</big>
<sub>Text</sub>
<sup>Text</sup>
</body>
</html>

Output : Text Text Text Text Text Text


Text
17

Font tag

Obsolete in HTML5, use CSS instead


Inserting Symbols 18

Result Description Entity Name


₹ rupees &#8377;
¢ cent &cent;
£ pound &pound;
¥ yen &yen
€ euro &euro;
§ section &sect;
© copyright &copy;

® registered
trademark
&reg;

space non-breaking space &nbsp;

18
Break
19

 <br> Inserts a single line


break

 <wbr> (Word Break


Opportunity) defines a possible
line-break
20

acronym
 Can I get this <acronym title="As
Soon As Possible">ASAP</acronym>?
21

Text Containers
<p>

<pre> defines preformatted text


22

Div tag
<html>
<head></head>
<body>
<div >
<a href="www.chennai.vit.ac.in"
title="VIT Chennai"> VIT Chennai</a>
<a href="www.vit.ac.in"
title="VIT Vellore">VIT Vellore</a>
</div>
</body>
</html>
23

Anchor
<a>
<a href = “indiancoders.com”>Link Text</a>
<a href = “home.html”>Home</a>

Link to a paragraph
<p name=“pname”>….</p>
<a href="#pname">A simple link</a>

mailto
<a href="mailto:[email protected]">
24

Image
<img>
<img src="D:\FALL 20-21\CSE3002
IWP\userprofile.png" alt="profile"
align="center">

Example: Ex4_CommonlyUsedTags.html
25

Marquee
 <marquee width=“70%”
direction=“up” height=“50px“ loop=5
bgcolor=“blue”> Marquee Text
Content </marquee>
 Direction can be: left, right, up or
down

Obsolete in HTML5, use CSS instead


26

Layout
27

Semantic Tags
<article> - article in the element

<header> - header for the section or article

<footer> - footer for the section or article

<section> - section in the document

<aside> - content aside from the page content


https://www.w3schools.com/tags/tag_article.asp
28

Example:
<nav>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
29

Other Semantic Tags


<progress> - progress of a task
Progress in life goals (70%)
<progress min=0 max=100 value=70></progress>

<meter> - scalar measurement with in a known range


Life goals achieved (50%)
<meter min=0 max=100 value=50></meter>
30

Semantic Tags
https://www.w3schools.com/tags/tag_dialog.asp
<dialog> defines a dialog box or window

<figure> - self contained content like diagram


<figcaption> defines the caption for a <figure>
https://www.w3schools.com/tags/tag_figure.asp
31

Semantic Tags
<details> defines additional details that people can view or hide (like a tooltip)
<summary> defines a visible heading for a <details> element
<details>
<summary>Summary:</summary>
<p>XYZ...</p>
</details>
32

Semantic Tags
<menu> defines a list/menu of commands.
<menuitem> defines a command/menu item that the user can select from a
popup menu. Work only in firefox.
https://www.w3schools.com/tags/tag_menu.asp

<bdi> (Bi-Directional Isolation) defines a section of text that might be


formatted in a different direction from other text (for instance, a quote in
Hebrew or Arabic in an otherwise-English article)

<time> defines a date/time


33

Thank you

You might also like