To get started, copy this HTML source code into your editor:
http://steamcoded.org/lessons/webpage.html.txt
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:
1:
Add a header element, <h1>, with the following text: My Web Coding Work
The element should look like: <h1>My Web Coding Work</h1>
2:
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.
3:
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.
4:
Add a <div> element with attribute style="margin-top:25px;" (remember the closing tag, </div>)
5:
Inside the <div> element of step 6, add another <div> element with attribute class="left"
6:
Inside the <div> element of step 7, add an anchor, <a>, element with attribute href="mouse.svg"
(remember the closing tag, </a>)
7:
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" />
8:
Outside the anchor element, add a line break element: <br/>
9:
On the next line add the text: Mouse.svg
10:
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.
11:
On the next line, add a paragraph element, <p> with text as shown:
<p>Click on the image for a larger view.</p>
12:
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.
13:
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>
14:
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.
15:
Copy the code from steps 4-13, and paste below step 14, then change:
class="left"
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.
16:
Continue adding images and text to highlight any of your other work.