We had to learn HTML and CSS. We also had to make a website to show how HTML and CSS work.

This task helped us to learn how to make our own websites and share it with others.

Area of Interaction: ATL (approaches to learning) – this task will help us learn. We will learn how to use HTML/CSS.

Information about HTML! Elements of HTML. HTML and CSS online tutorials and references. How HTML5 documents are produced. Other modern webpages that use HTML.

How to do stuff in HTML (HW 1, 2). How to use semantic HTML (HW 3,4).

Here is Homework 1, which shows how to use basic HTML elements like headings and links.

Here is Homework 2, which shows more complex HTML elements, like lists, tables, and embedded images.

Homework 4:

Source 1 (http://diveintohtml5.info/semantics.html#new-elements): This source has A LOT of information, I can even say that it's too much. It is easy to understand it as it's written in easy English and is understandable. I understood well things about element, i mean what they mean and what are the differences between them. The source seems professional and reliable, but I personally don't like it visually. It seems messed up, I mean it's not easy for the eye to get the info. I would use this source for definitions of elements and stuff like that.

Source 2 (http://html5doctor.com/lets-talk-about-semantics/): This source has too much info so it's really boring for me to read it all. The sentences are too long and I can't really understand what they mean. The source to my mind is not reliable, some guy, whom we don't even know wrote it and I don't trust him. I wouldn't use this source, never ever ever, not in this life, no I won't use it...

Source 3 (http://html5doctor.com/downloads/h5d-sectioning-flowchart.png) This source doesn't have much information but is really nice. Everything is explained shortly adn is well understandable for eyes. Some people can understand thing easies when they see them so this source is a good one. It seems professional and reliable, I would use this site form my html because I like it very much.

Source 4 (http://www.w3.org/html/wg/drafts/html/master/sections.html) This source has much information which seems really professional, but is not written easily, I mean I don't understand everything. It has many examples and you can even copy things and place them into your notepad while doing HTML. I would use this website as i find it full of useful information and reliable.

Source 5 (http://www.w3schools.com/html/html5_semantic_elements.asp) For me, this website is the best one as it has loads of easily understandable information. It's not boring, it's full of examples and I use it every time I make HTML. It's seems professional and reliable. It's very organized, you can find information about may details in the list placed on the left side. I use this website very often and I think I'll be using it not only during this topic but later on in other subjects as well.

Homework 5:

1) http://www.apple.com/ This site uses HTML5 non-semantic elements like Div for example and it is used correctly. I like the design of the site as it grabs my attention. I would visit this website again. In fact I use it very often as I'm interested in apple product. I recommend to visit this website to everyone as it's interesting and nicely made. I would use this site as an inspiration for my final product.

2) http://en.wikipedia.org/wiki/Main_Page This site uses HTML5 semantic elements like table and non-semantic elements like div and they are used correctly. I don't like the design of this site as it's really boring and makes me vomit. I never want to use this disgusting site but the info it has is useful sometimes so I HAVE to visit it sometimes... I recommend people to use this website just to read information but they don't have to copy it for their essays as it's not useful in that way and there are billions of other sites that are better than Wikipedia.

3) http://www.buzzfeed.com/ This site uses HTML non-semantic elements as div and span. They are used correctly. I like the design of the site because it's colorful. I'd suggest my friends to visit it as it has useful and interesting info and I'll visit it myself in future.

4) http://edition.cnn.com/?refresh=1 This site uses HTML non-semantic elements as div and span. They are used correctly. I hate the design of the site because it's just boring. I never suggest my friends or anyone else to visit it unless they want to die of boredom. I will never visit this website again if Mr. Z doesn't make me do it.

5) http://www.cracked.com/ This site uses both HTML5 semantic and non-semantic elements like div-s or img-s. They are all used correctly. The design doesn't quite grab my attention but it's not too boring either. Probably I would suggest my friends to visit it and I would visit it in future as well.

Make an online design folder that shows our understanding of HTML5 and CSS. Use modern HTML methods including semantic elements to structure our document. Use CSS to make our design folder beautiful.

• written in HTML and CSS
• written ourselves, not with an HTML WYSIWYG editor or code generator
• must use HTML5 specification
• must contain each element of the design folder
• good design - attracts attention - beautiful
• readible/informative
• usable/easy to use/intuitive
• should work on a variety of browsers/platforms

• Check to make sure that we are using HTML5 semantic tags properly (http://validator.w3.org/)
• offer evidence of doing our own work: files at various stage of creation, etc.
• compare the product to our Word design folder and make sure each element is present
• show to others to get their opinion about our design, readability, ease of use
• open the product using different browsers: safari, opera, IE, firefox, chrome, mobile devices

Mr.Z