Developing a Website from Scratch

HTML Lesson 9: Developing a Website from Scratch

Developing a website from scratch yourself

Development of the structure

Today, many website development tools have emerged, including specialized portals designed for building websites based on provided templates, content management systems, and other similar tools. These systems naturally facilitate the resource creation process. However, for educational purposes, it’s necessary to learn how to create a website from scratch. For this, we’ll choose a simple design that uses a frame structure to organize the website’s page interface.

To begin, you need to prepare a working directory and the main necessary files. Notepad++It 
is recommended for working with files. Create a working directory (named site, for example) and arrange two folders within it, as shown in the figure:

In the main directory, create and save HTML files with the following names:

• index.html
• header.html
• menu.html
• titul.html
• footer.html
• chapter 1.html

Open the main executable file – index.html (the layout file) and add the code to organize the frame structure:

< html > 
< head > 
	< title > Frames < / title > 
< / head > 
< frameset  rows = "10%,80%,*" > 
	< frame  src = "header.html" noresize > 
	< frameset  cols = "20%,80%" > 
		< frame  src = "menu.html" > 
		< frame  src = "titul.html"  name = "main" > 
	< / frameset > 
	< frame  src =
 " footer.html " > </frameset> </html>​​
​​

Then you need to add the code to the web pages intended for this purpose:

• header.html

< html > 
< head > 
< / head > 
< body > 
< h1 > Logo/Header < / h1 > 
< / body > 
< / html >

• menu.html

< html > 
< head > 
< / head > 
< body > 
< h1 > Menu < / h1 > 
< / body > 
< / html >

• titul.html

< html > 
< head > 
< / head > 
< body > 
< h1 > Description < / h1 > 
< / body > 
< / html >

• footer.html

< html > 
< head > 
< / head > 
< body > 
< h1 > Copyright < / h1 > 
< / body > 
< / html >

• chapter 1.html

< html > 
< head > 
< / head > 
< body > 
< h1 > Chapter 1 < / h1 > 
< / body > 
< / html >

Organizing the work of hyperlinks in the menu

For hyperlinks in the menu.html file to work correctly, namely, for executable files to open in the frame to the right of the menu, two steps must be completed:

In the frame structure file, add a name for the frame in which we are going to open web pages in the menu:

< frame  src = "title.html"  name = "main" >

We’ve already done this when creating the frame structure. The frame we need is called main.

Add the hyperlink code to the menu.html file:

< html > 
< head > 
< / head > 
< body > 
< h1 > Menu < / h1 > 
< table > 
< tr > 
	< td > <a href = "chlava1.html" target = "main" rel = "noopener noreferrer" >   Chapter 1 < 
/ a > < 
/ td > < / tr > < tr > 
	< td > <a href = "chlava2.html" target = "main" rel = "noopener noreferrer" >   Chapter 2 < / a > < / td > < / tr > < tr > < td > <a href = "chlava3.html" target = "main" rel = "noopener noreferrer" > Chapter 3 < 
/ a > < / td > < / tr > < / table > < / body >​​​​​​​​​​​​​​​​​​

	  

			

In the links we indicated the target of the page output – a frame called main – target="main".

Adding CSS styles

To design a website, and in some cases to make its elements dynamic, it is necessary to use cascading style sheets.

First, create a document to store styles – a file called style.css, and place it in the files folder.

To connect the created style file to all pages of the site, you need to place a link to this file in the code of all pages, except for the file with the frame structure ( index.html ):

< html > 
< head > 
< link  rel = "stylesheet"  type = "text/css"  href = "files/style.css" > 
< / head > 
...

To add tag styling rules, please refer to our site’s CSS tutorials.

Explore More IT Terms