HTML Notes

Programming languages: coding: software development
Stand alone s/w: calculator,alarm

Web based s/w: using internet
HTML Introduction
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
 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.
What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<h1>SP Computers</h1>
<p>My first paragraph.</p>
<br>
<hr>
Note: Some HTML elements have no content (like the <br> element).
These elements are called empty elements. Empty elements do not
have an end tag!
WHY HTML ?
 HTML has facility of Ordinary text formatting and process

of applying extra features to this ordinary text.
 HTML is a collection of platform independent styles that define
define various components of web.
 It is effective medium of presenting information to developers.
Advantages of HTML
 HTML is easy to learn and implement (Alternative to traditional presentation
software.)
 Powerful text formatting facility
 Device and platform independent.
 HTML is Free. ...
 HTML is supported by all Browsers. ...
 HTML is Simple to Edit. ...
 HTML can Integrate Easily with Other Languages. ...
 HTML is Lightweight. ...
 HTML is Basic of all Programming Languages.
Browser- software/program to use internet
e.g. Chrome, MS edge, safari, opera, internet explorer, Mozilla firefox
Visual studio code / notepad + browser /

notepad++
Smartphone : Andoroid – Acode /Anwriter
HTML Page Structure
Below is a visualization of an HTML page structure:
HTML – architecture/ Layout
Css- styling
Script - behaviour
Basic HTML Tags

 <HTML> - This tag identifies a document as an html document.
Document should start with <HTML> tag and end with</HTML>
 <HEAD>- This tag contains information about the document. This
tag contains TITLE, BASE,ISINDEX,META,SCRIPT,STYLE AND LINK
Tags. The syntax is <HEAD>…….</HEAD>
 <TITLE>- This tag specifies title of the document, which should be
placed inside <head> tag. The text should be simple text. Therefore
it should be short, less than 64 characters.
 Style – Stylesheet instructions should be written in stylesheet
language. Stylesheet specifies how document should be formatted
for display. The HTML style attribute is used to add styles to an
element, such as color, font, size, and more.
 Script-Script program code -- for enclosing within a document
For eg.
<HTML>
<HEAD>
<SCRIPT Language=”VBSCRIPT”>VBSCRIPT</SCRIPT>
</HEAD>
 <BODY>- This tag defines contents of document. Various elements
are included within this body tag….like heading, paragraph, llist,
link, images etc.
Attributes for Body tag
BACKGROUND: <body background=”a.gif”>
BACKGROUND COLOR: <body bgcolor=”Red”>
TEXT :<body text=”BLUE”>
 <P> - Paragraph is defined in this tag. It can contain Align attribute
for alignment of text within a tag.
Eg. <P align=”center”>This is paragraph</p>
HTML automatically add extra line before and after <p> tag
Indentations or blank lines/spaces are ignored in<p> tag.
 <PRE> - Preformatted text can be inserted in a document using this
tag. The text inside a <pre> element is displayed in a fixed-width
font (usually Courier), and it preserves both spaces and line breaks:
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.

</pre>
 <BR>The HTML <br> element defines a line break. Use <br> if you
want a line break (a new line) without starting a new paragraph.
The <br> tag is an empty tag, which means that it has no end tag.
 <HR>-The <hr> tag defines a thematic break in an HTML page, and

is most often displayed as a horizontal rule.The <hr> element is
used to separate content (or define a change) in an HTML page
 HEADINGS – <H1>--- <H6> defines heading tags. HTML headings

are titles or subtitles that you want to display on a webpage. HTML
headings are defined with the <h1> to <h6> tags.<h1> defines the
most important heading. <h6> defines the least important heading.
Character formatting tag

<b>….</b> :Bold
<i>…</i>: Italic
<u>…..</u>: Underline
<Em>… </em>: Emphasis
<strong>….</strong>: Strong
<sub>….</sub> : Subscript H2SO4
<sup>..</sup>: Superscript X2+Y2=Z3
<font size=16 face=”Calibri” color=”darkred”>
</font>
HTML Lists
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:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Type of ul tags : type=”disc”, “circle”,”square”
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:
Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<OL>- ordered list

1,2,3
A,B,C,
I,II,III
<ol type="I" style= "Font-size:120%; color:Red">

<li>Rose</li>
<li>Lotus</li>
<li>Jasmine</li>
<li> Delia</li>
<li>Lily</li>
</ol>
Nested List tags

