Hyper text markup language basic programming slides
- 1. Hypertext markup language (HTML) • Hypertext Markup Language is the standard markup language for creating web pages and web applications. • This markup tells a web browser how to display the text, images and other forms of multimedia on a webpage. • HTML elements are represented by tags • HTML tags are of two types: Container Tag: (or Pair Tag) The first tag in a pair is the start tag, the second tag is the end tag. The end tag is written like the start tag, with a forward slash before the tag name. Start and end tags are also called opening tags and closing tags like <b> and </b>. Empty Tag: Only opening tag is used. For example, <br> or <hr>.
- 2. What do I need to create HTML? • You don't need any special equipment or software to create HTML. In fact, you probably already have everything you need. • Computer • Text or HTML editor: For example, HTML editors are Dreamweaver, SeaMonkey, Coffee Cup, TextPad etc. and text editors include Notepad (for Windows), Pico (for Linux), or Simpletext/Text Edit/TexT. • Web Browser. For example, Internet Explorer or Firefox
- 3. Html Versions • HTML 1991 • HTML 2.0 1995 • HTML 3.2 1997 • HTML 4.01 1999 • XHTML 2000 • HTML 5 2014
- 4. HTML5 • HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard. • The most interesting new API's in HTML5 are: HTML Geolocation HTML Drag and Drop HTML Local Storage HTML Application Cache HTML Web Workers HTML SSE
- 5. Browser Support • The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. • The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5. Backward Compatibility • HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. Its new features have been built on existing features and allow you to provide fallback content for older browsers. • It is suggested to detect support for individual HTML5 features using a few lines of JavaScript. New Features • HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5. • New Semantic Elements − These are like <header>, <footer>, and <section>. • Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input> tag. • Persistent Local Storage − To achieve without resorting to third-party plugins. • WebSocket − A next-generation bidirectional communication technology for web applications.
- 6. • Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). • Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript. • Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins. • Geolocation − Now visitors can choose to share their physical location with your web application. • Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics. • Drag and drop − Drag and drop the items from one location to another location on the same webpage.
- 7. HTML5 Document • The following tags have been introduced for better structure − • section − This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure. • article − This tag represents an independent piece of content of a document, such as a blog entry or newspaper article. • aside − This tag represents a piece of content that is only slightly related to the rest of the page. • header − This tag represents the header of a section. • footer − This tag represents a footer for a section and can contain information about the author, copyright information, et cetera. • nav − This tag represents a section of the document intended for navigation. • dialog − This tag can be used to mark up a conversation. • figure − This tag can be used to associate a caption together with some embedded content, such as a graphic or video.
- 8. <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>...</title> </head> <body> <header>...</header> <nav>...</nav> <article> <section> ... </section> </article> <aside>...</aside> <footer>...</footer> </body> </html>