Scribd
Upload
22 views

L2 HTML

Here is the code to create a hyperlink that references a location on the same page: <a name="top"></a> <p>Text before the link...</p> <p><a href="#top">Go to top</a></p> <p>More text after the link...</p> The <a name="top"></a> tag defines an anchor called "top". The <a href="#top"> link references that anchor, so clicking it will jump back to the top of the page.

Uploaded by

dmwale2003
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

L2 HTML

Here is the code to create a hyperlink that references a location on the same page: <a name="top"></a> <p>Text before the link...</p> <p><a href="#top">Go to top</a></p> <p>More text after the link...</p> The <a name="top"></a> tag defines an anchor called "top". The <a href="#top"> link references that anchor, so clicking it will jump back to the top of the page.

Uploaded by

dmwale2003
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/ 67

CUIT 216:

WEB DESIGN AND E-BUSINESS

HTML

1
HTML

Webpages are written in HTML


HTML is short for HyperText Markup Language
 Hypertext is simply a piece of text that works as a link
 Markup Language is a way of writing layout information within documents

It is a standardized system for tagging text files to achieve


font, colour, graphic, and hyperlink effects on World Wide
Web pages. 2
BASIC STRUCTURE OF A WEB PAGE
All normal webpages consist of a head and a body.

The head is used for text and tags that do not show directly on
the page.
The body is used for text and tags that are shown directly on the 3

page.
BASIC STRUCTURE OF A WEB PAGE
First and last tags
The HEAD section
 must come before the BODY section
 contains generic information about the document

Elements specified in the HEAD section can include


– title, link, script, style

The BODY section


 contains the content of the document (text, images etc) 4


PAGE STRUCTURE
<html>
<head>
<!-- This section is for the title and
technical
info of the page. -->
</head>
<body>
<!-- This section is for all that you want to
show on the page. -->
</body> 5

</html>
HTML TAGS

HTML tags are keywords surrounded by angle brackets < and >
start tag < > and end tag </ >
HTML tags normally come in pairs like <b> and </b>
The browser does not display the HTML tags, but uses the tags to
interpret the content of the page.

6
HTML TAGS
 Open/Empty tag
• Do not have closing tags.
• Empty elements must also be closed .

<tag attribute="value" />

e.g.:
An image: <img src="image.gif" />
A break: <br /> 7

A horizontal rule: <hr />


BASIC TAGS

<html>…</html>

<head>…</head> (Header)
 Not all browsers require this tag. Contains information about the document

<title>…</title>
 The text contained within these tags appears in your browser’s title ba 8
BASIC TAGS

<body>…</body>
 Required. All of the information is contained between these tags.

<p>…</p> (Paragraph)
 Used to create a new paragraph (inserts a new line and carriage return on your
page). The </p> Closing tag is optional. It is required when using
attributes with the <p> tag
9
HTML ELEMENTS

An HTML element is everything from the start tag to the end
tag.

<p>This is a paragraph</p>

<p> is the start tag


“This is a paragraph” is the element content
</p> is the close tag
10
EXERCISE 1– HELLO WORLD
<html>
<head>
1. Open a notepad document.
2. Put in the following tags <title> My Page </title>
3. Save the document in any folder </head>
with the name HelloWorld.html <body>
4. Run the file by double-clicking on
it so that it opens in a browser.
Hello World!!!
</body> 11

</html>
HTML ATTRIBUTES

HTML elements can have attributes


Attributes provide additional information about an
element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
12
ATTRIBUTES AND VALUES

–Attributes
 Only placed in the opening tag (not in the closing tag)
 Use one or multiple attributes in a single tag separated by spaces

–Values
 Text or numeric to further describe attributes
 Some values are case-sensitive
 Values should be enclosed in straight quotes ( ""), not curly ones ( “ ” ) 13
ATTRIBUTE EXAMPLE

HTML links are defined with the <a> tag. The link address
is specified in the href attribute:
Example
<body>
<a href="http://www.w3schools.com">
This is a link</a>
</body> 14
COMMENTS
Comments are delimited by <!-- and -->

<!– this is a comment -->

Comments may span multiple lines <body>


<!--
this is
a comment
--> 15

