1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
4. PHP (server side) to program the behavior of web pages

html-1. HTML5 Introduction

An HTML file is a document written in HTML language. When placed at a web server, the HTML file has a web address, url, to enable a (client) web browser to access it.

The HTML file name has the extension .html or .htm
Syntax: filename.html
Example: HTML-tutorial.html
is the filename of this tutorial.

The url is the web address
Example: Entering the following url in a web browser:
https://cis.cihe.edu.hk/Anthony-Chan/HTML-tutorial.html
will display this web page. Try it.

Example: Entering the following url in a web browser:
https://cis.cihe.edu.hk/Anthony-Chan/DE306/index.html
will display the web page of the course Network and Application Development. Try it.

Caution: do not include spaces in the filename or in the url.
Example: Entering the following url in a web browser:
https://cis.cihe.edu.hk/ Anthony-Chan / HTML-tutorial.html
will display an error. Try it.

Caution: they are case sensitive.
Example: Entering the following url in a web browser:
https://cis.cihe.edu.hk/ANTHONY-CHAN/HTML-TUTORIAL.html
will display an error. Try it.

An HTML file (filename.html) at a web server may be placed in a directory (directory_name) in the web server for better file organization, using / to indicate what is under what.
Syntax: directory_name/filename.html
Example: the above web address:
https://cis.cihe.edu.hk/Anthony-Chan/HTML-tutorial.html
indicates that HTML-tutorial is under the sub-directory Anthony-Chan and the above web address:
https://cis.cihe.edu.hk/Anthony-Chan/DE306/index.html
is under the sub-directory Anthony-Chan/DE306/.

The directories may be in a hierarchical structure.
Example: https://cis.cihe.edu.hk/Anthony-Chan/DE306/index.html
indicates that the file index.html
is under the directory DE306
which is in turn under the directory Anthony-Chan
which again is under https://cis.cihe.edu.hk/.

Read HTML Introduction at
https://www.w3schools.com/html/html_intro.asp

HTML describes the structure of a web page.

An HTML file consists of HTML elements.

An HTML element uses tags to tell the browser how to display the content.

Each HTML tag labels a piece of content such as "heading," "paragraph," etc.
syntax: <tag_name> content </tag_name>

Example:
<p>This is a paragraph</p>
will display (without the red box):

The tag is not case-sensitive, but lower case is recommended for better coding style.

Example: <P>This is a paragraph</p>
will still display (without the red box):

Multiple spaces or new lines in the contents are collapsed into one single space.

Example: <P>This    is
a paragraph</p>
will still display (without the red box):

To preserve spaces and line break, the <pre> tag may be used.

Example:
<pre> This  is
a paragraph</pre>
will display (without the red box):

This  is
a paragraph

Example: <h3>A level 3 heading displayed differently from a paragraph </h3>
will display (without the red box):

Example: <h4>A level 4 heading in smaller font than a level 3 heading </h4>
will display (without the red box):

Read and practice HTML basic at:
https://www.w3schools.com/html/html_basic.asp

html-2. Editing HTML file

html-2.1 html file

An html file is just a text file written with tags in html language and with file name extension .html ; the file name extension for a text file is usually .txt

The difference between a text file with .txt extension and the same text file with .html extension is that:
A text editor can open the text file: filename.txt or the file: filename.html to enable text editing,
whereas a web browser can only open the file with file name extension .html or .htm to display the webpage contents.

Therefore, a text editor can edit either filename.txt or filename.html (or filename.htm), but if the text editor has created the filename.txt, the file must be renamed to filename.html

If the extension is not visible, it is probably hidden. View the file property to uncheck "hide extension"

html-2.2 editor

Any text editor can be used to change the contents of the html file:
download and install Notepad++
alternative editor: ATOM available at https://atom.io
alternative editor: Visual Studio Code

html-2.3 create/edit html file

Typical steps to create an HTML file (oversimplified without head section):

1. Open Notepad++ (or your favorite text editor such as Notepad in MS Windows or TextEdit in Apple). Start writing HTML content, e.g., cut and paste the following into the text editor.
   • <!DOCTYPE html>
   • <html>
   • <body>
   • <h1>Heading</h1>
   • <p>Paragraph.</p>
   • </body>
   • </html>
2. Save the document as a file with .html extension (e.g., testing.html) using UTF-8 Encoding.
3. Open the file in a web browser to view the result.

Repeat above steps to change the contents of an html file:

• Using the text editor as in step 1 above to add or modify the HTML content.
• Save the work as in step 2 above.
• Go to the web browser that was viewing the results in step 3 above, click refresh to view the new result.

Read and practice HTML Editor at:
https://www.w3schools.com/html/html_editors.asp

html2.4 file with head section

Typical steps to create an HTML file with head section:

1. Open Notepad++ (or your favorite text editor such as Notepad in MS Windows or TextEdit in Apple). Start writing HTML content, e.g., cut and paste the following into the text editor.
   • <!DOCTYPE html>
   • <html>
   • <head>
   • <meta charset="UTF-8">
   • <meta name="viewport" content="width=device-width, initial-scale=1.0">
   • <meta name="keywords" content="enter keywords here">
   • <link rel="stylesheet" href="myfile.css">
   • <title> to appear at the top of web-browser</title>
   • </head>
   • <body>
   • <h1>Heading</h1>
   • <p>Paragraph.</p>
   • </body>
   • </html>
2. Save the document as a file with .html extension (e.g., testing.html) using UTF-8 Encoding.
3. Open the file in a web browser to view the result.

Repeat above steps to change the contents of an html file:

• Using the text editor as in step 1 above to add or modify the HTML content.
• Save the work as in step 2 above.
• Go to the web browser that was viewing the results in step 3 above, click refresh to view the new result.

html2.5 Markup validation

Markup validation service is available at http://validator.w3.org/

html-3. elements

The content of an HTML element is sandwiched between a start tag and an end tag.
syntax: <tag_name> content </tag_name>

Examples of such HTML elements are a paragraph and a heading.

Example: <p>This is a paragraph</p>
will display (without the red box):

