cmpf 124:basic skills for knowledge workers hypertext markup language (html)

CMPF 124:Basic Skills for Knowledge Workers

HyperText Markup Language (HTML)

CMPF124: Basic Skills for Knowledge Workers

2

Chapter Overview

An Introduction to HTML

Understanding HTML Scripts

Overview of HTML Development Tools

An Introduction to HTML


4

General Terms and Concepts

• Internet– The internet is a worldwide collection of networks that

links together millions of businesses, the government, educational institutions, and individuals using modems, telephone lines and other communication devices and media

– Users with computers connected to the Internet have access to a variety of services including email, newsgroups and the World Wide Web


5

General Terms and Concepts (cont.)

• World Wide Web– The World Wide Web is a collection of information

stored on computers that are connected to the Internet all over the world

– The information can be any type such as text, graphics, audio, and video

– Web uses an approach to link material together known as "hyperlinks." When these links are text-based, they are called "hypertext"


6


• Web Page– A Web page is a simple text file that contains

not only text, but also a set of HTML tags that describe how the text should be formatted when a browser displays it on the screen

– A Web site is a collection of Web pages that are created and maintained by a company, a university or college, a government agency, or even an individual


7

Web sites contain more than just text, they also contain graphics, sound and video files.



8


• URL– URL (Uniform Resource Locator) is a naming

system that compactly describes the location of every resource on the Internet and the protocol to retrieve it

– An URL can be broken into three parts:

"http://www.jack.com/myDir/myPage.html"

Domain Name

File Path Name

Transfer Protocol


9


• Web Browser– A Web browser is a program that knows how to go to

a Web server on the Internet and request a page, so that the browser can pull the page through the network and into your machine

– A Web browser knows how to interpret the set of HTML tags within the page in order to display the page on your screen as the page's creator intended it to be viewed

– Microsoft Internet Explorer, Netscape, and Mosaic are the three most widely used web browsers


10


• Web Server– A Web server is a program that runs on a computer

connected to the Internet– The Web server watches the Internet connection and

waits for requests from the Web browser– When it receives a requests, if this is static HTML

document, it finds the document and sends it back to the browser that requested it; for dynamic page, some server side scripts (programs) will run first and generate the information then return back to the requested clients


11

What is HTML?

• HTML stands for HyperText Markup Language, a language for creating web pages

• Hypertext is text, in any format, with an added feature: parts of the text is linked to other parts of the text, making it easy to jump from one part of the text to another


12

The Concept of Hypertext


13

What is HTML? (cont.)

• HTML is a markup language. What this means is that it takes a document and marks specific parts of it, giving them special meaning


14

Example of an HTML Document


15

The HTML Code in Notepad


16

Appearance of an HTML Document

• A browser can display a Web page with a variety of fonts and styles

• Different browsers might make different choices of font. One browser might apply a Times New Roman font to text in the document heading, while another might use an Arial font


17

Two different browsers displaying the same HTML file


18

How HTML works?

1. The user asks his Web browser to show a document by specifying the Web address, also known as URL either by just typing it or by following a hypertext in another Web document

2. The browser looks at the address. One part of the address specifies a Web server on which the document resides. The browser sends a request to the server, specifying a file name (which is another part of the Web address)


19

How HTML works? (cont.)

3. The server locates the requested HTML file on its disk and sends it (well, a copy of it, to be exact) to the browser

4. The browser interprets the contents of the HTML file and formats it for display on the user's screen


20


• At the most basic level possible, the following diagram shows the steps that brought that page to your screen:


21


• It is important to know that HTML is evolving. New additions to HTML are addressing some of the layout control issues and adding new features. For example:– Cascading Style Sheets (CSS) allow you to set

specific presentation styles for your page• http://www.csszengarden.com/

– JavaScript is a scripting language that lets you add additional interactivity to your page

– Dynamic HTML (DHTML) is a way of displaying the page dynamically, based on the reader's actions

