Website Design Lecturer 2: Prepared by Japhet Kaijage PHONE NUMBER: 0768572253

WEBSITE DESIGN
LECTURER 2
PREPARED BY JAPHET KAIJAGE

PHONE NUMBER: 0768572253
E-MAIL: [email protected]
INTRODUCTION TO HTML
WHAT IS HTML?
HTML is the standard markup language for creating Web pages.
•HTML stands for Hyper Text Markup Language.
•HTML describes the structure of Web pages using markup.
•HTML elements are the building blocks of HTML pages.
•HTML elements are represented by tags.
•HTML tags label pieces of content such as "heading", "paragraph",
"table", and so on.
•Browsers do not display the HTML tags, but use them to render the
content of the page.
2
WHAT IS HTML?
Hypertext refers to the way in which Web pages (HTML documents)
are linked together. Thus, the link available on a webpage is called
Hypertext.
As its name suggests, HTML is a Markup Language which means
you use HTML to simply "mark-up" a text document with tags that tell
a Web browser how to structure it to display.
Originally, HTML was developed with the intent of defining the
structure of documents like headings, paragraphs, lists, and so forth to
facilitate the sharing of scientific information between researchers.
Now, HTML is being widely used to format web pages with the help
of different tags available in HTML language.
3
A SIMPLE HTML DOCUMENT

EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html> 4
HTML TAGS
HTML tags are element names surrounded by angle brackets:
<tagname>content goes here...</tagname>
•HTML tags normally come in pairs like <p> and </p>
•The first tag in a pair is the start tag, the second tag is the
end tag
•The end tag is written like the start tag, but with a forward
slash inserted before the tag name.
NOTE: The start tag is also called the opening tag, and the
end tag the closing tag.
5
WEB BROWSERS
•The purpose of a web browser (Chrome, IE, Firefox, Safari)
is to read HTML documents and display them.
•The browser does not display the HTML tags, but uses them
to determine how to display the document:
6
HTML PAGE STRUCTURE

Below is a visualization of an HTML page structure:
Note: Only the content inside the <body> section (the white area above) is displayed
in a browser. 7
THE <!DOCTYPE> DECLARATION

The <!DOCTYPE> declaration represents the document
type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any
HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is: <!
DOCTYPE html>
8
HTML VERSIONS
•Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
9
HTML EDITORS
Write HTML Using Notepad or TextEdit
•Web pages can be created and modified by using professional HTML editors.
•However, for learning HTML we recommend a simple text editor like Notepad (PC)
or TextEdit (Mac).
•We believe using a simple text editor is a good way to learn HTML.
•Follow the four steps below to create your first web page with Notepad or TextEdit.
Step 1 on Open Notepad++ (PC)
•Windows 8 or later:
•Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
•Windows 7 or earlier:
•Open Start > Programs > Accessories > Notepad
10
HTML EDITORS
Step 2: Write Some HTML
Write some HTML into Notepad++.
<!DOCTYPE html>
<html>
<body>
</body>
</html> 11
HTML EDITORS
Step 2: Write Some HTML
Write some HTML into Notepad++.
12
HTML EDITORS
Step 3: Save the HTML Page
•Save the file on your computer. Select File > Save as in the Notepad menu.
•Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred
encoding for HTML files).
Note: You can use either .htm or .html as file extension. There is no difference, it is up 13
to you.
HTML EDITORS
Step 4: View the HTML Page in Your Browser
•Open the saved HTML file in your favorite browser (double click on the file, or
right-click - and choose "Open with").
•The result will look much like this:
14
HTML DOCUMENTS
All HTML documents must start with a document type declaration: <!
DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and
</body>.
Example
<!DOCTYPE html>
<html>
<body>
</body>
</html>
15
HTML HEADINGS
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading:
Example
<h1>This is heading 1</h1>
HTML PARAGRAPHS
HTML paragraphs are defined with the <p> tag:
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
16
HTML LINKS
HTML links are defined with the <a> tag:
Example
<a href="https://www.kiu.ac.tz">This is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML
elements.
HTML IMAGES
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided
as attributes:
Example:<img src="vlcsnap.jpg" alt="W3Schools.com" width="104" hei
ght="142"> 17
HTML BUTTONS
HTML buttons are defined with the <button> tag:
Example: <button>Click me</button>
HTML LISTS
HTML lists are defined with the <ul> (unordered/bullet list) or the
<ol> (ordered/numbered list) tag, followed by <li> tags (list items):
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul> 18
LINE BREAK TAG

