Download presentation
Presentation is loading. Please wait.
1
Ground to Roof HTML/HTML5
2
HTML? Stands for Hyper Text Markup Language
Computer language used to create web pages HTML file = text file containing markup tags such <p> Tags tell Web browser how to display a page Can have either *.htm or *.html file extension Hyper Text Markup Language Hyper Text = “Text with links to other text. Documents written as hypertext contain text that when "clicked on" by the user with a mouse, links to other documents. “ Markup = The printer's marks that indicate how a document is to appear when published. Sometimes also the editor's markings, or a graphical designer's marks to indicate positioning, fonts, styles, etc. in a "comp." HTML file is referring to a text file containing markup tags such <b> which turns text into bold type.
3
HTML Elements Example: Start tag <p> and end tag </p>
Tags are the elements that create the components of a page Tags surrounded by angle brackets < > Usually come in pairs Example: Start tag <p> and end tag </p> Stuff between is called “element content” Tags are not case sensitive New standard is to use lower case Basic components or elements of HTML are called tags.
4
Where is HTML in Web Dev/Design?
5
Web-Layer(Brower-based)
6
Birth-to-date-to-Future
Tim Berners-Lee authors HTML in 1991, assisted by his colleagues at CERN, an international scientific organization based in Geneva, Switzerland. The first version of XHTML, XHTML 1.0 became a W3C recommendation in 2000.(lowercase) ? 2020 1992 1996 2000 2004 2008 2012 2016 1990 1994 1998 2002 2006 2010 2014 2018 HTML5 was published as a Working Draft by the The World Wide Web Consortium (W3C) in Originally stated to be fully implemented by 2010, that date has been theorized to be as late as 2022. Mentioned dates could be varied a little bit on different web resources
7
Why HTML5 in AWT? One of the core tech. of Advance web Techs.
As we know web is nothing without html and version 5 is its advanced form. It comprises other technologies as: HTML5≈HTML+CSS+Javascripting An attempt to enhance the functionality and flexibility of the web A change from document markup language to a web application language.
8
What’s new & due in HTML5 HTML vs HTML5 Understood by all browsers
Finalized version Not originally built to handle video Does not support local offline storage Not built for today’s internet needs Does not support creation of a canvas for drawing No SVG(scalable Vector Graphic) support Tags mostly dependent on CSS and JavaScripting for design n dynamics . Not fully functional with all browsers Drafted not yet finallized Built for audio & video Supports local offline storage Built according to AW needs Supports creation of a canvas for Drawing SVG support with multiple dimensions and features Many awesome features included to be less dependent on CSS n JS
9
Minimal Comparison between legacy HTML and HTML5
HTML legacy HTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>title</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript”src="script.js"> </script> </head> <body> ... </body> </html Watch the Differences
10
Some of the commonly used New Elements in HTML5
New Markup Elements <header>, <nav>, <aside>,<footer>… New Media Elements <audio>, <video>, <source>. <embed> The Canvas Elements <canvas> New Form Elements <datalist>, <keygen>… New Input type Attribute values Tel,search, url, , datetime, color, number…
11
HTML5 basic tag division diagram
Header Figure Navigation Image, Video, Quote, Table, etc… Aside Section Article Footer Article Footer Article Footer Footer
12
HTML 4 elements that are now obsolete in HTML5
acronym applet basefont big center dir font frame frameset Isindex Noframes Strike tt
13
Time to get our hands dirty with a bit of practical dust
Tools needed for HTML5 coding Dreamweaver CS 5.5 or later Phpstorm 8 (preferred) And Notepad by the way is here all the time
14
Future Scope Can get rid of proprietary add-ons (like Flash/Silverlight/JAVAFX) Web apps faster with better user experience Difference between desktop and web apps blurred. Standard for web applications
Similar presentations
