Hypertext Markup Language (HTML) 2
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.
