How we access web pages:

* The World Wide Web * HTML Basics Internet 1: The World Wide Web

How we access web pages: The web uses the client-server model of networking: • A web client (e.g. Internet Explorer, Firefox, Safari) makes an HTTP request to a specific web server. • Typically this is a request for a specific HTML file • The web server receives the request and sends back the requested document (which is usually an HTML page). • The web client interprets the information returned by the server (e.g. the HTML code) and displays it appropriately.

How to ‘serve’ web pages: • Dedicate a computer to act as a ‘server’ to send pages to web clients (browsers) when requested. • Install server software that can respond to requests for documents by ‘serving’ them to the requesting computer. • Create and upload the appropriate documents that you wish to make available on the web.

Serving web pages – The Server: Have a computer to act as a ‘server’ to send pages along when requested: A server can be any computer capable of connecting to the internet and running web-server software. • The busier the site, the more powerful the computer. However the server can be as simple as your Dell desktop, or as complex as a rack of high-end dedicated computers. • Busy sites (e.g. Google, Microsoft) will have multiple redundant computers to serve their web pages.

Serving web pages – The Server Software: • A web server application (software) listens (constantly) for HTTP requests and responds by sending back HTTP responses. • This response is usually in the form of an HTML document. • Other files may also be sent (e.g. PPT files, etc) • Several software companies publish web server software • Some of the best known include: Apache, Microsoft IIS (internet information services), Tomcat

Web clients • Software that is capable of sending out HTTP requests and interpreting HTTP responses. • Recall that HTTP responses are usually (but not always) sent in the form of HTML documents. • The most popular web-clients: Internet Explorer (Microsoft), Firefox (Mozilla), Safari (Apple)

HTML HTML = HyperText Markup Language HyperText text containing navigable links to other texts A Markup Language a method of adding information to the text indicating the logical components of a document and instructions for layout of the text on the page, which can be interpreted by some automatic system You can see the HTML of most web pages by selecting View>>Source on your web browser.

HTML: The Language of the Web Web pages are text files written in HTML. HTML is easy to write and even nonprogrammers can learn to use it. HTML describes the format of web pages through the use of tags. Web browsers read the HTML file, interpret the HTML tags, and render (display) the web page accordingly

Creating Web pages In order to create your own web pages using your own HTML you need: A text editor (e.g. Windows Notepad) – NOT a word processor! An web browser for testing the pages(e.g. Firefox, Internet Explorer, Safari, Opera, Chrome – or test with ALL of them!) A web server to store your files and make them available online (students.depaul.edu)

Basic process for creating web pages Write HTML file text file (i.e. do not write in Word) name the file extension .html or .htm View on your local machine (File  Open) Upload to server Beyond the scope of this course See IT-130, HCI-201 Images: must also be uploaded All images should be in either .gif or .jpg formats

Basic HTML Terminology Content the parts of the HTML file that the user reads and sees (text, images, sounds, video, etc) Tags HTML codes that control document appearance e.g. <p>, <br>, <img src="picture.jpg">, etc Attributes properties associated with a tag e.g. <img src="picture.jpg" width="50" height="50"> Entities specially-coded characters e.g.

Our first HTML Tags: Document tags <html> … </html> Mark the beginning and end of the HTML file. <head> … </head> Text in this part of the document is NOT displayed in the browser’s window. It may include other tags like <title> and <meta>. <title> … </title> Displayed in the browser’s title bar. It is used as the default bookmark description. <body> … </body> The contents displayed in the browser’s window. Everything that appears on the page is contained within these tags.

Outline of an HTML page: • <html> • <head> • <title>My first web page</title> • </head> • <body> • Hello world! • </body> • </html> • N.B.: • Every web page should have the document tags <html>, <head>, <title>, <body> • Every tag has a corresponding closing tag

The “Heading” tag Headings: <h1> … </h1>  boldest and largest <h2> … </h2> <h3> … </h3> <h4> … </h4> <h5> … </h5> <h6> …. </h6>  lightest and smallest

