What Is A Web?: A. Veeramuthu, SL, Dept of IT 1

WEBSITE
DEVELOPMENT
What is a web?
The web is a whole bunch of interconnected computers
talking to one another. The computers (on the web)
are typically connected by phone lines, digital satellite
signals, cables, and other types of data-transfer
mechanisms. A ‘data-transfer mechanism’ is a nerd’s
way of saying: a way to move information from point
A to point B to point C and so on.
A. Veeramuthu, SL, Dept of IT 1

What is website?
A website is just a bunch of web pages

connected together through something
called links. In HTML there is a special tag
called (you guessed it!) the ‘link’ tag, and it
looks like this in its most basic form:
<a href="..."></a>
Example
<a href=" http://www.google.com ">Go to google.com</a>
A. Veeramuthu, SL, Dept of IT 2

UNIT – 2
BASICS OF HTML 5
History of HTML
 In 1989, Berners-Lee wrote an
Internet-based hypertext (coined by
Ted Nelson around 1965) system
 Berners-Lee specified HTML in 1990
 WWWC or W3C organization gives
standardization
 It is derived from SGML
 Versions of HTML – 2.0,3.2,4.0,4.01
4
What is HTML?
 Hyper Text Markup Language
 Markup language is a set of markup tags
 HTML uses markup tags to describe web pages
 Form of HTML elements consisting of tags

 Purpose of a web browser is to read HTML documents and
interpret the content of the page and it does not display the
HTML tags
 HTML elements form the building blocks of all websites
 JavaScript which affect the behavior of HTML web pages
5
Structure of HTML
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
6
<html> tag
 Delimits the beginning & end of the
HTML document
 Root element
 Contain both <head> and <body> tags
 Container for all other elements
 Syntax:
<html> …………… </html>
7
<head> tag
 Used to describe the content of the document
 Contains meta information
 Head element can includes
 Contact information
 Scripts
 Style sheets
 Comments
 Title
 Syntax:
<head> ……… </head>
8
<body> tag
 Body element is optional
 Only one body element can appear per document
 The body element delimits the document itself
 Attributes
 Bgcolor, text, link, alink, vlink
 Syntax:
<body attribute-name=“value”>………</body>
 Eg.
<body bgcolor=“#ff05f0” text=“#df8030”> colored
text is displayed in colored background</body>
9
Example: test.html
<html>
<head> My First HTML page
<title> HTML Elements</title>
</head>
<body><br/>
<h1>Head 1</h1>
<h2>Head 2</h2>
</body>
</html>
10
Output
11
Rules of HTML
 HTML is not case sensitive
 HTML attribute values may be case sensitive
 HTML is sensitive to a single white space
character
 HTML follows a content model
 Elements should have close tags
 Unused elements may minimize
 Elements should nest
 Browsers ignore unknown attributes and
elements
12
Categories of elements
 Block level elements – structural content blocks
 Eg. <p>, <h1>, etc…
 Inline elements – occur within blocks
 Eg. <b>, <strong>, etc….
 Miscellaneous elements – reference to other objects
 Eg. <img src=“test.jpeg”>
 Hard-to-characterize elements –related to browser
specific elements
 Eg. <marquee>
 Text level elements
 Physical elements
 Logical elements
13
HTML elements
Attribute name
Tag name Attribute value
<h1 align=“left”> Example Heading </h1>

Attribute End tag
Start tag Affected content
HTML element
14
Headings
 Helps to create “headings” in documents
 It support six different levels of headings
 They are,
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Most important Least important

(Big size) (Small size)
 Attributes: align=left, right, center, justify
15
Example: test.html
<html>
<head> Different Levels of Headings
<title> HTML Headings</title>
</head>
<body><hr>
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
</body>
</html>
16
Output:
17
Paragraph
 One of the most important structuring
elements is the paragraph element
 Tag used: <p>
 Syntax:
<p attribute-name=“value”> …… </p>
 Attribute: align=left, right, center and justify
 Eg.
<p align=“center”> this is a sample paragraph
for HTML document. </p>
18
Break
 This tag inserts a single carriage
return or line break into a document
 It is an empty element, that is no
close tag
 Tag used: <br>
 Syntax:
<br/>
19
Preformatted text
 Some time spacing, tabs and returns are so
important in the text of HTML
 It preserve the intended format to ensure
proper meaning
 Tag used: <pre>
 Syntax:
<pre> ……… </pre>
 Eg.
Source codes, poetry, etc…
20
Example: test.html
<html>
<head> Different Elements
<title> HTML elements</title>
</head>
<body><hr>
<p align="center"> This is center aligned paragraph </p>
<br/>
<p>
This is P r e f o r matted
T
E
X
T
Spaces are OK !
</p>
<pre>
This is P r e f o r matted
T
E
X
T
Spaces are OK !
</pre>
</body>
</html>
21
Output:
22
<font> tag
 Helps to manipulate fonts
 Two types
 Proportional font
 Fixed font
 Tag used: <font>
 Attributes
 Color –in hex(00H-FFH for each RGB)
 Size –in number
 Face –any of the font family
