Scribd
Upload
16 views62 pages

Web Design

The document provides an overview of HTML (Hypertext Markup Language) and how it is used to structure and format web pages, describing various HTML tags for text formatting, links, lists, images, and forms. It explains key HTML tags and concepts such as the basic page structure with <html>, <head>, <title>, and <body> tags, as well as tags for text styling, links, comments, and more. The presentation aims to introduce students to the basic building blocks of HTML for designing and developing web pages.

Uploaded by

Marvin C Moono
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views62 pages

Web Design

The document provides an overview of HTML (Hypertext Markup Language) and how it is used to structure and format web pages, describing various HTML tags for text formatting, links, lists, images, and forms. It explains key HTML tags and concepts such as the basic page structure with <html>, <head>, <title>, and <body> tags, as well as tags for text styling, links, comments, and more. The presentation aims to introduce students to the basic building blocks of HTML for designing and developing web pages.

Uploaded by

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

ST CLEMENT’S SECONDARY SCHOOL

WEB DESIGN
WEB DESIGNING USING HTML
GRADE 12
WHAT IS HTML?

• HTML otherwise known as HyperText Markup


Language is the language used to create web sites

PRESENTER CHONGO MARIO MAKANGHA


HTML INTRODUCTION
• HTML is a markup language for describing web
documents (web pages).
• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document
content

PRESENTER CHONGO MARIO MAKANGHA


TAGS
• HTML uses angle tags <> which are classified as opening
tags <> and closing tags, which contain a forward slash </>
• Text is inserted between these opening and closing tags.
• To mark text in Bold print, use the opening tag <b> and the
closing tag <b/> where text, for example, “Zambia” is
inserted as follows: <b> Zambia </b>
• However, this does not apply to all tags for example to go
to a new line using <br> does not require a closing tag

PRESENTER CHONGO MARIO MAKANGHA


NESTED TAGS
• Tags can be nested within each other where one set
of tags is inserted between the tags of another
• For example to print text in the biggest font and at
the same time make it italic, the tags <h1></h1>,
<i></i> are used as follows: <h1><I> Zambezi River
</I> </h1>
• When closing the tags after the inserted text the last
tag used is closed first

PRESENTER CHONGO MARIO MAKANGHA


STRUCTURE OF A WEB PAGE

• Web pages share a common structure


• A typical website would have a pair each of the
following:
<html> </html>
<head> </head>
<title> </title>
<body> </body>
PRESENTER CHONGO MARIO MAKANGHA
<!DOCTYPE HTML>
<HTML>
<head>
<title>Heading </title>
</head>
<body>
This is where you should place the text
and images on your Web page
</body>
</html>
PRESENTER CHONGO MARIO MAKANGHA
THE <TITLE> TAG
• This is the identity of the content of the page
• The title is critical and should be chosen well
• It has a bearing on ranking of content it represents in
some search engines
• As an identity of the page, the title will also appear
in lists under favorites, History and Bookmark

PRESENTER CHONGO MARIO MAKANGHA


TEXT FORMATTING
• In HTML, special tags are used to format text
• Create paragraphs,
• Move to next line
• And create headings eg
<b> Bold Face </b>
<I> Italics </I>
<u> Underline </u>
<p> New Paragraph </p>
<br> Next Line
PRESENTER CHONGO MARIO MAKANGHA
CHANGING FONT
• The expression <font face = “fontname”> </font> can be
used to change the font of the enclosed text
• To change the size of text use the expression <FONT SIZE =
n> </font> where n is a number between 1 and 6
• To change the color, use <font color=“colorname”> </font>
• The color can also be represented by using hexadecimal
values such as for “red” the value is #ffffff
• HTML allows for more values to be changed at once eg
font, size, color of the text: <font size=4 FACE=“Tahoma”
COLOR=“Black”> </font>
PRESENTER CHONGO MARIO MAKANGHA
HEADINGS

• Sections of a web page have headings of different


font size eg <hn> </hn> where n is number between
1 and 6
• In the example above, 1 is the largest font size while
6 is the smallest

PRESENTER CHONGO MARIO MAKANGHA


TEXT ALIGNMENT

• The ALIGN attribute can be inserted in the <p> and


<hn> tags to align text right, left, justify and center
• For example, <h1 ALIGN=CENTER> Ministry of
Education </h1> creates the biggest size and
centered heading in a section

PRESENTER CHONGO MARIO MAKANGHA


COMMENTS

• Comments do not appear in the body of text on a


web page
• But they are useful in explaining some important
aspects of the page
• To create a comment, use the following tag <!--
comment -->

PRESENTER CHONGO MARIO MAKANGHA


CREATING BLINKING TEXT

• Text on a web page can be made to blink using the


