Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly

Computer Science Computer Science 101101

HTMLHTML

World Wide WebWorld Wide Web Invented by Tim Berners-Lee at CERN, the Invented by Tim Berners-Lee at CERN, the

European Laboratory for Particle Physics European Laboratory for Particle Physics in Geneva, Switzerland (roughly 1989)in Geneva, Switzerland (roughly 1989)

Wanted researchers to be able to “link” or Wanted researchers to be able to “link” or cross-reference each others research cross-reference each others research paperspapers

By mid 1980s we had DNS – domain name By mid 1980s we had DNS – domain name service to map domain names to IP service to map domain names to IP addressaddress

WWW (cont.)WWW (cont.) Berners-Lee developed a simple protocol, Berners-Lee developed a simple protocol,

HTTP – HyperText Transfer Protocol for HTTP – HyperText Transfer Protocol for exchanging information via hypertext linksexchanging information via hypertext links

The documents themselves were to be The documents themselves were to be marked up using HTML – HyperText Markup marked up using HTML – HyperText Markup LanguageLanguage

HTML based on SGML - Standard Generalized HTML based on SGML - Standard Generalized Mark-up Language which was widely used in Mark-up Language which was widely used in publishing industrypublishing industry

WWW (cont.)WWW (cont.)

Early 1990s World Wide Web ramped Early 1990s World Wide Web ramped upup

1993 – NCSA - National Center for 1993 – NCSA - National Center for Supercomputers (University of Supercomputers (University of Illinois) released Illinois) released MosaicMosaic browser browser

1994 – Netscape was formed1994 – Netscape was formed

Important Web ProgramsImportant Web Programs

Web ServerWeb Server: This is a program that : This is a program that manages web sites on server computers. manages web sites on server computers. The web server accepts requests from The web server accepts requests from other programs (clients) asking for pages other programs (clients) asking for pages from the web sites.from the web sites.

BrowsersBrowsers: Programs like Internet Explorer : Programs like Internet Explorer and Firefox that act as clients for web and Firefox that act as clients for web servers requesting pages for the user and servers requesting pages for the user and displaying the returned pages.displaying the returned pages.

HTMLHTML HyperText Markup Language HyperText Markup Language – HTML is used to – HTML is used to

mark up a document to tell browser how it mark up a document to tell browser how it should be should be displayeddisplayed, nothing about content, nothing about content

Allows us to markup up text with special tags Allows us to markup up text with special tags that inform the web browsers how the content that inform the web browsers how the content should be displayedshould be displayed

For the most part HTML tags are placed in For the most part HTML tags are placed in “angle brackets” like and occur in pairs “angle brackets” like and occur in pairs likelike

 Here is some text Here is some text 

Some HTML tagsSome HTML tags

html html – this tag together with its end tag enclose – this tag together with its end tag enclose the entire documentthe entire document

headhead – there are two sections to the document, – there are two sections to the document, the head and the body. For the most part the the head and the body. For the most part the head section contains the title of the documenthead section contains the title of the document

titletitle – encloses the page title shown in title bar – encloses the page title shown in title bar at the topat the top

body body – enclose the body of the document, – enclose the body of the document, essentially all of the displayed contentessentially all of the displayed content

A Minimal HTML documentA Minimal HTML document

<html> <head>

<title> Title of your page </title>

</head> <body> All the good stuff goes here </body></html>

More tagsMore tags h1h1 – There are six levels of headings in – There are six levels of headings in

HTML, numbered h1 through h6 with h1 HTML, numbered h1 through h6 with h1 being the largest and boldestbeing the largest and boldest

p p – Marks the beginning of a new paragraph.– Marks the beginning of a new paragraph.

ulul – enclose an unordered list – bullet list – enclose an unordered list – bullet list

olol – enclose an ordered or numbered list – enclose an ordered or numbered list

lili – enclose an item in a list – enclose an item in a list

Unordered ListsUnordered Lists

Ordered ListsOrdered Lists

Example HTML pageExample HTML page

And in the browserAnd in the browser

More tagsMore tags

