Step 1: Learn About HTML/Tags
Tags are what makes HTML a thing. They look like this
<a href="google.com">This is Google!</a>
Would display as:
This is Google!
Almost all tags have to be opened
<tagname> before the text and closed
</tagname> after the text. Don't forget to close tags. Closing tags have a forward slash
/ before the tag name that matches the opening tag.
You can also nest tags. Here's a paragraph tag containing some text and a link:
This is a paragraph I wrote.
<a href="example.com">Click this link!</a>
Which looks like:
Hello world! This is a paragraph I wrote.
All the text inside the
<p></p> tag is the inner content or inner HTML. A tag may have no inner HTML. There is no space between the first
< and the tag name, or between any attribute,
=, and its value. In the
<a></a> tag, which is a link tag,
href is an attribute, and its value is
example.com. In this case,
href is the address the link points to. Attributes go between the
<...> of the opening tag, right after the tag name. If there are several attributes, order doesn't matter.
Between the opening and closing tags (in the inner HTML), you can have any other tags which are applied to some or all of the enclosed content.
Step 2: I Baked You Some Code
Right click on
my_resume) and open it in a text editor. Don't let it open in your browser!
For each tag you see, look up what it means. See if you can figure out how the page will be structured and how it will look.
Finally, open any of the pages in your browser. Is it like you expected? Try to match up different tags to different visible features and understand why things look how they do.
Some of the tags have a
class attribute or an
id attribute. The class attribute further describes what the tag is for, and will be used with CSS to give different formatting to tags with the same name (for example, we can make links which are supposed to be buttons look different from in-text links.)
# in the url.
Step 3: Make it Your Own
Modify the text and images in the pages to make them about you. You can add or remove pages if you want, and format them in different ways. This could be the beginning of making your very own portfolio or personal website.
It looks pretty bland right now, so if you want to learn how to make it pretty, continue with the activity on CSS.