HTML COMMON TAGS
UNIT - 1
Topics
1. History
Learning Objectives
2. List
3. Tables
4. Images
5. Forms
6. Frames
7. Cascading Style sheets
History of Internet & Need of HTML
History
History of Internet & Need of HTML
HTML
A network is a structure linking computers
together for the purpose of sharing information
and services.
In its early days, the Internet was called
ARPANET and consisted of two network nodes
located at UCLA and Stanford, connected by a
phone line.
Today the Internet has grown to include an
uncountable number of nodes involving
computers, cell phones, PDAs, MP3 players,
gaming systems, and television stations
Its all about presentation: HTML
HTML
Timothy Berners-Lee and other researchers at the
CERN nuclear research facility near Geneva,
Switzerland laid the foundations for the World
Wide Web, or the Web, in 1989
They developed a system of interconnected
hypertext documents that allowed their users to
easily navigate from one topic to another
Hypertext is a method of organizing information
that gives the reader control over the order in
which the information is presented
Its all about presentation: HTML
HTML
The key to hypertext is the use of links,
which are the elements in a hypertext
document that allow you to jump from one
topic or document to another
A link may point to another section of the
same document, or to another document
entirely
A link can open a document on your
computer, or through the Internet, a
document on a computer anywhere in the
world
Its all about presentation: HTML
HTML
Hypertext Markup Language is the official language of
the World Wide Web and was first conceived in 1990.
HTML is a product of SGML (Standard Generalized
Markup Language)
Time line of HTML
HTML HTML2 CSS1 + JavaScript
1991 1994 1996
HTML4 CSS 2XTTML1
1997 1998 2000
Table less web DesignAJAXHTML5
2002 2005 2009
HTML : Hello World
Simple Html Program
open Notepad and type the following code.
<html>
<head>
<title> My First Web Page </title>
</head>
<body>
<h1> Hello World</h1>
<h2>Hi I started learning web programming</h2>
</body>
</html>
Save the file with .html
Open or run the file by double clicking on it.
HTML : Lists
. 3 types of lists
Unordered list
Bulleted items
Ordered list
Html tags
Numbered items
Definition List
a list of items, with a description of each
item
Html tags
Unordered list
. The tag for a bulleted list is <ul> & </ul>
Each item is surrounded with the open and
close
<li> tag (li = list item)
Bullets can be changed to squares or circles
with the optional code type=square or
type=circle in the <ul> tag.
Code View
<ul>
<li>Milk</li>
<li>Eggs</li>
</ul>
Browser View
Milk
Eggs
Html tags
ordered list
The tag for a numbered list is <ol> & </ol>
Each item is surrounded with the open and close
<li> tag (li = list item)
List items will be numbered
Numbers can be changed to a, A, i, or I with the
optional code type=a, type=A, etc in the <ol>
tag.
Code View
<ol>
<li>George Washington</li>
Browser View
<li>John Adams</li>
</ol>
1. George Washington
2. Johns Adam
Definition list
The tag for this list is <dl> & </dl>
Each term is surrounded with the <dt> tag
and each description is surrounded with
the <dd> tag
Browser View
Browser View
Electron
Html tags
Code View
- carries a negative electric
charge
Neutron
<dl>
- carries no electric charge
<dt>Electron</dt>
<dd>- carries a negative electric charge</dd>
<dt>Neutron</dt>
<dd>- carries no electric charge</dd>
</dl>
HTML : Tables
The HTML table allows web designers to
arrange &
organize data -- text, images, hyperlinks, forms, form
fields, other tables, etc.
Tables are made up of rows and columns.
Rows are horizontally arranged cells
Columns are vertically arranged cells
Html tags
Table components
Basic HTML table tags:
o <table></table> required
oDefines the beginning and end of the table
o <tr></tr> required
oTable Row - Defines the beginning and end of a horizontal
row.
o <td></td> required
oTable Cell - Defines an individual cell. Cells are always
placed inside a row. td stands for table data.
Html tags
Table : Example
Code
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr><td>3</td><td>4</td></tr>
</table>
Browser View
1
Table Heading
Additional HTML table tags:
o <th></th> optional
o Defines a table header row. Used instead of td.
o Text is bold & centered within the cell
Html tags
o <caption></caption> optional
o Sets a caption for the table. Goes after the table tag
but not inside tr or td. There should be only one
caption per table. Appears centered above the table.
Code
Browser View
<table>
Period Class
<caption>My Schedule</caption>
1st
PE
<tr><th>Period</th><th>Class</th></tr>
Math
<tr><td>1st</td><td>PE</td></tr> 2nd
<tr><td>2nd</td><td>Math</td></tr>
</table>
Table Alignment
Attributes that can be added to th, tr, & td tags:
o Alignment optional
o Alignment can be added to the table, tr, th, & td tag.
o If applied to the table tag, the entire table will align.
o If applied to the tr tag, the entire row will align.
o If applied to the th or td tag, just the cell will align.
o Alignment options: left, center, & right
o Contents will left align by default
Html tags
Code
<table border=1><tr align=right>
<td>Test1</td><td>Test2</td></tr><tr>
<td>Test3</td><td>Test4</td></tr></table>
Browser View
Test1
Test3
Test2
Test4
Table Spanning
o Column & Row span optional
o Column span (colspan) is added to a th or td tag
o Row span (rowspan) can added to the tr tag
Html tags
Code
<table>
<tr>
<td colspan=2><center>Heading</center></td>
</tr>
<tr>
<td>Entry1</td>
<td>Entry2</td>
</tr>
</table>
Browser View
Heading
Entry1
Entry2
Table : Example
Html tags
Code
<table border=10 bordercolor=orange cellspacing=2
cellpadding=3 width=500> <caption>My
Schedule</caption>
<tr><th>Period</th><th>Class</th></tr>
<tr><td align=center>1st</td> <td>Web Design</td></tr>
<tr><td align=center>2nd</td><td>Social Studies</td></tr>
<tr><td colspan=2>Lunch</td></tr>
<tr><td align=center>3rd</td><td>English</td></tr>
Browser View
</table>
HTML : IMAGES
Images are embedded within a web page using the IMG tag.
<img src=flowes.gif width=100 height=100 alt=flowers hspace=20>
Attributes supported for IMG tag are:
src URL of the image source file
alt - alternative text
Align how image aligns, deprecated
Height height to reserve for image, deprecated
Width - width to reserve for image, deprecated
Html tags
Border - size of border surrounding image, deprecated
Hspace horizontal white space on either side of image, deprecated
Vspace - vertical white space on either side of image, deprecated
Id - image name
Class - style sheet class
Style - style sheet information
Title - element title
IMAGE : Example
code
<img src=logo.jpg width=100 height=100>
<img src=logo.jpg width=50 height=50>
<p>
<img src=logo.jpg width=300 height=300>
<img src=logo.jpg width=200 height=150>
Html tags
Browser View
HTML : FORMS
An HTML form is not a visual element.
It is a container and can contain one or more buttons, textboxes or
other form elements.
The form elements can be used to access information from the
reader and then process that information within the webpage.
The information can also be sent to a CGI or web server
Html tags
application for further processing.
A form is created using the begin and end form tags <FORM> and
</FORM>.
FORM contains different attribute like 1. action 2. method 3. name
..etc.
Forms
Syntax for Creating Form
<Form name=mailForm
action = url Method=post>
</Form>
Example :
<html>
<head> <title> form demo</title></head>
Html tags
<body>
<form name=user_registration action=www.mgit.ac.in/register.php
Method=post>
<input type="text" name="firstname">
<input type="submit value="Submit">
</form></body>
<html>
Form : attributes
Form attributes are:
1.
Name Form name.
2.
Target Location of window where from responses are sent.
3.
Action URL of web server application that process
form
information.
4.
Enctype By default this attribute has a value of application
Html tags
x/www- form-url encoded, but can be set to multipart/form-data
if the file upload element is used. Not all browsers support the
latter encoding type.
5.
Method A value of get or post, which determines how form
information is sent.
Form : Elements
Html tags
HTML Forms.html
Cascading Style Sheets
(css)
What was the term cascading style sheet mean?
Html tags
Who wins when there's a conflict? More than one style can apply to a
given tag. For example, there's always the default browser-defined
style, such as black as the default text color. If you specify some other
color in a CSS rule, the cascade allows your rule to dominate, to have
precedence over the built-in style.
But how does the browser decide which style wins out if
two CSS rules conflict with each other?
Should the conflicting styles be combined? What if the styles are
completely incompatible such as one style specifying italic and
the other non-italic?
Probably the most easily understood collision rule
involves where the style was defined.
Your CSS styles can be defined in four major locations
1. Browser Default Style
2. External Style Sheet (.css file)
3. Embedded Style Sheet (specified in head)
4. inline Style sheet (specified in the tag itself)
Html tags
Generally the style closest to the element wins.
First the inline style wins and if inline is not defined next
Embedded style wins, if it is also not specified External
style wins and last priority goes to Browser Default style.
Html tags
CSS EXAMPLES
Element Selector
CSS EXAMPLES
Id Selector
CSS EXAMPLES
Class Selector
CSS EXAMPLES
Element Class Selector
CSS EXAMPLES
Grouping Selectors
CSS SELECTORS
The element Selector
The element selector selects elements based on the element
name.
You can select all <p> elements on a page like this: (all <p>
elements will be center-aligned, with a red text color)
The id Selector
The id selector uses the id attribute of an HTML tag to find the
specific element.
An id should be unique within a page, so you should use the
id selector when you want to find a single, unique element.
To find an element with a specific id, write a hash character,
followed by the id of the element.
The class Selector
The class selector finds elements with the specific class.
The class selector uses the HTML class attribute.
To find elements with a specific class, write a period
character, followed by the name of the class:
Do NOT start a class name with a number!
For Style Sheet attributes visit :
http://www.w3schools.com/css/css_examples.asp
Frames
HTML frames are used to divide your browser
window into multiple sections where each
section can load a separate HTML document.
A collection of frames in the browser window is
known as a frameset.
The window is divided into frames in a similar
way the tables are organized: into rows and
columns.
Creating Frames
To create a frame use <frameset> tag instead of
<body> tag.
The rows attribute of <frameset> tag defines
horizontal
frames
and cols attribute
defines
vertical frames.
Each frame is indicated by <frame> tag and it
defines which HTML document shall open into
the frame.
Frame Example
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body> Your browser does not support frames. </body>
</noframes>
</frameset>
</html>
Frames : Disadvantages
There are few drawbacks with using frames, so it's never
recommended to use frames in your WebPages:
Some smaller devices cannot cope with frames often
because their screen is not big enough to be divided up.
Sometimes your page will be displayed differently on
different computers due to different screen resolution.
The browser's back button might not work as the user
hopes.
There are still few browsers that do not support frame
technology.
