HTML Details

HTML Snippets Text processor File transfer

References

Used symbols:
⊗: left mouse button click, ⊗²: left mouse buttondouble click, ⊕: right mouse button click, ∇: input, ▼: select, >>: copy to

Technology

  1. Open Sublime Text (text editor )
  2. Write or paste some HTML code
  3. File (Sublime Text menu bar)▼ Save with encodingUTF-8index.htmlSave
  4. Open the saved index.html: ⊗² or ⊕ ▼ Open with ▼ {browser name}

Notes

  • Preferred encodingUTF-8 (Unicode Transformation Format).
  • Warning: “ (styled font – Arial) is not the same as ” (UTF-8).
  • Tags and attributes names are not case sensitive, but W3C recommends lowercase.
  • Any number of spaces and newlines count as only one space.
  • HTML comment begins with <!-- and ends with -->.
  • Control the layout and styling of web pages with CSS elements.

HTML Elements

Most used

<h1>Main Heading</h1> , <h2> ... </h6>
<div>Container For Content Division</div>
<p>Paragraph</p>
<br>: Line break,  <hr>: Horizontal rule
<ul><li>UnOrderedList</li>...</ul>
<ol><li>OrderedList</li>...</ol>
<a>Anchor</a>: Link
<img>: Image

Pages flow elements

block – start/end with a new line (links to w3schools.com):
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

inline – without line breaks (links to w3schools.com) :
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

Link

<a href="https://whatwg.org">WHATWG</a>

Image

<img src="images/html5.png" alt="HTML5logo">

Format gif allows animated images.

Elements by categories (links to the w3.org)

Document: boundary: <html>; metadata: <head>, <title>, <base>, <link>, <meta>, <style>, <script>; content sections: <body>, <header>, <footer>, <nav>, <h1 – h6>, <section>, <article>, <aside>; interactive:  <details>, <summary>, <dialog>

Grouping: <p>, <pre>, <div>, <hr>, quotation: <q>, <blockquote>; lists: <ul>, <ol>, <li>, <dl>, <dt>,<dd> (CSS list-style-type); tables: <table>, <caption>, <colgroup>, <col>, <tbody>, <thead>, <tfoot>, <tr>, <td> (attributes: rowspan, colspan), <th>; miscellaneous: <main>, <figure>, <figcaption>, <address>

Semantic (text level): formating: <b>, <strong>, <i>, <em>, <small>, <s>, <cite>, <dfn>, < abbr>, <time>, <code>, <var>, <samp>, <kbd>, (<sub>,<sup>), <u>, <mark>, <span>, <br>; edit: <ins>, <del>

Embeded: <picture>, <source>, <img>, <iframe src=”URL”></iframe> (display a web page within a web page), <embed>, <object>, <param>, <video>, <audio>, <track>, <map>, <area>; links: (<a>, <area>, <link>);  (<a>, <area>)

Forms: <form>, <label>, <input>, <button>, <select>, <datalist>, <optgroup>, <option>, <textarea>, <output>, <progress>, <meter>, <fieldset>, <legend>; attribtes: action, method (GET – short amounts of data; POST – sensitive informations, files)

Scripting: <script>JavaScript & jQuery</script>(dynamic/interactive page), <noscript>, <template>, <canvas>

Media:
Audio – tag: <audio> ; attributes: controls, src, type, autoplay
File format: mp3 (ogg, wav)   =>   Atribute: type=“audio/mpeg“ (audio/ogg, audio/wav)
Video – tags: <video>, <source> ; attributes: id, width, height, style
File format: mp4 (ogg, webm)   =>   Atribute: type=“video/mp4“ (video/ogg, video/webm)

Canvas: – tag: <canvas> ; attributes: controls, src, (draw graphics on a web page with JavaScript)

SVG (Scalable Vector Graphics):
<svg><geometric_shape_definition></svg>
tags: <svg> , SVG element reference: <rect>, <circle>, <elipse>, <line> , … ; attributes: stroke, stroke-width, fill

