Creating a Web page using the HTML language. Hypertext markup language HTML HTML page metadata

MINISTRY OF EDUCATION OF THE MOSCOW REGION

GBPOU MO "PAVLOVO-POSAD TECHNICIUM"

ON THE PERFORMANCE OF COURSE WORK

By discipline

"Coursework on the topic Web-Design and programs for creating web-pages"

Specialty 230701

"Applied Informatics in Economics" 4 course

Teacher: G.E

Considered by the cyclic methodological commission

Socio-economic profile

Protocol No. from "" 20g.

Chairman of the cycle commission Mishina E.N.

2016-2017 academic year year

Introduction

1. World Wide Web3

1.1. Distribution of the World Wide Web on the Internet. 5

2. Creating a Web Page Using HTML5

2.1. HTML 5 language

2.2. HTML Document Structure5

2.3 Formatting text7

3. Programs for creating Web pages8

3.1 HTML editors8

3.2 Graphic editors13

3.3 Flash technology13

4. Creation of WEB pages in WORD12

4.1 Ways to create WEB pages in WORD12

4.2 Creating bulleted and numbered lists13

4.3 Horizontal lines13

4.4 Adding a background13

4.5 Working with tables13

4.6 Working with pictures13

4.7 Creating hyperlinks14

4.8 Embedding a Video in a Web Page14

List of used literature16

1. World Wide Web- the global computer network today contains millions of sites that host all sorts of information. People access this information through the use of Internet technology. To navigate the WWW, special programs are used - Web browsers, which greatly facilitate the journey through the vast expanses of the WWW. All information in a Web browser is displayed as Web pages, which are the main element of the WWW bytes.

Web pages, supporting multimedia technology, combine various types of information: text, graphics, sound, animation and video. On how well and beautifully made this or that Web-page depends largely on its success on the web.

The user enjoys visiting Web pages that have a stylish design, are not overburdened with graphics and animations, load quickly, and display correctly in the Web browser window.

Creating a Web page is not easy, but probably everyone would like to try themselves as a designer. And I, in this case, am no exception, and therefore chose such a topic for my term paper.

In my term paper, I made an attempt to understand what you need to know and be able to create a Web page, what software is a tool for creating Web pages and how to use it effectively.

Also in this work, I have considered the basics of the Web page programming language - HTML, which is the generally accepted WWW standard. This will give us the opportunity to familiarize ourselves with the structure of the Web page and the techniques for its proper design.

1.1. Distribution of the World Wide Web to the Internet.

The Internet is the world's largest computer network. The Internet now has approximately 150 million users in over 50 countries. The WWW is accessed primarily through the Internet; but when we say the WWW and the Internet, we don't mean the same thing. WWW can be attributed to the internal content, that is, it is some kind of abstract world of knowledge, while the Internet is the outer side of the global network in the form of a huge number of cables and computers.

So what is the World Wide Web, or, as they say colloquially, WWW, the Web, or even more simply - 3W? WWW is a distributed multimedia information system based on hypertext. Let's take this definition in order.

Distributed information system: information is stored on a great variety of so-called WWW-servers (servers). That is, computers on which special software is installed, which is connected to the Internet. Users who have access to the network receive this information using client programs, WWW document viewers. In this case, the viewer program sends a request over the computer network to the server, which saves the file with the required document. In response to the request, the server sends the viewer this required file or a rejection message if the file is not available for one reason or another. Client-server interaction occurs according to certain rules, or, as they say, protocols. The protocol adopted by the WWW is called the HyperText Transfer Protocol, or HTTP for short.

Multimedia: Information includes not only text, but also 2D and 3D graphics, video and sound.

Hypertext: Information on the WWW is presented in the form of documents, any of which may contain both internal cross-references and a link to other documents that are stored on the same or on any other server.

