HTML5 Quick Markup Reference (eBook)

Wallace Jackson (Autor)

eBook Download: PDF

2016 | 1st ed.
XXV, 257 Seiten
Apress (Verlag)
978-1-4302-6536-8 (ISBN)

Infos

This book is a condensed reference for HTML5 markup. It presents the essential HTML5 elements and attributes in a well-organized format that can be used as a handy reference. HTML5 Quick Markup Reference is an HTML5 reference title covering tags and parameters central to HTML5 markup using the NetBeans 8.1 IDE. The book covers the tags used in HTML5, logically organized by topical chapters. It gets more advanced as chapters progress, covering the new media tags and file formats that are best for use with HTML5, as well as key factors regarding the data footprint optimization work process, in-lining .CSS and .JS files, and why data footprint optimization is important.

What You Will Learn:

• The tags supported in HTML5
• What comprises an HTML5 content production workflow
• Concepts and principles behind HTML5 content production
• How to install and utilize 64-bit Inkscape 0.91 for Windows, Mac OS X and Linux
• Concepts behind spline curves, strokes, fills, patterns, and rendering
• Digital illustration data formats and data footprint optimization

Who This Book Is For:

Website developers, Flash developers, user interface designers, HTML5 game designers, teachers, and educators.

Wallace Jackson has authored numerous Apress book titles, including several titles in the ever popular Apress Pro Android series, Java and JavaFX game engine development titles, digital image compositing titles, digital audio editing titles, digital video editing titles, digital illustration titles, VFX special effects titles, digital painting titles, Android 6 new media content production titles, and now JSON and HTML5 titles.

Wallace is currently the CEO of MindTaffy Design, the new media advertising agency which specializes in new media content production and digital campaign design and development, located by La Purisima State Park, in Northern Santa Barbara County, on the Point Conception Peninsula, halfway between their clientele in Silicon Valley to the North, and Hollywood, The OC, West Los Angeles, and San Diego to the South. Mind Taffy Design has created open-source, technology-based (HTML5, JavaScript, Java 9, JavaFX 9, and Android 6.0) digital new media i3D content deliverables for more than a quarter century, since January of 1991. The company's clients consist of a significant number of international brand manufacturers, including IBM, Sony, Tyco, Samsung, Dell, Epson, Nokia, TEAC, Sun Microsystems (Oracle), Micron, SGI, KDS USA, EIZO, CTX International, KFC, Nanao USA, Techmedia, EZC, and Mitsubishi Electronics, among others.

Wallace received his undergraduate BA degree in Business Economics from the University of California at Los Angeles, or UCLA, and his graduate degrees in MIS/IT, Business Information Systems Design and Implementation, from University of Southern California located in South Central Los Angeles (USC).

Wallace also received post-graduate degrees from USC, in Entrepreneurship and Marketing Strategy, and completed the USC Graduate Entrepreneurship Program. Wallace earned his two USC degrees while at USC's night-time Marshall School of Business MBA Program, which allowed him to work full-time as a COBOL and RPG-II programmer while completing his business and IT degrees.

---

This book is a condensed reference for HTML5 markup. It presents the essential HTML5 elements and attributes in a well-organized format that can be used as a handy reference. HTML5 Quick Markup Reference is an HTML5 reference title covering tags and parameters central to HTML5 markup using the NetBeans 8.1 IDE. The book covers the tags used in HTML5, logically organized by topical chapters. It gets more advanced as chapters progress, covering the new media tags and file formats that are best for use with HTML5, as well as key factors regarding the data footprint optimization work process, in-lining .CSS and .JS files, and why data footprint optimization is important.What You Will Learn:The tags supported in HTML5What comprises an HTML5 content production workflowConcepts and principles behind HTML5 content productionHow to install and utilize Inkscape for Windows, Mac OS X and LinuxConcepts behind spline curves, strokes, fills, patterns, and renderingDigital illustration data formats and data footprint optimizationWho This Book Is For:Website developers, Flash developers, user interface designers, HTML5 game designers, teachers, and educators.

Inhalt

