reading-notes

Intro to coding and software development.


Project maintained by Draquix Hosted on GitHub Pages — Theme by mattgraham

Reading Notes for HTML5

One major edition in HTML5 is that there are multiple block elements to replace the older multipurpos div tag. A key element of design is to create your page and display its content with a specific audience in mind. One must also consider the purpose your website is trying to fulfill. The textbook reccomends generating fictional characters from different backgrounds and intentions to guage how to aim your site towards its audience. A site map is a way to see the entirety of your website when in actuality the website is a number of different pages connected by hypertext link or JavaScript powered buttons. The home page or sometimes called “splash page” is the first users are most likely to encounter when following an outside link or search engine result. It is at the top of the site map. Next are sections on specific topics, and under them are more information on the topics. In some ways it resembles an upside down tree. A wireframe goes into greater detail by depicting the general layout of each page without actually coding it just yet. Content should start out broad and focus more into exactly what the userneeds to find, and the broader subjects should take a higher priority than narrower points of interest so as to guide users to exactly what they’re meant to find. The way elements are grouped either together or apart, in a line or scattered can be utilized as a way to direct the user’s flow of attention. Navigation through the site should be simple and as intuitive as possible in that a user should know how to get where they’re going in the site without training, documentation, or live direction.

HTML is a way to display text and images with certain formatting, and through the use of JavaScript, be interactive. HTML is implemented using tags.

<body>
    <h1> This Text Would Be Really Big </h1>
    <p> This is standard size using a P tag that stands for
    paragraph </p>
</body>

In that example, I’ve illustrated how tags work, in that there’s usually an opening tag and content within it that follows certain rules, like the h1 tag will make text very large, and is meant for headlines that grab a user’s attention quicker than smaller text. At the end of the text that is desired to be larger is the closing /h1 tag. The same characters preceeded by a slash tells the browser to stop applying that rule. Similarly the p tag is used to denote a paragraph. All of it is enclosed in the bodytag which simply refers to the main portion of the page. The body tag could be preceeded by a <header> and proceeded by a footer and those sections may or may not follow other rules. There are many more tags used in HTML, but these examples give you the general idea of how they’re structured and employed by using a hiearchy of content enclosed within beginning and /ending tags.

Back to revisions in HTML 5 as in Chapter 17 of our book, the single multi-purpose div tag has been demoted a bit and more content specific tags have been introduced. The header, footer, nav, article, and aside tags all deliver content in a way that div was used exclusively to do. They don’t all act exactly the same way as Div, they have somewhat differing default styling rules before being altered by CSS, but they serve the same function of delivering content in an attractive layout form, and also in grouping together like items, and providing a constant, stable way to navigate through a uniform site. It has also been revised in HTML5 that these sections can be included in an a tag which anchors a link to another section, page, or website.

Back to Main Page