1 / 28

HTML 5

HTML 5. 2017, Fall Pusan National University Ki-Joune Li. Making HTML documents. Editing Tools Notepad++: https://notepad-plus-plus.org atom: https://atom.io Sublime Text: https://www.sublimetext.com Validator https://validator.w3.org/#validator-by-upload. First HTML5.

ebuell
Download Presentation

HTML 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML 5 2017, Fall Pusan National University Ki-Joune Li

  2. Making HTML documents • Editing Tools • Notepad++: https://notepad-plus-plus.org • atom: https://atom.io • Sublime Text: https://www.sublimetext.com • Validator • https://validator.w3.org/#validator-by-upload

  3. First HTML5 First HTML5 Example https://www.w3schools.com/html/html_intro.asp • <!DOCTYPE html> declaration defines this document to be HTML5 • <html> element is the root element of an HTML page • <head> element contains meta information about the document • <title> element specifies a title for the document • <body> element contains the visible page content • <h1> element defines a large heading • <p> element defines a paragraph • <!-- xxxx --> comments

  4. HTML Page Structure

  5. Basic Examples Attributes • https://www.w3schools.com/html/html_basic.asp • Headings • From <h1> … </h1> to <h6> … </h6> • HTML Links – point to a URL <a href="https://www.w3schools.com">This is a link</a> <a href=“mailto:lik@pnu.kr”> mail to prof. Li</a> • HTML Images – to include image <img src="w3schools.jpg" alt="W3Schools.com" width="104"height="142" >

  6. HTML Attributes • All HTML elements can have attributes • Attributes provide additional information about an element • Attributes are always specified in the start tag • Attributes usually come in name/value pairs like: name="value“ • https://www.w3schools.com/html/html_attributes.asp • Lang Attribute - <html lang=“en-US”> • Title Attribute • href Attribute - <a href="https://www.w3schools.com">This is a link</a> • Size Attribute - <img src="w3schools.jpg" width="104" height="142“> • Alt Attribute • Void Elements – element with only attributes without markup text <img src="w3schools.jpg" width="104" height="142“/>

  7. HTML Attributes • Images as a link (hypertext) https://cdn.pixabay.com/photo/2014/11/05/20/43/brown-518324_960_720.jpg  https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_w3schools

  8. HTML head element • The HTML <head> element has nothing to do with HTML headings. • The <head> element is a container for metadata. • HTML metadata is data about the HTML document. • Metadata is not displayed. • <head> element is placed between the <html> tag and the <body> tag • In head element, • <title>, <style>, <meta>, <link>, <script>, and <base> • <title> • defines a title in the browser tab • provides a title for the page when it is added to favorites • displays a title for the page in search engine results • <style> - used to define style information for a single HTML page: • <link> - used to link to external style sheets

  9. HTML head element • <meta>- used to specify which character set is used, page description, keywords, author, and other metadata. • Character set: <meta charset="UTF-8"> • web page description: <meta name="description" content="Free Web tutorials"> • keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, JavaScript"> • the author of a page: <meta name="author" content="John Doe"> • Refresh document every 30 seconds<meta http-equiv="refresh" content="30">

  10. Special Characters • Reserved Characters in HTML • Example: instead of the less than (<) sign, we must write &lt; or &#60 • Non-breaking space (&nbsp): enforces real spaces • Special Characters

  11. Combining Diacritical Marks

  12. Symbols

  13. Other Symbols Currency: https://www.w3schools.com/charsets/ref_utf_currency.asp Arrows: https://www.w3schools.com/charsets/ref_utf_arrows.asp All Symbols: https://www.w3schools.com/charsets/ref_utf_symbols.asp

  14. Formatting Elements • Formatting elements • <b> - Bold text • <strong> - Important text • <i> - Italic text • <em> - Emphasized text • <mark> • <small> - Small text • <del> - Deleted text: • <ins> - Inserted text • <sub> - Subscript text • <sup> - Superscript text • <abbr> - abbreviations

  15. Lists • Ordered vs. Unordered Lists https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_intro • With CSS list-style-type property https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_unordered_circle • With type attribute for ordered list

  16. Lists - Others • Description List • The <dl> tag defines the description list, • the <dt> tag defines the term (name), and • the <dd> tag describes each termhttps://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_description • Nested List - https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested

  17. Tables • HTML provides <table> tag. • table row is defined with the <tr> tag. • A table header is defined with the <th> tag. By default, table headings are bold and centered. • A table data/cell is defined with the <td> tag. https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table • Border • Border line - https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_borderor https://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_collapse • Alignments • Spanning many rows or columns • Captions

  18. Table – HTML 4.0.1 vs. HTML 5

  19. Table – HTML 4.0.1 vs. HTML 5

  20. Forms • The HTML <form> element defines a form that is used to collect user input • Example - https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit • <input> element • with type attribute, for example • with name attributehttps://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_submit_id

  21. Form – More Elements • <select> element – drop-down element • selected attribute • <textarea> element – multi-line input field • <datalist> element – specifies predefined options for input element

  22. Form – Action Attribute • Action Attribute • action attribute defines the action to be performed when the form is submitted. • Normally the form data is sent to the web server when user clicks on submit button • Server is specified by action attribute e.g. /action_page.php (server side script) that handles the form data • GET/POST HTTP method • GET (default) – submitted data is in the page address field (visible) • POST – submitted data is in a separate field (not in the page address field, invisible)

  23. Form – Form Attributes

  24. Input Types Input Restrictions • HTML allows several input types • text (default) • radio • checkbox • reset • alert • More input types • color • date, month • email • number • range • search • tel • time • url • week

  25. Links • Allows to jump to another document or a specific part • HTML links – (absolute URL)<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a> • Local Links – <a href="html_images.asp">HTML Images</a> (relative URL) • Target Attributes • _blank - Opens the linked document in a new window or tab • _self - Opens the linked document in the same window/tab as it was clicked (this is default) • _parent - Opens the linked document in the parent frame • _top - Opens the linked document in the full body of the window • framename - Opens the linked document in a named frame • Bookmark - HTML bookmarks are used to allow readers to jump to specific parts of a Web page. • <h2 id="C4">Chapter 4</h2>  <a href="#C4">Jump to Chapter 4</a> • example

  26. Blocks • block level elements vs. inline elements • Block Level Elements: <div>, <h1> - <h6>, <p>, and <form> • Starts on a new line • Takes up the full width available • Inline Elements: <span>, <a>, <img> • Does not start on a new line and Takes as much width as necessary • div with class – define equal styles for elements with the same class name • examples

  27. Responsive Web Design tablet smart phones desktop • Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones). • Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen: • Using W3.CSS - example

  28. HTML Layout • <header> - Defines a header for a document or a section • <nav> - Defines a container for navigation links • <section> - Defines a section in a document • <article> - Defines an independent self-contained article • <aside> - Defines content aside from the content • <footer> - Defines a footer for a document or a section • <details> - Defines additional details • <summary> - Defines a heading for the <details> element • Websites often display content in multiple columns (like a magazine) • HTML5 offers new semantic elements that define the different parts of a web page • A Common Layout • Four Ways to create HTML Layout • HTML tables – DO NOT USE • CSS float property • CSS framework • CSS flexbox

More Related