Scribd
Upload
84 views57 pages

Lesson1-Intro To HTML

The document provides an introduction to HTML by discussing its main components and tags. It explains that HTML documents are text files that use markup tags to tell browsers how to display content. The most important tags are <html>, <head>, and <body>, which define the overall structure of an HTML page. Within these tags, other tags format text and insert elements like headings, paragraphs, links, and lists. The document also demonstrates how to create a basic HTML file and describes many common tags for text formatting and page layout.

Uploaded by

Olphil Olphil
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
84 views57 pages

Lesson1-Intro To HTML

The document provides an introduction to HTML by discussing its main components and tags. It explains that HTML documents are text files that use markup tags to tell browsers how to display content. The most important tags are <html>, <head>, and <body>, which define the overall structure of an HTML page. Within these tags, other tags format text and insert elements like headings, paragraphs, links, and lists. The document also demonstrates how to create a basic HTML file and describes many common tags for text formatting and page layout.

Uploaded by

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

Introduction to HTML

HTML: HyperText Markup


Language
 HTML documents are simply text documents with a
specific form
 Documents comprised of content and markup tags
 Content: actual information being conveyed
 The markup tags tell the Web browser how to display the
page
 An HTML file must have an htm or html file extension
 An HTML file can be created using a simple text editor

2
Our First Example

 If you are running Windows, start Notepad


 If you are on a Mac, start SimpleText
 If you telnet to csupomona.edu, use “pico”
 Type in the following:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

 Open this file using a browser, and you will see…


3
HTML Tags

 HTML tags are used to mark-up HTML elements


 Surrounded by angle brackets < and >
 HTML tags normally come in pairs, like <tagname> (start
tag) and </tagname> (end tag)
 The text between the start and end tags is the element
content
 Not case-sensitive
 Follow the latest web standards:
 Use lowercase tags

4
Tag Attributes

 Tags can have attributes that provide additional


information to an HTML element
 Attributes always come in name/value pairs like:
name=“value”
 Attributes are always specified in the start tag
 Attribute values should always be enclosed in quotes.
Double quotes are most common.
 Also case-insensitive: however, lowercase is recommended
 <tagname a1=“v1” a2=“v2”></tagname>
 For example, <table border=“0”> is a start tag that defines
a table that has no borders

5
HTML Document Structure

 Entire document enclosed within <html> and </html>


tags
 Two subparts:
 Head
 Enclosed within <head> and </head>
 Within the head, more tags can be used to specify title of the
page, meta-information, etc.

 Body
 Enclosed within <body> and </body>
 Within the body, content is to be displayed
 Other tags can be embedded in the body

6
We’ll Study…

 HTML Basics
