Scribd
Upload
10 views

03CIT4053 Lecture 1 HTML

This document provides an introduction to HTML and discusses various HTML tags and structures. It covers: 1. The basic structure of an HTML document with <html>, <head>, <title>, and <body> tags. 2. Common text formatting tags such as <b>, <i>, <u>, <p>, and <br>. 3. Links, images, lists, and forms. It provides examples of how to create ordered lists, unordered lists, links, and basic form elements. 4. The history and evolution of HTML standards. 5. Recommendations on using certain tags sparingly like <blink> and comments.

Uploaded by

soloma9718
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

03CIT4053 Lecture 1 HTML

This document provides an introduction to HTML and discusses various HTML tags and structures. It covers: 1. The basic structure of an HTML document with <html>, <head>, <title>, and <body> tags. 2. Common text formatting tags such as <b>, <i>, <u>, <p>, and <br>. 3. Links, images, lists, and forms. It provides examples of how to create ordered lists, unordered lists, links, and basic form elements. 4. The history and evolution of HTML standards. 5. Recommendations on using certain tags sparingly like <blink> and comments.

Uploaded by

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

03CIT4053

Technology for Web Development

Lecture 1:
Introduction to HTML
Assessment Components

• Assignments 35%
• Assignment 1 – 15%
• Assignment 2 – 20%
• Test 15%
• Project 50%
Web Client-Server structure
What is HTML?

• HTML, otherwise known as HyperText Markup


Language, is the language used to create Web
pages
• Using HTML, you can create a Web page with
text, graphics, sound, and video

1.HTML 1.0: released in 1991


2.HTML 2.0: released in 1995
3.HTML 3.2: released in 1997
4.HTML 4.01: released in 1999
5.XHTML: released in 2000
6.HTML5: released in 2014
Programming Editor - VSCode

• https://code.visualstudio.com/Download
• Install VSCode
• Install HTML5 Extension Pack
• Extension > Install HTML5 extension pack
HTML Structure - Tags

• The essence of HTML programming is tags


• A tag is a keyword enclosed by angle brackets (
Example: <I> )
• There are opening and closing tags for many
but not all tags; The affected text is between
the two tags
More Tags...

• The opening and closing tags use the same


command except the closing tag contains and
additional forward slash /
• For example, the expression <B> Warning </B>
would cause the word ‘Warning’ to appear in
bold face on a Web page
Nested Tags

• Whenever you have HTML tags within other


HTML tags, you must close the nearest tag first
• Example:
<H1> <I> The Nation </I> </H1>
Structure of a Web Page

• All Web pages <HTML>


<HEAD>
share a common
<TITLE> Example </TITLE>
structure
</HEAD>
• All Web pages <BODY>
should contain a This is where you would
pair of <HTML>, include the text and images
on your Web page.
<HEAD>, <TITLE>,
</BODY>
and <BODY> tags
</HTML>
The <TITLE> Tag

• Choose the title of your Web page carefully;


The title of a Web page determines its ranking
in certain search engines
• The title will also appear on Favorite lists,
History lists, and Bookmark lists to identify
your page
Text Formatting

• Manipulating text in HTML can be tricky;


Oftentimes, what you see is NOT what you get
• For instance, special HTML tags are needed to
create paragraphs, move to the next line, and
create headings
Text Formatting Tags

<B> Bold Face </B>


