Scribd
Upload
99 views

Creating A Basic Web Page

The document provides instructions for creating basic web pages using HTML, including how to add links, images, audio, video, lists and tables. It explains the key tags used to build each element, such as <a> for links, <img> for images, <audio> for audio, <video> for video, <ul> and <ol> for lists, and <table>, <tr>, and <td> for tables. It also describes attributes that can be used to further style and control each element.

Uploaded by

Tsa Cha
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
99 views

Creating A Basic Web Page

The document provides instructions for creating basic web pages using HTML, including how to add links, images, audio, video, lists and tables. It explains the key tags used to build each element, such as <a> for links, <img> for images, <audio> for audio, <video> for video, <ul> and <ol> for lists, and <table>, <tr>, and <td> for tables. It also describes attributes that can be used to further style and control each element.

Uploaded by

Tsa Cha
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 86

Creating a Basic Web Page

Linking
 To make a hyper link we use “anchor” signified
by the tag <a></a>
 Anchors: have attribues:
– href: the page or Internet Service you want to link to
– target: where to open the new page
• _top:
• _parent:
• _blank:
• _self:
• or name of frame
Example
 <html>
 <body bgcolor="#E6E6FA">
 <h1>Hello world!</h1>
 <p><a href="http://www.yahoo.com">Visit
Yahoo.com!</a></p>
 </body>
 </html>
Values for TARGET attribute
 _blank: The user agent (i.e. Internet browser) should load the
designated document in a new, unnamed window.

 _self: The user agent should load the document in the same
frame as the element that refers to this target.

 _parent: The user agent should load the document into the
immediate FRAMESET parent of the current frame. This
value is equivalent to _self if the current frame has no parent.

 _top: The user agent should load the document into the full,
original window (thus canceling all other frames).
Add Images
 HTML Images - The <img> Tag and the
Src Attribute
– <img src="url" alt="some_text">
Add Images
 HTML Images - The Alt Attribute
– <img src="smiley.gif" alt="Smiley face">
Add Images
 HTML Images - Set Height and Width of an
Image
– <img src="smiley.gif" alt="Smiley face"
width="42" height="42">
Images
 HTML <body> background Attribute
– <html>
<body background="bgimage.jpg">
<h1>Hello world!</h1>
<p><a href="http://www.facebook.com">Visit
Facebook!</a></p>
</body>
</html>
HTML Multimedia Tags
Add Audio
 HTML Audio - Using <embed>
<embed height="50" width="100"
src="horse.mp3">
Problems:
Different browsers support different audio formats
If a browser does not support the file format, the audio will
not play without a plug-in
If the plug-in is not installed on the users' computer, the
audio will not play
Add Audio
 HTML Audio - Using <object>
<object height="50" width="100"
data="horse.mp3"></object>
Problems:
Different browsers support different audio formats
If a browser does not support the file format, the audio will
not play without a plug-in
If the plug-in is not installed on the users' computer, the
audio will not play
Add Audio
 HTML5 <audio> Element
<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>

Problems:
You must convert the audio files into different formats
The <audio> element does not work in older browsers
Add Audio
 HTML Audio - The Best Solution using HTML 5
<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio> Best Solution

Problems:
You must convert the audio files into different formats
The <embed> element cannot "fall-back" to display an error
message
Add Audio
 HTML Audio - Using A Hyperlink
<a href="horse.mp3">Play the sound</a>
Add Video
 HTML Video - Using <embed>
– <embed> tag defines a container for external
(non-HTML) content.
 <embed src="intro.swf" height="200"
width="200">
Problems
If the browser does not support Flash, the video will not
play
iPad and iPhone do not support Flash videos
Add Video
 HTML Video - Using <object>
– <object> tag tag can also define a container for
external (non-HTML) content..
 <object data="intro.swf" height="200"
width="200"></object>
Problems:
If the browser does not support Flash, the video will not
play
iPad and iPhone do not support Flash videos
Add Video
 HTML Video - The Best Solution
– HTML5 <video> element + the <embed> element.
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object> 
</video>

Problems:
You must convert your videos to many different formats
Add Video
 HTML Video - YouTube Solution
Add Video
 HTML Video - Using A Hyperlink
– <a href="intro.swf">Play a video file</a>
Creating Lists
 HTML supports two kinds of lists:
– an ordered list, which is used to display information in
a numeric order
– an unordered list, which list items are not listed in a
particular order i.e. bullets