Whenever you use the <br /> element, anything following it starts from the next line. This tag is
an example of an empty element, where you do not need opening and closing tags, as there is
nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this
space, older browsers will have trouble rendering the line break, while if you miss the forward
slash character and just use <br> it is not valid in XHTML.
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />You delivered your assignment on time.<br />Thanks<br />Mahnaz</p>
</body>
</html>
19
CENTERING CONTENT
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<!DOCTYPE html>
<html>
<head>
<title> Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
20
HORIZONTAL LINES
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates a line from the current position in the
document to the right margin and breaks the line accordingly.
For example, you may want to give a line between two paragraphs as in the given example below :
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
21
HORIZONTAL LINES-Cont..
Again <hr /> tag is an example of the empty element, where you do
not need opening and closing tags, as there is nothing to go in between
them.
The <hr /> element has a space between the characters hr and the
forward slash. If you omit this space, older browsers will have trouble
rendering the horizontal line, while if you miss the forward slash
character and just use <hr> it is not valid in XHTML
22
PRESERVE FORMATTING
Sometimes, you want your text to follow the exact format of how it is written in the HTML document. In these cases, you can
use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting of the source document.
Example NOTE: Try using the same code without keeping it inside <pre>...</pre> tags
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)}
</pre>
</body>
</html>
23
NONBREAKING SPACES
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser to split
the "12, Angry" and "Men" across two lines:
An example of this technique appears in the movie "12 Angry Men."
In cases, where you do not want the client browser to break text, you should use a
nonbreaking space entity instead of a normal space. For example, when coding the
"12 Angry Men" in a paragraph, you should use something similar to the following code :
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
24
HTML ELEMENTS
An HTML element usually consists of a start tag and end tag, with the content
inserted in between:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br/>
Note:HTML elements with no content are called empty elements. Empty elements
do not have an end tag, such as the <br> element (which indicates a line break).25
HTML ELEMENTS-Cont..
So here <p>....</p> is an HTML element, <h1>...</h1> is
another HTML element. There are some HTML elements
which don't need to be closed, such as <img.../>, <hr
/> and <br /> elements. These are known as void elements.
HTML documents consists of a tree of these elements and
they specify how HTML documents should be built, and
what kind of content should be placed in what part of an
HTML document.
26
HTML TAG VS. ELEMENT

•An HTML element is defined by a starting tag. If the element contains other content, it ends with
a closing tag.
•For example, <p> is starting tag of a paragraph and </p> is closing tag of the same paragraph
but <p>This is paragraph</p> is a paragraph element.
NESTED HTML ELEMENTS
It is very much allowed to keep one HTML element inside another HTML element :
Example
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
27
</html>
HTML - ATTRIBUTES
An attribute is used to define the characteristics of an HTML element

and is placed inside the element's opening tag. All attributes are made
up of two parts − a name and a value.
•The name is the property you want to set. For example, the
paragraph <p> element in the example carries an attribute whose name
is align, which you can use to indicate the alignment of paragraph on
the page.
•The value is what you want the value of the property to be set and
always put within quotations. The below example shows three possible
values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the
World Wide Web Consortium (W3C) recommends lowercase
attributes/attribute values in their HTML 4 recommendation. 28
HTML - ATTRIBUTES
HTML ATTRIBUTES-Cont..
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>
29
HTML - ATTRIBUTES
CORE ATTRIBUTES
The four core attributes that can be used on the majority of HTML elements (although
not all) are −
Id
Title
Class
Style
The Id Attribute
•The id attribute of an HTML tag can be used to uniquely identify any element within
an HTML page. There are two primary reasons that you might want to use an id
attribute on an element :−
•The use of id attribute to distinguish between two paragraph elements as shown below.
Example
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p> 30
HTML - ATTRIBUTES
THE TITLE ATTRIBUTE

The title attribute gives a suggested title for the element. They syntax for the title
attribute is similar as explained for id attribute:−
The behavior of this attribute will depend upon the element that carries it, although it
is often displayed as a tooltip when cursor comes over the element or while the
element is loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
Note: Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you
31
used in your code is coming out as a tooltip of the cursor.
HTML - ATTRIBUTES
THE CLASS ATTRIBUTE

•The class attribute is used to associate an element with a
style sheet, and specifies the class of element.
The value of the attribute may also be a space-separated list
of class names. For example :−
class = "className1 className2 className3"
32
HTML - ATTRIBUTES
The style Attribute

•The style attribute allows you to specify Cascading Style
Sheet (CSS) rules within the element.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
33
HTML - PHRASE TAGS
Emphasized Text
Anything that appears within <em>...</em> element is
displayed as emphasized text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html> 34
HTML - PHRASE TAGS
Marked Text
Anything that appears with-in <mark>...</mark>
element, is displayed as marked with yellow ink.
Example
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html> 35
HTML - PHRASE TAGS
Strong Text
Anything that appears within <strong>...</strong> element is
displayed as important text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html> 36
HTML - PHRASE TAGS
Address Text
The <address>...</address> element is used to contain any address.
Example
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>
37
HTML - META TAGS
The <meta> tag is used to provide such additional

