Html intro for IML 295, week 11
•Download as PPTX, PDF•
0 likes•477 views
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.
Recommended
More Related Content
Similar to Html intro for IML 295, week 11
Similar to Html intro for IML 295, week 11 (20)
More from Evan Hughes
More from Evan Hughes (20)
Recently uploaded
Recently uploaded (20)
Html intro for IML 295, week 11
- 2. 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
- 3. 1. Open a text editor (we used TextWrangler) 1. Create your basics HTML page structure <html> <head> </head> <body> Hello World! </body> </html>
- 4. 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>
- 5. 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>
- 6. 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”); {
- 7. 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)
- 8. 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>
- 9. 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!
- 10. 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; }
- 11. 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.