Example: <h4>A level 4 heading example </h4>
will display (without the red box):

html-3.1 Empty HTML elements

An HTML element without content area consists of only one standalone tag, e.g., <br>, <img> which starts and closes by itself.
syntax: <standalone_tag_name>

Example: <br>

However for the specific <br> tag, alternate forms are:
<br />
or
</br>

All these three forms are the same. The / is merely a reminder that the tag has closed itself.

Example: <p>This paragraph breaks first here <br> and breaks again here <br> and then ends here.</p>
will display (without the red box):

html-3.2 Nested HTML elements

NOT nested:

An HTML element (including an empty element - one without content area) may be placed after another HTML element has closed. (They are NOT nested.)
syntax: <tag_name1> content </tag_name1> <tag_name2> content </tag_name2>

Example:
<h3>Section 1.2.3</h3>
<h4>Article 4</h4>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
will display (without the red box):

Nested:

An HTML element may also be entirely (NOT partially) contained within the content area of another (non-empty) HTML element in a nested manner.
syntax: <tag_name1> ... HTML_element2 ... </tag_name1>

where element_2 may be:

Example:
<p> <strong> Safe </strong> sex means sex <strong> saved </strong> for marriange. </p>
will display (without the red box):

Example:
<p> Make me an instrument of your peace <em> (St. Francis of Assisi) </em> </p>
will display (without the red box):

Example:
<h3>Section 1.2.3</h3>
<div style="border:3px dashed green;">
   <h4>Article 4</h4>
   <div style="background-color:yellow;">
     <p>Paragraph 1</p>
     <p>Paragraph 2</p>
   </div>
</div>
will display (without the red box):

Read and practice HTML Element at: https://www.w3schools.com/html/html_elements.asp

html-3.3 HTML Block and Inline elements

A block element starts on a new line and takes up the full width available.

Example
<p>This is a new paragraph.</p>
will display (without the red box) in a new line:

Example
<h4>This is a new heading</h4>
will display (without the red box) in a new line:

Read and practice Block Elements at: https://www.w3schools.com/html/html_blocks.asp

The HTML break element <br> causes a break to a new line. If it is placed inside the content, it causes the subsequent content to begin in a new line

Example
<p>This paragraph breaks here <br> after which the remaining paragraph continues.</p>
will display (without the red box):

Read and practice HTML <br> tag at https://www.w3schools.com/tags/tag_br.asp

When it is desired to draw a (thematic) line in addition to making a break, the HTML thematic break element is used. <hr>
Example: <p> Section 1 ends. </p> <hr> <p> Section 2 begins </p>
breaks and then displays (without the red box) a thematic line.

An inline element does not start on a new line and only takes up as much width as necessary.

Example
<p>These <strong>high-lighted words</strong> are keywords.</p>
displays (without the red box):

Example
<p>These <em>italic words </em> are emphasized.</p>
displays (without the red box):

Example
<p>These <span style="font-weight:bold;">high-lighted words</span> are keywords.</p>
displays (without the red box):

Read and practice Inline Elements at: https://www.w3schools.com/html/html_blocks.asp

html-3.4 HTML Paragraphs

An HTML paragraph element begins in a new paragraph
Example: <p>This is a new paragraph</p>
will display in a new line a paragraph which is left-justified by default unless modified:

Read and practice HTML Paragraphs and practice at:
https://www.w3schools.com/html/html_paragraphs.asp

Example of nested tag in a paragraph:
<p> The <span style="font-weight:bold;">dignity of < span style="background-color:yellow;"> every </span > human being </span > precludes the use of violence on <span style="text-decoration:underline solid red;text-transform:uppercase;"> any</span> person. </p>
will display (without the red box):

html-3.5 HTML Headings

An HTML heading begins a new heading in a new line, which by defaulted is left-justified unless modified
Example: <h4>This is a new level 4 heading</h4>
will display in a new line a heading which is left-justified by default unless modified:

There are 6 levels of HTML heading elements, from 1 to 6, in the order of decreasing font size:

<h1> Heading level 1 </h1>
will display (without the red box):

<h2> Heading level 2 </h2>
will display (without the red box):

<h3> Heading level 3 </h3>
will display (without the red box):

<h4> Heading level 4 </h4>
will display (without the red box):

<h5> Heading level 5 </h5>
will display (without the red box):

<h6> Heading level 6 </h6>
will display (without the red box):

Example:
<h1>Section 5</h1>
will display (without the red box):

Example:
<h2>Section 5.2</h2>
will display (without the red box):

Example:
<h4>Section 3.7.2.1</h4>
will display (without the red box):

Read and practice HTML Headings at:
https://www.w3schools.com/html/html_headings.asp

html-3.6 HTML Lists

The syntax for each type of lists are:
<list_tag_name>
<li> 1st list item </li>
<li> 2nd list item </li>
<li> ... </li>
<li> last list item </li>
</list_tag_name>
where the <list_tag_name> may be
<ul> for an unordered list
or
<ol> for an ordered list
or
<dl> for a description list

html-3.6.1 Unordered list

Syntax:
<ul>
<li> 1st list item </li>
<li> 2nd list item </li>
<li>... </li>
<li> last list item </li>
</ul>

Example:

Use list-style-type property of style attribute
list-style-type:disc|circle|square|none; to change the list marker.
default is disc

html-3.6.2 Ordered list

Syntax:
<ol>
<li>1st list item </li>
<li>2nd list item </li>
<li>... </li>
<li>last list item </li>
</ol>

Example:

Use type attribute
type:"1"|"A"|"a"|"I"|"i"| to change the type of marker.
type:"1", number starting with 1 is default

Use start attribute to define from where to start counting.

Syntax:
start="number"

Example:
<ol start="4" type="A">
<li> 1st list item </li>
<li> 2nd list item </li>
...
<li> last list item </li>
</ol>

Example:

html-3.6.3 Description list

Syntax:
<dl>
<dt> 1st term </dt>
<dd> 1st description </dd>
<dd> 2nd description </dd>
<dd> ... </dd>
<dt> 2nd term </dt>
<dd> 1st description </dd>
<dd> 2nd description </dd>
<dd> ... </dd>
<dt> ... </dt>
<dd> ... </dd>
</dl>