Such links are called hyperlinks or hyperlinks. On the computer screen, in the viewer window, the links appear as some way (for example, with a different color and/or underlining) of a section of text or graphics. By selecting hyperlinks, the viewer user can quickly navigate from one part of a document to another, or from one document to another. If necessary, the viewer program automatically contacts the appropriate server on the network and requests the linked document. By the way, the idea of ​​hypertext presentation of information should already be familiar to users of different versions of the Microsoft Windows system. It is on this principle that the Windows help system (Help) is built, with the only difference being that the Windows hypertext help system is not distributed.

So, a Web page can contain stylized and formatted text, graphics, and hyperlinks to various Internet resources. To realize all these possibilities, a special language was developed, called HyperText Markup Language (HTML), that is, Hypertext Markup Language. An HTML document is a text file that contains the actual text that carries information to the reader and markup flags. The latter are specific sequences of characters that are instructions to the Viewer; in accordance with these instructions, the program arranges the text on the screen, includes pictures in it, which are saved in separate graphic files, and forms hyperlinks with other documents or Internet resources. Thus, an HTML file takes on the appearance of a WWW document only when it is interpreted by a browser. The HTML language will be discussed in detail in the next section, because without knowledge of the basics of this language, it is impossible to create a Web page for publication on the World Wide Web.

Creating a Web Page Using HTML

HTML language

Web pages can exist in any format, but the standard is Hyper Text Markup Language - a hypertext markup language designed to create rich text rich in images, sound, animation, video clips, and hypertext links to other documents scattered throughout the Web. space, as well as those located on the same server or being an integral part of the same Web project.

You can work on the Web without knowledge of the HTML language, since HTML texts can be created by various special editors and converters. But writing directly in HTML is not difficult. It may even be easier than learning an HTML editor or converter, which is often limited in its capabilities, contains errors, or provides bad HTML code that does not work on different platforms.

The HTML language exists in several variants and continues to evolve, but HTML constructs are likely to continue to be used in the future. By learning and deepening HTML, creating a document at the beginning of learning HTML and expanding it as much as possible, we are able to create Web pages that can be viewed by many Web browsers, both now and in the future. This does not preclude the use of other methods, such as the advanced method provided by Netscape Navigator, Internet Explorer, or some other software.

Working with HTML is a way to learn the specifics of creating documents in a standardized language, using extensions only when really necessary.

HTML has been ratified by the World Wide Web Consortium. It is supported by several widely used browsers, and will probably become the basis of almost all software that has to do with the Web.

HTML document structure

Since HTML documents are written in ASCII format, any text editor can be used to create it.

Typically, an HTML document is a file with the .html or .htm extension, in which the text is marked up with HTML tags (English tag - special built-in instructions). HTML tools set the syntax and placement of tags, according to which the browser displays the contents of the Web document. The text of the tags themselves is not displayed by the Web browser.

In an HTML document, the start tag is , and the final.

The end tag differs from the start tag only in that it has a "/" (slash) character in front of the text in brackets.

A browser that reads an HTML document displays it in a window using the HTML tag structure. Every HTML document should have three main parts:

1) HTML declaration

And. A pair of these tags tells the viewer (browser) that between them is an HTML document, and the first tag in the document should be a tag (at the very beginning of the document), and the last - (at the very end of the document).

2) Heading part.

And. Between these tags is information about the document (title, search keywords, description, etc.). However, the most important is the name of the document, which we see in the top line of the browser window and in the "Favorites" lists. Special search engine spiders use the name of the document to build their databases. To give a title to your HTML document, text is placed between tags. .

My first page

3) The body of the document.

The third main part of the document is its body. It follows immediately after the title and is between the tags. And

. The body of an HTML document is where the author places information formatted with HTML.

My first page..............................................

Now we can write the HTML code for our page:

Text formatting

In the BODY section, all tabs and end-of-line characters are ignored by the browser and do not affect the display of the page in any way. Therefore, a line break in the source text of an HTML document will not result in the start of a new line in the browser-rendered text unless special tags are present. This rule is very important to remember and do not forget to put tags separating lines, otherwise the text will not have paragraphs and it will become unreadable.