Creating Web Pages with HTML, 3e 20


Prepared by: C. Hueckstaedt, Tutorial 1
Lists
 To generate menus or lists we use
– <ul> and <ol>
– Example:
<ul>
<li>DB-9</li>
<li>DB-12</li>
<li>DB-25</li>
</ul>
 This example will generate an unordered list of items, for
ordered lists use <ol> instead of <ul>
 One important attribute is type {circle, disc or square}
which is used to specify the type of bullet you want to use.
Table
Tables on the World Wide Web
• A table can be displayed on a Web page either in a text or
graphical format.
A text table: A graphical table:
 is displayed using graphical
 contains only text,
elements
evenly spaced on the  can include design elements
Web page in rows and such as background colors, and
columns colored borders with shading
 allows you to control the size of
 uses only standard word
tables cells, rows, columns and
processing characters alignment of text within the
table
Creating Web Pages with HTML, 3e 23
Prepared by: C. Hueckstaedt, Tutorial 4
A Text Table
This figure shows a text table.

Creating Web Pages with HTML, 3e 24


Prepared by: C. Hueckstaedt, Tutorial 4
A Graphical Table
This figure shows a graphical table

Creating Web Pages with HTML, 3e 25


Prepared by: C. Hueckstaedt, Tutorial 4
Defining a Table Structure
 The first step to creating a table is to specify
the table structure:
– the number of rows and columns
– the location of column headings
– the placement of a table caption
 Once the table structure is in place, you can
start entering data into the table.

Creating Web Pages with HTML, 3e 26


Prepared by: C. Hueckstaedt, Tutorial 4
Using the <tr>, and
<table> <td> Tags
 Graphical tables are enclosed within a two-
sided <table> tag that identifies the start
and ending of the table structure.
 Each row of the table is indicated using a
two-sided <tr> (for table row).
 Within each table row, a two-sided <td>
(for table data) tag indicates the presence of
individual table cells.
Creating Web Pages with HTML, 3e 27
Prepared by: C. Hueckstaedt, Tutorial 4
HTML Structure of a Table
beginning of the table
structure

table cells

You do not need to


indent the <td> tags
first row of six in the table or place them on
separate lines, but you
may find it easier to
interpret your code if
you do so.

After the table


structure is in place,
you’re ready to add
the text for each cell.
end of the table structure
Creating Web Pages with HTML, 3e 28
Prepared by: C. Hueckstaedt, Tutorial 4
The Graphical Table Syntax
 The general syntax of a graphical table is:
<table>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table>
– This creates a table with two rows and two columns.
Creating Web Pages with HTML, 3e 29
Prepared by: C. Hueckstaedt, Tutorial 4
A Simple Table
This figure shows the
layout of a graphical
table.

two rows

two columns

Creating Web Pages with HTML, 3e 30


Prepared by: C. Hueckstaedt, Tutorial 4
Table Headers
 defines a header cell in an HTML table
 <th> content </th>
Adding Table Headings to the
Table
Text in cells
formatted with the
<th> tag is bold and
centered above each
table column.

table headings

Creating Web Pages with HTML, 3e 32


Prepared by: C. Hueckstaedt, Tutorial 4
Result of Table Headings
as Displayed in the Browser

table headings appear


bold and centered over
their columns

table headings

Creating Web Pages with HTML, 3e 33


Prepared by: C. Hueckstaedt, Tutorial 4
Tables – cont’d
 Attributes:
– background: specifies an image file used as backdrop to the
table <table bgcolor="#00FF00">
– bgcolor: specifies background color of the table
<table background="myback.gif “>
– border: specifies the thickness in pixels of the table border, the
browser will render it as a 3D border
– cellspacing: specifies space size between cells in the table
– cellpadding: specifies white space between the cell content and
its borders.
– width and height: specify dimensions of the table other than the
defaults given by the browser.
Applying a Background Image
to a Table, Row, and Cell
This figure shows examples of the background attribute applied to three sample tables.

parch.jpg <tr background=“parch.jpg”>

<table background=“parch.jpg”> <td background=“parch.jpg”>


Creating Web Pages with HTML, 3e 35
Prepared by: C. Hueckstaedt, Tutorial 4
Applying a Background Color
 Table elements support the bgcolor attribute.
 To specify a background color for all of the cells in a table, all
