

Learning HTML

Learning HTML

HTML Introduction

What is HTML?

HTML stands for Hyper Text Markup Language
Markup language, A markup language is a set of markup tags
Tags: describe document content
HTML documents contain HTML tags and plain text
HTML documents also called web pages

HTML Tags

<tagname>content</tagname>
opening/closing tags, or start/end tags

HTML Elements

HTML element = HTML tags + contents within

HTML Page Structure: nested

HTML Versions

Version	Year
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2012

<!DOCTYPE> Declaration

helps the browser to display a web page correctly.
Common Declarations
HTML5: <!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

for more, see DOCTYPE Reference

HTML Basic

HTML Headings

<h1> to <h6>

HTML Paragraphs

<p> and </p>

HTML Links (anchor)

<a href="http://www.w3schools.com">This is a link</a>

HTML Images

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

HTML Elements

HTML Element = start tag + Element content + end tag
Syntax
- start / opening tag, and end /closing tag
- Most HTML elements can have attributes
- some may have empty content
- can be nested
Notice
- Don’t Forget the End Tag
- Empty HTML Elements: <br> (line break) is an empty element without a closing tag
HTML Tip: Use Lowercase Tags, though it’s ** not case sensitive**

HTML Attributes

specified in the start tag
come in name/value pairs
notice: Always Quote Attribute Values, Double style quotes: most common, single style quotes: also allowed.
HTML Tag Reference
<hr>: horizontal line
 : HTML Comments, will not be rendered,
 ← Ann Lau style

Text Formatting

Text Formatting Tags
- <b>: bold, or similarly <strong>
- <i>: italic, or similarly <em>
- <sub>, <sup>: _subscripted / ^{^{superscripted}}
- <ins>: inserted text
- <mark>, <del>
Computer Output Tags
- <code>: Defines computer code text
- <kbd>: keyboard
- <samp>: sample computer code
- <var>: variable
- <pre>: preformatted text ♥
Citations, Quotations, and Definition Tags
- <abbr>: abbreviation or acronym
- <address>: contact information for the author/owner of a document
- <bdo>: HTML bidirectional override element. (text direction)
- <blockquote> : a section that is quoted from another source
- <q>: inline (short) quotation
- <cite>: defines the title of a work
- <dfn>: defines a definition term

HTML Links

#href → id
<a id="tips">Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips Section</a>

Target Attribute

specifies where to open the linked document, in a new tab or window
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML `<head>`

Head Section

defines information about the document

The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

<base>: specifies the base URL/target for all relative URLs in a page

<head>
    <base href="http://www.w3schools.com/images/" target="_blank">
</head>

<link>: defines the relationship between a document and an external resource most used to link to style sheets
```
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```

<style>: define style information, specify how HTML elements render

<head>
    <style type="text/css">
        body {background-color:yellow;}
        p {color:blue;}
    </style>
</head>

<meta>: not be displayed on the page, but will be machine parsable
- define keywords for search engines: <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
- define a description of your web page: <meta name="description" content="Free Web tutorials on HTML and CSS">
- define the author of a page: <meta name="author" content="Hege Refsnes">
- refresh document every 30 seconds: <meta http-equiv="refresh" content="30">
<script>: define a client-side script, such as a JavaScript

HTML Styles - CSS

CSS

Cascading Style Sheets

CSS can be added to HTML in the following ways:
- Inline - using the style attribute in HTML elements
- Internal - using the <style> element in the <head> section
- External - using an external CSS file
The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files
Inline Styles
- <p style="color:blue;margin-left:20px;">This is a paragraph.</p>
- Background Color: style="background-color:red;"
- Font, Color and Size: style="font-family:arial;color:red;font-size:20px;"
- Text Alignment: style="text-align:center;"

Internal Style Sheet

used if one single document has a unique style defined in the <head> section, by using the <style> tag

<head>
    <style>
        body {background-color:yellow;}
        p {color:blue;}
    </style>
</head>

External Style Sheet
- ideal when the style is applied to many pages
- <link> tag goes inside the <head> section (样式与页面是连接关系)
```
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
```

HTML Images

<img> tag is empty (contains attributes only, and no closing tag)