http://www.csszengarden.com/


22

A Teaching Tool

• To see a copy of the file that your browser reads to generate the information in your current window, select View Source (or the equivalent) from the browser menu

• The file contents, with all the HTML tags, are displayed in a new window


23

A Teaching Tool

• This is an excellent way to see how HTML is used and to learn tips and constructs


24

HTML Tools

• The only software package you need to create them is a basic text editor like the Windows Notepad application

• If you want a software package to do some work of creating an HTML document, you can use an HTML converter or an HTML editor


25

HTML Tools (cont.)

• HTML converter – An HTML converter takes text in one format and

converts it to HTML code– For example, you can create the source document

with a word processor like Microsoft Word and then have the converter save the document as an HTML file

• HTML editor– An HTML editor helps you create an HTML file by

inserting HTML codes for you as you work


26

Planning an HTML Document

1. Create an Outline – The outline should include a list of all the

elements for your page, including its title, an introductory paragraph, links to other sites, an optional graphic image, and a contact address

2. Enter text in a document – Use a text editor to create the document that

will be the Web page


27

Planning an HTML Document (cont.)

3. Insert HTML tags around each element on the page

– Type HTML tags around the elements in your document

4. Add graphics – Insert HTML-compatible graphic files to add

value to your page and make it attractive


28


5. Add links to other Web Sites– Create links in your document to other Web

sites that would be of interest to your readers

6. Save the document – Save your work often to prevent loss of data


29


7. View the page – Periodically examine your page using a Web

browser. Correct any errors to the HTML codes as you go

8. Test the links – Make sure the links in your HTML page are

correct and function properly. Verify that you have entered the URLs correctly and go to those sites to be sure they are still active

Understanding HTML Scripts


31

HTML Tags

• Most HTML tags come in pairs, an opening and closing set

<TAG>...</TAG>• The text to be formatted by the tags is

written between the pair

• It is essential for both tags to be present for the document to work correctly


32

HTML Tags (cont.)

• All tags are enclosed in left and right angle brackets (<) and (>)

• Closing tags are preceded by a slash (/)

• The tags are not case sensitive though you may wish to keep paragraph related tags in uppercase and phrase/word related tags in lower case in order to distinguish them more easily when scanning your file


33

HTML Tags (cont.)

• Sometimes tags have one or more attributes

<TAG ATTRIBUTE="...">...</TAG>• These supply extra information to your browser.

Sometimes you can add data to an attribute. When putting a picture on a page, you would use an image tag. What picture is to be used, is specified in an attribute. You add a filename to this attribute


34

HTML Tags (cont.)

• Common Errors – Put the "greater than" and "less than" characters in

the right spot– Always put them directly next to the tag description

without spaces– Don't use spaces in the attributes– When adding information to an attribute after the

"equal" sign, put it between quotes– Tags always embrace each other. The pattern to be

used is always like: <A><B></B></A>. When using a <A><B></A></B> pattern, things may go very wrong


35

HTML Basic Page

• All HTML documents should begin with the following set of tags:

<HTML><HEAD><TITLE>Write your title here.</TITLE></HEAD>

<BODY>Begin your main body of text here


36

HTML Basic Page (cont.)

• All HTML documents should end with the following set of tags:

</BODY></HTML>


37

HTML Basic Page (cont.)


38

HTML Basic Page - HTML

• <HTML>… </HTML>– The <HTML> tag identifies a file as being an

HTML file or a Web page– The entire document goes between HTML

tags


39

HTML Basic Page - Head

• <HEAD>…</HEAD> – Appears just below the HTML tag in every

HTML document– It contains information about the document

but does not appear on the Web page


40

HTML Basic Page – Head (cont.)

– A number of different elements can be placed between these tags, including JavaScript commands and META tags which are used to provide information such as keywords, author name, and a description of the contents

– The most commonly used element within the <HEAD> container is the <TITLE> tag


41

HTML Basic Page - Title

