Language for layout of hypertext HTML pages. Movie programming and technologies for web development Creating a web page using html help

U educational program from information science and ICT on the topic “Communication Technologies” is introduced every 12 years and it is proposed to create a Web page with vikoristan templates. There are 8 years on the topic “Multimedia technologies”, but since in the main part computer science is taught at the propaedeutic level already in grades 5, 6 and 7, then it is necessary to completely postpone the training of multimedia technologies in the propaedeutic course And then you can increase the hour for studying communication technologies, or more precisely, you can add the topic “Creation of Web sites in English language” to the 8th grade.

Having mastered the technology for creating websites, it is recommended to print HTML hypertext from your markup in the Notepad program, which is the primary basis for this. Of course, in 8 years it is impossible to read the entire HTML language, but it is possible to show the significance and content of the main tags of the language. Once you learn to become familiar with the technology of creating websites, you can continue learning the material on your own or in advanced courses, groups, or electives.

The presentation is a methodical textbook that has undergone repeated testing in the 8th grade of gymnasium No. 441 in the Frunzensky district of St. Petersburg and includes material for conducting theoretical and practical activities, which are initially demonstrated through a projector, and then taught build independently on a computer, vikorist or dispenser material before the lesson.

For students who have finished their planned work for the lesson, transferring additional assignments.

The material can be mastered effectively if students and the teacher complete a project together, for example, on the topic of the history of St. Petersburg “Dramatic Theaters of St. Petersburg”, and then, like a student, create a small, simple project Like a website template, creations in collaboration with the teacher.

As a result of this work, scientists respond to the test for knowledge of HTML tags and present the creations of their own website.

The main goals of the study: the formation of cognitive interest, the development of intellectual and creative abilities in people using Web technologies.

Basics:

  • formulate a system of knowledge about the technology of creating Web sites;
  • learn the layout of HTML hypertext for creating websites;
  • become familiar with the stages of project activity.

Developing:

  • develop creativity to self-expression through the creation of websites;
  • formulate the concept, create analogues and create transferable knowledge from a new subject area of ​​Web technologies;
  • develop your robotic skills on your computer

Vikhovny:

  • vihovati sumlinna zabotaniya before work;
  • obtain a sense of partnership and special responsibility for the creations of the site;
  • exude artistic and aesthetic relish;
  • Find a competent and correct correspondent for the Internet.

Lesson 1

1. News about Web sites and HTML language

Publications in All-worldly pavutinnya(World Wide Web) are implemented in the form of Web sites. The website, behind its structure, resembles a magazine that contains information dedicated to any topic or problem. Just as a magazine is made up of other pages, a Web site is made up of computer Web pages with hyper-power. Web pages can contain text, graphics, tables, multimedia and dynamic objects. The creation of websites can be done using additional HTML language.

HTML – Hyper Text Markup Language - Language layout for hypertext. HTML in each world does not require programming; it only relies on the placement of elements (text, small objects) in the browser window. HTML is my tool for creating websites on the World Wide Web. Language HTML consists of simple commands - tags. Tags mark the information provided on the screen when an HTML document is displayed. Tags appear at the corner of the bow<>... and there are guys and unpairs (alone<>).

HTML document– this is a text file with extensions. html or htm What to do is dial tags.

Browser – a program for viewing web pages. Microsoft Internet Explorer, Opera, etc. browsers are widely used. When the browser grabs an HTML document, it converts its analysis, creating an object model of the document, and then displaying it on the monitor.

2. HTML document structure

3. Character formatting

The symbols placed between the foot tags represent:

Font settings

Text between tags …….. You can set the size, color and typeface. For whom the attributes are wikipedaled: SIZE = Values ​​from 1 to 7 COLOR= color (aqua, black, blue, fuchsia, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), the skin color is indicated by its hexadecimal code ranging from 000000 to FFFFFF.

If the text contains a number of spaces between words or tab characters, the browser displays just one space on the screen. Since additional gaps are necessary, then between the words the requirement for additional supply is a symbolic primitive.

Single tag
opens the text stream and inserts an empty row. A number of such tags add a number of empty rows. The inter-row interval is single.

4. Practical plant No. 1.

Creation of the first HTML document "Dramatic Theaters of St. Petersburg", work with fonts, color and size of the font. Mastered robot technology.

Lesson #2

1. Formatting the text into paragraphs

Tag - starts a paragraph in a new row. The new paragraph is added to the previous one with an inter-row interval.

Verification of the text by paragraphs:

2. Setting the color of all text and background of the document

Described in the original body tag of the document

TEXT= text color >.

3. Headings from different regions

Tags …. they design the text. The n values ​​change from 1 to 6, whereby the text is displayed from largest to smallest. Tags …. can mother's attributes ALIGN = CENTER, LEFT, RIGHT.

4. Simple lists

5.Practical plant No. 2

Formatting the text by paragraphs, background colors, headings of various regions, lists.

Lesson #3

1.Insert graphic images

All browsers support formats .gif, .jpg. These formats are raster. GIF– clarity and animation are encouraged, well suited for small images. JPG– for multi-color images, which are better suited for scanned images and photographs, animation is not supported.

Single tag inserts graphic images into a text stream at any location:

>

Non-language tag attributes :

If the little ones are near the center, you can use the tag

…….
/

2. Practical plant No. 3

Inserting and formatting graphic images. Independent creation of Web-stories of dramatic theaters.

Lesson #4

Links with other documents are organized by tags<A>....

> text hyper-powered .

>< IMG SRC ='name of graphic file' >

2. Practical plant No. 4

Registration of the list of theaters on the main page glavn.htm as a hyperlink to the theaters' additional Web pages.

Lesson #5

1. Tables

Vikorist is used not only in order to arrange the data in the middle, but also in order to position fragments of the text in order to depict one after another.

For additional help, you can manually create the site navigation table.

