HTML CSS TUTORIAL FOR DTC/ENGL 355 <!- - First, follow the instructions on the AML Server handout and create a folder. In that folder, create a folder called "sample". In "sample" create a folder called "img." Go to http://arola.kuurola.com/images/phone.jpg, right click on the image and "save image as." Save it as "phone.jpg" in the "img" folder you just created. Go to http://arola.kuurola.com/images/text.gif, right click on the image and "save image as." Save it as "text.gif" in the "img" folder. Go to http://arola.kuurola.com/images/hand.gif, right click on the image and "save image as." Save it as "hand.gif" in the "img" folder. Now, open TextWrangler and go under File/New to create a new document. Immediately save it as "index.html" within your folder (NOT in the img folder, but in the root/main "sample" folder. Now, begin to type the following code. Anything you see in these brackets like this are just comments for you. You do NOT need to type them. - - > <!DOCTYPE html> <html lang="en"> <head> </head> <title>pancakes and Bacon</title> <meta charset="utf- 8"> <link rel="stylesheet" type="text/css" media="screen" href="style.css" /> <link rel="icon" type="image/gif" href="img/hand.gif" /> <!- - Notice how in the head we have the title, which appears at the top of the browser. There is also the character set. Next, we have the link to the style sheet. Notice the href in that tag. It is important, and telling the browser WHERE to find the stylesheet. If the style sheet were saved in a folder called "tree", then that would say href="tree/style.css" Next up is something you may only see once your page is saved to the server, but it is an icon that will appear next to your title in the browser window. Notice how when you are at our class website you see a WSU logo next to teh title? That's because I saved it as an icon. - - > <body> <div id="wrapper"> <h1><span class="first">w</span>ord</h1> <!- - This here is an unordered list, ie a bulleted list. An ordered list would just be an <ol> for "ordered" list. the LI tags are "list items." - - > <ul> <li><a href="http://www.wsu.edu">link 1</a></li>
<li><a href="bacon.html">link 2</a></li> <li>link 3</li> </ul> <!- - This is another unordered list, but it is styled. You won't notice any difference until you create the stylesheet, but the difference will be cool. You can do a lot with these. Google "listamatic" for some examples. - - > <ul id="navlist"> <li><a href="#">item one</a></li> <li><a href="#">item two</a></li> <li><a href="#">item three</a></li> </ul> <p> <!- - Have you saved recently? Save it! "command + s". - - > <p> <img src="img/phone.jpg" alt="phone" width="300" height="225"> <h2>paragraph 2 Means Business</h2> <p class="breathe">and here is paragraph 2. Notice how the font and spacing looks different. Why is this? Take a look at the class "breathe" on the style sheet and see what it's doing. <img src="img/text.gif" alt="sample text" width="447" height="120"> </div> <p>after you create and save the stylesheet, you will notice how the words of paragraph 2 go up against the picture of the phone, but the words in paragraph 3 do not go up against the above image. Why is this? Notice how the phone image is in a p tag, and the text image isn't. NOW, notice in the stylesheet how an image that lives in a p tage that lives in the div 'wrapper' is told how to act. See? </body> </html> <!- - Save again, and open this page at http://studentweb.engl.wsu.edu/yourname/sample/ Now we're going to style it with the style sheet. It'll look a lot different soon. - - >
/* This is how comments are written in a style sheet. Notice the symbols alongside it are different than in HTML. Next up, open a NEW document in Text Wrangler and save it as "style.css" in the sample folder. Now, copy the following css, but as with the HTML, no need to copy my comments. They are just here to help you along. */ body { background- color: #ccdff0; /* The above is a way of telling an existing HTML tag how to act. Here, we are setting the body background color. You can tell any pre- existing HTML tag how to act. */ #wrapper { border- top: 7px dashed #888; border- bottom: 8px dashed #888; margin- top: 200px; margin: auto; padding: 40px; width: 600px; background- color: #eee; #wrapper h1 { font- family: Helvetica, Verdana, sans- serif; font- size: 54pt; font- weight: bold; color: orange; text- align: center; #wrapper p img { float: left; padding: 0 10px 10px 0; /* The first set above tells the #wrapper div how to act. Notice where the wrapper is in your HTML. The next two tell a specific tag WITHIN the wrapper div how to act. All <h1> tags that live in the wrapper will now have the above styles. But, an <h1> that doesn't live in the #wrapper div will not. Same with any "img" tag that lives in a "p" tag that lives in the #wrapper div. But, any other img will not. */.first { font- size: 80pt; color: #1395b1;.breathe { font- family: Helvetice, Verdana, sans- serif; font- size: 12pt;
line- height: 18pt; /* The two above instances are examples of a class. A class is indicated by the "." and can occur numerous times with the HTML. You could apply.breathe to any paragraph you wanted, for example. Notice in the HTML how ".first" is only used for a "span class" meaning it's only for part of a paragraph and not the whole paragraph.*/ #navlist li { display: inline; list- style- type: none; padding- right: 20px; /* The above is styling the <li> tags in your navlist. Now, save this file again (remember, as style.css in the "sample" folder) and go to your browser to see what has changed. */
Now the fun part! (maybe ) Try to make the following happen: 1) Try to figure out why the header Word is so far down from the top of the page. Make it closer to the top. 2) Change the header (currently, Word ) to one of your choosing. Consider getting rid of the span- class on the first letter. Your call. Mess with the color and size perhaps. 3) Change the background color of the body 4) Get rid of the dashed top and bottom border on the wrapper, and instead make a border that is solid and goes all the way around it. 5) Make the background of the wrapper a different color 6) Create a new class and apply it to paragraph 3. You can change font, font size, color, spacing, whatever you want. 7) Put in an image of your own choosing. a. TIP! Open the image in Photoshop. First, go to Image and then Image Size and change the dimensions to be a reasonable size for your site. Notice the phone is currently 300x225 pixels. Once you re happy with the size, go under File, Save for Web and save at the lowest size that still has a quality you are happy with. NOTE: if you re confused about the difference between.gif,.png. and.jpg, read: http://www.sitepoint.com/gif- png- jpg- which- one- to- use/ 8) Create a h2 header in the HTML and style it in the CSS. 9) Copy the HTML and paste it into a new document. Save the new document in the sample folder and call it page2.html. Now, make a link from index.html to page2.html. It can be one of the links in the bulleted list but doesn t have to be. Note, the a href tag should read <a href= page2.html >. this is an INTERNAL link and since the file is save in the same folder, it doesn t need anything extra. 10) Make a third page and do the same thing as instructed in #9. 11) (not required, but if you re having fun, do this!) See what you can do to learn how to style a list in order to make a navigation bar that you like. Delete the second <ul> from the HTML, and get rid of the #navlist in the CSS. Now, go to http://css.maxdesign.com.au/listamatic/ and choose a list and try to make it work! 12) BY MONDAY at classtime you need to post to Blog Post #3 the address to your tweaked module.