LabSheet4 - HTML COLORS & LISTS
|
Name |
LOY DONG XUAN |
|
Matric. No. |
AI2000236 |
|
Section |
6 |
|
LabSheet4 |
HTML COLORS & LISTS |
The
following are the the code that saves as mypage3.html
<html>
<head>
<title>My first
Webpage</title>
</head>
<body bgcolor ="EDDD9E">
<h1 align ="center">
My first Webpage
</h1>
<p>
Welcome to my <strong>first </strong>webpage.
I am writing this page using a text
editor and plain old html.
</p>
<p>
By learning html, I'll be able to
create web pages like a pro..........................<br />
which I am of course.
</p>
Here's what I've learned:
<ul>
<li>How to
use HTML tags</li>
<li>How to
use HTML colours</li>
<li>How to
create Lists</li>
</ul>
</body>
</html>
Figure 1.1 shows the HTML code displayed on the browser.
1. Explain about the HTML code
above.
<html>
<head>
<body bgcolor ="EDDD9E"> //This is light yellow royal background
<h1 align ="center">
</h1>
<p>
By learning html, I'll be able to create web pages like a pro..........................<br /> which I am of course.
//This is a paragraph in the body
//The <br> tag inserts a single line break.
<p>
Here's what I've learned:
<ul>
<li>How to use HTML tags</li>
<li>How to use HTML colours</li>
<li>How to create Lists</li>
</ul>
</p>
//The <ul> tags defines an unordered (bulleted) list.
//The <li> tags will make the list items be displayed with bullet points.
</html>
1.
Explain about the HTML code above.
We
have everything surrounded in the HTML tag, we have the start and ending tag.
Inside that, we have a head area and a body area. The head has nothing to do
with the output that is in the browser.
The
head has things like the page title has things like links to CSS files and
JavaScript files that we want to use metadata such as the description and
keywords things like that the description and keywords are actually used by
search engines like Google so that it knows some more information about what
actually on the web page. In this case, the page title is “My first Webpage”.
Then
in the body, we have the actual markup that is going to display in the browser
so headings text images things like that. <body bgcolor ="EDDD9E">will
set the background to the hex color code#EDDD9E, which is a light yellow royal
color. We make the "My first Webpage" centered by adding 'align =
"center" ' behind “h1”. We make a new paragraph, the text displayed
is “Welcome to my first web page” and followed by the text “I am writing this
page using a text editor and plain old html”. The content inside <strong
> is displayed as bold, which is the text “first”. We noticed that
<br> breaks the text so both texts are not in the same line. We can also
use < div > < / div > to make a new line instead of <br>.
And
then we created a new paragraph, the text displayed is “By learning html, I’ll
be able to create web page like a pro.....................” and followed by the
text “which I am of course”. We noticed that <br> breaks the text once
again so both texts are not in the same line.
In the third paragraph, the text displayed is “ Here’s what I’ve learned: ” The
<ul> tags define an unordered (bulleted) list. The <li> tags will
make the list items be displayed with bullet points. It will sort the text like
this:
· How to use HTML tags
· How to use HTML colors
· How to create lists
2. Change the given HTML code by using an
ordered list tags.
The HTML <ol> defines an ordered list. The modified
code will like so:
Here's what I've learned:
<ol>
<li>How to
use HTML tags</li>
<li>How to
use HTML colours</li>
<li>How to
create Lists</li>
</ol>
Figure 1.2 shows the
modified HTML code displayed on the browser by using ordered list tags.
3.
List 10 colours HEX value in HTML codes.
List of common HTML color codes:
4. Provide an HTML code for definition lists.
Simply
put it is a list of definitions. For the unabridged version read the relevant
section in the HTML specification. Basically a definition list is composed of
three HTML elements and some text. These are the <dl>, <dt> and
<dd> elements.
<dl>
<dt>
< DL >
<dt>
<dd>
A definition list is
the container element for DT and DD elements. The DL element should be used
when you want to incorporate a definition of a term in your document, it is
often used in glossaries to define many terms, it is also used in “normal”
documents when the author wishes to explain a term in more detail (Like this
definition).
</dd>
<dt>
< DT >
<dt>
<dd>
The term currently
being defined in the definition list. This element contains inline data.
</dd>
<dt>
< DD >
<dt>
<dd>
The definition
description element contains data that describes a definition term. This data
may be either inline, or it may be block level.
</dd>
</dl>
Here
is an example of using definition lists the list out the definition of the
<dl>, <dt> and <dd> elements:
Figure
1.3 shows the output of the HTML code.
Comments
Post a Comment