This is the easiest HTML site code. Nevertheless, it allows you a nice small website.
Sample template
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Name of the site</title>
</head>
<body>
<!--Create a container table.
Design:
border="1" - frame around the container. Increasing the number,
you can increase the thickness of the frame.
align="center" - Place the container in the center of the screen.
rules="rows" - remove the double frame.
style="width:60%;" - we add the style properties doing
container and the entire site "rubber".
To make a full-fledged responsive design,
this method is not suitable-->
<table
border="1"
align="center"
rules="rows"
style="width:60%;">
<!--Create a string-->
<tr>
<!--Create a row cell-->
<td>
<!--SITE HEADER-->
<!--In the cell of the row,
create another table for the site header.
Design
border="1" - 1px double frame
background="images/168.png" - picture in the header of the site,
if required. Insert your image URL
bgcolor="#7FFFD4" - background color in the header if there is no image.
cellpadding="10" - Indent content from the frame at least 10px.
style="width:100%; border-radius:5px;" - add "rubber"
and rounded corners of the frame-->
<table
border="1"
background="images/168.png"
bgcolor="#7FFFD4"
cellpadding="10"
style="width:100%; border-radius:5px;">
<!--Create a table row-->
<tr>
<!--Create a table column-->
<th>
<!--Column cell content-->
<h1>Site name (organization)</h1>
<h3>Description of the site</h3>
<!--Close the table-->
</th>
</tr>
</table>
<!--MAIN CONTENT-->
<!--In the same container cell, create another table.
for the main content.
Design as in the previous table-->
<table
border="1"
bgcolor="#e6e6fa"
cellpadding="10"
style="width:100%; border-radius:5px;">
<!--Create a string-->
<tr>
<!--Create a cell
Design:
rowspan="2" - merge two cells into one.
The number of merged cells by the number of cells in the sidebar.
style="width:80%" - the main content covers 80% of the total area,
the remaining 20% for sidebar-->
<td
rowspan="2"
style="width:80%">
<h2>Главная</h2>
<!--Red line string-->
<p style="text-indent:20px">
On the planet Dorothy, human "Sweet" JP races
in the Yellowline car race, the galaxy's
famous final elimination race,
despite two interplanetary wars,
to the most popular race in the galaxy, the Redline. </p>
<p style="text-indent:20px">The crowd is watching the race
on an outdoor giant monitor screen in
the desert town of The Water Stop.
JP's alien mobster mechanic, Joshua "Frisbee" Flathead,
is watching the televised race with a mafia boss who
constantly massages his gums with cocaine.</p>
<!--Close the cell-->
</td>
<!--SIDEBAR-->
<!--Create a sidebar cell-->
<td bgcolor="#e6e6fa">
<h3>Menu</h3>
<!--The paragraph for the link to the page of the site-->
<p>
<!--Link to the site page-->
<a href="">
<!--Picture marker in front of the page name-->
<img src="http://trueimages.ru/img/00/06/f4fffdb5.png">
<!--Page title
style="margin-left:5px;" - indent from marker-->
<span style="margin-left:5px;">Home</span></a>
<!--Close paragraph-->
</p>
<p>
<a href="">
<img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
<span style="margin-left:5px;">Page 1</span;></a>
</p>
<p>
<a href="">
<img src="http://trueimages.ru/img/31/ab/4dcb087c2ae4305edcd15171696.jpg">
<span style="margin-left:5px;">Page 2</span></a>
</p>
<!--Close the menu string-->
</td>
</tr>
<!--Create a string with additional information.-->
<tr>
<!--Cell with additional information-->
<td
bgcolor="#e6e6fa"
align="center">
<h3>Additional Information</h3>
<p>Additional text</p>
<!--Close the cell with additional information.-->
</td>
</tr>
</table>
<!--FOOTER-->
<!--Create a table-->
<table
border="1"
bgcolor="#7FFFD4"
height="100"
cellpadding="10"
style="width:100%; border-radius:5px;">
<!--Create a string-->
<tr>
<!--Create a column-->
<th>
<h3>Footer</h3>
<!--Close footer. If you want you can
do here a few rows and columns-->
</th>
</tr>
</table>
<!--Close the container table-->
</td>
</tr>
</table>
</body>
</html>
How to change the design of the HTML table, as well as add scripts and feedback forms, see here.