Syntax: <img src="url" alt="some_text">

Example: <img src="smiley.gif" alt="Smiley face" width="42" height="42">

More Options

style="float:left": float to the left, not supported in HTML5

mouse area:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
    <area shape="rect"   coords="0,0,82,126" alt="Sun" href="sun.htm">
    <area shape="circle" coords="90,58,3"    alt="Mercury" href="mercur.htm">
    <area shape="circle" coords="124,58,8"   alt="Venus" href="venus.htm">
</map>

HTML Table

Elements

<table>
<tr>: table row
<td>: table data

<th>: table heading

<table style="width:300px">
<tr>
     <td>Jill</td>
     <td>Smith</td>
     <td>50</td>
</tr>
<tr>
     <td>Eve</td>
     <td>Jackson</td>
     <td>94</td>
</tr>
</table>

<style>
    table, th, td {
        border:1px solid black;
    }
</style>

Options
- Border Attribute: <table border="1" style="width:300px">
- Text Alignment
```
th {
    text-align:left;
}
```
- Caption : <caption>

HTML List

Elements

<ol>: ordered list
<ul>: unordered list
<dl>: description list
<li>: list item
<dt>: description term (term/name in a description list)

<dd>: description description

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

<dl>
    <dt>Coffee</dt><dd>- black hot drink</dd>
    <dt>Milk</dt><dd>- white cold drink</dd>
</dl>

HTML Blocks

HTML Elements

block level elements or inline elements
block level elements
- start and end with a new line when displayed
- <h1> <p> <ul> <table> <div>
inline elments
- displayed without starting a new line
- <b> <td> <a> <img> <span>
<div>: defines a section in a document (block-level)
<span>: defines a section in a document (inline)

HTML Layouts

Using <div> elements (a shortening of division)

<div id="container" style="width:500px">
    <p></p>
    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">Main Title of Web Page</h1>
    </div>
    <p></p>
    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
        <b>Menu</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>
    <p></p>
    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        Content goes here
    </div>
    <p></p>
    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        Copyright ? W3Schools.com
    </div>
    <p></p>
</div>

div

Using <table> elements

<table width="500" border="0">
    <tr>
        <td colspan="2" style="background-color:#FFA500;">
            <h1>Main Title of Web Page</h1>
        </td>
    </tr>
    <tr>
        <td style="background-color:#FFD700;width:100px;">
            <b>Menu</b><br>HTML<br>CSS<br>JavaScript
        </td>
        <td style="background-color:#EEEEEE;height:200px;width:400px;">
            Content goes here
        </td>
    </tr>
    <tr>
        <td colspan="2" style="background-color:#FFA500;text-align:center;">
            Copyright ? W3Schools.com
        </td>
    </tr>
</table>

HTML Forms and Input

<form>

HTML forms are used to pass data to a server

<input>: most important form element

<input type="text" name="firstname">
<input type="password" name="pwd">
<input type="radio" name="sex" value="male">Male<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="button" value="Hello world!">

special input form element: submit button
- A submit button is used to send form data to a server.
- The data is sent to the page specified in the form’s action attribute.
- The file defined in the action attribute usually does something with the received input
- example:
  Username:
```
<form name="input" action="html_form_action.asp" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>
```

special input form element: drop-down list:

<form action="">
    <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>
    <option value="audi">Audi</option>
    </select>
</form>

special input form element: textarea:

<textarea rows="10" cols="30">
    The cat was playing in the garden.
</textarea>

HTML Iframes

An iframe is used to display a web page within a web page, i stands for inline

<iframe src="http://bl.ocks.org/mbostock/raw/4060366/" width="1000" height="560"></iframe>

HTML Colors, Color Names

CSS colors

using hexadecimal notation
- Hex values are written as 3 double digit numbers
- starting with a # sign
140 color names: 17 standard colors plus 123 more
- 17 standard colors black gray white red green blue orange yellow purple maroon navy olive silver lime teal fuchsia aqua
- List: Color Values

HTML Scripts: JavaScript

<script> tag: define a client-side script, such as a JavaScript, e.g. <script> document.write("Hello World!") </script>
<noscript>: provide an alternate content, <script>...</script><noscript>Sorry, Your Browser Doesn't Support It</noscript>

