Scribd
Upload
40 views

LabHTML02 HTML Structure

The document provides instructions for creating several HTML/CSS assignments, including creating a navigation bar with specific styling constraints, adding page content with styled headings and paragraphs, combining the navigation bar and page content into a simple website with a styled footer, and displaying exam results in a table with particular cell formatting. The assignments involve creating HTML files and linking separate CSS files to style the elements according to the given constraints.

Uploaded by

Đạt Lương Ngọc
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
40 views

LabHTML02 HTML Structure

The document provides instructions for creating several HTML/CSS assignments, including creating a navigation bar with specific styling constraints, adding page content with styled headings and paragraphs, combining the navigation bar and page content into a simple website with a styled footer, and displaying exam results in a table with particular cell formatting. The assignments involve creating HTML files and linking separate CSS files to style the elements according to the given constraints.

Uploaded by

Đạt Lương Ngọc
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

1.

    Lab: HTML Structure


1.1         Navigation Bar

Create a Web Page like the following.

Create two files: "nav-bar.html" and "nav-bar.css".

1.1.1        Constraints
·         <nav> tag as container
·        <body>
o   Margin: 0px;
o   Padding: 0px;
o   Background Color: #CCCCCC;
·        <ul> tag for unordered list
o   Background Color: #444;
o   Center the text
o   Padding: 0px;
o   Margin: 0px;
o   list-style:none;
·        <li> tag for list item
o   Text size: 24px;
o   Line Height: 40px;
o   Height: 40px;
o   Padding: 20px;
·        <a> tag for hyperlink
o   text-decoration: none;
o   Text-Color: #ffffff;
 

1.1.2        Hints
Use:
·        <li> with display: inline-block;
1.2         Page Content

Create a Web Page like the following using "page-content.txt".

Create two files: "page-content.html" and "page-content.css"

1.2.1        Constraints
·        <section> as a container
·        <article> tag for content
o   <header> with:
§  <h1> Text size: 28px;
§  <p> Font Style: italic;
·         Paragraph
o   Text size: 24px;
·        <body>
o   Margin: 0px;
o   Padding: 0px;
o   Background color: #CCCCCC;
·        <section>
o   Margin Left: 20px;
1.3         Simple Website

Create a Web Page like the following

Create two files: "simple-website.html" and "simple-website.css".

1.3.1        Constrains
·        Use the html and css from previous two problems
·        <footer> tag
o   Background color: #444;
o   <p> tag for text
o   Text Color: #fff;
o   Center the text

1.3.2        Hints
Use:
·        &copy; for copyright symbol
1.4         Exam Results

Create a Web Page like the following using exam-results.txt.


Create two files: "exam-results.html" and "exam-results.css"

1.4.1        Constrains
·         Border for <table>, <td>, <tr>, <th>
o   1px solid #000000;

·        <thead> with <th colspan="4"> for Table Heading


·        <td class="bold"> for bold text
o   Font Weight: bold;
o   Center the text
·        <td class="result" colspan="4"> for text in the footer
o   Width: 400px;
o   Text Align: right;
o   Padding Right: 5px;
·         Table data
o   Padding Left: 5px;

1.4.2        Hints
Use:
·        &#8470; for number sign
 

 
 
 

You might also like