<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
Changing the 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 7
Changing the Font
• To change the color, use <FONT COLOR=“red”>….
</FONT>; The color can also be defined using
hexadecimal representation ( Example: #ffffff )
• These attributes can be combined to
change the font, size, and color of the
text all at once; For example, <FONT
SIZE=4 FACE=“Courier” COLOR=“red”> ….
</FONT>
Headings

• Web pages are typically organized into


sections with headings; To create a heading
use the expression <Hn>….</Hn> where n is a
number between 1 and 7
• In this case, the 1 corresponds to the largest
size heading while the 7 corresponds to the
smallest size
Aligning Text

• The ALIGN attribute can be inserted in the <P>


and <Hn> tags to right justify, center, or left
justify the text
• For example, <H1 ALIGN=CENTER> The New
York Times </H1> would create a centered
heading of the largest size
Comment Statements

• Comment statements are notes in the HTML


code that explain the important features of
the code
• The comments do not appear on the Web page
itself but are a useful reference to the author
of the page and other programmers
• To create a comment statement use the <!--
…. --> tags
The Infamous Blink Tag

• It is possible to make text blink using the


<BLINK> … </BLINK> tag
• However, it is best to use this feature at most
sparingly or not at all; What seems like a good
idea to a Web designer can become very
annoying to a Web user
• The <BLINK> tag is not supported by Internet
Explorer
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>
Example

<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text and images on
your Web page.
</BODY>
</HTML>
Inserting Images

• Type <IMG SRC = “image.ext”>, where


image.ext indicates the location 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
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:
<IMG SRC=“satellite.jpg” ALT = “Picture of
satellite”>
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>
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 he/she clicks on the link.
• The label is the text that will appear
underlined or highlighted on the page
Example: Links

• To create a link to CNN, I would type:


<A HREF=“http://www.cnn.com”>CNN</A>

• To create a link to MIT, I would type:


<A HREF=“http://www.mit.edu”>MIT</A>
Changing the Color of Links

• The LINK, VLINK, and ALINK attributes can be


inserted in the <BODY> tag to define the color
of a link
• LINK defines the color of links that have not been
visited
• VLINK defines the color of links that have already
been visited
• ALINK defines the color of a link when a user clicks
on it
Using Links to Send Email

• To create a link to an email address, type <A


HREF=“mailto:email_address”> Label</A>
• For example, to create a link to send email to
myself, I would type: <A HREF=“mailto:
[email protected]”>email Katie Dunn</A>
Anchors

• Anchors enable a user to jump to a specific


place on a Web site
• Two steps are necessary to create an anchor.
First you must create the anchor itself. Then
you must create a link to the anchor from
another point in the document.
Anchors

• To create the anchor itself, 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
Example: Anchor

<A HREF="#chap2">Chapter Two</A><BR>


Link

<A NAME="chap2">Chapter 2 </A> Ancho


r
Ordered Lists

• Ordered lists are a Here’s how it


list of numbered would look on the
items.
Web:
• To create an ordered
list, type:
<OL>
<LI> This is step one.
<LI> This is step two.
<LI> This is step
three.
</OL>
More Ordered Lists….

• The TYPE=x attribute allows you to change the


the kind of symbol that appears in the list.
• A is for capital letters
• a is for lowercase letters
• I is for capital roman numerals
• i is for lowercase roman numerals
Unordered Lists

• An unordered list is a Here’s how it


list of bulleted items would look on the
• To create an Web:
unordered list, type:
<UL>
<LI> First item in list
<LI> Second item in
list
<LI> Third item in list
</UL>
More Unordered Lists...

• The TYPE=shape attribute allows you to


change the type of bullet that appears
• circle corresponds to an empty round bullet
• square corresponds to a square bullet
• disc corresponds to a solid round bullet; this is the
default value
Forms
 What are forms?
• An HTML form is an area of the document 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.
Forms

• There are two basic components of a Web


form: the shell, the part that the user fills out,
and the 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...
Example: Form
Text Box

Drop-down Menu
Radio Buttons
Checkboxes

Text Area

Reset Button
Submit Button
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, like text boxes and radio
buttons
• the submit button which triggers the script to send
the entered information to the server
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> tag
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
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
Example: Text Box

First Name: <INPUT


TYPE="text"
• Here’s how it
NAME="FirstName" would look on the
VALUE="First Name"
SIZE=20> Web:
<BR><BR>

Last Name: <INPUT


TYPE="text"
NAME="LastName"
VALUE="Last Name" SIZE=20>
<BR><BR>
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
Example: Text Area

<B>Comments?</B>
<BR>
<TEXTAREA NAME="Comments" ROWS=10
COLS=50 WRAP>
</TEXTAREA>
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
Example: Radio Buttons

<B> Size: </B>


<INPUT TYPE="radio" NAME="Size"
VALUE="Large">Large
<INPUT TYPE="radio" NAME="Size"
VALUE="Medium">Medium
<INPUT TYPE="radio" NAME="Size"
VALUE="Small">Small
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
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
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
Example: Drop-down Menu

<B>WHICH IS FAVOURITE FRUIT:</B>


<SELECT>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>
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!”
Creating a Reset Button

• To create a reset button, type <INPUT


TYPE=“reset”>
• The VALUE attribute can be used in the same
way to change the text that appears on the
button
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> tag defines the beginning of a cell
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
BODERCOLORDARK=“color” and
BORDERCOLORLIGHT=“color”
Creating Simple Table

<TABLE BORDER=10> • Here’s how it


<TR> would look on the
<TD>One</TD> Web:
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
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.
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
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 </TABLE> tags as you normally would
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>
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
Spanning Cells Across Rows

• To span a cell across many rows, type <TD


ROWSPAN=n>, where n is the number of rows
Aligning Cell Content

• By default, a cell’s content are aligned


horizontally to the left and 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
Controlling Cell Spacing

• Cell spacing is the space between cells while


cell padding is the space around the contents
of a cell
• To control both types of spacing, use the
CELLSPACING =n and CELLPADDING=n
attributes in the <TABLE> tag
Nesting Tables

• Create the inner table


• Create the outer table and determine which 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 an easier way to lay out your Web
page
Changing a Cell’s Color

• To change a cell’s color, add the


BGCOLOR=“color” attribute to the <TD> tag
• Example:
<TD BGCOLOR=“blue”>
Dividing Your Table into Column
Groups

• You can divide your table into two kinds of


column groups: structural and non-structural.
• Structural column groups control where
dividing lines are drawn; Non-structural groups
do not
• Both let you format an entire column of cells
at once
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
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
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>Washington, D.C.
Parting Words….

• If you can imagine a way to lay out your page,


chances are it is possible using HTML
• When in doubt, use an HTML reference

You might also like