Exploring Computer Science: Web Unit

Basic Markup

HTML uses a system of markup or tags which denote blocks of web content such as paragraphs, images, and links. An HTML block contains two main sections: a head and a body.

Add Content

Web editors automatically add a doctype section which tells your browser which web standards your html pages conform to. Below, an html page after a title, an image, and some paragraphs have been added.

<!DOCTYPE html>
<html>
	<head>
		<title>Gettysburg Address</title>
	</head>
	<body>
		<center> <img src="lincoln.jpg"> </center>
		Four score and seven years ago, our fathers brought forth
		upon this continent a new nation: conceived in liberty, and
		dedicated to the proposition that all men are created equal. Now
		we are engaged in a great civil war. . .testing whether that
		nation, or any nation so conceived and so dedicated can long
		endure. We are met on a great battlefield of that war. 
		
		We have come to dedicate a portion of that field as a final
		resting place for those who here gave their lives that that
		nation might live. It is altogether fitting and proper that we
		should do this. 
		
		But, in a larger sense, we cannot
		dedicate, we cannot consecrate, we cannot hallow this ground.
		The brave men, living and dead, who struggled here have
		consecrated it, far above our poor power to add or detract. The
		world will little note, nor long remember, what we say here, but
		it can never forget what they did here. 
		
	</body>
</html>

View Current Version

Add Styling To The Head Section

By adding a style block in the head section of your html page, you can use a kind of scripting called CSS (cascading style sheet). This allows you to customize the look of each of your html blocks.

View After Styling Has Been Added

Color Style Guide

Sample Projects

Students will create a one page website with images relevant to their lives and four or five autobiographical paragraphs. (A style section will be included in all html assignments)
Students will select a famous presidential address as the basis for a one page website. Include one or more images relevant to the speech as well as several paragraphs from the speech.
Students will select a story from a major news website as the basis for a one page website. Include one or more images relevant to the story as well as several paragraphs which summarize the story.