of the cells in a row, or for individual cells, by adding the
bgcolor attribute to either the <table>, <tr>, <td>, or <th>
tags as follows:
<table bgcolor=“color”>
<tr bgcolor=“color”>
<td bgcolor=“color”>
<th bgcolor=“color”>
– color is either a color name or hexadecimal color value

Creating Web Pages with HTML, 3e 36


Prepared by: C. Hueckstaedt, Tutorial 4
Adding a Table Border
 By default, browsers display tables without table
borders.
 A table border can be added using the border attribute
to the <table> tag.
 The syntax for creating a table border is: <table
border=“value”>
– value is the width of the border in pixels
 The size attribute is optional; if you don’t specify a size,
the browser creates a table border 1 pixel wide.
Creating Web Pages with HTML, 3e 37
Prepared by: C. Hueckstaedt, Tutorial 4
Tables with Different Borders
Values
This figure shows the effect on a table’s border when the border size is varied.

Creating Web Pages with HTML, 3e 38


Prepared by: C. Hueckstaedt, Tutorial 4
Adding a 5-Pixel Border to a
Table

Only the outside


border is affected by
the border attribute;
the internal gridlines
are not affected.

Creating Web Pages with HTML, 3e 39


Prepared by: C. Hueckstaedt, Tutorial 4
Controlling Cell Spacing
 The cellspacing attribute controls the amount
of space inserted between table cells.
 The syntax for specifying the cell space is:
<table cellspacing=“value”>
– value is the width of the interior borders in pixels
– the default cell spacing is 2 pixels
 Cell spacing refers to the space between the
cells.
Creating Web Pages with HTML, 3e 40
Prepared by: C. Hueckstaedt, Tutorial 4
Tables with Different
Cell Spacing Values
This figure shows how different cell spacing values affect a table’s appearance.

Creating Web Pages with HTML, 3e 41


Prepared by: C. Hueckstaedt, Tutorial 4
Setting the Cell Spacing to 0 Pixe
ls
Setting the cellspacing
to 0 reduces the width
of the borders between
individual table cells.

This will not remove


the border between the
cells.

Creating Web Pages with HTML, 3e 42


Prepared by: C. Hueckstaedt, Tutorial 4
Defining Cell Padding
 To control the space between the table text and the
cell borders, add the cellpadding attribute to the
table tag.
 The syntax for this attribute is: <table
cellpadding=“value”>
– value is the distance from the table text to the cell
border, as measured in pixels
– the default cell padding value is 1 pixel
 Cell padding refers to the space within the cells.
Creating Web Pages with HTML, 3e 43
Prepared by: C. Hueckstaedt, Tutorial 4
Tables with Different
Cell Padding Values
This figure shows the effect of changing the cell padding value for a table.

Creating Web Pages with HTML, 3e 44


Prepared by: C. Hueckstaedt, Tutorial 4
Setting the Cell Padding to 4 Pix
els
This figure shows the
table with the increased
amount of cell padding.

By increasing the cell


padding, you added
needed space to the
table.

Creating Web Pages with HTML, 3e 45


Prepared by: C. Hueckstaedt, Tutorial 4
Defining the Table Size
 The syntax for specifying the table size is: <table
width=“size” height=“size”>
– size is the width and height of the table as measured in pixels or as
a percentage of the display area
 To create a table whose height is equal to the entire height of the
display area, enter the attribute height=“100%”.
 If you specify an absolute size for a table in pixels, its size
remains constant, regardless of the browser or monitor settings
used.
 Remember that some monitors display Web pages at a
resolution of 640 by 480 pixels.
Creating Web Pages with HTML, 3e 46
Prepared by: C. Hueckstaedt, Tutorial 4
Setting the Width of theTable to
500 Pixels
This figure shows the
revised page with the
table width increased to
500 pixels.

Once the width is set


for the table, the width
of individual cells and
columns can be set.

Creating Web Pages with HTML, 3e 47


Prepared by: C. Hueckstaedt, Tutorial 4
Aligning the Contents of a Table
 By default, cell text is placed in the middle
of the cell, aligned with the cell’s left edge.
 By using the align and valign attributes, you
can specify the text’s horizontal and vertical
placement.
 To align the text for a single column, you
must apply the align attribute to every cell in
that column.
Creating Web Pages with HTML, 3e 48
Prepared by: C. Hueckstaedt, Tutorial 4
Values of the Align
and Valign Attributes
This figure shows how the combination of the align and valign attributes
can affect the position of the cell text in relation to the cell borders.

