Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML5 - Jeff Van Tassel
Document related concepts
Transcript
HTML5 By: Jeff Van Tassel What is it? • HTML5 is the 5 version of HTML.(3) • “HTML stands for HyperText Markup Language.” (2) • “It was developed by a collaboration between the World Wide Web Consortium (W3C) 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 1990s at CERN ( European Center of Nuclear research) (3) “In 1994 Tim Berners-Lee founded the World Wide Web Consortium (W3C) 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 W3C HTML 3.2 and 4.0 were launched. (3) In 1998 the W3C 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 W3C workshop in 2004 was presented jointly by Mozilla and Opera. The proposal was rejected and the W3C 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 HTML5 Changes to the HTML language itself are evident in HTML5. A few tags have been added to the HTML 4 standard, and a number have been taken away. However, HTML5 remains backward-compatible with HTML 4, so there's no absolute requirement to write your code in the HTML5 standard. Adapting from HTML 4 to HTML5 is probably the easiest part of moving to the complete HTML mindset. The main changes include: Semantic markup: HTML5 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: HTML5 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, HTML5 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 HTML5 Probably the biggest adjustment from HTML 4 is the changing relationship between HTML and CSS. CSS is central to the HTML5 way of thinking. In HTML5 (like in XHTML), the markup language only describes what various elements mean; CSS is used to describe how things look. Along with the HTML5 standard comes a new standard for CSS, called CSS3. It's nearly impossible to talk about HTML5 without also including CSS3 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. CSS3 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… • • • • • • JavaScript and HTML5 If HTML describes what parts of the document are, and CSS describe how these parts look, JavaScript defines how elements act. JavaScript is a full-blown programming language and a very critical part of the HTML5 point of view. A few of HTML5's most interesting features are accessible only through JavaScript. Vector graphics support: Vector-based graphics provide an interesting alternative to traditional graphics because they can be created on the fly through code. HTML5 actually has two ways to do this: through SVG (Scalable Vector Graphics) and the canvas tag. New selectors: Most JavaScript programming begins by grabbing an element by ID. HTML5 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. HTML5 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 HTML5 • Modern web development is about communication. All the technologies that make up HTML5 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 MySQL 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 HTML5. Source #4 (4) References 1. Facts About W3C (2012). Retrieved from http://www.w3.org/Consortium/facts#history 2. HTML & CSS. (2012). Retrieved from http://www.w3.org/standards/webdesign/htmlcss 3. HTML Living standard (8 June, 2012). Retrieved from http://www.whatwg.org/specs/web-apps/currentwork/multipage/introduction.html#introduction 4. Notable Changes in HTML5. (2012) Retrieved from http://www.dummies.com/howto/content/notable-changes-in-html5.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
