HTML AND CSS CODE For this assignment we will implement what

HTML AND CSS CODE

For this assignment we will implement what we have already learned about controlling layout with divs and also how to quickly create a template for a website (not just a webpage) that will act as your online portfolio. This template will be the basis for almost all of our assignments for the rest of the semester.

You will create the same website three times, each using different methods of implementing CSS. Then you will replicate the externally styled page 2 more times.

Therefore, by the end you must have five pages (one using inline style only, one using internal style only, and three using external style only) and all of them should follow the same layout and style. For a reminder on how to style a page, see: http://www.w3schools.com/css/css_howto.asp

To explore the different styling methods, you should first create one of the pages using only inline styles (only style using the style attribute), then recreate the same page using an internal style sheet (remove all style attributes and create a CSS in the header), then finally replicate the page using only an external style sheet. Save each page with each style as a different name.

Criteria to include on page: A div that is centered at the top of each page for the title of the site (mine below is “Resume of Prof. Gervais”) A div that is centered and visible (acts as a buffer) and contains within it three divs that are centered and horizontally next to each other (for me, it is the pink, green, and yellow divs).

o Tip: to center the three divs, put them in another centered div (below the red div is centered and there is another div centered in that which you cannot see, but it is just acting as a container for the pink, green, and yellow divs). Link to all of your other pages. These links should have pseudo classes assigned so that the color of the link varies depending on if the user is hovering, it is active, visited, or if it is just a link. In addition, place the “title” attribute in the anchor tag and see what happens (Google title attribute HTML if you are having trouble. The first result should be a w3 schools site, which we have all seen before. This will have a good answer). Assign the title attribute a value.

o *Note, you cannot apply pseudo classes via inline style, so for the page that uses inline style, you cannot due this step. An email link o Note: the email link is slightly different then a normal hyperlink, you should Google this to find out. All of the above criteria should have a comment tag underneath them in the HTML code. In addition, place some comments in the CSS so that anyone can easily tell which class is associated with each div (i.e. for my heading div I might put a comment under the class for it that reads “heading class”)

A nice color scheme including a background color. Since we do have a background color, to make sure we can see it at all times, do not make any div span the entire browser window. An outline of your skills, education, and experience.

Appropriate use of headings to explain what is going on followed by text, as necessary. How you arrange this text is up to you (paragraph, list, etc.). Every page should validate according to w3 standards for an XHTML 1.0 transitional document.

Every webpage should be properly uploaded to the web. Submit the URL to your inline, internal and external pages via blackboard, the answer to the questions, and all three of the HTML’s that represent the different ways of styling a page. In addition, place all of the files created for this assignment in a folder, zip the folder, and attach it to your submission.

*Note: you should properly use all of the criteria above. For example, when using three divs that are horizontally next to each other, do not put two divs on the outside of one div just to get it to center, as we know that is not the correct way to center a div.

other pages Resume of Prof. Gervais Resume of Prof. Gervais Work experience Pizza Shop Oct. 2009- Dec. 2012 Random NYS Agency Agency Site Web Design Intern Jan 2013-present

I Have created the basic template of all the pages. You can now segregate the CSS styling.

