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
Most of what you learn with HTML is how to place content around a web page. You move images up or down. You move links left and right. You float blocks. You write text. With HTML5, you can also draw shapes and create your own designs. In this lesson, you will learn how to work with Scalable Vector Graphics (SVG) and construct shapes on a web page.
Below are some helpful tips and resources that you can use during and after this lesson is over.
Important Points to Remember
- Almost all graphics on the web are considered raster graphics. This just means they are made up of pixels on an xy grid. For example, if you enlarge a small raster graphic, you will see the pixels as a distortion.
- Vector Graphics are 2-dimensional images without the pixels.
- Scalable Vector Graphics (either as an svg element or an .svg file) are graphics written with HTML.
- SVG images have a coordinate plane (like you find in math and algebra), but the origin (0,0) begins in the top left corner.
- In the SVG coordinate plane, x moves right (horizontal) and y moves down (vertical).
- A simple SVG rectangle needs BOTH a width and height attribute.
- A simple SVG circle needs a distance across (cx attribute), a distance vertically (cy attribute), and a radius value (r attribute).
- Each unique shape requires a different set of attributes in order to make it work. Experimenting with these elements, attributes, and values is the best way to learn.
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.
- SVG
- SVG Animations & Paths
Assignment #2 (1 Point): Design Projects
Design #1
Using what you learned about SVG in SoloLearn, study a little bit more about SVG here and practice with the different things, like shape and text, you can design. When you feel ready, find out what your screen resolution is, open a new document with Notepad or Notepad++, and save it as 5-10_xmarks.html in your WD2 folder. With the svg element, create a rectangle that spans the distance of your screen resolution, draw an X across the middle, and label the four triangles so that you have a Scalable Vector Graphic that looks something like this.
Design #2
Using what you learned about SVG in SoloLearn, study a little bit more about SVG here and practice with the different shapes you can design. When you feel ready, open a new document with Notepad or Notepad++, save it as 5-10_mydrawing.html, and design your own creative SVG with any combination of at least four shapes (rect, circle, line, polyline, ellipse, etc).
Assignment #3 (1 Point): Discussion Topic
Look around the classroom and pick one of the walls you can see. Imagine that wall was a web page and you had to design it with HTML. Go to the eCampus Discussion Board, find the appropriate Discussion Topic for the lesson, and write a short, 100 word post about how you would design one of the classroom walls with HTML. Which elements would you use? How would you describe the layout? Would you add anything else to the page that isn’t on the wall to make it look nicer? Be creative with your post, but make sure you still follow the proper structure of writing.
One of the ways you can earn the point for this assignment is to respond to someone else’s post. But you still have to write 100 total words. That means, for example, that you could respond to two different people with 50 words each. More is always better, but you can simply write your own post if you find that easier.
Assignment #4 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new designs to your index page using screenshots and links.
Assignment #5 (1 Point): Review and Quiz
Look over the 5.10 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.10, 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.11. 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.