HTML 5

1,595 views

Published on

Published in: Technology, Design
2 Comments
2 Likes
Statistics
Notes
  • dear sir can i get to download your slides please? i want to have some of your works in my internship presentation...it would be very helpful if you could send me the ppt file in my email address: welson.scott@yahoo.com
    thanks.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ,,,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,595
On SlideShare
0
From Embeds
0
Number of Embeds
98
Actions
Shares
0
Downloads
0
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • * 07/16/96 (c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.* ##
  • HTML 5

    1. 1. HTML 5 The past, the present, the futureDoncho MinkovTechnical Trainerhttp://minkov.itTelerik Web Design Coursehttp://html5course.telerik.com
    2. 2. Table of Contents The Web Web Sites and Web Applications Hypertext Markup Language HTML Concepts HTML Document Structure HTML Common Elements Section Elements Semantic Structural Tags 2
    3. 3. Table of Contents (2) HTML Tables Complete HTML 5 Tables HTML 5 Forms Sliders and Spinboxes HTML Forms Validation Tab Index 3
    4. 4. The Web
    5. 5. How the Web Works? WWW use classical client / server architecture  HTTP is text-based request-response protocol HTTP HTTP Server response Server running Client running a Web Server Web Browser Software (IIS, Apache, etc.) 5
    6. 6. Web Sites andWeb Applications
    7. 7. Web Page Document or information resource that is suitable for the World Wide Web Can be accessed through a web browser and displayed on a monitor or mobile device This information is usually in HTML or XHTML format, and may provide navigation to other web pages via hypertext links Web pages frequently refer to other resources such as style sheets (CSS), scripts (JavaScript) and images into their final presentation 7
    8. 8. Web Site Collection of related web pages containing web resources (web pages, images, videos, CSS files, JS files or other digital assets) Common navigation between web pages A website is hosted on at least one web server Accessible via a network (such as the Internet) All publicly accessible websites collectively constitute the World Wide Web 8
    9. 9. Web Application Next level web sites High interactivity High accessibility (Cloud) Rich Internet Applications (RIA)  AJAX, Silverlight, Flash, Flex, etc. Applications are usually broken into logical chunks called "tiers"  Every tier is assigned a role Desktop-like application in the web browser Web applications on desktop (Windows 8) 9
    10. 10. Hypertext Markup Language
    11. 11. Hypertext Markup Language HTML – Hyper Text Markup Language  A notation for describing  document structure (semantic markup)  formatting (presentation markup)  Looks (looked?) like:  A Microsoft Word document The markup tags provide information about the page content structure A HTML document consists of many tags 11
    12. 12. Creating HTML Pages An HTML document must have an .htm or .html file extension HTML files can be created with text editors:  NotePad, NotePad ++, PSPad Or HTML editors (WYSIWYG Editors):  Microsoft WebMatrix  Microsoft Expression Web  Microsoft Visual Studio  Adobe Dreamweaver 12
    13. 13. HTML TerminologyTags, Attributes and Elements
    14. 14. HTML Terminology Concepts in HTML  Tags  Opening tag and closing tag  The smallest piece in HTML  Attributes  Properties of the tag  Size, color, etc…  Elements  Combination of opening, closing tag and attributes
    15. 15. HTML Tags Tags are the smallest piece in HTML Document Start with "<" and end with ">" Two kinds of tags  Opening Opening <html>  Mark the start of an <body> tag <h1>Hello Pesho!</h1> HTML element </body> </html>  Closing Closing tag  Mark the end of an HTML element  Start in "</" 15
    16. 16. Attributes Attributes are properties of HTML Elements  Used to set size, color, border, etc…  Put directly in the tags  Has value surrounded by ""  The value is always a string <!-– makes a hyperlink to Google --> <a href="http://google.com"> go to Google</a> <!-– makes a horizontal line --> <hr width="95%" size="3px"/> Some tags dont have closing tag <!-– adds an image in the web page --> <img src="images/SEB-Ninja.png"/> 16
    17. 17. Most Common Attributes There are some attributes that are common for every HTML element  Id, class, name, style And some attributes are specific  For example the attribute src of the img element  Shows the path to the image to be shown 17
    18. 18. HTML Elements HTML Elements are combination of tags and attributes  Opening tag with some or none attributes and a closing tag <a href="http://google.com"> go to Google</a> <html>…</html> 18
    19. 19. HTMLTerminology Live Demo
    20. 20. HTML Document Structure HTML Document, Doctype, Head, Body
    21. 21. HTML Document Structure Some elements are essential to each HTML Document:  html, head, body, doctype The html element  Used to mark the beginning and ending of a HTML document  All the content of the web page is inside this tag <html> … </html> 21
    22. 22. Head Element The head tag contains markup that is not visible to the user (i.e. the person using the browser)  But helps the browser to render correctly the HTML document What is in there?  Styles, scripts  Declare encodings  Etc..  The title tag - the text in the tab of a browser 22
    23. 23. Body Element and Doctype Body element Contains all the visible to the user markup  Headings, text, hyperlinks, images, etc…  Textboxes, sliders, buttons… Doctype is kind of the validator of the page  Tells the browser in which version of HTML the page is written  Most common Doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">s  HTML 5 Doctype 23
    24. 24. HTML Document Structure Live Demo
    25. 25. HTML Common Elements Used in 90% of all the sites
    26. 26. Text Formatting Text formatting tags modify the text between the opening tag and the closing tag  Ex. <b>Hello</b> makes “Hello” bold 26
    27. 27. Some Simple Tags Hyperlink Tags <a href="http://www.telerik.com/" title="Telerik">Link to Telerik Web site</a> Image Tags <img src="logo.gif" alt="logo" /> Text formatting tags This text is <em>emphasized.</em> <br />new line<br /> This one is <strong>more emphasized.</strong> 27
    28. 28. Headings and Paragraphs Heading Tags (h1 – h6) <h1>Heading 1</h1> <h2>Sub heading 2</h2> <h3>Sub heading 3</h3> Paragraph Tags <p>This is my first paragraph</p> <p>This is my second paragraph</p> Sections: div and span <div style="background: skyblue;"> This is a div</div> 28
    29. 29. Ordered Lists: <ol> Tag Create an Ordered List using <ol></ol>: <ol type="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ol> Attribute values for type are 1, A, a, I, or i 1. Apple i. Apple 2. Orange ii. Orange 3. Grapefruit iii. Grapefruit a. Apple A. Apple b. Orange I. Apple B. Orange c. Grapefruit II. Orange C. Grapefruit III. Grapefruit 29
    30. 30. Unordered Lists: <ul> Tag Create an Unordered List using <ul></ul>: <ul type="disk"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul> Attribute values for type are:  disc, circle or square • Apple o Apple  Apple • Orange o Orange  Orange • Pear o Pear  Pear 30
    31. 31. Definition lists: <dl> tag Create definition lists using <dl>  Pairs of text and associated definition; text is in <dt> tag, definition in <dd> tag <dl> <dt>HTML</dt> <dd>A markup language …</dd> <dt>CSS</dt> <dd>Language used to …</dd> </dl>  Renders without bullets  Definition is indented 31
    32. 32. HTML Common Elements Live Demo
    33. 33. Section Elements The <div> and The <span>
    34. 34. Block and Inline Elements Block elements add a line break before and after them, and expand to 100% width  <div>, <p>, <h1>, <ul> are block elements Inline elements don’t break the text before and after them  <span>, <a>, <em> are inline elements http://www.w3.org/TR/CSS2/visuren.html#block- 34
    35. 35. The <div> Tag <div> creates logical divisions within a page Block style element Used with CSS Example: div-and-span.html <div style="font-size:24px; color:red">DIV example</div> <p>This one is <span style="color:red; font- weight:bold">only a test</span>.</p> 35
    36. 36. <DIV>Live Demo
    37. 37. The <span> Tag Inline style element Useful for modifying a specific portion of text  Dont create a separate area (paragraph) in the document Makes sense only with some CSSspan.html <p>This one is <span style="color:red; font- weight:bold">only a test</span>.</p> <p>This one is another <span style="font-size:32px; font-weight:bold">TEST</span>.</p> 37
    38. 38. <SPAN>Live Demo
    39. 39. Semantic Structural Tags
    40. 40. The Structure of a Web Page A sample layout structure of a Web Page
    41. 41. The "HTML 4 and Before" Way Using divs with IDs  The IDs are needed for styling <html> <head> … </head> <body> <div id="header"> … </div> <div id="navigation"> … </div> <div id="sidebar"> … </div> <div id="content"> … </div> <div id="footer"> … </div> </body> </html> 41
    42. 42. The HTML 4 Way Live Demo
    43. 43. The HTML 5 Way In HTML 5 there are semantic tags for layout  <nav>, <header>, <footer>, <section> <html> <head> … </head> <body> <header> … </header> <nav> … </nav> <aside> … </aside> <section> … </section> <footer> … </footer> </body> </html>  Work only on newer browsers 43
    44. 44. Semantic Structural Tags Live Demo
    45. 45. Remember It is important to have the correct vision and attitude towards HTML  HTML is only about structure, not appearance  Browsers tolerate invalid HTML code and parse errors – you should not  Always think about semantics 45
    46. 46. HTML 5http://html5course.telerik.com
    47. 47. Exercises1. Write an HTML page like the following: * Use headings and divs 47
    48. 48. Exercises (2)1. Write an HTML page like the following:8. Write an HTML page looking like the PNG file named 3.Introduction.PNG. Using the <a> tag add anchors to the corresponding sections in the same page. 48
    49. 49. Exercises (3)f Create an user profile Web page Profile.html, friends page named Friends.html and info page named Info.html. Link them to one another using <a> tag 49
    50. 50. Exercises (4)1. Create a Web site like the following: See the image InetJava-site.png. 50

    ×