Scribd
Upload
22 views

Website design for a purpose ict exam

The document provides an introduction to web page design, covering essential HTML concepts, tags, and attributes used to create and format web pages. It explains various elements such as lists, links, multimedia files, tables, and forms, along with their respective tags and attributes. Additionally, it discusses the use of frames in web design and their advantages and disadvantages.

Uploaded by

j7tzxryrnn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
22 views

Website design for a purpose ict exam

The document provides an introduction to web page design, covering essential HTML concepts, tags, and attributes used to create and format web pages. It explains various elements such as lists, links, multimedia files, tables, and forms, along with their respective tags and attributes. Additionally, it discusses the use of frames in web design and their advantages and disadvantages.

Uploaded by

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

Introduction to

web page designing


Basic Web terms
 Web page: - is a page in a web site that displays
different contents.
 Web site : - is a collection of web pages.
 Home page : - is the 1st page in a web site.
 Web browser : - is an application which is used to
access and view web sites.
 Web editor : - is a software which is used for
creating and editing web pages.
 HTML editor: - is a computer program which is
used for editing HTML.
Introduction to HTML
 HTML: - is a HyperText Markup Language
which is used create web pages.
HyperText: - is a text written in web pages.
Markup: - is changing the contents of the
web page in a way you want it.
 Notepad: - is an HTML editor.
 An HTML document is written in notepad and
saved as either “.html” or “.htm”
Tags and Attributes
 Tags: - are elements that are used to create a web
page in an HTML document. They are written under <
and > signs.
E.g <html>, <head>, <body>
 Attributes: - are properties of tags that are used to
give different looks for the contents of our page. They
are written inside the tags.
E.g <body bgcolor = …..>
 Attribute values: - are values of the attribute. They
are written inside double quotation (“ “).
E.g <body bgcolor=“blue”> Attribute
Attribute value
<html> <html>: html document.
<head> <head>: Head section.
<title> <title>: - Title section.
</title> <body>: Body section.
</head> HTML Syntax
<body> </title>
</body> </head> Closing tags
</html> </body>
</html>
My 1 web page
st

<html>
<head>
<title> My page </title>
</head>
<body>
Welcome to my first page
</body>
</html>
Web content formatting
 <b>: - is a tag which is used to bold the text.
 <i>: - is a tag which is used to make the text italic.
 <u>:- is a tag which is used to make underline on the text.
 <sup>: - is a tag which is used to make a superscript.
 <sub>: - is a tag which is used to make a subscript.
 <br>: - is a tag which is used to break a line.
 <center>: - is a tag which is used to put the web content on
the center.
 <mark>: - is a tag which is used highlight the text.
 &nbsp: - is a special attribute which is used to make a space
between contents in our page.
Working on Fonts
 <Font>: - is a tag which is used to change
the font of our texts.
Face: - is an attribute of <Font> tag which is
used to change the font family of the text.
Color: - is an attribute of <Font> tag which is
used to change the font color of the text.
Size: - is an attribute of <Font> tag which is
used to change the font size of the text.
Moving web contents
 <Marquee>: - is a tag which is used to move
web contents (text or image) on our page.
Direction: - is an attribute of <Marquee> tag
which is used move the web contents to the left,
right, up or down.
Behavior: - is an attribute of <Marquee> tag
which is used to alternate the web contents
with in the page.
Paragraph and heading
 <p>: - is a tag which is used to write a
paragraph.
Align: - is an attribute of <p> tag which is used
align a text to the left, right or center.
 <hx> (x={1-6}): - is a tag which is used to
insert headings. <h1> is the larger size
whereas <h6> is the smaller.
Align: - is an attribute of <hx> tag which is used
to align a text to the left, right or center.
Creating lists
Types of lists
 Unordered list
 It is a bulleted list
 It is used to create lists using bullets
 Ordered list
 It is a numbering list
 It is used to create lists using numbers or letters
 Nested list
 It is a multi-level list (A list on another list)
 It also can be a combination of ordered and unordered list
 Definition list
 It is used to create glossaries.
Tags (elements) used
 <ul> : - is a tag which is used to create unordered