Example:

html-3.6.4 Nesting list

    <ol>
      <li>1st list item</li>
      <li>2nd list item
        <ul>
          <li>2.1 list item</li>
          <li>2.2 list item</li>
        </ul>
      </li>
      <li>3rd list item
      <li>... </li>
    </ol>
    

Example:

Use list-style-type property of style attribute
list-style-type:disc|circle|square|none; to change the list marker.
default is disc

Read and practice HTML Lists at:
https://www.w3schools.com/html/html_lists.asp

html-3.7 div versus span

Both <div> and <span> enables adding attribute to any part of the content in another HTML element. The difference being <div> starts a new line whereas <span> is inline.

html-3.8 table

An HTML table element begins with <table> and ends with </table> .

<caption> defines the table element, which may contain caption element and row elements.

<caption> defines table caption element, which is optional

<tr> defines table row element, which may contain table header cells and table cells

<th> defines table heading cell (bold and centered by default) with content in it

<td> defines table data/cell with content in it

<th> and/or <td> are nested inside <tr> which are nested in turn inside <table>

Example:

    <table>
      <caption>Table example</caption>
      <tr>
        <th>1st row 1st head cell</th>
        <th>1st row 2nd head cell</th>
      </tr>
      <tr>
        <td>1st row, 1st cell</td>
        <td>1st row, 2nd cell</td>
      </tr>
      <tr>
        <td>2nd row, 1st cell</td>
        <td>2nd row, 2nd cell</td>
      </tr>
    </table>
    

The attribute of a cell <rowspan="n> makes the cell span over n rows

The attribute of a cell <colspan="n> makes the cell span over n columns

Example:

    <table>
      <tr>
        <th rowspan="2">1st row 1st head cell spanning 2 rows</th>
        <th colspan="2">2nd row 2nd head cell spanning 2 columns</th>
      </tr>
      <tr>
        <th>2nd row 2nd head cell</th>
        <th>2nd row 3rd head cell</th>
      </tr>
      <tr>
        <td>1st row, 1st cell</td>
        <td>1st row, 2nd cell</td>
        <td>1st row, 3rd cell</td>
      </tr>
      <tr>
        <td>2nd row, 1st cell</td>
        <td>2nd row, 2nd cell</td>
        <td>2nd row, 3rd cell</td>
      </tr>
    </table>
    

html-4. structure

html-4.1 HTML basic structure

<!DOCTYPE html>
<html>
  <head>
   (Place heading html elements here)
  </head>
  <body>
   (Place body html elements here)
  </body>
</html>

html-4.2 HTML body example

<!DOCTYPE html>
<html>
  <head>
    (Place heading html elements here, e.g.:)
    <title>Title</title>
  </head>
  <body>
    (Place content html elements here, e.g.:)

<h1>Chapter 1</h1>

<p>Paragraph</p>

<h1>Chapter 2</h1>

<h2>Section 2.1</h2>

<p>Paragraph</p>

<h3>Section 2.1.1</h3>

<h3>Section 2.1.2</h3>

<h3>Section 2.1.3</h3>

<h4>Section 2.1.3.1</h4>

<h5>Section 2.1.3.1.1 </h5>

<h5>Section 2.1.3.1.2 </h5>

<h6>Section 2.1.3.1.2.1</h6>

<p>Paragraph</p>

  </body>
</html>

html-4.3 Comment

On a new line, after
<!--
comments may begin, in a single line
or in multiple lines, and may close, at the end of the comment, with
-->

html-4.4 Head

<head> may contain:
    <title>title</title>
    <style>(internal css)</style>
    <link>
    <meta>
    <script>(JavaScript)</script>
    <base>

<!DOCTYPE html>
<html>
  <head>

    <!-- Title to appear at top of browser -->
    <!-- Title to display in search engine results -->
    <title>Web page titile</title>

    <!-- define style -->
    <!-- see Internal css -->
    <style>(internal css)</style>

    <!-- define relationship to an external resource -->
    <!-- see External css -->
    <link rel="stylesheet" href="mystyle.css">

    <!-- adapting to mobile device screen size -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- may use UTF-8 character set to support multi-language characters -->
    <meta charset="utf-8">

    <!-- specify the file for stylesheet -->
    <link href="stylesheet_filename.css">

    <!-- define client-side JavaScript -->
    <!-- see JavaScript -->
    <srcript>(JavaScript)</script>

    <!-- define a default url and/or target for all relative url in a page -->
    <base href="peam.org" target="_blank">

  </head>

  <body>

  </body>
</html>


html-4.5 head meta attribute

html-4.5.1 charset

Example
    <meta charset="utf-8" content="60">


html-4.5.2 name

Syntax:
name="application-name|author|description|generator|keywords|viewport"
content="text"
with text value associated with http-equiv or name

Examples
    <!-- define a description of the web page -->
    <meta name="description" content="HTML tutorials">

    <!-- define keywords for search -->
    <meta name="keywords" content="HTML,CSS,JavaScript">

    <!-- define the author of the web page -->
    <meta name="author" content="Prof. XYZ">

    <!-- set viewport -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

html-4.5.3 http-equiv

Syntax:
http-equiv="content-security-policy|content-type|default-style|refresh"

Examples
    <!-- refresh webpage content every 60 seconds -->
    <meta http-equiv="refresh" content="60">

    <!-- redirect webpage to the url after 0 seconds -->
    <!-- Note: may cause user annoyance with "go back" -->
    <meta http-equiv="Refresh" content="0; url='https://www.w3docs.com'" />


Reference meta Tag at:
https://www.w3schools.com/tags/tag_meta.asp

html-5. attributes

All HTML elements can have attributes

An attribute of an HTML element in the form
syntax: attr_name:"value"
is specified in the start element_tag
syntax: <tag_name attr_name="value"> </tag_name>
or
syntax: <empty_tag_name attr_name="value">
to give additional information about the element.