• <TITLE>…</TITLE>– The TITLE element is used to identify the title

of the document and is required to be placed inside the <HEAD> container

– Note that the title is not displayed within the actual page. Rather, the title appears at the top of your browser


42

HTML Basic Page – Title (cont.)

• The title is a required part of Web page, and it is important for three reasons:1.People who visit your page may use the title

in a Bookmark, Favorite, or Hot list Entry. It should help them define the contents of the page so they can easily return to that page if they wish


43


2. An Internet search site (i.e. Google, Yahoo, etc) or cataloging program may return only the title as a description of your page. People may make decision whether to visit your page or not based on this information

3. People who are surfing the Net and come upon your page should have some idea of the contents when they arrive


44


• Titles must be descriptive and brief many geographical browsers place the title in the bar across the top of the screen and long lines may cut off


45

Basic HTML Page - Body

• <BODY>…</BODY>– Contains all the text and images that will

appear on the Web page, together with all the HTML elements that provide the control/formatting of the page

– Anything within the <BODY></BODY> container is called the “body content”


46

Basic HTML Page – Body (cont.)

• Additional attributes to the tag <BODY> allow a user to specify global coloring of the web page. Attributes of this tag include:

<BACKGROUND> Lets the author specify an image to be displayed in the background

<BGCOLOR> Sets the background color of the HTML document

<TEXT> Sets the color of the text in the HTML document

<LINK> Sets the color of any hyperlink that browser has not yet seen

<VLINK> Sets the color of any link that has been visited by the browser

<ALINK> Specifies the color of a hyperlink while it is being clicked


47

Basic HTML Page – Body (cont.)

• For example, to create a web page with a background colour of green normal text in red and links in blue is specified with the following attributes to the tag <BODY>

<BODY BGCOLOR="#00FF00" TEXT="red" LINK="#0000FF">


48

HTML Text – Text Formatting Tags

• The <CENTER>text</CENTER> is centered

• The <B>text</B> is bolded

• The <I>text</I> is italicized

The text is centered

The text is bolded

The text is italicized


49

HTML Text – Text Formatting Tags (cont.)

• The <U>text</U> is underlined

• The <B><I><U>text</U></I></B> is bolded, italicized and underlined

The text is underlined

The text is bolded, italicized and underlined


50

HTML Text – Text Formatting Tags (cont.)

• The <TT>text</TT> is in a teletype font

• The <FONT SIZE="+2" COLOR="RED">text</FONT>is 2 sizes larger and the text is in red

The text is in a teletype font

The text is 2 sizes larger and the text is in red


51

HTML Text – Headings

• Headings come in a number of levels or "sizes." Heading 1 (H1) is "most important" and Heading 6 (H6) is "least important"

• The major title of an HTML document is usually the largest, <H1>

• Heading tags are used in pairs, with the actual text of the heading between the two tags


52

HTML Text – Headings (cont.)

• <H1>Heading One</H1> will look like this:

Heading One• <H2>Heading Two</H2> will look like this:

Heading Two

• <H3>Heading Three</H3> will look like this: Heading Three

53

HTML Text – Comments

• If you are using framesets, tables or other advance markup that may be difficult to follow, it is a good idea to include explanatory comments

• A basic comment declaration in an HTML document usually looks like this:


54

HTML Text – Escape Sequences

