And we will write a block site template.
In this article, I will give you not only the code of the block site template, but I will also tell you in detail, and show you what and how you can change it in it, and where to put the files.
So, such is the site.
I took the topic of cargo transportation as an example because most often it is people working in this area who turn to me for help.
But after reading the article, you will be able to do everything on your topic, and with your own site framework design.
It will take as long as it takes to carefully read the article and the materials on the links, and consistently follow my instructions.
Block site code
/ * Styling * /
http://trueimages.ru/img/81/90/b1718f15.png">
our work
Hello dear future webmasters!
I am 55 years old and I am glad to welcome you to my website.
This site is the first one I developed myself,
and before that he only knew how to enter the Internet.
Why did I decide to do it?
During the 3 months until
understood site building and created this resource
found that the authors of the guides for creating
sites take many of the nuances for granted
and do not pay attention to them.
And to me, given
age and "experience", it was not easy to understand just these
nuances, they took up the most time. And I decided
write your own material, so that it would be easier for others
navigate the flow of new information.
http://trueimages.ru/img/0d/64/07a18f15.png">
Here
"Chewed" all the little things accompanying the creation of the site,
by which other authors usually slip by.
If you do not understand something, ask, for
I have no "stupid" questions.
Read and create your site yourself, how
whatever your age and work experience on the computer.
I am sure you will succeed even better, and for sure, in
several times faster than mine.
This is the code of a static site, which means that on screens with different extensions, it will remain the same size.
That is, on mobiles, he will have a horizontal scroll bar, which he will have to use in order to view the entire site.
Now let's get back to our example.
Before you start working with the code, you need to create a place where the site will be located before it is displayed on the Internet.
To edit this code, you need an HTML editor. Whoever has it is very good, whoever does not, I suggest.
How to start working in it, that is, create a file, read.
When the editor is installed, open it, copy lines 1 - 6 from the above code, and paste into the editor field, and then lines 118 - 153, and also paste into the editor.
Thus, we have selected the HTML part of the code from which we will create an HTML file. Remove my line numbering, create a file, name it index.html, and save it to your site directory.
The directory should look like this:
The next step is to create a style.css file that will contain the stylesheet.
Here attention! The style.css file, in the future, will be connected to all pages of the site, so in it you need to collect the styles that form the basis of the page.
And these are all the styles from the above code, except for the .left and .right selectors, which are directly related to the text of the article.
In the future, if you want to make any changes to the site design, it will be enough to add them to the style.css file, and they will be displayed on all pages.
So, in the site directory, create another folder, and call it css.
Then we return to the editor, open a new document (the first panel icon), copy and paste lines 8 - 80 and 90 - 116 into it.
We skip only the styles that decorate the pictures in the text, since they are intended for only one page.
Remove my numbering, and save this new document into a newly created css folder called style.css.
This is done as follows: in the tag
, it is possible between tags
and
, the tag is inserted <link>, with attributes defining the location and purpose of the css.</p>
<p><link
href
="css/style.css
" type
="text/css
" rel
="stylesheet
"></p>
<p>After the tag <link>, we will include the styles that decorate the pictures located in the text of the article. (lines 81 - 88). We remove my numbering and comments, since css comments do not work in the html file, and even vice versa, they can ruin everything.</p>
<p><style
"><br>.left ( <br>float: left; <br>margin: 30px 7px 7px 7px; <br>
} <br>.right ( <br>float: right; <br>margin: 7px 0 7px 7px; <br>
} <br>
</style
></p>
<p>After each manipulation with the code in the editor, do not forget to save the changes (third icon from the left). In this case, the file icon should turn from red to blue.</p>
<p>View in the editor:</p>
<p><img src='https://i2.wp.com/starper55plys.ru/wp-content/uploads/2013/08/4.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>The next step is to deal with the images. My pictures are uploaded through the trueimages service, only for the page to open in your browser.</p>
<p>You will need your own images, and you need to make them, or find them on the Internet.</p>
<p>You can see it in the article of the same name. If, however, you have Photoshop, then it is better to do all the images in it.</p>
<p>All made or found images must be placed in the images folder of the site directory.</p>
<p>The first step is to change the site header. To do this, remove the tag in the index.html file. <img>with my picture (line 124)</p>
<p><img src='https://i0.wp.com/starper55plys.ru/wp-content/uploads/2013/08/5.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>Then, in the style.css file, remove the img selector.</p>
<p>background-image: url (../ images / schapka.png); <br></p>
<p>In the editor it will look like this</p>
<p><img src='https://i2.wp.com/starper55plys.ru/wp-content/uploads/2013/08/6.png' align="center" width="100%" loading=lazy loading=lazy></p>
<p>The colon at the beginning of the image address is used when the selector is in a separate css file. If styles are included in the html file, the colon is not put at the beginning of the address.</p>
<p>Please note that the size of the image should not exceed the size of the header block. It is defined as follows: right-click on the picture file, select "Properties" in the menu that appears, and then, "Details", the dimensions will be shown there.</p>
<p>Now, if you go to the "Start" menu and open index.html, a page with your image in the header of the site will open.</p>
<p>Change the rest of the pictures (lines 128,129,130,135,141) Unlike the previous one, only the addresses need to be changed in them. Delete the addresses of my images, and insert the addresses of yours.</p>
<p>After which they will take on something like this. The name of the picture I have is i2.png, and you will have your own.</p>
<p><p
><img src='/phones-and-pdas/krasivye-css-shablony-gde-skachat-gotovye-css-shablony-e-shopper/' loading=lazy loading=lazy>our employees</p
></p>
<p>Well, it remains to write your titles, arrange and move them where you need to (how to do this is stated in the comments to the code), write your own text, and the main page of your site is ready!</p>
<p>If you want to change the position of the sidebar, or make two sidebars, then the code of such templates is presented in the article. After reviewing them, you can make small changes to the code presented in this article and get the desired result.</p>
<p>So the main page of the site is ready, you can start creating categories and pages. I will show how one heading is created, and there is one page in it, and the rest you, in the same way, will do on your own.</p>
<p>In the site directory, we have a content folder. Open it and create another folder - rubrica1 (you will of course have your own name). In this folder, create two more folders - css and images.</p>
<p>We put the style.css file in the css folder, and in the images folder, firstly - the main images that should be on each page (in my case, this is the site header and menu markers), and secondly, you will put all the images that you will be to draw up articles in this section.</p>
<p>Do you urgently need to make a website using only HTML and put it on the Internet? Then it will not be difficult for you to copy the finished code and follow my instructions.</p>
<p>True, a full-fledged resource, using one programming language, is difficult to make, but a business card site from several pages is quite possible.</p>
<p>If someone has exactly this goal, and there is no desire to learn other languages, then this article is for them.</p>
<p>In short, in a self-written version, without using a CMS, nothing is easier.</p>
<p>And for those who need something cooler, at the end of the article there are links to articles with block template code using CSS, and dynamic site code using PHP.</p>
<p>We will create a website in pure html right on this page, so to speak - a website within a website, quite working and ready to be filled with content.</p>
<p>Let's divide the whole process into three parts.</p>
<p>1. Creating a site directory on your computer.</p>
<p>2. Website development.</p>
<p>3. Transfer of the site from our computer to hosting, that is, to the Internet.</p>
<p>Creating a site directory on your computer</p>
<p>The first point is the easiest. How to create a directory is very clearly shown in the article (all links from this page are opened in a separate window so as not to get lost).</p>
<p>And what, and in which folder to put, I will show in detail after the code of the main page, so that there is already something to go to the directory with.</p>
<p>Then let's move on to the second point, the most creative one.</p>
<h3>Website template creation</h3>
<p>To create a template, you will need an editor, into which you will need to paste the code below.</p>
<p>It can be either a simple Windows Notepad or any other text editor.</p>
<p>Let's take a layered HTML table as a template. Previously, before the advent of CSS, all sites were written in tables, but now block layout has become more popular.</p>
<p>But still, the table structure is not outdated and has been used successfully.</p>
<p>For example, an investment CMS H-script with the most complex functionality, it is entirely collapsed on the basis of tables.</p>
<p>So, here's a site with minimal design.</p>
<p>How to design tables in the future is shown in great detail in the article.</p>
<table border="1" rules="rows" r="" align="center" style="width:100%; border-radius:5px; margin-bottom:20px;"><tr><td bgcolor="e6e6fa">
<table border="1" bgcolor="#7FFFD4" height="90" cellpadding="" style="width:100%; border-radius:5px; background-image: url(https://starper55plys.ru/wp-content/uploads/2018/11/170.png); background-size: 100%; background-repeat: no-repeat;"><tr><th style="text-align:center;">
<span>Site name (organization)</span>
<h3>Description of the site</h3>
</th>
</tr></table><table border="1" bgcolor="e6e6fa" cellpadding="10" style="width:100%; border-radius:5px;"><tr><td rowspan="4" bgcolor="e6e6fa" style="width:80%">Page <p>Hello dear future webmasters! I am 55 years old and I am glad to welcome you to my site. <br>This site is the first that I developed independently, and before that I could only access the Internet.</p>
<p>Why did I decide to do it? For those 3 months, while I was versed in site building and created this resource, it was discovered that the authors of guidelines for creating sites take many nuances for granted and do not pay attention to them. <br>And for me, given my age and lack of experience, it was not easy to understand just these nuances, they took up the most time.</p>
</td>
<td align="left" style="border-radius:5px; width:25%;">
<h3>Menu</h3>
</td>
</tr><tr><td bgcolor="e6e6fa" align="center">
<h3>general information</h3>
<p>General information text</p>
</td>
</tr></table></td>
</tr></table><p>
<!DOCTYPE html><br>
<html
lang
="ru
"><br>
<head
><br>
<meta
charset
="utf-8
" /><br>
<title
>Name of the site
<
! - Create a container table, which we set the following
registration:
border = "1" - the border around the container. By 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 border.
style = "width: 60%;" - add style properties that make
the container and the entire site are "rubberized".
It is impossible to make a full-fledged responsive design in this way.>
border = "1"
align = "center"
rules = "rows"
style = "width: 60%;">
<! - Create a string-->
<! - Create a row cell-->
|