</body>
<!DOCTYPE>
<!DOCTYPE html PUBLIC "-//w3c/dtd html 4.0 final//en">
 The <!DOCTYPE> element should be used as the first line of all HTML
documents.
 Validation programs might use this construct when determining the
correctness of an HTML document.
 The DOCTYPE declaration defines the document type.
 The "html" refers to the <html> root tag in the document.
 PUBLIC points to the document type definition that is recorded with the
International Standards Organization. 16
HEADINGS
 Six levels of importance <h1>...<h6>
 Use headings to divide document into sections

17
EXERCISE 2

18
EXERCISE 2 : OUTPUT

19
HTML FORMATTING

 HTML uses tags like <b> and <i> for formatting output, like bold or
italic text.

 These HTML tags are called formatting tags.

20
FORMATTING EXAMPLE

21
HTML STYLE ATTRIBUTE

The purpose of the style attribute is:

 To provide a common way to style all HTML elements.


 Styles can be added to HTML elements directly by using the style
attribute, or indirectly in separate style sheets (CSS files) which will
be taught later in this module.

22
FONT, COLOR AND SIZE
 The font-family, color, and font-size properties defines the font, color, and size of
the text in an element:
<font> attributes
 face - name of font (must be installed)
– "arial", "times", "verdana", "helvetica"
 size - absolute size (1-7), or relative to previous text
– "2", "5", "7", "+1", "-2"...
 color - hexadecimal RGB, or a named color
– "3399dd", "blue", "red"
23

 weight - boldness from 100, 200, ..., 900


EXAMPLE

<font face="arial" size="+1" color="pink" weight="300">

24
BACKGROUND
Color
• Add a bgcolor property to the body tag

<body bgcolor=“#FF0000”>
Image
• Add a background property to the body tag

<body background=“flower.gif”> 25
SUMMARY OF BASIC TEXT FORMATTING
 Font Styles and Sizes (can be nested)
 <b>..</b> - Sets bold text.
 <big>..</big> - Sets larger than normal text.
 <em>..</em> - Sets text in italics and denotes emphasis.
 <i>..</i> - Sets text in italics.
 <small>..</small> - Makes text smaller than normal.
 <strike>..</strike> - Draws a line through the text as a "strikeout".
 <strong>..</strong> - Same as bold but denotes strong emphasis.
 <sup>..</sup> -Superscript
 <sub>..</sub> -Subscript
26
 <u>..</u> - Underlined text.
EXERCISE 3: Create the following web-page

27
You can refer to https://www.w3schools.com/html/
ANSWER

28
FORMATTING

<hr /> (Horizontal Rule)


 Creates a separator line across the screen with a default size of two pixels.

WIDTH:
 Used to control the width of items like horizontal rules. (Specified in either
pixels or percentage %)

ALIGN:
 Allows you to control which way to align text and objects using values of
29

"left", "right" or "center”


EXERCISE 4: Create the following web-page

30
EXERCISE 4 : OUTPUT

31
LIST TAGS
<li>…</li> (List Item)
Each item in the list must be preceded by this <li> tag

<ul>…</ul> (Unordered list)


This tag creates a list of items with no ordering (no numbering).

<ol>…</ol> (Ordered List)


Creates a list of items that are automatically ordered for you (with 32

numbering).
TYPE ATTRIBUTE

 Specifies the symbol at the beginning of each list item


 (NOTE: this value must be in lowercase)

33
TYPE ATTRIBUTE

34
EXERCISE 5: LISTS

35
Output

36
HYPERLINKS
There are 4 places you might want to link to:
1) Another web page in same folder you are linking
FROM.
2) Another web page in a different folder. The folder can
be beside, above or below the one you are linking from.
3) Another web page on a different server (another
website)
4) A specific location on the current web page
37
CREATING HYPERLINKS
 Links are defined by the <a> Anchor tag and consist of two main parts:
 the target source specified by the HREF attribute and
 the actual document needed to create the "hotspot“.

<a>…</a> (Anchor)

 This tag tells the browser that you will be linking to another page.
 The Hypertext Reference or href attribute accompanies the anchor tag.

<a href="AnotherPage.htm">This text between the anchor tags becomes the 38

link</a>
Exercise 6: Referencing a location on same page

