A web client (e.g. Internet Explorer, Firefox, Safari) makes an HTTP request to a specific web server. ... It is an address that specifies the location of a file on the Internet. ...
* HTML Basics
Internet 1: The World Wide Web
The web uses the client-server model of networking:
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.
HTML = HyperText Markup Language
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.
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
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)
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
the parts of the HTML file that the user reads and sees (text, images, sounds, video, etc)
HTML codes that control document appearance
e.g. <p>, <br>, <img src="picture.jpg">, etc
properties associated with a tag
e.g. <img src="picture.jpg" width="50" height="50">
<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.
Headings: <h1> … </h1> boldest and largest
<h2> … </h2>
<h3> … </h3>
<h4> … </h4>
<h5> … </h5>
<h6> …. </h6> lightest and smallest
<title> A Practice Web Page</title>
<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!
rendered as italic
rendered as bold
Write the HTML file
View your resulting page in a web browser
Edit as needed
Transfer the HTML file to a web server.
Most HTML pages contain at least some of the following types of tags:
Chicago Sports Teams
Unordered list <ul> </ul>
Ordered list: <ol> </ol>
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.
<h1>Here is an example of a list</h1>
<li>One item </li>
<li>Another item </li>
<li>Another item </li>
<li>Another item </li>
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, . . .
<title> Example Title</title>
<h1>Here is an example of a ordered list </h1>
<li>First item </li>
<li>Second item </li>
One of the most important tags in HTML.
<a> … </a> tags are used to create hyperlinks to
** The attribute href indicates the destination of the link:
<a href="address">clickable text</a>
<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?
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.
<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 pageInserting images
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.