or

Multiple attributes are separated by space

Frequently used attributes:
href="url" for use with a tag
style="property:value;"
src="filename"
width="value"
height="value"

There are many other attributes, which are listed at: HTML attribute reference.

Read and practice HTML Attributes at:
https://www.w3schools.com/html/html_attributes.asp

html-5.1 title attribute

Example using title attribute to provide additional information upon hovering
<h3 title="Artificial Intelligence"> AI </h3>
will display (without the red box) in a new line:

Please test with mouse over AI.

html-5.2 href attribute

Example

The link element uses the href attribute to provide the url.

syntax: <a href="url">Link text</a>

Example
<p>Read and practice <a href="https://www.w3schools.com/html/html_attributes.asp"> HTML Attributes</a> at:
https://www.w3schools.com/html/html_attributes.asp</p>
will display (without the red box) in a new line:

html-5.3 id attribute

The id attribute is used provide a bookmark to an HTML element.

Syntax: <tag_name id="bookmark_name">booked content </tag_name>

Example
<h3 id="html-050301">5.3.1 This heading has attribute id="html-050301"</h3>
<p>This references to <a href="#html-050302">5.3.2</a></p>
<h3 id="html-050302">5.3.2 This heading has attribute id="html-050302"</h3>
<p>This references to <a href="#html-050301">5.3.1</a></p>
will display (without the red box) in a new line:

html-5.4 src and alt

The html image: img element uses src (source) attribute to reference to an image file, and alt to specify alternative text to display when the browser cannot display the image. (see HTML Images element).

Syntax: <img src="url" alt="alternative text">.

Example:
<img src="../images/rainbar.gif" alt="a line" >
will display (without the red box) in a new line:

html-5.5 width and height

Example:

<img src="../images/rainbar.gif" width="100%" alt="a line">
will display (without the red box) in a new line:

<img src="../images/logo-caritas.jpg" width="120" alt="a line">
will display (without the red box) in a new line:

html-5.6 style attribute

Syntax with single property:
<tag style="property:value;">
Examples:
<body style="background-color:yellow;">

Syntax with multiple properties:
<tag style="property1:value1; property2:value2;">

Example:
<h1 style="color: yellow; justify-content: center;">

Syntax for property to take multiple values:
<tag style="property:value1 value2 value3;">

Example:
<div style="border:solid green 5px;">

Syntax for property to choose one value from multiple choices in order of preferences:
<tag style="property:value1,value2,value3;">

Example:
<p style="font-family: verdana, geneva, sans-serif;">

Syntax with function values:
<tag style="property:function(value1,value2,value3);">

<div style="color:rgb(0,255,255);">

Example
<h3 style="text-align:center">This is a centered heading</h3>
will display (without the red box) in a new line:

Example
<hr style="border-style:ridge;border-width:0.5em;border-color:green;">
will display (without the red box) in a new line:

html-5.7 class attribute

The use of style attribute is an in-line method to define the presentation of the element. An alternative is to define the style elsewhere either in the head section or in an external css style sheet file. Then the html file will reference to them using the class attribute.

Example: The style for the right class is defined elsewhere in the head section (see class vs id). The html may then use the style of the right class by using class attribute for an element such as paragraph.
Compare the following paragraphs without and with the use of class attribute:

<p><a href="#html-00">Return to html menu</a></p>
<p class="right"><a href="#html-00">Return to html menu</a></p><br>
will display (without the red box):

html-6. Link (Hyperlink)

The HTML link (or hyperlink) element encloses its content between a start <a> tag and an end </a> tag, where the start <a> tag contains a href attribute to point to the web address called url, of another HTML file (or of another addressable HTML element). Upon clicking/tapping this content, the web browser jumps to the other HTML file (or element).

html-6.1 absolute file path

A global url is reachable anywhere from the Internet.
syntax: <a href="url">Link text</a>
Example: <a href="https://cis.cihe.edu.hk/index.html"> School of Computing and Information Sciences</a>
will display (without the red box)

where the content is underlined to show that it is a link text. Upon clicking/touching this link, the browser go to this destination address.

html-6.2 relative file path

When referencing to another file in the same website or in the same device, the best practice is to use a relative file path from the source (current web page file) to the destination because the relative file path will continue to work when migrating the website to another server or when testing within the device with/without internet connection.
Example: the global web address (url) of this tutorial at
https://cis.cihe.edu.hk/Anthony-Chan/HTML-tutorial.html
and that of the DE306 course web page at
https://cis.cihe.edu.hk/Anthony-Chan/resources.html
shows that both files HTML-tutorial.html and resources.html
are under the same location (directory).
The relative address from this tutorial web page to the course web page may then be simply
./resources.html,
where the ./ represents the "current directory" (the location of the current tutorial file),
and may further be shortened to
resources.html.

Syntax:
file_name - is the file in the current directory
./file_name - is the file in the current directory
directory_name/file_name - is the file inside the directory
directory_1/directory_1.1/file_name - is the file inside the directory 1.1 of the directory 1
../ - is the parent directory
../../ - is the parent directory of the parent directory, etc.

Example:
<p>Please click/tap the link: <a href="./DE306/index.html">DE306</a> to jump to the course web page.</p>
will display (without the red box):

On the other hand, the url of this tutorial web page at
https://cis.cihe.edu.hk/Anthony-Chan/HTML-tutorial.html
and that of CIS School's web page at
https://cis.cihe.edu.hk/index.html
show that the html file of CIS's web page is in the parent directory of the html file of this tutorial. The path from the current location to the parent location is represented by ../

Example:
<p>Please click/tap the link: <a href="../index.html">CIS's web page</a> to jump to CIS's web page.</p>
will display (without the red box):

Read and practice HTML File Paths at https://www.w3schools.com/html/html_filepaths.asp

html-6.3 bookmarked HTML element

An element in a web page may be bookmarked using the id attribute with an id value which must be unique within the html file.
Syntax: <tag_name id="bookmark_name">booked content </tag_name>
Example:
<h4 id="sec3">This is a bookmarked Section 3</h4>
displaying (without the red box) the element:

where there is apparently no difference from the html element without the bookmark.

To address this bookmarked HTML element, a # followed by the above bookmark name are appended to the url of the HTML file:
Syntax: <a href="url#bookmark_name"> Link text</a>

Here the url may be either a global hyperlink or a local hyperlink.

Example of using the above bookmark sec3, the link value is:
https://cis.cihe.edu.hk/Anthony-Chan/HTML-tutorial.html#sec3
or
./HTML-tutorial.html#sec3 because the bookmark is local
or
HTML-tutorial.html#sec3 because ./ may be omitted for current location.

The url may be omitted when pointing to a bookmark within the current page.
Example of using the above bookmark sec3, the link value is simply:
#sec3 because the bookmark is within the current file.

Example:
<p> Please click <a href="./HTML-tutorial.html#sec3">link to Section 3</a> to go to the bookmarked Section 3. </p>
will display (without the red box):

Example:
<p> Please click <a href="HTML-tutorial.html#sec3">link to Section 3</a> to go to the bookmarked Section 3. </p>
will display (without the red box):

Example:
<p> Please click <a href="#sec3">link to Section 3</a> to go to the bookmarked Section 3. </p>
will display (without the red box):

An incorrect or non-existent url or bookmark results in a broken link
Example:
<p> This <a href="url#bookmark_name">link </a> is broken.</p>
will display

This link is broken.

Example:
<html>
...
<body>
...
Section 1
...
<h4 id="sec2"> Section 2 </h4>
displaying (without the red box):

Section 2

...

Section 5

...
as mentioned in <a href="#sec2">Section 2</a> above.
displaying (without the red box):

Read and practice HTML Links at:
https://www.w3schools.com/html/html_links.asp

html-7. Images

html-7.1 HTML img

It is often desired to display a picture file, e.g., logo-caritas.jpg . If the logo is placed under the directory images at the global address: https://cis.cihe.edu.hk/ then the url of the picture file is https://cis.cihe.edu.hk/images/logo-caritas.jpg where the file extension jpg or jpeg shows that the file is in MPEG format.

The HTML image element is an empty HTML element <img> (no end_tag)
containing src attribute
Syntax: <img src="url" alt="alternative text">.

Example: <img src="https://cis.cihe.edu.hk/images/logo-caritas.jpg" alt="Caritas Logo">
displays (without the red box):

Example with global web address:
<p> Hover on this <a href="https://cis.cihe.edu.hk/images/logo-caritas.jpg"> link </a> to view the global address and click/touch it. </p>
will display (without the red box):

The web address may be the global web address as in the example above or the relative path from the current source file to the destination.

The relative path from the current source HTML file:
href="https://cis.cihe.edu.hk/Anthony-Chan/HTML-tutorial.html
to the destination:
https://cis.cihe.edu.hk/images/logo-caritas.jpg
is
../images/logo-caritas.jpg

Example with local web address:
<p> Hover on this <a href="../images/logo-caritas.jpg"> link </a> to view the local address and click/touch it. </p>
will display (without the red box):

The alternative attribute has the name alt
and its value is the alternative text to display if the browser is unable to display the image.

Example: <img src="../images/non-existent.jpg" alt="Caritas Logo">
displays (without the red box):

Example with invalid url:
<p> Hover on this <a href="../logo-caritas.jpg"> link </a> to view the web address and click/touch it. What do you see and explain why? </p>
will display (without the red box):

Read and practice HTML Images at:
https://www.w3schools.com/html/html_images.asp

Image size

The size of the image is usually defined by the image file as the number of pixels (px) in width and in height in that file, and the displayed size on the web-browser is default to this size. To change from the default, the displayed size may be defined in the value of the style attribute
syntax: style="width:value;height:value;".
Example: style="width:150px;height:100px;".

The img tag example is then
Example: <img src="../images/logo-caritas.jpg" style="width:150px;height:100px;" alt="Caritas Logo">.
displays (without the red box):

If the width:value; only is defined, the height:value; in the displayed picture will be scaled accordingly to maintain the aspect ratio of the image, and vice versa.

Example: <img src="../images/logo-caritas.jpg" style="width:150px;" alt="Caritas Logo">.
displays (without the red box):

Example: <img src="../images/logo-caritas.jpg" style="height:100px;" alt="Caritas Logo">.
displays (without the red box):

html-7.2 figure and figcaption

Example: <figure>
<img src="../images/logo-caritas.jpg" style="width:100px;" alt="Caritas Logo">
<figcaption>Fig. 1 Caritas</figcaption>
</figure>
displays (without the red box):

html-7.3 picture - responsive

Show the first image if condition is met. Then skip to second image, and so on.

Example:
<picture>
<source srcset="../images/logo-cihe.jpg" media="(min-width:550px)">
<source srcset="../images/logo-caritas.jpg" >
<img src="../images/logo-caritas.jpg" style="width:auto;" alt="Caritas Logo">
</picture>
Try with different width of the web-browser.
displays (without the red box) the image depending on the width of the web-browser:

Try with different width of the web-browser.

html-7.4 loading

Syntax:
<img src="<em>url</em> loading="eager"> // loads the image immediately

<img src="<em>url</em> loading="lazy"> // defer loading until some conditions are met

Lazy loading is used to defer loading until the browser has scrolled down to the image itself.

Example:
<figure>
<img src="../images/CIHE-building.jpg" style="width:400px;" alt="Caritas Logo" loading="lazy">
<figcaption>Caritas building image: defer loading until browser scrolls down to it</figcaption>
</figure>

Read and practice loading attribute at:
https://www.w3schools.com/tags/att_img_loading.asp

html-8. colors

html-8.1 color (Text)

The text color in an HTML element, such as paragraph, heading, etc. is defined as a property color:(text-color-value);
of the style attribute of the corresponding tag
syntax: <tag_name style="color:(text-color-value);">

Example:
<p style="color:blue;">A blue text paragraph<p>
displays (without the red box):

Read and practice HTML Colors at:
https://www.w3schools.com/html/html_colors.asp

html-8.2 background-color

