Wednesday, March 16, 2016

HTML5 CSS3 - Art History Project - Day 2

Last class was a lot of set up! In this class we will set up the framework for our HTML 5 web page and do a little styling with CSS 3.


  1. Log into Cloud 9 and open up index.html Your file should look something like this:

<!DOCTYPE html>

<html lang="en">     

<head>

<meta charset=" utf-8=">     

<title>Web Site Name</title>

<link href="styles.css" rel="stylesheet">

</head>

<body>

Hello World!

</body>

</html>
  1. Lets add some HTML5 tags! We are going to add these tags today:
    1. <head></head>            The start or top of our web page
    2. <nav></nav>                Add navigation links to three pages
    3. <section></section>     Create the main section of our web page
    4. <article></article>        Create a sub section of the main section
    5. <footer></footer>         Add a bottom or footer to our web page
  2. Here is our new HTML

<!DOCTYPE html>

<html lang="en">     

<head>

<meta charset=" utf-8=">     

<title>Web Site Name</title>

<link href="styles.css" rel="stylesheet">

</head>

<body>

       <header>

           <nav>           

           </nav>       

       </header>

       <section>

           <article>

              <h1>Home</h1>

           </article>

       </section>

       <footer>

       </footer

</body>

</html>
  1. If you click on the run button and then click on the link in the lower console this will allow you to open a new tab in your web browser. There weren't very many changes were there? Only it now says Home in bold!

  1. Now lets add some links with a special tag called the anchor tag <a></a>
    1. The anchor tag has a special attribute called the hypertext reference or href for short
    2. Creating the type of link we will use involves two things
      1. Setting the href equal to a value which in our case is a URL 
      2. Setting the anchor or as some call it the link text. Here are two examples:
        1. <href="http://some-web-site">Link Text</a>
        2. <href="index.html>Home</a>
  2. Another tag we will use is the <ul></ul> tag. This creates an Unordered List meaning it will create a bulleted list
      • one
      • two
    1. An <ol></ol> Ordered List will create a list of numbers or letters:
      1. this 
      2. that
  3. The last tag involved in making our list is a <li></li> List Item tag. This is the information that is next to the bullet or number. 
  4. We will now make an <ul></ul> of three <li></li> items! 

<!DOCTYPE html>

<html lang="en">     

<head>

<meta charset=" utf-8=">     

<title>Web Site Name</title>

<link href="styles.css" rel="stylesheet">

</head>

<body>

       <header>

           <nav>           
               
               <ul>       
              
                   <li><a href="index.html>Home</a></li>

                   <li><a href="gallery.html>Home</a></li>

                   <li><a href="works-cited.html>Home</a></li>
           
               </ul>
           
        </nav>       

       </header>

       <section>

           <article>

              <h1>Home</h1>

           </article>

       </section>

       <footer>

       </footer

</body>

</html>
  1. Now press Ctrl + S to save or go to File > Save
  2. Go to the tab of your web page refresh your page and you should see three links!
  1. Next we will create our other two pages.
  2. Go to File > Save As... and save the page as gallery.html
  3. Finally we will do the same thing File Save As... works-cited.html
  4. In each of these new pages you will need to change the <h1>Home</h1> tag to be Gallery and Works Cited!
    
    <article>
       
      <h1>Home</h1> 

   </article>

In Day 2 Part 2 we will begin to style our web page using CSS!!!