HTML 4

Hypertext Markup Language (HTML) 4

Learning Outcomes:

Elective C. b. Web Site Development

• Create and manipulate browser windows.
• Students should be able to create pop-up windows, manipulate window location, and window size, and allow scrollbars to appear when necessary. They should also be able to embed messages in browser window’s status bar such as displaying the current date, time, URL and its description.
• Perform special effects.
• Students should be able to create special effects such as scrolling messages, rotating image banners, mouse over effect, blinking text and changing colours.
• Publish web site.
• Students should know the basics of getting a domain name and web hosting. They should also be able to transfer web pages onto web sites on the Internet.

Scrolling messages <marquee>

The <marquee> tag is removed in HTML5. Using CSS to create scrolling message is recommended.

Old method:

<marquee direction=”right’> your scrolling message </marquee>

Blinking text <blink>

The <blink> tag is removed in HTML5. Using CSS to create blinking effect is recommended.

Old method:

<blink> your blinking text </blink>

These functions require JavaScript

• Create pop-up windows
• Manipulate window location, window size
• Allow scrollbars to appear
• Embed messages in browser window’s status bar
• Rotating image banners
• Mouse over effect
• Changing colours

Considerations in publishing a web site

• Web hosting – server containing the web site
• Having your own server
• Server of a web hosting service provider (free or commercial)
• Advantages of using their service: low starting cost, additional services e.g. back up, hardware maintenance
• Having a domain name – so that people can link to your web site
• Obtain one from domain name registrar
• Use the subdomain of the web hosting service provider
• Uploading the web site to the server
• Web browsers
• FTP program – upload multiple files at the same time
• Tools provided by web hosting service provider

               

Reference:

https://websitesetup.org/register-domain-name/

HTML3

Hypertext Markup Language (HTML) 3

Learning Outcomes:

Elective C. b. Web Site Development

• Construct simple web pages.
• Students should be able to use different features (e.g. links, anchors, lists, tables, frames, Mailto and Fill-out Forms) in constructing the web page. They should also be able to embed multimedia elements in the web page and apply a consistent look and style across a set of web pages.

Lists <ol> <ul> <li>

Ordered list:

<ol>

<li>first item</li>

<li>second item</li>

</ol>

• Attribute: type (e.g. 1, a), start (starting number), reversed (reverse the order)

Unordered list:

<ul>

<li>first item</li>

<li>second item</li>

</ul>

Fill-out forms <form> <input> <textarea> <select> <option>

<form>

Single line text input <input type=”text” name=”…”>

Checkbox <input type=”checkbox” value=”…”>

Radio button <input type=”radio” name=”…” value=”…”>

Multi-line text input <textarea name=”…” cols=”40” rows=”2”></textarea>

List

<select name=”…” size=”3” multiple>

                <option value=”first”> first value </option>

                <option value=”second”> second value </option>

                <option value=”third”> third value </option>

</select>

Drop down list/menu (no multiple attribute used)

<select name=”…”>

                <option value=”first”> first value </option>

                <option value=”second”> second value </option>

</select>

Submit button <input type=”submit” value=”Submit”>

Reset button <input type=”reset” value=”reset”>

Advantage of using reset button: reduce time for reloading

</form>

Mailto

There are numerous ways to submit the inputted data in the form.

One of these is to send the data via email.

<form action=”mailto:abc@abc.com” method=”post” enctype=”text/plain”>

• The use of mailto will launch the user’s email client.
• method=”get”: the data will be incorporated into the end of a URL. Good for simple form and data security is not a concern.
• method=”post”: the data included in the HTTP request body.
• enctype=”text/plain”: organize the data in a more readable format.

Cascading Style Sheets (CSS)

3 ways to use CSS.

Inline: use style attribute in <body> section – apply to certain part or sentence

                <p style=”color:red;”> Hello World! </p>

Internal: use <style> within <head> section – apply to whole web page

                <head>

                <style>

                p

                {

    color: red;

    }

    </style>

                </head>

External: use <link> to link to external CSS file (.css)  – apply to multiple web pages of the website

Advantages of using CSS: 

• consistency in web pages design/formatting
• reusable (.css)
• easy maintenance
• follow current standards

HTML2

Hypertext Markup Language (HTML) 2

Learning Outcomes:

Compulsory C. c. Elementary Web Authoring

• Design and construct web pages for an intended audience and upload them onto the World Wide Web.
• The organisation of information includes ease of navigation, appropriate placement of links, tables, frames and multimedia elements, colour combinations, background design, font size and style, for an intended audience.
• Students are not required to memorise HTML codes. (you still need to memorise them for elective part)

Hyperlink <a href=”…”>

<a> defines a hyperlink

Attributes: href (destination address), target (where to open the linked document)

<a href=”http://...”> Full web address is used, this is known as absolute URL </a>

<a href=”local.html”> Relative URL is used for own web site. </a>

How relative URL works: https://kb.iu.edu/d/abwp

Bookmark/Anchor <a name=”…”> <… id=”…”>

2 HTML ways to create bookmark:

• <a name=”youranchor”></a>: name can only be used with <a>
• <p id=”youranchor”></p>: id can be used with any tag

Jump to the bookmark:

• <a href=”#youranchor”>: same page
• <a href=”URL.html#youranchor”>: different web page

Table <table> <tr> <th> <td>

<table>..</table> defines a table

<tr>..</tr> defines a row

<th>..</th> and <td>..</td> defines a cell, with <th> representing heading, specifically the content is bold and centered.

Visually, this is how it works,

<table>