tag <blink> </blink>
• The caution however is not to use this feature of
HTML too much as it may be an annoying visual to
visitors to the page
• Some web browsers such as Internet Explorer do not
support this tag

PRESENTER CHONGO MARIO MAKANGHA


PAGE FORMATTING

• To define the background color, use the BGCOLOR


attribute in the <body> tag
• To define the text color, use the TEXT attribute in the
<body> tag
• To define the size of the text, type <BASEFONT
SIZE=n>
• (check example in next slide)

PRESENTER CHONGO MARIO MAKANGHA


PAGE FORMATTING CONT’
• EXAMPLE
<HTML>
<head>
<title> Example </title>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=6>
This is where you would include the text and images on your
web page
</body>
</html>
PRESENTER CHONGO MARIO MAKANGHA
INSERTING IMAGES

• Type <img src = “image/2.jpg”> where image/2.jpg


indicates the location and the name of the image
file
• The WIDTH =n and HEIGHT=n attributes can be used
to adjust the size of an image
• The attribute BORDER=n can be used to add a
border n pixels thick around the image

PRESENTER CHONGO MARIO MAKANGHA


ALTERNATE TEXT

• Some browsers don’t support images. In this case,


the ALT attribute can be used to create text that
appears instead of the image
• Example
<image src=“satellite.jpg” ALT=“Picture of satellite”>

PRESENTER CHONGO MARIO MAKANGHA


LINKS

• A link lets you move from one page to another, play


movies and sound, send email, download files, and
more …
• A link has three parts: a destination, a label and a
target
To create a link type
<a href=“page.html”> label </a>

PRESENTER CHONGO MARIO MAKANGHA


ANATOMY OF A LINK
• <a href=“page.html”> label </a>

• In the above link, “page.html” is the destination.


• the destination specifies the address of the Web
page or file the user will access when the link is
clicked
• The label is the text that will appear underlined or
highlighted on the page
PRESENTER CHONGO MARIO MAKANGHA
EXAMPLE OF A LINK

• To create a link to CNN, type:


<a href=http://www.cnn.com>CNN</a>

• To create a link to MIT, type:


<a href=http://www.mit.com>MIT</A>
• To create a link to an email address, type:
<a href=“mailto:email_address”> Label </a>
PRESENTER CHONGO MARIO MAKANGHA
ANCHORS

• To create an anchor, type <a name=“anchor


name”> label </a> at the point in the Web page
where you want the user to jump to
• To create the link, type <a href=“#anchor name”>
label </a> at the point in the text where you want
the link to appear

PRESENTER CHONGO MARIO MAKANGHA


EXAMPLE: ANCHOR
• <a href=“#chap2”>Chapter Two</a><br>
Table of Contents
Introduction
Link
Chapter One
Chapter Two

• <a href=“#chap2”>Chapter Two</a><br> Introduction


Anchor (Text for
Introduction)
Chapter 1
(Text for Chapter 1)
PRESENTER CHONGO MARIO MAKANGHA
ORDERED LISTS
• These are lists that are • This is how the
numbered webpage
• The following is an ordered, would look like:
using the tags <ol></ol> 1. This is step one
<ol> 2. This is step two
<li> This is step one 3. This is step three
<li> This is step two
<li> This is step three
</ol>
PRESENTER CHONGO MARIO MAKANGHA
ADDING TYPE ATTRIBUTE TO LISTS

• The attribute TYPE=X allows you to change the kind


of symbol that appears in the list
- A is for UPPER CASE letters
- a is for lower case letters
- I is for UPPER CASE Roman numerals
- i is for lower case Roman letters

PRESENTER CHONGO MARIO MAKANGHA


UNORDERED LISTS
• These are lists that are • This is how the
unnumbered webpage
• The following is an would look like:
unordered, 1. First item in list
using <ul></ul> 2. Second item in list
<ul> 3. Third item in list
<li> First item in list
<li> Second item in list
<li> Third item in list
</ul>
PRESENTER CHONGO MARIO MAKANGHA
ADDING TYPE ATTRIBUTE TO LISTS
• The attribute TYPE=X allows insertion of bullets to unordered
listing
- The attribute ‘circle’ means an empty round bullet
- The attribute ‘square’ refers to a square bullet
- ‘disc’ means a solid round bullet. This is the default value

PRESENTER CHONGO MARIO MAKANGHA


• What are forms?
FORM
✓ form is an area of a web page that allows users to
enter information into fields
✓A form may be used to collect personal information,
opinions in polls, user preferences and other kinds of
information
✓There are two basic components of a Web form:
❖the shell - the part that the user fills out
❖script - which processes the information
• HTML tags are used to create the form shell. Using HTML you
can create text boxes, radio buttons, checkboxes, drop-
down menus and more….
PRESENTER CHONGO MARIO MAKANGHA
<form> FORM EXAMPLE
First name: <br> First name:
<Input type =“text”name= “firstname” ><br>
Lastname: <br>
Lastname:
<input type = “text” name =“lastname”>
</form>

