Exercise: Page layout / adding images

1. Create an images folder on the server

Images should live in their own folder (or folders).

  1. Open Filezilla
  2. Create a new folder, images, at the same level as your hcde532 folder (note case)
    DISCUSS FILE STRUCTURE DECISIONS!
    image folder

 

2. Find a photo you like

 

3. Upload the photo to the images directory

The name should be lower case and have no spaces.

  • Either use one word or camelCase or name-with-dashes.
  • No underlines.

Be sure that you know the file extension (.gif, .png, .jpg).

 

4. Create a new page, image-text.html

  1. Open your HTML5 template.
  2. Copy the code below (first block); paste it into inside the BODY tags; and save as image-text.html.
  3. Change the placeholder name for the image in both instances to that of your file and correct ‘yourNetID.’ Remember to change the link that starts with “faculty” so that it will work on your page with your image.
  4. Upload the page into your working directory.
    • Do both images load?
    • If not, work with Kathy or a peer to figure out why.
    • Students with a staff directory option on the web server should pick/use “students”.
  5. Copy the CSS from the second block below and add it to the head. Reload the page. Demo.
    <!-- Begin Navigation -->
    <nav>
        <ul id="menu-items">
            <li>
                <a class="active" href="">Home</a>
            </li>
            <li>
                <a href="">About</a>
            </li>
            <li>
                <a href="">Portfolio</a>
            </li>
            <li>
                <a href="">Testimonials</a>
            </li>
            <li>
                <a href="">Contact</a>
            </li>
        </ul>
    </nav>
    <!-- End Navigation -->

<h1>My First Page With An Image</h1>
<h2>Header Level 2</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
<p>
<img src="http://faculty.washington.edu/kegill/images/shutter-stock-feet-puddle-1000px.jpg" style="width: 600px" alt="rain puddles" />    
</p>
<p>    
<img src="/yourNetID/images/name-of-your-image-here.jpg" style="width: 60%" alt="your image" />
</p>

 

    <style media="all">

        * { margin: 0; padding: 0; }
        
        body {
        background-color:#FFFFFF;
        font-family: Arial, Helvetica, sans-serif;
        color: #000000;
        }
        
        h1 {
        width: 620px;
        font-size: 36px;
        line-height: 36px;
        margin-top: 25px;
        margin-bottom: 20px;
        margin-left: 50px;
        border-bottom: 1px solid #000000;
        }
        
        h2 {
        width: 620px;
        font-size: 24px;
        line-height: 24px;
        padding-top: 8px;
        margin-bottom: 2px;
        margin-left: 50px;
        }
        
        h3 {
        width: 620px;
        font-size: 18px;
        line-height: 18px;
        padding-top: 8px;
        margin-bottom: 2px;
        margin-left: 50px;
        }
        
        p {
        width: 620px;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 10px;
        margin-left: 50px;
        }
        
        ol, ul {
        width: 620px;
        font-size: 16px;
        line-height: 24px;
        padding-left: 40px;
        margin-bottom: 10px;
        margin-left: 50px;
        }

        blockquote {
        background-color: #fdf996;
        font-style: italic;
        width: 680px;
        font-size: 16px;
        line-height: 24px;
        margin-left: 50px; 
        }

        address {
        font-family: Arial, Helvetica, sans-serif;
        width: 620px;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 10px;
        margin-left: 50px;  
        }
        
        table, thead, tbody, th, td {
        border: 1px solid black;
        width: 620px;
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 10px;
        margin-left: 50px;
        text-align:center;
         }
        </style>