Module 2 Attributes, Images and Links | edX | Microsoft | edx Online Free Courses | W3Cx | HTML5 CSS
Meaning full Web Pages
Tags and elements are building blocks of HTML5. However, they can be made so much more exciting with attributes. Let's take a simple element like list. You know how to add one to your page but can you change the order of your list? Or change it to an alphabetically ordered list instead of a numerical list? Can you display your list in reverse order? Yes, you can do all this and more using attributes.
Apart from exploring attributes for elements, we will continue to add life to our Web page by adding images and hyperlinks and learning about how to use and place them properly in your Web page.
In this module, we will also look at creating meaningful Web pages. Imagine you are the Web page designer of an online magazine. You want to have a central article, some aside commentary, captions, a summary of your article, addresses and citations. You also want to provide more detailed information such as, 'This sentence is really important and you need to convey that to the reader'.
If we just use paragraph tags and header tags, h1 to h6, visually it might look like what you want, but only a human will be able to read and understand the page. To a browser, there is very little information except that there is text and headings in your page. How can a search engine know what is important? Does a visually impaired person have to listen to the entire page or can just jump to the article?
It is very important to style your Web pages for search engines to improve your SEO rankings and for visually impaired people who access your Web page using assistive technology like screen readers. Semantic markup enables all of this and more.
2.1 Introduction: Check out this video explaining what you'll be learning about in Module 2 - and wrap your mind around the concept of "semantic markup".
2.2 Attributes: Here you will build on to what you have already learned about attributes.
2.3 Semantic meaning: Explaining the difference between 'semantic' and 'style'.
2.4 Images: Learn how, when, and where to best utilize images in your Web pages.
2.5 Hyperlinks: They are the connections that allow the world to jump from place to place on the Web. Explore the secrets of this powerful mechanism!
2.6 Exercises - Module 2: Lets check what you've learned during Module 2.