(bulleted) lists.
 <ol> : - is a tag which is used to create ordered
(numbering) lists.
 <li> : - is a tag which is written under <ul> and <ol> tags
and used to list out the lists.
Tags used in definition lists
 <dl> : - is a tag which is the main tag in creating glossaries.
 <dt> : - is a tag which is used to mention the term (word)
that is going to be defined.
 <dd> : - is a tag which is used to write the definition of the
term or word used.
Creating Links
 <a> (Anchor): - is a tag which is used to
create a link between different web pages.
href: - is an attribute of <a> tag which is used to
specify the linked page that is going to be
opened.
Working on Multi-media files
 <img>: - is a tag which is used to insert an image in our page.
 src: - is an attribute of <img> tag which is used to
mention the source of the image inserted.
 height: - is an attribute of <img> tag which is used to
specify the height of the image inserted.
 width: - is an attribute of <img> tag which is used to
specify the width of the image inserted.
 <embed>: - is a tag which is used to insert an audio or video
file to our page.
 src: - is an attribute of <embed> tag which is used to
specify the source of the file inserted.
Working on Tables
Tags (elements) used
<Table>: - Shows the beginning of inserting
a table into our page.
<Tr>: - Used to insert rows
<Td> or <Th>: - used to insert columns and
data’s.
<Td>: - Regular and left (default alignment)
<Th>: - Bold and center (default alignment)
Attributes used
 Border: - Is an attribute of <Table> tag which is used to
create a border line.
 Height: - Is an attribute of <Table> tag which is used to
set the height of the table
 Width: - Is an attribute of <Table> tag which is used to
set the width of the table
 Align: - is an attribute of
 <Table>: which is used to align the table
 <Tr> or <Th>: which is used align data’s
 Bgcolor: - is an attribute of <Table>,<Tr>,<Th> or <Td>
tags which is used to make a background color.
Cont….
Colspan: - Is an attribute of <Td> and <Th>
tags which is used to merge cells that are
found in the same row
Rowspan: - Is an attribute of <Td> and
<Th> tags which is used to merge cells that
are found in the same column.
Caption
 Caption is a tag which is used to give a
caption (title) for your table.
 It is written under the <Table> tag.
<Table>
<caption>title of the table</caption>
</Table>
Working on Forms
Definition
 A form is an html element which is used to
create an interaction between the user and
the web.
 A form has different elements that are used
to create the interaction with the web page.
 Some form elements include: Textbox,
Password box, Submit button, Reset button,
Checkbox, Radio button, Comment box, Drop
down menu (Combo box), List box
Textbox
 It is a form element which is used to insert
different texts into the form on the web
page.
 It can be used to insert like Names, E-mail
address, phone numbers,…
Password box
 It is a form element which is used insert a
password (with hidden character) into the
form.
Submit button
 It is a form element which is used send or
submit the data’s inserted into the database.
Reset button
 It is a form element which is used to clear or
delete the data’s inserted on the form
elements.
Checkbox
 It is a form element which is used to insert
alternative choices in our page. In a
checkbox, two or more choices can b
selected at a time.
checked: - is a special attribute which is used
one or more choices to be selected by default.
Radio (Option) button
 It is a form element which is used to insert
alternative choices in our page. In a radio
button, only a single choices can be selected
at a time. Name attribute is important in
satisfying this condition.
checked: - is a special attribute which is used a
choice to be selected by default.
Tags (elements used)
 <Form>: - is a tag which describes the opening
of a form.
 <Input>: - is a tag which is used to insert
different form elements. Such as:
 Textbox
 Password box
 Submit button
 Reset button
 Check box
 Radio button
Attributes used
 Type: - is an attribute of <Input> tag which is used to
specify the form element inserted.
 Value: - is an attribute of <Input> tag which is used to
put label the form element.
 Size: - is an attribute of <Input> tag which is used to set
the size of a text or password box.
 Maxlength: - is an attribute of <Input> tag which is
used to limit the number of characters inserted in the
text or password box.
 Name: - is an attribute of <Input> tag which is used to