Creating Web Pages with HTML, 3e 49


Prepared by: C. Hueckstaedt, Tutorial 4
Right-Aligning the Values
in a Column

right-aligned column

Creating Web Pages with HTML, 3e 50


Prepared by: C. Hueckstaedt, Tutorial 4
Spanning Rows and Columns
 To merge several cells into one, you need to create a
spanning cell.
 A spanning cell is a cell that occupies more than one row
or column in a table.
 Spanning cells are created by inserting the rowspan and
colspan attribute in a <td> or <th> tag.
 The syntax for these attributes is: rowspan=“value”
colspan=“value”
– value is the number of rows or columns that the cell spans in
the table
Creating Web Pages with HTML, 3e 51
Prepared by: C. Hueckstaedt, Tutorial 4
Example of Spanning Cells
This figure shows a table of opinion poll data in which some
of the cells span several rows and/or columns.

This cell
spans two this cell
columns and spans three
two rows columns

This cell
spans three
rows

Creating Web Pages with HTML, 3e 52


Prepared by: C. Hueckstaedt, Tutorial 4
A Table Structure with a
Row-Spanning Cell
This figure shows spanning cells.

four table cells in the first


row

only three table cells are required


for the second and third rows

HTML code

resulting table
Creating Web Pages with HTML, 3e 53
Prepared by: C. Hueckstaedt, Tutorial 4
Adding Spanning Cells to a
Table
this cell spans two
This figure shows a table with spanning cells.
columns

these cells span three


rows

spanning cells

Creating Web Pages with HTML, 3e 54


Prepared by: C. Hueckstaedt, Tutorial 4
Table Frames and Rules
 Two additional table attributes introduced in HTML 4.0 are
the frames and rules attributes.
 With the frame and rule attributes you can control how
borders and gridlines are applied to the table.
 The frames attribute allows you to determine which sides
of the table will have borders.
 The frame attribute syntax is: <table frame=“type”>
– type is either “box” (the default), “above”, “below”, “hsides”,
“vsides”, “lhs”, “rhs”, or “void”

Creating Web Pages with HTML, 3e 55


Prepared by: C. Hueckstaedt, Tutorial 4
Frames
 Frames split the webpage into different regions for
more clarity and accessibility to the user.
 To make frames first we must define a frameset
using the tag <frameset> </frameset>
 Using this tag (element) we can specify how many
frames we want and what is the layout of these
frames
 Then we define the properties of every frame
using the <frame> tag (no closing tag) nested
inside the <frameset>
Values of the Frame Attribute
This figure describes each of the values of the frame attribute.

Creating Web Pages with HTML, 3e 57


Prepared by: C. Hueckstaedt, Tutorial 4
Effect of Different Frame Values
This figure shows the effect of each of the frame values on the table grid.

Creating Web Pages with HTML, 3e 58


Prepared by: C. Hueckstaedt, Tutorial 4
The Frames Attribute
 The frames attribute is:
– supported by Internet Explorer version 4.0 and
above
– supported by Netscape version 6.2, but not by
earlier versions of Netscape

Creating Web Pages with HTML, 3e 59


Prepared by: C. Hueckstaedt, Tutorial 4
<frameset> attributes
 border: a 3-D border is displayed by default, to
change the size of this border use this attribute
 cols: defines the number and sizes or proportions
of column arrangement of frames in the frameset,
you can use absolute pixel size or use percentage,
but the total percentage must sum up to 100%, like
cols=“25%,50%,25%”, you can also use wildcard
asterisk (*)
 rows: like cols, but used for row arrangements.
 frameborder: a boolean value indicating whether
you want a divider between frames or not
<frame> attributes
 frameborder: a boolean value indicating whether you want
a divider (border) for the frame or not, overrides
frameborder attribute in <frameset> tag
 name: the name of a frame will be used to reference to it,
especially when you want to open a URL in a specific
frame.
 noresize: the user will not be able to move the divider of
the frame or resize it
 scrolling: boolean value of whether you want a scroll bar
for the frame or not, can be “yes”| ”no”| ”auto”
 src: what URL or HTML page will displayed in this frame
<html>
<frameset rows="15%,*">
<frameset cols="15%,*">
<frame name="menu" target="main“
noresize="noresize" scrolling="no"
src="MyMenuPage.htm" />
</frameset>
<frame name="menu" target="main"
noresize="noresize" scrolling="no"
src="MyMenuPage.htm" />
</frameset>
</html>
Web Forms
An Example of a Form
The <form> Tag
 A single page can include several different forms, but you
