WEB SITE DESIGN

Stages of creating a website

Creating a Web site involves several stages - from coming up with an idea to its implementation. To create a truly interesting and useful product, you need to go through the following steps.

Analysis and design. Analysis of strengths and weaknesses competitors, information design of a Web site, development of its concept, assessment of the target audience.

Content writing. Under content refers to the information content of the site. The term is used to refer to the ideological content of a Web site.

Creative. Creative- a term to denote the visual component of a Web site. This includes the development of design, graphic elements, graphics processing and everything related to it.

Writing website code. Web file programming, writing the functional part

Testing. At this stage, everything is checked: ease of navigation, data integrity, correctness of links and spelling; moreover, not all browsers interpret the same HTML tags in the same way.

Publication. Placing a website on the Internet. Most Internet service providers (ISPs) provide the service of hosting home Web pages for free (this service is called Web hosting). To publish, you can host your Web site with a provider or use other options.

Support. It is necessary to decide how new sections and materials will be added, and what will happen to the old ones. It may be necessary to create a news archive that will contain news that has lost its relevance. It is even more important to regularly update the information on the Web site to ensure that it remains attractive.

Web Design Terminology

Web browser- an application program designed to interpret HTML document codes and display a hypertext document on a computer screen. Most commonly used browsers - Internet Explorer,Opera, Mozilla Firefox, Google Chrome. Along with the term “browser”, synonymous terms are used: “browser” and “navigator”.

Website- a set of interconnected, similar in meaning Web pages and files. Each Web site has one Web page called the homepage or home page. All visitors to the Web site first land on it, and then, using hyperlinks, get to other pages of the Web site.

Web page (HTML document) is a text file on HTML language format *.htm or *.html, posted on WWW. In addition to text, a Web page can contain graphics, animations, video clips, music, as well as hypertext links with which you can navigate to and view other Web pages.

One way to create Web pages (or HTML documents) is to use text editor Notepad, built into Windows. In this editor, a Web page file is created, which is saved with the *.htm extension, and the results are then viewed using a browser.

Creating Web sites using HTML language

Language HTML(Hyper Text Markup Language) is a hypertext document markup language used for writing Web sites.

The HTML language allows you to:

‒ create and edit Web sites, including a home Web page, which can then be posted on the Internet;

- edit HTML documents received from the Internet so that all objects embedded in the document (pictures, animations, etc.) function;

- create multimedia presentations, slide shows, demo projects, thanks to hypertext links and the ability to insert drawings, diagrams, animations, video clips, music and speech accompaniment, text special effects (for example, creeping line) into an HTML document.

BASIC CONCEPTS OF HTML LANGUAGE

Element is an HTML language construct, or container, containing data.

Web page is a set of elements.

Tag are the start and end markers of the element. Tags define the boundaries of the action of elements and separate elements from each other. Tags are enclosed in angle brackets, for example: . The end tag, if required by the language syntax, is preceded by a forward slash:.

Frame- an area of ​​a hypertext document with its own scroll bars. Frames allow you to split pages into rectangular areas, each of which displays its own own page. You can place one or more frames on a page (this page is called frames page or frameset).

Form- an area of ​​a hypertext document that is necessary for organizing feedback with site visitors.

Applet- a small application program transferred to the client’s computer in the form separate file and launched when viewing a Web page.

Script- a program included in a Web page to expand its capabilities.

Placement (UpLoad)- copying a document from the client’s computer to the Web server - used when creating your own Web page (i.e., when publishing it).

Pixel- the smallest color point on the monitor screen.

GENERAL STRUCTURE OF A SIMPLE HTML DOCUMENT

The general structure of a simple HTML document is:

<СОММЕNT> A comment

HTML is not case sensitive, so the example above might look like this:

The end tag looks the same as the start tag, and differs from it by a forward slash before the text inside angle brackets. IN in this example tag - about the completion of the title text.

Some tags such as

(tag that defines a paragraph) do not require an end tag, but its use gives the source text of the document improved readability and structure.

When a WEB browser receives a document, it determines how the document should be interpreted. The very first tag that appears in the document must be the tag . This tag tells the WEB browser that your document is written using HTML. A minimal HTML document would look like this:

...the body of the document...

Document header

The document head tag should be used immediately after the tag and nowhere else in the body of the document. This tag is general description document. Avoid placing any text inside the tag . Start tag placed immediately before the tag Document title , located inside -tags, as shown in the example above. The document title does not appear when the document itself is displayed in the window.

Comments

Like any language, HTML allows you to insert comments into the body of a document, which are saved when the document is transferred over the network, but are not displayed by the browser. Comment syntax:

Comments can appear anywhere in a document and in any quantity.

Document body tags identify the components of the HTML document displayed in the window. The body of the document may contain links to other documents, text, and other formatted information.

Document body

The body of the document must be between the tags And. This is the part of the document that is displayed as text and graphic (semantic) information of your document.

Paragraph tag

Unlike most word processors, carriage returns are generally ignored in an HTML document. A physical paragraph break can be located anywhere in the source text of the document (to make it easier to read). However, the browser only separates paragraphs if there is a tag

If you don't separate paragraphs with the tag

Your document will appear as one large paragraph.

Hypertext links are a key component that makes the WEB attractive to users. By adding hypertext links (hereinafter referred to as links), you make a set of documents connected and structured, which allows the user to obtain the information he needs as quickly and conveniently as possible.

Links have a standard format, which allows the browser to interpret them and perform the necessary functions (call methods) depending on the type of link. Links can point to another document, a specific location within that document, or perform other functions, such as requesting a file via FTP for the browser to display. A URL can point to a specific location in an absolute path, or it can point to a document in the current path, which is often used when organizing large structured WEB sites. Return to the previous link if the movement occurred within the document. If you use links within a document and then press the Back key, you will not go to the previous link, but will return to the part of the document that you were viewing before.

One of the most attractive damn Web-the ability to include links to graphic and other types of data in an HTML document. This is done using a tag . Using this tag can significantly improve the appearance and functionality of documents.

There are two ways to use graphics in HTML documents. The first is the embedding of graphic images into the document, which allows the user to see the images directly in the context of other elements of the document.

This is the most used technique in document design, sometimes called "inline image".

Some WWW browsers allow the user, by filling out a special form that returns the resulting value, to perform certain actions on your WWW server. When the form is interpreted by a WEB browser, special GUI screen elements are created, such as input fields, checkboxes, radiobuttons, drop-down menus, scrollable lists, buttons, etc. When a user fills out a form and clicks the "Submit" button (SUBMIT is a special type of button that is specified when describing a document), the information entered by the user into the form is sent to the HTTP server for processing and transmission to other programs running under the server, in accordance with CGI (Common Gateway Interface) interface.

When you describe a form, each data entry element has a tag . When a user places data in a form element, the information is placed in the VALUE section of that element. One of the most attractive features of the Web is the ability to include links to graphics and other types of data in an HTML document.

Although Web pages appear formatted on a computer screen, HTML is not intended for formatting documents because the rigid design and precise positioning of text elements on a page leads to restrictions that are unacceptable on the Internet.

So, for example, when we format text with word processor Word, we definitely determine how this text should look when printed on a very specific printer and on paper specified format. When a document is posted on the Internet, it is impossible to predict which computer will be used to view it, or whether that computer will even have a monitor.

Perhaps the text will appear on the screen of a computer running in Windows system in the window of one of the modern browsers. Maybe it will be a text browser (not capable of displaying graphics) running on MS-DOS. Perhaps the text of the document will not be displayed on the screen at all, but will be played out loud using a speech synthesizer. For a blind user, the document can be displayed on a special device in Braille.

Due to the need to prepare documents for such a variety of devices, HTML is not intended to describe the document format. It serves for functional document markup, that is, it allows you to determine appointment fragments of text.

For example, if there is a heading in the text, then the HTML code simply indicates that the corresponding fragment is a heading. Having received such code, the viewer program (browser) itself “decides” what to do with the title. Perhaps she will display it more large print, or maybe align it to the center of the screen. It is possible that the speech synthesizer that reproduces the text of the Document uses the header code to increase the volume and make the necessary intonation pause.

The HTML language still has some formatting commands, but the general course is to separate content and the execution of the document is strictly maintained. IN latest version HTML (4.0) formatting commands are generally not recommended.

The HTML language codes used to mark up the source text are called tags. A tag is a set of characters. All tags begin with a less than symbol ( < ) and end with a greater than symbol ( > ). These pair of symbols are sometimes called angle brackets. After the opening angle bracket comes keyword, defining tag.

Each tag in HTML has a special purpose. The case of letters in tag names does not matter—either lowercase or uppercase letters can be used, although it is common to use uppercase letters to distinguish tags from the normal text of the document.

As a rule, one HTML tag affects only part of the document, such as a paragraph. In such cases, paired tags are used: opening And closing. The opening tag creates the effect, and the closing tag ends the effect. Closing tags begin with a forward slash ( / ).

Some tags provide a one-time effect where they appear. In this case, there is no need for a closing tag and it is not used.

If by mistake a tag contains a keyword that is not found in HTML, the tag is ignored entirely.

When a document is displayed in a browser, the tags themselves are not displayed, but they affect the way the document is displayed.

Tag attributes

Opening tags can often contain attributes, influencing the effect created by the tag. Attributes are additional keywords separated from keyword tag and separated from each other by spaces.

Some attributes require specification attribute values. This value is separated from the keyword by an equal sign ( = ). The attribute value must be enclosed in quotation marks, but in many cases the quotation marks can be omitted without any harm.

Closing tags never contain attributes.

Comments

In programming languages, it is common to use comments - text lines that are not part of the program, but serve for explanation. The HTML language also has this capability.

Comments in HTML begin with a special tag . A comment can contain any characters except the greater-than character ( > ), and thus cannot include tags.

Examples of HTML tags:

, between which the “official” title of the document is placed. Most browsers running on Windows use this title to fill the title bar of the browser window.

3. The text of the document itself is located in body of the document. The body of the document is located between the tags And .

The four paired tags listed define the basic structure of an HTML document. They appear (or are implied) in all HTML documents.

In practice, it is possible to determine the location of these structural main tags even if they are absent. Therefore, if the tags , And , as well as their corresponding closing tags are omitted, then the browser program itself can determine the place where they should have been located. Tag