HTML5. Rachel Henson and Miranda Hunt. What pre-requisites are there to learning this technology? What do you need to know to get

Size: px

Start display at page:

Download "HTML5. Rachel Henson and Miranda Hunt. What pre-requisites are there to learning this technology? What do you need to know to get"

Percival O’Connor’
6 years ago
Views:

1 HTML5 Rachel Henson and Miranda Hunt FAQ What pre-requisites are there to learning this technology? What do you need to know to get started? As HTML5 has evolved from HTML, it would be helpful to have a basic knowledge of HTML before beginning to learn HTML5. Some suggested topics of research include the history of HTML, why it was created and viewing the coding of HTML coded websites. Also helpful would be a list of HTML tags and examples of how they display on a web page. What is the value of this technology? Why learn this technology? As a revamped version of HTML (and an alternative to XHTML), learning and using HTML5 brings a user s basic web designing skills into the present day and makes the competitive with other up to date users. Creating or improving a website using HTML5 means that there will be less time before web pages begin to be obsolete. Is it useful for librarians? HTML5 is one of the most basic web page design technologies to learn. Learning and using HTML5 to make even basic webpages that contain book recommendations or

2 exterior links within the larger, more complicated, professionally designed of a librarian s library could be a useful way in which to implement this technology. If librarians know how to make a basic web page, then they do not have to entrust the web page manager with information that that could be lost, but instead simply provide them with the already encoded web page. In this example, it saves both parties time and effort. Is it helpful for libraries and/or archives? From the standpoint of the LIS community and its commitment to free, open and easy access, HTML5 is an important skill to have for creating and maintaining websites about libraries and archives. Many users will consult the web page of an institution before deciding to visit. Specifically for archives, without a section on the web page that details what is in the collection, or not displaying finding aids on the web page, many users will make the decision to not come to the archive at all, as browsing is not allowed in an archive like it is in a library. Many library users will consult the web page for a quick answer to a question, like book recommendations or hours of a certain department of the library. HTML5 as a skill in the LIS field is not only useful, but in some cases, it is vital. What steps are necessary to get started? As indicated above, it is helpful to have some experience with coding in HTML, as many tags and elements are the same. This experience can provide a useful platform from which to discover what s changed in HTML5 (and why). However, the changes that have been implemented in terms of structure/semantics for HTML5 mean that an individual with little to no experience coding in HTML will not necessarily be at a huge disadvantage in terms of learning

3 how to code in HTML5. The key is to obtain a good reference (book, website, etc.) and to practice; learning in this context occurs through trial and error, and the mistakes an individual makes while coding no matter how frustrating it seems at the time are vital to understanding the way the coding works and applying it in practice. New elements in HTML 5: mark time meter progress position: Structural changes in HTML 5 revolve around making tags based on content over page header (in HTML5, the header doesn t have to be a single masthead for the page there can be multiple headers i.e. a header for each section on a page) footer (should contain information about its containing element e.g. who wrote it, copyright info, links to related content; as with header there can be multiple instances of footer on a single page, usually within multiple sections)

aside (matches the HTML concept of sidebar, but again is not position-based; should be used for tangentially related content ) nav article (used for self-contained related content; as above this is a

4 aside (matches the HTML concept of sidebar, but again is not position-based; should be used for tangentially related content ) nav article (used for self-contained related content; as above this is a semantic tag, it doesn t just apply to any old block of text) Here is a screen shot of a code page that incorporates the above elements: TextWrangler. It is useful to practice HTML5 coding in a program such as NotePad++ or

5 It is suggested that testing be done in a browser other than IE, as there are often workarounds required for this browser. The best way to get started is to watch a tutorial (preferably a screencast that demonstrates the coding in steps with a clear demonstration of how the code translates to the web page being developed); refer to a resource (see list below) for the specifics of tagging and how to achieve certain things; and, as above, practice! What resources do I need to continue learning? The following resources are valuable tools when learning to code in HTML5: HTML5 for Web Designers by Jeremy Keith (2010) HTML and CSS by Elizabeth Castro and Bruce Hyslop Eighth Edition (2014) CSS3 for Web Designers by Dan Cederholm (2010) W3Schools tutorials: HTML5 Introduction: HTML5 New Elements:

PIC 40A. Lecture 4b: New elements in HTML5. Copyright 2011 Jukka Virtanen UCLA 1 04/09/14

PIC 40A. Lecture 4b: New elements in HTML5. Copyright 2011 Jukka Virtanen UCLA 1 04/09/14 PIC 40A Lecture 4b: New elements in HTML5 04/09/14 Copyright 2011 Jukka Virtanen UCLA 1 Sectioning elements HTML 5 introduces a lot of sectioning elements. Meant to give more meaning to your pages. People