Page template code. With a wide frame. Optional Tags in HTML5
The lesson “How to create an HTML page” is devoted to the layout of a very simple web page. You will learn how to correctly save an HTML file, set the necessary encoding to correctly display an HTML page in a browser, and place texts, lists, and images on a web page.
After studying this lesson, you will already learn how to create your first web page, as in Figure 1.
Picture 1
1. HTML document structure
HTML files have the extension .htm or .html.
Tags are usually paired: start and end tags. Initial -<>, final, For example
And
A paired tag is also called container .
Some tags do not have a required tag pair, this tag is called single
. Such a tag is closed by writing a right slash before the closing angle bracket, for example
The structure of the html document looks like this (Figure 2).
Figure 2
Explanations for the listing in Figure 2
In the first line, the DOCTYPE construction means one of the web page layout standards.
Between tags
And
contains the header part. It includes a design
Figure 3
Record means the Cyrillic encoding so that the letters are displayed correctly in the browser. If the encoding is not specified, fonts can sometimes be displayed as follows (Figure 4)
Figure 4
The same page after inserting the encoding (Figure 5)
Figure 5
Note: instead of encoding charset="windows-1251" you can use encoding charset=" utf -8" , which allows you to create multilingual sites, since all the characters existing in the world are present in it. In this case, in Notepad++ is necessary before layout and savinghtml-select file from the top menu Encodings - Encode to UTF -8 without BOM (UTF-8 without BOM)
This information is enough to create the first document.
Practice 1
1. Create a folder, name it myhouse. The names of all folders and files must be created in Latin lowercase letters, Russian names cannot be used. Keep names short and meaningful.
We will write the web page code in Notepad. It is better to use not the Notepad that comes with Windows, but a more “advanced” one, for example Notepad++. Distribution Notepad++ is in the folder CD/distr.
2. Open Notepad++. Make sure that the ANSI encoding is set, to do this in the menu in the item Encodings, set position Encode to ANSI.
3. Type the code from the listing in Figure 2 into Notepad++.
The code in the listing in Figure 2 will serve as a template for us in the future so that we don’t have to type out the structure of the HTML document every time. Copy the DOCTYPE construction from here (no need to memorize or memorize it).
4. Save the file as template.html in folder myhouse, while in the field File type install All types(Figure 6), otherwise your web page will not open in the browser.
Figure 6
5. After saving, run template. html double click. As a result, your file will look like this (Figure 7).
Figure 7
If you do not get the result as in the figure above, it means that there is most likely an error in the code. One wrong character is enough and the web page will not be displayed correctly. Check the code again with the listing in Figure 2.
6. Inside the folder myhouse create a folder public_ html. This name is usually the folder in which the site is stored when hosted on real hosting (this folder can also be called www).
7. Save the file template. html in folder public_ html under a new name main. html.
8. From a folder CD/ html_css_1 open the file text_main.txt in Notepad++, and also open the file saved under the name main. html
9. Copy all the text from the file text_main.txt and paste it into the file main. html instead of the phrase “Web page content”. In the tag
10. Save changes and preview the file main. html in the browser. You will see unformatted text. The browser does not even do line breaks that are in the source text (Figure 8).
Figure 8
2. Formattingweb-pages taggedHTML
This How to Create an HTML Page tutorial covers the basic tags that are used to mark up a web page.
Tags are designed to format the text of a web page. The list of tags can be viewed in more detail in the folder CD/DirectoryHTML in the directory html401_en.chm(in the top menu item elements).
Let's look at some of the tags.
Elements h 1, h 2, h 3, h 4, h 5, h 6
Structuring the body of the document is done inside the element < body> using headings specified by the elements h1, h2, h3, h4, h5, h6.
Heading elements are paired, so they must have an opening < h1> and closing h1> tags.
HTML has six heading levels: h1 (topmost), h2, h3, h4, h5 and h6 (bottommost). The functionality of heading elements is similar to regular heading styles in text editors.
The effects of these six tags are shown in the figures below. In one picture source(Figure 9), on the other - the view in the browser (Figure 10).
Figure 9
Figure 10
Dividing text into paragraphs
Tag < p> sets the beginning of a paragraph and inserts a space at the top of the paragraph - an indent to separate this paragraph from the previous one.
Force line break
Tag
allows you to wrap the remaining text of a paragraph to the next line. This is an unpaired tag and, unlike the paragraph tag, does not increase the spacing between lines.
Practice 2
1. Format the title “Catalogue of architectural projects” using tags
And
.2. Format the title “Projects for your future home” using tags
And
.3. Format the headings “House Projects” and “House Areas” using tags
And
.4. Divide the main text into paragraphs using a tag
Inside the first two paragraphs, use the tag
to break a line. As a result, your code should look like this (Figure 11).
5. View the result in a browser.
Figure 11
Bulleted and numbered lists
Using HTML tools you can create any lists: numbered (numeric and alphabetic) and bulleted with different types markers.
Tag < ul>…ul> generates a bulleted list.
Tag < ol>…ol> generates a numbered list.
Single list item as in
- , and in
- Implement the code shown in Figure 13 in a new file.
- Save the file in a folder myhouse under the name spisok_ vlozh. html. The result in Fig. 13
- absolute;
- relative.
- enter the folder folder_2,
- then enter the folder folder_1,
- then attach the image.
- exit folder folder_1,
- exit folder folder_2,
- attach an image.
- exit folder folder_1,
- exit folder folder_2,
- go to the folder folder_3,
- go to the folder folder_4,
- attach image pic.jpg
- exit folder folder_1,
- exit folder folder_2,
- exit folder folder_3,
- enter the folder folder_4,
- attach image pic.jpg.
- template.html
- main.html
- spisok_vlozh.html
- inside the foldermyhousethere should be a folderpublic_ htmlwith files of the future site
- seven examples on relative addressing and two examples as control ones from practical task 14
- keywords and page description;
- links to other files (*.css and *.js).
- formed using a tag <
li>
.
Practice 3
1. Create a numbered list under the heading “House Projects.”
2. Create a bulleted list under the heading “House Areas.” Your code will look like this (Figure 12).
Figure 12
3. View the page in a browser.
Lists can be nested inside each other using different markers.
An example of a nested list is shown in Fig. 13
Practice 4
Figure 13. Example of a nested list
Font styles
Tag … - allows you to display text in bold font.
Tag … - allows you to display text in italics.
Tag … - displays underlined text.
For example:
In this case the text will be displayed bold italic , but not underlined.
And in this case the text will be written bold underlined italics .
Subscripts and superscripts
Tag < sub> And sub> allows you to lower text half a line below normal text.
Tag < sup> And sup> allows you to raise text half a line above normal text. Text located between these tags will appear in a smaller font than regular text.
Practice 5
1. Format the name myhouse.ru in bold in the first paragraph (Figure 14).
Figure 14
2. Format the phrase “More than 95% of projects” in underlined italics in the second paragraph (Figure 15).
Figure 15
3. Format superscripts where square meters are used (Figure 16).
Figure 16
4. Save the file. View via browser. The web page should look like this (Figure 17).
Figure 17
3. Inserting images
In our How to Create an HTML Page article, we'll look at how to place images on a web page.
The tag is used to insert images .
The required attribute for this tag is src(from English SouRCe - source). It determines the path to graphic file, the image of which should be displayed on the web page.
To insert an image, use the command 
For example: "
image1.jpg"
alt="Picture" />
!}
The alt attribute is necessary so that when viewing a web page in the disabled images mode, instead of the missing image there will be an inscription that is written in the alt attribute. It is also recommended to always use alt texts, because search engines analyze them as keywords when searching for images.
Graphic files can be in the format jpg, gif, png and always in the color modelRGB.
Practice 6
1. After the list of house areas, insert images of cottage projects into the web page project_1.jpg And project_2.jpg from folder CD/html_css_1 . To do this, first copy these two images to the folder where the main.html file is located. The image insertion code will look like this (Figure 18).
Figure 18
2. View the result in the browser (Figure 19).
Figure 19
Basically the principle of using tagsHTMLshould be clear. They are used according to the same principle: if the tag is container, then there is an opening and closing tag. If the tag is single, then there is no closing tag; in this case, the right slash is written before the closing angle bracket, for example< br/>. Whether the tag is container or single, you can always look in the specificationhtml401_ru.chm in the “elements” section.
4. Addressing within the site
In our first lesson, How to Create an HTML Page, we'll explore the concepts of addressing in HTML.
Let's consider addressing options when you need to place images in an html file that may be located in different folders of the site.
There are two types of addressing:
Absolute addressing (using computer drive names) not used(Figure 20)
Figure 20
Used relative addressing - addressing within a document or a set of documents on one server. To refer to a file within a site, you need to tell the browser which path it should take to get to the desired file.
|
Example 1 The image is located in the same folder as the HTML document (Figure 21). That is, the image and the HTML file are on the same level in file system and the HTML document can immediately attach the image. In this case, inserting an image into a web page will look like this.
Figure 21 Practical task7 Implement example 1 (create a folder, a doc.html file, take any image). Image |
|
Example 2 Image pic. jpg is in the folder folder_1 . The HTML document is located outside of folder_1. Those. In the site's file system, the HTML document is located one level higher than the image (Figure 22). You need to enter the folder folder_1, then attach the image
Figure 22 Practical task8 Implement example 2 (create a folder, a doc.html file, take any image). The image must be inserted into the doc.html web page. |
|
Example 3 Image pic. jpg is in the folder folder_1 , which in turn lies in the folder folder_2 . The HTML document is located outside of these folders (Figure 23). Thus, the HTML document is two levels higher than the image. Necessary:
Figure 23 Practical task9 Implement example 3 (create folders, doc.html file, take any image). The image must be inserted into the doc.html web page. |
|
Example 4 folder_1 . The image is located outside of folder_1. Those. The HTML document is located one level lower than the image (Figure 24). You need to exit folder_1, then attach the image. Leaving a folder is indicated by the construction ../ (two dots and a slash to the right).
Figure 24 Practical task10 Implement example 4 (create a folder, a doc.html file, take any image). The image must be inserted into the doc.html web page. |
|
Example 5 The HTML document is located in the folder folder_1 , which in turn is located in the folder folder_2 . The image is outside of these folders. Thus, the HTML document is located two levels lower than the image (Figure 25). Necessary: Since you need to exit twice, the design ../ repeated twice.
Figure 25 Practice 11 Implement example 5 (create folders, doc.html file, take any image). The image must be inserted into the doc.html web page. |
|
Example 6 (Figure 26) Necessary:
Figure 26 Practice 12 Implement example 6 (create folders, doc.html file, take any image). Image must be inserted into the doc.html web page. |
|
Example 7 (Figure 27) Necessary: Since you need to exit three times, the design ../ repeated three times.
Figure 27 Practice 13 Implement example 7 (create folders, doc.html file, take any image). Image must be inserted into the doc.html web page. Thus, no matter how many times you need to exit, we put the construction ../ so many times, and if we enter, we list the names of the folders encountered along the way. |
/
>
/
>
/
>
Practice 14
1. Create an html document and insert an image into it so that the path to the image is as follows.
"
../../../../../../folder_1/folder_2/folder_3/image.jpg" /
>
2. Develop your own example of inserting an image into an html document so that it contains and exit from folders, and entrance into folders. The example should be different from all the examples above.
As a result of completing this topic, you should have the following files created:
Many languages have been invented, but HTML is one of the special and most popular languages. Many other key developments in programming are associated with it. Much becomes possible when the developer's mind has knowledge of the markup language - HyperText Markup Language (HTML).
In essence, there is nothing complicated in HTML, and in a few minutes anyone who is far from programming and the Internet will be able to create an HTML page in Notepad. An example worthy of attention, simplicity that is truly accessible to everyone.
general description
An HTML file is one page of the site, although this can be argued, but the fact that one file makes up one page is clear to begin with.
An HTML file begins with a DOCTYPE header, which indicates that the file type is HTML. All page elements (tags) are indicated in angle brackets. Each pair ("<» и «>") includes one HTML tag. Usually HTML tags come in pairs, that is, for each “tag” there is a “/tag”. Both are enclosed in angle brackets. There are single tags, the most popular of which is “br/” - transition to the next line.
The largest tag in the file is the HTML itself, which contains only two tags: HEAD and BODY. In the first, various descriptions are made, links to other files needed on the page are indicated, which may be present PHP scripts and JavaScript. The second one records the content of the page. Also in the form of tags and scripts.
Simple HTML page
An example of creating such a page is given below in the article. Let's look at it carefully.
HEAD Section
Main purpose - general description pages and general scripts, although the latter is a rather relative concept. Usually, only two things are given significant importance here:
For displaying page content, the contents of this section are only indirectly important, since it indicates: somewhere in other files there are CSS rules for tags and scripts in other languages.
An HTML page has one that is displayed when the visitor moves the mouse to the tab where the page is open. This important point, since it makes the page significantly more presentable, easier to say, signed with readable text.
META tags are important in Internet programming in general, but when you need to create an HTML page in Notepad, it is not advisable to clutter the example with unnecessary constructs.
If scripting should be approached once knowledge of HTML is established, then Cascading Style Sheets should be addressed immediately. CSS files contain, in particular, design rules HTML tags.
BODY section
Actually, the example HTML page is the BODY section. This is where all the information, all the content of the site page is contained. All information is presented in the form of tags and scripts, for example inserting JavaScript code or pieces of PHP programs.
It is important to understand that an example of an HTML web page in a browser and the same example in a text editor, in particular Notepad, are not the same thing. In the first case, we have a ready-made HTML text in which all the scripts are executed. For example, PHP worked its part and formed the necessary tags in the right places instead of its code. JavaScript has also fulfilled its mission, although it remains to be discussed separately.
HTML is tags, not scripts. Ultimately, the browser only displays the content of the page, only its tags. There is no PHP code there.
JavaScript is in a special position, its concern is to serve the page not only at the moment of loading (overload), but also at the moments when the page is in the visitor’s browser, and he is studying it.
A simple example (BODY section only) is shown below.
And in the visitor’s browser it looks like this:
The code did not specify what the elements that the browser would display should look like. All visible styling is in the CSS rules. In this case, in the Mcss/scPhpWordRW.css file that was linked (see the very first example of the HTML page).
Unlike HTML, the CSS theme is simpler, there are very accessible rules and their number is small, when the example of creating an HTML page does not require anything other than notepad. Everything is very accessible for immediate mastery:
This shows how simply the scLogo_vDoc tag is described, and this description is such that in its normal state the tag displays the image vDoc-logo.png, and when the mouse is over it, vDoc-logo-h.png is displayed.
Structure of HTML descriptions
The language does not imply any structure and the concept of syntax here is very relative. There are no variables, but there are plenty of possibilities. The fundamental basis of hypertext is that there is an element (tag) that necessarily has a name.
The name, in the case of a paired tag, is made up of the name itself (tagName) and angle brackets (“<» + tagName +«>"), If we're talking about about the start of the tag, and ""if its end is recorded.
An example HTML page describing the attributes is located below in the text.
A tag can have attributes, in which case they are placed with a space after the tag name before the closing angle bracket ">". Attributes, if a tag has them, are written only at the beginning of the tag. The content of a tag is considered to be what is between the beginning of the tag and its end.
HTML allows you to describe block and inline elements. The former occupy a certain area in the browser window, can be positioned absolutely, that is, in the desired place in the HTML page display area, and have a specific size.
Inline elements are generally displayed in one thread, that is, as they were specified in the page file, they are displayed on the screen. The display of the overall flow can be influenced when the page loads. The placement, visibility, and other properties of block elements can be influenced at any time through JavaScript code.
In addition to simple elements, HTML offers the description of tables and forms. These elements are in great demand in “everyday website building”.
Table description: tags TABLE, TR, TD
Using the TABLE tag, you can create a table, specify a certain number of TR rows and a certain number of TD cells in each row. Unlike the usual tabular organization, due to the peculiarities of HTML markup, the tabular organization is limited to this declaration, therefore, if the developer wants to have a rectangular table in which the number of columns in all rows is the same, then he must monitor this himself.
The principle position of HTML is to do everything that is specified, but nothing that is not understood. In some cases, the number of columns in each row of the table is not so important, but if you need to merge cells vertically or horizontally, you will have to count everything very carefully.
An example HTML page describing a simple table is clearly shown in the article.
Shown here is a table of three rows by three columns, and in the first row, instead of the TD tag, the TH tag was used - the column heading. These two tags are not particularly different, but it is quite possible to use the first one to distinguish the first row of the table, and in CSS you can attach your own style to TH, which distinguishes it from other TDs.
Form description: tags FORM, INPUT
Forms are the most popular part of HTML tags. Using forms you can transfer information. Actually, the page itself is the output of information, but the form is its input.
Example HTML page describing a simple form:
There are many more options for using forms, but these are the main possibilities. You can specify input fields, assign them a design and handlers to analyze the data entered by the user. You can specify hidden fields and transmit background information from the page. You can designate buttons for transmitting information, clicking on which initiates the process of transmitting information.
Using HTML
Knowing the hypertext language is a job in any specialization in the field of Internet programming, but if you need to write programs in PHP or JavaScript, then you need to know HTML + CSS perfectly.
The PHP language was indicated in the previous example. PHP runs on the server, so the page with this form flew from the server to the browser with the fields filled in. In particular, the TestOnBlur function mentioned in the INPUT tag (onblur event handler) received all parameters as text fields.
JavaScript runs in the browser, and in order for the button to send data back to the server to work correctly, that is, the construction: onclick=jQuery("#to").val("cart"), you need to have an idea not only of what jQuery is, but also what is #to, val, cart. More precisely, you need to know the basic HTML tags and general rules applying CSS styles to them.
This is quite enough to quickly improve your qualifications in any specialization in the field of Internet programming.
Hello, dear blog readers. With this article we will start learning the basics HTML language.
You probably already know that the main language of the Internet is hypertext markup language HTML (HyperText Markup Language). In this article, we will learn the basic concepts of HTML and learn how to create simple WEB pages.
Let's start with the most important thing, let's look at how it works The World Wide Web— Internet. To produce web pages, you create files written in HTML and place them on a web server. After this, any browser installed on a device with Internet access, be it a computer, phone or tablet, can find your web pages.
Web server- this is an ordinary computer with a special software with Internet access. It continuously listens for requests from browsers for web pages, images, audio and video files. Having received a request for one of these resources, the server looks for it and sends it to the browser.
Browser- This special program, intended for browsing websites, for example Internet Explorer. Using a browser, you browse websites by clicking on links. Any such click causes the browser to make a request for the HTML page to the web server, receive a response and display the page in its window. It is when the page is displayed that the HTML language begins to work; it tells the browser everything about the structure and content of the web page. Using commands - tags, HTML tells the browser where paragraphs of text begin, what part of the text is a heading, and where to insert tables, and even pictures. And tags are words in angle brackets, for example
,