23
Example: font.html
<html>
<head><title>Font Test</title></head>
<body>
<h1> Font Example</h1><hr/>
<p><font size="3" color="red">This is some
text!</font></p>
<p><font size="2" color="blue">This is some
text!</font></p>
<p><font face="verdana" color="green">This is
some text!</font></p>
</body>
</html>
24
Output:
25
Text Level Elements
 Helps to affects the text contents
 Types
 Physical elements
 Logical elements
26
Physical Elements
 Helps to affects the text physically
 The elements have no meaning other than to make text render in
a particular way.
 Elements are,
 <b>…</b>
 <i>…</i>
 <tt>…</tt>
 <u>…</u>
 <s>…</s>
 <strike>…</strike>
 <big>…</big>
 <small>…</small>
 <sup>…</sup>
 <sub>…</sub>
27
Example: phy.html
<html>
<head><title>Physical Text Element</title></head>
<body>
<h1 align="center">Physical Text Elements</h1>
<hr width="2000" size="10" noshade="noshade"/>
<p>
This is <b>Bold</b><br/>
This is <i>Italics</i><br/>
This is <tt>Mono spaced tele-type</tt><br/>
This is <u>Underline</u><br/>
This is <s>Strike using S tag</s><br/>
This is <strike>Strike using Strike tag</strike><br/>
This is <big>Big</big><br/>
This is even <big><big>Bigger</big></big><br/>
This is <small>Small</small><br/>
This is even <small><small>Smaller</small></small><br/>
This is <sup>Superscript</sup><br/>
This is <sub>Superscript</sub><br/>
</p>
</body>
<html>
28
Output:
29
Logical Elements
 It indicate the type of content that they enclose
 Elements are,
 <abbr>…</abbr>
 <acronym>…</acronym>
 <cite>…</cite>
 <code>…</code>
 <dfn>…</dfn>
 <em>…</em>
 <kbd>…</kbd>
 <kbd>…</kbd>
 <q>…</q>
 <samp>…<samp>
 <var>…</var>
30
Example: logical.html
<html>
<head><title>Logical Text Element</title></head>
<body>
<h1 align="center">Logical Text Elements</h1>
<hr width="2000" size="10" noshade="noshade"/>
<p>
<acronym>WWW</acronym>is an acronym<br/>
<abbr>Mr.</abbr>is an abbreviation<br/>
this is <em>Emphasis</em><br/>
this is a <cite>Citation</cite><br/>
this is <code>Code</code><br/>
this is <dfn>Definition</dfn><br/>
this is <kbd>Keyboard</kbd><br/>
this is a <q>Quotation</q><br/>
this is <samp>Sample<samp><br/>
this is <var>Variable</var><br/>
this is <strong>Strong</strong>
</p>
</body>
<html>
31
Output:
32
Lists
 HTML has three basic forms of lists.
They are,
1. Ordered list
2. Unordered list
3. Definition list
 Lists are block-level and also they can
be nested
33
Ordered list
 Helps to list the items in order which is automatically
numbered by the browser
 Tag used: <ol> and <li>
 Syntax:
<ol att-name=“att-value”>
<li att-name=“att-value”> … </li>
<li …> … </li>
.
</ol>
 Attributes
1. compact – “compact”
2. type – a, A, i, I, 1
3. start – at any point. Eg. “3”
34
Example: list1.html
<html>
<head> <b>Lists</b><hr>
<title>Ordered List Example</title>
</head>
<body>
<p>Simple Ordered List</p>
<ol>
<li> C Language</li>
<li> C++ Language</li>
<li> Java Language</li>
</ol>
<p>Different types of Ordered List</p>
<ol>
<li type="a"> C Language</li>
<li type="A"> C++ Language</li>
<li type="i"> Java Language</li>
<li type="I"> C#.NET</li>
<li type="1"> J2EE</li>
</ol>
35
list1.html (con…)
<p>Ordered List can start with different values </p>
<ol type="a" start="5">
<li value="10"> Java Language</li>
</ol>
<p>Ordered List can be Nested</p>
<ol>
<li>Data Types</li>
<ol>
<li>1. char</li>
<ol>
<li>1. 1. Definition</li>
</ol>
</ol>
<li>Variables</li>
<li>Constants</li>
</ol>
</body>
</html>
36
Output:
37
Unordered List
 Helps to list the items without any order
 Tag used: <ul> and <li>
 Syntax:
<ul att-name=“att-value”>
<li att-name=“att-value”> … </li>
<li …> … </li>
.
</ul>
 Attributes
type – disc (default), circle, square
38
Example: list2.html
<html>
<title>UnOrdered List Example</title>
</head>
<body>
<p>Simple UnOrdered List</p>
<ul>
</ul>
<p>Different types of UnOrdered List</p>
<ul type="square">
<li type="circle"> C Language</li>
<li type="disc"> C++ Language</li>
</ul>
</body>
</html>
39
Output:
40
Definition List
 Helps to list the terms paired with associated
definitions
 Tags used: <dl>, <dt> and <dd>
 Syntax:
<dl>
<dt> Definition Term </dt>

<dd>Definition Data </dd>
</dl>
41
Example: list3.html
<html>
<title>Definition List Example</title>
</head>
<body>
<p>Simple definition List</p>
<dl>
<dt> Class</dt>
<dd> It is a container for variable and methods</dd>
<dt> Object</dt>
<dd> Instance of a class</dd>
</dl>
</body>
</html>
42
Output:
43
<address> tag
 Helps to surround information such as,
 The signature of the person
 Company address
 Phone
 Email, etc…
 Tag used: <address>
 Syntax:
<address>
…… any details …
</address>
44
Example: addr.html
<html>
<head> Address Element
<title> HTML elements</title>
</head>
<body><hr/>
<address>
Mr. ABDUL<br>
Department of IT<br>
ISBAT<br>
Kampala<br>
</address>
</body>
</html>
45
Output:
46
Table element
 A table is an orderly arrangement of data
distributed across a grid of rows and columns
 It similar to spreadsheets
 Table can contains information about,
 Dynamic
 Interactive
 Result of query database
 A table places information inside the cells formed
by dividing a rectangle into rows and columns
 Most cells contains data, some cells usually on table
top or side contain headings
47
Table element (con…)
 A basic four elements of table
 <table> …</table>
 <th> …</th>
 <tr> …</tr>
 <td> …</td>
 Optional element: <caption> …</caption>
 Attributes
 Border –in number
 Align and valign –left, right, center and top, middle, bottom
 Width- in number
 Height –in number
 Rowspan
 Colspan
 Cellpadding
 Cellspacing
 Bgcolor – color information
 Background –to insert image
48
Example:1 table1.html
<html>
<head><title>Table Testing</title></head>
<body>
<h1>Table Example</h1>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
49
Example:1 table1.html (con…)
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
50
Output:
51
<html>
<body>
<h1>Table Example</h1><hr/>
<h4>Table headers:</h4>
<table border="1">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
52
<h4>Vertical headers:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
53
Output:
54
<html>
<body>
<table border="4">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
55
Output:
56
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
57
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
58
Output:
59
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td> 60
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
61
Output:
62
<html>
<body>
<h1>Cell allignment example</h1><hr/><br/>
<table border="1" width="300">
<tr>
<td align="left">Left</td>
<td align="center">Center</td>
<td align="right">Right</td>
</tr>
<tr>
<td valign="top" height="100">Top</td>
<td valign="middle">Middle</td>
<td valign="bottom">Bottom</td>
</tr>
</table>
</body>
63
</html>
Output:
64
<html>
<body>
<h1>Cell cellpadding and cellspacing example</h1><hr/><br/>
<table border="2" cellspacing="25" cellpadding="10">
<tr>
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
</tr>
<tr>
<td>Element1</td>
<td>Element2</td>
<td>Element3</td>
</tr>
</table>
</body>
65
</html>
Output:
66
<html>
<body>
<h1>Background color example</h1><hr/><br/>
<table bgcolor="green" border="2" cellspacing="0"
cellpadding="10">
<tr>
<th bgcolor="lightblue">Light Blue</th>
</tr>
<tr bgcolor="Orange">
<td>Orange</td>
<td>Orange</td>
<td>Orange</td>
</tr>
67
<tr>
<td bgcolor="red">Red</td>
<td bgcolor="pink">Pink</td>
<td bgcolor="blue">Blue</td>
</tr>
<tr>
<td>Green</td>
<td>Green</td>
<td>Green</td>
</tr>
</table>
</body>
</html>
68
Output:
69
<html>
<body>
<h1>Background color example</h1><hr/><br/>
<table background="flower.jpg" width="200" height="100" border="2"
cellspacing="0" cellpadding="10">
<tr>
<td><font color="orange" size="20">Orange</font></td>
<td><font color="yellow" size="20">Yellow</font></td>
<td><font color="pink" size="10">Pink</font></td>
</tr>
<tr>
<td><font color="#ff0000" size="20">Red</font></td>
<td><font color="#00ff00" size="20">Green</font></td>
<td><font color="#0000ff" size="10">Blue</font></td>
</tr>
</table>
</body>
</html> 70
Output:
71
Special characters in HTML
 Copyright Sign
 Registered Sign
 Euro Sign
 Trade Mark
 Arrows
72

What Is A Web?: A. Veeramuthu, SL, Dept of IT 1

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

What Is A Web?: A. Veeramuthu, SL, Dept of IT 1

Uploaded by

Copyright:

Available Formats

WEBSITE

A. Veeramuthu, SL, Dept of IT 1

A website is just a bunch of web pages

A. Veeramuthu, SL, Dept of IT 2

 Hyper Text Markup Language

 Markup language is a set of markup tags

 HTML uses markup tags to describe web pages

 Form of HTML elements consisting of tags

Tag name Attribute value

<h1 align=“left”> Example Heading </h1>

Start tag Affected content

Most important Least important

 Attributes: align=left, right, center, justify

<dt> Definition Term </dt>

You might also like