<h3>Nested list example: Multilevel List</h3>
<UL>
<li>Maharashtra</Li>
<ul>
<li>Pune</li>
<ol>
<li>Haveli</li>
<li>Baramati</li>
</ol>
<li>Mumbai</li>
</ul>
<li>Karnataka</li>
<ol>
<li>Bengalore</li>
<li>Belgaon</li>
</ol>
<li>Gujrath</li>
<ul>
<li>Baroda</li>
<li>Ahemedabad</li>
</ul>
<li>Madhyapradesh</li>
<ol>
<li>Bhopal</li>
<li>Indore</li>
</ol>
</ul>
<ul type=”circle”>
<li>File</li>
<ul>
<li>New</li>
<ol>
<li>Document</li>
<li> Blog post</li>
<li>template</li>
</ol>
<li>Open</li>
<li>Save</li>
<li>Print</li>
</ul>
<li>Edit</li>
<li>View</li>
</ul>
File
New
Document
Blog post
template
Open
Save
Print
Exit
Edit
Cut
Copt
Paste
View
Status bar
Format
Word wrap
Font
Font
Font-size
Font-style
Help
Mobile menu
<ol>
<li>Call</li>
<ul>
<li>received<li>
<li>dialed</li>
<li>missed</li>
</ul>
<li>Message</li>
<ul>
<li>Inbox</li>
<li>Write message</li>
<li>Outbox</li>
</ul>
<li>multimedia</li>
<ul>
<li>Clock<li>
<li>calculator</li>
<li>Fm Radio</li>
</ul>
</ol>
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 (name), and
the <dd> tag describes each term:
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
 Use the HTML <dl> element to define a description list

 Use the HTML <dt> element to define the description term
 Use the HTML <dd> element to describe the term in a description list.
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
The <table> tag defines an HTML table.
Each table row is defined with a <tr> tag. Each table header is defined with
a <th> tag. Each table data/cell is defined with a <td> tag.
By default, the text in <th> elements are bold and centered.
By default, the text in <td> elements are regular and left-aligned.
Table elements
 <table> - element to define a table

 <tr>- element to define a table row
 <td> - element to define a table data
 <th> - element to define a table heading
 <caption> - element to define a table caption
Firstname Lastname Age
Jill Smith 50
Eve Jackson 94
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Table attributes
 Align- This attribute specifies horizontal placement of table.

Left: aligns the table to left(default)
Right: aligns the table to right
Center: aligns the table in the center
 Bgcolor- sets the color of the background of the table. Example
<table bgcolor=”yellow”>……</table>
 Border- This attribute indicates the thickness of the border of the table in
pixels. Give the value as an integer. For example <table border=”2”>
 Cellpadding- This attribute determines the amount of space between
the border of the cell and contents of the cell. For example
<table cellpadding=”20”>. The default value is 1.
 Cellspacing- This attribute determines the amount of space between
indivisual cells in a table in pixels. The default value is 2.
 Height- This attribute specifies the height of the table. This can be a
percentage of height of page or parent element.
 Width- This attribute defines width of the table. This can be a percentage of
width of page or parent element. For example
<table height=120%>
 Cols- This attribute indicates how many columns fit in the width of the
window
 Hspace- This attributes specifies the distance between left and right edges
of the table and surrounding content i.e. horizontal margin.
 Vspace- This attribute defines distance between top and bottom edges of
the table and surrounding content.
Attributes for <th> and <td> tags:
 Align – Horizontal alignment of a cell(Left,Center,Right)

 Valign – Vertical alignment of a cell(top,middle,bottom)
 Colspan - The number of columns a cell spans
 Rowspan – The number of rows a cell spans.
Example 1:
Name Address City Contact number

Sagar Muthal Samarthnagar Nagpur 9850247645
Ashvini Kulkarni Tilaknagar Mumbai 8484767564
Kalpana Joshi High-Bliss Society Pune 9988767534
Example 2:
Admission process
Cummins college of Engineering
Courses No. of Students
Computer 120
Instrumentation 80
E & TC 60
Example 3:
Snacks Center
Food Rate discount
Pav-bhaji Rs.120 5%
Pizza Rs.350 7%
Example 4:
Programming Language type Example

Object oriented Programming Language Java
CPP
Structured Language C
Basic
Example 5:
With toppings Rs.150

Pizza(domino’s)
Without toppings Rs.120
Cheese pavbhaji Rs.40
Pav-bhaji
Jain pavbhaji Rs.42
Example 6:
Programming Languages
Java
Object oriented programming
C++
C
Structured language
Basic
<table border=2>
<tr>
<td colspan=2>Programming Language</td>
</tr>
<tr>
<td rowspan=2>Object Oriented Language</td>
<td>Java</td>
</tr>
<tr>
<td>C++</td>
</tr>
<tr>
<td rowspan=2>Structured Language</td>
<td>C </td>
</tr>
<tr>
<td>Basic</td>
</tr>
</table>
Example 7:
YEAR
1998 1999 2000
UNITS 500 400 1000

SALES
INCOME 1000 800 2000
FACULTY
ARTS SCIENCE COMMERC

E
BOYS 100 400 500
STUDENTS GIRLS 300 300 400
HTML IMAGES
<IMG> - this tag is used to insert image in webpage. Images

can be of following types.
GIF
JPEG/JPG/PNG
XPM- X pixMap
XBM- X bitmap
Image Attributes
 SRC-Source attribute is compulsory. The format is

