If your teacher added you to a repl.it classroom or a Trinket course, login to your account to access the starter code for each exercise.
If you are NOT enrolled in a repl.it classroom or Trinket course, use the editors below to complete the project.
Note
The code editors embedded in the exercises all include a Remix button in the upper right corner which will save the code to your Trinket account. For the matching repl.it code, click these links:
In the editor below, complete the index.html
file for a simple webpage:
h1
to the page that says “Why I Love Web Development”.Note
The starter code contains other HTML inside of the head
element that you
do not need to modify. Just add code for this exercise, NOT delete!
Also, when clicking on your link to make sure it works, right-click to open it in a new tab!
Next, add some semantic tags to organize and expand your HTML file. Use the same editor from Part 1.
Add <header>
tags around the h1
element.
11 12 13 | <header>
<h1>...</h1>
</header>
|
Below the h1
, add some follow-up text to expand the header
element.
This could include one or more subheadings or a short paragraph
(<p></p>
).
Below the header, add a section
element that includes a pair of
<article>
tags.
<section>
<article>
</article>
</section>
Move the ol
element from Part 1, Step 2 into the article. Add a sentence
or two to introduce the list.
Add a second article
element in the section
. Move your paragraph
from Part 1, Step 3 into this element. Also add a ul
element that lists
items you could include on your future webpage.
Create a new section
element below the first. Add an h2
heading
called “Favorite websites”, then include at least three links. (You can
re-use the link from Part 1, Step 4).
Tip
If want to be fancy, you can place the links in a list.
<ul>
<li><a href="...">Link text</a></li>
</ul>
Add a footer
element that includes the name of your school, the name of
your programming class, and the date. Place <small>
tags around the text
to reduce the size of the words.
(Optional) Look up the entity codes for some fun symbols, then scatter them around in your text.
Now add attributes to some of the tags to change the look of the text. Use the same editor from Part 1.
style="color:color_name"
to change the text color of your headings
to something other than black.<h1>
tag have a different
effect than adding it to the <header>
tag?type
attribute in the ordered list to change the bullets from
numbers to lowercase letters.style="font-family:Brush Script MT"
. Play around by trying other
font names like Helvetica
.style
attribute to align the small
text to the right edge of
the screen.The editor below contains an image and some text, which you can use to practice other useful tags and attributes.
Inside the <img>
tag, add the width="value"
or height="value"
attribute to change the size of the image. value
refers to a number of
pixels. Start with a value of 150
and then experiment by moving up and down
from there.
Note
If both width
and height
are used, the image resizes to their
values. If only one or the other is added to the img
tag, the image
will scale to keep the same proportions as the original.
The src
attribute references an image saved in the same folder as this HTML
file. You cannot see the actual folder in the embedded editor, but clicking on
the image icon in the toolbar shows that seven photos are available. Feel free
to change the number in pet_1.jpg
to change which picture gets displayed.
Warning
The src
attribute also accepts the address for any image on the web.
However, pulling images from other sites to display on your own may violate
copyright laws.
Discuss with your teacher how to properly cite or request permission to use images that don’t belong to you.
In your math and science classes, you use superscripts or subscripts to correctly express chemical or mathematical formulas.
Examples
Subscripts: 2H2 + O2 → 2H2O
Superscript: ax2 + bx + c = 0
To make characters appear smaller and below the main line of text, wrap them
with the <sub></sub>
tags. For superscripts, use the <sup></sup>
tags instead.
In the editor, add some subscripts and superscripts inside the first paragraph.
Next, replace the second set of <p>
tags with <blockquote>
. What
happens? This tag is often used to set apart quotes taken from books,
movies, plays, etc.
Sometimes, you want to display information on a webpage only when the user
clicks in a specific spot. One way to accomplish this is by using the
details
element.
Paste this code into the editor:
<details>
<p>Some text here...</p>
<p>Some more text here...</p>
<ul><em>List of items:</em>
<li>One list item</li>
</ul>
</details>
details
element do on the screen?p
element to <summary>
. What happens?details
element with a description
of how you might use it on a webpage.