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.
Unraveling Multimodality with Large Language Models.pdf
Html intro for IML 295, week 11
1.
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.