The background color in an HTML element is defined as a property color:(text-color-value);background-color:(background-color-value);
of the style attribute of the corresponding tag
syntax: <tag_name style="background-color:(background-color-value);>

Example:
<h3 style="background-color:yellow;"> A level 3 heading element in yellow background<h3>
displays (without the red box):

Example:
<body style="background-color:pink;">
...
...
<body>
turns the entire web page background to pink.

Read and practice HTML Colors at:
https://www.w3schools.com/html/html_colors.asp

See css color for more specifications about color with cascading styling sheet.

html-9. text

html-9.1 Text alignment:

Syntax: text-align:left|right|center|justify|initial|inherit;

Example:
<p style="text-align:right;">text-align:right; Return to top</p>
<p style="text-align:center;">text-align:center; Return to top</p>
<p style="text-align:left;">text-align:left; I have not the shadow of a doubt that any man or woman can achieve what I have, if he or she would make the same effort and cultivate the same hope and faith. (Mohandas Karamchand Gandhi)</p>
<p style="text-align:justify;">text-align:justify; I have not the shadow of a doubt that any man or woman can achieve what I have, if he or she would make the same effort and cultivate the same hope and faith. (Mohandas Karamchand Gandhi)</p>
displays (without the red box):

html-9.2 text color, font size, font family

Syntax:
<tagname style="color:value;"> content area</tagname>

Syntax:
<tagname style="font-size:value;"> content area</tagname>

Syntax:
<tagname style="font-family:value;"> content area</tagname>

Example:
<p style="color:green;font-family:verdana courier;font-size:160%;"> Green and enlarged text</p>
displays (without the red box):

html-9.3 Unicode and UTF-8 Encoding

html-9.3.1 Unicode

The Unicode Consortium develops Unicode Standard for the consistent encoding, representation, and handling of text expressed in most of the world's writing systems.

Unicode therefore unifies the existing character sets with Unicode Transformation Format (UTF) to cover almost all the characters, punctuations, and symbols in the world and to enable procesing, storage, and transport of text independent of platform and language.

Backward compatibility: The first 128 characters of Unicode are encoded using a single octect with the same binary value as ASCII.

html-9.3.2 Encoding

Character sets translate characters to numbers.

Encoding translates numbers into binary

Unicode can be implemented by different character sets. The most commonly used encoding are UTF-8 and UTF-16.

UTF-8 encoding: A character in the UTF-8 character set can be from 1 to 4 bytes long. UTF-8 can represent any character in the Unicode.

Default character encoding in HTML-5 is utf-8

Syntax for decimal
&#decimal;

Syntax for hexadecimal
&#xhexadecimal;

Syntax for entity
&entity;

Example:
& displays &

& displays &

& displays &

Example:
▶ displays ▶

▶ displays ▶

Example:
⇾ displays ⇾

⇾ displays ⇾

Example:
🙏🏼 displays 🙏🏼

🙏🏼 displays 🙏🏼

Example:
☧ displays ☧

☧ displays ☧

Example:
✞ displays ✞

✟ displays ✟

Example:
✺ displays ✺

✺ displays ✺

Read and practice HTML Unicde (UTF-8) reference at:
https://www.w3schools.com/charsets/ref_html_utf8.asp

html-9.3.3 HTML entities Reference

html-9.4 Icon

Font Awesome cheatsheet: https://fontawesome.com/cheatsheet

html-10. Media

html-10.1 Audio

An audio file may be played using the audio element
syntax (list the audio files in the order of preference):
<audio controls>
  <source src="./soundfile_name.ogg" type="audio/ogg">
  <source src="./soundfile_name.mp3" type="audio/mpeg">
  <source src="./soundfile_name.wav" type="audio/wav">
  browser not supporting mpeg or ogg.
</audio>

Example:
<audio controls>
  <source src="./audio/MLKing-Dream.ogg" type="audio/ogg">
  <source src="./audio/MLKing-Dream.mp3" type="audio/mpeg">
  browser not supporting mpeg or ogg.
</audio>
displaying (without the red box):

Read and practice HTML Audio at:
https://www.w3schools.com/html/html5_audio.asp

html-10.2 Video

html-10.2.1 mp4, webm, ogg

A video file may be played using the video element
syntax (list the audio files in the order of preference):
<video width="width_value" height="height_value" controls>
  <source src="./videofile_name.mp4" type="video/mp4">
  <source src="./videofile_name.webm" type="video/webm">
  <source src="./videofile_name.ogg" type="video/ogg">
  browser not supporting mp4, webm or ogg.
</video>

Example:
<video controls style="max-width:450px;">
  <source src="./video/RoseBlooming.mp4" type="video/mp4">
  <source src="./video/RoseBlooming.ogg" type="video/ogg">
  browser not supporting mp4 or ogg.
</video>
displaying (without the red box):

Example: changing controls to autoplay:
<video width="500" height="300" autoplay>
  <source src="./video/RoseBlooming.mp4" type="video/mp4">
  <source src="./video/RoseBlooming.ogg" type="video/ogg">
  browser not supporting mp4 or ogg.
</video>
will not show controls but will begin playing automatically.

Read and practice HTML Video at:
https://www.w3schools.com/html/html5_video.asp

html-10.2.2 preload

Syntax:
<video preload="auto|metadata|none">
auto: loads the entire video when the page loads
metadata: loads only metadata when the page loads
none: NOT load the video when the page loads

Disable preload until play control is pressed, and add an image poster:
<video width="width_value" height="height_value" controls preload="none" poster="../images/CIHE-building.jpg">
  <source src="./videofile_name.mp4" type="video/mp4">
  <source src="./videofile_name.webm" type="video/webm">
  <source src="./videofile_name.ogg" type="video/ogg">
  browser not supporting mp4, webm or ogg.
</video>

Example:
<video controls preload="none" poster="../images/CIHE-building.jpg" style="max-width:450px;">
  <source src="./video/RoseBlooming.mp4" type="video/mp4">
  <source src="./video/RoseBlooming.ogg" type="video/ogg">
  browser not supporting mp4 or ogg.
