1 Lecture 5 Floating Point Numbers ITEC 1000 “Introduction to Information Technology”
1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”
-
Upload
homer-lewis -
Category
Documents
-
view
222 -
download
6
Transcript of 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”
![Page 1: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/1.jpg)
1
Lecture 12Lecture 12
Basic HTMLBasic HTML
ITEC 1000 “Introduction to Information Technology”
![Page 2: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/2.jpg)
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
![Page 3: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/3.jpg)
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
![Page 4: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/4.jpg)
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
![Page 5: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/5.jpg)
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
![Page 6: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/6.jpg)
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
![Page 7: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/7.jpg)
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)
![Page 8: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/8.jpg)
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>
![Page 9: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/9.jpg)
9
HTML RulesHTML Rules
Case insensitive Spacing:
Browsers ignore extra spaces Block-level tags include automatic
line breaksExamples: P, H1, UL, TABLE
![Page 10: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/10.jpg)
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>
![Page 11: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/11.jpg)
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 (.)
![Page 12: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/12.jpg)
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
![Page 13: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/13.jpg)
13
Nesting Tags (example)Nesting Tags (example)
Correct:<H1> Information
<I>System</I></H1>
Incorrect:<H1> Information
<I>System</H1></I>
![Page 14: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/14.jpg)
14
HTML DocumentHTML Document
<HTML><HEAD> … </HEAD><BODY> …</BODY></HTML>
![Page 15: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/15.jpg)
15
Starting a web pageStarting a web page
Identify the content of the document as an HTML code:
<HTML>
</HTML>
![Page 16: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/16.jpg)
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>
![Page 17: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/17.jpg)
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
![Page 18: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/18.jpg)
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>
![Page 19: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/19.jpg)
19
BODY SectionBODY Section
<BODY>
{Text displayed by browser}
</BODY>
![Page 20: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/20.jpg)
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>
![Page 21: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/21.jpg)
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
![Page 22: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/22.jpg)
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)
![Page 23: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/23.jpg)
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
![Page 24: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/24.jpg)
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>
![Page 25: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/25.jpg)
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>
![Page 26: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/26.jpg)
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>
![Page 27: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/27.jpg)
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
![Page 28: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/28.jpg)
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…
![Page 29: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/29.jpg)
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
![Page 30: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/30.jpg)
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…
![Page 31: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/31.jpg)
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
![Page 32: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/32.jpg)
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
![Page 33: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/33.jpg)
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”
![Page 34: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/34.jpg)
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
![Page 35: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/35.jpg)
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
![Page 36: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/36.jpg)
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”
![Page 37: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/37.jpg)
37
Images (example)Images (example)
<IMG SRC=“images/pic1.bmp” WIDTH=30 HEIGHT=30 ALT=“Digimon” ALIGN=“left” >
![Page 38: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/38.jpg)
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
![Page 39: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/39.jpg)
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
![Page 40: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/40.jpg)
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
![Page 41: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/41.jpg)
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>
![Page 42: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/42.jpg)
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>
![Page 43: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/43.jpg)
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
![Page 44: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/44.jpg)
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>
![Page 45: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/45.jpg)
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>
![Page 46: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/46.jpg)
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”
![Page 47: 1 Lecture 12 Lecture 12 Basic HTML ITEC 1000 “Introduction to Information Technology”](https://reader036.fdocuments.us/reader036/viewer/2022062409/5697c0121a28abf838ccc439/html5/thumbnails/47.jpg)
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