PRESENTER CHONGO MARIO MAKANGHA


THE FORM SHELL
• A Form shell has three important parts:
✓The <FORM> tag, which includes the address of the script
which will process the form
✓The form elements, are objects like text boxes and radio
buttons
✓The submit button which triggers the script to send the
entered information to the server

PRESENTER CHONGO MARIO MAKANGHA


CREATING THE SHELL
• To create a form shell, type <FORM METHOD=POST ACTION
=“script_url”> where “script_url” is the address of the script
• Create the form elements
• End with a closing </FORM>

PRESENTER CHONGO MARIO MAKANGHA


CREATING TEXT BOXES
• To create a text box, type:

<input type=“text” name=“name” value=“value” size=n


maxlength=n>

• The NAME, VALUE, SIZE and MAXLENGTH attributes are


optional

PRESENTER CHONGO MARIO MAKANGHA


TEXT BOX ATTRIBUTES
• The NAME attribute is used to identify the text box to the
processing script
• The VALUE attribute is used to specify the text that will
initially appear in the text box
• The SIZE attribute is used to define the size of the box in
characters
• The MAXLENGTH attribute is used to define the maximum
number of characters that can be typed in the box

PRESENTER CHONGO MARIO MAKANGHA


EXAMPLE: TEXT BOX

PRESENTER CHONGO MARIO MAKANGHA


CREATING LARGER TEXT AREAS
• To create larger text areas, type:

<textarea name=“name” ROWS=n1 COLS=n2 WRAP>


Default Text </textarea>
where n1 is the height of the text box in rows and n2 is the
width of the text box in characters

• The WRAP attribute causes the cursor to move


automatically to the next line as the user types

PRESENTER CHONGO MARIO MAKANGHA


EXAMPLE: TEXTAREA
<b>Comments</b>
<br>
<textarea name=“Comments” ROWS=10 COLS=50 WRAP>
</textarea>

PRESENTER CHONGO MARIO MAKANGHA


CREATING RADIO BUTTONS
• To create a radio button, type:

<INPUT TYPE=“radio” NAME=“name” VALUE=“data”> Label,


where “data” is the text that will be sent to the server if the
button is checked and “Label” is the text that identifies the
button to the user

PRESENTER CHONGO MARIO MAKANGHA


EXAMPLE: RADIO BUTTONS
<b> Size: </b>
<inputtype=“radio” name=“size” value=“large”>large
<input type=“radio” name=“size” value=“medium”>
medium
<input type=“radio” name=“size” value=“small”> small

PRESENTER CHONGO MARIO MAKANGHA


CREATING CHECKBOXES
• to create a checkbox, type:
<input type=“checkbox” name=“name”
value=“value”>label
• if you give a group of radio buttons or checkboxes the
same name, the user will only be able to select one button
or box at a time

PRESENTER CHONGO MARIO MAKANGHA


EXAMPLE: CHECKBOXES
<b> color: </b>
<input type=“checkbox” name=“color” value=“red”>red
<input type=“checkbox” name=“color” value=“navy”>
navy
<input type=“checkbox” name=“color” value=“black”>
black

PRESENTER CHONGO MARIO MAKANGHA


CREATING DROP-DOWN MENUS
• to create a drop-down menu, type:
<select name=“name” size=“n multiple>
• then type:
<option value=“value”>label
• in this case, the size attribute specifies the height of the
menu in lines and multiple allows users to select more than
one menu option

PRESENTER CHONGO MARIO MAKANGHA


EXAMPLE: DROP-DOWN MENU
<b>which of these subjects do you like?</b>
<select>
<option value=“commerce”> commerce
<option value=“biology”> biology
<option value=“mathematics”> mathematics
<option value=“chemistry”> chemistry
</select>

PRESENTER CHONGO MARIO MAKANGHA


CREATING A SUBMIT BUTTON
• to create a submit button, type:
<input type=“submit”>
• if you would like the button to say something other than
submit, use the value attribute
• for example,
<input type=“submit” value=“buy now!”> would create a
button that says “buy now!”

PRESENTER CHONGO MARIO MAKANGHA


CREATING A RESET BUTTON
• to create a reset button,
<input type=“reset”>
• the value attribute can be used in the same way to change
the text that appears on the button

PRESENTER CHONGO MARIO MAKANGHA


TABLES
• tables can be used to display rows and columns of data,
create multi-column text, captions for images and sidebars
• the <table> tag is used to create a table;
• the <tr> tag defines the beginning of a row while the <td>
defines the beginning of a cell

PRESENTER CHONGO MARIO MAKANGHA


