4.01 College Web Page Code
advertisement
4.01 College Web Page Code
Create a folder on your computer or on your flashdrive named “College Webpage (lastname)”. Key in the following code
in Notepad or Notepad++. Choose your favorite college or university then modify any text in BOLD to go along with your
choice. Go to www.colorpicker.com to provide you with the correct hexadecimal color codes for your school. Then go to
www.fightsongringtone.com/free fightsong.html to get your specific fight song. (exact directions for getting the .mp3 file
for your fight song on the back of this sheet). Save your text file as CollegeWeb_lastname_period.txt Then save an .html
file as: CollegeWeb_lastname_period.html. Submit the entire “College Webpage (lastname)” folder and its contents (3
images, 2 code files, 1 mp3 file) to Coach Lynch on your flashdrive.
<!DOCTYPE html>
<html><head>
<title>College Name here</title>
<style type="text/css">
body{background-color:#e8e8e8; color:#000000;}
header {background-color:#E80C30;}
h1 {color: #ffffff; font-family:Verdana; font-size:24px; text-align:center;}
h2 {font-family:Arial; font-size:18px; clear:both;}
p {font-family:Arial; line-height:200%;}
img {border:2px solid; margin:10px; padding:4px; max-width:100%;}
ul {float:left;}
footer {background-color:#E80C30; color:white; clear:both; text-align:center;}
div {background-color:#D4D6D9; margin:6px; padding:4px;}
</style>
</head>
<body>
<div>
<header><h1>Name of College or University</h1></header>
<h2>At a Glance</h2>
<img src="xxxxxx.jpg" alt="description" style="float:right;"> (insert a picture of a landmark at this college
or university no bigger than 300x300. Right click on the image in Chrome: Inspect Element; right click on
highlighted code; copy; paste into your code in Notepad)
<p>Include an introductory paragraph about with 4-6 sentences about the college or university. </p>
<h2>Location of school</h2>
<img src=" xxxxxx.jpg " alt=" description " style="float:left"> (insert a picture of a landmark at the
college/university that you would see on a brochure or TV commercial used to advertise it; no bigger than
300x300. Right click on the image in Chrome: Inspect Element; right click on highlighted code; copy; paste
into your code in Notepad)
<p> Include a paragraph with 4-6 sentences about the college or university… What is it near? Anything
special about this location? </p>
<h2>School Mascot</h2>
<img src=" xxxxxx.jpg " alt=" description " style="float:right"> (insert a color picture of the school mascot;
no bigger than 300x300. Right click on the image in Chrome: Inspect Element; right click on highlighted
code; copy; paste into your code in Notepad)
<p> Include a paragraph with 4-6 sentences about the school mascot. Also talk about the school colors.
</p>
<h2>Links</h2>
<ul>
<li><a href="put link here">description</a></li> (this link should take you to the school home page)
<li><a href=" put link here ">description</a></li> (this link should take you to the school admissions page)
<li><a href=" put link here ">description</a></li> (this link should take you to a campus map of the school)
<li><a href=" put link here ">description</a></li> (this link should take you to the school bookstore, a
specific athletic club or another part of campus life)
</ul>
<h2>School Fight Song</h2>
<audio controls>
<source src="filename.mp3" type="audio/mpeg">
</audio>
<br>
<footer>Put your name, date and period here</footer>
</div>
</body>
</html>
Fight song – as an mp3 file:
-go to www.fightsongringtone.com/free fightsong.html
-Search for your school, click on “preview/download”
-Right click on the actual file that plays and select “download video as” (this should open up a window to save the
file as the mp3 - - - save it in the folder your previously created “college webpage (lastname)”)
