Mr. Vela's Class
  • Home
  • Assignments
  • Personal Website Project
  • Tutorial Videos
  • HTML Tags
  • Bookmarks
  • Keyboard Shortcuts

​Daily Directions

ATLAS
Code.org
Office 365

Adding Style to your Websites

3/18/2019

0 Comments

 

Step 1:  Start a new "Web Lab" Project called "Stylesheet Practice."


Step 2:  Delete all code.  Then Copy and Paste the code below into the project:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    
    <img src="ams-logo_orig.png"
         alt="Ahwahnee Logo" />
    
    <h1> Ahwahnee Middle School </h1>
   
<p> This school is in Fresno.  There are a lot of cool students, teachers and staff that work there. </p>
    
    <h3> Grades </h3>
    <p>  7th and 8th grade school </p>
    
    <h3> Electives </h3>
    <p> There are many electives at this school.  Here are some examples: </p>
    <ul>
      <li> Spanish 1 and Spanish for Native Speakers </li>
      <li> Leadership </li>
      <li> Environmental Science </li>
      <li> Computer Science and Programming </li>
      <li> Journalism </li>
      <li> Career Exploration </li>
      <li> Choir </li>
      <li> Band and Orchestra </li>
    </ul>
    
    <h3> Sports </h3>
    <p> We play all of the regular sports that most other school play like football, basketball, soccer, wrestling, baseball and softball.  We also have Track and Field and Cross Country.  We do very well in our city competitions.  We have been champions in many sports like football. 
</p>

    <h2> In Conclusion </h2>
    <p> We have a great school for many reasons like sports, electives and the great students and staff. </p>
      
  </body>
</html>​

Step 3:  Download the picture below and add it to your project. Don't change the name of the picture when you save it!

Picture

Step 4:  Add the following stylistic changes to the webpage:

1.  Make the background a dark color.
2.  Make the text appear in a color other than black or white.
3.  Resize the picture so that it's not too big or too small.
4.  Place the picture to the right of the text.
5.  Add a border to the picture with a color other than black or white.
6.  Put a background color to the paragraphs AND the list.

0 Comments



Leave a Reply.

    Author

    Mr. Vela's Daily Assignments

    Archives

    May 2019
    April 2019
    March 2019
    February 2019
    January 2019
    December 2018
    November 2018
    October 2018
    September 2018
    August 2018
    May 2018
    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    October 2017
    September 2017
    August 2017

    RSS Feed

Proudly powered by Weebly
  • Home
  • Assignments
  • Personal Website Project
  • Tutorial Videos
  • HTML Tags
  • Bookmarks
  • Keyboard Shortcuts