In this tutorial layout of a website will be explained and it's parts will be defined with some styling to make it more attractive and easy to use.
Examples of layout with source code.
<styletype="text/css">table{width:100%;height:100%;border:0;}.c38-d1{background:linear-gradient(to right, #61ba6d, #83c331);padding:10px;}.c38-d2{background-color:lightgrey;width:25%;padding-left:5px;}.td-3{background-color:white;width:100%;padding:5px;height:300px;}.td-4{background-color:#001a33;padding:20px;color:white;}table{border:2px solid grey;}</style>
<!DOCTYPE html><html><head><title>HTML Layout</title></head><body><table><tr><tdclass="c38-d1"colspan="2"><h3>Main title webtags</h3></td></tr><trvalign= "top"><tdclass="c38-d2"><b>Main Menu</b><br />Home<br />About<br />Contact</td><tdclass="td-3"><p>webdevelopment and technical shart courses.</p></td></tr><tr><tdclass="td-4"colspan= "2"><center>Copyright © 2023 webtags.com.pk</center></td></tr></table></body></html>
Output of above code
Main title webtags |
|
|
Main Menu Home About Contact |
webdevelopment and technical shart courses. |
|
|
|
Explanation of above example
This is a simple example of page layout whit is built
with the help of table using HTML. First of all as you
saw there is table element there are some styling applied
on the table element like width, height, and border.
After this as you know a table consists on row and columns.
So the first row is used for main title of the page and
also some styling are applied on it make it more responsive
and attractive.This is just like header of a page commonly
used in web-page after this, there is row for a side bar
which is also display with row and having some styling
properties applied on it.There is main content area having
white background color. After these all there is footer of
the page which is also displayed with the help of a row
of table. Some styling properties like color and font-size are
applied on it.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
