1 of 37

HTML - Element

Web Technology

Slide Credit : Subin Sahayam, Assistant Professor,

Department of Computer Science and Engineering

Shiv Nadar University

2 of 37

HTML Files? (Create)

HTML Editing

3 of 37

HTML Files – Text Editor

HTML Editing

4 of 37

HTML Files – Text Editor
File extension?

HTML Editing

5 of 37

HTML Files – Text Editor
File extension - .html or .htm

HTML Editing

6 of 37

HTML Files – Text Editor
File extension - .html or .htm
Best Practice - Filename to be based on functionality

HTML Editing

7 of 37

HTML Files – Text Editor
File extension - .html or .htm
Best Practice - Filename to be based on functionality

Eg: Main web page (Homepage) - index.html

HTML Editing

8 of 37

HTML Files – Text Editor
File extension - .html or .htm
Best Practice - Filename to be based on functionality

Eg: Main web page (Homepage) - index.html

HTML errors – Not fatal – They do not crash the program

HTML Editing

9 of 37

HTML Elements

10 of 37

Syntax for HTML5

<!DOCTYPE html>

Indicates browser – HTML file
Syntax may vary on version
Empty element

No content
No ending tag

HTML !DOCTYPE

11 of 37

Syntax for HTML5

<!DOCTYPE html>

Indicates browser – HTML file
Syntax may vary on version
Empty element

No content
No ending tag

Open a text editor and try it out

HTML !DOCTYPE

12 of 37

Syntax

<html>

content

</html>

<html> - root element
Contains all other elements – except !DOCTYPE

HTML <html>

13 of 37

Syntax

<html>

content

</html>

<html> - root element
Contains all other elements – except !DOCTYPE
Try it out and check

HTML <html>

14 of 37

Syntax

<html>

content

</html>

<html> - root element
Contains all other elements – except !DOCTYPE
Try it out and check

Nothing happened like a Magikarp using splash

HTML <html>

15 of 37

<head> element – between <html> and <body>
<head> - metadata
Information generally not rendered
Metadata tags - <title>, <style>, <meta>, <link>, <script>, <base>
Best Practice – When opening a tag, have a "tab space" for each line until you close the tag. It helps in the readability of your HTML document.

HTML <head>

16 of 37

<title> - Set the title of the webpage.
Generally used in every HTML document.
Must be placed inside <head>.
One <title> per webpage.

HTML <title>

17 of 37

<title> - Set the title of the webpage.
Generally used in every HTML document.
Must be placed inside <head>.
One <title> per webpage.
Keep a title of your choice – Preferably a Wikipedia page

HTML <title>

18 of 37

<body> - document content
Text, Paragraph, Formatting, Image, Hyperlinks, Tables, Lists, Frames

Comment syntax -
Best Practice - Give a comment describing a web page as a first line of your HTML document.

<p> - Paragraph
Browser renders a new line before and after <p> element

HTML <body>, <p>, comments

19 of 37

<body> - document content
Text, Paragraph, Formatting, Image, Hyperlinks, Tables, Lists, Frames

Comment syntax -
Best Practice - Give a comment describing a web page as a first line of your HTML document.

<p> - Paragraph
Browser renders a new line before and after <p> element
Try it out – Add content from the wiki page – I like Pokemon Wiki

HTML <body>, <p>, comments

20 of 37

<strong> or <b> - Bold text
<u> - Underline
<em> or <i> - Emphasized text (Italic)
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text represented as strikethrough
<ins> - Inserted text represented as underline
<sub> - Subscript text
<sup> - Superscript text

<i> and <b> are deprecated

HTML Text Formatting

21 of 37

<strong> or <b> - Bold text
<u> - Underline
<em> or <i> - Emphasized text (Italic)
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text represented as strikethrough
<ins> - Inserted text represented as underline
<sub> - Subscript text
<sup> - Superscript text

<i> and <b> are deprecated
Use em all!!!!

HTML Text Formatting

22 of 37

Default text formatting
<h1> to <h6> elements
h1 – Largest
h6 - Smallest
Browser renders and decides the size
Can vary significantly between browsers

HTML Headers

23 of 37

Default text formatting
<h1> to <h6> elements
h1 – Largest
h6 - Smallest
Browser renders and decides the size
Can vary significantly between browsers
Try various heading sizes