39
Exercise 6: Referencing a location on same page

40
TAGS FOR TABLES
<table>…</table>
 Defines the table structure
<tr>…</tr> (Table Row)
 Defines a row in the table
<td>…</td> (Table Data)
 Creates a cell for the table
<th>…</th> (Table Heading)
 Creates one or more headings (Usually appears centered and bold in
most browsers)
<caption>…</caption> 41

 Creates a title for a table. (By default, this title appears above the
<TABLE> ATTRIBUTES
BGCOLOR
 Creates a background color
BORDER
 Creates a border around a table
BORDERCOLOR
 Adds a color to the border
COLSPAN
 Makes a row cross multiple columns
42
ROWSPAN

EXERCISE 7 - TABLES

Write HTML code to create a table.

43
SECTIONING THE PAGE

44
A. DIV TAG

<div>…</div>
Used to align paragraphs or blocks
of content in relation to the browser
window.
e.g <div align= "center">…</div>
45
NESTED DIV

46
FORMS

47
FORMS - DESIGN CONSIDERATIONS
Make the form easy to fill out.
It should be intuitive – should not require hard thinking to
figure out what to do.
Use selection pick lists and check boxes whenever possible.
Avoid asking for text that requires more than one word unless
necessary.
Group related information together. 48
FORMS

A form consists of three main parts:


1. The <form> tag (which is introduced below)
2. The form elements such as fields, check boxes and menus that
is filled in by the visitor
3. The Submit button which will send the information to the
server to be processed 49
FORMS
 A form is a means for capturing information from visitors to your site.
 The <form> element can contain one or more of the following form elements:
o <input>
o <textarea>
o <button>
o <select>
o <option>
o <optgroup>
o <fieldset> 50

o
FORMS - TAGS
1. <form>…</form>
 Starts and ends a form block.
The Action Attribute
 The action attribute defines the action to be performed when the form is submitted.
 Normally, the form data is sent to a web page on the server when the user clicks on the
submit button.
 In the example above, the form data is sent to a page on the server called
"/action_page.php". This page contains a server-side script that handles the form data:
51

<form action="/action_page.php">
FORMS - TAGS

The Method Attribute


The method attribute specifies the HTTP method (GET or POST) to
be used when submitting the form data:
<form action="/action_page.php" method="get">
or:
<form action="/action_page.php" method="post">
52
FORMS
 When to Use GET?
o The default method when submitting form data is GET.
o However, when GET is used, the submitted form data will be visible in the page
address field.
 Note:
o GET must NOT be used when sending sensitive information!
o GET is best suited for short, non-sensitive, amounts of data, because it has size limitations:
too.hp?firstname=Mickey&lastname=Mouse
 When to Use POST?
53
o Always use POST if the form data contains sensitive or personal information.
FORMS

<input / >
Provides a place for input of any kind (input objects).
Can be a field for data or a button to click.

54
ATTRIBUTES
TYPE
 Use with the INPUT tag to tell the browser what kind of input to process.
<input type="button|submit|reset">
Reset type is a button to clear the inputs.
Submit: A button to submit form element texts.
VALUE
 The VALUE is what is the text on the button itself.
55

 Use with the INPUT tag to provide a value to the input object.
ATTRIBUTES

NAME
Assigns a name to an input object. Should be unique for each
SIZE
Use with the <input /> tag to create a size (in length) for the input
object
56
OTHER TAGS

<select>…</select> (ComboBox)
Creates a selection list for a user to pick from

<option>… </option>
Creates an option in the SELECT list

57
ATTRIBUTES

MAXLENGTH
Use with a text field to limit the number of characters a
user can key in.

58
EXERCISE 8 - FORMS

59
PRACTICE QUESTION: CREATE THE FOLLOWING
FORM.

60
QUESTION 2: WRITE HTML CODE THAT DISPLAYS THE
FOLLOWING HOTEL ONLINE APPLICATION FORM: (10)

61
OTHER TAGS
OTHER TAGS

62
OTHER TAGS
OTHER TAGS

63
OTHER TAGS
OTHER TAGS

64
OTHER TAGS
OTHER TAGS

65
OTHER TAGS
OTHER TAGS

66
OTHER TAGS
OTHER TAGS

67

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