6.3.
1 Create an HTML file and preview it in a browser
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My First HTML Page!</h1>
<p>This is a paragraph of text on my webpage.</p>
</body>
</html>
6.3.2 Apply the basic HTML text formats, i.e. heading, bold, italic, underline, strike-out,
superscript, subscript, center, font size, font color and font face
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<center><h1>HTML Text Formatting</h1>
<h2>Heading 2: This is a smaller heading</h2>
<h3>Heading 3: This is a heading three</h3>
<h4>Heading 4: This is a smaller four</h4>
<h5>Heading 5: This is a larger heading</h5>
<h6>Heading 6: This is a largest heading</h6></center>
<p><b>This text is bold</b>.</p>
<p><i>This text is italicized</i>.</p>
<p><u>This text is underlined</u>.</p>
<p><strike>This text is struck-through</strike>.</p>
<p><sup>This is superscript text (x<sup>2</sup>)</sup>.</p>
<p><sub>This is subscript text (H<sub>2</sub>O)</sub>.</p>
<p align="center">This text is centered.</p>
<p style="font-size: 20px;">This text has a font size of 20px.</p>
<p style="color: red;">This text has a font color of Tomato.</p>
<p style="font-family: Arial">This text uses the Courier New font.</p>
</body>
</html>
6.4.1 Create ordered, unordered and definition lists
<html>
<head>
<title>HTML Lists</title>
</head>
<body>
<h1>HTML List Examples</h1>
<h2>Ordered List</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
<h2>Definition List</h2>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, the standard language for creating webpages.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, used for styling HTML documents.</dd>
<dt>JavaScript</dt>
<dd>A programming language used for creating interactive effects within
webpages.</dd>
</dl>
</body>
</html>
6.5.3 Add an image (background and foreground)
6.5.2 Adjust height and width of an image.
6.5.2 Add alternate text on an image.
6.5.1 Add border to an image.
<html>
<head>
<title>Image in Background and Foreground</title>
</head>
<body background="[Link]">
<center>
<h1>Welcome to My Page!</h1>
<p>This page has an image both in the background and foreground.</p>
<img src="[Link]" alt="Foreground Image" height=300 width=300 border=5
style="border-color:red" >
</center>
</body>
</html>
6.6.1 Add a hyperlink to a web page
<html>
<head>
<title>Simple Hyperlink to webpage</title>
</head>
<body>
<center>
<h1>Welcome to My Page!</h1>
<a href="[Link] here to visit Example</a>
</center>
</body>
</html>
6.6.4 Add a graphical hyperlink.
<html>
<head>
<title>Simple Hyperlink to webpage</title>
</head>
<body>
<center>
<h1>Welcome to My Page!</h1>
<a href="[Link]
<img src="[Link]" alt="Description of image">
</a>
</center>
</body>
</html>
6.6.3 Add anchor to hyperlink within a web page
<html>
<head>
<title>Hyperlink within page</title>
</head>
<body>
<h1>Types of Computer</h1>
<a href="#Digital">1. Digital</a><br>
<a href="#Analog">2. Analog</a><br>
<a href="#Hybrid">3. Hybrid</a><br>
<a name="Digital"></a><h1>Digital</h1><br>
In modern technology, digital computers, analog systems, and hybrid systems each serve distinct
roles but can also complement one another in many applications. A digital computer operates using
discrete values, typically represented as binary digits (0s and 1s). These systems excel at performing
complex calculations with high precision, offering accuracy and stability. Digital computers are
integral to our daily lives, from personal computers to smartphones and advanced data-processing
systems. By converting information into binary code, digital computers make it easy to store,
process, and manipulate vast amounts of data without significant degradation.
<a name="Analog"></a><h1>Analog</h1><br>
On the other hand, analog systems work with continuous signals. These systems naturally represent
real-world data, such as sound or light, with smooth and continuous variations. For example, an
analog clock uses a continuously moving hand to represent time, and a vinyl record reproduces
music as smooth variations in grooves. Analog systems are especially valuable for tasks where data is
inherently continuous and precise representation is critical, such as in audio and video applications.
However, they are more susceptible to noise and signal degradation over time and distance, which
can reduce their accuracy.
<a name="Hybrid"></a><h1>Hybrid</h1><br>
To overcome the limitations of both digital and analog technologies, hybrid systems combine the
advantages of both. A hybrid system uses analog components to handle real-world continuous
signals, while digital components perform processing, storage, and precise data manipulation. For
instance, in modern audio systems, sound is captured by an analog microphone, converted into a
digital signal for processing, and then converted back to analog for playback through speakers. This
combination allows systems to take advantage of the smoothness and natural qualities of analog
signals, along with the precision and efficiency of digital processing.
Hybrid systems are also common in communication devices, medical instruments, and many other
technologies. By merging the strengths of analog and digital technologies, hybrid systems offer more
robust, efficient, and versatile solutions than either system could provide on its own. As technology
continues to evolve, these systems will play an increasingly important role in meeting the complex
demands of modern applications.
</body>
</html>
6.7.1 Create table and adjust its attributes.
<html>
<head>
<title>Table</title>
</head>
<body>
<center>
<h1>Table</h1>
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
</center>
</body>
<html>
6.8.4 Add a frameset with multiple frames
<html>
<head>
<title>Iframe Layout</title>
</head>
<body>
<h1>Iframe Layout</h1>
<iframe src="[Link]" style="width: 100%; height: 50%;"></iframe>
<iframe src="[Link]" style="width: 100%; height: 50%;"></iframe>
</body>
</html>
OR
<html>
<head>
<title>Iframe Two-Column Layout</title>
</head>
<body>
<h1>Iframe Two-Column Layout</h1>
<div style="display: flex;">
<iframe src="[Link]" style="width: 50%; height: 500px;"></iframe>
<iframe src="[Link]" style="width: 50%; height: 500px;"></iframe>
</div>
</body>
</html>
