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
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
Tables (cont…)Tables (cont…)
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
Tables (cont…)Tables (cont…)
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