Instruction Sheet for Students
Creating an HTML Web Page
To get started, copy this HTML source code into your editor:

Save the file as webpage.html, then open it in a browser. It does not yet have any content, but does display the title in the browser tab.

An HTML document consists of an outer <html> element, with child elements <head> and <body>. The head element contains information used by the page, but not content. The content is placed inside the <body> element. Also, note the first line contains a Doctype html. This is needed to tell the browser that we are using the latest version of HTML.

The <head> element contains child elements <title> and <style>. The <title> element contains the text that appears on the browser tab.

The <style> element contains CSS styling information. Like SVG, the styles contain name:value pairs where the name and value are separated by a colon and the styling pairs are separated by a semi-colon.

Element names in the <style> element have those styles applied to all elements by that element name. For example, all <img> elements will have a style="border:thin black solid;background-color:white;"

<style> entries preceded by a dot define a class name, which can be any unique name. HTML (and/or SVG) elements can reference the defined styles by including a class attribute referencing that class name.

Adding the following content inside the <body> element:

Add a header element, <h1>, with the following text: My Web Coding Work
The element should look like: <h1>My Web Coding Work</h1>
Add a paragraph element, <p>, with the following text (remember the closing tag, </p>):
This web page highlights my coding skills. It is written in HTML. The images displayed are written in SVG. I coded it all.
Add a paragraph element, <p>, with the following text (remember the closing tag, </p>):
Coding this page taught me how to format a document in HTML, add images, and link to them. I learned enough that I can now do this on my own and teach myself as I go.
Add a <div> element with attribute style="margin-top:25px;" (remember the closing tag, </div>)
Inside the <div> element of step 6, add another <div> element with attribute class="left"
Inside the <div> element of step 7, add an anchor, <a>, element with attribute href="mouse.svg" (remember the closing tag, </a>)
Inside the anchor element of step 8, add an image, <img>, element with width, height, and src attributes as shown:
<img width="200px;" height="200px;" src="mouse.svg" />
Outside the anchor element, add a line break element: <br/>
On the next line add the text: Mouse.svg
Outside the <div class="left"> element, but inside the <div style="margin-top:25px;"> element, add the following text:
The mouse on the left was the first SVG image I coded. It taught me how to draw circles and ellipses in SVG.
On the next line, add a paragraph element, <p> with text as shown:
<p>Click on the image for a larger view.</p>
Save the file, refresh the browser, change the browser width and see that the text alignment is justified because of the body style: text-align:justify. Then, click on the image of the mouse which is linked to the mouse.svg file.
Outside the last </div>, add another <div> element as shown below. This ensures that the next elements are displayed below both the text and image.
<div style="clear:both;"> </div>
Copy the code from steps 4-13, and paste below step 13, then change:
class="left" to class="right"
mouse.svg to monkey.svg (3 places)
Change the text next to the image of the monkey to read:
The monkey on the right was the second SVG image I coded. It was drawn in SVG using circles, ellipses and used a path to draw the curved smile.
Copy the code from steps 4-13, and paste below step 14, then change:
mouse.svg to star.svg (3 places)
Change the text next to the image of the star to read:
The star on the left was my favorite. It taught me how to draw lines that make a curve and how to reuse and rotate objects in SVG.
Continue adding images and text to highlight any of your other work.