Learning Goal #5
Students will be able to construct complex web pages and understand the purpose of every HTML element, attribute, and value that was written into their code.
PART 1: Deadlines
Read More
Below are your deadlines for Learning Goal #5: Mastering the Foundations of HTML. If you complete approximately 1.5 lessons per week, you should be able to keep up with the deadlines.
- January 11, 2019:
Getting Started – Lesson 5.0 - February 1, 2019:
5 Lessons Complete (5.1 through 5.5) - February 4, 2019:
Quarter Quiz #1 (Questions from 5.1 through 5.5 Only) - March 1, 2019:
6 Lessons Complete (5.6 through 5.11) - March 4, 2019:
Quarter Quiz #2 (Questions from 5.1 through 5.11) - March 4 to March 13, 2019:
Learning Goal Project (Grading on March 13)
REMINDER: In order to earn an A for each lesson, you need to complete each assignment within the lessons. At the end of each lesson, you will take a short quiz on eCampus and confirm that you have done all the assignments. If you only do some of the assignments, you can still do okay, but it is in your best interest to complete them all. Your grade depends on how much you get done within the time you are given.
PART 2: Overview
Read More
In Lesson 5.7, you had a chance to experiment with various sectioning elements. Those section elements, like header, nav, article, and aside, are just really good ways of organizing your content on a web page. Most of the best web pages always have a header and a footer element, but they also have a bunch of section elements in between. This lesson continues to expand on that information as you become a true master of section elements.
Below are some helpful tips and resources that you can use during and after this lesson is over.
Important Points to Remember
- Section elements are the elements used to help organize the body of an HTML document into sections, such as div, header, nav.
- Examples of how Section Elements help to organize a webpage are here, here, and here.
- Before HTML5, the main section element was the div tag, but a bunch of div tags in a single HTML document got very complicated.
- Without section elements to help organize the content, the page would look very sloppy in a browser.
PART 3: Assignments
Read More
Assignment #1 (1 Point): SoloLearn Lessons
Log into your SoloLearn account and find the Course called HTML Fundamentals. Inside of this course, watch the following lessons (you may need your headphones), but when you finish, be sure to make note of how many SoloLearn points you have earned. Points are based on how many slides you complete and how many questions you answer correctly after each slide segment.
- Header, Nav, and Footer
- Article, Section, and Aside
Assignment #2 (1 Point): Section Element ID
WordPress is one of the most popular web design platforms in the world. If you look at their home page, you’ll notice that it’s VERY simple. If you look at their source code, you’ll also notice that WordPress includes a header and a footer (you might have to use CTRL-F). Your job in this assignment is to identify a few of the elements between the header and the footer. Follow the directions below to complete this assignment.
- Step 1: Go to eCampus and find the Discussion Board topic for this post called “Between the Header and the Footer.” This is where you will explain your observations. Unfortunately, you cannot simply reply to another person’s post in order to get credit. You are welcome to comment on another person’s post if you would like, but that will not give you credit on this assignment.
- Step 2: Identify 10 complete container elements between the end of the header and the beginning of the footer in the WordPress Source Code, determine what kind of elements they are (sectional, block level, inline, etc), then explain what they do on the webpage.
- Step 3: In your post, type out each of those 10 container elements (just the opening and closing tags), type the line in the code where the elements begin, type what kind of elements they are (sectional, block level, inline), then write out a short description of what they do and how they were used on the Word Press home page. Here is an example of what you might write about a couple of the elements.
- Step 4: When you are finished, submit your post for credit.
Assignment #3 (1 Point): Design Project
In the last lesson, you built a simple web page using all the basic sectioning elements. For this design, you’ll get a little more freedom to explore W3Schools work with more complicated templates, restyling the codes, and ultimately creating a web page about the ghost city of Varosha. Follow the directions below to complete this assignment.
- Step 1: Open a new document with Notepad or Notepad++ and save it as “5-8_varosha.html” in your WD2 folder.
- Step 2: Go to the W3Schools Template page and find an interesting template that you’d like to work with for your Varosha page.
- Step 3: Do some reading about the ghost city of Varosha and begin thinking about the most important things you might want to include on a single web page.
- Step 4: Using what you know about HTML up to this point (and maybe even a little CSS), design a page of information about the ghost city of Varosha, but be prepared to share what you learned, both about Varosha and about HTML or CSS.
Assignment #4 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new design to your index page using a screenshot and a link.
Assignment #5 (1 Point): Review and Quiz
Look over the 5.8 Review Sheet. Read over the vocabulary terms. Look over the questions. Make sure you know how to answer each question. Then go to eCampus, find the quiz for Lesson 5.8, and take it. This is a way for you to show the teacher that you have finished this lesson.
If you have finished the assignments in this lesson, you will need a new password so that you can enter Lesson 5.9. Feel free to ask the teacher and don’t be afraid to raise your hand or go up to ask. If you are actually finished with a lesson, you will get an answer.