More tags • Line Break: <br /> • Horizontal rule: <hr /> • Ordered lists: <ol> … </ol> • Unordered lists: <ul> … </ul>

Example <html> <head> <title> A Practice Web Page</title> </head> <body> <h1>Important! (This is an H1)</h1> <h3>Spacing test (this is an H3)</h3> I just left a blank line, but it doesn’t appear! </body> </html>

A few ‘style’ tags Emphasis <em> </em> rendered as italic Strong <strong> </strong> rendered as bold Center <center> </center> Underlined <u> </u> Many others…

Begin by working with your files locally: • Create your HTML text and view it in your browser before uploading them to your web account. • Click on File  Open and navigate to your file. Or, simply type the path and name of the file in the URL box.

Summary on uploading HTML files Write the HTML file View your resulting page in a web browser Edit as needed Transfer the HTML file to a web server.

Common elements seen in web pages: Most HTML pages contain at least some of the following types of tags: • Links (hyperlinks, email, etc.) • Images • Tables • Lists (bulleted, numbered, etc.) • Lines (horizontal rules)

Lists NL Standings Cubs Brewers Cardinals Astros Reds Pirates Chicago Sports Teams • Hawks • Cubs • Bears • Bulls • Fire

Two types of lists Unordered list <ul> </ul> • Item 1 • Item 2 Ordered list: <ol> </ol> • Item 1 • Item 2

Unordered lists An unordered list (a.k.a. a bullet list) is created with the tag pair <ul> … </ul>. Each item in the list is created with the tag pair <li> … </li>. This produces an indented list with a default character (usually a small diamond) in front of each item.

Example <html> <head> <title>Example Title</title> </head> <body> <h1>Here is an example of a list</h1> <ul> <li>One item </li> <li>Another item </li> </ul> <ul style="square"> <li>Another item </li> <li>Another item </li> </ul> </body> </html> • First item • Second item • Third item • Fourth item

Ordered lists An ordered list is created with the tag pair <ol>… </ol>. Each item in the list is created with the tag pair <li> … </li>. This also produces an indented list but the items are numbered. The default is to number with 1, 2, 3, 4, . . .

Example <html> <head> <title> Example Title</title> </head> <body> <h1>Here is an example of a ordered list </h1> <ol> <li>First item </li> <li>Second item </li> </ol> </body> </hmtl> • First item • Second item

The Anchor Tag:Creating hyperlinks One of the most important tags in HTML. <a> … </a> tags are used to create hyperlinks to • to external web sites • other documents in the same web site • to different locations in the same document (see course web page – weekly schedule links) ** The attribute href indicates the destination of the link: <a href="address">clickable text</a>

Some Anchor Tags <a href="http://www.nytimes.com">New York Times</a> The text ‘New York Times’ is hyperlinked. <a href="http://chicagocubs.com"><img src="cubs_logo.jpg"></a> The image of the Cubs logo is hyperlinked. Don’t forget to close the hyperlink tag! What would happen if you forget?

“URL” = Web Address • URL: Uniform Resource Locator. It is an address that specifies the location of a file on the Internet. • That is if someone says to you: “What is the URL of that page?”, they are asking you for the web address. • E.g. http://www.nytimes.com • http://students.depaul.edu/~login_name

Horizontal line The tag for creating a horizontal line is <hr />. You can use horizontal lines to improve the appearance of your web page and to delineate sections.

An image is inserted using the img tag: <imgsrc="name of image file" /> Note the use of the end ‘/’ Be sure that your image has been copied to the SAME folder as your HTML document. e.g. <imgsrc=“my_dog.jpg” /> The web page will display the image my_dog.jpg The file my_dog.jpg must be in the same directory as your HTML page Inserting images

Images: Bandwidth limitations Image files consume more bandwidth than text files since they can be considerably larger. Users who access the Internet via slower connections such as telephone lines will have to wait for image files that are 100KB or larger Try to minimize use of images over 100K.

Practice!! • Be sure to play around with the various tags we have covered in this lecture. • While you do not have to memorize the syntax of the tags, you will be responsible for showing that you understand how to use them.

< / Lecture>

How we access web pages: