Friday, June 12, 2020

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>
<sub> subscript </sub>
<sup> superscript </sup>

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

No comments:

Post a Comment

Syllabus comparison

 Syllabus comparison   DSE ICT 2025 New syllabus DSE ICT 2012-2024 CE CIT 2005-2011 CE CS 1994-2004 ...