1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”

1

Lecture 12Lecture 12

Basic HTMLBasic HTML

ITEC 1000 “Introduction to Information Technology”

2

Lecture Template:Lecture Template:

World Wide WebWorld Wide Web Web browserWeb browser HTML Features & FilesHTML Features & Files HTML RulesHTML Rules Tags and Tags AttributesTags and Tags Attributes URLURL HTML DocumentsHTML Documents SchemeScheme TableTable

3

World Wide WebWorld Wide Web

WWW is a service on the Internet

WWW links information, so that user can easily go from one piece of information to another related piece

WWW is based on HTML

4

Hypertext Mark-up Hypertext Mark-up LanguageLanguage

(HTML)(HTML)

HTML is a standard programming language used to:

create and organized documents on the World Wide Web format textadd graphics, sound, video; and save it all in a TextOnly or ASCII format, so that any computer can read a Web page

5

Web BrowserWeb Browser

Computer program to view a Web pageFunctions:

Search and access a Web-server;Load, format, and display HTML-documents;Hyperlink detection and moving from one document to another;Standard tools support

6

HTML FeaturesHTML Features

Hypertext, that allows to create a link in a Web page that leads to any other pages on the Web. Hence information on the Web can be accessed from many different locations

Universality means that any computer can read a Web page regardless of platforms or operating systems

7

HTML FilesHTML Files

Must be saved as text files with extension html or htm. The extension tells the browser that file is to be interpreted according to HTML standards

Have relatively small sizes Can be created with any text editor,

including Notepad and WordPad (for Windows) or TeachText or SimpleText (on Mac)

8

HTML Building BlocksHTML Building Blocks

HTML tags are commands written between angle brackets < >, that indicate how browser should display the text.

Tags may have opening and closing version

Text is placed in a container (or HTML element), which starts with opening tag and ends with closing tag, e.g.:

<B> Bold text </B>

9

HTML RulesHTML Rules

Case insensitive Spacing:

Browsers ignore extra spaces Block-level tags include automatic

line breaksExamples: P, H1, UL, TABLE

10

Tag AttributesTag Attributes

Attributes offer a variety of options Attributes are entered between command

word and final symbol “>” A single tag may have a few attributes Attributes are placed one after the other in

any order<IMG SRC=“Image.bmp” HSPACE=5>

11

Attribute ValuesAttribute 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 (A-Z, a-z), digits (0-9), hyphen (-), or a period (.)

12

Nesting TagsNesting Tags

Hierarchy – tags that affect entire paragraph may contain tags affecting individual words or letters

Order – the current closing tag should correspond to the last unclosed opening tag

13

Nesting Tags (example)Nesting Tags (example)

Correct:<H1> Information

<I>System</I></H1>

Incorrect:<H1> Information

<I>System</H1></I>

14

HTML DocumentHTML Document

<HTML><HEAD> … </HEAD><BODY> …</BODY></HTML>

15

Starting a web pageStarting a web page

Identify the content of the document as an HTML code:

<HTML>

</HTML>

16

Head and bodyHead and body

HEAD-section defines the title of the page (used by searching engines)

<HEAD> … </HEAD> BODY-section defines the contents of

the web page (what visitor will see)<BODY>

…</BODY>

17

HEAD SectionHEAD Section

<HEAD> - beginning of the head section

<TITLE> - page description</TITLE> - end of title<!- Script or comment may be placed here -></HEAD> - end of the head section

18

TITLE sectionTITLE section

Each HTML page must have a title Appears in the title bar of the

window Place the cursor between opening

tags <HTML> and <HEAD> and enter:

<TITLE>First web page</TITLE>

19

BODY SectionBODY Section

<BODY>

{Text displayed by browser}

</BODY>

20

Headers on the pageHeaders on the page

HTML provides for up to six levels In the BODY-section specify the level of

header you need (<Hn>, n is a number from 1 to 6)

<H1> This is level 1 </H1> To align the header, type

ALIGN=direction, where direction is left, right, or center within the opening tag:

<H2 ALIGN=left>

21

Commonly Used HTML TagsCommonly Used HTML Tags

<H1> … </H1> Heading <H2> … </H2> Heading<H3> … </H3> Heading<BLOCKQUOTE> … </ BLOCKQUOTE >

Indents block of text one tab

22

Commonly Used HTML Tags Commonly Used HTML Tags (continued…)(continued…)

<P> … </P> : Paragraph<B> … </B> : Bold <I> … </I> : Italic <U> … </U> : Underline<EM> … </EM> : Emphasize (logical – exact

effect depends on browser)

<BR/> : Line break<HR/> : Horizontal Rule (line)

23

Changing the FontChanging the Font

<FONT FACE=“FONTNAME” SIZE=“n”> { Text } </FONT>FONTNAME specifies the fontSIZE 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

24

Text styleText style

Font style <FONT FACE=“fontname>Text to

display</FONT> Bold text<B>Text to be bolded </B> Italic text<I>Text to be italicized </I>

25

Text style (cont…)Text style (cont…)

Text size <FONT SIZE=“n”>, n is a number from 1

to 7; 3 is the browser’s default value Text colour<FONT COLOR=“#rrggbb”> - hexadecimal

code Superscripts/subscripts: <SUP>, <SUB> Blink text: <BLINK> Text </BLINK>

26

New paragraph on the New paragraph on the pagepage

HTML does not recognize the returns from the text editor

To start a new paragraph, use <P tag (can be combined with ALIGN=direction clause)

<P ALIGN=center>Text of the paragraph</P>

27

Ordered ListOrdered List

<OL TYPE=x START=n> Beginning of an Ordered List