Characters

Character entities (display reserved characters in HTML)

No E Description Nm Nmb
1 non-breaking space&nbsp;&#160;
2<less than&lt;&#60;
3>greater than&gt;&#62;
4&ampersand&amp;&#38;
5double quotation mark&quot;&#34;
6single quotation mark (apostrophe)&apos;&#39;
7¢cent&cent;&#162;
8£pound&pound;&#163;
9euro&euro;&#8364;
10©copyright&copy;&#169;
11®registered trademark&reg;&#174;

UTF-8 Character Codes

Hr
Ć&#262;&Cacute;Lj&#456; 
ć&#263;&cacute;lj&#457; 
Č&#268;&Ccaron;NJ&#458; 
č&#269;&ccaron;Nj&#459; 
Đ&#272;&Dstrok;nj&#460; 
đ&#273;&dstrok;Š&#352;&Scaron;
&#452;&cacute;š&#353;&scaron;
&#453; Ž&#381;&Zcaron;
&#454; ž&#382;&zcaron;
LJ&#455;    
De
Ä&#196;&Auml;Ü&#220;&Uuml;
ä&#228;&auml;ü&#252;&uuml;
Ö&#214;&Ouml;&#7838; 
ö&#246;&ouml;ß&#223;&szlig;

Books contents

HTML and CSS: Design and Build Websites /1/
Introduction /p.2/
Ch 1: Structure /p.12/
Ch 2: Text /p.40/
Ch 3: Lists /p.62/
Ch 4: Links /p.74/
Ch 5: Images /p.94/
Ch 6: Tables /p.126/
Ch 7: Forms /p.144/
Ch 8: Extra Markup /p.176/
Ch 9: Flash, Video & Audio /p.200/
Ch 17: HTML5 Layout /p.428/

HTML5: The Missing Manual, 2nd Ed /2/
Introduction xi
Part One: Modern Markup
Ch 1: Introducing HTML5 /p.3/
Ch 2: Structuring Pages with Semantic Elements /p.37/
Ch 3: Writing More Meaningful Markup /p.75/
Ch 4: Building Better Web Forms /p.103/
Part Two: V ideo, Graphics, and Glitz
Ch 5: Audio and Video /p.143/
Ch 6: Fancy Fonts and Effects with CSS3 /p.177/
Ch 7: Responsive Web Design with CSS3 /p.221/
Ch 8: Basic Drawing with the Canvas /p.245/
Ch 9: Advanced Canvas: Interactivity and Animation /p.275/
Part Three: Building Web Apps
Ch 10: Storing Your Data /p.319/
Ch 11: Running Offline /p.355/
Ch 12: Communicating with the Web Server /p.375/
Ch 13: Geolocation, Web Workers, and History Management /p.401/

Learn to Code HTML and CSS: Develop and Style Websites /3/
Introduction /p.x/
LESSON 1 Building Your First Web Page /p.1/
LESSON 2 Getting to Know HTML /p.17/
LESSON 4 Opening the Box Model /p.53/
LESSON 5 Positioning Content /p.74/
LESSON 8 Creating Lists /p.157/
LESSON 9 Adding Media /p.178/
LESSON 10 Building Forms /p.204/
LESSON 11 Organizing Data with Tables /p.229/
LESSON 12 Writing Your Best Code /p.266/

HTML5: Pocket Reference, 5th Ed /4/

A Smarter Way to Learn HTML & CSS: Learn it faster Remember it longer /6/
Linked list of chapters /p.8/
Learn it faster. Remember it longer /p.13/
How to use this book /p.16/
90 Chapters with examples /pp.19-320/

HTML5 Canvas: Native Interactivity and Animation for the Web, 2nd Ed. /11/

Using SVG with CSS3 and HTML5: Vector Graphics for Web Design /15/

Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics /19/


HTML Snippets Text processor File transfer