Your SlideShare is downloading. ×
Html intro for IML 295, week 11
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html intro for IML 295, week 11

182

Published on

This PowerPoint provides instructions for what we did in class. Make sure you can complete everything on this PowerPoint and bring it to class next week. We will use this to start from.

This PowerPoint provides instructions for what we did in class. Make sure you can complete everything on this PowerPoint and bring it to class next week. We will use this to start from.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
182
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 1. Create a folder to serve as the “directory” for your website 1. Put an “images” folder in your directory folder (name it in all lowercase letters) 1. Add the background image and your head shot image to the images folder 1. Make sure that you rename all images in simple and contextual language with no spaces or special characters. For example, my head shot might be evanHead.png
  • 2. 1. Open a text editor (we used TextWrangler) 1. Create your basics HTML page structure <html> <head> </head> <body> Hello World! </body> </html>
  • 3. 1. Click file  save as  index.html  make sure you save the file into your directory folder. 1. Right click on your saved file and open with a browser (make sure your browsers are up-to-date!) 1. Now change the tab name by adding a title tag <html> <head> <title> Race, Class, and Gender in Digital Culture </title> </head> <body> Hello World! </body> </html>
  • 4. 1. Save your document 1. Right click on your saved file and open with a browser (were the changes you made reflected?) 1. Now let’s add the image of you with the <img> tag. We will also need to add an attribute. <html> <head> <title> Race, Class, and Gender in Digital Culture </title> </head> <body> Hello World! <img src=“images/imageName.png” /> </body> </html>
  • 5. 1. Open a new file in Text Wrangler (or your preferred text editor) File  New  Text Document (don’t save yet) 2. Write your CSS declarations using selectors (the html tag name), properties, and values. body { background-image: url(“imgName.jpg”); {
  • 6. 1. Save the file as a css stylesheet File  save as  style.css (and make sure it’s in your directory folder 2. The background image will not show up yet because you haven’t linked your html page (index.html) to your CSS page (style.css)
  • 7. 1. In index.html add the link to style, css with the <link> tag and attributes. <html> <head> <title> Race, Class, and Gender in Digital Culture </title> <link rel=“stylesheet” type=“text/css” href=“style.css” /> </head> <body> Hello World! <img src=“images/imageName.png” /> </body> </html>
  • 8. 1. Save your document 1. Right click on your saved index.html file and open with a browser (were the changes you made reflected?) 1. If you can’t see the background image then something didn’t work, either in the way you wrote your CSS or the link you created on your index.html document. So check it for mistakes and try again if you can’t find them!
  • 9. 1. Add more declarations to your CSS document so the background scales in size with the size of your browser window body { background-image: url(“imgName.jpg”); background-attachment: fixed; background-size: cover; }
  • 10. 1. Make sure everything is saved 1. Open your index.html document in a browser. If you change the size of the browser windor does the image scale? If it does work, congratulations! If not, then something didn’t work. Delete the commands and try again.

×