information. This tag is an empty element and so does not
have a closing tag but it carries information within its
attributes.
You can include one or more meta tags in your document
based on what information you want to keep in your
document but in general, meta tags do not impact physical
appearance of the document so from appearance point of
view, it does not matter if you include them or not.
You can add metadata to your web pages by placing
<meta> tags inside the header of the document which is
represented by <head> and </head> tags. 38
HTML - META TAGS
SPECIFYING KEYWORDS
You can use <meta> tag to specify important keywords related to the document and later these
keywords are used by the search engines while indexing your webpage for searching purpose.
Example
Following is an example, where we are adding HTML, Meta Tags, Metadata as important
keywords about the document.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html> 39
HTML - META TAGS
DOCUMENT DESCRIPTION
You can use <meta> tag to give a short description about the document. This again can be
used by various search engines while indexing your webpage for searching purpose.
Example
<!DOCTYPE html>
<html>
<head>
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>
40
HTML - META TAGS
DOCUMENT REFRESHING
A <meta> tag can be used to specify a duration after which your web page will keep refreshing
automatically.
Example
If you want your page keep refreshing after every 5 seconds then use the following syntax.
<!DOCTYPE html>
<html>
<head>
<meta name = "revised" content = “google, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html> 41
HTML - META TAGS
SETTING COOKIES
Cookies are data, stored in small text files on your computer and it is exchanged between web browser and
web server to keep track of various information based on your web application need. You can use <meta> tag
to store cookies on client side and later this information can be used by the Web Server to track a site visitor.
Example
Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect
page immediately then do not specify content attribute.
<!DOCTYPE html>
<html>
<head>
<meta name = "revised" content = “google, 3/7/2014" />
<meta http-equiv = "cookie" content = "userid = xyz;
expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html> 42
HTML - META TAGS
NOTE: If you do not include the expiration date and time, the cookie is
considered a session cookie and will be deleted when the user exits the
browser.
43
HTML - COMMENTS
HTML comments are placed in between  tags. So, any content
placed with-in  tags will be treated as comment and will be
completely ignored by the browser.
Example
<!DOCTYPE html>
<html>
<head> 
<title>This is document title</title>
</head> 
<body>
<p>Document content goes here.....</p>
</body>
</html> 44
HTML - COMMENTS
MULTILINE COMMENTS
You can comment multiple lines by the special beginning tag 
placed before the first line and end of the last line.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>

<p>Document content goes here.....</p>
</body>
45
</html>
HTML - IMAGES
INSERT IMAGE
You can insert any image in your web page by using <img> tag. Following is the simple syntax to
use this tag.
<img src = "Image URL" ... attributes-list/>
The <img> tag is an empty tag, which means that, it can contain only list of attributes and it has no
closing tag.
Example
To try following example, let's keep our HTML file test.htm and image file test.png in the same directory:−
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html> 46
HTML - IMAGES
SET IMAGE WIDTH/HEIGHT

You can set image width and height based on your requirement using width and height
attributes. You can specify width and height of the image in terms of either pixels or
percentage of its actual size.
Example
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>
47
HTML - IMAGES
SET IMAGE BORDER AND IMAGE ALIGNMENT

<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"
align = "right"/>
</body>
</html> 48
HTML - IMAGES
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to
create data cells. The elements under <td> are regular and left aligned by default
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
</tr>
<tr>
</tr>
</table>
</body>
49
</html>
HTML - IMAGES
TABLE HEADING
Table heading can be defined using <th> tag. This tag will be
put to replace <td> tag, which is used to represent actual data
cell. Normally you will put your top row as table heading as
shown below, otherwise you can use <th> element in any
row. Headings, which are defined in <th> tag are centered
and bold by default.
50
HTML - IMAGES
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
51
</html>
HTML - IMAGES
CELL PADDING AND CELL SPACING ATTRIBUTES

There are two attributes called cell padding and cell spacing
which you will use to adjust the white space in your table
cells. The cell spacing attribute defines space between table
cells, while cell padding represents the distance between cell
borders and the content within a cell.
52
HTML - IMAGES
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
53
</html>
HTML - IMAGES
COLSPAN AND ROWSPAN ATTRIBUTES

You will use colspan attribute if you want to
merge two or more columns into a single
column. Similar way you will use rowspan if
you want to merge two or more rows.
54
HTML - IMAGES
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html> 55
THANK YOU
56

Website Design Lecturer 2: Prepared by Japhet Kaijage PHONE NUMBER: 0768572253

Uploaded by

Copyright:

Available Formats

Website Design Lecturer 2: Prepared by Japhet Kaijage PHONE NUMBER: 0768572253

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

Website Design Lecturer 2: Prepared by Japhet Kaijage PHONE NUMBER: 0768572253

Uploaded by

Copyright:

Available Formats

WEBSITE DESIGN

PREPARED BY JAPHET KAIJAGE

A SIMPLE HTML DOCUMENT

<h1>My First Heading</h1>

HTML PAGE STRUCTURE

THE <!DOCTYPE> DECLARATION

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

<h1>My First Heading</h1>

<p>My first paragraph.</p>

LINE BREAK TAG

<h1> My First Heading </h1>

<p> My first paragraph. </p>

HTML TAG VS. ELEMENT

An attribute is used to define the characteristics of an HTML element

THE TITLE ATTRIBUTE

THE CLASS ATTRIBUTE

The style Attribute

The <meta> tag is used to provide such additional

SET IMAGE WIDTH/HEIGHT

SET IMAGE BORDER AND IMAGE ALIGNMENT

CELL PADDING AND CELL SPACING ATTRIBUTES

COLSPAN AND ROWSPAN ATTRIBUTES

You might also like