Scribd
Upload
37 views29 pages

Chapter 3

Uploaded by

sandilya23panda
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
37 views29 pages

Chapter 3

Uploaded by

sandilya23panda
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/ 29

Introduction to Hyper Text Markup Language 1

Chapter - 3

Introduction to Hyper Text Markup Language


Introduction of HTML

 HTML is the standard markup language for creating Web pages.

What is HTML?

 HTML stands for Hyper Text Markup Language.


 HTML is the standard markup language for creating Web pages.
 HTML describes the structure of a Web page.
 It is one of the primary front-end technologies used for front-end development.
 HTML is irreplaceable.
 HTML consists of a series of elements.
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.

A Simple HTML Document

 Shown below is a simple HTML example.

<!DOCTYPE html>
<html>
<head>
<title>My First HTML Example</title>
</head>
<body>
<h1>Let us Learn HTML History</h1>
<p>HTML is the most popular language for webpages that was created in
Early 1990s</p>
</body>
</html>

 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab).

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 2

 The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph.

Tags

 HTML contains a certain feature known as tags.


 The format of a tag is
o <tagname> any content </tagname>
 Mostly, tags occur in a pair.
 The opening tag is also known as start tag while the closing tag is known as ending tag.
 Before the
 tagname of the closing tag, there is a forward slash, i.e., /.
 An internet browser (such as Chrome, Firefox, and Internet Explorer) processes tags and
calculates the content which should be displayed to the users.

What is an HTML Element?

 An HTML element is defined by a start tag, some content, and an end tag:
o <tagname> Content goes here... </tagname>

 The HTML element is everything from the start tag to the end tag:
o <h1>My First Heading</h1>
o <p>My first paragraph.</p>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 3

 Some HTML elements have no content (like the <br> element). These elements are
called empty elements. Empty elements do not have an end tag!
o <p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

 Shown below is a simple HTML example.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p>To force<br> line breaks<br> in a text,<br> use the br<br>
element.</p>
</body>
</html>

HTML Headings

 Headings in HTML can be represented by six tags, from h1 to h6.


 The size of a HTML heading is pre-defined.
 The h1 defines the most important heading and h6 defines the least important heading.
 The headings size became smaller as the heading number increased.

<!DOCTYPE html>
<html>
<body>
<h1>This is our first heading</h1>
<h2>This is our second heading</h2>
<h3>This is our third heading</h3>
<h4>This is our fourth heading</h4>
<h5>This is our fifth heading</h5>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 4

<h6>This is our sixth heading</h6>


</body>
</html>

Bigger Headings

 Each HTML heading has a default size. However, you can specify the size for any
heading with the style attribute, using the CSS font-size property.

<!DOCTYPE html>
<html>
<body>
<h1 style=“font-size: 80px;”>Heading 1</h1>
<p>HTML headings usually have a pre-defined size. However, by using
CSS these headings can be changed.</p>
</body>
</html>

HTML Paragraphs

 The HTML <p> element defines a paragraph.


 A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.
 How much spacing is rendered is based on the browsers.

<!DOCTYPE html>
<html>
<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>
</body>
</html>

HTML <hr> Tag

 The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
 The <hr> element is most often displayed as a horizontal rule that is used to separate
content (or define a change) in an HTML page.
 For example,

<!DOCTYPE html>
<html>
<body>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 5

<h1>The Main Languages of the Web</h1>

<p>HTML is the standard markup language for creating Web pages.


HTML describes the structure of a Web page, and consists of a series
of elements. HTML elements tell the browser how to display the
content.</p>

<hr>

<p>CSS is a language that describes how HTML elements are to be


displayed on screen, paper, or in other media. CSS saves a lot of
work, because it can control the layout of multiple web pages all at
once.</p>

<hr>

<p>JavaScript is the programming language of HTML and the Web.


JavaScript can change HTML content and attribute values. JavaScript
can change CSS. JavaScript can hide and show HTML elements, and
more.</p>
</body>
</html>

HTML Display

 With HTML, you cannot change the display by adding extra spaces or extra lines in your
HTML code.
 The browser will automatically remove any extra spaces and lines when the page is
displayed.

<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 6

window. If you resize the browser window, the number of lines in this
paragraph will change.
</p>

</body>
</html>

HTML Line Breaks

 The HTML <br> element defines a line break.


 The <br> is used for line break (content/text start with a new line) without starting a new
paragraph.
 This element is categorized as a “void element” which means it does not contain any
content. Hence,<br> does not require a closing tag.

 For example, <br> is good to use in addresses, songs, etc.
 Let us see the following example,

<!DOCTYPE html>
<html>
<body>
<p>
We are going to use line breaks.<br>This is the first line after
the break. <br>This is the second line after the break.
</p>
</body>
</html>

HTML Head

 The HTML <head> element is used as a container for metadata (data about data).
 It is used between <html> tag and <body> tag.
 The head of an HTML document is a part whose content is not displayed in the browser
on page loading.
 An HTML head can contain lots of metadata information or can have very less or no
information, it depends on our requirement. But head part has a crucial role an HTML
document while creating a website.
 Metadata defines the document title, character set, styles, links, scripts, and other meta
information.
 Following is a list of tags used in metadata:
o <title>
o <style>
o <meta>
o <link>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 7

o <script>
o <base>

HTML <title> Element

 The HTML <title> element is used to define the title of the document.
 The <title> element must be placed between <head> element, and one document can only
have one title element.
 It defines a title in the browser tab.
 It provides a title for the page when it is added to favorites.
 It displays a title for the page in search engine results.

<!DOCTYPE html>
<html>
<head>
<title>This Page Title</title>
</head>
<body>
<p>The body's content is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in
favorites and in search engine results.</p>
</body>
</html>

HTML <style> Element

 The HTML <style> element is used to style the HTML page.


 The <style> element can have CSS properties for that HTML page only.