<img src=”Location(URL)”>
Where URL is address of the image to be displayed. Uniform
Resource Locator
 ALT – specifies the alternative text if browser do not support

img tag or loading takes time. The format is
<img src=”Location” Alt=”This is image”>
 Align- specifies the alignment of image with respect to

surrounding text.
(Right,Top,Texttop,Middle,Baseline,Bottom)
 Border – Specifies the width of the border around the image.
 Height – specifies the height of the image in pixels or

percentage of height of window. The format is
<img src=”location” height=100>
 Width – specifies the width of the image in pixels or

percentage of width of the window. The format is
<img src=”Location” width=150>
HTML Links
Links are found in nearly all web pages. Links allow users to click their way from
page to page.
HTML Links - Hyperlinks

HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
A link does not have to be text. A link can be an image or any other HTML element!
HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
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 URL (uniform
Resource Locator) address.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red
HTML Links - The target attribute

By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it was

clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window
Use target="_blank" to open the linked document in a new browser window or

tab:
<a href="https://www.google.com/" target="_blank">Visit Google!</a>
Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in
the href attribute.
A local link (a link to a page within the same website) is specified with a relative
URL (without the "https://www" part):
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href=" D:\Samruddhi\12th science\HTML\HTML Colors">HTML Colors</a></p>
<p><a href="D:\Samruddhi\MCCE\sylabus & notes\C programming Crash course">C
Programming</a></p>
HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width=42 height=42>
</a>
Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program
(to let them send a new email):
Example
<a href="mailto:someone@example.com">Send email</a>
Link to same page in a document

Particular places in a document can be marked as specific destinations of hypertext links
via NAME attribute, link to specific sections.
Anchors are used to move the reader to particular sections of document.
This type of anchor is called as named anchor.
<p>
<a href="#samepage">Link to samepage</a>
</p>
<a NAME="samepage">
<h2>
You are in same page.
</h2>
</a>
<marquee> To scroll text</marquee>
CSS –cascade style sheet
<html>
<head>
<style>
H2{
Color:Yellow;
}
</style>
</head>
<body>
</body>
</html>
HSC Science
1. Physics
2. Chemistry
3. Maths
4. Computer Science
a. Paper 1
i. Operating System
ii. Data Structure
iii. CPP Programming
iv. Html
b. Paper 2
i. Introduction To Microprocessor
ii. Instruction Set Of 8085
iii. Networking Technology
iv. X-86 Family
v. Introduction To Microcontroller
Title bar –
Topmost bar of every window, shows the title of application
Scrollbars –
Vertical /horizontal bar to move page or window up/down and move across left/right

HTML Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Notes

Uploaded by

Copyright:

Available Formats

Programming languages: coding: software development

Stand alone s/w: calculator,alarm

What is an HTML Element?

<tagname>Content goes here...</tagname>

<p>My first paragraph.</p>

 HTML has facility of Ordinary text formatting and process

Browser- software/program to use internet

e.g. Chrome, MS edge, safari, opera, internet explorer, Mozilla firefox

Visual studio code / notepad + browser /

HTML – architecture/ Layout

Basic HTML Tags

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

 <HR>-The <hr> tag defines a thematic break in an HTML page, and

 HEADINGS – <H1>--- <H6> defines heading tags. HTML headings

Character formatting tag

Type of ul tags : type=”disc”, “circle”,”square”

Ordered HTML List

The list items will be marked with numbers by default:

<OL>- ordered list

<ol type="I" style= "Font-size:120%; color:Red">

Nested List tags

HTML Description Lists

A description list is a list of terms, with a description of each term.

 Use the HTML <dl> element to define a description list

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

 <table> - element to define a table

Firstname Lastname Age

 Align- This attribute specifies horizontal placement of table.

Attributes for <th> and <td> tags:

 Align – Horizontal alignment of a cell(Left,Center,Right)

Name Address City Contact number

Programming Language type Example

With toppings Rs.150

1998 1999 2000

UNITS 500 400 1000

ARTS SCIENCE COMMERC

BOYS 100 400 500

STUDENTS GIRLS 300 300 400

<IMG> - this tag is used to insert image in webpage. Images

 SRC-Source attribute is compulsory. The format is

 ALT – specifies the alternative text if browser do not support

 Align- specifies the alignment of image with respect to

 Height – specifies the height of the image in pixels or

 Width – specifies the width of the image in pixels or

HTML Links - Hyperlinks

You can click on a link and jump to another document.

HTML Links - Syntax

<a href="url">link text</a>

By default, links will appear as follows in all browsers:

 An unvisited link is underlined and blue

HTML Links - The target attribute

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was

Use target="_blank" to open the linked document in a new browser window or

<a href="https://www.google.com/" target="_blank">Visit Google!</a>

Absolute URLs vs. Relative URLs

HTML Links - Use an Image as a Link

Link to an Email Address

Link to same page in a document