<LI> … </LI> A list element<LI> … </LI> Another list element

</OL> End of the Ordered List

TYPE, START are optional X=A, a, I, i, 1 ( X=1 is default value)n – initial value for list items

28

Unordered ListUnordered List

<UL TYPE=shape > Beginning an Unordered List

<LI> … </LI> A list element<LI> … </LI> Another list element

</UL> End of the Unordered List

TYPE is optional, shape represents the kind of bullet, like circle, square…

29

Uniform Resource Locator Uniform Resource Locator (URL)(URL)

“http://www.cse.yorku.ca/~hofbauer/itec1000.htm”

Unique address of each file on the Internet URL can be

Absolute – contains all parts of URL;Relative – presents path and file name relatively current file.

Scheme Server name

Path File name

30

SchemeScheme

Tells the browser how to deal with the file Must be in lower case Usually followed by a colon and two forward

slashes (://) http – Hypertext Transfer Protocol to access Web-

pages ftp – File Transfer Protocol to download the file

from the net mailto – to send electronic mail (only a colon) File – to access file on a local hard disk (File

scheme uses ///). https – for secure web pages and others…

31

Server name, PathServer name, Path

Server name – second portion of the URL (where file is actually located)

Followed by a forward slash Path – leads to the file (like a folder) Followed by a forward slash

32

Absolute URL (examples)Absolute URL (examples)

Shows the entire path to the file, including: scheme, server name, complete path and the file name

E.g., http://www.site.com/dir/hpage.html ftp://ftp.site.com/common/prog.exe mailto:[email protected] file:///Cdisk/ITEC1000/assignment.html

Server name is assumed: local computer

33

Relative URL (examples)Relative URL (examples)

Describes the location of the file relatively the current location

A file from the same folder as current file:“file.htm”

A file from a subfolder of current folder:“images/picture.gif”

A file from another folder at the same hierarchical level:

“../info/data.htm”

34

External LinkExternal Link

is a reference to another page

<A HREF=“URL” > Label text </A>

Label text will be underlined or highlighted, click upon it will bring visitors to the page with given URL

35

Link to E-mail addressLink to E-mail address

<A HREF=“mailto:[email protected]”>

Say HELLO!!!</A>

Click on hypertext “Say HELLO!!!” will invoke an application such as MS Outlook to send E-mail to the address

[email protected]

36

ImagesImages

<IMG SRC=“image.ext”> SRC – source of image or file address Another attributes:

BORDER=n, n-thickness of the border in pixelsALT – alternative text (appears if the image does not)WIDTH=x HEIGHT=y – width and height of an image in pixelsALIGN – position on a page (“top”, “middle”, “bottom”, “left”, “right”

37

Images (example)Images (example)

<IMG SRC=“images/pic1.bmp” WIDTH=30 HEIGHT=30 ALT=“Digimon” ALIGN=“left” >

38

TablesTables

A table is a matrix formed by the intersection of a number of horizontal rows and vertical columns.

Column 1 Column 2 Column 3 Row 1 Row 2 Row 3

39

Tables (cont…)Tables (cont…)

The intersection of a column and row is called a cell. Cells in the same row or column are usually logically related in some way

Column 1 Column 2 Column 3

Row 1 Row 2 Row 3

Cell Cell Cell

Cell Cell Cell

Cell Cell Cell

40


Container <TABLE> … </TABLE>Attributes:BORDER= n – the border thickness in pixelsWIDTH=x – width of the table or a cell within the table in pixels

41


A table is formed row by row To define a row

<TR>…</TR> is used

Within a row table cells with data is determined by

<TD>…</TD> or with headers by

<TH>…</TH>

42

Simple Table (example)Simple Table (example)

<HTML><HEAD>

<TITLE> Example of table </TITLE></HEAD><BODY><TABLE>

<TR> <TH>Month</TH> <TH>Quantity</TH> </TR><TR> <TD>January</TD> <TD>130</TD></TR><TR> <TD>February</TD> <TD>125</TD> </TR><TR> <TD>March</TD> <TD>135</TD> </TR>

</TABLE></BODY></HTML>

43

Tables (more complicated)Tables (more complicated)

To span a cell across a few columns attribute COLSPAN=n, where n- number of columns is used

To span a cell across a few rows attribute ROWSPAN=n, where n- number of rows is used

44

Table (example)Table (example)

<TABLE BORDER=2><TR>

<TH> Quarter</TH><TH>Month</TH><TH>Quantity</TH></TR><TR> <TD ROWSPAN=3> I </TD> <TD>January</TD> <TD>130</TD> </TR><TR> <TD>February</TD> <TD>125</TD> </TR><TR>

<TD>March</TD><TD>135</TD></TR>

45

Table (example) cont…Table (example) cont…

<TABLE BORDER=2><TR>

<TH> Quarter</TH><TH>Month</TH><TH>Quantity</TH></TR><TR> <TD ROWSPAN=3> I </TD> <TD>January</TD> <TD>130</TD> </TR><TR> <TD>February</TD> <TD>125</TD> </TR><TR>

<TD>March</TD><TD>135</TD></TR>

46

Cell AttributesCell Attributes

FONT – establishes the font of a cell

ALIGN – determines horizontal alignment of cell content, accept values: “left”, “center”, or “right”

VALIGN - determines vertical alignment of cell content, accept values:

“top”, “middle”, “bottom”, or “base line”

47

Purposes to use tablesPurposes to use tables

To present tabular data; To create multicolumn text To create captions for images To create side barsCells may contain various HTML

containers:Images, Hyperlinks, Text, Objects,

even Tables