<!DOCTYPE html>
<html>
<head>
<title>This is Page Title</title>
<style>
body {background-color: pink;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 8

HTML <link> Element

 The HTML <link> element is used to link an external style sheet to your webpage.
 The <link> element contains main two attributes which are "rel" and "href".
 The "rel" attribute indicates that it is a stylesheet, and "href" gives the path to that
external file.

<!DOCTYPE html>
<html>
<head>
<title>This is title</title>
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<h2>Web-page with external CSS</h2>
<p>This is looking a cool page</p>
</body>
</html>

HTML <meta> Element

 The HTML <meta> element is used to specify the character set, page description,
keywords, authors and other metadata on the webpage.
 Metadata is mainly used by browsers, search engines, and other web services to rank your
webpage better.
 use of metadata:
o To define a character set: The charset attribute specifies the character encoding.
 Example: <meta charset="UTF-8">
 In this example we have set it to "UTF-8" which means it can handle to
display any language.
o To define a description of your webpage: If you give a meta description then it
will be useful for the relevant search to perform by search engines.
 Example: <meta name="description" content="Free Web tutorials">
o To define keywords for search engines: The keyword value is also used to
provide keywords for a search engine, but it may ignore by browser due to
spammers.
 Example:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
o To define author of the webpage: The author value specifies the name of the
person who wrote the page content, and it is useful to automatically extract author
information by some content management systems.
 Example: <meta name="author" content="Akon">
o To refresh document every 30 seconds: Meta refresh is used to provide
instructions to the browser to automatically refresh the page after the given time
interval. As in above example it will automatically refresh after 30 seconds.

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 9

 Example: <meta http-equiv="refresh" content="30">


o If you add an URL with content value, then it will redirect to that page after the
time limit will over.
 Example: <meta http-equiv="refresh" content="5;
url=https://www.soa.ac.in">

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords"
content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Akon">
<meta http-equiv="refresh" content="5;
url=https://www.soa.ac.in">
</head>
<body>
<h2>Meta element Example</h2>
<p style="color: green;"> Kindly wait for 5 seconds and after 5
seconds it will
automatically redirect to URL specified in meta tag</p>
</body>
</html>

HTML <script> element

 HTML <script> element is used to apply client side JavaScript for the same page or to
add an external JavaScript file to current page.

<!DOCTYPE html>
<html>
<head>
<script>
function fun() {
document.getElementById("p").style.color="green";
}
</script>
</head>
<body>
<h2>Script within Head element</h2>
<p id="p">This will change the color</p>
<button type="button" onclick="fun()">Click me</button>
</body>
</html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 10

Text Formatting Tags


 HTML provides web designers with the capability for infusing texts with different
meanings.
 Formatting elements were designed to display special types of text:
o <b> - Bold text
o <strong> - Important text
o <i> - Italic text
o <em> - Emphasized text
o <small> - Smaller text
o <mark> - Marked text
o <del> - Deleted text
o <ins> - Inserted text
o <sub> - Subscript text
o <sup> - Superscript text

Bold Text

 In HTML the text appear bold by using <b> element.


 It pay attention to the text by appearing the darker than the general text.
 It can be used in between any other tags.
 For example

<!DOCTYPE html>
<html>
<body>
<p>This is our normal HTML paragraph without any text formatting.</p>
<p>
<b>Here we used the bold element for making our paragraph appear as
bold.</b>
</p>
</body>
</html>

Strong

 The <strong> element has same effect as <b> element.


 The <strong> element is recommended over bold because it provides semantic
importance to HTML elements.
 It can be used in between any other tags.
 For example

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 11

<!DOCTYPE html>
<html>
<body>
<p>This is our normal HTML paragraph without any text formatting.</p>
<p>
<strong>Strong is recommended over the bold element.</strong>
</p>
</body>
</html>

Italic Text

 The <i> element transform the text orientation to slightly tilted or italic.
 The <i> element add italicization to the text but without any semantic importance.
 The <i> tag is often used to indicate a technical term, a phrase from another language, a
thought, a ship name, etc.
 It can be used in between any other tags.
 For example

<!DOCTYPE html>
<html>
<body>
<p>This is our normal HTML paragraph without any text formatting.</p>
<p>
<i>Here we used the italic element for making our paragraph
appear as italic.</i>
</p>
</body>
</html>

Emphasized Text

 The <em> element defines emphasized text.


 The content inside is typically displayed in italic.
 The <em> element adds emphasis and semantic importance.
 This element changes the text orientation and attracts attention.
 The <em> tag can be used on words or characters.
 It can be used in between any other tags.
 A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
 For example

<!DOCTYPE html>
<html>
<body>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 12

<p>This is our normal HTML paragraph without any text formatting.</p>


<p>
<em>Here we used the em element for making our paragraph appear
as emphasized with semantic importance.</em>
</p>
<p>
Here we used the em element for making our paragraph appear as
<em>E</em>mphasized with <em>Semantic importance.</em>
</p>
</body>
</html>

Small Text

 The <small> tag is used to decrease the size of a word or a piece of text.
 The <small> tag makes the text look smaller compared to other text.
 It can be used in between any other tags.
 For example

<!DOCTYPE html>
<html>
<body>
<p>
This is a normal text but this text is smaller. <br>
The reason behind this is the use of small tag.
</p>

<p>
This is a normal text <small>but this text is smaller.</small> <br>
The reason behind this is the use of small tag.
</p>
</body>
</html>

Marked Text

 The <mark> element is used to highlighting or marking a piece of text.


 The <mark> tag highlights a word or complete text.
 It can be used in between any other tags.
 For example

<!DOCTYPE html>
<html>
<body>
<h2>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 13

This portion of the heading is unmarked.


</h2>

<h2>
<mark> This portion of the heading is marked.</mark>
</h2>

<p>
Due to the use of <mark>mark element.</mark>
</p>
/body>
</html>

Inserted Text

 The <ins> element defines a text that has been inserted into a document.
 Browsers will usually underline inserted text:
 It can be used in between any other tags.
 For example

<!DOCTYPE html>
<html>
<body>
<p>The following “ins” element represents added text (inserted)</p>
<p>
In this paragraph this text is normal and the following text is
<ins>inserted text</ins>.
</p>
<h4>My favorite color is blue.</h4>
<h4>My favorite color is <del>blue</del> <ins>red</ins>.</h4>
</body>
</html>

Removed or Deleted Text

 The <del> element defines text that has been deleted from a document.
 Browsers will usually strike a line through deleted text.
 It can be used in between any other tags.
 For example

<!DOCTYPE html>
<html>
<body>
<p>The following use of del element is for showing deleted text.</p>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 14

<h2>
This portion of the heading is showing <del>marked.</del> deleted.
</h2>

<p>
First Apple Computer was created in
<del>1970</del>
1976 by Steve Wozniak.
</p>
</body>
</html>

Subscripted Text

 The <sub> element defines subscript text.


 Subscript text appears half a character below the normal line, and is sometimes rendered
in a smaller font.
 It can be used in between any other tags.
 Subscript text can be used for chemical formulas, like H2O.
 It can be used in between any other tags.
 For example

<!DOCTYPE html>
<html>
<body>
<h3>
Few Chemicals Name: H<sub>2</sub>O,
H<sub>2</sub>SO<sub>4</sub>
</h3>

<p>
This paragraph shows the example of <sub>Subscripted Text</sub>
and rest of the text is normal.
</p>
</body>
</html>

Superscripted Text

 The <sup> element defines superscript text.


 Superscript text appears half a character above the normal line, and is sometimes
rendered in a smaller font.
 Superscript text can be used for footnotes, like WWW[1], power function, like x2.
 It can be used in between any other tags.
 For example

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 15

<!DOCTYPE html>
<html>
<body>
<p>
This example shows the use of Superscripted tag which makes
<sup>the enclosed text as </sup> superscripted.
</p>

<h3>
Superscript text can be used for footnotes, like
WWW<sup>[1]</sup>, power function, like x<sup>2</sup>.
</h3>
</body>
</html>

Quotations

 The Quotation elements in HTML are used to insert quoted texts in a web page.
 The quoted text is the portion of texts different from the normal texts in the web page.
 Below are some of the most used quotation elements of HTML.

o <q> - Short Quotations


o <blockquote> - Quotation From Other Source
o <abbr> - Abbreviation
o <address> - Contact Information

Short Quotations

 The <q> element is used to set a set of text inside the quotation marks.
 The <q> tag defines a short quotation.
 Browsers normally insert quotation marks around the quotation.
 It can be used in between any other tags.
 For example

<!DOCTYPE html>
<html>
<body>
<p>This example shows the use of quotation tag.</p>

<p>The quick brown fox jumps over the lazy dog<br></p>

<p><q>The quick brown fox jumps over the lazy dog</q></p>

<p>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 16

<q>You must look through an opportunity and not at it.</q> - Mayur


Ramgir
</p>
</body>
</html>

Quotation from Other Sources

 The <blockquote> element is also used for quotations in a different way.


 Instead of putting the text in quotes, the <blockquote> element adds space before the start
of the sentence, with this tag.
 Browsers usually automatically apply indentation to the contents with the start of the new
paragraph.
 The <blockquote> element defines a section that is quoted from another source.
 The reference of the source is attached in the tag with “cite”.
 For example

<!DOCTYPE html>
<html>
<body>
<p>All web browsers process blockquote tag to add indentation on
the contents. See the following example of my quote from goodreads web site :
</p>
<blockquote

cite=“https://www.goodreads.com/author/quotes/15052586.Mayur_Ramgir”>
World is so beautiful when you look beyond your self-interest. Success
and self do notwork together. Rise up the ordinary. - Mayur Ramgir
</blockquote>
</body>
</html>

Abbreviations

 To highlight an abbreviation, <abbr> is used.


 The <abbr> tag defines an abbreviation or an acronym, like "HTML" for Hypertext
Markup Language, "CSS" for Cascading Style Sheets,
 Marking abbreviations can give useful information to browsers, translation systems and
search-engines.
 The full version of the abbreviation/acronym can be shown when a user hover the mouse
over the abbreviation.
 For example

<!DOCTYPE html>
<html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 17

<body>
<p>Highlighting abbreviations can be useful.</p>
<p>
<abbr title="Game Of Thrones">GoT</abbr> is expected to air by April 2019.
</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
<p>
<abbr title="Hypertext Markup Language">HTML</abbr> and
<abbr title="Cascading Style Sheets">CSS</abbr>
are two of the core technologies for building Web pages.
</p>
</body>
</html>

Contact Information

 The <address> tag defines the contact information for the author/owner of a document or
an article in a webpage.
 The contact information can be an email address, URL, physical address, phone number,
social media handle, etc.
 The text in the <address> element usually renders in italic.
 The browsers will always add a line break before and after the <address> element.
 For example

<!DOCTYPE html>
<html>
<body>
<p>See the following example of the address tag.</p>
<address>
Apple, Inc.<br> Visit us at:<br> Cupertino,<br>
California, United States<br>
</address>

<p><address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address></p>
</body>
</html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 18

Comments

 The markup-based syntax also supports comments with the help of a comment tag.
 The following format is used to insert a comment.
o <!--The comment body -->
 The comments are not displayed by the browser, but It can help document the HTML
source code.
 The comments are allowed web designers to add a reminder or describe a useful piece of
information.
 In large code-bases, comments are a must-have component for web designers to track
their use of certain programming elements while it also assists others in their team to get
an understanding of the code.
 For example

<!DOCTYPE html>
<html>
<body>
<!-- This is an example of a comment -->
<h1>Only this Heading is visible</h1>

<!-- You can add as many comments as you like -->


<p>HTML (the Hypertext Markup Language) and CSS (Cascading Style
Sheets) are two of the core technologies for building Web pages.</p>
</body>
</html>

Links

 HTML links are hyperlinks.


 Links are facilitated users to go from one document to another.
 When a mouse is hovered around such links, the cursor (or mouse arrow) transforms into
a mini hand.
 A link can contain any content like text, images, or any HTML element.
 The HTML <a> tag or also called anchor tag defines a hyperlink.
 It has the following syntax:
o <a href="url">link text</a>
 The most important attribute of the <a> element is the href attribute.
 The attribute “href ” stands for Hypertext Reference, which indicates the
link's destination.
 These links are formed by specifying URLs in the “href ”
 The link text is the part that will be visible to the reader.
 Clicking on the link text, will send the reader to the specified Uniform
Resource Locators (URL) address.

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 19

 After adding a reference, we can add any content on which the hyperlink has to be
placed.
 By default, the linked page will be displayed in the current browser window.
 By default, links will appear as follows in all browsers:
o An unvisited link is underlined and blue.
o A visited link is underlined and purple.
o An active link is underlined and red.
 For example

<!DOCTYPE html>
<html>
<body>
<h2>HTML Link Example</h2>
<p>
<a href="https://www.soa.ac.in">Siksha 'O' Anusandhan</a> Deemed
to be University is situated in Bhubaneswar, Odisha.
</p>
</body>
</html>

Target Attribute of Link

 The target attribute is used to add more customization in links.


 By default, the linked page will be displayed in the current browser window.
 The target attribute specifies where to open the linked document.
 The target attribute can have one of the following values:
o _blank : Opens the document in a new window or tab
o _self : Default. Opens the document in the same window/tab as it was clicked
o _parent : Opens the document in the parent frame
o _top : Opens the document in the full body of the window
o Framename :

 HTML Link Target Attribute _blank Example

<!DOCTYPE html>
<html>
<body>
<h2>HTML Link Target Attribute _blank Example</h2>
<p>
<a href="https://www.soa.ac.in" target="_blank">Siksha 'O'
Anusandhan</a> Deemed to be University is situated in
Bhubaneswar, Odisha.
</p>
<p>With blank, the link opens in a new tab.</p>
</body>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 20

</html>

 HTML Link Target Attribute _self Example

<!DOCTYPE html>
<html>
<body>
<h2>HTML Link Target Attribute _self Example</h2>
<p>
<a href="https://www.soa.ac.in" target="_self">Siksha 'O'
Anusandhan</a> Deemed to be University is situated in
Bhubaneswar, Odisha.
</p>
<p>With self, the link opens in the same tab.</p>
</body>
</html>

Image as a Link

 Use an image as a link which means an image which can open another link upon clicking.
 To use an image as a link, just put the <img> tag inside the <a> tag.

<!DOCTYPE html>
<html>
<body>
<h2>Image Link Example</h2>
<p>This example shows how images can be used as links. If you click
on the following image, it will open a webpage.</p>
<a href="https://www.soa.ac.in"> <img src="soalogo.png"
style="width:80px;height:80px;"></a>
</body>
</html>

Create a Bookmark in HTML

 Bookmarks can be useful if a web page is very long.


 To create a bookmark - first create the bookmark, and then add a link to it.
 To create a bookmark, add the id attribute (i.e., id="value") to the element.
o <h2 id="C4">Chapter 4</h2>
 add a link to the bookmark, create an anchor tag with desired content text like “Jump to
Chapter 4” and add the id of the element in the href attribute.
o <a href="#C4">Jump to Chapter 4</a>
 When the link is clicked, the page will scroll down or up to the location with the
bookmark.

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 21

<!DOCTYPE html>
<html>
<body>
<p>
<p><a href="#4">Go to 4th Section</a></p>
<p><a href="#8">Go to 8th Section</a></p>
</p>
<h2>First Section</h2>
<p>The content of the chapter goes here.</p>
<h2>Second Section</h2>
<p>The content of the chapter goes here.</p>
<h2>Third Section</h2>
<p>The content of the chapter goes here.</p>
<h2 id="4">Fourth Section</h2>
<p>The content of the chapter goes here.</p>
<h2>Fifth Section</h2>
<p>The content of the chapter goes here.</p>
<h2>Sixth Section</h2>
<p>The content of the chapter goes here.</p>
<h2>Seventh Section</h2>
<p>The content of the chapter goes here.</p>
<h2 id="8">Eighth Section</h2>
<p>The content of the chapter goes here.</p>
<h2>Ninth Section</h2>
<p>The content of the chapter goes here.</p>
<h2>Tenth Section</h2>
<p>The content of the chapter goes here.</p>
<h2>Eleven Section</h2>
<p>The content of the chapter goes here.</p>
<h2>Twelve Section</h2>
<p>The content of the chapter goes here.</p>
<h2>Thirteen Section</h2>
<p>The content of the chapter goes here.</p>
<h2>Fourteen Section</h2>
<p>The content of the chapter goes here.</p>
</body>
</html>

Images

 Images can improve the design and the appearance of a web page.
 The <img> tag is used to embed an image in a web page.
o Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.
 The <img> tag is empty, it contains attributes only, and does not have a closing tag.

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 22

 The <img> tag has two required attributes:


o src attribute - Specifies the path of the image.
o alt attribute - Specifies an alternate text for the image
 If an image cannot be loaded/ displayed in the web browser the “alt”
attribute text is a description of the image to inform the users what is
missing.
 To define the size of the image the “height” and “width” attributes are used.
 Common Image Formats
o Here are the most common image file types, which are supported in all browsers
(Chrome, Edge, Firefox, Safari, Opera):

Abbreviation File Format File Extension

APNG Animated Portable Network Graphics .apng

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

 For example

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<body>
<h1>SOA University Logo</h1>
<img src="soalogo.png" alt="soalogo" height="200" width="200">

<h1>Image Example</h1>
<img src="https://nthp-
savingplaces.s3.amazonaws.com/2016/04/12/20/15/56/404/GC_NTHP_7_
H.jpg.jpg" alt="Grand Canyon" height="300" width="550">
</body>
</html>

Tables

 HTML tables allow web developers to arrange data into rows and columns.

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 23

 A table in HTML consists of table cells inside rows and columns.


 HTML also supports the inclusion of tables with the <table> tag.
 The <tr> tag specifies the table row.
o tr stands for table row.
o Each table row starts with a <tr> and ends with a </tr> tag.
o Table can have as many rows.
 The <th> tag specifies the table header.
o th stands for table header.
o usually, table headings are centered and bold.
 The cell or data in the table is specified by using the <td> tag.
o td stands for table data.
o everything between <td> and </td> are the content of the table cell.
o A table cell can contain text, images, lists, links, other tables, etc.
 For example

<!DOCTYPE html>
<html>
<body>
<table style="width: 70%">

<h1>HTML Table</h1>

<th align="left">Employee Name</th>


<th align="left">Designation</th>
<th align="left">City</th>

<tr>
<td>Jack</td>
<td>Salesperson</td>
<td>Austin</td>
</tr>
<tr>
<td>Chad</td>
<td>Accountant</td>
<td>Fall River</td>
</tr>
<tr>
<td>Daniel</td>
<td>Software Developer</td>
<td>Fairfax</td>
</tr>
</table>
</body>
</html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 24

 The previous table can be improved by adding a border property with the <style> tag, For
example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid red;
}
</style>
</head>
<body>
<table style="width:70%">
<h1>HTML Table</h1>

