HTML5NotesForProfessionals.pdf

(1309 KB) Pobierz
Notes for Professionals
HTML5
HTML5
Notes for Professionals
of professional hints and tricks
100+ pages
GoalKicker.com
Free Programming Books
Disclaimer
This is an unocial free book created for educational purposes and is
not aliated with ocial HTML5 group(s) or company(s).
All trademarks and registered trademarks are
the property of their respective owners
Contents
About
................................................................................................................................................................................... 1
Chapter 1: Getting started with HTML
................................................................................................................ 2
Section 1.1: Hello World
................................................................................................................................................. 2
Chapter 2: Doctypes
.................................................................................................................................................... 4
Section 2.1: Adding the Doctype
.................................................................................................................................. 4
Section 2.2: HTML 5 Doctype
....................................................................................................................................... 4
Section 2.3: HTML 4.01 Doctypes
................................................................................................................................. 5
Section 2.4: Old Doctypes
............................................................................................................................................. 5
Chapter 3: Headings
.................................................................................................................................................... 6
Section 3.1: Using Headings
.......................................................................................................................................... 6
Chapter 4: Anchors and Hyperlinks
.................................................................................................................... 7
Section 4.1: Link to another site
.................................................................................................................................... 7
Section 4.2: Link to an anchor
...................................................................................................................................... 8
Section 4.3: Link to a page on the same site
.............................................................................................................. 8
Section 4.4: Link that dials a number
.......................................................................................................................... 8
Section 4.5: Open link in new tab/window
.................................................................................................................. 9
Section 4.6: Link that runs JavaScript
......................................................................................................................... 9
Section 4.7: Link that runs email client
...................................................................................................................... 10
Chapter 5: Tables
....................................................................................................................................................... 11
Section 5.1: Simple Table
............................................................................................................................................ 11
Section 5.2: Spanning columns or rows
.................................................................................................................... 11
Section 5.3: Column Groups
....................................................................................................................................... 12
Section 5.4: Table with thead, tbody, tfoot, and caption
......................................................................................... 13
Section 5.5: Heading scope
........................................................................................................................................ 14
Chapter 6: Lists
............................................................................................................................................................ 16
Section 6.1: Ordered List
............................................................................................................................................. 16
Section 6.2: Unordered List
........................................................................................................................................ 17
Section 6.3: Nested lists
.............................................................................................................................................. 18
Section 6.4: Description List
........................................................................................................................................ 18
Chapter 7: Text Formatting
................................................................................................................................... 20
Section 7.1: Highlighting
.............................................................................................................................................. 20
Section 7.2: Bold, Italic, and Underline
...................................................................................................................... 20
Section 7.3: Abbreviation
............................................................................................................................................ 21
Section 7.4: Inserted, Deleted, or Stricken
................................................................................................................. 21
Section 7.5: Superscript and Subscript
...................................................................................................................... 21
Chapter 8: Paragraphs
............................................................................................................................................ 23
Section 8.1: HTML Paragraphs
................................................................................................................................... 23
Chapter 9: Comments
............................................................................................................................................... 24
Section 9.1: Creating comments
................................................................................................................................. 24
Section 9.2: Conditional comments for Internet Explorer
....................................................................................... 24
Section 9.3: Commenting out whitespace between inline elements
...................................................................... 25
Chapter 10: Classes and IDs
.................................................................................................................................. 27
Section 10.1: Giving an element a class
..................................................................................................................... 27
Section 10.2: Giving an element an ID
....................................................................................................................... 28
Section 10.3: Acceptable Values
................................................................................................................................. 28
Section 10.4: Problems related to duplicated IDs
..................................................................................................... 30
Chapter 11: Data Attributes
................................................................................................................................... 31
Section 11.1: Older browsers support
......................................................................................................................... 31
Section 11.2: Data Attribute Use
................................................................................................................................. 31
Chapter 12: Linking Resources
............................................................................................................................. 32
Section 12.1: JavaScript
............................................................................................................................................... 32
Section 12.2: External CSS Stylesheet
........................................................................................................................ 33
Section 12.3: Favicon
................................................................................................................................................... 33
Section 12.4: Alternative CSS
...................................................................................................................................... 33
Section 12.5: Resource Hint: dns-prefetch, prefetch, prerender
............................................................................. 34
Section 12.6: Link 'media' attribute
............................................................................................................................ 34
Section 12.7: Prev and Next
........................................................................................................................................ 34
Section 12.8: Web Feed
............................................................................................................................................... 34
Chapter 13: Include JavaScript Code in HTML
............................................................................................. 36
Section 13.1: Handling disabled Javascript
............................................................................................................... 36
Section 13.2: Linking to an external JavaScript file
.................................................................................................. 36
Section 13.3: Directly including JavaScript code
...................................................................................................... 36
Section 13.4: Including a JavaScript file executing asynchronously
...................................................................... 36
Chapter 14: Using HTML with CSS
...................................................................................................................... 37
Section 14.1: External Stylesheet Use
......................................................................................................................... 37
Section 14.2: Internal Stylesheet
................................................................................................................................. 37
Section 14.3: Inline Style
.............................................................................................................................................. 38
Section 14.4: Multiple Stylesheets
............................................................................................................................... 38
Chapter 15: Images
.................................................................................................................................................... 39
Section 15.1: Creating an image
................................................................................................................................. 39
Section 15.2: Choosing alt text
.................................................................................................................................... 39
Section 15.3: Responsive image using the srcset attribute
..................................................................................... 40
Section 15.4: Responsive image using picture element
........................................................................................... 41
Chapter 16: Image Maps
.......................................................................................................................................... 42
Section 16.1: Introduction to Image Maps
.................................................................................................................. 42
Chapter 17: Input Control Elements
.................................................................................................................. 44
Section 17.1: Text
.......................................................................................................................................................... 44
Section 17.2: Checkbox and Radio Buttons
............................................................................................................... 45
Section 17.3: Input Validation
...................................................................................................................................... 47
Section 17.4: Color
........................................................................................................................................................ 48
Section 17.5: Password
................................................................................................................................................ 49
Section 17.6: File
........................................................................................................................................................... 49
Section 17.7: Button
..................................................................................................................................................... 50
Section 17.8: Submit
..................................................................................................................................................... 51
Section 17.9: Reset
....................................................................................................................................................... 51
Section 17.10: Hidden
................................................................................................................................................... 51
Section 17.11: Tel
........................................................................................................................................................... 51
Section 17.12: Email
...................................................................................................................................................... 52
Section 17.13: Number
.................................................................................................................................................. 52
Section 17.14: Range
.................................................................................................................................................... 52
Section 17.15: Search
.................................................................................................................................................... 52
Section 17.16: Image
..................................................................................................................................................... 52
Section 17.17: Week
...................................................................................................................................................... 53
Section 17.18: Url
.......................................................................................................................................................... 53
Section 17.19: DateTime-Local
.................................................................................................................................... 53
Section 17.20: Month
.................................................................................................................................................... 53
Section 17.21: Time
....................................................................................................................................................... 53
Section 17.22: DateTime (Global)
............................................................................................................................... 54
Section 17.23: Date
...................................................................................................................................................... 54
Chapter 18: Forms
...................................................................................................................................................... 55
Section 18.1: Submitting
............................................................................................................................................... 55
Section 18.2: Target attribute in form tag
................................................................................................................. 56
Section 18.3: Uploading Files
...................................................................................................................................... 56
Section 18.4: Grouping a few input fields
.................................................................................................................. 56
Chapter 19: Div Element
.......................................................................................................................................... 58
Section 19.1: Basic usage
............................................................................................................................................. 58
Section 19.2: Nesting
................................................................................................................................................... 58
Chapter 20: Sectioning Elements
....................................................................................................................... 60
Section 20.1: Nav Element
.......................................................................................................................................... 60
Section 20.2: Article Element
...................................................................................................................................... 61
Section 20.3: Main Element
........................................................................................................................................ 62
Section 20.4: Header Element
.................................................................................................................................... 63
Section 20.5: Footer Element
..................................................................................................................................... 63
Section 20.6: Section Element
.................................................................................................................................... 64
Chapter 21: Navigation Bars
................................................................................................................................. 65
Section 21.1: Basic Navigation Bar
............................................................................................................................. 65
Section 21.2: HTML5 Navigation Bar
......................................................................................................................... 65
Chapter 22: Label Element
..................................................................................................................................... 66
Section 22.1: About Label
............................................................................................................................................ 66
Section 22.2: Basic Use
............................................................................................................................................... 66
Chapter 23: Output Element
................................................................................................................................. 68
Section 23.1: Output Element Using For and Form Attributes
................................................................................ 68
Section 23.2: Output Element with Attributes
........................................................................................................... 68
Chapter 24: Void Elements
.................................................................................................................................... 69
Section 24.1: Void elements
........................................................................................................................................ 69
Chapter 25: Media Elements
................................................................................................................................. 70
Section 25.1: Audio
....................................................................................................................................................... 70
Section 25.2: Video
...................................................................................................................................................... 70
Section 25.3: Using `<video>` and `<audio>` element to display audio/video content
......................................... 70
Section 25.4: Video header or background
.............................................................................................................. 71
Chapter 26: Progress Element
............................................................................................................................. 72
Section 26.1: Progress
................................................................................................................................................. 72
Section 26.2: Changing the color of a progress bar
................................................................................................ 72
Section 26.3: HTML Fallback
...................................................................................................................................... 73
Chapter 27: Selection Menu Controls
............................................................................................................... 74
Section 27.1: Select Menu
............................................................................................................................................ 74
Section 27.2: Options
.................................................................................................................................................. 74
Section 27.3: Option Groups
....................................................................................................................................... 75
Section 27.4: Datalist
................................................................................................................................................... 75
Chapter 28: Embed
.................................................................................................................................................... 77
Section 28.1: Basic usage
............................................................................................................................................ 77
Section 28.2: Defining the MIME type
........................................................................................................................ 77
Chapter 29: IFrames
.................................................................................................................................................. 78
Section 29.1: Basics of an Inline Frame
..................................................................................................................... 78
Section 29.2: Sandboxing
........................................................................................................................................... 78
Section 29.3: Setting the Frame Size
......................................................................................................................... 78
Section 29.4: Using the "srcdoc" Attribute
................................................................................................................ 79
Section 29.5: Using Anchors with IFrames
................................................................................................................ 79
Chapter 30: Content Languages
......................................................................................................................... 80
Section 30.1: Base Document Language
.................................................................................................................. 80
Section 30.2: Element Language
............................................................................................................................... 80
Section 30.3: Elements with Multiple Languages
..................................................................................................... 80
Section 30.4: Regional URLs
....................................................................................................................................... 80
Section 30.5: Handling Attributes with Dierent Languages
.................................................................................. 80
Chapter 31: SVG
........................................................................................................................................................... 82
Section 31.1: Inline SVG
................................................................................................................................................ 82
Section 31.2: Embedding external SVG files in HTML
............................................................................................... 82
Section 31.3: Embedding SVG using CSS
................................................................................................................... 83
Chapter 32: Canvas
.................................................................................................................................................... 84
Section 32.1: Basic Example
........................................................................................................................................ 84
Section 32.2: Drawing two rectangles on a <canvas>
............................................................................................. 84
Chapter 33: Meta Information
.............................................................................................................................. 86
Section 33.1: Page Information
................................................................................................................................... 86
Section 33.2: Character Encoding
.............................................................................................................................. 86
Section 33.3: Robots
.................................................................................................................................................... 87
Section 33.4: Social Media
.......................................................................................................................................... 87
Section 33.5: Mobile Layout Control
.......................................................................................................................... 88
Section 33.6: Automatic Refresh
................................................................................................................................ 89
Section 33.7: Phone Number Recognition
................................................................................................................. 89
Section 33.8: Automatic redirect
................................................................................................................................ 89
Section 33.9: Web App
................................................................................................................................................ 90
Chapter 34: Marking up computer code
........................................................................................................ 91
Section 34.1: Block with <pre> and <code>
............................................................................................................... 91
Section 34.2: Inline with <code>
................................................................................................................................. 91
Chapter 35: Tabindex
................................................................................................................................................ 92
Section 35.1: Add an element to the tabbing order
................................................................................................. 92
Section 35.2: Remove an element from the tabbing order
.................................................................................... 92
Section 35.3: Define a custom tabbing order (not recommended)
....................................................................... 92
Chapter 36: Global Attributes
............................................................................................................................... 93
Section 36.1: Contenteditable Attribute
..................................................................................................................... 93
Chapter 37: Marking-up Quotes
.......................................................................................................................... 94
Section 37.1: Inline with <q>
......................................................................................................................................... 94
Section 37.2: Block with <blockquote>
...................................................................................................................... 94
Chapter 38: HTML 5 Cache
..................................................................................................................................... 96
Section 38.1: Basic Example of Html 5 cache
........................................................................................................... 96
Chapter 39: HTML Event Attributes
................................................................................................................... 97
Section 39.1: HTML Form Events
................................................................................................................................ 97
Section 39.2: Keyboard Events
.................................................................................................................................. 97
Chapter 40: Character Entities
........................................................................................................................... 98
Section 40.1: Character Entities in HTML
................................................................................................................... 98
Section 40.2: Common Special Characters
.............................................................................................................. 98
Zgłoś jeśli naruszono regulamin