Web Technologies

SYBSC (Computer Science)

Prof. Aarti Anand Patkar

 Introduction
• HTML (Hypertext Markup Language)
• Used for creating web pages and web applications.
• Hyper Text: “Text within text” Eg. Link
• Markup Language: A langauge that is used to
apply layout and formatting conventions to a text
document.
• Web Page: a document which is commonly written
in HTML and translated by a web browser.

Prof. Aarti Anand Patkar

 Continue…
• HTML is used for creating attractive web
pages with the help of styling, and which
looks rich in format on a web browser.
• HTML document contains many tags.
• Eg:
• <h1> Hello All</h1>

Prof. Aarti Anand Patkar

Description of HTML Example

Prof. Aarti Anand Patkar

HTML Versions

Prof. Aarti Anand Patkar

 Features of HTML
• Easy and Simple Language:
• Effective Presentation :
• Markup Language:
• Links:
• Platform-independent:
• Graphics, videos and sound:

Prof. Aarti Anand Patkar

Prof. Aarti Anand Patkar
 HTML Text Editors
• Text editors are the programs which allow
editing in a written text, hence to create a
web page we need them to write a code.
• Notepad, Notepad++, TextEdit(Mac),sublime
Text, Vim etc.

Prof. Aarti Anand Patkar

 Building Blocks of HTML
• An HTML document consists of its basic building
blocks :
• Tags: An HTML tag surrounds the content and
apply meaning to it. < >
• Attribute: It provides extra information about the
element and it is applied within the start tag.
– Attribute contains two fields : name & value.
• Elements: issan individual component of an HTML
file. In a HTML file, everything written within tags
are termed as HTML elements.
Prof. Aarti Anand Patkar
Building Blocks of HTML

Prof. Aarti Anand Patkar

Example

Prof. Aarti Anand Patkar

 HTML Tags
• Tags are like keywords which defines that how
web browser will format and display the content.
• With the help of tags, a web browser can
distinguish between an HTML content and a
simple content.
• HTML tag contains tree main parts:
– Opening tag
– Content
– Closing tag
Prof. Aarti Anand Patkar
• Each HTML tags have different properties.
• All HTML tags must enclosed within <> brackets.
Eg:
<p>Paragraph </p>

Prof. Aarti Anand Patkar

 HTML Tags -TYPES
1. Unclosed HTML Tags
• Some tags are not closed..
• <br> tag : Break line
• <hr> tag: Horizontal rule.
2. HTML Meta Tags
• DOCTYPE, title,link, meta and style
3. HTML Text Tags
• <p> ,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<strong>,
• <em>,<abbr>,<address>,<del>,<code>,<q>
Prof. Aarti Anand Patkar
 HTML Tags -TYPES
4. HTML Link Tags
• <a> and <base> tag
5. HTML Image and Object Tags
• <img>, <area>,<map>,<param> and <object>
6. HTML List Tags
• <ul> <ol>, <li>,<dl>, <dt> and <dd>
7. HTML Table Tags
• Table, tr,td,th,tbody,thead,tfoot,col,colgroup and
caption
Prof. Aarti Anand Patkar
 HTML Tags -TYPES
8. HTML Form Tags
• Form, input, textarea, select, option, optgroup,
button, label, fieldset and legend
9. HTML Scripting Tags
• Script and nonscript

Prof. Aarti Anand Patkar

HTML Attributes

Prof. Aarti Anand Patkar

Syntax & Example

Prof. Aarti Anand Patkar

 HTML Tables
• HTML table tag is used to display data in tabular
form(row * column) .
• Use of <table> element with <tr> <td> <th>
elements.

• Example

Prof. Aarti Anand Patkar

HTML Table Tags

Prof. Aarti Anand Patkar

HTML Table with colspan

Prof. Aarti Anand Patkar

HTML Table with caption

Prof. Aarti Anand Patkar

HTML <img> Tag

Prof. Aarti Anand Patkar

Prof. Aarti Anand Patkar
Attributes

Prof. Aarti Anand Patkar

Prof. Aarti Anand Patkar
 HTML Lists
• HTML Lists are used to specify lists of
information. All lists may contain one or
more list elements. There are three
different types of HTML lists:
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)

Prof. Aarti Anand Patkar

 HTML Ordered List or Numbered
List
• In the ordered HTML lists, all the list
items are marked with numbers by
default.
• It is known as numbered list also.
• The ordered list starts with <ol> tag
and the list items start with <li> tag.
• Example:

Prof. Aarti Anand Patkar

 HTML Unordered List or Bulleted
List
• In HTML Unordered list, all the list
items are marked with bullets.
• It is also known as bulleted list also.
• The Unordered list starts with <ul> tag
and list items start with the <li> tag.

• Example

Prof. Aarti Anand Patkar

 HTML Description List or Definition
List
• HTML Description list is also a list style which
is supported by HTML and XHTML.
• It is also known as definition list where entries
are listed like a dictionary or encyclopedia.
• The definition list is very appropriate when
you want to present glossary, list of terms or
other name-value list.
• The HTML definition list contains following
three tags:
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition
(description).
Prof. Aarti Anand Patkar
 HTML Formatting
• HTML Formatting is a process of formatting
text for better look and feel. HTML provides
us ability to format text without using CSS.
There are many formatting tags in HTML.
These tags are used to make text bold,
italicized, or underlined.
• There are almost 14 options available that
how text appears in HTML and XHTML.
• In HTML the formatting tags are divided into
two categories:
• Physical tag: These tags are used to provide
the visual appearance to the text.
• Logical tag: These tags are used to add some
logical or semanticProf.value to the text.
Aarti Anand Patkar
Prof. Aarti Anand Patkar
Prof. Aarti Anand Patkar
HTML Form Elements

Prof. Aarti Anand Patkar

The <input> Element

Prof. Aarti Anand Patkar

The <label> Element

Prof. Aarti Anand Patkar

The <select> Element
(Dropdown List)

Prof. Aarti Anand Patkar

Contd..

Prof. Aarti Anand Patkar

The <textarea> Element

Prof. Aarti Anand Patkar

The <button> Element

Prof. Aarti Anand Patkar

The <fieldset> and <legend> Elements

Prof. Aarti Anand Patkar

The <datalist> Element

Prof. Aarti Anand Patkar

The <output> Element

Prof. Aarti Anand Patkar

HTML Input Types

Prof. Aarti Anand Patkar