Scribd
Upload
334 views2 pages

4.01 College Web Page Code Activity PDF

The document provides instructions for creating a basic college web page highlighting a specific school. It includes code for the page structure and formatting. Students are directed to insert images of their chosen school, write descriptive paragraphs, and include links to the school's website and other pages. They are also told to add the school's fight song as an mp3 file. The completed code and assets are to be submitted in a folder to the teacher.

Uploaded by

Mr'Vinay Thakur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
334 views2 pages

4.01 College Web Page Code Activity PDF

The document provides instructions for creating a basic college web page highlighting a specific school. It includes code for the page structure and formatting. Students are directed to insert images of their chosen school, write descriptive paragraphs, and include links to the school's website and other pages. They are also told to add the school's fight song as an mp3 file. The completed code and assets are to be submitted in a folder to the teacher.

Uploaded by

Mr'Vinay Thakur
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

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)”)

You might also like