NATIONAL INSTITUTE OF TRANSPORT (NIT)

DEPARTMENT OF COMPUTING AND COMMUNICATION TECHNOLOGY (CCT)

PROGRAMME : HIGHER DIPLOMA IN COMPUTER SCIENCE

MODULE NAME : WEB DESIGN AND INTERNET
MODULE CODE : ITU 07303
LECTURER’S NAME: HUSSEIN MUSSA
TASK : GROUP ASSIGNMENT 1
SEMESTER : 1
SUBMISSION DATE: 5/1/2024
GROUP NO.10
N/S NAME OF STUDENT REG. NUMBER SIGNATURE
01. ESTHER CHARLES M NIT/BCS/2022/456
02. EMANUEL D SALU NIT/BCS/2022/441
03. YUSRA A SAIDI NIT/BCS/2022/406
04. RAYSON S TUVANA NIT/BCS/2022/372
05. SALVATORY SAMWEL NIT/BCS/2022/436
06. DERICK M JEFF NIT/BCS/2022/420
07. NEVIN C KAWAMALA NIT/BCS/2022/466
08. HAFEEZ S MAKILLA NIT/BCS/2022/385
09. PETER BUNDALA K NIT/BCS/2022/472
10. GODFREY B DAUD NIT/BCS/2022/424
 1. DISCUSS THE EVOLUTION OF HTML.

What is HTML?
HTML stands for “HyperText Markup Language” and is the standard language used to produce
web pages and web-applications.
HTML was first presented by Tim Berners-Lee, the creator of the World Wide Web, in 1989.
Berners-Lee originally created the Web to allow physicists to collaborate and share their work
with each other. Unbeknownst to him at this time, the Web would become one of the biggest
tools in which people use to share information.

HTML Versions.

HTML 1.0
HTML 1.0 was the first version of HTML, used from 1989 to 1994. It was a very limited version
and included only 20 elements. There wasn’t much that could be done with it and therefore most
webpages ended up looking very similar due to the inability to do things such as alter the page
background, determine fonts, and use tables and forms.

HTML 2.0
Created in 1995, this version was a significant improvement to HTML 1.0. “HTML 2.0 becomes
the first official set of standards for HTML — the base standard by which all browsers were
measured until HTML 3.2.” (Bartels, 2011). It was able to support the changing of a page
background, text color, text face, the use of tables and text boxes etc. It was around this time that
W3C (The World Wide Web Consortium) was created — an organization which develops web
standards. HTML 2.0 also started to support more browsers.

Problems for browsers

After the creation of HTML 2.0, people started wanting to do more with HTML. A company
called Netscape had a browser called ‘Netscape Navigator’, the leading browser during this time,
and they began to introduce new abilities called ‘Netscape extension tags’. Other browsers tried
to recreate these tags to keep up with the current trends, however they were unable to get them to
display in the same way. This meant that pages which were created using Netscape extension
tags ended up looking bad in other browsers.
HTML 3.2
In January 1997 HTML 3.2 was endorsed by the W3 Consortium and approved of by many,
including significant browsers such as Netscape and Microsoft. “HTML 3.2 included tables,
applets, text flow around images, subscripts and superscripts.” (W3.org, 1998)

HTML 4.01
This version of HTML, created in 1999, included cascading style sheets (css) which allowed
aspects such as text, color, font and backgrounds to be easily altered. Instead of these aspects
being included directly within the webpage, they are now separated, making it much more
trouble-free.

XHTML 1.0
XHTML 1.0, released in 2000, was a reformulation of HTML 4.01 as an XML application. It
aimed to bring the extensibility and rigorous syntax of XML to HTML. XHTML required
adherence to stricter rules and syntax, promoting better document structure and cleaner code.

HTML 5
HTML 5 is the current version of HTML which is used. “We’ve come a long way since HTML
could barely handle a simple page layout. HTML5 can be used to write web applications that still
work when you’re not connected to the net; to tell websites where you are physically located; to
handle high-definition video; and to deliver extraordinary graphics.” (Marshall, 2017). HTML 5
continues to evolve and is supported by all the biggest browsers such as Firefox, Chrome, Safari,
Internet Explorer, Opera and Edge.
HTML has come very far since the first version (HTML 1.0), which only offered simple features
meaning most webpages looked very similar. Since then, the W3 Consortium has been
established, css has been created, more features are supported by browsers and in general, more
can be done with HTML. This means there’s less confusion, universal standards, and ease of use.
HTML is constantly progressing and changing — in a few decades, we can expect that HTML
will have advanced even further.
 2. DISCUSS THE FOLLOWING ATTRIBUTES AS USED IN HTML
a) Class
b) Id

In HTML, "class" and "id" are attributes used to define and identify elements, allowing for
styling and scripting in web development.

a. Class Attribute:
The class attribute is used to assign one or more class names to an HTML element.
Multiple elements can share the same class, enabling a group of elements to be styled or targeted
together.
Syntax: <tagname class="classname1 classname2">Content</tagname>
Example: <p class="highlight">This is a highlighted paragraph.</p>

b. ID Attribute:
The id attribute is used to uniquely identify an HTML element on a page.
- Each page can only have one element with a specific ID, making it unique within the
document.
- Syntax: <tagname id="uniqueID">Content</tagname>
- Example: <div id="header">This is the header.</div>

Styling with Classes and IDs:

CSS (Cascading Style Sheets) is commonly used to style HTML elements based on their class or
ID.
Classes are prefixed with a period (.) in CSS, and IDs are prefixed with a hash (#).
Example CSS:
css
.highlight {
color: red;
font-weight: bold; }
#header {
 background-color: lightgray;
padding: 10px;
}

JavaScript and IDs:

IDs are often used in JavaScript to reference and manipulate specific elements in the Document
Object Model (DOM).
JavaScript can access elements by their IDs for dynamic interactions.
Example JavaScript:
javascript
var headerElement = document.getElementById('header');
headerElement.innerHTML = 'Updated Header';

In summary, the class attribute is used for grouping and styling multiple elements, while the id
attribute uniquely identifies a single element within a document. Both are crucial for effective
web development, enabling style application, scripting, and precise element targeting.

3. DISCUSS THE FOLLOWING HTML ELEMENTS

a. <iframe>
b. <meta

a. <iframe> Element:
The <iframe> (Inline Frame) element is used to embed another HTML document within the
current document.
It allows the inclusion of content from external sources like other websites or documents.
Syntax: <iframe src="URL" width="pixels" height="pixels" frameborder="0"></iframe>
Example: <iframe src="https://www.example.com" width="600" height="400"
frameborder="0"></iframe>

Attributes:
src: Specifies the URL of the content to be embedded.
width and height: Define the dimensions of the iframe.
frameborder: Controls whether a border is displayed around the iframe (typically set to "0" to
remove the border).

b. <meta> Element:
The <meta> element provides metadata about the HTML document. It doesn't display any
content on the page but offers information for browsers and search engines.
Commonly placed within the <head> section of an HTML document.
Various attributes can be used to convey different types of information.
Example:
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A brief description of the page.">
</head>

Key meta-attributes:
charset: Specifies the character encoding for the document (e.g., UTF-8).
name and content: Used for various metadata such as viewport settings, page description,
keywords, etc.
Example: <meta name="viewport" content="width=device-width, initial-scale=1.0"> sets the
viewport to the width of the device.

Both <iframe> and <meta> play essential roles in web development. <iframe> enables the
integration of external content, while <meta> provides critical metadata for browsers, search
engines, and other tools to interpret and present HTML documents correctly.

4. DISCUSS AND DESCRIBE ALL ESCAPE CHARACTERS IN HTML

In HTML, escape characters are used to represent reserved characters or characters with special
meanings. They begin with an ampersand (&) and end with a semicolon (;). Here are some
commonly used HTML escape characters:

1. &lt; - Represents the less-than sign (<).

Example: <p>This is &lt;strong&gt;important&lt;/strong&gt;.</p> produces "This is
<strong>important</strong>."

2. &gt; - Represents the greater-than sign (>).

Example: <p>10 &gt; 5</p> produces "10 > 5."

3. &amp; - Represents the ampersand (&) itself.

Example: <p>AT&amp;T</p> produces "AT&T."

4. &quot; - Represents a double quotation mark (").

Example: <p>This is a &quot;quote.&quot;</p> produces "This is a 'quote.'"

5. &apos; - Represents an apostrophe (single quotation mark).

Note: This entity is not always supported in HTML, especially in versions before HTML5. It's
safer to use &rsquo; for an apostrophe.
Example: <p>It&apos;s a sunny day.</p> produces "It's a sunny day."

6. &nbsp; - Represents a non-breaking space.

Example: <p>This&nbsp;word&nbsp;will&nbsp;not&nbsp;break.&nbsp;</p> adds non-
breaking spaces between words.

7. &copy; - Represents the copyright symbol (©).

Example: <p>&copy; 2023 My Company</p> produces "© 2023 My Company."

8. &reg; - Represents the registered trademark symbol (®).

Example: <p>Brand&reg;</p> produces "Brand®."

9. &trade; - Represents the trademark symbol (™).

Example: <p>Product&trade;</p> produces "Product™."

These escape characters are essential for displaying special characters correctly in HTML,
especially when those characters might be misinterpreted by browsers or interfere with HTML
syntax. Using these entities ensures that the content is rendered as intended.

REFERENCES
The Evolution of HTML. What is HTML? | by Jasmine Harwood | Medium
W3Schools Online Web Tutorials
Web development tutorials | w3resource
tutorialspoint - Search (bing.com)