Creating an html page in notepad: clarification for dummies. Center Align Header

Task 1: Creating Basic HTML Files

To create your HTML file, do the following:

Create a folder HTML, in which we will save the created Web pages.

Launch the standard Notepad program.

Type in the editor window the simplest text of the HTML file:

Training HTML file

Tuesday class schedule

Save the file as RASP.HTM.

To view the created Web page, download the Microsoft Internet Explorer browser.

Open in browser menu File(File), Open(open), View(Overview- Browse) and find the RASP.HTM file in the KURS folder and upload it. Make sure the name of the Web page (HTML Tutorial) is displayed in the browser's top status bar.

Task 2.Controlling the layout of text on the screen

Information.

When displaying HTML documents, browsers automatically lay out text on the screen, without taking take into account line breaks and consecutive spaces that occur in the file.

If necessary, follow p.p. 5-6 tasks 1.

Open the original source of the Web page - in the browser menu View(View), Source (asHTML) a window will open with the standard Notepad program, in which your Web page is presented in HTML commands.

Modify the text in the HTML file by placing the words "Schedule", "classes", "Tuesday" on different lines:

Training HTML file

Schedule

classes

on tuesday

Save your changes to the RASP.HTM file using the commands File(File), Save(Save). Close Notepad.

Use Microsoft Internet Explorer to view the newly retrieved Web page using the F5 key or using the commands View(View), Refresh (refresh). Has the image of the text on the screen changed?

Note

In the future, after making changes to the Web page, always follow steps 4-5.

Task 3. Line and paragraph break tags

Information.

There are special commands that perform a line feed and set the beginning of a new paragraph. In addition, there is a command that prevents the browser program from changing text formatting in any way and allows you to accurately reproduce the specified fragment of a text file on the screen.

Line feed tag
separates a line from subsequent text or graphics. paragraph tag

Also separates the line, but also adds an empty line, which visually highlights the paragraph. Both tags are singleton.

Make changes to the text of the HTML file:

Training HTML file

Schedule

classes

on tuesday

4. Save your changes to the RASP.HTM file.

Use Microsoft Internet Explorer to view the newly received Web page. How has the text on the screen changed?

Task 4. Selecting fragments of text

Information.

Text selection tags allow you to control the display of individual characters and words. There are three text selection tags:

… to highlight bold,

… to highlight in italics

… to highlight underlining.

Training HTML file

Schedule classes on tuesday

2. View the newly received Web page.

It is possible to use combined fonts:

Schedule classes on tuesday

But at the same time, you must remember the following rule for writing combined tags:

<Тэг-1> <Тэг-2> … Tag-2>

erroneous entry

Task 5: Using heading styles

Information.

There are two ways to control the size of text displayed by the browser:

using heading styles,

setting the size of the main document or the size of the current font.

There are six heading tags (H1 to H6). Each tag has a specific style specified in the browser settings. Style H1 is the largest.

Make changes to the RASP.HTM file:

Training HTML file

Schedule

classes on tuesday
View the newly received Web page.

Task 5. Setting the size of the current font.
Information.
font tag allows you to set the size of the current font in individual places of the text. The current font setting range is from 1 to 7.
Make changes to the RASP.HTM file:

Training HTML file
Schedule
classes for tuesday
Change the font size for the text "class on Tuesday" by yourself using the tag .
Modify the text of an HTML document using text selection tags and line and paragraph break tags.

Task 6. Typeface and font color
Information.
Tag Provides control over text size, style, and color. Changing the typeface is done by simply adding to the tag FACE attribute. For example, to display text in Arial font, you would write .
To change the font color of a tag attribute can be used COLOR="X".
Instead of X, you must substitute either the name of the color (in quotes) or its hexadecimal value. When specifying a color with a hexadecimal number, you can represent this color decomposed into three components:
red (R), green (G), blue (B), each of which has a value from 0 to FF.
Examples of color recording in RGB format are shown in the table:
Table 1

Color

Color

Violet

Brown

Orange

turquoise

Make changes to the RASP.HTM file:

Training HTML file
Schedule >
classes for tuesday
Change the size, color, typeface, text style of the document yourself.

Task 7. Aligning text horizontally
Information.
HTML tags control the horizontal alignment of text. If you don't specify an alignment method, all elements in the document will be left-aligned and have a jagged right margin (see Figure 2).
Modern browsers use the text alignment attribute ALIGN=, which is embedded in paragraph or heading tags.
Make changes to the RASP.HTM file:

Training HTML file
Schedule>
classes for tuesday

Task 8. Setting the background and text colors
Information.
When displaying the background, text, browsers use the colors set by default - they are set by the browser settings. These colors are set at the beginning of the HTML file in the tag . The color entry is similar to the color of the font (see Table 1, paragraph 12). The BGCOLOR= attribute sets the background color of the page, TEXT= defines the text color for the entire page, LINK= and VLINK= define the colors of unvisited and visited links, respectively (the last two parameters will be discussed later).
Make changes to the RASP.HTM file:

Training HTML file

BGCOLOR="#FFFFCC" TEXT="#330066">

Schedule>

classes for tuesday

Task 9.

Experiment with the created document. As you resize the window, see how the browser renders text with forced line breaks. What happens when the window shrinks so much that even a single word can't fit inside it?

Create your own HTML document yourself. Let it be a short story about yourself and your hobbies.

Hello dear blog readers! We continue the section "Creating a site from scratch", and in particular the topic of tags ... And today we will consider the tags that are present in any web page - , and . There is one more tag that should be in every HTML document and which I already wrote about in one of the previous articles - so we will not touch on it.

In previous articles of the column, I wrote about creating an empty file in html format. In fact, it was used in the pro article (that's where the title tags were applied). Now we will directly edit this file with full descriptions.

And let's start the article with editing the created file. Personally, I named it index.html, but the name can be anything. Open it with any text editor (it's better to use Notepad++, as it has code highlighting and other useful gadgets). And immediately add tags to it , and exactly in the order in which they are written. Don't forget to close them as shown in the screenshot. The document will look like this:

Now consider the meaning of each tag separately. No wonder they are in everyone. HTML document.

Tag Functions

So the tag is an container(). Inside it is all the visible and invisible content of the web page (including tags and ). Opening tag comes immediately after the Doctype declaration, and the closing is at the end of the document. Thus, it makes it clear to the browser where to start processing the document and where to end it.

Theoretically, he himself can understand what and how. After all ? This is an HTML language translator and it is unlikely that he will start processing from the middle of the document and finish it before reaching the end. The question, of course, is debatable, but I always thought (and now I do not give up my opinion) that writing this tag is mandatory.

Even considering that the function of this tag is only in delimiting content, it has its own attributes (which are now either not used at all, or are used extremely rarely). Different sources indicate attributes that are different from each other, so I do not dare to put forward the correct version.

The only thing I can say for sure is that most attributes are not supported by HTML 4.01 or are undesirable. I'll give you one example though. - tooltip anywhere in the document. For example, when you hover your mouse over an image, you might see popup text. Also in the case of this tag:

And here's what you'll see when you hover over a document with this content:

It is preferable to use the title attribute not in the tag , but in any other specific areas of the page. Firstly, it is convenient, and secondly, search engines will treat your site better. This tag does not directly affect resource optimization. We go further.

Tag function

And next in line is tag . It contains all the technical information about the page, which serves to help the browser and search engines. The tag is a container tag and follows immediately after , only unlike the last one, the closing tag does not appear at the end of the document, but before the opening tag .

What information can be found in ? But none. Everything within this tag is only accessible to the human eye by viewing the page's source code. All content in this tag is for search engines and browsers. The only thing you can somehow see is the tag , which is responsible for the title of the web page window. Here is an example: <img src='https://i1.wp.com/monetavinternete.ru/wp-content/uploads/2013/01/Title-v-tege-head.png' align="center" width="100%" loading=lazy loading=lazy> The text after the icon is the content of the tag <title>. Now let's look at the content. <head>, which we cannot see, but which is a very important part creation and promotion of the site. First of all, this is the line <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> This is the meta tag for page content type(Content-Type). In this case, this is html code in UTF-8 encoding (content="text/html; charset=UTF-8"). Next comes the title tag described above. Then come the lines starting with the tag <link>. It indicates a link to an external document. For example, the line <link href="http://сайт/.../style.css" rel="stylesheet" media="screen" type="text/css" /> indicates that the (rel="stylesheet") file with (type="text/css") is connected, which is located at such and such address (to reduce the length of the line, I replaced half of the address with dots). After processing this string by the browser, it will determine where to get cascading style sheets. In general, there is a lot of information in the head tag that can be talked about indefinitely. The last thing worth noting (specifically in the case of ) is the presence of description tags, keywords, and canonical. I use plugin All in One SEO Pack, so they are present within <head>. As you know, everything great always starts small. If you are interested in the answer to the question of how to create a website through a notepad, then you must have heard about this possibility somewhere. This is indeed possible. But it’s worth mentioning right away that most likely no one will create a modern dynamic interactive site through a notepad at the present time, since there are special programs for this that greatly speed up and simplify the development process. But it is quite possible to create a full-fledged web page.How to create a website in notepad To begin with, a little familiarity with the theory and general terms is necessary. The vast majority of website pages are ordinary text documents, which are designed in a special way - the language of hypertext markup, abbreviated as HTML. Some classify HTML markup as a programming language, but this is not true. HTML is just a way of standardizing document markup that is uniquely interpreted by browsers to be displayed on computer screens in a user-friendly form. The main tool of the HTML language are special structural elements, with the help of which the document is drawn up. They are called descriptors or tags.In general, a tag is a construction of the form <table>So the tag starts with< после которого следует название тега table и вся конструкция завершается знаком >. Tags come in pairs like making text bold and and unpaired as a newline . In the case of using paired tags, it must be used as an opening tag , and closing. The closing tag is a descriptor with a forward slash /.Consider the main types of tags and their purpose.<ul><li>Element <!DOCTYPE html> . Set to the very beginning of the page and serves to tell the browser how to interpret this document. It is optional, but highly desirable on the page to avoid possible problems with its display. </li><li>Tag <html> . It is a pair tag and consists of two parts <html>and</html>. Every page on the site starts with this tag and ends with it. </li><li>Tag <head> . It is also a pair tag and consists of two parts <head>and</head>. This tag contains various important information about the page: its title, links to the design styles used, included scripts, special metadata. </li><li>Tag <title> . <title>and and located inside the tag . This tag defines the title of the page with which it will be visible in the browser.

Tag . It is a pair tag, consists of two parts and and follows the tag On the page. It is in the <body> tag that contains all the information that is displayed on the page in the browser.

Tag . Is single. Used to indicate a line break in a document.

Tag . Refers to paired tags, is written in a slightly different form from other tags and is used to create links. It is an essential element of the whole concept of the HTML language, as well as the Internet as a whole.

Tag
. Refers to paired tags and consists of two parts. With its help, a text paragraph is drawn up.

tags
,
,
,
,
,
. They belong to paired tags, as they consist of two tags, for example
and
. These tags serve to create six levels of subheadings and at the same time show the importance of the text contained in them in relation to the entire document.

Tag . It is also a paired tag, consisting of two parts and and sets the font style to bold.

In total, there are about a hundred tags, but the ten considered are already enough to design the simplest page of the site in a notebook. Basic document tags , , , <body>distributed in a strict order. Inside the tag <body>the rest of the descriptors may be in different orders within the standards of the HTML language. The easiest way to understand this is by creating a simple web page. <ol><li>Launch Notepad and in the very first line of it set the element<!DOCTYPE html>, which tells the browser how to interpret your document. <!DOCTYPE html></li><li>Make a newline and add a pair tag <html>. Translate the closing tag</html> two lines down. <!DOCTYPE html> <html></li><li>Add a pair tag <head>in line between tags <html>and translate the closing tag</head> two lines down. <!DOCTYPE html> <html> <head></head> </html></li><li>On line between tags <head>and</head> write a pair tag <title> in one line.

Enter the title of your web page between the tags and. For example, like this.

My first website page

Position the cursor on the line after the closing tag and do a line feed. Enter a pair tag in the empty line that appears .

My first website page

Make double translation between inside tags and. In the line that appears, enter the paired title tag
. Type inside the tag
page subtitle.

My first website page

About me

After the closing title tagdo a line break and set the paired paragraph tags on the new line. Insert text between them. For example, yes.

My first website page

About me

My name is Ivanov Ivan. I am creating my website.

Enclose the first and last name in a pair tag to make them bold.

My first website page

About me

My name is Ivanov Ivan. I am creating my website.

After closing paragraph tag
perform a line feed and enter the pair tag on the new line
. Enter some text between the tags.

My first website page

About me

My name is Ivanov Ivan. I am creating my website.

My progress

After the closing subtitle tagmake a line break again, enter the paired paragraph tag and write arbitrary text between these tags.

My first website page

About me

My name is Ivanov Ivan. I am creating my website.

My progress

Of the tags listed in the article, two remained unexplored - line feed
and the most important link building tag . Let's apply them. Before the last closing tag, enter a descriptor
, and between
and
type construction. You should get the following.

My first website page

About me

My name is Ivanov Ivan. I am creating my website.

My progress

The basic syntax of HTML has been mastered and the first page of the future site has been created.
In the process of training, the materials of the site site were used

Between quotes in a tag enter the address of the page you will link to. Before tag you can enter the word Link, and between the tags and enter the text that will be displayed on the page.

My first website page

About me

My name is Ivanov Ivan. I am creating my website.

My progress

The basic syntax of HTML has been mastered and the first page of the future site has been created.
In the process of training, the materials of the site site were used

Link: site

On this, the creation of the simplest page for the site can be completed. In principle, it could also have been completed in step 9, but if you are serious about learning the HTML language, then additional practice will not be superfluous. Save the page with *.html extension and you can open it in any browser to view the results of your work. If everything is done correctly, then you should see something like the following.
If, after reading this article, your determination to create a website has not dried up, then be sure to familiarize yourself with the full syntax of the HTML language, and also learn how to use CSS cascading styles for page design.
Developing Web Sites Using HTML Hypertext Markup Language
8th grade
Lesson 1 Web page structure.
Website concept
Information on the World Wide Web
stored in the form of websites.
The website is similar in structure to
a magazine on a topic or
problem. How is a magazine made up of
printed pages, and the Web site consists
from computer web pages.
Web pages are linked by hyperlinks.
Website types
official (government,
Duma, school ...)
Commercial
Personal
Advantages of web pages:
Small information volume
("lungs")
Suitable for viewing in different
OS.
Dynamic.
Interactive.
Website creation steps:
1.
2.
3.
Build website locally
computer.
test (check
correct operation).
Post online -
choose a hosting server
(paid or free).
Programs for creating a site:
1) the simplest text editor (without
text formatting):
Notebook
2) browser to view pages:
Internet Explorer
3) Image processing program:
photoshop
Visual web editors
Building a website in HTML is very
laborious, special
knowledge.
There are visual web editors
(programs) for creating websites.
Work on the principle of WYSIWYG
(what you see is what you get).
Web page structure
10. Tags
The appearance of the Web page is set by the administrators
commands - tags, which are
angle brackets< >
Tags can be single (non-repeating) or
paired (containers): before closing
the container tag is written with a forward slash (/)

Tags are written in English letters (capital,
lowercase).
11. Web page structure
The entire HTML code of the page
placed inside the main
container:
.
The web page is divided into
2 logical parts:
heading (HEAD)
content (BODY).
12. Web page title
The title of the web page is wrapped in a container.
Contains the title of the document and help information about the page
(for example, the type of encoding) that the browser uses for its
correct display.
The title of the web page is contained in the container<ТITLE> and
displayed in the top line of the browser window when viewed
pages.

<ТITLЕ>Computer

13. Writing a Web Page Template

<ТITLЕ>Computer

14. The main content of the web page
The main content of the page is placed in
container .
May contain: text, tables, running
strings, pictures, links, sound files...
Let's put the text "All about the computer" on the page:
All about computer
15. Web Page Template

<ТITLЕ>Computer

All about computer

16.
17. How to save a web page
1. Create a special folder for the site and
save all site files in this folder.
2. Save the web page as a file with
named index.html is the title page
site (first loaded into the browser)
Web page file extensions - .htm
or.html
18. We create our website….
It is necessary to distinguish between the index.html file name - under
which a Web page is stored in a file
system, and the actual name of the Web page
"Computer" - is displayed in the top line
browser windows and parsed first
search engines.
The name of the Web page must be at its maximum
degree of relevance to its content.
1. Enter the HTML code for the Web page into Notepad.
2. Save the file as index.html in a folder
site. Select the file type - "All files".
3. Open this file in a browser for viewing.
19.
20. LESSON #2
21. Lesson 2: Formatting Text on a Web Page
22. Text Formatting
While the page is not too attractive: small print and black text on
white background. But with the help of tags, you can decorate the text.
1. Headings: tags from<Н1>(largest) to<Н6>(the smallest).
<Н1>All about computer
2. Font (FONT). Some tags have attributes - property names, may
take on certain values.
FONT face="Arial" - font face
size=4
- the size
color="red" - color
3. Alignment (ALIGN). Text is usually left-aligned
page, however, it is customary to place the heading in the center.
ALIGN="left",
ALIGN="right",
<Н1 ALIGN="center">Everything about the computer
ALIGN="center"

23. Font color
The value of the COLOR attribute can be set in 2 ways:
a) the name of the color (for example, "red", "green", "blue" and so on),
b) its RGB hexadecimal value "#RRGGBB", where
the first two hexadecimal digits set the intensity
red (red), the next two are the intensity of green (green) and
the last two are the intensity of blue (blue) colors.
The minimum color intensity is specified in hexadecimal
number 00, and the maximum is FF. Blue color = "#0000FF".
Thus, you can set the blue color of the title with the FONT tag with
COLOR attribute:
<Н1 ALIGN="center">Everything about the computer

24.
25. Text Formatting
4. The horizontal line will separate
title from the rest of the content
pages with a single tag

.
5. Paragraphs:<Р>. When viewed in
paragraphs are separated from each other in the browser
other intervals. For every paragraph
you can set a specific type
alignment.
26. Practical work 3.8 Training site "Computer"
Format initial text
pages:
1) Create and align 2 paragraphs (task 3)
2) Highlight the title of the page with color and
separate it with a horizontal bar
(task 4)
27.
28. LESSON 3
29. Lesson 3: Inserting Images into Web Pages
30. Insert images
Web pages can contain graphic files of 3 formats -
GIF, JPG and PNG. If the picture is saved in a different format, then
must first be converted to one of these
formats.
The tag is used to insert an image. with attribute
SRC, which indicates where the file is stored on
local computer or on the Internet.
1) picture on the local computer in the folder with the site:

2) the picture is in another folder on the local computer:

3) the picture is located on a remote server on the Internet:

31. Explanatory text. The location of the figure in the text.
Illustrations on Web pages have become essential
design element. However, users in order to
save time sometimes disable browser downloads
graphic images and read only texts.
Therefore, in order not to lose the meaning of the page, instead of drawing
explanatory text should be displayed with the ALT attribute

The position of the figure in the text - defines the ALIGN attribute
tag : THOR, MIDDLE, BOTTOM, LEFT, RIGHT.
ALIGN="right">
32. View of the finished site
33. Website page code

Computer

All about computer

On this site you can get various information about
computer, its software and prices for computer
accessories.

Terminological dictionary will introduce you to computer
terms, and you can also fill out a questionnaire.

34. Lesson 4
35. Test work No. 3
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
What is a Web site?
Site types.
How are web pages combined into websites?
What are tags? tag container? Write main container
web pages.
What is the logical structure of a web page?
List 5 page formatting tags.
What is a tag attribute?
What are the ways to set colors on a web page?
What tags are used to enter a title? Formatting
font? Entering a paragraph?
What tag and its attributes are used to insert images?
36. Lesson 4. Hyperlinks on Web pages
37.
Hyperlinks allow you to download
browser other web pages related
from the previous one.
A hyperlink consists of 2 parts: address
and a reference pointer.
Hyperlink is set to universal
tag with the HREF attribute (he
specifies which file is stored
desired web page):
link pointer
38. Types of hyperlinks
1) internal:
Pointer
links
2) external:
filename.html"> Link Pointer
39. Hyperlink Pointers
Pointer - visible part
hyperlinks: text or image
40. Address part of hyperlinks
Go to other web pages:
link pointer
Open image in browser:
Picture
Listen to the sound (launching the built-in browser
player):
Sound
Save file (launches built-in browser
file download manager):
Download file
41. Email hyperlink
This type of hyperlink is
special container

”>Our e-mail

42. View of the finished site page
43. Website page code

Computer

All about computer

On this site you can get various information about the computer, its software
provision and prices for computer components.

The terminological dictionary will introduce you to computer terms, as well as you
you can fill out the form.

[Programs]
[Dictionary]
[Accessories]
[Questionnaire]

">Email:

44. Lesson 5
45. Lesson 5: Lists on Web pages
46. Types of lists
Numbered
Labeled
Lists of terms (as in a dictionary)
Nested Lists
47. Numbered List
List - in a container
List item - tag

The TYPE attribute is the numbering type (Arabic
numbers; I - Roman; a - latin
lower case)

System programs

Application programs

Programming systems

48. Bulleted List
List - in a container
List item - tag

The TYPE attribute is the type of markers (“disc” is a disk,
“square” - square, “circle” - circle)

Text editors

Graphic editor

Spreadsheets

Database management systems

49. List of terms
List - in a container

List item - tag

The term is written first, then
its definition (as in a dictionary)
50. Lesson 6
51. Lesson 6: Interactive Forms on Web Pages
52. The concept of an interactive form
To communicate with website visitors
creators on the web page place
interactive forms.
Forms contain various elements
controls:
text fields
dropdown lists
flags
switches...
53. Text field
main container

Text field - for entering text from the keyboard: tag
with attributes:
TYPE="text" – content type (text)
NAME="____" – field name
SIZE="40" – input field length (in characters)

- line separator (move the cursor to a new
line)
54. Switches (radio buttons)
Round button to select one of several
answer options:
TYPE="radio"
All members of this group must have
same name: NAME="group"
VALUE attributes contain choices
responses: VALUE="student"

55. Flags
Square box for selecting multiple answers from
suggested options:
TYPE="checkbox"
Each element of this group must have its own name:
NAME="box1", NAME="box2",
…..
VALUE attributes contain options for choosing answers:
VALUE=“WWW”, VALUE=“e-mail”, ….
Each VALUE has its own answer.
www
56. List boxes
To create a dropdown list
use container

In it, each element of the list
given by tag