HTTP and HTML Comp-206 : Introduction to Software Systems Lecture 22 Alexandre Denault Computer Science McGill University Fall 2006
15 / 55 Mercury
Subversion Directory The URL for the class subversion directory is: /xtra/2006/cs206-svn
Client / Server I want page.html Here is page.html
Request for Comments - RFC RFCs are a series of documents used to innovate on Internet technologies. A central authority assigns them numbers. Once an RFC receives a number, it is never changed. An author can then improve on the technology by publishing a follow up RFC. Thus possibly making the previous RFC obsolete. Internet technologies have evolved through this format. This is one of the reason most of the technologies can interoperate and are not proprietary RFC can be found at http://www.rfc-editor.org/rfc.html
HTTP HTTP is a protocol to transfer HTML pages. It is the culmination of several RFC's. A HTTP client establishes a connection over a predefined port : 80 for normal HTTP 443 for SSL HTTP The client sends back a response code with the requested document, if it exists. 200: OK 401: Unauthorized 403: Forbidden 404: Not Found 500: Internal Server Error
HyperText Markup Language (HTML) HTML is markup language for the creation of web pages. It contains both data and instructions on how to display that data. When HTML was created, it was very loosely defined. That helped it gain popularity. Now, HTML (current version of 4.01) is strictly defined. The 4.01 standards were developed by The World Wide Web Consortium (W3C), an international consortium where Member organizations, a full-time staff, and the public work together to develop Web standards.
HTML by Example <html> <head> <title>title of page</title> </head> <body> This is my first homepage. <b>this text is bold</b> </body> </html>
Tags HTML are collections of tags. Two types of tag exists Those with text in between. <tag>this text is in between tags</tag> Those with only attributes. <tag attribute= value /> Both kinds of tags can have attributes. When working with the first kind of tags, only the opening tag has attributes. <tag attribute= value >text</tag> Although tags can be written in upper or lower case, future standards will require them to be written in lower case. Attributes can be single or double quoted.
Document Tags <html> : Tells you browser that this is an HTML document. <head> : Text between <head> tags is header information. <title> : Text between <title> tags is the title of the document. <body> : Text between <body> tags is the title of the document.
Headers Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. <h1>this is the largest heading</h1> <h2>this is a larger heading</h2> <h3>this is a large heading</h3> <h4>this is a medium heading</h4> <h5>this is a small heading</h5> <h6>this is the smallest heading</h6>
Paragraphs and Line Breaks Paragraphs are defined with the <p> tag. The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. <p>this <br />is a para<br />graph with line breaks</p> <p>this is a paragraph without line breaks </p>
The Big, the Bold and the Emphasized <b> defines bold text <b>this text will be bold</b> <big> defines big text <big>this text will be BIG</big> <em> defines emphasized text <em>this text will be emphasized</em> <i> defines italic text <i>this text will be italic</i> <small> defines small text <small>this text will be small</i> <strong> defines strong text <strong>this text will be bold</strong>
Quotes and citations <blockquote> defines a long quotation I also used it extensively for indentation. <blockquote>this code will be indented</blockquote> <q> defines a short quotation <q>this code will be italic</q> <cite> defines a citation <cite>i have no idea what this looks like</cite>
Links to other pages HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. <a href="url">text to be displayed</a> With the target attribute, you can define where the linked document will be opened. <a href="http://www.cs.mcgill.ca/~cs206/" target="_blank">visit the course webpage.</a>
Jumping to a specific location When used with the <a> tag, the name attribute is used to create a named anchor. <a name="label">text to be displayed</a> You should notice that a named anchor are invisible To link directly to the "label" section, add a # sign and the name of the anchor to the end of a URL. <a href="http://www.cs.mcgill.ca/~cs206/page.html#label">visit the course webpage.</a>
Images Images can be inserted using the <img> tag. <img src="bob.png"> The display of images can modified using variable attributes. width= and height= : indicates the width and height of an image Allows you to scale an image (don't recommend it) Allows a browser to draw the page faster border= : allows you to draw a border around an image I usually use border=0 to remove borders alt= : indicates text to display if image cannot be loaded Also used by browsers for the disabled
Frames Frames are used to share the screen between two pages. Nobody uses frames anymore, so I'm not teaching them :-)
Tables Tables are defined using a combination of <table>, <tr>, <th> and <td> tags. <table> defines the table <tr> defines a row <td> defines a column You can then use use attributes to change the properties of the different component. width= changes the width of a column (td, th) border= change the width of the border around table (table) cellpadding= determines padding space in each cell (table) cellspacing= determines spacing between each cell (table)
Table Example <table border="1"> <tr> <th>heading</th> <th>another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Lists You can use the <ul> or <ol> tags to create lists. <ul> creates unnumbered lists (bullets). <ol> creates numbered lists (numbers). Each list item is delimited by a <li> tag. <ul> <li>studying</li> <li>homework</li> </ul>
Character Entities Some characters have a special meaning in HTML like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source. A character entity has three parts: an ampersand (&) an entity name or a # and an entity number a semicolon (;)
Character Entities Table Result Result Entity Name Entity Number non-breaking space < less than < < > greater than > > & ampersand & & quotation mark "e; " ' apostrophe ' (not IE) ' copyright registered trademark division
Comments The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. <!-- This is a comment -->
Hosting using your Socs account In your Socs account, create a directory name public_html. Chmod this directory rwxr-xr-x (755). Put your html files in that directory. Chmod them rwxr--r-- (744). You can view your files by pointing your browser to http://www.cs.mcgill.ca/~username/ To allow Apache to read your files, all directories and files but have the proper permissions.