cannot nest one form inside another.
 The general syntax of the <form> tag is:
<form attributes>
form elements and layout tags
</form>
 A single Web page can contain multiple forms, the
<form> tag includes the name attribute.
 The name attribute identifies each form on the page.
 The name attribute is also needed for programs that
retrieve values from the form.
Ex. <form> input elements</form>
Form Control Elements
 Control elements :
– text boxes for text and numerical entries
– selection lists for long lists of options, usually appearing in a drop-
down list box
– radio buttons, also called option buttons, to select a single option
from a predefined list
– check boxes to specify an item as either present or absent
– groups boxes to organize form elements
– text areas for extended entries that can include several lines of text
– buttons that can be clicked to start processing the form
 Each control element in which the user can enter information is called a field.
Working with Text Boxes
 Text boxes are created using the <input>
tag.
 The general syntax is:
<input type=“type” name=“name”
id=“id”>
– type specifies the type of input field
– name and id attributes identifies the input field for
the CGI script
Ex: <form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Creating a Text Box w/
Properties
 To create a text box, use the following HTML code:

<input name=“name” value=“value”


size=“value” maxlength=“value”>
– name
– value
– size
– maxlength
Creating a Password Field
 A password field is a text box in which the characters
typed by the user are displayed as bullets or asterisks i.e.
****.
 The syntax for creating a Password field is:
<input type=“password”>
 Using a password field should not be confused with having
a secure connection.
 The password itself is not encrypted.
 The password field only acts as a mask for a field entry as
it is entered.
Using a Selection List
Creating a Selection List
 A selection list is a list box from which a user selects a
particular value or set of values.
 Selection lists are good to use when there is a fixed set of
possible responses.
 Selection lists help prevent spelling mistakes and
erroneous entries.
 A selection list is created using the <select> tag.
 The <option> tag is used to specify individual selection
items.
Creating a Selection List

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option
value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
Selection Lists with
Different Size Values
<select size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option> size = "1" size = "4"
</select>

size = "7" size = "9"


Working with Option Values
 By default, a form sends the values that are displayed
in the selection list to the CGI script.
 Instead of sending an entire text string, an
abbreviation or code can be sent to the CGI script.
 Specify the value that is sent to the CGI script with the
value attribute.
 Use the selected attribute to specify which item in the
selection is selected, or highlighted, when the form is
displayed.
Working with Option Groups
 The most recent releases of HTML allows you to
organize selection lists into distinct groups called
option groups.
 The syntax for creating an option group is:
<optgroup label=“label”>
– label is the label assigned to the option group
– the text for the label appears in the selection list
above each group of items but is not a selectable item
from the list
Option Groups
<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup> option group label
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
a single option group
Radio Buttons
 Radio buttons display a list of choices from which a user
makes a selection.
– Only one radio button can be selected at a time.
 The syntax to create a radio button is:
<input type=“radio” name=“name” id=“id”
value=“value”>
– name - the field containing the radio button (required)
– id - the specific option. Only required if you intend to use a
field label with the radio button
– value - the value sent to the CGI script, if that radio button is
selected by the user
Creating Radio Buttons
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Working with Check Boxes
 A check box is either selected or not
 Check boxes are created using the following syntax:
<input type=“checkbox” name=“name”
id=“id” value=“value”>
– name and id - the check box
– the value - the value that is sent to the CGI script when
the check box is selected
 Check boxes are not selected by default.
– to do this, add the checked attribute to the <input> tag
– <input type =“checkbox” checked = “checked”>
 <form>
<input type="checkbox" name="vehicle"
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle"
value="Car">I have a car 
</form>
Group Boxes for Radio Buttons
and Check Boxes
Creating a Text Area

default text area text


dimensions of text area

resulting text area


Text Area
 <textarea rows="4" cols="50">
We offer free tutorials in all web
development technologies. 
</textarea>
Comment Text Area
Creating a Form Button
Creating Submit and Reset
Buttons
 A submit button is a button that submits the form
to the CGI script for processing.
 A reset button resets the form to its original
(default) values.
 The syntax for creating these two buttons is:
<input type=“submit” value=“text”>
<input type=“reset” value=“text”>
– value attribute defines the text that appears on the
button

You might also like