HTML Headers

24 of 37

<a> element (Anchor)
Mandatory attribute - href
Syntax:

<a href=“address”>content</a>

All links – underlined
An unvisited link – blue
A visited link – purple
An active link - red

HTML Hyperlinks

25 of 37

<a> element (Anchor)
Mandatory attribute - href
Syntax:

<a href=“address”>content</a>

All links – underlined
An unvisited link – blue
A visited link – purple
An active link – red
Hyperlink to another sub-wiki page

HTML Hyperlinks

26 of 37

Linking to a location within a webpage
Set location to go

Syntax: <a name=“value”></a>

Refer using href as usual.

Syntax: <a href=“#value”>content</a>

HTML Internal Linking

27 of 37

Linking to a location within a webpage
Set location to go

Syntax: <a name=“value”></a>

Refer using href as usual.

Syntax: <a href=“#value”>content</a>

You know what to do at this point.

HTML Internal Linking

28 of 37

<img> element
Mandatory attribute - src

HTML Images, Special Character, <hr>, <br>

Special characters like math characters

Added in code form
Syntax: &code;

<br> element
Line break.

<hr> element
Adds a horizontal line/rule
Both <hr> and <br> - No closing tag

29 of 37

<img> element
Mandatory attribute - src

HTML Images, Special Character, <hr>, <br>

Special characters like math characters

Added in code form
Syntax: &code;

<br> element
Line break.

<hr> element
Adds a horizontal line/rule
Both <hr> and <br> - No closing tag

30 of 37

HTML Lists

List - <li> element – Closing tag optional
Unordered List <ul> element - Bullets
Ordered List - <ol> element – Numbers
Element Level
<ul> element

<li> element

<ol> element

<li> element

Each <ul> or <ol> elements consist of ‘n’ number of <li> elements
<ul> and <ol> elements can be nested
Newline after every closed list

31 of 37

HTML Lists

List - <li> element – Closing tag optional
Unordered List <ul> element - Bullets
Ordered List - <ol> element – Numbers
Element Level
<ul> element

<li> element

<ol> element

<li> element

Each <ul> or <ol> elements consist of ‘n’ number of <li> elements
<ul> and <ol> elements can be nested
Newline after every closed list
Your Top 5 Pokemon or maybe just the first five Pokemon if you are a newbie

32 of 37

HTML Tables

<table> - table element

<caption> - caption element
<tr> - row element

<td> - data element

<colgroup> - column group element – styling group of columns

<col> - column to be styled

<thead> - table header element

<th> - table head element

<tbody> - table body element

<td> - data element

<tfoot> - table foot element

<td> - data element

33 of 37

HTML Tables

<table> - table element

<caption> - caption element
<tr> - row element

<td> - data element

<colgroup> - column group element – styling group of columns

<col> - column to be styled

<thead> - table header element

<th> - table head element

<tbody> - table body element

<td> - data element

<tfoot> - table foot element

<td> - data element

3 Pokemon Movelist, Stengths, and Weakness

34 of 37

Best Practices

Use HTML tags with the same case (preferably lower case).
Filename to be based on functionality.
When opening a tag, have a "tab space" for each line until you close the tag. It helps in the readability of your HTML document.
Give a comment describing a web page as a first line of your HTML document.

35 of 37

HTML Editing
List of HTML Element
!DOCTYPE HTML
<html>, <head>, <title>, <body>, <p>, Comment Elements
Text Formatting
HTML Headers, and Hyperlinks
HTML Images, Special Character, <hr>, <br>
HTML Lists, Tables
Best practices

Summary

36 of 37

References

Paul J Deitel, Harvey M Deitel, and Abbey Deitel, "Internet and the world wide web: How to program," Pearson, Fifth Edition, 2012.

1 of 37

2 of 37

3 of 37

4 of 37

5 of 37

6 of 37

7 of 37

8 of 37

9 of 37

10 of 37

11 of 37

12 of 37

13 of 37

14 of 37

15 of 37

16 of 37

17 of 37

18 of 37

19 of 37

20 of 37

21 of 37

22 of 37

23 of 37

24 of 37

25 of 37

26 of 37

27 of 37

28 of 37

29 of 37

30 of 37

31 of 37

32 of 37

33 of 37

34 of 37

35 of 37

36 of 37

37 of 37