HTML CODING.
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
• Simple editor: Notepad
• Notepad++
• Atom
• Macromedia Dreamweaver.
• Sublime Text
An HTML document can be created using any text editor. Save the text file using .html or .htm.
Once saved as an HTML document, the file can be opened as a webpage in the browser.
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>
• Root element which acts as a container to hold all the code
• The browser should know that this is an HTML document
• Permitted content: One head tag followed by one body tag
Page 3
<head>
• Everything written here will never be displayed in the browser
• It contains general information about the document
• Title, definitions of CSS and script sheets
• Metadata(information about the document)
HTML elements used inside the <head> element include:
• <style>-This html tag allows us to insert styling into our webpages and make them
appealing to look at with the help of CSS.
• <title>-The title is what is displayed on the top of your browser when you visit a
website and contains title of the webpage that you are viewing.
• <base>-It specifies the base URL for all relative URLs in a document.
• <noscript>– Defines a section of HTML that is inserted when the scripting has been
turned off in the user’s browser.
• <script>-This tag is used to add functionality in the website with the help of
JavaScript.
• <meta>-This tag encloses the meta data of the website that must be loaded every time
the website is visited. For eg:- the metadata charset allows you to use the standard
UTF-8 encoding in your website. This in turn allows the users to view your webpage in
the language of their choice. It is a self-closing tag.
• <link>– The ‘link’ tag is used to tie together HTML, CSS and JavaScript. It is self-
closing.
<body>
• Everything written here will be displayed in the browser
• Contains text, images, links that can be achieved through tags
• Examples:
• ○ <p> This is our first paragraph. </p>
HTML Comment
• Comments don’t render on the browser
• Helps to understand our code better and makes it readable.
• Helps to debug our code
• Three ways to 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 Source Code:
<html>
<body>
Single line comment
<!-- This is single line comment -->
<br>
Multi line comment
<!-- Multi line
comment -->
</body>
</html>
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:
<p color=”red”> Machakos University </p>
Explanation:
• Start tag: <p>
• Attributes: color =” red”
• End tag : </p> // optional
• Content: Machakos University
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
○ Always starts from the new line
○ Always end before the new line
Page 6
○ Example:
■ <p >
■ <div>
■ <h1>…<h6>
■ <ol>
■ <ul>
• Inline Level
○ Takes up what is requires and adds meaning to the web page
○ Always starts from where the previous element ended
○ Example :
■ <span>
■ <strong>
■ <em>
■ <img>
■ <a>
Empty Tags in HTML / Non Container Tags.
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 >.
List of Empty Tags in HTML.
Element Description
img It accepts a source link of the image and some other attributes like height, width, etc, and is used
to embed the image in the HTML Document.
br The term br is an abbreviation for break, It introduces a line break in the document.
hr The horizontal rule is used to introduce a graphical line in the HTML document. It is also called
a thematic break. Follow this .
area The area element is used inside image map. It defines some particular clickable areas for the
image which further may lead user to a different link.
embed The embed element is used as a container to display any external resource like image, video,
plugin etc.
input This element is used to receive input from user.
meta We write this element in the head tag of document, it is used to specify some meta
data(information) about the page.
source The source element specifies media element for picture, video, or audio element.
col It is used inside the colgroup element of tables in html, and specifies the common properties of
columns, ex- style.
link It establishes a link or association between some external resource and html document. It is
generally used inside the head tag.
Page 8
List of Self-closing tags
● <hr> tag
○ Stands for horizontal rule
○ Dividing the web page
○ Syntax: <hr>
● <br> tag
○ Stands for break line
○ Moving to next line
○ Syntax: <br>
● <img> tag
○ To add images in the web page
○ Syntax: <img src=”path”>
<h1>–<h6>: The HTML Heading elements
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:
HTML - <marquee> Tag
The HTML <marquee> tag is used for scrolling piece of text or image displayed either horizontally
across or vertically down your web site page depending on the settings.
The different attributes of <marquee> tag are:
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>
HTML Character Entities
Result Description Name Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
" double quotation mark " "
' single quotation mark ' '
Page 12
¢ cent ¢ ¢
£ pound £ £
¥ yen ¥ ¥
€ euro € €
© copyright © ©
® trademark ® ®
Page 13