The tag is used to start a new line.
(abbr. from English break - interrupt). This tag causes the browser to display further text from the beginning of the next line. The closing tag for it is not used. It is convenient if you need to write from a new line from some place without starting a new paragraph, for example, in a poem. Using it again allows you to insert one or more blank lines, pushing the next page fragment down.

Solid text without gaps is not very easy to read, it is inconvenient to browse and find the right places. Broken into paragraphs, the text is perceived much faster. The tag is used to start a new paragraph.

(eng. paragraph - paragraph). This tag, except for the beginning of a new line, inserts one empty line. Inside the brackets of a tag, in addition to its name, attributes can also be placed (English atributes - attributes). They are separated from the name and between themselves by spaces (one or more), and are written as attribute name="value". If the value does not contain spaces, the quotes can be omitted, but this is not recommended. Tag

If it is not present, then the new tag means the closing of the previous one, respectively, nested ones are not possible. It is also possible to align text to the center with a tag.

Now we can put some text with different alignment on our Web page:

My first page

Here are my personal pages!

On them you can find: - a story about me and my hobbies; - my photos.

From one of my pages it will be possible to send me an email.

In addition to using these tags, it is possible to use end-of-line characters and tabs in the HTML document itself to break lines. For these purposes, there is a tag. All text placed between the tags will be displayed unchanged, that is, with all line breaks and tabs.

For example:

This text is written in two lines.

An HTML document can contain horizontal separator lines in addition to text. They, like text, do not require any external files. The tag will draw a horizontal line of unit width along the entire width of the page. A horizontal separator line always results in a line break, but no blank lines appear between the line and the text. A tag can contain multiple attributes. and give a contour line with a three-dimensional indentation effect. gives a solid black line. The line may not extend the entire width of the page, but only a part of it. The WIDTH attribute specifies the width of the line, either as a percentage of the entire page width or in pixels. For example, 50% is half the width of the page, 400 is 400 pixels wide. The ALIGN attribute can take on values ​​similar to its tag values, but the default alignment is centered. The SIZE attribute specifies the line thickness in pixels from 1 to 175; the default is 1, but if, (the line is a contour line), then the thickness needed for the 3D dimple effect is added. Lines, along with paragraphs, allow you to highlight logical fragments of text. But a large number of horizontal lines are unpleasant for the visitor to your Web page, so you should not put them after each paragraph. They are more suitable for highlighting entire sections.

The development of the IT sphere, namely the growth in demand for services for the creation and search promotion of websites, has led to the fact that a lot of so-called webmasters have appeared who are ready to perform all the work on the site and its further support. Needless to say, most of these projects were created with the help of free designers, while the "masters" themselves have only a theoretical idea of ​​the technical component of a quality web resource. Web site design, content, thoughtfulness of usability - all this is certainly important. But a technically faulty site, with errors in the code, is simply doomed to failure.

Briefly about common programming languages

PHP. It is based on the HTML markup language. PHP is a general purpose scripting language and is open source. The syntax is fairly easy to learn and has many similarities with C, Java, and Perl. PHP's main advantage is that it allows developers to quickly create dynamically generated web pages. With professional knowledge of the language, it can be used to perform other tasks.

Python. In Russian, it is common as "python". A high-level, general-purpose programming language focused on improving developer productivity and code readability. The Python core syntax is minimalistic. At the same time, the standard library includes a large amount of useful functions.

ruby. In Russian, it is common as "cut". Dynamic, reflective, interpreted high-level programming language for fast and convenient object-oriented programming. The language has an operating system-independent implementation of multithreading, strong dynamic typing, a garbage collector, and many other features. In terms of syntax features, it is close to Perl and Eiffel, in terms of object-oriented approach - to Smalltalk. Also, some features of the language are taken from Python.

A.S.P.. The developer of this language is Microsoft. The technology allows you to develop applications for the WWW. ASP is easy and fast. ASP platforms: Windows NT and IIS (Internet Information Server). It is not entirely correct to call ASP a language, rather, it is a technology for connecting a program to Web pages. A simple scripting language and the ability to use external COM components are the secret to ASP's success.

JavaScript. The way JavaScript works is somewhat different from other programming languages. The main difference is that it is included directly in the HTML file. A script written in JavaScript is processed by an interpreter built into the browser.

The areas of use of the language are very extensive:

• Create web pages that can change after the document is loaded
• Solving local problems
• Checking the literacy of filling out forms by the user before they are sent to the server

The variety of javascript features determines the popularity of the language. With it, you can:

• Make changes to the page: work with tags, change styles, write text
• React to events (e.g. mouse click) and perform a specific function
• Display messages, validate data, set and read cookies
• Load data without reloading the page, etc.

Perl. Initially, this language was a tool for connecting programs that perform various functions into a single script that allows you to solve a complex of tasks: word processing, administration, etc. Today, Perl is the primary tool for creating CGI applications. It is used to administer web servers and other systems. The simplicity and speed of writing scripts in this language has led to its adaptation to platforms such as Windows, Mac, etc. Perl is open and available, the source texts of the interpreter can be obtained completely free of charge.

Is a large body of knowledge useful?

The basics of programming are taught in computer science classes at school. Almost everyone has come across Delphi and Pascal. More complex languages ​​require a much more serious approach to learning. A certain mindset - mathematical and logical, and, of course, the desire to become an expert in your field will help a novice programmer to succeed. Don't try to master all languages ​​at once. It is better to know one well than to have fragmentary knowledge of five. Each programming language has general principles, they are all built on the logic of actions, so with experience, mastering new technologies will become faster and easier. Many can change and copy ready-made codes, but not all programmers can become a real “artist”, and not imitators.

Creating a website at present will not cause any particular difficulties, since there are enough portals on the Internet that offer their services for creating a website. But a site created for such a service is not its own creation, but a similarity of a clone grown in a test tube.

Self-created site - will always be a favorite child, suffered through the joyful throes of creativity. You can create a website using the HTML programming language, the so-called static website.

An HTML editor is used to create a website. To independently create a site based on HTML, you need knowledge of the HTML programming language, certain concepts of Photoshop, some writing skills, a little imagination and design art.

A site created using the PHP programming language is a dynamic site. Most of the existing sites on the Internet are based on PHP, on CMS engines (content management system). On this site, you can learn how to create a website and get qualified assistance in creating a website on your own on CMS engines:
- creating a site on Joomla;

Starting something is always difficult. The main thing here is to set a specific goal. To begin with, choose the theme and sample site that you want to make, draw up a plan for its implementation. And move towards the achievement of the main goal.

To implement the functionality of various directions, web programmers “write” sites using the appropriate web markup languages, in order to maximize the interactive capabilities of the web resource. We will not go deep into the wilds of web terminology, but will only help you understand the main points of writing the site code that may come up during the discussion of the project and its further implementation.

HTML

HTML is one of the oldest web programming languages, which appeared at the dawn of the Internet, and has established itself as one of the simplest and most reliable ways of web programming. HTML stands for Hyper Text Markup Language - Hypertext Markup Language. Websites created using HTML technology are mostly a set of static pages that do not require a database.

HTML technology can be suitable for creating small, lightweight sites with a few pages, the functionality of which does not require interactivity and dynamics.

Like any technology, the HTML standard does not stand still, and today a new standard, called HTML5, is entering the web design environment. This technology is very young, but it provides great opportunities in terms of creating sites, and allows you to implement new, previously impossible functionality. Although HTML5 technology has not yet fully entered the scope of web development, and far from all Internet browsers support it, website studio programmers take into account the impact of HTML5 on the further development of Internet technologies in the future, and create websites using the most advanced web technologies. -programming.

PHP

PHP is a server-side programming language and connects the site with the server and its database. By itself, the PHP language is not responsible for creating a site, and if we look at the page code of such a resource, we will see the same HTML, only interspersed with PHP code.

In PHP sites, a part of the code written in HTML is responsible for the appearance and output of information, and PHP, in turn, is responsible for the dynamics and interactivity of the functionality. Due to its simplicity, flexibility and speed of operations, the PHP language is one of the most popular standards in web development.

In the development of the predominant part of the sites created by the site studio, PHP technology was used, because. connection of the site with the database, by means of PHP code is an indispensable condition when creating dynamic, multifunctional Internet resources.

FLASH

In fact, the technology itself flush is not a web programming language, but is used to render elements written in XML.

Creating a site using flash technology is a complex and time-consuming process, but the result is worth the effort and money spent on it. Flash elements make your site bright and interactive. Live, dynamic pages will leave an indelible impression of your resource among visitors, and a positive image of your site will remain in the minds of enchanted users for a long time. The image of the company from the use of flash technology on its resource will only benefit, since elements made on flash are not cheap and are considered luxury.

But in everything, as they say, you need to know the measure, and the creation of flash-sites is no exception. Flash blocks are much heavier than standard web elements and therefore take longer to load. And network users, as a rule, do not like to wait. Therefore, trust the creation of your flash site to professionals who optimize it for maximum productivity.

WAP

WAP (Wireless Application Protocol) is a technology that allows you to access Internet resources directly from your mobile device.

The main difference between a WAP site and an ordinary Internet resource is that the WAP site is “tailored” for viewing on small displays of phones and communicators, and therefore a number of requirements and standards are imposed on the development of a WAP site, aimed at lightening the weight of the page WAP-portal and site content optimization specifically for viewing in the phone's WAP-browser.

Sites written for WAP have their own markup language, adapted specifically for the exchange of information with the WAP browser. And if ordinary sites intended for viewing from a computer are mostly written in languages html, php, Perl, or xml, then the WML standard is used to create WAP sites ( Wireless Markup Language). Among other things, the development of WAP resources uses its own image format - WBMP, which makes it possible to make the WAP page as light as possible.

Due to the constant growth of the mobile device market, standards for data transfer between the worldwide network and mobile devices are also developing, therefore, the site web-studio specialists do not stop monitoring innovations in this industry of creating sites and in the development of WAP sites they always use the most progressive methods and advanced technologies.

A.S.P.

A.S.P. (Active Server Pages) is an open web application development environment that allows you to combine HTML, scripting, and ActiveX server components to create dynamic and powerful web business solutions. ASP pages are pages that contain scripts that run on the server side.

Perl

Perl (Practical Extraction and Report Language) is a universal, interpreted web programming language used for writing cgi scripts and cgi programs that run on the server side and allow automating the site. Perl is one of the most convenient and common environments for creating dynamic web pages, although it has been supplanted in recent years by newer Internet technologies. The Perl format is a great way to interact with web servers via CGI ( common interaction interface). Perl is currently losing ground in relation to its functional counterpart, PHP.

C+

C, C++- widely used web programming languages ​​used for writing cgi scripts. Currently supported by most servers. Scripts written in C+ must be compiled on the server side.

SSI

SSI (Server Side Includes) is a technology that allows you to assemble a web page from several scripts or files into a single, functional whole. SSI allows you to include information on the server in a web page that is not available using HTML. In fact, SSI is a kind of analogue of includes in PHP. Allows you to embed elements common to each or group of pages into the site code, allowing you to edit each page through only one file. SSI directives supported .shtml, .htm And .html and are registered in the .htaccess file.

Introduction

1. Basic information

1.1 About the html language

1.2 Website creation

1.3 Fundamentals

1.4 Document structure

1.5 Document body tags

1.6 List of basic html tags

2. Additional information

2.1 List tags

2.3 Graphics within a document

2.4 Adding styles to a document

2.5 Special html tags

2.6 Html forms

2.7 Html frames

2.8 Html tables

2.9 Optimizing graphics for the web

2.10 CSS basics

3. Description of the creation of the site

3.1 Preparation

3.2 Creating the main page

3.3 Creating a second page

3.4 Creating a city description page

3.5 Photo page

3.6 Program page

3.7 Thank you page

Conclusion

List of used literature

Introduction

This thesis is devoted to the HTML language. This language creates *.htm and *.html files that are Web pages. They are made up of Internet sites.

A site is attached to the thesis work, as an example of what can be created using the HTML language.

All work is divided into 3 sections. The first section is entirely devoted to describing the basic HTML tags. In it you will find all the necessary information on how to create simple web pages. The second section provides information on how to improve the look and feel of your document and build additional features into it. And the third section contains a description of how the site attached to this thesis was created. It describes in detail a month and a half of hard work on creating a site, tells about various errors in the creation and their correction, about the difficulties that arose and methods for eliminating them.

After reading this work, anyone, even completely unfamiliar with programming, will be able to understand the basics of HTML programming. And those who know, perhaps, will find something new for themselves.

1.1 About language HTML

Hyper Text Markup Language (HTML) is a standard language for creating hypertext documents in the WEB environment. HTML documents can be viewed by various types of web browsers. When a document is created using HTML, a web browser can interpret the HTML to extract the various elements of the document and process them first. Using HTML allows documents to be formatted for presentation using fonts, lines, and other graphic elements on any system that views them.

Most documents have standard elements such as headings, paragraphs, or lists. Using HTML tags, you can designate these elements, providing WEB browsers with the minimum information to display these elements, while maintaining the overall structure and informational completeness of documents. All that is needed to read an HTML document is a WEB browser that interprets the HTML tags and displays the document on the screen in the form that the author gives it.

In most cases, the author of the document strictly defines the appearance of the document. In the case of HTML, the reader, based on the capabilities of the web browser, can, to a certain extent, control the appearance of the document (but not its content). HTML allows you to mark where in a document a heading or paragraph should be with an HTML tag, and then let the web browser interpret those tags. For example, one WEB browser may recognize the paragraph start tag and present the document in the desired form, while the other does not have this capability and presents the document in one line. Users of some WEB browsers also have the ability to adjust the font size and type, color, and other parameters that affect the display of the document.

HTML tags can be roughly divided into two categories:

1. Tags that determine how the body of the document as a whole will be displayed by the WEB browser.

2. Tags that describe the general properties of the document, such as the title or author of the document.

Remember that the main benefit of HTML is that your document can be viewed on many different types of web browsers and platforms.

1.2 Creation website

HTML documents can be created using any text editor or specialized HTML editors and converters. The choice of the editor that will be used to create HTML documents depends solely on the concept of convenience and personal preferences of each author.

For example, HTML editors such as Netscape's "Netscape Navigator Gold" allow you to create documents graphically using WYSIWYG (What You See Is What You Get) technology. On the other hand, most traditional document authoring tools have converters that allow you to convert documents to HTML format.

All HTML tags start with "<" (левой угловой скобки) и заканчиваются символом ">" (right angle bracket). Typically, there is a start tag and an end tag. For example, here are the head tags that define the text inside the start and end tag and describe the title of the document:

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

Some tags like

(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.

HTML is not case-sensitive for the characters that describe the tag, and the example above might look like this:

Attention! Extra spaces, tabs, and carriage returns added to the source text of an HTML document for better readability will be ignored by the web browser when interpreting the document. An HTML document can only include the above elements if they are placed inside tags.

AND

. Learn more about tags

Will be written below.
 
When a web browser receives a document, it determines how the document should be interpreted.  The very first tag that occurs in a document must be a tag .  This tag tells the web browser that your document is written using HTML.  A minimal HTML document would look like this:
 
Document body...
 
Header of the document .  The document header tag must be used immediately after the tag and nowhere else in the body of the document.  This tag is a general description of the document.  Avoid putting any text inside the tag .  Start tag placed directly before the tag 
 
Attention!  Technically, start and end type tags , And are optional.  But it is strongly recommended to use them, since the use of these tags allows the WEB browser to confidently separate the heading part of the document and the semantic part itself.
 
Document title , located inside -tags, as shown in the example above.  The title of the document does not appear when the document itself is displayed in the window.