<tr>
<th align = "left">Employee Name</th>
<th align = "left">Designation</th>
<th align = "left">City</th>
</tr>
<tr>
<td>Jack</td>
<td>Salesperson</td>
<td>Austin</td>
</tr>
<tr>
<td>Chad</td>
<td>Accountant</td>
<td>Fall River</td>
</tr>
<tr>
<td>Daniel</td>
<td>Software Developer</td>
<td>Fairfax</td>
</tr>
</table>
</body>
</html>

Lists

 HTML lists allow web developers to group a set of related items in lists.
 In HTML, there are two types of lists:
o Unordered list which means items are arranged in bullet form.

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 25

o Ordered list which means items are arranged in a numeric or orderly form.

Unordered HTML List

 An unordered list starts with the <ul> tag.


 Each list item starts with the <li> tag.
 The list items will be marked with bullets (small black circles) by default.
 For example

<!DOCTYPE html>
<html>
<body>
<h1>What do you to want to eat for dinner?</h1>
<ul>
<li>Pizza</li>
<li>Burger</li>
<li>Sandwich</li>
</ul>
</body>
</html>

 HTML’s unordered list provides customization, means use list-style-type to add the
following types of bullets: disc, circle, square, and none. An example with “square” style
is as follows:

<html>
<body>
<h1>What do you want to eat for dinner?</h1>

<ul style=“list-style-type: square;”>


<li>Pizza</li>
<li>Burger</li>
<li>Sandwich</li>
</ul>
</body>
</html>

Ordered HTML List

 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
 The list items will be marked with numbers by default:

<!DOCTYPE html>
<html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 26

<body>
<h1>What do you want to eat for dinner?</h1>

<ol>
<li>Pizza</li>
<li>Burger</li>
<li>Sandwich</li>
</ol>
</body>
</html>

 Ordered lists can be customized by adding the “type” properties: 1, A, a, I, and i.


 For example

<!DOCTYPE html>
<html>
<body>
<h1>What do you want to eat for dinner?</h1>

<ol type=“A”>
<li>Pizza</li>
<li>Burger</li>
<li>Sandwich</li>
</ol>
</body>
</html>

Description Lists

 HTML also supports description lists.


 A description list is a list of terms, with a description of each term.
 The <dl> tag defines the description list.
 the <dt> tag defines the term or name of the item.
 the <dd> tag describes each term.
 For example

<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 27

<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>

Attributes to Style HTML Elements

 This section discuss the attributes that are used to style elements like changing color,
adding font size, etc.
 Changing color and adding font size are CSS properties.
 Here, introduce a few things about CSS styling and adding directly in the HTML code.
 The style attribute is used to add some colors and styling in an HTML element.
o <tagname style=“property:value;”>

Background Color

 To change the background color, need to add style attribute property “background-color”
in the <body> element.
 For example, the following code changes the color of background to green.

<!DOCTYPE html>
<html>
<body style="background-color: green;">
<h1>Using the property background-color!</h1>
<p>Changing the color of the background from white to green.</p>
</body>
</html>

Text Color

 To change the color of the text, need to add style attribute property “color” in the header
<h1> element and/or <p> element.
 For example, the following code changes the color of the text to red.

<!DOCTYPE html>
<html>
<body>
<h1 style="color: red;">Red Heading</h1>
<p style="color: red;">By using style attribute and its property color, we
have changed the color of our paragraph text to red.</p>
</body>
</html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 28

Fonts

 To change the fonts of the text, need to add style attribute property “font-family” in the
header <h1> element and/or <p> element.
 For example, the following code defines the font of the text.

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family: courier;">The text of Heading is written in courier
font.</h1>
<p style="font-family: Brush Script MT;">The text of Paragraph is written
in Brush Script MT font.</p>
</body>
</html>

Size of Text

 To increase the size of the text, need to add style attribute property “font-size” in the
header <h1> element and/or <p> element.
 For example, the following code increasing the size of the text.

<!DOCTYPE html>
<html>
<body>
<h1>Increasing header font by percent</h1>
<h1 style="font-size:300%;">Increasing our font by 300 percent</h1>
<p>Increasing paragraph font by percent.</p>
<p style="font-size:200%;">Increasing our font by 100 percent.</p>
</body>
</html>

Text Alignment

 To align the text to the left, right, or in the center, use “text-align” property of style
attribute in the header <h1> element and/or <p> element.
 For example, the following code aligns the texts.

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align: left;">This heading is aligned to the left.</h1>
<h2 style="text-align: right;">This heading is aligned to the right.</h2>
<h3 style="text-align: center;">This heading is aligned to the center</h3>

Lecturer Notes Prepared by Dr. Sangram Panigrahi


Introduction to Hyper Text Markup Language 29

<p style="text-align: left;">This paragraph is aligned to the left.</p>


<p style="text-align: right;">This paragraph is aligned to the right.</p>
<p style="text-align: center;">This paragraph is aligned to the center</p>
</body>
</html>

No Closing Tag

 Most of the times, a tag is processed correctly even without adding its closing tag.
However, still it is recommended that always make use of the closing tag because
sometimes unexpected errors can be occurred without closing tag.
 For example

<!DOCTYPE html>
<html>
<body>
<p>Paragraph without the closing tag.
<p>Paragraph without the closing tag.
<p>Paragraph without the closing tag.
<p>But still always use the closing tag</p>
</body>
</html>

Lecturer Notes Prepared by Dr. Sangram Panigrahi

You might also like