CSC 101 -- Lab 1 By now, you should have … S
advertisement
CSC 101 -- Lab 1 S Summer 2011 By now, you should have … Completed Pre-Lab activities: – Reviewed basic Windows operations – Created a csc101 folder inside Userdata and lab folders within the csc101 folder – Looked over web tutorial pages about HTML …in this week’s lab you will – listen to me for a few minutes (important!) – create a simple web page using basic HTML tags and two types of lists – create a home page on the WFU server – post your HTML file to the WFU server – answer some short-answer questions regarding the lab material 1 How to Make Lab1 Go Smoothly 1. DO NOT PUT SPACES IN FILE NAMES or FOLDER NAMES when you are creating them. y attention to capital p and lower case 2. Pay letters when creating FILE NAMES and FOLDER NAMES. Use all lowercase to make everything easier. 3. Log in to the wireless network as a WFU Student – not a Guest. A Few Words about HTML • A language/system for communicating to a web browser how information should be displayed on the viewer’s screen. • Based on the use of paired “tags” that surround the text to be formatted – with a few exceptions. Every HTML file contains: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> A Few Words about HTML • Remember the few basic tags we discussed today. • http://www.w3schools.com/html/ 2 HTML • HTML consists of plain text with markup tags – Plain text: standard text characters – Markup tags: embedded commands or codes (within the plain text) that describe • Content (what is on the page) • Structure (layout or appearanceTags of the page) • Example: <p>This is some <strong>sample</strong> HTML.</p> HTML Tags • Tags are not case-sensitive • Most tags are “paired tags” • Example: Tags <p>This is some <strong>sample</strong> HTML.</p> Appears as: This is some sample HTML. Text in HTML • Simple text is in enclosed in paragraph tags – Automatically wraps to fit the window – Automatically adds space between adjacent paragraphs • Example: <p>The < >Th rain i i in S Spain i stays t mainly i l on th the plain.</p> l i </ > <p>In Hartford, Hereford, and Hampshire, hurricanes hardly happen.</p> • Appears as: The rain in Spain stays mainly on the plain. In Hartford, Hereford, and Hampshire, hurricanes hardly happen. 3 Text in HTML • Break tags help to format lines • Example: <p>Audrey Hepburn played Eliza Doolittle in the movie version of <br> "My Fair Lady" <br> even th though h th that t role l was played l d b by J Julie li A Andrews d on stage.</p> • Appears as: Audrey Hepburn played Eliza Doolittle in the movie version of "My Fair Lady" even though that role was played by Julie Andrews on stage. Text in HTML • A few other kinds of text formatting: – Italics (emphasis) This is <em>italic</em> text. This is italic text. – Bold (strong) This text is <strong>bold</strong>. <strong>bold</strong> This text is bold. – Underline And this is <u>underlined</u>. And this is underlined. – Superscript Here is a <sup>super</sup>script. Here is a superscript. – Subscript And, here’s a <sub>sub</sub>script. And, here’s a subscript. – Plus many more Text in HTML • Font face, color, style, etc. may also be specified • Example: <p>Roses are <font color="red">red</font>,<br> color red >red</font>,<br> <font face="Arial">violets are blue…</font></p> • Appears as: Roses are red, violets are blue… 4 Headings in HTML • Headings of different weights are used to introduce sections • Example: <h1>My Autobiography</h1> <h2>Part 1: My Early Years</h2> <h3>Chapter 1: I Am Born</h3> <p>It was a dark and stormy night…</p> • Appears as: My Autobiography Part 1: My Early Years Chapter 1: I Am Born It was a dark and stormy night … Comments • Comments may be added to an HTML file – Information for someone reading the HTML file – Comments do not appear on the page in the browser • Example: <h1>My Autobiography</h1> <h2>Part 1: My Early Years</h2> <h3>Chapter 1: I Am Born</h3> <!-- That’s the title of Chapter 1 of David Copperfield --> <p>It was a dark and stormy night…</p> <!-- This quote comes from www.bulwer-lytton.com --> • Appears the same as before: My Autobiography Part 1: My Early Years Chapter 1: I Am Born It was a dark and stormy night … Basic Document Structure Structural tags define the basic document structure <html> (Signifies an HTML document) <head> (Descriptions of the document and scripts go here) </head> <body> (The main part of the page goes here) </body> </html> 5 Setting a Page Title • Titles help give the user a frame of reference • Titles appear in taskbar and browser’s title bar • Example: <title>WFU | Wake Information Network</title> • Appears as: Lists in HTML • Three kinds of lists in HTML: – Ordered lists (automatically numbered) – Unordered lists (bullet points) – Definition lists (terms and definitions) Ordered Lists • Automatically numbered • Example: My Paper's Outline:<br> <ol> <li>Introduction</li> <li>Discussion</li> <li>Conclusions</li> <li>References</li> <li>Appendices</li> </ol> • Appears as: My Paper's Outline: 1. Introduction 2. Discussion 3. Conclusions 4. References 5. Appendices 6 Unordered Lists • Produces bullet-point lists • Example: • Appears as: HTML has three types of lists <br> lists:<br> <ul> <li>Ordered</li> <li>Unordered</li> <li>Definition</li> </ul> HTML has three types of lists: • Ordered • Unordered • Definition • Exactly the same syntax as ordered lists, except “<ul>” instead of “<ol>” Definition Lists • For terms and definitions• Appears as: • Example: Glossary:<br> <dl> <dt>HTTP</dt> / <dd>A protocol; the mechanism Glossary: that computers use to exchange HTTP Web documents.</dd> <dt>HTML</dt> <dd>A language; the terms and symbols used to define the content and layout of a Web page.</dd> </dl> A protocol; the mechanism that computers use to exchange Web documents. HTML A language; the terms and symbols used to define the content and layout of a Web page. Inline Graphics • Images may be placed on the page along with text and other elements • Only standard image formats: .gif, .jpg, and .png • Example: p <img src="audrey.jpg"> <br> Audrey Hepburn played "Eliza Doolittle" in <em>My Fair Lady.</em> • Appears as: Audrey Hepburn played "Eliza Doolittle" in My Fair Lady. 7 Hyperlinks • Hyperlinks are the key to the Web – Cross references to other elements: pages, images, multimedia, etc. – Clicking on a hyperlink causes an automatic information request to a server • Example: Click <a href="http://csilluminated.jbpub.com/3e/">here</a> for the Web site for the textbook <em>Computer Science Illuminated</em>, 3rd ed. • Appears as: Click here for the Web site for the textbook Computer Science Illuminated, 3rd ed. Example An example of what your resulting page may look like will be shown on the projector. 8