<tr>	<th>..</th>	<th>..</th>	</tr>
<tr>	<td>..</td>	<td>..</td>	</tr>

</table>

Attributes: colspan (merge column), rowspan (merge row)

Some table attributes such as border, width, cellpadding, cellspacing, bgcolor, background and bordercolor are removed in HTML5. Using CSS to edit them is recommended.

Frames

<frame> and <frameset> tags are removed in HTML5. Using <iframe> is recommended.

• Old method:
  <frameset> defines the layout of the whole web page.
  <frame> loads web pages into each frame defined in <frameset>.
  
  Example:

<frameset cols=”30%,70%”>                                   <frame src=”link to your left side web page”>             <frame src=” link to your right side web page”> </frameset>

Created a frameset with 2 columns First frame Second frame

Manipulating frames

To open web page in certain frame / new browser. Compatible with <iframe>

(<frame> and <frameset> tags are removed in HTML5)

<a href=”new.html” target=”_blank”>                 Open in new window

<a href=”new.html” target=”_self”>                    Open in same frame

<a href=”new.html” target=”_parent”>                Open in parent frame (When frameset nested in frameset, it opens in the inner frameset)

<a href=”new.html” target=”_top”>                     Open in full browser window

<a href=”new.html” target=”(frame name)”>      Open in a named frame

Embed multimedia elements <embed> <img> <video> <audio>

<embed src=”…jpg”>

Attributes: src (source link), type (plug-in to initiate), width, height

<img src=”…jpg”>

Attributes: src (source link), alt (text description), width, height and many more

<video>

<audio>

Image with multiple links

• 3 different methods
• Image map: links at different part of the image
  https://www.w3schools.com/html/html_images_imagemap.asp
• Table: break down the image into smaller ones and rebuild by putting into table
• Use CSS to create links on the image

Color combinations

Color can be represented using different formats in HTML5/CSS.

Black color can be represented by

• the name black
• Hex code #000000
• RGB (0,0,0)
• HSLa (0, 0%, 0%, 1)

Hex code #000000:

• the first 00 represents the amount of red color. #FF0000 is red. (FF=255)
• the second 00 represents the amount of green color. #00FF00 is green.
• the last 00 represents the amount of blue color. #0000FF is blue.
• #FFFFFF is white.

Background design

The attributes bgcolor and background are removed in HTML5. Using CSS to edit background design is recommended.

•  Old method:
  <body bgcolor=”red”> </body>
  <body background=”….jpg”></body> this image will be displayed as tiles by default.

HTML 1

Hypertext Markup Language (HTML) 1

Learning Outcomes:

Compulsory C. c. Elementary Web Authoring

• Recognise the basic constructs of Hypertext Markup Language (HTML) which is a means to address cross-platform issues.
• Design and construct web pages for an intended audience and upload them onto the World Wide Web.
• The organisation of information includes ease of navigation, appropriate placement of links, tables, frames and multimedia elements, colour combinations, background design, font size and style, for an intended audience.
• Students are not required to memorise HTML codes. (you still need to memorise them for elective part)

HTML

• Stands for Hypertext Markup Language
• Markup Language: a computer language using symbols/tags in a text document to control its layout and format. E.g. html, xml
• Function: create web pages
• Current version: HTML5
• Reason to use current version: follow new standards, support new functions, avoid deprecated(outdated) element/attribute
• Possibly not supported by some old browsers

Basic structure of HTML document

<html>

<head>

<title> THIS IS TITLE </title>

<!--SOME OTHER ELEMENTS ARE ALSO PLACED IN THE HEAD SECTION-->

</head>

<body>

THIS IS WITHIN WORKSPACE OF THE BROWSER, ENCLOSED BY THE BODY TAGS

</body>

</html>

• Tags: Building blocks of a HTML document. Most tags work in pairs. E.g. <html> </html>.
• Attributes: For example, when using <font size=”1”>, size=”1” is known as attribute. It provides additional information about the <font> tag. Different attributes are available to different tags.

HTML tags:

Font size and style <font>

The <font> tag is removed in HTML5. To format font size, font-family and color, Cascading Style Sheets (CSS) is recommended.

• Old method: <font size=”1” face=”arial” color=”green”> YOUR TEXT </font>

Text formatting <b> <i> <u> <del> <sub> <sup>

<b> bold </b>

<i> italic </i>

<u> underlined </u>

<del> deleted </del>

_subscript

^superscript

Text alignment

The <center> tag and align attribute are removed in HTML5. Using CSS to edit text alignment is recommended.

• Old method:
  <center> This is center alignment </center>
  <p align=”left”> This paragraph is left aligned. </p>

Heading <h1> to <h6>

<h1> This is largest. </h1>

<h6> This is smallest. </h6>

Paragraphs <p> <br> <pre>

<p> Text within the tag forms a paragraph </p>

<p> This is another paragraph. <br> br stands for line break. <br> No new paragraph is formed. </p>

<pre> Pre stands for preformatted text.

It preserves the line breaks and spaces as you typed in the HTML document. </pre>

Character entities/Escape characters

Tags used the reserved characters < and >. To properly displace it in the web page, we use character entities/escape characters.

<: &lt;

>: &gt;

Multiple consecutive space in a HTML document will automatically be reduced to a single space.

To displace multiple space, use <pre> or escape character known as,

non-breaking space: &nbsp;

Comments

If you want to include comments in the HTML document, you can enclose the message with <!-- and -->. The message will not be displayed in the web page.

Reference:
https://www.w3schools.com/html/default.asp