brbr – Causes a line break to occur. Does – Causes a line break to occur. Does not use an end tagnot use an end tag(Recommend: (Recommend: 

hrhr – Causes a horizontal line to be drawn – Causes a horizontal line to be drawn across the page. No end tag.across the page. No end tag. (Recommend: <hr/>) (Recommend: <hr/>)

bb – enclosed text is – enclosed text is boldbold

ii – enclosed text is in – enclosed text is in italicsitalics

The anchor tagThe anchor tag

The anchor tags, The anchor tags, <a><a> and and </a></a>, are used with , are used with links.links.

– To specify a link To specify a link fromfrom a location in your page to a a location in your page to a location in current page or another page on the web.location in current page or another page on the web.

– To specify a location in your page that can be linked To specify a location in your page that can be linked toto from another location in the current page or from from another location in the current page or from another page.another page.

Making links – HREF Making links – HREF AttributeAttribute

General form isGeneral form is

<a href = “URL”> link-phrase</a><a href = “URL”> link-phrase</a>

– URL (Uniform Resource Locator) is the web URL (Uniform Resource Locator) is the web address to link toaddress to link to

– link-phrase is the phrase to appear on your link-phrase is the phrase to appear on your page for the user to click in order to page for the user to click in order to execute the link.execute the link.

Linking to other places: Linking to other places: HREF attributeHREF attribute

Suppose we want to have a link on our Suppose we want to have a link on our page to link to W&L’s home page. The page to link to W&L’s home page. The following markup will achieve this:following markup will achieve this:

<a href=“<a href=“http://www.wlu.edu”> My ”> My University </a>University </a>

Locations that can be linked Locations that can be linked to:to:

Name attributeName attribute In order to link to specific locations In order to link to specific locations

within a page, these locations must first within a page, these locations must first be given names that are recognized by be given names that are recognized by HTML. HTML.

To do this we use the anchor tag again, To do this we use the anchor tag again, but now using the NAME attribute but now using the NAME attribute rather than the HREF attribute.rather than the HREF attribute.

Linking to locations in Linking to locations in same pagesame page

General form isGeneral form is

<a name = “location-name”> Location-title</a><a name = “location-name”> Location-title</a>

where location-name is the name that where location-name is the name that will be used in anchors that link to this will be used in anchors that link to this location, and Location-title will appear location, and Location-title will appear at the position where the Name anchor at the position where the Name anchor is placed.is placed.

Linking to named locations in Linking to named locations in same page same page

Example: Example: <a name=“Ch2”>Chapter 2 – Tree Algorithms</a><a name=“Ch2”>Chapter 2 – Tree Algorithms</a>

Suppose we put the above tag at the Suppose we put the above tag at the beginning of the Chapter 2 section of our beginning of the Chapter 2 section of our page. Then to link from another location page. Then to link from another location to Chapter 2, we could use any of the to Chapter 2, we could use any of the following:following: <a href= “#Ch2”> Chapter 2</a><a href= “#Ch2”> Chapter 2</a> <a href = “#Ch2”> Tree Algorithms</a> <a href = “#Ch2”> Tree Algorithms</a>

<a href = “#Ch2”> Chapter 2 – Tree Algorithms</a> <a href = “#Ch2”> Chapter 2 – Tree Algorithms</a>

Here the # indicates that we are linking Here the # indicates that we are linking to an anchor location within the page.to an anchor location within the page.

Linking to named locations in Linking to named locations in another page another page

Example: Example:

<a name=“Ch2”>Chapter 2 – Tree Algorithms</a> <a name=“Ch2”>Chapter 2 – Tree Algorithms</a>

Suppose the named location above occurs in Suppose the named location above occurs in “MyReport.html” and that we would like to place a “MyReport.html” and that we would like to place a link to that location in “MyWork.html”. At the place link to that location in “MyWork.html”. At the place where we want the link, we could havewhere we want the link, we could have

<a href = “MyWork.html#Ch2”> See Chapter 2 <a href = “MyWork.html#Ch2”> See Chapter 2 </a></a>

assuming these files are in same location. assuming these files are in same location. Otherwise, use the full web address to MyWork.html.Otherwise, use the full web address to MyWork.html.

ImagesImages Here is an example for Here is an example for

having an image in the filehaving an image in the file<img src <img src =“TractorRide.jpg”>=“TractorRide.jpg”>

Background ColorBackground Color

We can add a background color to We can add a background color to our web page by adding a our web page by adding a bgcolorbgcolor attribute to the Body tag:attribute to the Body tag:

<body bgcolor = “value”> <body bgcolor = “value”> The value can be either a “known” The value can be either a “known”

color color or a color specified with the 6 hex or a color specified with the 6 hex digit system.digit system.

Background Color (cont.)Background Color (cont.)

There is a long list of “known” colors, but There is a long list of “known” colors, but only 16 that are guaranteed to validate only 16 that are guaranteed to validate with all browsers:with all browsers:aqua, black, blue, fuchsia, gray, green, lime, maroon, aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellownavy, olive, purple, red, silver, teal, white, and yellow

To specify a background color with hex To specify a background color with hex digits use the formdigits use the form <body bgcolor = “#D454C8”><body bgcolor = “#D454C8”>for example for example

Documents

Computer Science 101 HTML. World Wide Web Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly