html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
, headings, paragraphs, breaks, preformatted text, and font styling.">
Scribd
Upload
49 views72 pages

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

The document discusses website development and basics of HTML. It explains what a web and website are, and how they are connected through links. It then covers the history, structure, elements and tags of HTML such as <html>, <head>, <body>, headings, paragraphs, breaks, preformatted text, and font styling.

Uploaded by

Daniel Bakunzi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
49 views72 pages

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

The document discusses website development and basics of HTML. It explains what a web and website are, and how they are connected through links. It then covers the history, structure, elements and tags of HTML such as <html>, <head>, <body>, headings, paragraphs, breaks, preformatted text, and font styling.

Uploaded by

Daniel Bakunzi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 72

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> C Language</li>
<li> C++ Language</li>
<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>
<head> <b>Lists</b><hr>
<title>UnOrdered List Example</title>
</head>
<body>
<p>Simple UnOrdered List</p>
<ul>
<li> C Language</li>
<li> C++ Language</li>
<li> Java Language</li>
</ul>
<p>Different types of UnOrdered List</p>
<ul type="square">
<li type="circle"> C Language</li>
<li type="disc"> C++ Language</li>
<li> Java 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>
<head> <b>Lists</b><hr>
<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
Example:2 table2.html
<html>
<head><title>Table Testing</title></head>
<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
Example:2 table2.html (con…)
<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
Example:3 table3.html
<html>
<head><title>Table Testing</title></head>
<body>
<h1>Table Example</h1><hr/>
<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
Example:4 table4.html
<html>
<head><title>Table Testing</title></head>
<body>
<h1>Table Example</h1><hr/>
<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
Example:4 table4.html (con…)
<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
Example:5 table5.html
<html>
<head><title>Table Testing</title></head>
<body>
<h1>Table Example</h1><hr/>
<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>
Example:5 table5.html (con…)
<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
Example:6 table6.html
<html>
<head><title>Table Testing</title></head>
<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
Example:7 table7.html
<html>
<head><title>Table Testing</title></head>
<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
Example:8 table8.html
<html>
<head><title>Table Testing</title></head>
<body>
<h1>Background color example</h1><hr/><br/>
<table bgcolor="green" border="2" cellspacing="0"
cellpadding="10">
<tr>
<th bgcolor="lightblue">Light Blue</th>
<th bgcolor="lightblue">Light Blue</th>
<th bgcolor="lightblue">Light Blue</th>
</tr>
<tr bgcolor="Orange">
<td>Orange</td>
<td>Orange</td>
<td>Orange</td>
</tr>
67
Example:8 table8.html (con…)
<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
Example:9 table9.html
<html>
<head><title>Table Testing</title></head>
<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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy