Creating a web page. Creating the first web page The web page is an html document

Purpose of the work: to familiarize students with the basic concepts of the HTML language, the structure of an HTML document, mandatory tags, comments, methods of text formatting, physical and logical styles, and acquisition of skills in creating simple static Web documents.

In laboratory classes, we will use the Notepad text editor to prepare HTML files, and the Internet Explorer browser as a tool for monitoring what has been done.

Theoretical information

Basic Concepts

Hypertext- an information structure that allows you to establish semantic connections between text elements on a computer screen in such a way that you can easily transition from one element to another. In practice, in hypertext, some words are highlighted by underlining or coloring them in a different color (hyperlinks). Highlighting a word indicates a connection between this word and some document in which the topic associated with the highlighted word is discussed in more detail. A separate document, written in HTML format, is called:

HTML document;

Web document;

Web page.

Such pages are usually in NTM or HTML format.

A group of Web pages belonging to one author or one IEDV body and interconnected by common hyperlinks forms a structure called a Web node or Web site. Each HTML page has its own unique URL - adpec on the Internet.

Frame (Frame) - a term that has two meanings. The first value is the document area with its own scroll bars. The second is a 0DNN0H image in an animated graphic file (frame).

Applet (Applet) - a program transferred to the client computer in the form separate file and launched when viewing a Web page.

Script (Script) , or script, is a program included in a Web page to expand its capabilities. In certain situations, the Internet Explorer browser displays the message: “Allow scripts to run on the page?” In this case we mean scripts.

CGI (Common Gateway Interface) - a general name for programs that, working on a server, allow you to expand the capabilities of Web pages. Without such programs it is impossible to create interactive Web pages.

Browser (Browser) - a program for viewing Web pages.

Element- HTML language design. You can think of it as a container that holds data and allows you to format it in a certain way. Any Web page is a set of elements. One of the main ideas of hypertext is the possibility of nesting elements. For example:

The content of the element, the data that the element formats

Tag(in English tag - label, descriptor, label) - the starting or ending marker of an element. Tags define the boundaries of the action of elements and separate elements from each other. In the text of a Web page, tags are enclosed in angle brackets< >, and the end tag is always followed by a slash. Text not contained between such brackets (< >), is completely visible when viewed in a browser. For example:

The content of the element, the data that

formats an element

This text will be located in a separate paragraph

Any Web page is a set of elements. One of the basic principles of HTML is the ability to nest one element within another.

Attribute- parameter or property of an element. Attributes are located inside the start tag and are separated from each other by spaces. If the cement contains text, then attributes can specify font color and size, text paragraph alignment, etc. If the element contains a picture, then the attributes can specify the size of the picture, the presence and size of a frame around the picture, etc.

This text will be aligned to the center of the screen

This example again uses a tag that defines the beginning and end of a paragraph. However, the start tag contains an align attribute, which sets the text alignment to the center of the screen.

Please note:

Any useful information must be between the start and end tags indicating its format;

All attributes are located in the start tag;

For ease of use, you can write the start tag with an uppercase (capital) letter (P), and the end tag with a lowercase (small) letter (/p), although this is not necessary;

Not all elements require an end (closing) tag;

Start writing each new element on a new line. Indent nested elements (tab). This again is not necessary, but it will make your job much easier.

HTML (HyperText Markup Language) is a special language for formatting text documents (it is also called document markup language - WWW document viewer). HTML is a fairly simple set of commands that describe the structure of a document. HTML allows you to highlight individual logical parts in the text (headings, paragraphs, lists, etc.), place a separately prepared photograph or picture on a Web page, and organize links on the page for communication with other documents.

HTML does not specify specific and precise document formatting attributes, such as Microsoft Word. The specific type of document is ultimately determined only by the program - browser on your computer. The need for just such an approach is associated with the heterogeneity of hardware and software computers connected to the Internet. HTML is also not a programming language, but web pages can include built-in programs - scripts in Javascript and Visual Basic Script languages ​​and programs - applets in Java language.

From the point of view Windows user, A Web page is simply a *.htm or *.html file located on an Internet server, in local network or on your machine's hard drive.

Remember that HTML is not a programming language, it is intended only for marking up documents. Those. essentially creating HTML page, you simply edit text using tags in much the same way as in a regular text editor. Each tag has its own property, but they are all enclosed between angle brackets "", for example, , .

All tags in HTML are divided into two types - paired and unpaired. Paired tags are those whose opening tag requires a closing tag. Closing tags in HTML are denoted by a slash and written like this. Unpaired tags do not require a closing tag. An example of such tags is the break-to-next-line tag
. There are also mandatory tags, which must be used on all pages, and optional tags, which are used as desired.

When you download any document from the WWW, its text in your browser window is displayed in a perfectly formatted, easy-to-view form. This means that WEB pages are not ordinary text, but also contain some auxiliary information to control the presentation of the document in your browser window. Since when developing a document it is not clear on what type of computer the user will view it, WEB pages cannot be prepared and stored in a format developed for a specific computer platform, for example, in the Microsoft Word format for Windows XP. In order for a user working on any type of computer to see a document formatted accordingly, the HTML language developed specifically for this purpose is used.

If you are working with a browser, then select the menu command View - View HTML code (View - Source). A window will appear on the display with the initial code of this page in HTML.

Either press CTRL+U

The appearance of WEB pages on the Internet often changes. But for us at the moment it's not significant.

HTML - HyperText Markup Language is a fairly common set of commands that describe the structure of a document. This markup language allows you to highlight individual logical parts in a document - headings, paragraphs, tables, lists, etc., but does not specify specific formatting attributes. A certain type of formatting is determined by the browser itself when reading a document, and it is the browser itself that provides the best display WEB document on your screen.

As previously mentioned, you can create WEB pages using special editor programs that automatically generate HTML code, working with which does not require knowledge of markup language. But these programs are often limited in their capabilities, contain errors and often produce bad HTML code that does not work on all platforms. Therefore, if you want to seriously master WEB design and understand the principles of creating WEB documents, you cannot do without knowing the basics of the HTML language, especially since creating WEB pages on it is not at all difficult. Maybe it’s even easier than mastering a program for creating HTML pages.

The HTML language exists in several variants or specifications. Like software product versions, specifications are numbered: 2.0, 3.0, 3.2, 4.0. Any subsequent specification represents an extension and addition to the previous one. We will use the latest HTML 4.0 specification constructs that are supported latest versions most common browsers.

The document in the HTML code window is a text document in a special format. All files in this format have the extension HTML (.html) or HTM (.htm). An HTML document mixes plain text with markup elements enclosed in angle brackets< и >, for example, , , , . These markup elements are called tags. Tags can be single, opening and closing and consist of subsequent parts in a certain order:

• left angle bracket.

Thus, the opening tag, which appears at the beginning of the HTML document and marks its beginning, consists of the HTML name and two angle brackets< >, and the tag located at the end of the WEB document, in addition to the designated parts, also contains a slash / sign, meaning a closing tag and indicating the end of the document. The tag means the beginning of the code of the script program integrated into the document. This tag contains, in addition to the script name, a language attribute with the value "vbscript", meaning that the script is written in the vbscript language.

Only Latin characters can be used in tags, and any characters can be used in attribute values. If, for example, Cyrillic characters are used as attribute values, they must be enclosed in quotation marks, for example, name="Section 1".

The HTML language does not distinguish between large and small letters, so the and tags are equivalent. But in 2010, the w3c consortium, which took upon itself the responsibility to put things in order in the area of ​​the HTML language specification, in its latest version relentlessly advises writing tags in small characters, and in other words, significant conditions. Therefore, further we will use writing tags in lower case.

Most tags are paired: the opening tag is followed by a corresponding closing tag, and between them contains text or other tags, for example:

Online book store Three Steps

In such cases, two tags and the part of the document enclosed between them form a block called HTML element. Some tags, for example, are single and do not have a closing tag. Such tags are themselves HTML elements.

Most tags can have one or more attributes - characteristics that give additional information about how the browser should handle the current tag. But there may be no attributes at all. A tag attribute consists of a name, for example, align, an equal sign = and a value, which is specified by a string of characters, for example, "center": align="center". Attribute values ​​are usually enclosed in quotation marks. But if these values ​​only use Latin characters, numbers and hyphens, then the quotes can be omitted, for example: align=center. But omitting the quotes is strictly not recommended due to a number of circumstances related to the upcoming integration of HTML with JavaScript and languages. Therefore, develop the habit of immediately writing attributes in quotes.

Each HTML document has a specific structure, which looks like this:

…

The structure of an HTML document contains the following essential elements:

• tags and , which mark the beginning and end of the document;
• header delimited by and ;
• body bounded by tags….

The title, delimited by the and tags, uses the ... tags to define the title of the document, which should outline its contents and usually contains less than 5-6 words. This title is displayed by browsers in the title bar of the program's working window, and bots that compile indexes for search engines identify the document using its title.

In addition to the element ..., the header may contain elements ..., for example, to indicate information about the document. The opening tag includes name=value pairs that describe the characteristics of the document, for example, the type of document, its encryption, authorship, list of keywords, and so on. This data is also used by search engines when indexing documents.

End of paragraph identifier.
- line feed identifier. - horizontal line image identifier. These tags are single, i.e. unpaired, they do not require slash tags. Installing an equal-spaced font. At the end you need a tag. Let's consider paired formatting tags for document headings and subheadings: , , , , , . In this case, the headings will be displayed in capital letters, and the size of the letters for the tag will be the largest, smaller, smaller, even smaller, etc. Let's consider paired tags for formatting text characters: - bold font identifier. - identifier of the selected font. - italic identifier. - underscore identifier. - strikethrough identifier. - identifier of an equal-spaced font (teletype or courier). - sets an increased font size. - sets a reduced font size. - sets the centering of the text. - sets the subscript. Example: x1+x2=x3 - sets the superscript. Example: Pythagorean Theorem a2+b2=c2 View an example with text stream formatting tags. Let's look at paragraph formatting tags:

Aligns text in a paragraph to the left.

Aligns text in a paragraph to the right.

Aligns text in a paragraph to the center.

Full alignment on both edges of the screen. align - alignment attribute. Let's look at list tags. They are a way to visually display structured information. Ordered lists are used to display sequential operations or algorithms. The browser automatically generates numbers for each item in the list. - identifier of the ordered list. At the end. Unordered lists are used to compile lists when the order of items is not important. Each element will be preceded by a special list icon (dot).

- unordered list identifier. At the end

. Individual elements in ordered and unordered lists they are marked with a single tag

, and the elements in definition lists are tagged for the term and for the meaning of the term.

- identifier of the element in the ordered and unordered list. End tag

may be omitted. Definition lists provide special dictionary-like formatting for terms and their associated descriptions. - definition list identifier. At the end. - identifier of the term in the list of definitions. - identifier of the meaning of the term in the list of definitions. Definition lists look like: term name 1 term definition 1 other term definition 1 ..... The use of list tags is outlined in Examples 4 and 5. View an example with list tags. Some of the most important HTML tags - sets the text color (text), background color (bgcolor) and hypertext link color (link). They also set alink="" and vlink="" - the colors of the active and visited links. - sets the background image (wallpaper) on the Web page in the back.jpg file. - the background image (wallpaper) is taken from the file tartan.bmp, and the path of this file is indicated. - sets the color of text characters (color attribute) and their size (size attribute). At the end you need a tag. - sets the color of the horizontal line. - the size=N attribute specifies the line thickness in pixels; the width=M attribute specifies the line length in pixels; the align=center (or left, or right) attribute specifies the offset of the line (its placement in the center, or offset to the left, or to the right). - insert graphic image as a file lycos.gif. There are also animated GIF files. You can also use graphic files in *.jpg (or *.jpeg), *.bmp format.

Creating a high-quality web page is not easy; it requires not only designer skills to create a beautiful and stylish design, but also programming experience. The complexity and volume of programs required to create a particular site depend on many factors, such as structure, purpose, functionality, reliability and system for protecting the site from information attacks from “sticky” information (spam, junk) and viruses.

Web technology (hypertext technology) has made it possible to link the entire set of documents published on the Internet into unified system- WWW. A hypertext document contains hyperlinks. They are usually highlighted with color and underlining. Hyperlinks allow the user to immediately go to the required document, regardless of its physical location. This greatly simplifies the search for information on the Internet.

Using hypertext breakdown of a text document in modern information systems This is largely due to the fact that hypertext makes it possible to create a mechanism for nonlinear viewing of information. In such systems, data is not presented as a continuous stream text information, but a set of interconnected components, which can be navigated using hyperlinks.

If we talk about creating HTML documents, then we can imagine two ways to create them.

The first is to manually mark up an existing (or newly created) document. In this case, the author or editor adds markup tags to the document. This work can be done in a text editor or HTML editor having special elements controls to simplify tag entry. In both of these cases, the work is carried out using the HTML language, and the person performing this work must know and be able to use this language.

The principles of another approach can be understood by studying the operation of word processors. Document formatting information can also be thought of as "markup" added to the document being formatted. However, for use word processor no knowledge of the document format and “markup language” is required: changes displayed on the screen are made to the document automatically. This principle of matching the screen image with the real one is called WYSIWYG (WYSIWYG) (from the English What You See Is What You Get (voch yu si is voch yu gat) - What you see is what you get).

They allow you to create entire web sites (portals) and use all modern technologies. Such web editors are quite suitable for professionals. If you use MS Office, you can use FrontPage from this bundle. There is also Netscape Composer as part of Netscape Communicator. You can also use a demo version of the Macromedia HomeSite web editor by obtaining it from the official Adobe website: www.adobe.com.

The first method allows you to create more universal, higher quality and more diverse documents. The second method is easier to learn, since it does not require knowledge of HTML. However, in this case formatting tools are used instead of description tools, which can sometimes lead to undesirable consequences.

So, to create web pages you will need a text or web editor. It should be noted that all web editors must also contain a text editor; there are now web editors large number, but three are recognized as the most powerful:

1. Macromedia Dreamweaver (macromedia dreamweaver);

2. Allaire HomeSite (aller home site);

3. Microsoft FrontPage (Microsoft font page).

They allow you to create entire web sites (portals) and use all modern technologies. Such web editors are quite suitable for professionals. If you use MS Office, you can use FrontPage from this bundle. There is also Netscape Composer as part of Netscape Communicator. You can also use a demo version of the Macromedia HomeSite web editor by obtaining it from the official Adobe website: www.adobe.com. Using a browser, go to the specified site in the Downloads/Trial Downloads section and select Macromedia, HomeSite.

You can use the Russian version of FrontPage Express from localized Internet Explorer - this is a shortened version of FrontPage, but very convenient for getting started. The Visual Workshop web editor is also known in Russian (http://www.snkey.net/download/products/index.html).

Modern Internet services offer ready-made website builders. Let's look at them using the example of the “My Site” website builder (www.narod.yandex.ru). With its help you can get space for your website ( home page) and in 5 minutes create your own website with pictures, photographs, etc.

The website design process includes three stages:

1. login to the site constructor;

2. registration, assigning a site name;

3. website design using blanks.

To create a man-made website, one of a kind, other web tools are required.

In addition to HTML and website builders, you can use other web page programming tools. One of the website programming tools is CGI (Common Gateway).

The principle of CGI is simple and natural: a server-side program receives some data, processes it and produces a response in the form of a web page. This is a very common occurrence today, and sometimes you don’t even suspect that you are dealing not with an ordinary page, but with the result of a CGI script (code). Region use of CGI broad and the goals varied. The programming language in which the script is written must be flexible and at the same time powerful, since not only will there be constant work with files, but also with the database, OS and web server. The most suitable languages ​​for CGI programming are C (C++) and Perl. The latter is most often used for these purposes due to its simplicity, reliability and breadth of capabilities.

The C language is rightfully considered universal and has found its place in the CGI environment. Its use is natural in its native element - Unix, on the basis of which in most cases a web site is built.

For CGI programming, the C++ language is also used, which involves the creation and destruction of certain objects implemented through classes - essentially user data types. It is natural to create, for example, a Guestbook or DataBaseEntry class that would contain the necessary variables and functions. It is worth noting that almost all new programming languages ​​(Java, JavaScript, Perl) contain constructs that are similar to C constructs or are their exact copies. Therefore, it is recommended to study this fundamental language first.

Perl is a unique language. Firstly, it lacks data types, which is beneficial for writing CGI scripts. Secondly, a lot of constructions are taken from C. It should be noted that Perl often uses regular expressions similar to those used in Unix Shell scripts. There is a convenient foreach loop and beautiful, in fact, expression modifiers. Perl has a standard library that includes functions for searching, working with a web server, graphics, etc. From this we can conclude that for a programmer familiar with Unix, it will not be difficult to learn Perl. To write such a program, it is enough to be able to work with files from Perl and, a little, with environment variables web server.

The process of creating Web documents is similar to programming and is also error-prone. Regardless of how a document is created, you should regularly check its consistency with the intent by reviewing it in different browsers. For an artistic assessment of the resulting page, you should seek independent opinion.

Questions for self-control:

1. What does the concept of an HTML document mean?

2. What are the advantages of this type of document?

3. What does the concept of “tag” mean?

4. What types of tags are there?

5. What is included in tag management objects?

www.univer.omsk.su/omsk/Edu/htmlbook/school/index2.htm

http://dvo.sut.ru/libr/ite/i280levc/index.htm Yu.P. Levchuk, E.P. Okhinchenko, A.D. Sotnikov, T.A. Fomenko COMPUTER SCIENCE Part 2 INTERNET TECHNOLOGY

1. A web page (HTML document) is:

a) a text file with the extension .txt or .doc;

b) text file with extension .htm or .html;

c) a binary file with the extension .com or .exe;

d) graphic file with the extension .gif or .jpg.

2. To view Web pages on the Internet, the following programs are used:

a) Microsoft Word or Word Pad;

b) Microsoft Access or Microsoft Works;

c) Internet Explorer or NetScape Navigator;

d) HTMLPad or Front Page.

3. Tag is:

a) an instruction to the browser indicating how the text should be displayed;

b) text that uses special characters;

c) a pointer to another file or object;

d) a fragment of a program included in the web page.

4. Hypertext is:

a) the text is very large size

b) text that uses a large font size