M2: HTML elementsClass Recap: In this module you were introduced a very important concept: writing semantic HTML which adds extra meaning to page content by using the proper HTML element. You were also introduced to the basic HTML structural elements. We spent a lot of time figuring out how to use lists. We briefly mentioned some other important elements, but we did not have time to examine these tags in depth. Please spend some time after class study the examples I gave you and learn how to use these tags.
If you are still confused about list, here is a good resource: https://css-tricks.com/almanac/properties/l/list-style/ Student Outcomes:
|
In class
1. Team activity - list
2. Using the provided Microsoft Word file, you will recreate the structure of the document using HTML. The goal of this assignment is to not emulate style, but to accurately recreate the page structure of the Word document so that it can be rendered accurately in a web browser. Use as many of the HTML elements that were covered in the module.
3. Start on your home work, create a ONE page recipe site.
2. Using the provided Microsoft Word file, you will recreate the structure of the document using HTML. The goal of this assignment is to not emulate style, but to accurately recreate the page structure of the Word document so that it can be rendered accurately in a web browser. Use as many of the HTML elements that were covered in the module.
3. Start on your home work, create a ONE page recipe site.
Critical Thinking: Why write HTML5 semantic code?
Semantics are the implied meaning of a subject. Why use semantic tags when we write our code?
Humans have to work with machines.
We write code ( a language that computers can understand ) to help computers understanding what we want, what we mean. The computers don't care about the meaning of your code, they simply interpret the code, and do what you told them to do. ( So when your code doesn't work, it is certain that it is something you are doing wrong, don't blame the computers).
There are so many debates why we bother to write semantic tags. Divya Manian wrote an article while back (2011) titled
"Our Pointless Pursuit Of Semantic Value", she argued that the benefits of using semantic tags are not worth all the trouble.
But we have to work with other human. Taking the time to write semantic code helps our fellow human who might have to check your code, and collaborate with you often to be able to decipher your code quickly. I am saying, don't over do it, but spend some time to understand the meaning of these semantic tags. If you use them appropriately it will indeed save time.
1. for you, when you have to revisit your code two moths later;
2. for me, when I have to check your code at midnight before midterm, because you panic and dial my skype number;
3. for people who want to learn from you, for people who want to or have to collaborate with you.
Most important thing to remember is that these semantic tags provide us more understanding of the structure of your page, not just the meaning of your page.
Humans have to work with machines.
We write code ( a language that computers can understand ) to help computers understanding what we want, what we mean. The computers don't care about the meaning of your code, they simply interpret the code, and do what you told them to do. ( So when your code doesn't work, it is certain that it is something you are doing wrong, don't blame the computers).
There are so many debates why we bother to write semantic tags. Divya Manian wrote an article while back (2011) titled
"Our Pointless Pursuit Of Semantic Value", she argued that the benefits of using semantic tags are not worth all the trouble.
But we have to work with other human. Taking the time to write semantic code helps our fellow human who might have to check your code, and collaborate with you often to be able to decipher your code quickly. I am saying, don't over do it, but spend some time to understand the meaning of these semantic tags. If you use them appropriately it will indeed save time.
1. for you, when you have to revisit your code two moths later;
2. for me, when I have to check your code at midnight before midterm, because you panic and dial my skype number;
3. for people who want to learn from you, for people who want to or have to collaborate with you.
Most important thing to remember is that these semantic tags provide us more understanding of the structure of your page, not just the meaning of your page.
M2 Discussion
Should designers code?
Please <click here> to participate discussion. (Participation points)
Please <click here> to participate discussion. (Participation points)
M2 Homework:
1. View the videos in M3 and complete the tasks
2. Finis your Recipe Page
Due Date:
Description:
For this assignment, we will be creating a single-page website that contains all of the information one would need to prepare a dish of your choosing.
You will need to make this recipe yourself as part of this assignment, and take your own pictures. Start out by selecting a recipe and writing down all of the steps and ingredients required to make it. Have your camera handy and take step-by-step photos that demonstrate the specifics of what you are doing as you prepare
the dish. Once you have your dish properly documented with text and photos, enjoy your delicious meal. When ready, open up a code editor of your choosing and begin building out your web page.
For this assignment, we will be creating a single-page website that contains all of the information one would need to prepare a dish of your choosing.
You will need to make this recipe yourself as part of this assignment, and take your own pictures. Start out by selecting a recipe and writing down all of the steps and ingredients required to make it. Have your camera handy and take step-by-step photos that demonstrate the specifics of what you are doing as you prepare
the dish. Once you have your dish properly documented with text and photos, enjoy your delicious meal. When ready, open up a code editor of your choosing and begin building out your web page.
- Use the tags we discussed in class to mark up your page
- Identify a structural hierarchy for your headlines using the various h tags
- Use ordered or unordered lists as necessary
- Resize all images to appropriate size and resolution
Purpose:
The purpose of this assignment is to have you start experimenting with HTML tags and get thinking about how
to use <div> layers to organize information on a page. Also utilize ordered list and/or unordered list.
The purpose of this assignment is to have you start experimenting with HTML tags and get thinking about how
to use <div> layers to organize information on a page. Also utilize ordered list and/or unordered list.
Tools:
Notepad, SimpleText, DreamWeaver, CoffeeCup, Coda2, Sublime Text (any software of your choice. )
Notepad, SimpleText, DreamWeaver, CoffeeCup, Coda2, Sublime Text (any software of your choice. )
Submission Directions:
http://yourdomain.com/AAU/wnm249/m2/index.html or if you follow the direction, your url can be "http://yourdomain.com/AAU/wnm249/m2/" without the file "index.html" name. Because the site will default to the index.html file.
- Create a directory/folder named AAU on your web server
- Create a sub-folder named wnm249
- Create a project folder inside wnm249 named m2
- Create an "images" folder inside your m2 folder, upload all your images in this "images" folder
- Name your recipe home page as index.html, upload this file to m2 directory /folder
- <click here> to post your url on homework submission discussion page (please follow m1 example when posting your work)
http://yourdomain.com/AAU/wnm249/m2/index.html or if you follow the direction, your url can be "http://yourdomain.com/AAU/wnm249/m2/" without the file "index.html" name. Because the site will default to the index.html file.
Grading Criteria:
Exceeds expectations (A/B) | Meets expectations (C) | Does not meet expectations (D/F) | |
---|---|---|---|
Content | Thorough and insightful understanding of content. | Complete understanding of content. | Shows incomplete understanding of material. Missing content. |
2pts | 1.5pts | 1pt | |
Creativity | Enthusiastically uses materials and ideas for enhancement. | Use of materials and ideas for enhancement. | Shows minimal effort for enhancement of materials and ideas. |
3pts | 2pts | 1pt | |
Technical | Excellent use of HTML and CSS. No broken links. Accessibility considered. | Good use of HTML CSS and JS. Meet technical requirement. | Site production is incomplete. Needs improvement. Site might contain missing links, missing graphics. |
3pts | 2pts | 1pt | |
Meeting Deadline | The assignment was turned in on time | The assignment was turned in late. | |
2pts | 0pt |