Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
7 views

Week 2: HTML Authoring: Instructor: Khaled Ismail

This document provides an instruction on HTML authoring. It discusses various HTML tags for text formatting, images, lists, tables, links, and colors. It also provides examples and assignments for students to create their resume webpage using basic HTML tags covered in the lesson. The instructor asks students to include their name and metric number in the personal information section along with multiple paragraphs, text formatting, lists, links, images, and a table. The goal is for students to learn HTML and create a resume webpage about themselves.

Uploaded by

NZ MA
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
7 views

Week 2: HTML Authoring: Instructor: Khaled Ismail

This document provides an instruction on HTML authoring. It discusses various HTML tags for text formatting, images, lists, tables, links, and colors. It also provides examples and assignments for students to create their resume webpage using basic HTML tags covered in the lesson. The instructor asks students to include their name and metric number in the personal information section along with multiple paragraphs, text formatting, lists, links, images, and a table. The goal is for students to learn HTML and create a resume webpage about themselves.

Uploaded by

NZ MA
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 36

I NS T RUCT OR: KHAL E D I S MAI L

WEEK 2: HTML AUTHORING


REVIEW: CLIENT AND SERVER
User uses HTTP client (Web Browser)
It has a URL (e.g. http://www.yahoo.com/)
Makes a request to the server
Server sends back data (the response)
User clicks on the client side...
request (URL)
response (HTML, ) Client Server
2
WHAT ARE THE BASIC TOOLS?
Plain text editor like NotePad to write HTML
documents
Web browser to test and view the created
web page
HTML reference book or web materials to
serve as guide for HTML tags.
http://www.w3schools.com/html/default.asp
3
HTML DOCUMENT
<HTML>
<HEAD>
</HEAD>
<BODY>

</BODY>
</HTML>
4
THE HEAD SECTION
<HEAD> - begin the head section
<TITLE> - page description
</TITLE> - end of title
<!--- > Comments may be placed here </>
</HEAD> - end of the head section
5
THE BODY SECTION
<BODY>

{Text displayed by browser}

</BODY>
6
NESTED TAGS
Like a tree, each element is contained
inside a parent element
Each element may have any number of
attributes

<body>...</body> bgcolor="white"
<html>...</html>
<head>...</head>
<title>...</title> other stuff <p>...</p> <br> <table>...</table>
This is some text!
7
BASIC TAGS
<html>
<head>
<title>My First Web Page</title>
</head>
<body bgcolor="white">
<p>A Paragraph of Text.</p>
</body>
</html>

8
NESTING TAGS
Hierarchy tags that affect entire
paragraph may contain tags affecting individual
words or letters
Order the current closing tag should
correspond the last unclosed opening tag
9
NESTING TAGS (EXAMPLE)
Correct:
<H1> Master of <I> library </I> Mangement System </H1>

Incorrect:
<H1> Master of <I> library Management System</H1></I>


10
TAG ATTRIBUTES
Attributes offer a variety of options
Entered between command word and final symbol
>
A single tag may have a few attributes
Attributes are places one after the other in any
order
Example:

<IMG>
<IMG SRC=Image.bmp width=50>
11
ATTRIBUTE VALUES

Attributes can accept the values of particular types
Values of attributes should be enclosed in straight
quotation marks
may be omitted if the value contains only letters,
digits, hyphen (-), and period (.)
12
TEXT TAGS 1
<H1> </H1> Heading.
<H2> </H2> Heading.
<H3> </H3> Heading.
.
<H6> </H6> Heading.



13
TEXT TAGS 2
<P> </P> : Paragraph.
<B> </B> : Bold
<I> </I> : Italics
<U> </U> : Underline
<EM> </EM> : Emphasize (logical exact
effect depends on browser)
<BR /> : Line feed or break
<HR /> : Horizontal Rule (line)

14
TEXT LAYOUT

<CENTER>
<DIV> (same as <P>)
<P>
<P ALIGN = > </P>
Right
Left
Center
Justify
15
CHANGING THE FONT

<FONT FACE=FONTNAME SIZE=n>
{ Text } </FONT>
FONTNAME specifies the font
SIZE defines the size
N=3 corresponds to default value
Value of n 1 2 3 4 5 6 7
Size in pt. 8 10 12 14 18 24 36
16
HTML LISTS
Ordered List
<OL TYPE = circle><OL>
TYPE can be A, a, I, i.
If TYPE is left, by default we have Numbers.
TYPE can also take values like A, a, i, I
We can configure the numbering to start from a
particular value with the help of start attribute.
Unordered list
<UL TYPE=circle></UL>
TYPE can be circle or square or disc
17
LISTS
Unordered Lists
<ul>
<li> Apples </li>
<li> Oranges </li>
</ul>
Ordered Lists
<ol>
<li> One </li>
<li> Two </li>
</ol>
Can be nested



18
IMAGES
JPEG, GIF, Bmp, Png images are recognized
by browsers
<IMG> tag will place image on your page
The attribute SRC, tells the location from
which the image is to be taken
We can control size of the image (width and
height attributes)
The attribute ALT will say the text to be
displayed in the place of image, if image
not found.
19
IMAGES
The attribute BORDER specifies the thickness
of border around the image.
Hspace and Vspace attributes allows us to
add space to the left-right sides and top-
bottom sides
Aligning images is also possible with the
align property

<img src="URL of image file">

20
TABLES
A table is a matrix of rows and columns, each
possibly having content
Each position in a table is called a cell
Some cells have labels, but most have data
A table is specified as the content of a <table> tag
A border attribute in the <table> tag specifies a
border between the cells

21
TABLES
If border is set to "border", the browsers default
width border is used which is 1.
The border attribute can be set to a number, which
will be the border width
Without the border attribute, the table will have no
lines!
Tables can have captions.
22
TABLE
Each row of a table is specified as the content of a
<tr> tag
The row headings are specified as the content of a
<th> tag
The contents of a data cell is specified as the
content of a <td> tag

23
TABLE
<table border = "border">
<caption> Fruit Juice Drinks
</caption>
<tr>
<th> </th>
<th> Apple </th>
<th> Orange </th>
<th> Grape</th>
</tr>
<tr>
<th> Breakfast </th>
<td> 0 </td>
<td> 1 </td>
<td> 0 </td>
</tr>

<tr>
<th> Lunch </th>
<td> 1 </td>
<td> 0 </td>
<td> 0 </td>
</tr>
<tr>
<th> Dinner </th>
<td> 0 </td>
<td> 0 </td>
<td> 1 </td>
</tr>

</table>
24

<tr>
<th colspan = "3"> Fruit Juice Drinks
</th>
</tr>
<tr>
<th> Orange </th>
<th> Apple </th>
<th> Screwdriver </th>
</tr>

TABLE
25
COMMENTS
<!-- This is a comment -->
<!--
This paragraph,
is also a
comment...
-->
26
ANCHOR TAG (HYPERLINK)
<A> - Anchor tag
Its attribute HREF will be the page to which we will
be redirected.
<A HREF=Second.html>Click Here</A>
Click Here will appear in the browser like this
Click Here
27
ANCHOR TAG (HYPERLINK)
Absolute HREFs specify fully qualified URLs.

<a href="http://www.yahoo.com/">Yahoo!</a>
<a href="reldoc.html">In this directory!</a>
<a href=a/doc.html">In sub-directory a!</a>

Relative HREFs are relative to the directory containing the
current HTML file.

28
SPECIFYING COLORS FOR LINKS
Define colors for individual links on the page.
Placing font tags between the <a href> and the
</a> tag.
Click <a href="http://www.google.com">
<font color=Blue">here</font></a> to go to
Google.
Using a style setting in the <a> tag.
Click <a href="http://www. google.com"
style="color: red">here</a> to go to Google.
29
INTERNAL LINK
To create a link with in that page, add a name
attribute to the anchor tag and specify that name
from the place where you want that navigation
<a name="chapter1">Some contents</a>

Click <a href="#chapter1">here</a> to read chapter 1.


30
LINK TO EMAIL
<a href="mailto:xyz@abc.com">Email Me</a>
This will appear in the page as
Email Me

When we click that, we can compose mail
and send it to that address.
We can even configure subject and body of
the mail using the attributes subject and
body.

31
The color of the background and text elements of
the web page can vary using attributes of the
<BODY> and <FONT> tag
To specify color, HTML uses the color names (16
colors supported by most browsers), or the
numerical equivalent in RGB hexadecimal codes
that correspond to over 14 million possible color.
White #ffffff Black #000000 Blue #0000ff
Red #ff0000 Yellow #ffff00 Green #00800

Color reference: http://html-color-codes.com/
HOW TO ADD COLOR
32
A FEW RGB COLORS
33
bgcolor sets the background color of the
whole page
text defines the text color for the page
link - unvisited link color
vlink - visited link color
alink - activated link color
<BODY bgcolor=#ffffff text=#000000 link=#0000cc vlink=#00ff00 alink=#ff0000
>
HOW TO ADD COLOR
34
ASSIGNMENT #1
You are required to create your resume web page
to tell the world about you.
The layout and content of your Web page are
entirely up to you. I encourage you to be creative
and produce a document that you are proud to
display to the world.
At a bare minimum, your page must provide the
following:
35
ASSIGNMENT #1 CONT
1. There should be several sections to your page (e.g.,
Personal Info, Hobbies, Favourite Links), each with its
own heading. At least one section must have multiple
paragraphs in it. (In your Personal Info page you must
type your Metric No and name.
2. Your resume page should perform some text
formatting (bold, italics, colour, headings)
3. There should be at least one list (e.g., your top-ten
favourite CDs).
4. There should be at least 2 anchor links in the page.
5. There should be at least 1 image in the page.
6. There must be at least one table.

36

You might also like