• Four characters of the ASCII character set the – left angle bracket (<), – the right angle bracket (>), – the ampersand (&), and – the double quote (")

• have special meaning within HTML and therefore cannot be used "as is" in text


55

HTML Text – Escape Sequences (cont.)

• To use one of these characters in an HTML document, you must use the following codes:– < for <– > for >– & for &– " for “

• Unlike the rest of HTML, the escape sequences are case sensitive. You CANNOT, for instance, use &LT; instead of <


56

HTML Layout

• When you want to start on a new line in your word processor, you press the [Enter] key:

This isa HTMLcourse.

• What you will see in your browser window will however look something like this:

This is a HTML course.


57

HTML Layout – Preformatted Text

• The preformatted text tag allows you to include text in your document that normally remains in a fixed-width font and retains the spaces, lines, and tabs of your source document

• It leaves your text as it appears initially or just as you typed it in


58

HTML Layout – Preformatted Text (cont.)

Code Preview at Browser

<PRE>

This is

a HTML

course. </PRE>

This is

a HTML

course.


59

HTML Layout – Line Breaks

• HTML does not really do anything with normal line breaks it just skips them

• The basic tag for this purpose is the <BR> or line break

• HTML does not really care about regular line breaks


60

HTML Layout – Line Breaks (cont.)


This is<BR>a HTML<BR>course.<BR>

This is

a HTML

course.


61

HTML Layout – Paragraph

• When you want to skip a line, using the BR tag won’t always work. Even if you use dozens

• To this purpose there is another tag, the paragraph tag: <P>.It skips a line and starts a new paragraph of text

• While not strictly necessary, it is advisable to use a closing </P> tag for paragraphs


62

HTML Layout – Paragraph (cont.)


<P>This is the first paragraph. While short it is still a paragraph! </P> <P>And this is the second paragraph. </P>

This is the first paragraph. While short it is still a paragraph!

And this is the second paragraph.


63

Hypertext Links

• Web has the ability to create links from one page to another

• For example, a link to Uniten’s homepage would look like this: UNITEN

• A click on the word UNITEN will direct user’s straight to the Uniten’s website

• The code behind this is:<A HREF="http://www.uniten.edu.my/">UNITEN</A>

http://www.uniten.edu.my/


64

Hypertext Links (cont.)

• The text between the <A> and the </A> is used as a caption to the link

• Caption is normally blue in color


65

Lists

• Three types of list:– Ordered List– Unordered List– Discursive List


66

Ordered List

• Ordered lists are numbered, starting from 1

• Sample code:<OL><LI>This is the First Point of a number of points</LI><LI>Second Point</LI><LI>Third Point</LI><LI>Fourth Point</LI></OL>


67

Ordered List (cont.)

• Result:

1. This is the First Point of a number of points2. Second Point 3. Third Point 4. Fourth Point


68

Unordered List

• Unordered lists have basically the same syntax as ordered lists, except that result is a list with bullets instead of numbers

• Sample code:<UL><LI>This is the First Point of a number of points</LI><LI>Second Point</LI><LI>Third Point</LI><LI>Fourth Point</LI></UL>


69

Unordered List (cont.)

• Result:

• This is the First Point of a number of points • Second Point • Third Point • Fourth Point


70

Discursive Lists

• Discursive lists has has a "term" (enclosed in <DT>...</DT>) and a "definition" (enclosed in <DD>...</DD>)

• Sample code:<DL><DT>First Point</DT><DD>This is the text associated with the first point</DD><DT>Second Point</DT><DD>This is the text associated with the second point</DD></DL>


71

Discursive Lists (cont.)

• Result:

First Point This is the text associated with the first point

Second Point This is the text associated with the second point


72

Sounds

• Web pages can be further enhanced and enjoyed by your viewers with the use of sound

• Sound formats that can be used: MIDI's and WAV formats

• MIDI's are simply the instrumental part of the music you hear, with the absence of lyrics


73

Sounds (cont.)

• WAV files can contain the actual music with lyrics of a particular artist

• WAV files can also be used for sound effects or spoken words

• However, WAV format is slower to download due to its larger file size, which causes it to not be a great source for use in a background as a sound

• Sample code: <BGSOUND SRC = "sounds/Music.mid" LOOP="-1">


74

Tables

• Tables provide an easy way to display tabulated information

• In HTML, all the tags for table have both start and end tags


75

Tables (cont.)

• Sample code:<TABLE WIDTH=600 BORDER=1><TR><TH>Heading 1</TH><TH>Heading 2</TH></TR><TR><TD>Information in column 1.<P>This information will wrap onto a number of lines... if that's necessary to fit all the information.</TD><TD>Information in column 2.<P>Just like the first column!</TD></TR></TABLE>


76

Tables (cont.)

• Result:Heading 1 Heading 2

Information in column 1.

This information will wrap onto a number of lines... if that's necessary to fit all the information.

Information in column 2.

Just like the first column!


77

Images

• Web pages can be further enhanced with the help of images

• Common image formats you will encounter when cruising the Web would be: GIF and JPG/JPEG


78

Images - GIF

• GIF stands for Graphics Interchange Format

• Web browsers recognize the .gif filename extensions used by GIF

• Example filenames for GIF format would be: cats.gif, books.gif, sky.gif, etc.


79

Images – GIF (cont.)

• Three forms of the GIF format: – Plain GIF, in which the picture looks like a

snapshot– Transparent GIF, in which the background is

invisible, so the image seems to be painted directly on the web page

– Animated GIF, in which a series of still GIF images are quickly changed to create simple animation


80

Images - JPG

• JPEG stands for Joint Photographers Experts Group

• JPEG is a better choice for photographic –quality color than GIF, because it can support either 8-bit or 24-bit color

• All the graphical browsers support JPEG and recognize these files by the .jpeg or .jpg filename extensions

• Filename examples: house.jpg, flowers.jpeg, etc.


81

Frames

• A web page containing frames consists of a window, which contains two or more HTML documents

• To create a simple frame page like this you need to create two new web pages - one each for the left hand and the right hand columns or frames

This is the left hand frame

This is the right hand

frame


82

Frames (cont.)

• Frames may be divided according to columns or rows


83

Forms

• FORM tag creates an HTML form

• Form can contain interface elements such as text fields, buttons, checkboxes, radio buttons, and selection lists that let users enter text and make choices

• All elements in the form must be defined between the <FORM> and </FORM> tags


84

Forms (cont.)

• Text box: <INPUT TYPE="text" NAME="email" SIZE="20">

• Radio button:Are you: Male<INPUT TYPE="radio" NAME="mf" CHECKED VALUE="M"> Female<INPUT TYPE="radio" NAME="mf" VALUE="F">

Overview of HTML Development Tools


86

HTML Development Tools

• Development tools are software created to assist programmers/developers in writing source codes and scripts

• There are many HTML development tools available out there, however the most commonly used nowadays are Microsoft Front Page or Macromedia Dreamweaver


87

Macromedia Dreamweaver

• One of the most powerful tools these days

• Build attractive, dynamic Web pages

• Allows the creation of interactive effects such as animations and mouseovers, and writes powerful JavaScript code


88

Macromedia Dreamweaver (cont.)

Interface of Macromedia Dreamweaver:


89

Microsoft Front Page

• The most popular What You See Is What You Get (WYSIWYG) Web editor

• Allows building effective text layout that is in a form of lists or multiple columns and apply a variety of effects

• Construct frames in FrontPage with just the click of a few buttons

• Easy to create rollover images and page transitions


90

Microsoft Front Page (cont.)

Interface of Microsoft Front Page:


91

Front Page & Dreamweaver

• Both development tools has these capabilities to make a good web pageFormat Text – apply variety of effectsSelect and Place Images Include Hyperlinks and Image Maps Build HTML Tables Develop and Validate FormsAdd Colors and Backgrounds Use LayersTake Advantage of Dynamic HTML Effects Use HTML Frames


92

Web Designing Tips

• Some good points to keep in mind while designing web pages:– Easy to use – Easy to browse – Graphics – Animation – Blink – Horizontal scrolling – Test – Take responsibility for your site

The End

CMPF 124:

Basic Skills for Knowledge Workers

cmpf 124:basic skills for knowledge workers hypertext markup language (html)

Documents

basic skills

knowledge workerscmpf124

web pagea web page

web browsera web browser

web servera web server

web sites

web browserscmpf124

web browserwhen