Contents at a Glance 6
Contents 8
About the Author 18
About the Technical Reviewer 20
Acknowledgments 22
Introduction 24
Chapter 1: HTML5 History: The Past and Future of HTML Markup 27
The History of HTML: Reveal Codes Tags 27
What Is HTML5? A Definition and Syntax 28
More Syntax for HTML5: Using Comments 29
The Future of HTML: HTML5 OS and HTML 5.1 29
HTML5 Quick Reference: Tag Categories 30
Summary 30
Chapter 2: HTML5 Documents: Top-Level Document Definition 31
The HTML5 Document Definition Tags 31
The !DOCTYPE Tag: Defines HTML Document Type 31
The XHTML Document Types: XHTML 1.0 32
The HTML4 Document Types: HTML 4.01 33
The HTML Tag: Defining the Root of the Document 35
The HEAD Tag: Configuring the HTML5 Document 35
The BODY Tag: Containing the Document Content 36
Summary 37
Chapter 3: HTML5 Search Engine Optimization: Title and Meta 38
The HTML5 HEAD Tags Important for SEO 38
The TITLE Tag: Defining the HTML5 Document Title 38
The META Tag: Defining Document Characteristics 39
The BASE Tag: Configuring a URL for a Document 42
Summary 43
Chapter 4: HTML5 Referencing: Using External Links and Favicons 44
An HTML HEAD Tag to Link External Files 44
The LINK Relationship: Types of External Assets 45
Linking to an Icon: Using a Favicon in the Document Tab or App 45
Link to a Style Sheet: Using an External Style Sheet for CSS3 Style 46
Linking to an Author Profile: Putting a Face on a Search Listing 47
The LINK Tag: The Optional Link Tag Parameters 48
Summary 49
Chapter 5: HTML5 Processing: Using CSS and JavaScript 50
HTML HEAD Tags to Add Tag Processing 50
The SCRIPT Tag: Using JavaScript Programming 51
The SRC Parameter: Externalizing JavaScript Program Assets 51
The ASYNC and DEFER Parameters: JavaScript Asset Execution 53
Deferring JavaScript Processing: The < defer>
Parallel JavaScript Processing: The < async>
The CHARSET Parameter: Using a Different JS Character Set 55
The NOSCRIPT Tag Advises Users: No JS Support 55
Using SCRIPT Tags Internally: JavaScript Coding 56
The STYLE Tag: Styling HTML5 Markup Using CSS 57
Summary 58
Chapter 6: HTML5 Parameters: Using Global Tag Attributes 59
HTML Global Parameters Across All Tags 59
HTML5 Global Parameters: Advanced Attributes 60
The CONTENTEDITABLE Parameter: Can I Edit This Content? 60
The CONTEXTMENU Parameter: Context Sensitive Menuing 61
The DATA- Parameter: Custom Data Definitions for HTML5 61
The DRAGGABLE Parameter: Can I Drag This Element Around? 62
The DROPZONE Parameter: What to Do When an Element Is Dropped 62
The HIDDEN Parameter: Hide Element Content until it is Relevant 63
The SPELLCHECK Parameter: Allow Spell-checking for Content 63
The TRANSLATE Parameter: HTML5 Global Language Support 63
Pre-HTML5 Global Parameters: Legacy Attributes 64
The ACCESSKEY Parameter: Adding Keyboard Shortcut Keys 64
The CLASS Parameter: Labeling Your Elements for Use with CSS 64
The DIR Parameter: Defining the Direction of your Text 65
The ID Parameter: Identifying Your Content Elements 65
The LANG Parameter: Defining an Element’s Language 66
The STYLE Parameter: Using In-Line Stylesheet Settings 66
The TABINDEX Parameter: Tab Key Advancement Ordering 66
The TITLE Parameter: Adding a Title to your Content Element 66
Summary 67
Chapter 7: HTML5 Navigation: Using an Anchor Tag for Hypertext 68
HTML Anchor Tag Attributes: All Versions 68
Anchor Tag HTML5 Parameters: Hypertext’s HREF 69
The HREFLANG Parameter: Hypertext Link Language Support 69
The DOWNLOAD Parameter: Downloading Files Using the A Tag 70
The MEDIA Parameter: What Media Device Does a Link Support? 70
The TARGET Parameter: Where to Open a Hypertext Document 70
The REL Parameter: Define a Relationship to the Hypertext Link 71
The TYPE Parameter: MIME Types, Media Types, and File Types 74
Anchor Tag Non-HTML5 Parameters: Legacy Code 74
The CHARSET Parameter: Hypertext Link Character Set Support 74
The COORDS Parameter: Define Coordinates for Your Image Map 74
The NAME Parameter: Naming a Link (Supported Prior to HTML5) 75
The REV Parameter: Where to Open a Hypertext Document 75
The SHAPE Parameter: Define the Shapes for Your Image Maps 75
Summary 76
Chapter 8: HTML5 Multimedia: Utilizing New Media Assets 77
HTML5 New Media Support: Nine Genres 77
Digital Imagery: Using the < img>
Digital Audio: Using the < audio>
Digital Video: Using the < video>
Digital Illustration: Using the < svg>
Interactive 3D: Using a < canvas>
Digital Painting: Digital Painting using JavaScript 86
Visual Effects: Creating VFX using JavaScript 87
Web Speech: Speech Synthesis and Recognition 87
Summary 87
Chapter 9: HTML5 Organization: Document Content Hierarchy 88
HTML5 Content Organization Tags 88
Heading Level Tags: Segmenting Content Logically 89
Horizontal Rule Tag: Dividing Text Content Visually 90
The Address Tag: Specifying Address Information 91
Summary 92
Chapter 10: HTML5 Semantics: Defining Semantic Documents 93
HTML5 Semantic Content Organization 93
HTML5 Sectional Tags: Segment Content Logically 95
The SECTION Tag: Define Document Sections 95
The HEADER Tag: Define Introductory Content for the Document 96
The FOOTER Tag: Footnote Information Referencing the Content 97
HTML5 Content Type Semantic Definition Tags 98
The MAIN Tag: Defining the Top Level of the Document Content 98
The NAV Tag: Defining the Navigation UI for Your Document 99
The ARTICLE Tag: Defining Articles within an HTML5 Document 100
The ASIDE Tag: Defining Information Sidebars in Your Document 101
HTML5 Semantic New Media Figure Definition Tags 102
The FIGURE and FIGCAPTION Tags: Adding Captioned Imagery 102
HTML5 Semantic Document Detail Definition Tags 104
The DETAILS and SUMMARY Tags: Adding Pop-up Information 104
The MARK and TIME Tags: Adding More Information 105
Summary 106
Chapter 11: HTML5 Formatting: Publish Text-Based Content 107
Create HTML5 Text Content for Publishing 107
HTML5 Text Formatting: Paragraph, Pre, and Abbr 108
HTML5 Text Styling: Bold, Italics, and Underline 112
HTML5 Break Tags: Line Break and Word Break 113
HTML5 Text Size: Small, Superscript, and Subscript 115
HTML5 Text Direction: The Bidirectional Text Tags 116
HTML5 Text Quotes: Quote and Block Quote Tags 117
HTML5 Text Citations: The CITE Tag 118
HTML5 Special Circumstances Text: Other Tags 119
Summary 121
Chapter 12: HTML5 Phrase Tags: Using Non-Standard Text 122
HTML5 Phrase Tags: Special Text Content 122
HTML5 Phrase Styling: Highlighting Important Text 123
The DFN Tag: Definition Terminology for the HTML5 Document 123
The STRONG Tag: Defining Important Text and Terminology 124
The EM Tag: Emphasizing Important Text and Terminology 125
HTML5 Phrase Input Tags: Keyboard and Teletype 125
The KBD Tag: Defining Keyboard Input 126
The TT Tag: Defining Teletype Input 126
HTML5 Phrase Coding Tags: Code and Variables 126
The Code Tag: Code Sample Listings and Code Fragments 127
The SAMP Tag: Adding Sample Code Output 127
The VAR Tag: Adding Code Variables 128
Summary 128
Chapter 13: HTML5 Lists: Numbered, Bulleted, and Definition Lists 129
HTML5 List Tags: Ordered Information 129
HTML5 Stylized Lists: Ordered and Bulleted Lists 130
The LI Tag: The Core List Tag Used to Define Each List Item 130
The UL Tag: Defining and Styling an Unordered List Container 131
The OL Tag: Defining and Styling an Ordered List Container 132
HTML5 Description Lists: Lists of Terms with Data 133
The DL Tag: Defining the Description List Parent Container 134
The DT Tag: Defining Each Description Term Child Element 135
The DD Tag: Defining Each Description Data Child Element 135
Summary 135
Chapter 14: HTML5 Tables: Constructing Data in a Tabular Format 136
HTML5 Table Tags: Tabular Information 136
Top Level HTML Table Creation: Table and Caption 137
The TABLE Tag: The Core Tag Used to Create the Table Element 137
The CAPTION Tag: Adding a Caption to Your Table 139
HTML5 Table Content Definition: TR, TH, and TD 140
The TH Tag: Defining the Table Heading Cells in the Table Row 140
Complex Table Definition: THEAD, TBODY, TFOOT 142
The THEAD Tag: Defining Each Description Term Child Element 142
The TBODY Tag: Defining Each Description Data Child Element 143
The TFOOT Tag: Defining Each Description Data Child Element 144
Table Column Definition: COL and COLGROUP 145
Summary 146
Chapter 15: HTML5 Forms: Creating Forms Using HTML5 Tags 147
HTML5 Form Tags: Interactive Information 147
Basic HTML Form Creation: Form, Label, and Input 148
The FORM Tag: The Core Tag Used to Create the Form Element 148
The INPUT Tag: Adding Data Input Fields to the Form 150
The LABEL Tag: Fixed Text Label Definitions for Input Elements 154
HTML Form Content Groups: TextArea or FieldSet 155
The TEXTAREA Tag: Define a Block or Paragraph of Text Input 155
The FIELDSET Tag: Grouping Data Fields and Input Controls 156
The LEGEND Tag: Adding a Legend to the Field Set Groupings 157
HTML Form Option Selection: Select and Option 158
The SELECT and OPTION Tags: Defining Drop-Down Lists 158
The OPTGROUP Tags: Grouping the Drop-Down List Options 160
The BUTTON Tag: Creating User Interface Buttons 160
New HTML5 Form Tags: DataList, KeyGen, Output 162
The DATALIST Tag: Defining Each Description Term Child Elem 162
The KEYGEN Tag: Defining Each Description Data Child Element 162
The OUTPUT Tag: Defining Each Description Data Child Element 163
Summary 164
Chapter 16: HTML5 Position: Document Layout and Text Spanning 165
Defining Text Spans: Using the SPAN Tag 165
Use of id, vs. Name, vs. Class 167
Identifiers: Use an id for JavaScript and Fragments 167
Classes: Use CLASS to Classify CSS3 Selectors 168
Names: Naming Forms, Controls and UI Elements 168
Define Document Areas: Using a DIV Tag 168
The DISPLAY Property: Block, In-Line, and None 169
The Division or DIV Tag: Core Properties 169
Seamless Image Stitching: Using DIVs with CSS3 170
Summary 173
Chapter 17: HTML5 Scripting: Using JavaScript and < script>
Using JavaScript: The HTML5 SCRIPT Tag 174
JavaScript Execution: Parsing Synchronization 175
JavaScript Formats: MIME Type and Character Set 176
In-Line JavaScript Code: Using the SCRIPT Tag 176
Hiding JavaScript: To Do or Not to Do? 178
HTML Comments: Use < !-- and -->
XHTML Comments: Use < !-- and -->
Summary 179
Chapter 18: HTML5 Styling: Using the < style>
Cascading Style Sheets: A History of CSS 180
Using CSS3 with HTML5: The STYLE Tag 181
CSS3 Formats: MIME or Media Type Designation 182
The SCOPED Parameter: Tag-Local HTML5 Styling 182
In-Line CSS3 Code: Using the STYLE Parameter 183
Summary 184
Chapter 19: HTML5 Real-Time Rendering: Using the < canvas>
Using the CANVAS Tag: New for HTML5 185
Declaring an HTML5 Canvas: Using Parameters 186
Drawing on a Canvas: 2D Methods and Properties 187
Interactive 3D: WebGL or WebGL 2 3D Rendering 191
The History of WebGL: Mozilla in 2006 and Opera in 2007 191
Summary 192
Chapter 20: HTML5 Plug-ins: Using the < object>
Plug-in Applications: The EMBED Tag 193
Java or JavaFX Applets: The APPLET Tag 195
Embed Objects in HTML5: The OBJECT Tag 197
Declaring Parameters: Using the PARAM Tag 199
To Embed or Not to Embed: Tag Selection 200
Summary 201
Chapter 21: HTML5 Frames: Using the < iframe>
HTML Frame Legacy: The FRAMESET and FRAME Tags 202
HTML5 Frames: Using the IFRAME Tag 203
Using Object or iFrame: More Discussion 205
Summary 206
Chapter 22: HTML5 Ruby Annotations: Using the < ruby>
Ruby Annotations: The RUBY Tag 207
Advanced Ruby Annotations: Ruby Containers 209
Summary 210
Chapter 23: HTML 5.1 Tags: Using Menu and Dialog Design Elements 211
HTML5 Application Menu: The MENU Tag 211
Populating HTML5 Menus: Using a MENUITEM Tag 212
Creating Sub-Menus: Nested MENU Tag Usage 214
HTML5 Application Dialog: A Dialog Tag 215
Summary 215
Appendix A: NetBeans: Set up an HTML5 Integrated Development IDE 216
Create a HTML Development Workstation 216
Development Workstations: Hardware Foundation 217
HTML5 Development Workstation: Open Software 218
Java 8: Installing the Foundation for NetBeans 8.1 218
NetBeans 8.1: Download the NetBeans HTML IDE 224
Summary 225
Appendix B: Eclipse: Set up an HTML5 Integrated Development IDE 226
Set up an HTML Development Workstation 226
Development Workstations: Hardware Foundation 227
HTML5 Development Workstation: Open Software 228
Java 8: Installing the Foundation for Eclipse Mars 228
Eclipse 4.5: Installing the Eclipse Mars HTML IDE 234
Summary 239
Appendix C: IntelliJ: Set up an HTML5 Integrated Development IDE 240
Set up an HTML Development Workstation 240
Development Workstations: Hardware Foundation 241
HTML Development Workstation: Open Software 242
Java 8: Installing the Foundation for IntelliJ IDEA 242
IntelliJ IDEA: Download the IntelliJ IDEA for HTML 248
Summary 255
Appendix D: Multimedia: Set up Your New Media Content Development 256
Set up a New Media Content Workstation 256
New Media Content Production: Hardware is Key! 257
New Media Content Development: Open Source 258
GIMP 2.8: Digital Image Editing and Compositing 258
Blender: 3D Modeling, Rendering, and Animation 258
Inkscape: Digital Illustration and Digital Painting 259
Audacity: Digital Audio Editing and Special Effects 260
Visual Effects: BlackMagic Design Fusion 8.0 VFX 260
Digital Video Editing: EditShare Lightworks 12.6 261
Office Productivity Suite: Apache OpenOffice 4.1.2 262
Summary 263
Index 264

Produkt-Details

• Erscheint lt. Verlag: 22.6.2016
• Zusatzinfo: XXV, 257 p. 60 illus.
• Verlagsort: Berkeley
• Sprache: englisch
• Themenwelt: Mathematik / Informatik ► Informatik ► Web / Internet
• Schlagworte: Code • CSS • HTML • HTML5 • Hypertext • JavaScript • language • Markup • Web
• ISBN-10: 1-4302-6536-1 / 1430265361
• ISBN-13: 978-1-4302-6536-8 / 9781430265368