1 / 25

Computer Science 101

Computer Science 101 . HTML. World Wide Web. Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly 1989) Wanted researchers to be able to “link” or cross-reference each others research papers

sheila
Télécharger la présentation

Computer Science 101

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Computer Science 101 HTML

  2. World Wide Web • Invented by Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland (roughly 1989) • Wanted researchers to be able to “link” or cross-reference each others research papers • By mid 1980s we had DNS – domain name service to map domain names to IP address

  3. WWW (cont.) • Berners-Lee developed a simple protocol, HTTP – HyperText Transfer Protocol for exchanging information via hypertext links • The documents themselves were to be marked up using HTML – HyperText Markup Language • HTML based on SGML - Standard Generalized Mark-up Language which was widely used in publishing industry

  4. WWW (cont.) • Early 1990s World Wide Web ramped up • 1993 – NCSA - National Center for Supercomputers (University of Illinois) released Mosaic browser • 1994 – Netscape was formed

  5. Important Web Programs • Web Server: This is a program that manages web sites on server computers. The web server accepts requests from other programs (clients) asking for pages from the web sites. • Browsers: Programs like Internet Explorer and Firefox that act as clients for web servers requesting pages for the user and displaying the returned pages.

  6. HTML • HyperText Markup Language – HTML is used to mark up a document to tell browser how it should be displayed, nothing about content • Allows us to markup up text with special tags that inform the web browsers how the content should be displayed • For the most part HTML tags are placed in “angle brackets” like <b> and occur in pairs like <b> Here is some text </b>

  7. Some HTML tags • html – this tag together with its end tag enclose the entire document • head – there are two sections to the document, the head and the body. For the most part the head section contains the title of the document • title – encloses the page title shown in title bar at the top • body – enclose the body of the document, essentially all of the displayed content

  8. A Minimal HTML document <html> <head> <title> Title of your page </title> </head> <body> All the good stuff goes here </body></html>

  9. More tags • h1 – There are six levels of headings in HTML, numbered h1 through h6 with h1 being the largest and boldest • p – Marks the beginning of a new paragraph. • ul – enclose an unordered list – bullet list • ol – enclose an ordered or numbered list • li – enclose an item in a list

  10. Unordered Lists

  11. Ordered Lists

  12. Example HTML page

  13. And in the browser

  14. More tags • br – Causes a line break to occur. Does not use an end tag(Recommend: <br/> • hr – Causes a horizontal line to be drawn across the page. No end tag. (Recommend: <hr/>) • b – enclosed text is bold • i – enclosed text is in italics

  15. The anchor tag • The anchor tags, <a> and </a>, are used with links. • To specify a link from a location in your page to a location in current page or another page on the web. • To specify a location in your page that can be linked tofrom another location in the current page or from another page.

  16. Making links – HREF Attribute • General form is<a href = “URL”> link-phrase</a> • URL (Uniform Resource Locator) is the web address to link to • link-phrase is the phrase to appear on your page for the user to click in order to execute the link.

  17. Linking to other places: HREF attribute • Suppose we want to have a link on our page to link to W&L’s home page. The following markup will achieve this:<a href=“http://www.wlu.edu”> My University </a>

  18. Locations that can be linked to:Name attribute • In order to link to specific locations within a page, these locations must first be given names that are recognized by HTML. • To do this we use the anchor tag again, but now using the NAME attribute rather than the HREF attribute.

  19. Linking to locations in same page • General form is<a name = “location-name”> Location-title</a>where location-name is the name that will be used in anchors that link to this location, and Location-title will appear at the position where the Name anchor is placed.

  20. Linking to named locations in same page • Example: <a name=“Ch2”>Chapter 2 – Tree Algorithms</a> • Suppose we put the above tag at the beginning of the Chapter 2 section of our page. Then to link from another location to Chapter 2, we could use any of the following:<a href= “#Ch2”> Chapter 2</a> <a href = “#Ch2”> Tree Algorithms</a> <a href = “#Ch2”> Chapter 2 – Tree Algorithms</a> • Here the # indicates that we are linking to an anchor location within the page.

  21. Linking to named locations in another page • Example: <a name=“Ch2”>Chapter 2 – Tree Algorithms</a> • Suppose the named location above occurs in “MyReport.html” and that we would like to place a link to that location in “MyWork.html”. At the place where we want the link, we could have<a href = “MyWork.html#Ch2”> See Chapter 2 </a>assuming these files are in same location. Otherwise, use the full web address to MyWork.html.

  22. Images • Here is an example for having an image in the file<imgsrc =“TractorRide.jpg”>

  23. Background Color • We can add a background color to our web page by adding a bgcolor attribute to the Body tag: <body bgcolor = “value”> • The value can be either a “known” color or a color specified with the 6 hex digit system.

  24. Background Color (cont.) • There is a long list of “known” colors, but only 16 that are guaranteed to validate with all browsers:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow • To specify a background color with hex digits use the form<body bgcolor = “#D454C8”>for example

More Related