ADDING A BORDER
• The BORDER=n attribute allows you to add a border n pixels thick around the
table
• To make a solid border color, use the BORDERCOLOR=“color” attribute
• To make a shaded colored border, use BORDERCOLORDARK=“color” and
BORDERCOLORLIGHT=“color”

PRESENTER CHONGO MARIO MAKANGHA


CREATING A SIMPLE TABLE
<table border=10> • Here’s is how it would like
<tr> on the Web:
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td> • Page 52 image
</tr>
</table>

PRESENTER CHONGO MARIO MAKANGHA


ADJUSTING THE WIDTH
• when a web browser displays a table, it often adds extra
space. to eliminate this space use the width=n attribute in
the <table> and <td> tags
• keep in mind – a cell cannot be smaller than its contents,
and if you make a table wider than the browser window,
users will not be able to see parts of it

PRESENTER CHONGO MARIO MAKANGHA


CENTERING A TABLE
• there are two ways to center a table
✓type <table align=center>
✓enclose the <table> tags in opening and closing
<center> tags as follows: <center>
<table>
</table>
</center>

PRESENTER CHONGO MARIO MAKANGHA


WRAPPING TEXT AROUND A TABLE
• it is possible to wrap text around a table. this technique is
often used to keep images and captions together within an
article
• to wrap text around a table, type:
<table align=left>
to align the table to the left while the text flows to the right
• create the table using the <tr>, <td> and the closing
</table> tags as you normally would

PRESENTER CHONGO MARIO MAKANGHA


ADDING SPACE AROUND A TABLE
• to add space around a table, use the hspace=n and
vspace=n attributes in the <table> tag
• example:
<table hspace=20 vspace=20>

PRESENTER CHONGO MARIO MAKANGHA


SPANNING CELLS ACROSS
COLUMNS
• It is often necessary to span one cell across many columns.
For example, you would use this technique to span a
headline across the columns of a newspaper article
• To span a cell across many columns, type <TD
COLSPAN=n>, where n is the number of columns to be
spanned

PRESENTER CHONGO MARIO MAKANGHA


SPANNING CELLS ACROSS ROWS
• to span a cell across many rows, type <td rowspan=n>,
where n is the number of rows

PRESENTER CHONGO MARIO MAKANGHA


ALIGNING CELL CONTENT
• By default, a cell’s contents are aligned horizontally to the
left and vertically in the middle
• Use VALIGN=direction to change the vertical alignment,
where “direction” is top, middle, bottom or baseline
• Use ALIGN=direction to change the horizontal alignment
where “direction” is left, center or right

PRESENTER CHONGO MARIO MAKANGHA


CONTROLLING CELL SPACING
• cell spacing is the space between cells while cell padding is
the space around the contents of the cell
• to control both types of spacing, use the cellspacing=n and
cellpadding=n attributes in the <table> tag

PRESENTER CHONGO MARIO MAKANGHA


NESTING TABLES
• Create the inner table
• Create the outer table and determine which table cell of
the outer table will hold the inner table
• Test both tables separately to make sure they work
• Copy the inner table into the cell of the outer table
• Don’t nest too many tables. If you find yourself doing that,
find ano easier way to lay out your web page

PRESENTER CHONGO MARIO MAKANGHA


CHANGING A CELL’S COLOR
• To change a cell’s color, add the BGCOLOR=“color” attribute to the <TD>
tag
• Example:
<TD BGCOLOR=“blue”

PRESENTER CHONGO MARIO MAKANGHA


DIVIDING A TABLE INTO COLUMN
GROUPS
• A table can be divided into two kinds of column groups:
structural and non-structural
• Structural column groups control where dividing lines are
drawn; while non-structural groups do not
• Both let you format an entire column of cells at once

PRESENTER CHONGO MARIO MAKANGHA


COLUMN GROUPS
• To create structural column groups, type:
<COLGROUP SPAN=n> after the <TABLE> tag, where n is the
number of columns in the group
• To create non-structural column groups, type <COL
SPAN=n> where n is the number of columns in the group

PRESENTER CHONGO MARIO MAKANGHA


DIVIDING TABLE INTO HORIZONTAL
SECTIONS
• You can also create a horizontal section consisting of one or
more rows. This allows you to format the rows all at once
• To create a horizontal section, type:
<THEAD>, <TBODY> or <TFOOT> before the first <TR> tag of
the section
• Netscape does not support these tags

PRESENTER CHONGO MARIO MAKANGHA


CONTROLLING LINE BREAKS
• Unless you specify otherwise, a browser will divide the lines in a cell as
it sees fit
• The NOWRAP attribute placed within the <TD> tag forces the browser
to keep all the text in a cell on one line
• Example: <TD NOWRAP>Mutanda Falls

PRESENTER CHONGO MARIO MAKANGHA


PRESENTER CHONGO MARIO MAKANGHA

You might also like