Lecture 3 - HTML Coding (Introduction, Structure and Tags)
Lecture 3 - HTML Coding (Introduction, Structure and Tags)
Introduction to HTML
HTML stands for Hypertext Markup Language and it is a widely used programming language used
to develop web pages. It is used to design web pages using a markup language. HTML is the
combination of Hypertext and Markup language.
• HyperText stands for Link between web pages.
• Markup Language means Text between tags that define the structure.
HTML is a markup language that is used to create web pages. It defines how the web page looks
and how to display content with the help of elements. It forms or defines the structure of our
Web Page. We must remember to save your file with .html extension.
Applications of HTML
HTML is used for various purposes.
1. Web Pages Development
HTML is famously used for creating web pages on the world wide web. Every web
page contains a set of HTML tags and hyperlinks which are used to connect other
pages. Every page on the internet is written using HTML.
2. Navigating the Internet
Navigating on the internet would have been quite a tedious task without HTML. The
anchor tags of HTML allows us to link pages and navigate easily. Imagine our life
without anchor tags, you would literally have to enter URL everytime. Using achor
tags, you can also navigate within a webpage.
3. Embedding Images and Videos
HTML allows us to embed images and videos with ease and gives us features to
adjust height, position and even rendering type. You can adjust controls, thumbnails,
timestamps and much more for videos. Earlier this was done using Flash and HTML
has made it easier with the help of <video> tag.
4. Client-side storage
HTML5 has made client-side storage possible using localStorage and IndexD due to
which we no longer need to reply on Cookies. Both of these tactics have their own
set of rules and characteristics. Its API is straightforward, with setItem, getI tem, and
removeItem functions available to developers. On the other hand, IndexDB is a
larger and more capable client-side data store. With the user’s permission, the
IndexDB database can be enlarged.
5. Data entry support
With the usage of new HTML5 standards in all the latest browsers, developers can
simply add the tags for required fields, text, data format, etc. and get the data.
HTML5 now has several new attributes for data-entry and validation purposes.
Page 1
6. Interacting with Native APIs
With the help of HTML, you can interact with your Operating system. With this
feature, you can easily drag files onto a web page to upload, full-screen a video, and
much more.
HTML Editor
HTML structure
HTML page structure: The basic structure of an HTML page is laid out below. It contains the
essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements)
upon which all web pages are created.
Page 2
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h2>Machakos University</h2>
<p>Bsc. Computer Science.</p>
</body>
</html>
Where:
• 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)
• 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 <h2> element defines a large heading
• The <p> element defines a paragraph
HTML Tags
<!DOCTYPE html>
Instruction to the browser about the HTML version.
<html>
Page 3
<head>
HTML Comment
Page 4
1. Single line
2. Multiple lines
3. Comment tag //Supported by IE
HTML comments start with < !-- tag and end with -- > tag.
<!-- Sample HTML comment -->
Comments are not displayed in the web browsers. Any HTML elements that are encapsulated inside
of the comment tags will be ignored by the web browsers. Comments will help the author or visitor
to describe and explain the HTML code, who visited the HTML source code.
HTML multiple line comments are also the same syntax. HTML don’t allow nested comments, that
is, a comment inside another comment.
HTML Elements
HTML element is the collection of start tag, its attributes, an end tag and everything in between. On
the other hand, an HTML tag (either opening or closing) is used to mark the start or end of an element.
Page 5
In HTML, tag and attribute names are not case-sensitive (but most attribute values are case-sensitive).
It means the tag <P>, and the tag <p> defines the same thing in HTML which is a paragraph.
Example:
An HTML attribute is a piece of markup language used to adjust the behavior or display of an HTML
element. For example, attributes can be used to change the color, size, or functionality of HTML
elements. Attributes are used by including them in an opening HTML tag: <tag_name
attribute_name="value">Content</tag_name>
Example:
<hr color=”red”>
color is used to set the color of the horizontal line drawn on the webpage.
Types of Elements
There are different types of elements in HTML. Before moving ahead in the HTML Tutorial, let
us understand the types of elements.
•Block Level
○ Takes up full block or width and adds structure in the web page
Page 6
○ Example:
■ <p >
■ <div>
■ <h1>…<h6>
■ <ol>
■ <ul>
• Inline Level
○ Takes up what is requires and adds meaning to the web page
○ Example :
■ <span>
■ <strong>
■ <em>
■ <img>
■ <a>
An empty element is a component that doesn’t have any embedded elements or text elements.
Empty elements do not have successor nodes. In other words, the tags that do not contain any
closing tags are empty tags. Empty tags contain only the opening tag but they perform some action
Page 7
in the webpage. There is no need to specify the closing tag and the opening tag should end with />
instead of >.
● <hr> tag
○ Syntax: <hr>
● <br> tag
○ Syntax: <br>
● <img> tag
The <h1> to <h6> HTML elements represent six levels of section headings. <h1> is the highest
section level and <h6> is the lowest.
<!DOCTYPE html>
<html>
<head>
<title>span tag</title>
Page 9
</head>
<body bgcolor="magenta">
<h1>Machakos</h1>
<h2>University</h2>
<h3>ICT</h3>
<h4>Department</h4>
<h5>Bsc.</h5>
<h6>Information Technology</h6>
</body>
</html>
OUTPUT:
Attribute Description
width provides the width or breadth of a marquee. For
example width="10" or width="20%"
height provides the height or length of a marquee. For
example height="20" or height="30%"
direction provides the direction or way in which your marquee will allow you to
scroll. The value of this attribute can be: left, right, up or down
scrolldelay provides a feature whose value will be used for delaying among each
jump.
scrollamount provides value for speeding the marquee feature
Page 10
behavior provides the scrolling type in a marquee. That scrolling can be like sliding,
scrolling or alternate
loop provides how many times the marquee will loop
bgcolor provides a background color where the value will be either the name of
the color or the hexadecimal color-code.
vspace provides a vertical space and its value can be
like: vspace="20" or vspace="30%"
hspace provides a horizontal space and its value can be
like: vspace="20" or vspace="30%"
<html>
<head></head>
<body>
<marquee behavior="scroll" direction="up" scrollamount="1">Slow Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="12">Little Fast Scrolling</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast Scrolling</marquee>
<marquee behavior="scroll" direction="right" scrollamount="50">Very Fast Scrolling</marquee>
</div>
</body>
</html>
HTML - <hr> Tag
Description
The HTML <hr> tag is used for creating a horizontal line. This is also called Horizontal Rule in
HTML.
Attributes:
<hr width="50%" color="green" size="50px" align="right" />
HTML | <p> align Attribute
The HTML <p> align Attribute is used to specify the alignment of paragraph text content.
Syntax:
<p align="left | right | center | justify">
Attribute Values:
• left: It sets the text left-align. It is a default value.
• right: It sets the text right-align.
• center: It sets the text center-align.
Page 11
• justify: It stretch the text of paragraph to set the width of all lines equal.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body bgcolor="cyan">
<p align=”center”> MACHAKOS UNIVERSITY </p>
<hr size=5 color="red">
<marquee>Bachelor of Science</marquee>
<marquee direction = "up">Information Technology</marquee>
</body>
</html>
Page 12
¢ cent ¢ ¢
Page 13