The table has two rows (rows), so there are two middles:

The middle of the table can contain text or images, as well as text with HTML tags and hyper-enforcement. There is no need to leave the middle of the table unfilled if you want to place it in an unbroken clearing.

Basic attributes of tags

і
set table parameters, rows or layouts:

ALIGN = left, right, center - alignment (

, ,
)

BGCOLOR='color' – background color (

, ,
)

HSPACE = value – left-handed and right-handed space in the table in pixels (

)

VSPACE = value - free space below the table in pixels (

)

WIDTH = value – width of the table (room) – in pixels or in hundreds (

,
)

HEIGHT = values ​​– table heights (compositions, rows) – in pixels or in pixels (

, )

BORDER= value – the number of borders around the table and the middle, after default value = 1, if value = 0, then there is no border (

,
, ,

Before we go through our lessons on creating websites using HTML and CSS, it is important to understand the difference between the two languages, the syntax of each language and the basic terminology.

What is HTML and CSS?

HTML (HyperText Markup Language) defines structure instead of text, meaning content such as headings, paragraphs and images. CSS (Cascading Style Sheets) or cascading style sheets are a presentation created to create a new look for content, such as fonts or colors.

These two languages ​​- HTML and CSS are not independent and are to blame for such deprivation. CSS is not guilty of writing in the middle of an HTML document or anything else. As a rule, HTML is always presented instead, and CSS is always important for its design.

With such significant differences between HTML and CSS, let's look at the HTML report.

Basic HTML terms

Before you start working with HTML, you will definitely come across new and often surprising terms. Over the course of the year, you will become familiar with all of them in this report, but now you must begin with the three main terms of HTML – elements, tags and attributes.

Elementi

Elements indicate how to indicate the structure and instead of objects on the page. Some commonly used elements include a number of equal headings (identified as elements

before
) and paragraphs (meant as

); You can include elements in the list ,

, , і and many others.

Elements are identified by the help of the heel arms<>, so that I can feel my element. Thus, the element looks like this:

Tags

Addition of heel arms< и >When you create an element, you create what is known as a tag. Tags are most often found in pairs of tags that open and close.

The opening tag indicates the origin of the element. The value is made up of the symbol<, затем идёт имя элемента и завершается символом >; for example,

.

The closing tag indicates the end of the element. The value is made up of the symbol< с последующей косой чертой и именем элемента и завершается символом >; for example,

.

Instead of what is between the tags, what opens and closes, and instead of this element. Posilannya, for example, matime tag, which is crooked that cover tag. What will be between these two tags instead of sending.

So, the tags look something like this:

...

Attributes

Attributes and authorities are used to provide additional information about the element. The most extensive attributes include the id attribute, which identifies the element; the class attribute, which classifies the element; the src attribute, which means the body of the one born together; href attribute, which indicates the link to the resource.

Attributes are assigned to the title that opens after the name of the element. By definition, attributes include names and meanings. The format for these attributes consists of the name of the attribute followed by the symbol, and then the value of the attribute. For example, element The href attribute will look like this:

Shay Howe

Demonstration of basic HTML terms

This code will display the text "Shay Howe" on the web page and when you click on this text you will be sent to http://shayhowe.com. The sent element is voiced for the additional tag that is displayed and closes the tag the text, as well as the attribute and the meaning of the address sent through href="http://shayhowe.com" in the text that is crooked.

Rice. 1.01. HTML syntax The schematic view includes an element, an attribute, and a tag

Now, if you know what HTML elements, tags and attributes are, let's take a look at our first web page. Everything seems new here, don’t worry – we’ll decipher everything as we go.

Adjusting the structure of the HTML document

HTML documents - forgive me text documents, savings with extensions.html, and not .txt. To start writing HTML, you will first need a text editor, which you can use from Wikoristan. Unfortunately, this does not include Microsoft Word and Pages, some other folding editors. The two most popular text editors for writing HTML and CSS are Dreamweaver and Sublime Text. Cost-free alternatives are also Notepad++ for Windows and TextWrangler for Mac.

All HTML documents have a basic structure that includes the following declarations and elements: , , і .

Goloshennya document type oris located on the beginning of the HTML document and notifies browsers that the HTML version is being updated. We will vikorize the fragments I'll keep the version HTML, our document type will simply be. Next item What does the beginning of a document mean?

In the middle element means the top part of the document, including various metadata (supporting information about the side). Instead of the middle of the element is not displayed on the web page. You can also include the title of the document (which appears in the title bar of the browser window) sent to any external files or other relevant metadata.

All visible content on the web site is included in the element . The structure of a typical HTML document looks like this:

Hello world!

Hello world!

This is a web site.

Demonstration of the structure of an HTML document

This code shows the document, starting with the document type,then the element will come immediately . In the middle go elementi і . element code the page using the tag the name of the document through the element . element <body>includes a title through the element <h1>that paragraph of text through<р>. Scraps of both heading and paragraph are included in the element <body>, the stench is visible on the web page.</p><p>If an element is in the middle of another element, including attachments, it is a good idea to add a new entry to keep the structure of the document well organized and readable. The previous code has offensive elements <head>і <body>inserted and inserted into the middle of the element <html>. The structure of the entries for the elements will continue with the newly added elements in the middle <head>і <body> .</p><h3>Self-closing elements</h3><p>At the front butt there is an element <meta>be a single tag, which does not include the tag that closes. Don’t brag, the whole thing is broken up into pieces. Not all elements are composed of tags that open and close. These elements simply behave together or behave through attributes within one tag. <meta>It is one of these elements. Instead of element <meta>In the application, additional attribute charset and value are required. Other standard self-closing elements include:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>The structure has been established, divided into additional details of the document type<!DOCTYPE html>and elements <html> , <head>і <body>, є dosit wide. We want to preserve this structure of the document manually, as the fragments often get stuck when creating new HTML documents.</p><h3>Code validation</h3><p>No matter how carefully we write our code, mistakes are inevitable. Fortunately, when we write HTML and CSS, we have validators to check our work. W3C introduces HTML and CSS validators that scan code for parity. Verifying our code not only helps ensure that it displays correctly in all browsers, but also helps us develop advanced knowledge of how the code is written.</p><h2>In practice</h2><p>As web designers and front-end developers, we can indulge ourselves in a number of wonderful conferences dedicated to our craft. We are going to organize a national conference, Styles Conference, and create a website for it with upcoming lessons. That's right!</p><br><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy loading=lazy><p>Let's move on to a little bit of HTML and take a look at the CSS. Remember, HTML determines the structure of our web pages, while CSS determines their visual style and <a href="https://3ddroid.ru/en/there-are-some-advice/oformlenie-spiskov-list-style-pravila-css-dlya-nastroiki-vneshnego-vida-spiska/">external look</a>.</p><h2>Basic CSS Terms</h2><p>In addition to HTML terms, there are a number of basic CSS terms that you will need to be familiar with. These terms include selectors, powers and meanings. As with HTML terminology, the more you work with CSS, the more the terms become your other nature.</p><h3>Selectory</h3><p>When elements are added to the web page, they can be styled using additional CSS. The selector determines which element or HTML elements are targeted and styles (such as color, size, and position) applied to them. Selectors can include a combination of different indicators to select unique elements, however specific they are. For example, we want to select every paragraph on the page or just select one specific paragraph.</p><p>Selectors are usually associated with attribute values, such as the value of the id or class or the name of the element, for example <h1>or else<р> .</p><p>In CSS, selectors are connected to curly bows (), which select styles and are assigned to the selected element. This target selector for all elements <span><p>P(...)</p><h3>Powerful</h3><p>As an element of choices, power signifies the styles that will be preserved to the next. The names of the authorities come after the selector, in the middle <a href="https://3ddroid.ru/en/program/kak-napisat-posle-figurnoi-skobki-v-vorde-kvadratnye-i-figurnye-skobki/">figured temples</a>() and without the middle in front of the double. There are a lot of authorities that we can change, such as background, color, font-size, height and width and other authorities that are often added. In the current code, the power of color and font-size is determined, which affects all elements <span><p>P (color: ...; font-size: ...; )</p><h3>Significance</h3><p>For now, we have just selected an element through the selector and determined which style we would like to stagnate through the authorities. Now we can put the behavior of the value of power through values. Values ​​can be indicated as the text between the dots and the dots. Below we select all the elements <p >I set the color value to orange, and the font-size value to 16 pixels.</p><p>P ( color: orange; font-size: 16px; )</p><p>To recap, in CSS our set of rules starts with the selector, then goes straight to the bow shapes. These figure-shaped bows contain shock, as from the pairs of authorities and meaning. Skin irritation begins with jaundice, followed by a double note, significant jaundice, and a point with a coma.</p><p>Widespread practice is the meaning of the bet of power and the meaning of the middle of the curly arches. Like HTML, inputs help keep our code organized and sane.</p><p><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy loading=lazy loading=lazy></p><p>Rice. 1.03. The structure of CSS syntax includes selector, authority and value</p><p>Knowing a few basic terms and basic CSS syntax is a good start, but there are still a few more points to consider, first going into depth. We need to take a closer look at how selectors work in CSS.</p><h2>Working with selectors</h2><p>Selectors, as stated earlier, indicate which HTML elements will be styled. It is important to understand how to use selectors and how they work. The first step is to become familiar with the different types of selectors. Let's talk about the main selectors: type selectors, class selectors, and identifier selectors.</p><h3>Selector type</h3><p>Type selectors target elements of their type. For example, because we want to focus on all the elements <div>It's our fault to use the div selector. The advance code shows the selector type for the elements <div>, as well as the original HTML.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Klasi</h3><p>Classes allow you to select an element based on value <a href="https://3ddroid.ru/en/printers/poisk-elementa-na-stranice-javascript-javascript-i-jquery-vyborka-elementa-po-klassu/">class attribute</a>. Class selectors are a little more specific, while type selectors are less specific, and sometimes select a single group of elements, or not all elements of the same type.</p><p>Classes allow you to define different styles at once to different elements, depending on the same values ​​of the class attribute for several elements.</p><p>In CSS, classes are indicated with a dot in front, followed by the value of the class attribute. The class selector below selects all elements that match the value of the awesome class attribute, including elements <div>і <span><p>Awesome(...)</p><p> <div class="awesome">...</div> </p><h3>Identifiers</h3><p>The identifiers are even more precise, lower grades, and the odor fragments are focused on one unique element at a time. Just as vikory class selectors match the values ​​of the class attribute, vikory identifiers match the values ​​of the id attribute as a selector.</p><p>Regardless of the type of element being typed, the value of the id attribute can be changed more than once on the page. If the ID is present, the details are reserved for important elements.</p><p>In CSS, identifiers are indicated with a gram symbol in front, followed by the value of the id attribute. Here the identifier selects the element to place the id attribute on the shayhowe values.</p><p>#shayhowe (...)</p><p> <div id="shayhowe">...</div> </p><h3>Additional selectors</h3><p>Selectors are an extremely difficult thing, and the descriptions are more likely to cover the widest range of selectors that we need. Tsi selector is less cob. There are a lot of advanced selectors and they are easily accessible. Once you get used to them, don’t be afraid to be amazed at their progress.</p><p>Garazd, we’re starting to collect everything at once. We add elements to the side in the middle of our HTML, then we can select those elements and style them with additional CSS. Now let's connect the dots between HTML and CSS so that the two words can work together.</p><h2>CSS connections</h2><p>To understand our CSS and our HTML, we need to refer to the CSS file in the HTML. A good practice is to include all of our styles in one external file, which is the text box in the middle of the element. <head>our HTML document. The use of one new CSS allows us to consolidate the same styles throughout the site and quickly make any changes.</p><h3>Other options for adding CSS</h3><p>Other CSS options include using internal and custom styles. You can be aware of these options in reality, but they are, as a rule, not praised, as updating sites is cumbersome and clumsy.</p><p>To create a new style sheet, we again want to select the text editor to create a new text file with extended .css. Our CSS file is stored in the same folder or subfolder where the HTML file is located.</p><p>In the middle of the element <head>the element becomes stagnant <link>, which means the lines between HTML and CSS files. Since we are connected with CSS, then we are using Vickory <a href="https://3ddroid.ru/en/windows-7/atribut-rel-canonical-polnoe-rukovodstvo-po-ispolzovaniyu-kanonicheskih-ssylok/">rel attribute</a> These are the style values ​​for inserting these lines. In addition, the href attribute is used to indicate the extension or path to the CSS file.</p><p>In the current application of the HTML document element <head>points to an external style file.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>To ensure that the CSS renders correctly, the value of the href attribute may directly correspond to what is saved in the CSS file. In the first case, the main.css file is saved in the same place as the HTML file, which is also located in the root folder.</p><p>If the CSS file is placed in a subfolder, then the value of the href attribute can be closely related to this method. For example, if our main.css file is stored in a subfolder named stylesheets, the value of the href attribute will be stylesheets/main.css . Here the rice braid (or forward slash) is used to indicate movements in the subfolder.</p><p>on <a href="https://3ddroid.ru/en/game/the-most-popular-game-at-the-moment-what-is-the-best-game-in-the-world/">Narazi</a> Our stories are starting to come to life, sure enough. We haven't delved too deeply into CSS yet, but you may have noticed that some elements have styles that we didn't define in our CSS. This browser imposes its own style on these elements. Fortunately, we can rewrite these styles easily, which we can get further by downloading CSS.</p><h2>Wikoristannya CSS scraper</h2><p>The skin browser uses different styles for washing for various elements. That's how <a href="https://3ddroid.ru/en/operating-systems/sohranyaem-veb-stranicu-v-pdf-v-brauzere-google-chrome-kak-sohranit-veb-stranicu/">Google Chrome</a> displays headings, paragraphs, lists, etc., which may differ from how Internet Explorer operates. To ensure consistency with different browsers, CSS downloads have become widely used.</p><p>This CSS takes all the basic HTML elements from a given style and ensures a consistent style across all browsers. These discounts require you to include different sizes, openings, margins or additional styles to reduce these values. The pieces of CSS cascading work their way down (you'll find out soon enough) - our drop can be found at the very top of our style. This guarantees that these styles will be read first and all <a href="https://3ddroid.ru/en/operating-systems/kak-ustanovit-domashnyuyu-stranicu-yandeks-kak-yandeks-sdelat-startovoi-stranicei/">Different browsers</a> work from the starting point in the distance.</p><p>There are a bunch of different CSS discounts available for drying, all of them have their own strengths. One of Eric Meyer's most popular examples, his CSS drop is adapted to include new HTML5 elements.</p><p>You feel a little adventurous, as is Normalize.css, created by Nicholas Gallagher. Normalize.css does not focus on the selection of hard skimming for all the main elements, but rather on the installed background styles for these elements. This requires a thorough understanding of CSS, as well as knowing what you want to include in styling.</p><h3>Cross-browser compatibility and testing</h3><p>As you might have guessed before, different browsers display elements differently. It is important to know the meaning of cross-browser compatibility and testing. It’s not your fault that the sites are viewed offline in all browsers, but may be similar. Which browsers you want to support and whichever world you choose, you will have to make decisions based on what works best for your site.</p><p>There are a number of speeches on the basis of gaining respect for the time of writing CSS. The good news is that everything is possible and you only need a little patience to master it.</p><h2>In practice</h2><p>Let's go back and look at our conference site and wonder how we can add a little CSS.</p><ol><li>In the middle of our styles-conference folder, let's create <a href="https://3ddroid.ru/en/windows-7/sozdanie-novoi-papki-na-windows-kak-sozdat-novuyu-papku-v-windows-xp/">new folder</a> with my assets. We will save all the resources for our website, such as styles, images, videos, etc. For our styles, let's go ahead and add another stylesheets folder in the middle of the assets folder.</li><li>Vikoristovuchi text editor is soluble <a href="https://3ddroid.ru/en/browsers/where-to-throw-plugins-how-to-install-the-plugin-in-photoshop-to-get-new-features/">new file</a> with the name main.css and save it in the stylesheets folder, which we carefully created.</li><p>By looking at the index.html file in your browser, we can see what elements <h1>і <p>Already take revenge on the style for the Promo people. Zokrema, stinks have a unique size of font and space around them. According to Erik Meyer, we can soften these styles to allow each of them to start from a new base. To do this, take a look at your site, copy the code and paste it at the top of our main.css file.</p><p>/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, little, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video ( margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align : baseline ; ) /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section ( display: block; ) body ( line-height: 1 ; ) ol, ul ( list-style: none; ) blockquote, q ( quotes: none; ) blockquote:before, blockquote:after, q:before, q:after ( content: ""; content: none; ) table ( border-collapse: c ollapse; border-spacing: 0; )</p><li>Our main.css file is starting to take shape, so we need to connect it to the index.html file. Open index.html in a text editor and add the element <link>V <head>immediately after the element <title> .</li><li>Some of us indicate styles through the element <link>Add a rel attribute to the stylesheet values.</li><p>We also note that we have sent the href attribute to our main.css file. Remember, our main.css file is stored in the stylesheets folder, which is located in the middle of the assets folder. Thus, the meaning of the href attribute, which is the path of our main.css file, is assets/stylesheets/main.css.</p><p> <head> <meta charset="utf-8"> <title>Styles Conference

Time to revise our work and see how our HTML and CSS get along together. By opening the index.html file (or updating the page if it is already open), the browser may show a slightly different result than before.

Rice. 1.04. Our website Styles Conference with CSS discounts

Demonstration and output code

Below you can look at the Styles Conference website in your next city, and also enjoy output code site now

Summary

Oh my, everything is great! We made a lot of great treasures from this lesson.

Think about it, now you know the basics of HTML and CSS. As you continue to spend more than an hour writing HTML and CSS, you will become more comfortable working with these two languages.

Guess what we looked at:

  • The difference between HTML and CSS.
  • Getting to know each other HTML elements, tags and attributes.
  • Adjusting the structure of the first web site.
  • Familiarity with CSS selectors, controls and values.
  • Working with CSS selectors.
  • Vkazivnik on CSS with HTML.
  • CSS importance is dropped.

Now let's take a closer look at HTML and learn a little about semantics.

Resources and strength

  • Common HTML terms via Scripting Master
  • CSS Terms & Definitions via Impressive Webs
  • CSS Tools: Reset CSS via Eric Meyer

Enter

1. Basic information

1.1 About html language

1.2 Creation web website

1.3 General provisions

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 in the middle of the document

2.4 Adding styles to the document

2.5 Special html tags

2.6 HTML form

2.7 Html framery

2.8 HTML tables

2.9 Optimizing graphics for the web

2.10 CSS basics

3. Description of the site

3.1 Preparation

3.2 Opening the head side

3.3 Creation of another side

3.4 Creation of the page with a description of the place

3.5 Photo page

3.6 Side with programs

3.7 Side with podyaks

Visnovok

List of Wikilists

Enter

This thesis is dedicated to the HTML language. For additional purposes, files with extensions *.htm and *.html are created, which are Web pages. Internet sites are formed from them.

Before diploma work Attachments site is an example of what you can create using additional HTML language.

The entire robot is divided into 3 sections. The first section is dedicated to the description of the main HTML tags. Here you will find all the necessary information about how to create simple web pages. Another section has information on how to change the current look of a document and insert it into a new one. additional possibilities. And the third section contains a description of how the site was created, attachments to this thesis. This report described last month's difficult work on the creation of the site, described various benefits when creating and correcting them, and the difficulties and methods of their removal.

After reading this, people who are completely new to programming can understand the basics of programming in HTML. And those who know might find something new for themselves.

1.1 About the language HTML

Hyper Text Markup Language (HTML) is a standard language used for creating hypertext documents in the WEB environment. HTML documents can be viewed by different types of WEB browsers. If the creation document contains HTML, the WEB browser can interpret the HTML to see the various elements of the document and their original processing. The HTML plugin allows you to format documents for presentation with a variety of fonts, lines, and other graphic elements on whatever system is viewing them.

Most documents contain standard elements, such as headings, paragraphs or lists. Using HTML tags, you can mark these elements, providing WEB browsers with minimal information for displaying these elements, preserving the overall structure and information content of documents. All you need to do to read an HTML document is a WEB browser that interprets the HTML tags and displays the document on the screen in the way the author intends.

Most often, the author of the document determines the current appearance of the document. With the HTML reader, relying on the capabilities of the WEB browser, you can easily create a new look for the document (or not in its place). HTML allows you to specify where a document contains a heading or paragraph behind an additional HTML tag, and then instructs the WEB browser to interpret those tags. For example, one WEB browser can recognize the tag of a paragraph and present the document in the required view, while another does not have such ability and presents the document in one row. Some WEB browsers also have the ability to customize the size and type of font, color and other parameters that affect the display of the document.

HTML tags can be intelligently divided into two categories:

1. Tags that indicate how the body of the document as a whole is displayed by the WEB browser.

2. Tags that describe the hidden powers of the document, such as the title and author of the document.

Remember that the main advantage of HTML is that your document can be viewed on WEB browsers different types and on different platforms.

1.2 gate Website

HTML documents can be created for any reason text editor or specialized HTML editors and converters. The editor's choice, which is appropriate for the creation of HTML documents, lies in particular with the understanding of the credibility and special likeness of the author.

For example, HTML editors, such as Netscape Navigator Gold from Netscape, allow you to create documents graphically using WYSIWYG (What You See Is What You Get) technology. On the other hand, most traditional document creation methods use converters that allow you to convert documents to HTML format.

All HTML tags begin with "<" (левой угловой скобки) и заканчиваются символом ">(right arch). Typically, there is a start tag and an end tag. For the example, we will add title tags, which represent the text that appears in the middle of the start and end tags and describes the title of the document:

Document title

The end tag looks the same as the start tag, and appears with a direct slash before the middle text heel temples. Whose tag is applied? tell the WEB browser about the Wikoristanny header format, and the tag- about completing the title text.

Acts of tags, such as

(a tag that means a paragraph), do not include a final tag, but this wiki will give the output text of the document improved readability and structure.

HTML does not respond to the case of characters that describe the tag, and hovering the example can look like this:

Document title

Respect! Additional spaces, tabs and carriage turns added to the output text of the HTML document for maximum readability will be ignored by the WEB browser when interpreting the document. An HTML document can include descriptive elements only if they are placed in the middle of tags 

І
. More details about tags 
It will be written below.
 
When a WEB browser holds a document, it indicates how the document is subject to interpretation.  The first tag that appears in a document is the tag .  This tag tells the WEB browser that your document is written in HTML.  The minimal HTML document looks like this:
 
Body of the document...
 
Document header .  The document head tag will appear immediately after the tag And more anywhere in the body of the document.  This tag is Zagalny description document.  Be sure to place any text in the middle of the tag .  Start tag placed directly before the tag and other tags that describe the document, and the ending tag</HEAD> is posted immediately after the document description is completed.  For example:</p> <p><TITLE>List of sportsmen
 
Respect!  Technically, start and end tags are like , і  Neobov'yazkovi.  However, it is strongly recommended to use them, since the use of these tags allows the WEB browser to effectively separate the head part of the document and the semantic part.
 
Document title .  Most WEB browsers display the tag instead <TITLE>at the title of the window to place the document and at the bookmark file, which is supported by the WEB browser.  Heading, tags <TITLE>і, located in the middle -tags, as shown above in the application The title of the document does not appear when the document is displayed in the window.


Creating websites is a complex process, divided into many stages.  At the first stage, we create the design of the site in a graphical form: this is what we call sketches and prototypes for the site.  In fact, it looks like a bunch of colorful images of the upcoming site, as the deputy hopes for approval.
Sketches or website prototypes are often created using graphic design programs.  Z professional programs Apparently the three widest widths are ce, Adobe Illustrator, і  CorelDRAW.  And, of course, there are a lot of other less professional, but not less professional, programs that we have not yet invested in our respect.
Offensive stage- it is necessary to make low numerical corrections and solidify these sketches themselves by a deputy.
Well, the design of the site’s creations, corrections and confirmations by the manager, now it needs to be burned, and what about the layout?
One more stage on the created site: layout. 
Layout- the creation of a Web site based on a sketch or prototype of the site.  And this means that all those things that the designer “created” in one of the software programs, as well as having written a copywriter in the form of text files, the layout programmer needs to carefully cut out and write the code of the skin page , place pictures in the code  that text, connecting the sides with each other through cross-cutting messages and transitions, adding forms and another, another, another... Monotonous, robotic routine.  You can read more about the stages of website creation
And we have decided, the remaining stage is the “uploading” of the finished site to the permanent deployment server, adjustment and adjustment, so that everything works the way we need it without glitches and bugs.
So, to write a website, you need to know the following language programming: HTML, CSS, JavaScript, PHP, MYSQL.  There are other languages ​​that are the most popular today.  And I will tell you about skin language in more detail.
HTML(HyperText Markup Language) is a markup that describes the form of information display.  Qiu movu vikorist for the creation of the foundation of the site, then for the frame of the site.
CSS(Cascading Style Sheets) - something that allows you to control the external appearance of your Web page.  Using additional CSS, you can specify the exact characteristics of almost all elements of the web page.
JavaScript- In this way, you can use this to “enjoy” the Web page; for an additional price, you can make the Web page interactive, or in other words, interact with the customer.  With this help you can create pop-up windows or hints, and much more.  This language serves not only for the purpose of stagnation in Web development.
PHP- this is a method for writing script servers.  Wine is the most popular among current hour, and unimportant among the mastered.  Z please help PHP You can process data on the server, process files, download lists, host a chat, a forum, and much more.
MYSQL- This is a database.  For an additional fee, you can add, change or delete data, or cancel information on request.  Once you know MYSQL, you can easily read other databases.
Application © 2022 Mobile and computer gadgets

)

