Many people think that creating your own website is tricky and requires serious preparation and use of sophisticated tools. In fact, to begin with, a minimum of knowledge and the most basic Windows program - Notepad - are enough. Following simple instructions on how to create a website in Notepad, you can make the first full page in a couple of hours.
Benefits of Notepad
Professional web developers, experienced website creators very rarely use Notepad in the process of work, however there are two categories of users for whom this program is an excellent choice:
- beginner typesetters;
- people who are not familiar with the process of creating web pages, who do not want to learn complex editors to write a simple business card site.
Many professionals got acquainted with layout and HTML, understanding how to create a site using Notepad. This allowed them to securely and quickly consolidate all the knowledge gained. Notepad is not designed to work with code and markup, it does not have any built-in hints, auto-completion and other chips available in modern programs, which means that a developer can only rely on himself and his memory.
The text editor Notepad has the most modest minimalistic interface, which means that it does not take a long time to understand the complex functionality of the program. This is very attractive to users who do not plan to spend time learning a tool that they will not often use.
Work basics
A step-by-step instruction on how to create an HTML site in Notepad begins with opening the program. The easiest way to find Notepad is through the Windows Start menu in the Accessories section.
The opened new file must be saved with the html extension. This is important, because with this extension the browser will understand that it is in front of a web page. The Save As command in the File menu will open a new window. Here you need to name the document index.html, select the UTF-8 encoding and the folder to save.
Now, at any time, you can open this file by double-clicking on it or by right-clicking the context menu and selecting "Open with Notepad."
The page has already been created and you can see how it looks in the browser. There are several ways to open a document in an Internet browser:
- by right-clicking on it and selecting "Open with Google Chrome" (or another browser) in the menu that appears;
- just by dragging the icon into the tab bar of an open browser;
- typing in the address bar of the browser the full address of the document, starting with the protocol file: //
file:///C:/Users/UserName/Desktop/my-site/index.html
Now the page is predictably virgin blank, it's time to fill it with information.
Hypertext Markup Language
All web pages on the World Wide Web are written in a special HTML language (hypertext markup language). Understanding its basics is very important to understand how to create a website in Notepad or any other editor. Using HTML, the developer tells the browser how the page should look. That is why it is important to set the correct file extension.
The language is based on tags - combinations of characters enclosed in angle brackets.
Tag examples:
<h1> </h1> <i>, </i>
The text between the opening and closing tags will be specially processed by the browser.
In addition to the data directly displayed on the page, when creating the page, you should specify special service information intended for the browser itself.
First drafts
You should start work with the correct design of the html-document. The basic structure of the page is as follows:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>The Best Site in the World</title> </head> <body> </body> </html>
The value of each element:
DOCTYPE - technical information for the browser indicating how it should perceive the code;html - root tag of the page;head - section of service information that is not visible to site visitors;meta - service tag, the charset attribute defines the encoding of the text;title - the name of the page displayed in the browser tab;body - the body of the document directly displayed on the page.
After saving the code and reopening (or reloading) the file in the browser, you can see the first change - the site name appeared on the tab.
Theme and structure
Before you understand how to create your own HTML site through Notepad, you need to clearly imagine how this site should look. For example, take the personal blog of a certain John Doe.
The main elements of the structure of this page:
- a hat with a logo and a title of the first level;
- horizontal navigation bar;
- the main content, represented by three articles, each of which consists of a heading, a brief description and a link to the full text;
- basement with copyright.
The HTML code for this page will look like this:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>The Best Site in the World</title> </head> <body> <div class="wrapper"> <header> <a href="index.html"> <img src="images/logo.png" alt="" width="100"> </a> <h1>John Doe</h1> </header> <nav> <ul> <li> <a href="bio.html"></a> </li> <li> <a href="life.html"> , </a> </li> <li> <a href="gallery.html"></a> </li> <li> <a href="contacts.html"> </a> </li> <li> <a href="thanks.html"></a> </li> </ul> </nav> <main> <article> <h2>-</h2> <div> , !! </div> <a href="posts/concert.html"> </a> </article> <article> <h2> </h2> <div> ... </div> <a href="posts/ice-cream.html"> </a> </article> <article> <h2> ?</h2> <div> . </div> <a href="posts/to-be-or-not-to-be.html"> </a> </article> </main> <footer> John Doe (c) 2018 </footer> </div> </body> </html>
To describe the web page, semantic tags from the HTML5 standard were used: header , main , nav , footer , article .
Code Explanations:
- In the header is an image wrapped in a link. With its help, the user will be able to return to the main page from anywhere on the site.
- The image itself is located in the
images folder at the same level as the index.html file. In the code, the width attribute of 100 pixels is strictly set for it using the width attribute. - The title is styled as an
h1 tag, which emphasizes its relevance. - The navigation menu is represented by an unordered list, and each item is a link to the corresponding page of the site. Now these sections are not yet, but in the future they can be created.
- For article titles, use the
h2 tag. - The Watch link leads to a separate page with the full article in more detail. These pages are also missing yet.
- All content is wrapped in a common block with the
wrapper class. Class attributes are commonly used to style elements.
Now the page looks like this:
This view is not very similar to the planned. To fix the situation, you need to add design.
To do this, create another file next to index.html and name it style.css . It will accommodate all the necessary styles.
At the moment, the project structure looks like this:
Style design
Continuing to figure out how to create a website in Notepad, we go to a new level - connecting a stylesheet.
In order for the browser to understand where to get the design, you must specify the address of the css file. This is service information, it should be placed in the head section.
<head> <meta charset="UTF-8"> <title>The Best Site in the World</title> <link rel="stylesheet" href="style.css"> </head>
Now everything that will be described in the style.css file, the browser will apply to the page. For example, change the background color:
body { background: #89745d; }
The full contents of the stylesheet will look like this:
body { padding: 0; font-family: sans-serif; font-size: 16px; background: #89745d; } .wrapper { padding: 20px; margin-left: auto; margin-right: auto; width: 960px; } header a { text-decoration: none; } header img { vertical-align: middle; margin-right: 20px; } header h1 { display: inline-block; vertical-align: middle; color: #f8d9b7; } nav { padding-top: 20px; padding-bottom: 20px; } nav ul { margin: 0; text-align: center; } nav ul li { display: inline-block; list-style: none; padding: 0px 15px; } nav ul li a { color: #f8d9b7; text-decoration: none; } nav ul li a:hover { text-decoration: underline; } article { padding: 20px; margin: 20px 0; background: #f8d9b7; box-shadow: 0 0 15px #f8d9b7; } article h2 { margin-top: 0px; margin-bottom: 15px; color: #d57106; } article a { font-size: 14px; font-style: italic; color: #d57106; } footer { padding: 20px; text-align: right; color: #f8d9b7; font-size: 14px; font-weight: bold; }
Explanation of styles:
- The basic font parameters are set for the body element: a sans-serif family and a size of 16 pixels.
- The main container has a constant width of 960 pixels and is centered.
- Menu list items are declared as line-block elements, this allows you to place them in one row. Underscore is removed for links, now it appears only when you hover over.
- The article block has a contrasting background and a slight shadow.
If you update the document in a browser, you can see its final view. The first web page has been created successfully!
However, a blog cannot consist only of the main page with a list of articles. It is necessary to somehow display a separate post with the full text, in addition, the pages indicated in the navigation menu are already planned.
The most important concept of the Internet is the linking of individual documents through links. How to create a site with hyperlinks in Notepad?
Add pages
In fact, everything necessary has already been done. Menu items and "Watch" pointers are wrapped in a special tag a , which is responsible for the formation of the hyperlink. The desired address is indicated in the href attribute. It remains only to create the pages themselves and place them next to the index.html file.
Example code for the photo album page ( gallery.html ):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>The Best Site in the World</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <header> <a href="index.html"> <img src="images/logo.png" alt="" width="100"> </a> <h1>John Doe</h1> </header> <nav> <ul> <li> <a href="bio.html"></a> </li> <li> <a href="life.html"> , </a> </li> <li> <a href="gallery.html"></a> </li> <li> <a href="contacts.html"> </a> </li> <li> <a href="thanks.html"></a> </li> </ul> </nav> <main> <div class="gallery"> <figure> <img src="images/in-forest.jpg" alt=""> <figcaption> </figcaption> </figure> <figure> <img src="images/winter.jpg" alt=""> <figcaption></figcaption> </figure> <figure> <img src="images/on-beach.jpg" alt=""> <figcaption> </figcaption> </figure> <figure> <img src="images/work.jpg" alt=""> <figcaption> </figcaption> </figure> <figure> <img src="images/new-year.jpg" alt=""> <figcaption> </figcaption> </figure> <figure> <img src="images/picture.jpg" alt=""> <figcaption></figcaption> </figure> </div> </main> <footer> John Doe (c) 2018 </footer> </div> </body> </html>
The main structure, header, navigation and basement completely duplicate the main page, only the main section is changed, which now contains a gallery with several figure blocks. Inside each block there is a picture and a caption to it.
The page uses the same style.css file connected inside the head section. It is necessary to add several rules for the gallery to it:
.gallery { font-size: 0; } figure { display: inline-block; vertical-align: bottom; width: 33.3333%; box-sizing: border-box; padding: 10px 15px; margin: 0px; font-size: 14px; color: #f8d9b7; text-align: center; } figure img { width: 100%; margin-bottom: 10px; }
It uses a css technique that allows you to place blocks three in a row and set them exactly one third the width of the parent container.
The final view of the gallery is presented below.
Hyperlinks provide movement between the pages of the site: from the menu you can get to the "Photo Album", and by clicking on the logo - move back to the main one.
Web site placement
So, we figured out using step-by-step instructions on how to create a website in Notepad. But now no one sees him! But personal blogs are created in order to share your life with the whole world.
To correct the situation, it is necessary to place all the created files on the hosting and select a domain for the site using a special service. There are a huge number of hosting providers that provide services for every taste and budget.
After concluding an agreement with the hoster, access to the control panel will appear, where you can transfer all created files. At the moment, the structure of the project is as follows:
HTML files for the rest of the site’s pages should also be added here.
Code Editors
Now you know how to create an html site in Notepad, but there are more convenient ways. Professionals use special editors designed to work with code. They offer many convenient options that facilitate the creation and editing of sites.
The most popular tools are Visual Studio Code, Sublime Text, Notepad ++. Do not be afraid of their complexity. Knowing how to create a site using Notepad, you can easily figure out what's what. All the additional functionality of these editors is intended to facilitate the work of the webmaster and should not interfere with it in the process.
Creating a site through Notepad is just the beginning of a long interesting path for a web developer.