1. Resume_internal (1st Page):

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
   <title>Resume of Prof. Gervais</title>
   <style type=\"text/css\">
       body {
           text-align: center;
           width: 80%;
           margin-left: 125px;
           font-family:Sans-serif;
           line-height: 1.5em;
       }

       #container {
           padding-left: 237px;
           padding-right: 229px;
           margin-bottom: 14px;
       }
       #container1 {
           padding-left: 237px;
           padding-right: 229px;
           margin-bottom: 35px;
       }

       #container .column {
           position: relative;
           float: left;
       }

       #center {
           padding: 10px 20px;
           width: 100%;
       }

       #left {
           width: 180px;
           padding: 0 10px;
           right: 240px;
           margin-left: -100%;
       }

       #right {
           width: 130px;
           padding: 0 10px;
           margin-right: -100%;
       }

       #footer {
           clear: both;
       }

       #container {
           overflow: hidden;
       }
       #container1 {
           overflow: hidden;
       }

       #container .column {
           padding-bottom: 1001em;
           margin-bottom: -1000em;
       }
       * html body {
           overflow: hidden;
       }

       * html #footer-wrapper {
           float: left;
           position: relative;
           width: 100%;
           padding-bottom: 10010px;
           margin-bottom: -10000px;
           background: #fff;
       }

       p {
           color: #555;
       }

       nav ul {
           list-style-type: none;
           margin: 0;
           padding: 0;
       }

       nav ul a {
           color: black;
           text-decoration: none;
           font-size: small;
       }

       #header{
           font-size: large;
           padding: 1.3em;
           background: #BCCE98;
       }
       #header1{
           font-size: large;
           padding: 0.3em;
           background: #2da9d2;
       }

       #left {
           background: #fff;
       }

       #right {
           background: #5396ac;
       }

       #center {
           background: #5396ac;
       }

       #container .column {
           padding-top: 1em;
       }

   </style>

</head>

<body>

<div id=\"header\"><p>Resume of Prof. Gervais</p>
<div id=\"header1\"><p>Work Experience</p>
<div id=\"container\">

       <div id=\"center\" class=\"column\">
           <article>

               <h5>Pizza Shop</h5>
               <p><a href=\"#\">Pizza Shop Site</a></p>

           </article>
       </div>

       <nav id=\"left\" class=\"column\">
           <h5>Other Pages</h5>
           <ul>
               <li><a href=\"#\">Work Experience</a></li>
               <li><a href=\"#\">Educational Experience</a></li>
               <li><a href=\"#\">Related Awards and Skills</a></li>
           </ul>
       </nav>

       <div id=\"right\" class=\"column\">
           <h5>Random NYS Agency</h5>
           <p><a href=\"#\">Agency Site</a></p>
       </div>

   </div>
   <div ><a href=\"#\">Email Me!</a></div>
   </div>
</div>
</body>

</html>

2. Resume_Related_Awards(2nd Page)

       #left {
           background: #fff;
       }

       #right {
           background: #5396ac;
       }

       #center {
           background: #5396ac;
       }

       #container .column {
           padding-top: 1em;
       }

   </style>

</head>

<body>

<div id=\"header\"><p>Resume of Prof. Gervais</p>
<div id=\"header1\"><p>Work Experience</p>
<div id=\"container\">

       <div id=\"center\" class=\"column\">
           <article>

               <h5>Awards</h5>
               <p>Award Scholarship \'X\'</p>
               <p>Employee of the month</p>

           </article>
       </div>

       <div id=\"right\" class=\"column\">
           <h5>Skills</h5>
           <p>Web Design</p>
               <p>Photoshop</p>
               <p>Team Player</p>
               <p>Programming</p>
       </div>

   </div>
   <div ><a href=\"#\">Email Me!</a></div>
   </div>
</div>
</body>

</html>

3. Resume_Education(3rd Page)

       #left {
           background: #fff;
       }

       #right {
           background: #5396ac;
       }

       #center {
           background: #5396ac;
       }

       #container .column {
           padding-top: 1em;
       }

   </style>

</head>

<body>

<div id=\"header\"><p>Resume of Prof. Gervais</p>
<div id=\"header1\"><p>Work Experience</p>
<div id=\"container\">

       <div id=\"center\" class=\"column\">
           <article>

               <h5>High School Diploma</h5>
               <p><a href=\"#\">School Name</a></p>

           </article>
       </div>

       <div id=\"right\" class=\"column\">
           <h5>BS Computer Science</h5>
           <p><a href=\"#\">SUNY Albaay</a></p>
       </div>

   </div>
   <div ><a href=\"#\">Email Me!</a></div>
   </div>
</div>
</body>

</html>