BORDECOLOR='color' – frame color ( >)

VALIGH=bottom, middle, top - Verification together vertically (

)

2. Practical plant No. 5

Creating site navigation in a table form from one row

Lessons No. 6 and No. 7

1. Header section , meta tags

The header section on the bottom page displays information about the document being reviewed at the time of display. Text between tags </b>... <b>, Visible at the title of the browser window.

The header section should have a number of tags with various attributes that provide additional information (meta-information) about the website:

Drama theaters of St. Petersburg <b>

> - - (indicate the type of code table ( windows-1251, Koi8-R and others), using koristana to prepare the text part of the document.

- information about

( you specify through whom the set of keywords, which can be searched by nearby search engines)

2. Independent work on your project

Approximations to the project:"Мости через Неву", "Ріки та канали Санкт-Петербурга", "Мости через канали Санкт-Петербурга", "Незвичайні музеї Санкт-Петербурга", "Музичні театри", "Філармонії та капела", "Технічні ВНЗ -и Санкт-Петербурга”, “Дитячі театри Санкт-Петербурга”, “Гуманітарні ВНЗ-и Санкт-Петербурга”, “Передмісти Санкт-Петербурга”, “Музеї Санкт-Петербурга”, “Військові навчальні заклади у Санкт-Петербурзі” та інших. .!}

It is necessary to design the main page of the site according to the glavn.htm file, by selecting a table or a list, and 2 - 3 pages in the navigation section of the site, which will open the site and place the title, text and pages.

Lesson #8

1. Control test on knowledge of HTML tags – 15 minutes.

2. Reflection. Submission to the project and evaluation of his class by the students and the teacher - 30 hvilin.

Nutrition for the control test – Addendum 2.

Literature for the teacher

  1. Thomas A. Powell “Web design. The greatest outside care. In the original”, 2nd edition, BHV-SPB, 2005.
  2. Brown M. “HTML 3.2. The greatest outside care. At the original”, BHV-SPb, 1999
  3. Zakharkina V.V. "Basics of creating Web stories", methodical handbook, St. Petersburg, 2000
  4. K. Akhmetov, “Microsoft Internet Explorer 4.0 everything”, Komp'yuter publishing house, Moscow, 1997.

Literature for study

  1. Usenkov D. "Lessons of the Web Master", Moscow, BINOM, 2004 r.
  2. Smirnova I. “Started Web design, St. Petersburg, BHV, 2004.

List of Internet resources

  1. http://htmlbook.ru - Merzhevich Vlad. A short, information-rich guide to website creation technology, HTML, CSS, design, graphics, etc.
  2. http://html.manual.ru - Gorodulin Volodymyr. HTML editor.
  3. http://winchanger.narod.ru - A. Klimov. A short summary of HTML-movie tags.

Development of Web sites from local language markup to HTML hypertext

Web stories and websites

Web stories. Web pages are created using the additional markup of HTML (Hyper Text Markup Language) hypertext documents. In the original text document, HTML symbols are inserted - HTML tags, which indicate the appearance of the Web page when viewed in a browser.

The main advantages of Web pages are:
- Minimal information obligation;
- ability to view different operating systems.

To create Web pages, the simplest text editors are used, but the document being created does not include any formatting symbols in the text of the editor itself. As such an editor in Windows, you can use the standard Notepad program.

Creation of Web pages Wikoristanny HTML- tags make a great effort, often knowing the syntax of the language and using special software tools (Web editors) to make the work of creating Web sites simple and effective. The process of creating and editing pages in Web editors is very simple, which is why it is carried out in WYSIWYG mode (in English, “What You See Is What You Get” - “What You See Is What You Get”).

Website. Publications on the World Wide Web are carried out in the form of Web sites, which means that the material will be subject to specific topics and problems. Government structures and organizations (district, duma, school, etc.) are required to create official Web sites of their organizations, on which they post information about their activities. Commercial companies advertise their products and services on their websites and promote their benefits in online stores. Anyone who uses the Internet can create their own thematic site, on which they can post information about their explorations, hoardings, etc.

Just as a magazine consists of other pages, a Web site consists of computer Web pages. The site is guilty of violating the hyperpower system, which allows the user to navigate through Web pages.

First, you must place your Web site on a server on the Internet, but you must strongly protest, since there will be tens of millions of Internet users who are potential contributors to your site.

To publish, a website needs to find a suitable location on one of the Internet servers. Many providers offer their clients the opportunity to host websites on their servers without costs (cost-free hosting).

Control food

1. What is the advantage of Web pages over primary text documents?

2. How do Web stories merge into Web sites?

Web site structure

The HTML code for the side page is placed in the middle of the container . Without these tags, the browser cannot recognize the document format and interpret it correctly. A web page is divided into two logical parts: a header and a place, which is displayed in the browser.

The title of the web page appears in the container And insert the name of the document and additional information about the page (for example, the type of coding), which is checked by the browser for correct display.

The tags lie at the bow of the neck and can be single or paired. Paired tags contain a tag that opens and closes (this pair of tags is called container).

Place a forward slash (/) before the end tag. Tags can be written by both large and small letters.

The name of the page is located near the container And at the hour of review it is displayed in the top row of the browser window.

The site that is displayed in the browser is placed in a container (Fig. 6.26):


<ТITLE>Computer


Computer and PZ


Rice. 6.26. Preparation of the "Computer" Web-story

The created Web page must be saved as a file named index.htm. As an extension to the Web story file, you can also edit HTML. It is recommended to create a special folder for the site and save all files for the site that are distributed in this folder.

It is necessary to separate the names of the index.htm file, under which the Web page is saved in file system, the name of the Web page (for example, “Computer”), which appears in the top row of the browser window. The names of the Web pages must be replaced, since they are first analyzed by sound systems.

Control food

1. What tags (containers) are necessarily present in an HTML document? What is the logical structure of a Web page?

6.10. More practical. Create a “Computer” Web page and view it in your browser.

Formatting text on the Web site

So far, our page doesn’t look very attractive: a small black-colored font on a white background. Using additional tags, you can set various parameters for text formatting.

Headings. Heading font sizes are specified in pairs of tags<Н1>(largest) up to<Н6>(Nearest).

Font. These tags contain attributes, such as the names of authorities and can acquire song meanings. Using the FONT tag and these attributes, you can set parameters for formatting the font. The FACE attribute allows you to set the typeface for the font (for example, FACE="Arial"), the SIZE attribute allows you to set the font size (for example, SIZE=4).

The COLOR attribute allows you to set the color of the font (for example, C0L0R="blue"). Values ​​for the COLOR attribute can be set to either the name of the color (for example, “red”, “green”, “blue”, etc.) or to any sixteenth value.

The sixteenth representation of the vikory color is the RGB format "#RRGGBB", where the first two sixteenth digits set the intensity of red (red), the two steps – the intensity of green (green) and the remaining two – the intensity of blue (bl ue) color. The minimum intensity of the color is indicated by the hexadecimal number 00, and the maximum - FF. For example, the blue color is assigned to the value "#0000FF".

Verification of the text. The ALIGN attribute allows you to set the text alignment method. The left alignment is indicated as follows: ALlGN="left", the right alignment: ALIGN="right", the center alignment: ALIGN="center".

Thus, the blue color of the title, aligned in the center, can be set as follows:


<Н1 ALIGN="center">Computer and PZ

Horizontal lines. Headings should be fully reinforced by replacing the page with horizontal lines behind a single tag

.

Paragraphs Divide the text into paragraphs behind the container<Р>. Every hour I look at the browser, the paragraphs are added one at a time at intervals. For each paragraph, you can set the text type and font formatting parameters.

Home page of the site On the home page of the site there is a text that briefly describes your location. Let’s place the text on the home page of the “Computer” website, divided into paragraphs with different versions:

<Р ALIGN="left">On this site you can find a variety of information about the computer, its software and prices for computer components.
<Р ALIGN= "right">The terminological dictionary will help you to familiarize yourself with computer terms, and you will also be able to fill out the form.

In such a manner Home page For the “Computer” site, the title should be centered in a blue color, supported by a horizontal line in two differently aligned paragraphs (Fig. 6.27):


<Н1 ALIGN="center">
Computer and PZ



<Р ALIGN="left">On what site...
<Р ALIGN ="right">Terminological dictionary
...
Rice. 6.27. Web page "Computer" with formatted text

Control food

1. What tags (containers) are used for titles? Font formatting? Introduction of paragraphs?

Hall for an independent victor

6.11. More practical. Create a “Computer” Web page with formatted text and view it in your browser.

Inserting images on a Web page

On the Web page you can post images that are saved in graphic files of three formats - GIF, JPEG and PNG.

Inserted image. To insert an image, use the vikory tag with the SRC attribute, which indicates where the file was saved local computer or on the Internet. If the graphic file is located on the local computer in the same folder as the Web page file, then the value of the SRC attribute is sufficient to indicate only the file name. For example:

If the file is located in a different folder on your local computer, the attribute value may be external to the file name, including paths to the next one in the hierarchical file system. For example:

If the file is located on a remote server on the Internet, then the web address of the file may be entered. For example:

Position of the little one according to the text. The ALIGN attribute, which can take five different values: TOP (top), MIDDLE (middle), BOTTOM (bottom), LEFT (left-handed) and RIGHT (right-handed), allows you to place small objects within the text in different ways.

It is logical to place an image of a computer on the home page of the “Computer” website. In order for the little ones to appear along the right edge of the text, the image insertion tag is due to the nastiness of the view (Fig. 6.28):
Rice. 6.28. Inserting an image on the "Computer" Web page

Inserting alternative text. Some computers, in order to save time, turn on the browser’s preference for graphic images and read text instead. To avoid wasting your senses, alternative text may be displayed instead of the little one.

Alternative text is displayed behind the additional ALT attribute, the value of which is text that explains what you can do to get the job done:

Control food

1. Which tag and attributes are used for inserting images into Web pages?

Hall for an independent victor

6.12. More practical. Insert the image into the “Computer” Web page and view it in your browser.

Hyperpower on Web sites

If the web site that is imported into the browser is located on the local computer in the same folder, then instead of the address you simply enter the name of the file, for example:

If the web site that is accessed by the browser is located on the Internet, then Internet addresses are indicated in the address section, for example:

<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Pokazhchik posilannya

The request was sent by us and we will look at the Web page in the browser for an hour. The message sent by the author can be a text, call the visions with a blue color and under the armchairs, or the little ones, the visions with a frame. When you click on a new mouse, the cursor changes to the “hand” icon. Clicking the mouse behind the requester will take you to the Web page listed in the hyperlink.

  • Before you look at the image in your browser:
    <А HREF="picture.jpg">Image
  • before launching the programmer, loaded into the browser and creating a sound file:
    <А HREF="sound.wav">Sound
  • To save a file on your local computer using the file storage manager installed in your browser:
    <А HREF="Apxив.ziр">Enchant the file

Navigation panel on the site. Create a folder for the “Computer” site and add empty pages to the site “Programs”, “Vocabulary”, “Completing” and “Questionnaire”. We save them in files named software.htm, glossary.htm, hardware.htm and anketa.htm on our site. Such “empty” pages are to blame for the headings, but may not be replaced for now:



<ТITLЕ>page title


On the home side of the site, hyper-orders are placed on the personal side of the site. As a result, it is best to select the names of the pages where the transition occurs.

We can place hyperbole indicators at the bottom of the page in a new paragraph in one row, separating them with spaces ( ). This hyper-location is often called the navigation panel.

Insert the HTML code that creates the navigation bar into the home page of the site:

<Р ALIGN="center">
[<А HREF="software . htm">Program] 
[Vocabulary]  
[Completing] 
[Profile]

Hyperpower at the address by electronic mail. It is important to write a message on the home page of the site to the e-mail address, for which agents can contact the site administration. For this purpose it is necessary to assign the message attribute HREF to the e-mail address and insert it into the container

, which indicates the style of the paragraph, how to insert an address:


<А HREF="mailto:[email protected]"E-mail:
[email protected]

Now click on the email address you sent and you will be prompted postal program Outlook Express (or another email program that can be used for communication), in line To whom will be included in the sent addresses.

Now, a home page has been created for the “Computer” website with a title, an image of a computer, two paragraphs of text, a navigation bar and an email (Fig. 6.29).
Rice. 6.29. The home page of the "Computer" website is ready

Control food

1. Which tag and attributes are used for creation of hyperpower?

Hall for an independent victor

6.13. More practical. Create a “Computer” Web page and place the hyperpower panel on other pages of the site and view them in the browser.

Lists on Web sites

Often when posting text on Web pages, manually select lists from different options:

  • numbered lists, when the elements of the list are identified by numbers;

  • Marked lists, if the elements of the list are identified for help special characters(Markeriv);

  • lists of meanings that allow you to add meanings to the so-called dictionary form.

It is possible to create nested lists, and the list that is nested can be subdivided from the main one according to its type.

Numbered lists. The numbering list is displayed in the middle of the container

    • You can set the type of numbering: Arabic numerals(for zamovchuvannyam), "I" (Roman numerals), "a" (mali letters) and in.:


        < LI >System programs
        < LI >Application programs
        < LI >Programming systems

      Marked lists. The marking list is displayed in the middle of the container, and each element in the list is indicated by a label< LI >. For additional help with the TYPE tag attribute

        You can set the type of marker for the list: "disc" (disc), "square" (square) or "circle" (circle):

        A numbered list is available on the "Programs" Web page to highlight the main types software security computer.

        In another element of the main numbered list, insert a marking list (Fig. 6.30).

        List of appointments. The list of values ​​is displayed in the middle of the container

        /
        . In the middle, the text is formatted as terms, which appear as single tags
        the meaning of following single tags
        .

        We present the “Glossary” web page in the form of a dictionary of computer terms (Fig. 6.31):


        Processor
        The central device of a computer that processes information in double code.
        RAM
        A device in which programs and data are saved.

        Control food

        1. What marks are used to create numbered lists? Marked lists?

        Hall for an independent victor

        6.14. More practical. Create a Web page "Programs" with a numbered list and insert a bulleted list.

        6.15. More practical. Create a “Dictionary” web page with a list of terms.

    		•