HTML 5 By Jeff Van Tassel What is
HTML 5 By: Jeff Van Tassel
What is it? • HTML 5 is the 5 version of HTML. (3) • “HTML stands for Hyper. Text Markup Language. ” (2) • “It was developed by a collaboration between the World Wide Web Consortium (W 3 C) and the Web Hypertext Application Technology Working Group (WHATWG) and IETF. ” (3) • HTML is one of the programming languages to write web pages
History of HTML • • • HTML was first developed in the early 1990 s at CERN ( European Center of Nuclear research) (3) “In 1994 Tim Berners-Lee founded the World Wide Web Consortium (W 3 C) at MIT Laboratory of Computer Science [MIT/LCS] in collaboration with CERN, with support from DARPA and the European Commission” (1) Following the creation of W 3 C HTML 3. 2 and 4. 0 were launched. (3) In 1998 the W 3 C decided to stop the evolution of HTML and produce an XML based equivalent called XHTML (3) The continued evolution of HTML was brought up at a W 3 C workshop in 2004 was presented jointly by Mozilla and Opera. The proposal was rejected and the W 3 C staff and membership decided to continue XML instead. (3) “Shortly thereafter, Apple, Mozilla, and Opera jointly announced their intent to continue working on the effort under the umbrella of a new venue called the WHATWG. A public mailing list was created, and the draft was moved to the WHATWG site. The copyright was subsequently amended to be jointly owned by all three vendors, and to allow reuse of the specification. ” (3)
Basic HTML Structure • <HTML> • <HEAD> <TITLE>My new webpage</TITLE> </HEAD> • <BODY> (All the content of your webpage goes in here, between the <BODY> tags) </BODY> • </HTML> Taken from source #6 (6)
<HTML> • “the html element—this is the root element of the document tree and everything that follows is a descendant of that root element. ” • “If the root element exists within the context of a document that’s identified by its doctype as XHTML, then the html element also requires an xmlns (XML Namespace) attribute (this isn’t needed for HTML documents)” • “The html element breaks the document into two main sections: the head and the body. ” Comes from source #5 (5).
<head> • “The head element contains meta data—information that describes the document itself, or associates it with related resources, such as scripts and style sheets. ” • “The simple example below contains the compulsory title element, which represents the document’s title or name—essentially, it identifies what this document is. The content inside the title may be used to provide a heading that appears in the browser’s title bar, and when the user saves the page as a favorite. It’s also a very important piece of information in terms of providing a meaningful summary of the page for the search engines, which display the title content in the search results. ” Comes from source #5 (5).
<head> continued… • • In addition to the title element, the head may also contain: base defines base URLs for links or resources on the page, and target windows in which to open linked content link refers to a resource of some kind, most often to a style sheet that provides instructions about how to style the various elements on the web page meta provides additional information about the page; for example, which character encoding the page uses, a summary of the page’s content, instructions to search engines about whether or not to index content, and so on object represents a generic, multipurpose container for a media object script used either to embed or refer to an external script Style provides an area for defining embedded (page-specific) CSS styles All of these elements are optional and can appear in any order within the head. Comes from source #5 (5).
<Title> • “which represents the document’s title or name—essentially, it identifies what this document is. The content inside the title may be used to provide a heading that appears in the browser’s title bar, and when the user saves the page as a favorite. It’s also a very important piece of information in terms of providing a meaningful summary of the page for the search engines, which display the title content in the search results. ” • Is located in the head <head> Comes from source #5 (5).
<body> • “This is where the bulk of the page is contained. Everything that you can see in the browser window (or viewport) is contained inside this element, including paragraphs, lists, links, images, tables, and more. The body element has some unique attributes of its own, all of which are now deprecated, but aside from that, there’s little to say about this element. How the page looks will depend entirely upon the content that you decide to fill it with” • Comes from source #5 (5).
What’s new in HTML 5? • • Changes from HTML to HTML 5 Changes to the HTML language itself are evident in HTML 5. A few tags have been added to the HTML 4 standard, and a number have been taken away. However, HTML 5 remains backward-compatible with HTML 4, so there's no absolute requirement to write your code in the HTML 5 standard. Adapting from HTML 4 to HTML 5 is probably the easiest part of moving to the complete HTML mindset. The main changes include: Semantic markup: HTML 5 now includes new tags that describe parts of a document. Now there are dedicated tags for navigation elements, articles, sections, headers, and footers. New form elements: HTML 5 forms have some major updates. There are several new versions of the <input> element, allowing users to pick colors, numbers, e-mail addresses, and dates with easy-to-use elements. Media elements: At long last, HTML 5 has native support for audio and video with tags similar to the <img> tag. canvas tag: The canvas tag allows the programmer to build graphics interactively. This capability will allow for very intriguing capabilities like custom gaming and interface elements. Source #4 (4)
What’s New continued… • • The relationship between CSS and HTML 5 Probably the biggest adjustment from HTML 4 is the changing relationship between HTML and CSS is central to the HTML 5 way of thinking. In HTML 5 (like in XHTML), the markup language only describes what various elements mean; CSS is used to describe how things look. Along with the HTML 5 standard comes a new standard for CSS, called CSS 3. It's nearly impossible to talk about HTML 5 without also including CSS 3 because they're so closely related. Here are the main new features: Embedded font support: With this long-awaited tool, you can include a font with a web page, and it will render even if the user doesn't have the font installed on her operating system. New selectors: Selectors are used to describe a chunk of code to be modified. CSS 3 now supports new selectors that let you choose every other element, as well as specific sub-elements (different types of input tags, for example). Columns: HTML has never had decent support for columns, and all kinds of hacks have been used to overcome this shortcoming. Finally, CSS includes the ability to break an element into any number of columns easily. Visual enhancements: CSS has a number of interesting new capabilities: transparency, shadows, rounded corners, animations, gradients, and transformations. These provide a profound new level of control over the appearance of a page. Source #4 (4)
What’s New continued… • • • Java. Script and HTML 5 If HTML describes what parts of the document are, and CSS describe how these parts look, Java. Script defines how elements act. Java. Script is a full-blown programming language and a very critical part of the HTML 5 point of view. A few of HTML 5's most interesting features are accessible only through Java. Script. Vector graphics support: Vector-based graphics provide an interesting alternative to traditional graphics because they can be created on the fly through code. HTML 5 actually has two ways to do this: through SVG (Scalable Vector Graphics) and the canvas tag. New selectors: Most Java. Script programming begins by grabbing an element by ID. HTML 5 now allows you to select elements by tag name, or by the same mechanisms you use to select elements in CSS. Local storage mechanisms: Previous versions of HTML allowed very limited storage of information on the client. HTML 5 now allows the developer to store data on the client. There is even a built-in database manager that accepts SQL commands. Geolocation: This interesting feature uses a variety of mechanisms to determine where the user is located. Source 4(4)
• Server technologies and HTML 5 • Modern web development is about communication. All the technologies that make up HTML 5 reside in the web browser, which is an important part of the web. However, an equally important part of web development is a raft of technologies that live on the web server. Many of the most interesting things happening today use technologies like PHP or ASP to run programs that create web pages or use database programs like Oracle or My. SQL to manage large amounts of data. The advent of AJAX has made integration between those technologies and the browser much easier. You can expect to use a host of other applications and technologies in tandem with HTML 5. Source #4 (4)
References 1. Facts About W 3 C (2012). Retrieved from http: //www. w 3. org/Consortium/facts#history 2. HTML & CSS. (2012). Retrieved from http: //www. w 3. org/standards/webdesign/htmlcss 3. HTML Living standard (8 June, 2012). Retrieved from http: //www. whatwg. org/specs/web -apps/current-work/multipage/introduction. html#introduction 4. Notable Changes in HTML 5. (2012) Retrieved from http: //www. dummies. com/howto/content/notable-changes-in-html 5. Sitepoint. (2012). Basic Structure of a Web Page. Retrieved from http: //reference. sitepoint. com/html/page-structure 6. Storm, John. (n. d. ). Creating your first page Retrieved from http: //www. jonstorm. com/html/struct. htm
- Slides: 14