</video>
displaying (without the red box):

adding controls autoplay muted will show controls, play automatically, but is muted

Example: changing controls to autoplay:
<video width="500" height="300" autoplays>
  <source src="./video/RoseBlooming.mp4" type="video/mp4">
  <source src="./video/RoseBlooming.ogg" type="video/ogg">
  browser not supporting mp4 or ogg.
</video>
will not show controls but will begin playing automatically.

Read and practice preload attribute at:
https://www.w3schools.com/tags/att_video_preload.asp

html-10.2.3 Youtube

Syntax:
<iframe width="value" height="value" src="https://www.youtube.com/embed/id">
</iframe>

Example:
<iframe width="500" height="350" src="https://www.youtube.com/embed/YE7VzlLtp-4"> </iframe>
displays (without the red box):

Read and practice YouTube Video at:
https://www.w3schools.com/html/html_youtube.asp

html-12. Forms

html-12.1 form with input

form element is used to collect user input

Syntax:
<form>
form elements /* such as elements
<input type="text">/* one-line text input field
<input type="radio">/* a radio button for selecting from multiple choices
<input type="submit">/* a radio button for submitting the form
</form>

12.1.1 input type text


<form> Name:<br>
<input name="name" type="text"><br>
</form>


12.1.2 input type radio


<form><br>
<input type="radio" name="gender" value="male" checked="checked"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</form>


12.1.3 input type submit


<form action="./server-process.php"> Your Name:<br>
<input type="text" name="familyname" value="H. Anthony Chan"><br>
Your affiliation:<br>
<input type="text" name="affiliation" value="Caritas"><br>
Date:<br>
<input type="text" name="lastname" value="Dec 30 2019"><br>
<br> <input type="submit" value="Submit"> </form>


12.1.4 target attribute

action attribute: action to perform when form is submitted
default: sent to the current page.
<form action="./server-collect-page.php"> sent to a page called "/server-collect-page.php" on the server.

target attribute: /* default is "_self"
target="_blank" attribute: /* open a new browser tab
target="_parent"
target="_top"

Example:
<form action="./server-collect-page.php" target="_blank">

name attribute: is needed to submit the input field

12.1.5 method attribute

GET: form values are displayed in address of browser tab
<form action="./server-process.php" target="_blank" method="GET"><br>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="pwd"><br>
<br><br>
<input type="submit" value="Submit">
</form>


post: form values are NOT displayed in address of browser tab
<form action="./server-process.php" target="_blank" method="POST"><br>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="pwd"><br>
<br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data">
</form>


Read and practice Forms at:
https://www.w3schools.com/html/html_symbols.asp

html-12.2 Form attribute

form attribute:
autocomplete: /* turn on/off form autocomplete
novalidate: /* form should not be validated when submitted
action: /* where to submit form-data
target: /* where to display response upon submit
method: /* HTTP method to send form-data

Read and practice Input type at:
https://www.w3schools.com/html/html_form_attributes.asp

html-12.3 input form element

<input type="button">
<input type="checkbox"> /* enables to select 0 or more options
<input type="color"> /* show color picker
<input type="date"> /* show date picker
<input type="datetime-local"> /* show date amd time with no time zone
<input type="email"> /* automatically validate email address format
<input type="file"> /* file-select field and browse button for file uploads
<input type="hidden">
<input type="image">
<input type="month"> /* to select a month and year
<input type="number"> /* a numeric input field
<input type="password"> /* characters are masked
<input type="radio"> /* enables to select ONLY ONE choice
<input type="range"> /* a slider control to enter a number
<input type="reset"> /* reset all form values to their default values
<input type="search"> /* for search field (just like a text field)
<input type="submit"> /* submitting form data to a form-handler
<input type="tel"> /* to input a telephone number
<input type="text"> /* one-line text input field
<input type="time"> /* may show a time picker
<input type="url"> /* automatically validate url format when submitted
<input type="week"> /* select a week and year


12.3.1 input type password


<form action="./server-process.php"><br>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="pwd"><br>
<br><br>
<input type="submit" value="Submit">
</form>


12.3.2 input type reset


<form action="./server-process.php"><br>
User name:<br>
<input type="text" name="username"><br>
User password:<br>
<input type="password" name="pwd"><br>
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>


12.3.3 input type checkbox


<form action="./server-process.php"><br>
<input type="checkbox" name="read">I have read the policy<br>
<input type="checkbox" name="price">I have read the price<br>
<br><br>
<input type="submit">
<input type="reset">
</form>


12.3.4 input type button


<input ntype="button" onclick="alert('clicked')" value="Please click">


12.3.5 input type color


<form action="./server-process.php"><br>
<input type="color" name="choosecolor" value="#ff0000"><br>
<br>
<input type="submit">
</form>


12.3.6 input type date


<form action="./server-process.php"><br>
Graduate date: <input name="gdate" type="date"><br>
Date before 2019-12-31: <input name="maxday" type="date" max="2019-12-31"><br>
Date after 1980-01-01: <input name="minday" type="date" min="1980-01-01""><br>
<br>
<input type="submit">
</form>


12.3.7 input type datetime-local; time


<form action="./server-process.php"><br>
Date and time: <input name="gdate" type="datetime-local"><br>
Select time: <input name="selecttime" type="time"><br>
<br>
<input type="submit">
</form>


12.3.8 input type month; week


<form action="./server-process.php"><br>
birthday (month and year): <input name="gdate" type="month"><br>
week: <input name="week-year" type="week"><br>
<br>
<input type="submit">
</form>


12.3.9 input type Email; Tel; pattern


<form action="./server-process.php"><br>
E-mail: <input name="email" type="email"><br>
Telephone: <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required><br>
Format: 123-456-7890
<br>
<br>
<input type="submit">
</form>


pattern: is a regular expression against which to check the input field's value upon being submitted; works with text, date, search, url, tel, email, password

12.3.10 input type file


<form action="./server-process.php"><br>
File (one): <input type="file" name="selectfile"><br>
Files (hold ctrl to choose multiple files): <input type="file" name="selectfiles" multiple><br>
<br>
<input type="submit">
</form>


12.3.11 input type number


<form action="./server-process.php"><br>
quantity (1-7): <input type="number" name="quantity" min="1" max="7"><br>
<br>
<input type="submit">
</form>


12.3.12 input type range


<form action="./server-process.php"><br>
quantity (0-5): <input name="star" min="0" max="5" type="range"><br>
<br>
<input type="submit">
</form>


12.3.13 input type search


<form action="./server-process.php"><br>
Search: <input name="search-webpage" type="search"><br>
<br>
<input type="submit">
</form>


12.3.14 input type url


<form action="./server-process.php"><br>
webpage: <input name="homepage" type="url"><br>
<br>
<input type="submit">
</form>


Read and practice Input type at:
https://www.w3schools.com/html/html_form_input_types.asp

html-12.4 input attribute

input attribute:
value: /* initial value
readonly: /* cannot be changed
disabled: /* unusable and un-clickable; value will not be sent
required:
size: /* input field size
maxlength: /* max length allowed
width:
height:
min: /* minimum value for an input field (number, range, date,...)
max: /* maximum value for an input field (number, range, date,...)
multiple: /* more than one value allowed
pattern: /* for checking input field's value
autofocus:
placeholder: /* provides hint, usually in gray
step: /* increment step

input form attribute:
form: /* the form to which the input element (outside the form) belongs, must be equal to the id of that form
formenctype: /* use with method=“POST”
formaction: /* overrides the action attribute of the form (works with input types: submit and image
formmethod: /* overrides the form attribute: enctype
formnovalidate: /* overrides the form attribute: novalidate
formtarget: /* overrides the form attribute: target

Read and practice input form attribute at:
https://www.w3schools.com/html/html_form_attributes_form.asp

html-12.4.1 value, readonly, disabled, required, size, maxlength


<form action="./server-process.php"><br>
School(with initial tentative value): <input name="school" value="CIS" type="text"><br>
Affiliation (readonly): <input type="text" name="affiliation" value="CIHE" readonly><br>
Age (disabled): <input type="text" name="affiliation" value="18" disabled><br>
Enter Name (size=30, required): <input type="text" name="student_name" size="30" required><br>
Program (maxlength=8): <input type="text" name="program_name" value="BScAI" maxlength="8"><br>
<br>
<input type="submit">
</form>


html-12.4.2 placeholder, autofocus, step


<form action="./server-process.php"><br>
(with placeholder): <input type="text" name="firstname" placeholder="First name" >
(with placeholder): <input type="text" name="lastname" placeholder="Last name" >
(step): <input type="number" name="points" step="2">
(autofocus) <input type="text" name="first_name" autofocus> /* not shown below
<br>
<input type="submit">
</form>


html-12.5 select form element and its option

<select> /* defines a drop-down list.


<form action="/server-collect-page.php">
七恩：<select name="7 gifts">
<option value="wisdom">上智</option>
<option value="understanding">聰敏</option>
<option value="counsel">超見</option>
<option value="fortitude">剛毅</option>
<option value="knowledge">明達</option>
<option value="piety">考愛</option>
<option value="fear of God">敬畏</option>
</select>
<br><br>
<input type="submit">
</form>


<size>attribute /* number of visible values.


<form action="/server-collect-page.php">
<select name="7 gifts" size="4">
<option value="wisdom">上智</option>
<option value="understanding">聰敏</option>
<option value="counsel">超見</option>
<option value="fortitude">剛毅</option>
<option value="knowledge">明達</option>
<option value="piety">考愛</option>
<option value="fear of God">敬畏</option>
</select>
<br><br>
<input type="submit">
</form>


<multiple>attribute /* select multiple options by holding ctrl (in Windows).

<p>Hold down Ctrl in Windows to select multiple options</p>

<form action="/server-collect-page.php">
<select name="7 gifts" size="4" multiple>
<option value="wisdom">上智</option>
<option value="understanding">聰敏</option>
<option value="counsel">超見</option>
<option value="fortitude">剛毅</option>
<option value="knowledge">明達</option>
<option value="piety">考愛</option>
<option value="fear of God">敬畏</option>
</select>
<br><br>
<input type="submit">
</form>


Hold down Ctrl in Windows to select multiple options

html-12.6 textarea form element

<textarea> element defines a multiple lines input field

<p>Hold down Ctrl in Windows to select multiple options</p>

<form action="/server-collect-page.php">
<textarea name="message" rows="10" cols="40">
Fill in message here </textarea>
<br>
<input type="submit">
</form>


html-12.7 label form element with attribute for

label form element:
<label>text or image element</label>

for attribute:
<label for="element_id"> /* bind the label to the form element with attribute id=element_id

Label may be bound to: <input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="search">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<select>
<textarea>
<meter>
<progress>

Example to bind label to input element type text:

    <form action="">
	  <label for="input_element_id">Text inside label (click here)</label><br>
	  Text outside label<br>
	  <input type="text" id="input_element_id"><br>
	  <input type="submit" value="submit">
    </form>
    

Example to bind label to input element type radio:

    <form action="">
      <label for="male">Male (text inside label)</label>
      <input type="radio" name="gender" id="male" value="male"><br>
      <label for="female">Female (text inside label)</label>
      <input type="radio" name="gender" id="female" value="female"><br>
	  <input type="submit" value="submit">
    </form>
    

html-12.8 fieldset form element, legend form element

<fieldset> element: group data in a form

<legend> element: caption for fieldset of elements

Example:

    <form action="">
      <fieldset>
        <legend>name</legend>
        <input type="text" id="fname" name="fname" value="first name"><br>
        <input type="text" id="lname" name="lname" value="last name">
      </fieldset>
      <fieldset>
        <legend>date of birth</legend>
        <input type="month" id="bdaymonth" name="bdayname">
      </fieldset>
      <input type="submit" value="submit">
    </form>
    

Return to html menu

Return to html menu

Return to html menu

Return to html menu

Return to html menu

Return to html menu

Return to html menu

Return to html menu