A Taste of JavaScript

document.write("<p>This is a paragraph</p>");
<button type="button" onclick="myFunction()">Click Me!</button>
document.getElementById("demo").style.color="#ff0000";

HTML Entities

Be replaced with character entities

Reserved characters (must be replaced)
Characters, not present on your keyboard (can be replaced)

&entity_name; or &#entity_number; e.g.

& or &, ampersand
< or <, less than
 , non breaking space
acute, grave, diacritical marks
- à, à
- á, á
- â, â
- ã, ã
ਲ ਲ਼, ਲ ਲ਼

HTML Symbols

HTML symbols

like mathematical operators, arrows, technical symbols and shapes, are not present on a normal keyboard.

can be specified by an HTML Entities name, independent of what character set
Three ways to get €
- entity name: €
- decimal reference: €
- hexadecimal reference: €
More Symbols: ∀ ∀ ∀, ∂ ∂ ∂, ∃ ∃ ∃, ∅ ∅ ∅, ∇ ∇ ∇, ∈ ∈ ∈, ∉ ∉ ∉, ∋ ∋ &ni;, ∏ ∏ ∏, ∑ ∑ ∑, α α α, β β β, γ γ γ, δ δ δ, ε ε ε, ζ ζ ζ, ← ← ←, → → →, ↑ ↑ ↑, ↓ ↓ ↓, ♣ ♣ &clubs;, ♥ ♥ &hearts;, ♦ ♦ &diams;, © © ©, ® ® ®, ™ ™ ™,
Full Refs:

HTML Encoding (Character Sets)

What is Character Encoding?

ASCII was the first character encoding standard (character set): 127
ANSI (Windows-1252), default char set for windows: 256
ISO-8859-1, an extension for ASCII, default to HTML4: 256
Unicode (UTF-8), default for HTML5, covers (almost) all the characters and symbols in the world.
The HTML charset Attribute
- HTML4: <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
- HTML5: <meta charset="UTF-8">
compatibility
- ANSI,
- IOS-8859-1,
- Unicode is identical to ASCII for the values from 0 to 127.

HTML Uniform Resource Locators

Syntax

scheme://host.domain:port/path/filename

scheme - defines the type of Internet service.http
host - defines the domain host (the default host for http is www)
domain - defines the Internet domain name, like w3schools.com
port - defs the port number at the host (default port number for http:80)
path - defines a path at the server
filename - defines the name of a document/resource

Common URL Schemes

http : HyperText Transfer Protocol
https : Secure HTTP, All information exchanged are encrypted
ftp : File Transfer Protocol
file : to access files on your own computer

URL Encoding

HTML - XHTML

What Is XHTML?

XHTML is HTML defined as an XML application
EXtensible HyperText Markup Language
Almost identical to HTML 4.01
A stricter and cleaner version of HTML
Supported by all major browsers.

Why XHTML?

XML is a markup language, where documents must be marked up correctly and “well-formed”.
By combining the strengths of HTML and XML, XHTML was developed.
XHTML is HTML redesigned as XML.

The Most Important Differences from HTML

Document Structure
- XHTML DOCTYPE is mandatory
- The XML namespace attribute in <html> is mandatory
- <html>, <head>, <title>, and <body> is mandatory
XHTML Elements
- must be properly nested
- must always be closed, even empty elements, like <br> to <br />
- must be in lowercase
- must have one root element
XHTML Attributes
- Attribute names must be in lower case
- Attribute values must be quoted, <table width="100%">
- Attribute minimization is forbidden: <input checked> to <input checked="checked">

Refs

TANG ZhiXiong, 2018. Generated by Pandoc on Travis CI. Fork Me on GitHub.

Learning HTML

2014-02-12

Learning HTML

HTML Introduction

HTML Basic

HTML <head>

HTML Styles - CSS

HTML Images

HTML Table

HTML List

HTML Blocks

HTML Layouts

HTML Forms and Input

HTML Iframes

HTML Colors, Color Names

HTML Scripts: JavaScript

HTML Entities

HTML Symbols

HTML Encoding (Character Sets)

HTML Uniform Resource Locators

HTML - XHTML

HTML `<head>`