Chapter 2:

1. Things you should know before getting started with HTML.

2. What’s it all about?3. Creating your first page.4. Adding text and more.5. Linking text and documents.6. Creating list.

Internet began as the solution to a problem. It began with US government's need to find

a way to link several computer networks together so that files can be shared.

Internet is a network of network (the biggest network)

Researchers working for the Advanced Research Projects Agency (ARPA) created ARPAnet, which became the first WAN.

This, eventually, led to an Internet Protocol (IP), a common computer language enabling all computers to talk to each other.

IP: a predefined set of rules used to enable computers to communicate, regardless of which OS they are running.

IP was replaced by HTTP in early 1990s HTTP allows you to jump from one Web

page to another. Most documents appeared on the World

Wide Web were written in HTML. This is the reason you should learn

HTML before any other languages.

HTML is a markup language, NOT a programming language.

HTML is an acronym that stands for Hypertext Markup Language.

You can apply this markup language to your pages to display text, images, sound & movie files, and almost any other type of electronic information.

Why important? If you write a document in your favorite

word processor (MS Word), and send it to a friend who doesn’t have word processor, your friend can’t read, right?

For HTML, it’s written as plain text that Web browsers or word processing can read.

With HTML, information comes to you faster because your computer uses a Web browser

HTML is compatible with almost any OS.

To create HTML file, you use element of codes called “TAG”.

Tags: element of Web page used to defined how the page should behave.

And XHTML? (eXtensible Hypertext Markup Language, next generation of HTML)

XML? Stands for eXtensible Markup Language, newest language being developed by the W3C, the most flexible.

Server

Request for information

Respond as requested

When looking for information on the Web, browser has to find the computer that is storing that information using HTTP.

The storage computer, or server, then sends the new Web page (as a plain text file) back to your computer using the same HTTP.

Your browser sees the new Web page and interprets the text and HTML tags to show you the formatting, graphics, and text that appear on the page.

Many browsers available. As great as Web browsers are, you

should be aware of some limitations. All HTML commands (tags) are the same,

BUT not all browsers interpret the commands in the same way.

Some browsers, such as Lynx, can display only text.

Some older browsers do not understand newer HTML tags might produce errors rather than text

Internet Explorer, Mozilla Firefox (Mekhala is its Khmer

version), Safari, Opera, Google Chrome, Netscape Navigator, AOL Explorer, Konqueror, etc.

You can't surf the Net without having an ISP (Internet Service Provider). Many ISP are available in Cambodia:

Online, Camnet, CityLink, Metfone, Camintel, AngkorNet, TeleSurf, etc.

Same way, you need a Web Presence Provider (WPP) or your own Web server to store your pages before they can be viewed from the Web.

If You Store Your Files OnThey Can Be Viewed by People with Access To

Your own computer Your computer (or an intranet)

A disk or CD-ROM That disk or CD-ROM

A Web host server The World Wide Web

ISP: a company that provides you with access to the Internet.

Intranet: like your own private Internet (uses the same HTTP as the World Wide Web, but it is accessible only by people within your own network).

Web Host: company storing (hosting) information that can be accessed from the Internet using the HTTP. A Web host may also be called a Web Presence Provider (WPP).

Now, learn to create, save, and view simple Web pages.

Where to create? (you need a text editor to write your web page.)

Text Editor: program used for text editing (NotePad, EditPlus, Editor in DOS)

Macromedia DreamWeaver, FrontPage, Adobe Dreamweaver, etc, are recommended later.

We will use NotePad, simple but good!

Notepad is installed when you first set up your Microsoft Windows.

To open Notepad:1. Start Run Type “notepad” OK2. Or Start All Programs/Programs

Accessories Notepad You also can use the editor in DOS to write

Web pages by getting into the command prompt: Start Run Type “cmd” OK

Type “edit” Press Enter

To see what HTML looks like and learn the most basic HTML tags, let's look at a very simple HTML document.

BODY

HEAD

The <html> and </html> tags are all you need to identify your file as an HTML file.

Every HTML document must begin with the <html> tag and end with its complement, the </html> tag.

Don’t care about case sensitive (<HTML> same as <html>)

After <html> tag, this document includes three other pairs: The <head> and </head> tag pair: used

to indicate any information about the document itself.

The <title> and </title> tags: used to add a title to your browser's Title bar.

The <body> and </body> tags: used to surround any text that appears in the HTML page.

Now, right your own web page, then save the file as HelloWorld.htm or HelloWorld.html.

Only the text that appears between tags is changed.<html> <head> <title>My Second Web Page</title> </head> <body> <p>This is my second Web page.</p> </body> </html>

Note: many tags come in pair, but not all!

You might not realize it, but you already learned how to create an HTML paragraph.

In HTML, a paragraph is created whenever you insert text between the <p> tags.

It finishes if the tag </p> appears.

Web browsers see that you want text and they display it.

Web browsers don't pay any attention to how many blank lines you put in your text; they only pay attention to the HTML tags.

The <p> tag always adds a blank line, but you might not always want a blank line between lines of text.

Separating your text into paragraphs isn't the only way to format your Web pages.

HTML enables you to add six different heading tags to your pages by using the tags <h1><h6>.

Try to add them: <h1>Heading 1</h1> <h2>Heading 2</h2> … <h6>Heading 6</h6>

So far you've learned how to add text, but here you learn how to format it.

HTML enables you to quickly apply some standard formats, such as boldface, underline, and italic, using a predefined set of tags.

