explanation video

New vocabulary: Nesting html tags:

This means to place one set of tags inside another. When nesting tags, the inside tags open and close before the outside tags close. For example,

 
        <p>The <strong>strong</strong> element is nested within the p element.</p>

Spacing:

Spacing is tricky when writing html because the browser strips out all spaces, tabs and returns and just puts in one space between words.

It will, however respond to special tags that create space such as <br>.

If you want to add spaces, one at a time, you can use the non-breaking space: "&nbsp;". &nbsp; is also known as an “entity” in html. We’ll learn more about entities in the next section.

On the w3schools website, study the entities, links, bookmark and background image tutorials in the html tutorial section.

Work closely with the examples and study the explanations of these ideas.

Read this page about backgrounds.

If you want to see an example of my work, to see how some of these new skills can be used, check out "bog candles."

More entities can be found here, or, if you prefer, you may use emojis, which are used in the same way, and are listed here.

Project 4 Due Date: Friday, 4/26/24

  1. In order to have two pages linked together, you must first have another html file in the repl.it project. I have created a second html file for you in the repl.it project ("page_two.html"). Repl.it's "Run" button always runs the file named "index.html." So you always have to start there. But you can click on a link and it will display the linked page. Try it. Now click the new link to get back. Examine the two files until you are confident that you understand how the links work.
  2. Open your html_template.html from Project 1 and examine it. If there's a lot in there you want to have in this new assignment, you can copy the whole thing and paste it into the new project's index.html. You will then have to re-create links. Or you can keep the new project's index.html and just add pieces of code.
  3. Create a nice, good-looking page, using things you know how to do, like different headings and paragraphs.
  4. You can choose your own topic if you want. If you want a suggestion, try this: do a little page about a place, somewhere in the world, that you would like to visit someday. Link out to flights to the nearest city and a hotel in the city. Then explain how to say basic sentences in the language of that country so that your users will be able to talk to the residents. This may require you to use some special characters, which you can do with html entities.
  5. This creative addition of content will help you to get full points, but don't forget to do some styling, like you learned in the last assignment. 
  6. DO NOT USE ANY CONTENT FROM project 1 OR project 3.
  7. Remember to change the title of the page in the <title> tags, so that it is more appropriate to your content.
  8. Add some small amount of content to "page_two.html." You may copy the style element from index.html.
  9. Use at least one entity or emoji (use the code) somewhere on the page.
  10. Link index.html to a third html page that you create in the repl.it project (Use the "Add files" button to the right of the word "Files."). Name the new file "page_three.html" or something that ends in .html. It doesn't have to be fancy, but please use new content, not old material. Again, you may copy the style rules from index.html.
  11. Link to a site out on the internet, somewhere. Note: If the link appears not to work when you click on it, it may be a repl.it issue. If you use the "Open in a new tab" feature, then the link will work. But otherwise, it might not.
  12. Link to a place within the same html document (Link to an element with a specified id; aka "link to a bookmark")
  13. Use a background image. This is sort-of like a link, but different. Instructions.
  14. Submit the project.

Rubric

Category minus 15 points minus 10 points minus 5 points Full points
Project Requirements Student follows all but 3 of the above instructions. Student follows all but 2 of the above instructions. Student follows all but 1 of the above instructions. Student follows all instructions, above. Page will have 3 pages, linked, each with a different title. Also an entity (or emoji), a link out to the internet, a link to a place in the same document, and a background image.
Code Quality Code doesn't run as expected and shows they did not study or understand the learning resources Code displays somewhat as expected, minimal understanding of learning resources Uses somewhat appropriate syntax and correct features. Well formatted, basic understanding of learning resources Easy to understand. Uses appropriate syntax and features to accomplish the task. Shows they studied and understood the learning resources very well
Code Style Code is very hard to read and understand, follows almost no styling guidelines, inconsistent and causes errors Code is not very readable or consistent, but follows some styling guidelines, some errors Code is fairly readable and consistent, but does not follow all styling guidelines, minimal errors Code is readable and follows all styling guidelines(style rules have their own line, indentation used well), no errors
Creativity Student does not show basic creative effort (i.e. no addition of content, text/headers/etc) Student shows minimal creativity from base requirement (i.e adds a couple things but not much) Student shows some creativity from base requirement (i.e creates some content, text/headings/etc and some nice styling) Student goes above and beyond base requirement and shows understanding of project (i.e. additional content, styling, links, etc.)