refer the form element.
Comment box
<textarea>: - is a tag which is used to insert a
comment box on our page.
rows: - is an attribute of <textarea> tag which is
used specify the height of the comment box.
cols: - is an attribute of <textarea> tag which is
used specify the width of the comment box.
Drop down Menu (Combo box)
 <select>: - is a tag which is used to insert a
drop down menu.
<option>: - is a tag which is written under
<select> tag. It is used to specify the list of
menus inserted in the drop down menu.
selected: - is a special attribute of <option> tag
which is used to display the list by default.
List box
 size: - is an attribute of <select> tag which is
used to change the combo box into list box.
 Multiple: - is a special attribute of <select>
tag which is used to select more than one
list at a time.
Frame
 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.
Disadvantages of Frames

 There are few drawbacks with using frames


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.
There are still few browsers that do not support
frame technology.
Creating Frames

 To use frames on a page we use <frameset> tag


instead of <body> tag.
 The <frameset> tag defines, how to divide the
window into frames.
 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.
Example

 Create three horizontal


<frameset
frames .
cols="25%,*,25%">
<frame src="a.htm">
<frame src="b.htm">
<frame src="c.htm">
</frameset>
The <frameset> Tag Attributes

 Cols: - Specifies how many columns are contained


in the frameset and the size of each column.
 A percentage of the browser window. For example, to
create three vertical frames, use cols = "10%, 80%,
10%".
 Rows: - This attribute works just like the cols
attribute and takes the same values, but it is used
to specify the rows in the frameset.
 For example, to create two horizontal frames, use
rows = "10%, 90%".
Cont…
 Border: - This attribute specifies the width of
the border of each frame in pixels. For
example, border = "5". A value of zero means
no border.
 Frameborder: - This attribute specifies
whether a three-dimensional border should be
displayed between frames. This attribute takes
value either 1 (yes) or 0 (no). For example
frameborder = "0" specifies no border.
Cont…
 Framespacing: - This attribute specifies the
amount of space between frames in a
frameset. This can take any integer value.
For example framespacing = "10" means
there should be 10 pixels spacing between
each frames.
The <frame> Tag Attributes

 Src: - This attribute is used to give the file name


that should be loaded in the frame.
 Name: - This attribute allows you to give a name
to a frame. It is used to indicate which frame a
document should be loaded into. This is
especially important when you want to create
links in one frame that load pages into an
another frame, in which case the second frame
needs a name to identify itself as the target of
the link.
Cont…
 Frameborder: - This attribute specifies whether
or not the borders of that frame are shown; it
overrides the value given in the frameborder
attribute on the <frameset> tag if one is given,
and this can take values either 1 (yes) or 0 (no).
 Marginwidth: - This attribute allows you to
specify the width of the space between the left
and right of the frame's borders and the frame's
content. The value is given in pixels. For example
marginwidth = "10".
Cont…
 Marginheight: - This attribute allows you to
specify the height of the space between the top
and bottom of the frame's borders and its
contents. The value is given in pixels. For
example marginheight = "10".
 Noresize: - By default, you can resize any frame
by clicking and dragging on the borders of a
frame. The noresize attribute prevents a user
from being able to resize the frame. For example
noresize = "noresize".
Cont…
 Scrolling: - This attribute controls the
appearance of the scrollbars that appear on
the frame. This takes values either "yes", "no"
or "auto". For example scrolling = "no" means
it should not have scroll bars.
HTML - Iframes

 You can define an inline frame with HTML


tag <iframe>. The <iframe> tag is not
somehow related to <frameset> tag, instead,
it can appear anywhere in your document,
including scrollbars and borders.
 An inline frame is used to embed another
document within the current HTML
document.
The <Iframe> Tag Attributes
Cont…
Cont…
Cont…
Cont…
 Note: − The frameborder, marginwidth,
longdesc, scrolling, marginheight attributes
deprecated in HTML5. Do not use these
attributes.
Example
 This will produce the <html>
<head>
following result…. <title>HTML Iframes</title>
 Document content </head>
<body>
goes here... <p>Document content goes here...</p>

<iframe src = "menu.htm" width = "555"


height = "200">
Sorry your browser does not
support inline frames. </iframe>
<p>Document content also go
here...</p>
</body>
</html>

You might also like