(http://www.w3schools.com/html/html_intro.asp):
 HTML Elements
 HTML Headings
 HTML Paragraphs
 HTML Formatting
 HTML Styles
 HTML Images
 HTML Tables
 HTML Lists
 HTML Forms
 HTML Colors

7
Headings, Paragraphs,
Breaks & Horizontal Rules
In this chapter you will add headings to your page, insert
paragraphs, add some breaks, and add horizontal
rules.
Objectives
Upon completing this section, you should be able to
1. List and describe the different Heading elements.
2. Use Paragraphs to add text to a document.
3. Insert breaks where necessary.
4. Add a Horizontal Rule.

8
Headings, <Hx> </Hx>

 Inside the BODY element, heading elements H1


through H6 are generally used for major divisions of
the document. Headings are permitted to appear in
any order, but you will obtain the best results when
your documents are displayed in a browser if you
follow these guidelines:
1. H1: should be used as the highest level of
heading, H2 as the next highest, and so forth.
2. You should not skip heading levels: e.g., an H3
should not appear after an H1, unless there is
an H2 between them.

9
Headings, <Hx> </Hx>

10
Paragraphs, <P> </P>

 Paragraphs allow you to add text to a document in such


a way that it will automatically adjust the end of line to
suite the window size of the browser in which it is being
displayed. Each line of text will stretch the entire
length of the window.

11
Paragraphs, <P> </P>

12
Break, <BR>

 Line breaks allow you to decide where the text will


break on a line or continue to the end of the window.
 A <BR> is an empty Element, meaning that it may
contain attributes but it does not contain content.
 The <BR> element does not have a closing tag.

13
Break, <BR>

14
Horizontal Rule, <HR>

15
Colors

 Background and text colors are attributes of the “body”


of the document.
 text=“#xxxxxx” determines your text color
 Bgcolor=“#xxxxxx” determines your background color
 Colors and codes for HTML can be found at
http://hotwired.lycos.com/webmonkey/reference/colo
r_codes/

16
Colors

17
Color Codes

18
The Body Element

 The BODY element of a web page is an important


element in regards to the page’s appearance. Here are
the attributes of the BODY tag to control all the levels:
TEXT="#RRGGBB" to change the color of all the text on
the page (full page text color.)
 This element contains information about the page’s
background color, the background image, as well as the
text and link colors.

19
Background Color

 It is very common to see web pages with their


background color set to white or some other colors.
 To set your document’s background color, you need to
edit the <BODY> element by adding the BGCOLOR
attribute. The following example will display a
document with a white background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>

20
TEXT Color

 The TEXT attribute is used to control the color of all the


normal text in the document. The default color for text
is black. The TEXT attribute would be added as follows:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”></BODY>
In this example the document’s page
color is white and the text would be red

21
Character Formatting
 In this chapter you will learn how to enhance your page with Bold, Italics,
and other character formatting options.
 Objectives
 Upon completing this section, you should be able to
 Change the color and size of your text.
 Use Common Character Formatting Elements.
 Align your text.
 Add special characters.
 Use other character formatting elements.

22
Bold, Italic and other Character
Formatting Elements
 <FONT SIZE=“+2”> Two sizes bigger</FONT>
 The size attribute can be set as an absolute value from 1 to 7 or as a relative
value using the “+” or “-” sign. Normal text size is 3 (from -2 to +4).
 <B> Bold </B>
 <I> Italic </I>
 <U> Underline </U>
 Color = “#RRGGBB” The COLOR attribute of the FONT element. E.g., <FONT
COLOR=“#RRGGBB”>this text has color</FONT>
 <PRE> Preformatted </PRE> Text enclosed by PRE tags is displayed in a mono-
spaced font. Spaces and line breaks are supported without additional elements
or special characters.

23
Bold, Italic and other Character
Formatting Elements

 <EM> Emphasis </EM> Browsers usually display this as


italics.
 <STRONG> STRONG </STRONG> Browsers display this as
bold.
 <TT> TELETYPE </TT> Text is displayed in a mono-
spaced font. A typewriter text, e.g. fixed-width font.
 <CITE> Citation </CITE> represents a document citation
(italics). For titles of books, films, etc. Typically
displayed in italics. (A Beginner's Guide to HTML)

24
Alignment

 Some elements have attributes for alignment (ALIGN)


e.g. Headings, Paragraphs and Horizontal Rules.
 The Three alignment values are : LEFT, RIGHT, CENTER.
 <CENTER></CENTER> Will center elements.

25
Lists

 Lists are found inside the body, and are written as


“<ul>” for an unordered list, or “<ol>” for an ordered
(or numbered) list.
 List items are denoted by “<li>” and do not require
closing tags.

26
List Elements
 You have the choice of three bullet types: disc(default), circle, square.
 These are controlled in Netscape Navigator by the “TYPE” attribute for the
<UL> element.
 <UL TYPE=“square”>
 <LI> List item …</LI>
 <LI> List item …</LI>
 <LI> List item …</LI>
 </UL>
 List item …
 List item …
 List item …

27
Links

 The biggest thing that made HTML so popular was its


ability to link to other documents or sections of
documents.
 A link is indicated by <a> (anchor).
 The text that will become the link is identified with by
<href> (hyperlink reference).

28
More Links

 An example link would be: <a


href=“document.html”>Link to document</a>
 This would make the phrase “Link to document” a
hyperlink to “document.html” assuming that it is in the
same directory as your current file.
 If the document is in a different directory, you need to
include it in the path. For example:
<a href=“extracrap/document.html”>

29
LINK, VLINK, and ALINK
These attributes control the colors of the different link states:
1. LINK – initial appearance – default = Blue.
2. VLINK – visited link – default = Purple.
3. ALINK –active link being clicked–default= Yellow.
The Format for setting these attributes is:
<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000” LINK=“#0000FF”
VLINK=“#FF00FF”
ALINK=“FFFF00”> </BODY>

30
Adding Images

 <IMG>This element defines a graphic image on the


page.
 Image File (SRC:source): This value will be a URL
(location of the image) E.g.
http://www.domain.com/dir/file.ext or /dir/file.txt.
 Alternate Text (ALT): This is a text field that describes
an image or acts as a label. It is displayed when they
position the cursor over a graphic image.
 Alignment (ALIGN): This allows you to align the image
on your page.

31
Adding Images

 I suggest you make a folder for images in your directory


– it will make it easier to refer to things.
 The <image src=“??????”> tag will allow you to insert an
image. ??????? Should be the path to the image file.
 For example: <image src=“sample.jpeg> if the image
named “sample” is in the same directory as your html
file.

32
Images
 Width (WIDTH): is the width of the image in pixels.
 Height (HEIGHT): is the height of the image in pixels.
 Border (BORDER): is for a border around the image, specified in pixels.
 HSPACE: is for Horizontal Space on both sides of the image specified in
pixels. A setting of 5 will put 5 pixels of invisible space on both sides of the
image.
 VSPACE: is for Vertical Space on top and bottom of the image specified in
pixels. A setting of 5 will put 5 pixels of invisible space above and bellow
the image.

33
Images as Links

 You can also href an image the same way you would
with text, by including the <image src=“sample.jpeg> in
place of the text between the href anchors.
 For example: <a href=“www.catabus.com”><image
src=“sample.jpeg></a>
 Or, you could have “mailto:[email protected]” in place of
the website.

34
Using Image Background

 The BODY element also gives you ability of setting an


image as the document’s background.
 An example of a background image’s HTML code is as
follows:

<BODY BACKGROUND=“hi.gif”
BGCOLOR=“#FFFFFF”></BODY>

35
Tables

In this chapter you will learn that tables have many uses in
HTML.
Objectives:
Upon completing this section, you should be able to:
1. Insert a table.
2. Explain a table’s attributes.
3. Edit a table.
4. Add a table header.

36
TABLES

 The <TABLE></TABLE> element has four sub-


elements:
1. Table Row<TR></TR>.
2. Table Header <TH></TH>.
3. Table Data <TD></TD>.
4. Caption <CAPTION></CAPTION>.
 The table row elements usually contain table header
elements or table data elements.

37
TABLES
<table border=“1”>
<tr>
<th> Column 1 header </th>
<th> Column 2 header </th>
</tr>
<tr>
<td> Row1, Col1 </td>
<td> Row1, Col2 </td>
</tr>
<tr>
<td> Row2, Col1 </td>
<td> Row2, Col2 </td>
</tr> 38

</table>
Tables Attributes

 BGColor: Some browsers support background colors in a


table.
 Width: you can specify the table width as an absolute
number of pixels or a percentage of the document
width. You can set the width for the table cells as well.
 Border: You can choose a numerical value for the
border width, which specifies the border in pixels.
 CellSpacing: Cell Spacing represents the space between
cells and is specified in pixels.

39
Tables Attributes

 CellPadding: Cell Padding is the space between the cell


border and the cell contents and is specified in pixels.
 Align: tables can have left, right, or center alignment.
 Background: Background Image, will be titled in IE3.0
and above.
 BorderColor, BorderColorDark.

40
Table Data and Table Header

Attributes
Colspan: Specifies how many cell columns of the table this cell should span.
 Rowspan: Specifies how many cell rows of the table this cell should span.
 Align: cell data can have left, right, or center alignment.
 Valign: cell data can have top, middle, or bottom alignment.
 Width: you can specify the width as an absolute number of pixels or a
percentage of the document width.
 Height: You can specify the height as an absolute number of pixels or a
percentage of the document height

41
Forms
 Forms add the ability to web pages to not only provide the person viewing
the document with dynamic information but also to obtain information
from the person viewing it, and process the information.
Objectives:
Upon completing this section, you should be able to
1. Create a FORM.
2. Add elements to a FORM.
3. Define CGI (Common Gateway Interface).
4. Describe the purpose of a CGI Application.
5. Specify an action for the FORM.
 Forms work in all browsers.
 Forms are Platform Independent.

42
Forms

 To insert a form we use the <FORM></FORM> tags. The rest of the


form elements must be inserted in between the form tags.
<HTML> <HEAD>
<TITLE> Sample Form</TITLE>
</HEAD>
<BODY BGCOLOR=“FFFFFF”>
<FORM ACTION = http://www.xnu.com/formtest.asp>
<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname”
MAXLENGTH=“50”> </P>
<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send Info”>
</P>
</FORM>
</BODY> </HTML>

43
Form Elements

 Form elements have properties: Text boxes, Password


boxes, Checkboxes, Option(Radio) buttons, Submit,
Reset, File, Hidden and Image.
 The properties are specified in the TYPE Attribute of
the HTML element <INPUT></INPUT>.

44
Form Elements

45
Text Box

46
Example on Text Box
<TITLE>Form_Text_Type</TITLE>
</HEAD> <BODY>
<h1> <font color=blue>Please enter the following bioData</font></h1>
<FORM name="fome1" Method= " get " Action= " URL " >
First Name: <INPUT TYPE="TEXT" NAME="FName"
SIZE="15" MAXLENGTH="25"><BR>
Last Name: <INPUT TYPE="TEXT" NAME="LName"
SIZE="15" MAXLENGTH="25"><BR>
Nationality: <INPUT TYPE="TEXT" NAME="Country"
SIZE="25" MAXLENGTH="25"><BR>
The Phone Number: <INPUT TYPE="TEXT" NAME="Phone"
SIZE="15" MAXLENGTH="12"><BR>
</FORM> </BODY> </HTML>
47
Password

48
Password example

<HTML><HEAD>
<TITLE>Form_Password_Type</TITLE></HEAD>
<BODY>
<h1> <font color=red>To Access, Please
enter:</font></h1>
<FORM name="fome2" Action="url" method="get">
User Name: <INPUT TYPE="TEXT" Name="FName"
SIZE="15" MAXLENGTH="25"><BR>
Password: <INPUT TYPE="PASSWORD"
NAME="PWord" value="" SIZE="15”
MAXLENGTH="25"><BR>
</FORM></BODY> </HTML>

49
Check Box

50
CHECKBOX EXAMPLE

51
Radio Button

52
RADIOBUTTON EXAMPLE

53
Submit Button

54
SUBMIT BUTTON EXAMPLE

55
EXERCISE

 IMPLEMENT TEXTAREA,FILE and any other form elements


missing

56
 END

57

You might also like