All these tags occur in pairs (corresponding opening and closing tags) and must surround the text that they are emphasizing.

The web browsers IE and NetScape Navigator displays HTML tags in previous slide in a way that can be seen next slides.

Remember, different browsers might display the same tags differently. But this is not always. See next slides!

This is displayed as seen in next slide!

How if you want to add some special characters in your text?

Although HTML was first designed and used by scientists, it has yet to support mathematical and scientific notation with any degree of complexity.

HTML does give you two tags to help write simple equations: <sub> & <sup>

You can see a list of them on the W3C Web site (www.w3c.org/Math/)

Practice 1: create the following web page.

You can align your text by using <div>...</div> or <p>…</p>

Using <div>…</div>, try:<div align=right>Text is aligned right</div>Using: <p>…</p><p align=center>This text is aligned center</p>Note: you can align left, right, center

If you want to align center: <center>Your text goes here!</center>This works too!

<font>…</font> Alters or sets font characteristics of the

font the browser uses to display text. Three attributes:

color (color=#ff0000) or (color=blue) face (face=“arial, verdana”) size (size=5, size=+1)

Sample:

If you only want your texts to be displayed, just write a simple font tag.

Insert this in the body tag of your web page:<font face="Limon S1" size=5 color=blue>sala</font>

<font size=3 color=#12aa2a face="arial">School</font>

<font size=+2 color=#aa0099 face=“Arial, Verdana, Tahoma”>My text goes here!</font>

Note: size=+2 means 3+2

Practice 2: open Google’s website, and try to create a webpage. Your webpage must look like what’s seen in the Google homepage.Again, design the Khmer version of Google’s homepage.

This is about how to use HTML's most valuable feature: hyperlinks.

What is hyperlinks? Use for what?

Hyperlink: the text that enables you to jump from a Web document to another location.

You should also know what URL is.

All Web pages, Internet resources, files, and so on, have an address.

That address is known as a Uniform Resource Locator, or URL.

Before you can link to another page (or resource), you have to know its address.

Understand URL? How about the terms “Web page”,

“Website”, “homepage”? You have just created Web page, that’s

it. Homepage, the first page you see when

you type something like: http://www.google.com or http://www.voanews.com

<a>…</a> Also called the anchor tag, identifies a

link or a location within a document. You commonly use this tag to create a

hyperlink, using the HREF= attribute. You can also use the <A> tag to

identify sections within a document, using the NAME= attribute.

Your browser will display the following:

Did you notice that the direction of the slashes changes when you change the link type from http:// to file:\\?

The forward slash (/) is always used to separate directory folders on a Web file server.

The backslash (\) is used to separate directory folders in Windows and DOS.

Create a simple web page to display “Hello World! This is my first page!”.

Save the file as first.html into drive C:\. Create your second page to display “This is my

second page!”. Save the file as second.html into drive D:\. Add a link to the first page:

<a href=“D:\second.html”>Hello World!</a> This is my first page!

o Open the first page, and have a click!

It works?

Create a simple web page to display “Open Googe’s Website!”.

Save the file as open_google.html into drive C:\.

Add a link to the page:<a href=“http://www.google.com”>Open

Google’s Website!</a>o Open the page, and have a click!

You see the differences btw “/” and “\” now?

You also can link to an email address by using the mailto prefix.

When you click on the words click here, an email window that enables you to type your message to Mickey Mouse appears, if you use:<a href="mailto:mickey.mouse@disney.com">Click here</a> to send mail to Mickey.

Add this to your page!Try with your own, now! <a href=“mailto:your_email”>Email Me</a>

You know how to link to other resources, but you might want your hyperlinks to be more meaningful.

HTML enables you to use hyperlinks to point to a specific spot (or anchor) in an HTML document, instead of just pointing to the entire document.

This is easy in HTML. Remember that anchor tags come with

three important attributes: HRef, name and id (not the only three which always appear together).

Try with this:

Notice: The <a> tag with the HRef attribute is highlighted, but the <a> tag with the name and id attributes is not.

The <a href> tag includes the same URL format you've seen before, but also includes the # symbol to separate the filename from the named anchor.

Practice 3: create the page below

This is for you to learn to use HTML to organize your text into lists.

There are some type of lists available in Microsoft Word or PowerPoint.

What are they?

One way to organize the text in your Web pages is with lists.

In addition to the obvious benefit of being able to list items on a page, they also provide a design benefit by enabling you to break up long pages of ordinary paragraphs.

HTML recognizes the following list types and has tags that correspond to each: Bulleted (unordered) lists Numbered/lettered (ordered) lists Definition lists

A bullet (usually a solid circle) appears in front of each item in an unordered list.

Try with this:<ul>

<li>first item in the list</li> <li>second item in the list</li> <li>third item in the list</li>

</ul> You can select one of two other bullet types: a

square or a hollow circle.

Syntax: <ul>…</ul> Attribute:

Type = [ disc | square | circle ]

With the tags in previous slide, NetScape Navigator will display this:

Syntax: <ol>…</ol> Attributes:

Type = [ 1 | a | A | i | I ] Start = number

With the tags in previous slide, NetScape Navigator will display this:

Open the Window Explorer in your computer.You see that the structure is organized as hierarchy, right?Again, open the content of a book (your book).You see that the list is used, right?This is now for you to design a Web page to display your book contents. After this, make your contents are clickable. The rest will be told by the instructor.