Either in free or paid builders. But still, at the beginning of 1990-2000, sites were created mainly in HTML, without using any calls to the database. Various programs that allow you to edit HTML + CSS in real time, for example, Dreamweaver - appeared only at the very end of the 20th century. Therefore, sites were created in notepad and other similar editors. Although now there are many convenient ways to make a quality resource, creating a website using notepad allows you to learn the basics of page building and the basics of HTML in general.
So, in order to create a website using notepad, you first need to create an HTML file. This can be done as follows:
Go to Start Menu -> All Programs -> Accessories -> Notepad
And immediately save it in HTML format: In notepad, click: File -> Save As
And write the name of the file, for example index.html
Now we can start directly creating HTML layout in notepad. First, let's write the basic markup of the HTML code, you can copy and paste it right away so as not to waste time.
My first site
In fact, these are the basic elements that make up any web resource. Anything in parentheses is called an HTML tag, or just a tag. All HTML tags are opened, contain some information and then closed. There are other tags that don't need an end tag, but we'll talk about them later. Now we are much more interested in the answer to the question "how to create a website in a notebook?"
Let's take a look at each of them so that we can easily learn how to create websites in notepad.
HTML tags for creating a website using notepad
- DOCTYPE - Allows the browser to determine what type of document it has opened, since an HTML document has many versions.
- html - the tag that opens and closes the entire web page
- head - the head (or head) of the document. This tag carries information for the browser and is not displayed on the web page. It contains mostly information for the browser and, CSS styles, which we will write a little later, and various scripts.
- meta - Tells the browser and search engine certain information. In this case, the meta tag tells the browser to use the UTF-8 encoding (in order to display the Russian language correctly). In other cases, this tag may indicate some other data, for example, article author, page description, keywords.
- body - body (or body) of the document. This tag contains everything that we currently see on the page, we can say that it includes the skeleton or wireframe of the web page.
- h1 - The main heading on the page that has a big impact, such as
- p - paragraph - the text that we see on the page
Of course, we ended up with not the best web resource in the world, but do we have to start somewhere? :)
In this article, we have not created any menu, if you are wondering how to make a horizontal menu for your site, then welcome to.
Now let's make it look nice, write a few styles inside the tag
Body (background: # F2F2F2; max-width: 900px; margin: 0 auto; padding: 20px;) h1 (color: # 4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE ;) p (font: italic;)
As a result, our example site made in notepad in the code looks like this
My first site
Just a little more, and I will learn how to make the best sites in the world.
You have now learned how to create simple websites in notepad. Try using different styles and tags to get an idea of how sites work.
UPD3. When you have already created a site and want to place it on the Internet, you will need hosting, I wrote how to choose a server and made a selection of the best.
In general, I will appreciate the time for basic study html like 2-8 hours, the rest is optional. And, of course, the study time depends on the interest. I recommend breaking it up over several days for 20-30 minutes.
You are ready? Let's go then!
We do NOT need an Internet connection to create a page in html.
We need
1) We choose text editor... Enough for the first time Notepad(in it we only need the command Save as)| If you want to immediately start programming in specialized text editors, then pay attention to: 1) for Windows NotePad ++(download or) Intype(download) 2) for Mac and Linux They differ from regular text editors mainly in that they automatically indent! make it possible to resave the file in a different encoding (note, you will encounter it in the future), color the tags in different colors, such as the code at the bottom of the lesson. In a regular editor, it will be the same color. |
2) Any internet browser, for example Internet Explorer for Windows or Safari for Mac OS X and iOS. Yes, you can also Mozilla, Google chrome, Opera, Yandex and Mail browsers, etc.
Let's start creating an HTML page
1) create a folder on the desktop html... We will do this so that the lessons are structured and contained in one place.2) We create our file in a text editor such as NotePad. Further Save as.
It is better to choose UTF-8 encoding, then choose all file types and select the file name with .html at the end, for example index.html
We select as a directory (folder) where to save our html
Push save... Ready!
The question is often asked that file extension not visible... Let's sort it out in order
The ability to see the file extensions can help in determining the exact type of the file and makes it possible to manually (with the command rename) change not only the extension, but also the file type (for example, from txt to html)
| it should NOT look like this: photo, text document, game This is how it should look like: photo.jpg; text document.txt; game.exe But if your file names still look like in the first version (WITHOUT, for example, .txt; jpg; .exe at the end of the file name), do the following: We look at the settings for files and folders: For Win XP Open any folder - Service (top in the panel) - Folder options - View - Hide extensions for registered files (uncheck) - Apply For Win 7 Open any folder - Organize - File and search options -View - Hide extensions for registered file types (uncheck) - Apply For Mac OS Click on the desktop - Finder - Preferences - Advanced - check the box in Show all file extensions - Apply |
3) paste into it All the code (along with comments), listed below:
My page title
4) open the file. You can choose another browser to open this file, for this we right-click on our file index.html - To open with and select a browser from the list, for example, Internet Explorer, Google Chrome, Mozilla, Yandex Browser, etc.
As a result, opening the resulting index.html You should see a page like this:
Picture 1.
On the Figure 1 we see how as a result the browser has displayed your page. The text of the following elements is highlighted in red:
My page title
This is my first web page!
In the code below you can see the basic minimum of the html document. It is imperative to learn it and not to confuse opening and closing tags in places.
Tag head highlights the head of the document. It contains elements mainly related to using the Browser in processing the elements of your page (title, keywords, authorship, etc.). We will talk about its content later.
Tag title stands for the title of the page. This is the only tag contained in head that is displayed on the page. What to enter after the opening and before the closing tag will be the Name of your page on the Internet
Tag body stands for the Body of the page. What to write after the start and end tags body and will be the Content of your page
Any title
Just text
Text in a paragraph. It will be written on a new line and will end with a closing tag.
Other text
Almost all tags in HTML opening and closing(an exception, for example, the img tag, which denotes the insertion of an image).
Let me remind you once again that it is important not to forget to write closing tags for all other types of tags, otherwise the Browser will not understand exactly where you wanted to end this or that element. As below:
I want to highlight text bold, and this one already in italics
We intentionally forgot the closing tag b after the word in bold. As a result, the browser displayed the following
I want to highlight text bold, and this one already in italics
As you can see, the text will be highlighted to the end in bold, and the one that was meant in italics will be both bold and italic. So be careful!
5) If you want to edit something in your file index.html(and now it opens only by the browser by default), then we press the right mouse button on our file index.html- choose To open with and from the list we select a text editor, it will be either Notepad (in English Notepad), or another text editor you have installed.
In principle, he explained the basics. So far, the html page looks quite simple, but in the next lessons I will tell you in detail about these and other elements and their purpose - we will insert images, make links and many other interesting things)
My congratulations!
Isn't it difficult?)
Every novice webmaster should know how to create html page, and this is done very easily and simply. I can confidently tell you that after you read this article, you will create html pages without any difficulty.
You can write html code in any text editor (even in notepad), but I recommend that you start using such a wonderful editor as notepad ++... It is very user-friendly and easy to use. You can download it from the official website https://notepad-plus-plus.org.
The main advantage of this editor is that it has code highlighting. Believe me, this is very convenient, because it is immediately noticeable where the tag opens and where it closes.
We open the program and as you noticed a new file named new 1, was created automatically.
Stages of creating an html page
Now from the new file we create html document in the following way:
1. Go to the file menu and select the item save as… or press hot keys ( Ctrl + Alt + S)
2. In the window that appears, select the location where we want to save the file.
3. In the field File name we write index and choose file type Hyper Text Markup Language file (* html; * htm; * shtml; * shtm; * xhtml; * hta).
Once selected file type, automatically inserted at the end of the filename
We close Notepad ++ and go to the specified folder where we saved the file. The file was created there index, with the html extension and with the default browser icon. When you double click, the file opens in your browser. My default browser is opera, so the saved file looks like this:
After opening the file in the browser, we do not see anything since our file is empty, there is not a single line of html code in it. Let's fix the situation by writing a couple of lines of code in the file. To do this, go to the folder with our file, right-click on it and select the item in the menu that appears .
The file will open in Notepad ++ editor. Now let's write the following code in the file:
Hello World
There is also another way to save the file, you need to click on the floppy disk icon located on the toolbar.
MOSCOW INSTITUTE OF OPEN EDUCATION
DEPARTMENT OF MATERIAL AND INFORMATION TECHNOLOGIES
Distance course materials
"Information technology and education"
Polilova Tatiana Alekseevna
[email protected]
How to create a web page
The easiest way to create a web page is to use the tools in the Microsoft Office suite. The latest versions of this package provide the ability to convert a regular document to HTML format with good code quality.
Word features
A document prepared in a text editor Word can be easily converted into a web page. However, it will not look as attractive as we would like it if additional steps are not taken. Let's look at a few examples.
Let's take some text.
Let's transform the document into a web page using the Save as web page ... operation (called from the main menu - the File item). Then the html-representation of the document will look like:
The first thing that catches your eye is that the text takes up the entire screen space. The line length is too long. For comfortable reading on the screen, the number of characters per line should be in the range of 50-65.
Using the table
In this case, you can do quite simply: create a table in the source document and place the required text in it. You can set a frame in the table. Then the appearance of the web page will be much improved and the page will look more attractive in the browser.
Background and style
It is advisable to choose a background that is not too bright so that the text is well read on it. Such a background in the proposed list is, for example, Rice paper. The layout of the page has noticeably changed:
Insert picture
You can add a picture to a document by taking it, for example, from a collection of clips.
You need to right-click on the picture, perform the copy operation, and then specify the place for the picture in the document and perform the operation of pasting the copied object.
If you insert a picture inside a paragraph, then it is better to change the properties of the picture by setting text flow around the picture (you need to select the Format main menu item and then Picture):
This will not create extra white space in the document.
Finally, you can add a frame and a shadow to the picture using the buttons on the Drawing panel - Line Type and Shadow Style. Such nuances noticeably add expressiveness to the page.
If the Drawing panel is not on the page, then you need to install it by selecting the main menu item View and then Toolbars and Drawing.
Ticker
Word allows you to add other design elements, such as a crawl line, to a web page. To take advantage of this opportunity, you need to open the panel of web components on the screen (from the main menu - the View item, then Toolbars and Web Components). Clicking on the Creeping line operation button opens an additional window for specifying the text of the creeping line parameters.
As usual, you can change the font and attributes in the line: font size and color of symbols. The web page will look like this on the screen:
We have given an example of only a very modest set of design techniques that can be used to design a web page based on an existing Word document.
Using design templates
If you are starting to create a page from scratch, then you can use the web page wizard, which in the dialogue will help you to form the document. Alternatively, you can use a ready-made page design template by choosing it from a fairly representative set. To do this, in the Create operation, select the Create with a template mode and then General templates. A form will appear on the screen in which you need to select the Web pages tab:
The user can choose the color and style solution independently, for example, using the Format - Theme settings.
Creating hyperlinks and bookmarks
The last issue that we plan to consider in this section is the creation of hyperlinks in the document.
If we want to link in a document to another document or another site on the Internet, then such a hyperlink can be done as follows: select a fragment of text (word) in the document and perform the operation Insert - Hyperlink ... A form will appear on the screen in which the address of the hyperlink is set. You can enter the address explicitly, or you can select a file in the window.
It should be remembered here that the address of the selected file on your computer may change when you build your site. Therefore, the implicit method of specifying the address is suitable only if the structure of your folder on the computer and on the Internet site are the same.
If the hyperlink is to link to another part of the same document, then you must first insert a bookmark at the beginning of the desired fragment. You need to perform the operation Insert - Bookmark, and in the form that appears on the screen, enter the name of the bookmark.
PowerPoint web presentation
PowerPoint is focused on creating presentations on a computer. However, it has the function of converting a prepared presentation into a web format.
You can open prepared presentation and perform operations (from the main menu) File - Save as web page. As usual, you need to specify the name of the web presentation in the window that opens. As a result of the transformation of the presentation, a file with the specified name and extension .htm and a folder of the same name with additional materials will be created.
If you now call the web presentation from the browser, you can see the conversion result on the screen.
A special line is created at the bottom of the screen, where buttons for navigating to slides and buttons for setting various options for viewing presentations are located.
The presentation can be viewed with a slide outline showing. But if this information is not of interest, then the field reserved for displaying the structure on the screen can be removed (the operation expand / collapse the structure in the bottom line).
The Slideshow button allows you to view your slides in full screen.
Creating hyperlinks
In a presentation, you can create hyperlinks that link objects on a slide, for example, to other slides. Thus, it is possible to create a hypermedia structure that naturally matches the ideology of the Internet. Let us explain this technique with an example.
Suppose we have several prepared slides on the flora of Lake Baikal, made up of a collection of photographs. Let's create a new slide - collection table of contents.
If the new slide is not the first in the sequence, then you need to go to the slide sorter mode (from the main menu using the View - Slide Sorter operations) and drag the new slide to the beginning of the collection.
Place small copies of all photos on the new slide. The easiest way to do this is in the most straightforward way: on a blank slide, sequentially copy all the photos in the collection, reduce their size and place, for example, in two lines. Pictures can be further decorated with frames with a shadow. You can add the title of your presentation to your table of contents slide. The presentation view in Slide Sorter mode is shown below:
Let's switch to the normal slideshow mode (View and then Normal commands). Select the photo on the table of contents slide and execute the Insert - Hyperlink command. In the window that opens, set the hyperlink transition - the number of the slide with the large photo, from which the smaller sample for the table of contents was copied.
Similarly, we will link other pictures on the table of contents slide with the corresponding slides with the originals of the photos.
If we now run our presentation for execution, then it will work as a hypermedia structure: when you click on a small photo, a transition will be made to a slide with a photo in an enlarged size.
There is very little left to improve our structure. Add an arrow to each slide with a photo in its upper left part (AutoShape on the Drawing toolbar), and make a hyperlink from this arrow that will go to the table of contents slide. Now the movement along the hypermedia structure we have created will become "two-way": from the table of contents you can go to the slides with photos, and from any slide you can return to the table of contents.
After converting the presentation to web format, our first page will look like this:
Clicking on the picture from the menu will jump to the slide with the big photo, and clicking on the arrow (at the top left of the slide) will jump to the page with the table of contents for the collection.
Gentlemen, good mood to all) Today I decided to write an article on the topic - How to create your own web page. This topic was pushed to me by readers and friends who, for some reason, still do not distinguish between the types of sites and pages on the Internet. I very rarely call something a web page))) However, many of my friends often say that. Especially for them, I decided to describe the main types of web pages that you can create for yourself in order to have a kind of representation of yourself online.
Before creating a web page, you should definitely create an email or email address. I described the options for creating in this article -. And if you have an email address, then we will follow the options for creating your personal web page. Read on for ways to help you create your web page.
One page site
The most ancient way))) For it you need to learn the basics of the HTML language. Doing this in our time is not at all necessary, there are a million services, which will be discussed below. However, if you want to understand how the site works and, in part, the Internet, then try to create a one-page site yourself. I described how to do this in the article -. There are options for building a one page website using website builders and free platforms.
Page on the social network Vkontakte
I think in our time the phrase: "I created myself a page on the Internet" refers most of all to the social network Vkontakte. VK is the most popular social network in the CIS. It takes 1 minute to create your own page here. Moreover, there are dozens of useful functions for you to use the Internet.
I wrote a lot about Vkontakte and I plan to write even more)) With this social network, you can and.
Vkontakte also allows you to create a convenient URL to your web page, instead of the standard URL when registering http://vk.com/id8032931. Then you can change it to a beautiful one - http://vk.com/vasheimya.vashafamiliya.
Facebook page
If Vkontakte is the most popular social network in the CIS, then Facebook is the number 1 social network in the whole world. Facebook, it is considered, seems to be for advanced Russian-speaking users))) But personally, I think that this is all due to the fact that Facebook is very popular and convenient.
Just like in Vkontakte, you can assign yourself a beautiful address for your web page. A complete manual - how to create a web page on Facebook, I described in the article -.
Blog
Blog is the most recommended option for me to create your own web page. The blog provides thousands of opportunities for self-realization and is very easy to use. Often as free as social media web pages.
Here is a selection of articles on creating a web page using a blog:
- - fast, but with the cost of hosting and a separate domain.
- Is a blogging platform from Google. Integrated with many Google services. Very handy if you are a Google fan))
- Is the fastest growing blogging platform. I read statistics in one of the American publications that Tumblr is more popular among US children 12-13 years old than Facebook !!! I think this is an indicator of the convenience and development of this platform.
- - here are the manuals for almost all known blogging platforms, including the above.
Diary
Here are all the basic options for creating your web page, or, in other words, your web presence. Literally 1 minute and you are already plunging into the space of the World Wide Web. Happy web page development!
