HTML Colors & Lists

<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>

Explain about the HTML code above.

 

  • The HTML document itself begins with <html> and ends with </html>.

  • The <head> element is a container for all the head elements. The <head> element can include a title for the document, scripts, styles, meta information, and more.
  • The <title> tag is required in all HTML documents and it defines the title of the document. The <title> element:
    • defines a title in the browser toolbar
    • provides a title for the page when it is added to favorites
    • displays a title for the page in search-engine results

     

  • The <body> tag defines the document’s body. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. The bgcolor attribute specifies the background color of a document.
  • Search engines use the headings to index the structure and content of your web pages. Users skim your pages by its headings. It is important to use headings to show the document structure.<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
  • The text-align property specifies the horizontal alignment of text in an element.
  • The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).
  • The <ul> tag defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists.

Refer:

https://www.w3schools.com/HTML/html_basic.asp

https://www.w3schools.com/tags/tag_head.asp

https://www.w3schools.com/tags/tag_title.asp

https://www.w3schools.com/tags/tag_body.asp

https://www.w3schools.com/hTml/html_headings.asp

https://www.w3schools.com/cssref/pr_text_text-align.asp

https://www.w3schools.com/tags/tag_p.asp

https://www.w3schools.com/tags/tag_ul.asp

Change the given HTML code by using an ordered list tags.

<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:
<ol>
<li>How to use HTML tags</li>
<li>How to use HTML colours</li>
<li>How to create Lists</li>
</ol>
</body>
</html>

The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical. Use the <li> tag to define list items.

Refer:

https://www.w3schools.com/tags/tag_ol.asp

List 10 colours HEX value in HTML codes.

  1. Red
    #ff0000
  2. Green
    #008000
  3. Blue
    #0000ff
  4. DodgerBlue
    #1e90ff
  5. Violet
    #ee82ee
  6. Gray
    #808080
  7. Lime
    #00ff00
  8. Maroon
    #800000
  9. Pink
    #ffc0cb
  10. Orange
    #ffa500

Refer:

https://www.w3schools.com/colors/colors_picker.asp

https://www.w3schools.com/html/html_colors.asp

Provide a HTML code for definition lists.

<html>
<head>
<style>
dl {
display: block;
margin-top: 1cm;
margin-bottom: 1cm;
margin-left: 2cm;
margin-right: 2cm;
}
</style>
</head>
<body>

<p>A dl element is displayed like this:</p>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

</body>
</html>

The <dl> tag defines a description list.

The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).

Refer: 

https://www.w3schools.com/tags/tag_dl.asp

dlExample 1

 

Leave a comment