COMP 14: HTML & the Web June 20, 2000 Nick Vallidis.

COMP 14: HTML & the Web

June 20, 2000Nick Vallidis

Announcements

P5 due todayP6 due Friday

Homework

read 1.6 (p. 40-41), 2.9-2.10 (p. 92-100), 3.10 (p. 157-164), 4.7 (p. 211-212)

It's not a lot of pages, they're just scattered about… basically, it's most of the pages with the orange on the edge for the first 4 chapters.

Today

The webWriting HTML

The Internet

a group of computers in the same location are connected by a network called a local-area network (LAN) UNC is a good example of a LAN. A LAN is usually owned by one company

Multiple LANs are connected to form a wide-area network (WAN) the Internet is a WAN that spans the globe

Talking over the Internet

A protocol is like a language to a computer. It's the language it speaks over a network.

The internet uses a pair of protocols called TCP/IP TCP = Transmission Control Protocol IP = Internet Protocol

Internet addressing

Every computer on the internet has two addresses: IP address

These take the form 192.154.67.1Four numbers from 1-255 separated by periods

Internet addresstake the form evans.cs.unc.eduThe first word is the name of the machinethe rest of the words are collectively called "the

domain"

the World Wide Web

a way to facilitate information transfer over the Internet

based on the concept of hypertext - that information doesn't follow a linear flow like it's presented in a book

the users of the Web have settled on HTML (HyperText Markup Language) as the way to represent hypertext

Using the web

You need a program called a web browser - these basically understand HTML and how to retrieve information through the Internet

You need the address of the information you want. This is called a Uniform Resource Locator (URL) http://computer.unc.edu/blah/blah.html ftp://ftp.cs.unc.edu/public/application.doc

Writing Web Pages

In order to create a web page, we have to learn how to write HTML.

HTML is NOT a programming language.

HTML just tells the computer how to format text and images--it's like using Word, but having to type in what you want things to look like.

Tags

HTML works based on the concept of tags. A tag is some text surrounded by < and >

Tags are not printed to the screenExample tags:

<HTML>, <TITLE>, <P>, <H1>A lot of the time they work in pairs:

<HTML> and </HTML>

Very simple web page

<HTML><HEAD><TITLE>Simple web page</TITLE></HEAD><BODY>This is the text on a web page.</BODY></HTML>

http://www.cs.unc.edu/~vallidis/comp14/notes/examples_6_20/simple.html

What do the tags mean?

<HTML>, </HTML> - go at the beginning and end of EVERY page

<HEAD>, </HEAD> - introduction of the document

<TITLE>, </TITLE> - what goes in the title bar of the window

<BODY>,</BODY> - the text (and other stuff) that is displayed in the window

Doesn't matter how you type it...

In HTML, where you put enter is ignored. The web browser decides this for you based on the size of the window

These two will print the same thing:first:<BODY>Why not fly?</BODY>

second:<BODY>Whynot fly?</BODY>

http://www.cs.unc.edu/~vallidis/comp14/notes/examples_6_20/one_line.html

http://www.cs.unc.edu/~vallidis/comp14/notes/examples_6_20/three_lines.html

How do you do it then?

Putting <P> at the beginning of a paragraph and </P> at the end will put a blank line between two pieces of text example

You can also use <BR> to insert a carriage return (aka <enter>) example

http://www.cs.unc.edu/~vallidis/comp14/notes/examples_6_20/paragraph.html

http://www.cs.unc.edu/~vallidis/comp14/notes/examples_6_20/break.html

What else can I do?

make text bold - use <B> and</B>make text italic - use <I> and </I>make text blink - use <BLINK> and

</BLINK> really annoys the heck out of people too!

center text - <CENTER> and </CENTER>

many others on p. 582 in the book

http://www.cs.unc.edu/~vallidis/comp14/notes/examples_6_20/formatting.html

Hierarchical structure

For documents having a hierarchical structure, you can use heading tags <H1> marking chapter in a book <H2> marking section of a chapter <H3> marking subsection of a chapter <H4> and so on down... <H5> <H6>

http://www.cs.unc.edu/~vallidis/comp14/notes/examples_6_20/heading.html

Lists

There are two kinds of lists: Ordered lists (surrounded by <OL> and

</OL> Unordered lists (surrounded by <UL>

and </UL>Both use <LI> and </LI> to indicate

List Items (things in the list)example

http://www.cs.unc.edu/~vallidis/comp14/notes/examples_6_20/lists.html

Links!

This is the important part. This is how you go from page to page.

<A HREF=put URL here>link text</A>

Example

http://www.cs.unc.edu/~vallidis/comp14/notes/examples_6_20/

Color and images

You can add color or an image to the background: color: make body tag <BODY

BGCOLOR=RED> OR<BODY

BGCOLOR="#FF23FF"> image: make body tag <BODY

BACKGROUND="image.gif">

Inserting images

You can also just add an image into the middle of the page

Use <IMG SRC=put URL here>

It's that easy! Here's the example

Applets

Use the <APPLET> tagIt has some attributes you need to set:

<APPLET code=!!! HEIGHT=!!! WIDTH=!!!> (you need to fill in the !!!)

there's also a CODEBASE to tell where the code is (in case it's not on your machine)

Example: <APPLET CODE=Marquee WIDTH=100

HEIGHT=50></APPLET>

Parameters to applets

Sometimes applets need parametersUse the <PARAM> tag before

</APPLET>Example:

<APPLET CODE=Map WIDTH=100 HEIGHT=5><PARAM NAME="state" VALUE="North Carolina"><PARAM NAME="city" VALUE="Chapel Hill"></APPLET>

COMP 14: HTML & the Web June 20, 2000 Nick Vallidis.

Documents