A language for writing web pages. Programming languages ​​and technologies for web development. List of basic HTML tags required to form the text of a web page

You probably already know that the main language of the Internet is hypertext markup language HTML (HyperText Markup Language). In this article we will learn the basic HTML concepts and learn how to create simple WEB pages.

Let's start with the most important thing, let's look at how it works The World Wide Web— Internet. To produce web pages, you create files written in HTML and place them on a web server. After this, any browser installed on a device with Internet access, be it a computer, phone or tablet, can find your web pages.

Web server- This is an ordinary computer with special software that has access to the Internet. It continuously listens for requests from browsers for web pages, images, audio and video files. Having received a request for one of these resources, the server looks for it and sends it to the browser.

Browser is a special program designed to view websites, for example Internet Explorer. Using a browser, you browse websites by clicking on links.

Any such click causes the browser to make a request for the HTML page to the web server, receive a response and display the page in its window. It is when the page is displayed that the HTML language begins to work; it tells the browser everything about the structure and content of the web page.

Using commands - tags, HTML tells the browser where paragraphs of text begin, what part of the text is a heading, and where to insert tables, and even pictures. And tags are words in angle brackets, for example "p", "h1", "table".

You urgently need an online store, but you don’t have time to learn HTML, CSS, PHP and other technologies. Then you can simply rent an online store with fully implemented functionality and optimization for search engines.

HTML language and its tags

The first version of the HTML language appeared back in 1992. At the time of 2013, the specification is being developed new version HTML number 5. The development of this specification is carried out by the World Wide Web Consortium, or W3C for short.

The W3C organization develops other Web standards. You can familiarize yourself with these standards on their website www.w3.org. By the way, many Web browsers already support some HTML 5 features.

I suggest starting to learn HTML right away with an example. So let's create our first Web page. Any text editor is suitable for creating WEB pages.

I suggest first using the built-in Windows Notepad(in general, in the future, I recommend using to edit html code). You can find it: “Start - All Programs - Accessories - Notepad”. Let's create a page about cars. So, open Notepad and type the following text in it:

Next, save the created web page to a file named index.html. In this case, in the file saving dialog box, you must set the encoding to UTF-8 and enclose the file name in quotes, otherwise Notepad will add the txt extension to it, and our file will be named index.htm.txt:

Now all that remains is to open the created file in the browser and look at the result. To do this, you can use the supplied Windows browser Microsoft Internet Explorer, or any other browser installed on your computer, by double-clicking on the index.html file or dragging the file onto the browser icon. Open it and see something like this:

Thus, we created a Web page in Notepad, although a little nondescript, but already containing a large heading and a paragraph of text that is automatically broken into lines and contains a fragment in bold.

What is a tag?

Now let's talk more about the page structure. Let's look at the fragment:

Here we see the text that appears on the page as a heading, enclosed in an “h1” tag. What is a tag in HTML?

HTML tag are ordinary words and symbols enclosed in angle brackets, for example “h1”, “p”, “body”. So the "h1" tag is the opening tag, the "/h1" tag is the closing tag, and the text in between is called the content of the tag.

Also, the “h1” tag and the “/h1” tag are called paired tags. Together, the opening tag plus the content plus the closing tag form an HTML document element. There are also elements consisting of one opening tag:

So the paired “h1” tag defines the first-level heading element. There are six levels of headings in total, these are the elements “h1” - “h6”.

Elements can be block or inline (text). Block Elements carry out structural formatting of the page. Block elements are always displayed on a new line on the page and are indented from adjacent elements. Inline elements perform direct text formatting or logical formatting. The h1 element is a block element.

Next comes , which creates a paragraph on the HTML page. The content of this tag will become the text of this paragraph. The “p” element is also a block element and as we can see it starts on a new line and there is an indent between the h1 heading and the paragraph.

Inside a paragraph there is a that displays its contents in bold font.

This "strong" tag is nested inside the content of the "p" tag. This means that the content of the strong tag will appear as part of the paragraph. These nested tags are called subsidiaries, and tags in which other tags are nested are called parents. So the "strong" tag is the child tag and the "p" tag is the parent tag. This kind of nesting of tags is quite common in HTML.

When nesting tags, you should follow one rule: the order of closing tags should be the reverse order of opening tags. Those. tags and their contents must be completely nested within other tags. If you break this rule, the WEB page may not be displayed correctly.

By the way, element strong is an inline element. And as we see, no line breaks or indentations are made when displaying this element. And it is very important to mention that according to the rules of the HTML language, inline elements cannot have nested tags.

You may have noticed that the opening tag “h1” contains some text in addition to the title: align="center". This tag attribute, which specifies its parameters. Each attribute has a name, followed by an = sign, and then its value, enclosed in quotes:

In our specific case, the align attribute of the h1 tag specifies the text alignment. So the value center tells the browser that the content of the h1 tag should be centered.

Attributes can be required or optional. Required attributes must be contained in tags without fail. A optional attributes can be omitted, in which case they take the default value.

WEB structure - pages. Basic html tags.

To display the page correctly in the browser, the following paired tags must be present in the html code: html, head and body.

First, all your html code should be enclosed in the “html” and “/html” tags. They tell the browser that the page contains html code.

In addition, the page code must contain sections header And body document. The header section, also called the header, consists of a pair of “head” tags and its content. This section contains information about page parameters that are not displayed on the screen and are needed only by the browser. In our example, the header section is:

The body of the document is highlighted using the “body” and “/body” tags. All page content is placed here, what will be displayed in the browser.

To summarize the above, any HTML page has the following structure:

HTML page metadata

Service information that is located in the page header and specifies its parameters is called metadata. HTML tags that specify metadata are called meta tags. In our small page, the metadata is the following lines of code:

First of all, this is the “title” tag, which specifies the title of the WEB page. This name is displayed in the title bar of the WEB browser window. In addition, the contents of the “title” tag are used by search engines to indicate a link to this document in keyword search results. Therefore, try to set an interesting title containing keywords to attract more visitors.

The next meta tag tells the browser the encoding of our document. In this case, we created our web page in utf-8 encoding. We passed the encoding information to the browser using the “content” attribute of the “meta” tag.

It is very important to set the encoding so that the browser correctly displays the content of our page. If you notice, the meta tag does not have a closing tag. This is the so-called single tag, or an element consisting of one opening tag. In general, using the meta tag you can set many parameters that are important for both the browser and search engines.

HTML document type (doctype)

It remains to consider one tag of our first WEB page, which is located at the very beginning of the html code: “!doctype html”. This tag specifies the version of the HTML language in which the page is written, and its version.

It is necessary for the browser to understand according to which standard to display the web page. , and they differ depending on the version of the language in which the html code is written. Yes, our tag !doctype html indicates the HTML5 language version.

So, let's summarize:

1. Almost all WEB pages are text file. You can create them using any text editor. In this article we learned create WEB pages using regular Notepad.

2. HTML is a language, which is used to create web pages. HTML is an acronym for HyperText Markup Language.

3. WEB pages consist of html tags and their contents. Tags consist of characters and a name within them. Tag names can be written in both uppercase (capital) and lowercase (small) letters. Spaces and line breaks are not allowed between characters and tag names, as well as within tag names. There are tags doubles And single, and also tags can be nested into each other.

4. Opening tag + content + closing tag form element. There are also elements consisting of one opening tag. HTML has block elements and lowercase. Block elements are always placed on a new line and are indented above and below adjacent elements. Inline elements provide logical formatting for text.

Before we begin our journey through HTML and CSS website building lessons, it is important to understand the differences between the two languages, the syntax of each language, and some basic terminology.

What are HTML and CSS?

HTML (HyperText Markup Language) defines the structure of content and its meaning, defining content such as headings, paragraphs or images. CSS (Cascading Style Sheets) or cascading style sheets is a presentation language created for designing appearance content using, for example, fonts or colors.

These two languages ​​- HTML and CSS - are independent of each other and should remain so. CSS should not be written inside an HTML document and vice versa. As a general rule, HTML will always represent the content, and CSS will always define the styling.

With this understanding of the difference between HTML and CSS, let's dive into HTML in more detail.

Basic HTML Terms

Before you start working with HTML, you'll likely come across some new and often strange terms. You'll become more familiar with all of them over time, but for now you should start with the three basic HTML terms - elements, tags, and attributes.

Elements

Elements specify how to define the structure and content of objects on a page. Some of the commonly used elements include multiple levels of headings (defined as elements with

before

) and paragraphs (defined as

); You can include elements in the list ,

, , And and many others.

Elements are identified using angle brackets<>, surrounding the element name. So the element will look like this:

Tags

Adding angle brackets< и >creates what is known as a tag around the element. Tags most often occur in pairs of opening and closing tags.

The opening tag marks the beginning of the element. It consists of a symbol<, затем идёт имя элемента и завершается символом >; For example,

.

The closing tag marks the end of the element. It consists of a symbol< с последующей косой чертой и именем элемента и завершается символом >; For example,

.

The content that appears between the opening and closing tags is the content of that element. The link, for example, will have an opening tag and closing tag. What is between these two tags will be the content of the link.

So, the link tags will look something like this:

...

Attributes

Attributes are properties used to provide additional information about the element. The most common attributes include the id attribute, which identifies the element; the class attribute, which classifies the element; the src attribute, which specifies the source of the embedded content; and an href attribute, which specifies a link to the associated resource.

Attributes are defined in the opening tag after the element name. In general, attributes include a name and a value. The format for these attributes consists of the attribute name followed by an equal sign, followed by the attribute value in quotes. For example, element with href attribute will look like this:

Shay Howe

Demonstration of basic HTML terms

This code will display the text "Shay Howe" on a web page and when clicked on this text will take the user to http://shayhowe.com. The link element is declared using an opening tag and closing tag covering the text, as well as the attribute and value of the link address declared via href="http://shayhowe.com" in the opening tag.

Rice. 1.01. HTML syntax in outline form includes element, attribute and tag

Now that you know what HTML elements, tags, and attributes are, let's take a look at our first web page. If anything looks new here, don't worry - we'll break it down as we go.

Customizing the HTML Document Structure

HTML documents are simple text documents, saved with the extension .html, not .txt. To start writing HTML, you first need a text editor that you are comfortable using. Unfortunately, this does not include Microsoft Word or Pages, since these are complex editors. The two most popular text editors for writing HTML and CSS are Dreamweaver and Sublime Text. Free alternatives also include Notepad++ for Windows and TextWrangler for Mac.

All HTML documents contain a required structure, which includes the following declarations and elements: , , And .

Announcement document type oris located at the very beginning of an HTML document and tells browsers which version of HTML is being used. Since we will be using latest version HTML, our document type will be simply. After this comes the element indicating the beginning of a document.

Inside element defines top part document, including various metadata (accompanying information about the page). Content inside an element does not appear on the web page itself. Instead, it may include the title of the document (which appears in the title bar of the browser window), links to any external files, or any other useful metadata.

All visible content of the web page will be contained in the element . The structure of a typical HTML document looks like in the following way:

Hello World!

Hello World!

This is a web page.

Demonstration of HTML document structure

This code shows the document, starting with the document type declaration,, then immediately comes the element . Inside elements are coming And . Element contains the page encoding via the tag and the title of the document through the element . Element <body>includes the title through the element <h1>and a paragraph of text through<р>. Because both the title and paragraph are nested within the element <body>, they are visible on the web page.</p><p>When an element is inside another element, also known as nested, it's a good idea to indent it to keep the document structure well-organized and readable. In the previous code both elements <head>And <body>nested and shifted within the element <html>. The indentation structure for elements continues with new elements added inside <head>And <body> .</p><h3>Self-closing elements</h3><p>In the previous example, the element <meta>was the only tag that did not include a closing tag. Don't worry, this was done intentionally. Not all elements consist of opening and closing tags. Some elements simply receive content or behavior through attributes within a single tag. <meta>is one of these elements. Element Content <meta>in the example it is assigned using the charset attribute and a value. Other typical 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>Reduced structure made using a document type declaration<!DOCTYPE html>and elements <html> , <head>And <body>, is quite common. We want to keep this document structure convenient because we will use it often when creating new HTML documents.</p><h3>Code Validation</h3><p>No matter how carefully we write our code, errors are inevitable. Luckily, when writing HTML and CSS, we have validators to check our work. The W3C offers HTML and CSS validators that scan code for errors. Reviewing our code not only helps it render correctly in all browsers, but also helps teach best practices when writing code.</p><h2>On practice</h2><p>As web designers and front-end developers, we have the luxury of attending a number of great conferences dedicated to our craft. We are going to organize our own Styles Conference and create a website for it over the course of the next lessons. Like this!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy loading=lazy><p>Let's switch gears a little away from HTML and take a look at CSS. Remember, HTML defines the content and structure of our web pages, while CSS defines their visual style and appearance.</p><h2>Basic CSS Terms</h2><p>In addition to HTML terms, there are some basic CSS terms that you'll need to become familiar with. These terms include selectors, properties, and values. Just like with HTML terminology, the more you work with CSS, the more these terms become second nature.</p><h3>Selectors</h3><p>When adding elements to a web page, they can be styled with <a href="https://neonkaraoke.ru/en/mts-bank/dinamicheskii-stil---upravlenie-css-s-pomoshchyu-javascript-operacii-nad-klassami-i/">using CSS</a>. A selector determines which element or elements in HTML to target and apply styles (such as color, size, and position) to. Selectors can include a combination of different metrics to select unique elements, depending on how specific we want to be. For example, we want to select every paragraph on a page or select only one specific paragraph.</p><p>Selectors are typically associated with an attribute value, such as an id or class value, or an element name, such as <h1>or<р> .</p><p>In CSS, selectors are combined with curly braces (), which enclose the styles that are applied to the selected element. This selector targets all elements <span><p>P(...)</p><h3>Properties</h3><p>Once an element is selected, the property determines the styles that will be applied to it. Property names come after the selector, inside curly braces () and just before the colon. There are many properties that we can use, such as background, color, font-size, height and width and other commonly added properties. In the following code we define the color and font-size properties that apply to all elements <span><p>P ( color: ...; font-size: ...; )</p><h3>Values</h3><p>So far we have only selected an element through a selector and determined which style we would like to apply to it through properties. Now we can set the behavior of this property via a value. Values ​​can be specified as text between a colon and a semicolon. Below we select all the elements <p >And set the color property value to orange and the font-size property value to 16 pixels.</p><p>P ( color: orange; font-size: 16px; )</p><p>To test this out, in CSS our ruleset starts with a selector, followed immediately by curly braces. These curly braces contain declarations consisting of pairs of properties and values. Each declaration begins with a property, followed by a colon, the value of the property, and finally a semicolon.</p><p>A common practice is to shift pairs of properties and values ​​inside curly braces. As with HTML, indentation helps keep our code organized and clear.</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></p><p>Rice. 1.03. CSS syntax structure includes selector, properties and values</p><p>Knowing a few basic terms and general CSS syntax is a great start, but we have a few more points to cover before we dive into the depths. In particular, we need to take a closer look at how selectors work in CSS.</p><h2>Working with selectors</h2><p>Selectors, as mentioned earlier, indicate which HTML elements will be styled. It is important to fully understand how to use selectors and how they work. The first step should be to get to know <a href="https://neonkaraoke.ru/en/rates/podrobnyi-obzor-i-testirovanie-apple-iphone-se-apple-iphone-se---tehnicheskie-harakteristiki-bluetoo/">various types</a> selectors. We'll start with the most basic selectors: type, class, and identifier selectors.</p><h3>Type selectors</h3><p>Type selectors target elements by their type. For example, if we want to target all elements <div>we must use div selector. The following code shows the type selector for elements <div>, as well as the corresponding HTML.</p><p>Div(...)</p><p> <div>...</div> <div>...</div> </p><h3>Classes</h3><p>Classes allow you to select an element based on the value of the class attribute. Class selectors are a little more specific than type selectors because they select a specific group of elements rather than all elements of the same type.</p><p>Classes allow you to apply the same styles to different elements at once by using the same class attribute value for multiple elements.</p><p>In CSS, classes are represented by a leading dot followed by the value of the class attribute. Below class selector selects all elements containing the value of the awesome class attribute, including elements <div>And <span><p>Awesome (...)</p><p> <div class="awesome">...</div> </p><h3>Identifiers</h3><p>Identifiers are even more precise than classes because they target only one unique element at a time. Just as class selectors use the value of the class attribute, identifiers use the value of the id attribute as a selector.</p><p>Regardless of the element type being displayed, the id attribute value can only be used once on a page. If ids are present, then they should be reserved for important elements.</p><p>In CSS, identifiers are represented by a hash symbol in front, followed by the value of the id attribute. Here the id will only select the element containing the id attribute with the value shayhowe .</p><p>#shayhowe ( ... )</p><p> <div id="shayhowe">...</div> </p><h3>Additional selectors</h3><p>Selectors are extremely powerful things and the ones described above are among the most common selectors we come across. These selectors are just the beginning. There are many advanced selectors available and they are readily available. Once you're comfortable with them, don't be afraid to check out some of the more advanced ones.</p><p>Okay, let's start putting everything together. We add elements to the page inside our HTML, then we can select those elements and style them using CSS. Now let's connect the dots between HTML and CSS to make the two languages ​​work together.</p><h2>Connecting CSS</h2><p>To make our CSS talk to our HTML we must point to the CSS file from the HTML. A good practice is to include all of our styles in one external file, which is pointed to within the element <head>our HTML document. Using one external CSS allows us to apply the same styles throughout the site and make changes to it quickly.</p><h3>Other options for adding CSS</h3><p>Other options <a href="https://neonkaraoke.ru/en/rates/nestandartnye-veb-shrifty-v-verstke-google-fonts-i-webfont-podklyuchenie-shriftov/">CSS connections</a> include the use of internal and inline styles. You may encounter these options in reality, but they are generally frowned upon because they make updating sites cumbersome and cumbersome.</p><p>To create our external style sheet, we again want to use our text editor of choice to create a new text file with a .css extension. Our CSS file should be saved in the same folder or subfolder as our HTML file.</p><p>Inside an element <head>element applied <link>, which defines the relationship between HTML and CSS files. Since we're linking to CSS, we use the rel attribute with a stylesheet value to indicate their relationship. Additionally, the href attribute is used to indicate the location or path of the CSS file.</p><p>In the following example HTML document, the element <head>points to an external style file.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>For CSS to render correctly, the path value of the href attribute must directly match where the CSS file is stored. In the previous example, the main.css file is stored in the same location as the HTML file, also known as the root folder.</p><p>If the CSS file is located in a subfolder, then the value of the href attribute must correspondingly correspond to that path. For example, if our main.css file was saved in a subfolder named stylesheets, then the value of the href attribute would be stylesheets/main.css. This uses a forward slash (or slash) to indicate moving to a subfolder.</p><p>On <a href="https://neonkaraoke.ru/en/news/nevozmozhno-vypolnit-zapros-v-dannyi-moment-itunes-reshenie/">this moment</a> our pages are starting to come to life, slowly but surely. We haven't delved too deeply into CSS yet, but you may have noticed that some elements have styles that we didn't declare in our CSS. It is the browser that imposes its own preferred styles on these elements. Luckily, we can rewrite these styles quite easily, which is what we'll do next using a CSS reset.</p><h2>Using CSS reset</h2><p>Each browser has its own default styles for various elements. How <a href="https://neonkaraoke.ru/en/internet/chto-luchshe-google-chrome-ili-apple-safari-vybiraem-brauzer-dlya-ios-ustroistv/">Google Chrome</a> displays headings, paragraphs, lists, and so on, may differ from how Internet Explorer does it. To ensure cross-browser compatibility, CSS reset has become widely used.</p><p>A CSS reset takes all the basic HTML elements with a given style and provides a consistent style across all browsers. These resets usually involve removing dimensions, padding, margins, or additional styles that lower these values. Since CSS cascading works from top to bottom (you'll learn about that soon) - our reset should be at the very top of our style. This ensures that these styles are read first and that's it. <a href="https://neonkaraoke.ru/en/internet/kak-besplatno-obnovit-brauzer-na-telefone-opisanie-raznyh-sposobov-kak/">different browsers</a> will begin to work from a common point of reference.</p><p>There are a bunch of different CSS resets available to apply, they all have their own <a href="https://neonkaraoke.ru/en/rates/silnye-i-slabye-storony-mikrotik-hap-lite-rb941-mikrotik-hap-ac---router-na-vse-sluchai-zhizni/">strengths</a>. One of the most popular from Eric Meyer, his CSS reset is adapted to include new HTML5 elements.</p><p>If you're feeling a little adventurous, there's also Normalize.css created by Nicholas Gallagher. Normalize.css does not focus on using a hard reset for all core elements, but instead on setting common styles for those elements. This requires a deeper understanding of CSS, as well as knowledge of what you would like to achieve from the styles.</p><h3>Cross-browser compatibility and testing</h3><p>As mentioned earlier, different browsers render elements differently. It's important to recognize the importance of cross-browser compatibility and testing. Sites should not look exactly the same in all browsers, but should be close. Which browsers you want to support and to what extent is a decision you'll have to make based on what's best for your site.</p><p>There are several things to pay attention to when writing CSS. The good news is that you can do it all and it just takes a little patience to master it.</p><h2>On practice</h2><p>Let's go back to where we last left off on our conference site and see how we can add some CSS.</p><ol><li>Inside our styles-conference folder let's create <a href="https://neonkaraoke.ru/en/services/kak-sozdat-novuyu-papku-na-samsunge-sozdanie-papki-na-rabochem-stole-android/">new folder</a> named assets. This is where we will store all the resources for our website, such as styles, images, videos, etc. For our styles, let's go ahead and add another stylesheets folder inside the assets folder.</li><li>Using a text editor, let's create a new file called main.css and save it in the stylesheets folder we just created.</li><p>Looking at the index.html file in the browser we can see that the elements <h1>And <p>Already contain the default style. In particular, they have a unique font size and space around them. Using Eric Meyer's reset we can soften these styles, allowing each of them to start from the same base. To do this, take a look at his website, 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, small, 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: collapse;</p><li>border-spacing: 0; ) <a href="https://neonkaraoke.ru/en/rates/dopolneniya-plaginy-pakety-dlya-modx-revolution-ustanovka/">Our main.css file is starting to take shape, so let's connect it to the index.html file. Open index.html in</a> text editor <link>and add the element <head>V <title> .</li><li>, immediately after the element <link>Since we are pointing to styles through the element</li><p>We will also include a link to our main.css file using the href attribute. Remember, our main.css file is saved in the stylesheets folder, which is located inside the assets folder. So the value of the href attribute, which is the path to our main.css file, should be assets/stylesheets/main.css.</p><p> <head> <meta charset="utf-8"> <title>Styles Conference

Time to check our work and see how our HTML and CSS work together. Opening the index.html file (or refreshing the page if it's already open) in the browser should show a slightly different result than before.

Rice. 1.04. Our Styles Conference site with CSS reset

Demo and source code

Below you can view the Styles Conference website in its current state, and also download source site at the moment.

Summary

So, everything is fine! We took some big steps in this tutorial.

Just think, now you know HTML basics and CSS. As we continue and you spend more time on writing HTML and CSS, you will become much more comfortable working with these two languages.

To recap, we covered the following:

  • Difference between HTML and CSS.
  • Getting to know HTML elements, tags and attributes.
  • Setting up the structure of your first web page.
  • Getting to know CSS selectors, properties and values.
  • Working with CSS selectors.
  • Pointer to CSS from HTML.
  • The importance of CSS reset.

Now let's take a closer look at HTML and get a little familiar with the semantics.

Resources and links

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

MINISTRY OF EDUCATION OF THE MOSCOW REGION

GBPOU MO "PAVLOVO-POSAD TECHNIQUE"

FOR COMPLETING COURSE WORK

By discipline

“Course paper on Web Design and programs for creating web pages”

Specialty 230701

“Applied Informatics in Economics” 4th year

Teacher: G.E

Considered by the cyclic methodological commission

Socio-economic profile

Protocol No. dated "" 20

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.. Create a Web page using HTML5 language

2.1. HTML 5 language

2.2. HTML document structure5

2.3 Text formatting7

3. Programs for creating Web pages8

3.1 HTML editors8

3.2 Graphic editors13

3.3 Flesh13 technology

4. Creating WEB pages in WORD12

4.1 Methods for creating 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 drawings13

4.7 Creating hyperlinks14

4.8 Inserting a video into a Web page14

List of used literature16


1. World Wide Web– the global computer network today contains millions of sites that contain all kinds of information. People access this information through the use of Internet technology. Used to navigate the WWW special programs– Web browsers that make traveling across the vast expanses of the WWW much easier. All information in a Web browser is displayed in the form of Web pages, which are the main element of WWW bytes.

Web pages, supporting multimedia technology, combine various types of information: text, graphics, sound, animation and video. Its success on the Internet largely depends on how well and beautifully a particular Web page is made.

The user is pleased to visit those Web pages that have a stylish design, are not burdened with excessive graphics and animation, load quickly and are correctly displayed in the Web browser window.



Creating a Web page is not easy, but probably everyone would like to try themselves as a designer. And in this case, I am no exception, which is why I chose this topic for my course work.

In his course work 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 reviewed the basics of the Web page programming language - HTML, which is a generally accepted WWW standard. This will give us the opportunity to become familiar with the structure of a Web page and how to properly design it.

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

The Internet is the world's largest computer network. The Internet now has approximately 150 million users in more than 50 countries. WWW is accessible mainly through the Internet; but when we say WWW and Internet, we do not mean the same thing. WWW can be classified as internal content, that is, it is some kind of abstract world of knowledge, while the Internet is the external side 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 simpler - 3W? WWW is distributed Information system hypertext-based multimedia. Let's look at this definition in order.

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

Multimedia: information includes not only text, but also two- and 3D graphics, video and sound.

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

Such links are called hyperlinks or hyperlinks. On a computer screen in a viewer window, links appear as areas of text or graphics highlighted in some way (for example, with a different color and/or underlining). By selecting hyperlinks, the viewer user can quickly move from one part of a document to another, or from one document to another. If necessary, the viewer automatically contacts the appropriate server on the network and requests the document being referenced. By the way, the idea of ​​hypertext presentation of information should already be well known to users different versions Microsoft systems Windows. It is on this principle that the Windows system hints (Help), with the only difference that the hypertext system Windows prompts 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. A document written in HTML 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 program; In accordance with these instructions, the program places text on the screen, includes pictures in it, which are saved in separate graphic files, and creates 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 viewer. The HTML language will be discussed in detail in the next section, since without knowing the basics of this language it is impossible to create a Web page for publication on the WWW.

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, and located on the same server or being an integral part of the same Web project.

You can work on the Web without knowing HTML because 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 are often limited in their capabilities, buggy, or produce poor HTML that doesn't work across platforms.

The HTML language comes in several flavors and continues to evolve, but HTML constructs will likely continue to be used in the future. By learning about HTML and understanding it more deeply, 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 exclude the possibility of using other methods, such as the advanced method provided by Netscape Navigator, Internet Explorer, or some other programs.

Working with HTML is a way to learn the ins and outs 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 be the basis of almost everything software, which is related to 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 extension .html or .htm, in which the text is marked with HTML tags (English tag - special built-in instructions). HTML defines the syntax and placement of tags according to which the browser displays the content of a Web document. The text of the tags themselves is not displayed by the Web browser.

IN HTML document the start tag is the tag , and the final ones -.

The ending tag differs from the starting tag only in that it has a “/” (slash) symbol in parentheses before the text.

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

1) HTML declaration

And. A pair of these tags tells the viewer (browser) that there is an HTML document enclosed between them, with the first tag in the document being the tag (at the very beginning of the document) and the last tag (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 thing is the document title, which we see in the top line of the browser window and in the "Favorites" lists. Special spider programs search engines use the title of the document to build their databases. To give a title to your HTML document, text is placed between the tags And.

My first page

3) The body of the document.

The third main part of the document is its body. It immediately follows the title and is located between the tags And. The body of an HTML document is where the author places information formatted using HTML.

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

Now we can write the HTML code for our page:

My first page!

Text formatting

In the BODY section, all tabs and line breaks 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 start a new line in the text displayed by the browser 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.

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

Continuous text without gaps is not very easy to read; it is inconvenient to look through and find the right places. Divided into paragraphs, the text is perceived much faster. To start a new paragraph, use the tag

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

If it is not there, then new tag means closing the previous one, therefore nested ones are impossible. It is also possible to center text using a tag.

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

My first page

My personal pages will be here!

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

From one of my pages you can send me an email.

In addition to using these tags, you can use line breaks and tabs in the HTML document itself to break lines. There is a tag for these purposes. All text placed between tags will be displayed unchanged, that is, with all line endings and tabs.

For example:

This text is written in two lines.

In addition to text, an HTML document may contain horizontal dividing lines. They, like text, do not require any external files. The tag will display a horizontal line of unit thickness along the entire width of the page. A horizontal dividing line always results in a line break, but there are no blank lines 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 make up a certain part. The WIDTH attribute specifies the width of the line, as a percentage of the width of the entire page or in pixels. For example, 50% is half the page width, 400 is 400 pixels wide. The ALIGN attribute can take on values ​​similar to its values ​​for a tag, but the default alignment is centered. The SIZE attribute specifies the line thickness in pixels from 1 to 175; default is 1, but if, (line is contour), then the thickness necessary for the 3D indentation effect is added. Lines, along with paragraphs, allow you to highlight logical fragments of text. But a large number horizontal lines unpleasant for the visitor of your Web page, so they should not be placed after each paragraph. They are more suitable for highlighting entire sections.

Hello, friends! Those of you who have repeatedly read my blog know that I have said many times: you do not need to have special programming skills to be online.

Yes, that’s true, and I don’t go back on my words, but only because there is special services And . If you don’t use them, then to create a web resource and fill it you need to know programming languages.

Do you want to know what languages ​​are needed to create a website? Then read!

Some basic points

In order to start developing a website, you need to use several languages ​​at once. However, it cannot be said that any of them is better or worse than the others. An advantage over others can only manifest itself when solving a specific problem.

The choice of one or the other completely depends on the skill level of the programmer, because it is rare to find a specialist who has knowledge of all languages ​​at once.

First of all, I want to say that a programming language is a basic syntax that allows you to create a web resource.

The basis of absolutely any website is. This syntax is responsible for hypertext markup. All web developers are required to know it as well as the multiplication table.

Even if ready-made solutions are used, basic knowledge is simply necessary. WITH using html code carries out the entire process of creating an Internet resource and its content. But using only it, you can only create a simple website without feedback from the user, which provides information for informational purposes only. This is not enough for a good dynamic resource!

Major programming languages

First of all, it is worth highlighting JavaScript, because it is the basis of all programming that you need to know when creating a web resource. Among software platforms the basic ones are Silver Light and Adobe Flash. Moreover, the latter is quite common and has been used by web developers for a relatively long time.

These languages ​​are used to create interactive websites. According to forecasts, Silver Light will soon completely replace Adobe Flash. In rare cases, these two software products quite enough to create an Internet site, but using only them alone is highly undesirable.

Choosing the appropriate syntax also depends on operating system, which the developer uses. To create a web resource on Windows OS, technology that was developed is often used by Microsoft– ASP.NET. It allows you to create absolutely any web resource, both the simplest and the one capable of processing a considerable number of requests. To use ASP.NET, you should have knowledge not at the user level, but somewhat deeper.

The most popular syntax that is in demand among programmers is PHP. It has a lot of advantages, including speed and simple syntax. Today, the lion's share of engines is written in PHP.

When starting to understand web programming, many people choose Java; it is the most understandable and easy to learn. Java Server Pages are used to create content.

Recently, Ruby has been used very often. Moreover, its popularity is only increasing every day. I personally haven’t used it yet, but while studying the topic, I found a lot of enthusiastic comments about it. Experienced developers highlight Ruby as the most suitable syntax for quickly creating websites, while it allows you to implement the necessary functionality of the resource.

Results

Selecting the appropriate syntax is necessary based on several parameters, namely:

  • The type of operating system used;
  • The complexity and dynamism of the site being created;
  • The existing arsenal of your own knowledge.

I told you what programming languages ​​you might need when creating a web resource, and using them all at once or giving preference to one is up to you.

Hope, this material was useful to you, and you will be happy to share this article with your friends on social networks. Don't forget to subscribe to blog updates. See you soon!

Sincerely! Abdullin Ruslan

Every day the IT sphere is becoming wider, and the demand for website creation is growing. This leads to an increase in the number of specialists who are ready to take on the development of the site and its support. However, many such webmasters use free constructors and have a very vague understanding of programming and the technical component of the site. Of course, usability, design and content are very important, but a technically weak site with errors in the code will not bring any benefit to its owner. Therefore, only those specialists who speak programming languages ​​and are ready to develop a site from scratch should take on the creation of websites.

What languages ​​do you need to know to create websites?

Experienced developers say that choosing a programming language depends on many factors. However, it should be understood that perfect solution simply does not exist, each option has its own advantages and disadvantages. You need to choose the language that is best suited to solve your problems. Questions to consider before choosing a language:

  • server platform;
  • server software;
  • experience in website creation;
  • selected database.

Most popular languages

Websites Popularity
(unique visitors per month)		 Front-end
(Client)		 Back-end
(Server)		 Database
Google.com 1,600,000,000 C, C++, Go, Java, Python BigTable, MariaDB
Facebook.com 1,100,000,000 Hack, PHP (HHVM), Python, C++, Java, Erlang, D, Xhp, Haskell MariaDB, MySQL, HBase Cassandra
YouTube.com 1,100,000,000 C, C++, Python, Java, Go Vitess, BigTable, MariaDB
Yahoo 750,000,000 PHP MySQL, PostgreSQL, VB.NET
Amazon.com 500,000,000 Java, C++, Perl Oracle Database
Wikipedia.org 475,000,000 PHP, Hack MySQL, MariaDB
Twitter.com 290,000,000 C++, Java, Scala, Ruby MySQL
Bing 285,000,000 ASP.NET Microsoft SQL Server
eBay.com 285,000,000 Java, JavaScript, Scala Oracle Database
MSN.com 280,000,000 ASP.NET Microsoft SQL Server
Microsoft 270,000,000 ASP.NET Microsoft SQL Server
Linkedin.com 260,000,000 Java, JavaScript, Scala Voldemort
Pinterest 250,000,000 Django, Erlang MySQL, Redis
WordPress.com 240,000,000 PHP, JavaScript (Node.js) MariaDB, MySQL

PHP. It is based on the simplest markup language, HTML. PHP connects the user to server side. It is in this language that functions such as feedback forms, registration fields, etc. are implemented. The syntax of this language is very easy and simple to learn. To create a commercial portal, you cannot do without PHP, since it is the easiest way to obtain user contact information. The basic advantage of the language is that, using it, programmers can compose dynamic pages very quickly and without unnecessary effort.

Python. In Russian it is often called "python". It is a high-level language used for general tasks, most often server-side tasks. Its focus is on increasing programmer productivity and code readability. Using the tongue you can perform backup many programming paradigms. Python works great for Windows servers and Linux.

Ruby. In Russian it is often called “rubi”. It is a dynamic, reflective and high-level language for OOP (Object Oriented Programming). It makes it possible to implement multithreading on any OS, is distinguished by strict typing of a dynamic type, and has a number of other options. In terms of syntax characteristics, Ruby is closest to its Eiffel and Perl counterparts. In addition, certain details are borrowed from Python.

ASP. This language was developed by Microsoft Corporation. Using this technology, you can develop applications for www.asp. The platforms for the language are the following: Internet Information Server (IIS) and Windows NT. ASP can hardly be called a language directly; it is rather a technology for connecting a program to an Internet page. All the advantages of ASP are its simple scripting language and the ability to use third-party COM elements.

JavaScript. The principle of "Javascript" is slightly different from other programming languages. Its main difference is direct connection to the HTML file. The script, created using JavaScript, is processed by an interpreter that is built into the browser. This language is used for a wide range of tasks: creating dynamic pages(the content on them may change as the document is loaded);

Solving local problems; checking that forms are filled out correctly before sending them to the server.

The great capabilities of the language are explained by its popularity. So, using JavaScript you can:

  • change the contents of the page: add or remove text, change styles and tags;
  • respond to some events (for example, a mouse click) and perform a given function;
  • display messages, set and read cookies, check the correctness of the entered data;
  • load new data without reloading the document, etc.

Perl. At first, this language was used to connect programs that performed different tasks into a single script to solve a whole range of tasks: text processing, administration, etc. Today, Perl is used mainly for developing CGI applications. He helps administer servers and other systems. Due to the ease and speed of writing a script in Perl, it has been adapted to all popular platforms, including Mac and Windows. Perl is open source and completely free.

Do you need a lot of knowledge?

Everyone acquires basic knowledge of programming in computer science classes at school. Almost everyone had to work with Pascal and Delphi at the entry level. But other, more complex programming languages ​​require a different, more comprehensive and serious approach. The first thing a successful programmer needs is a mathematical, logical mind and a desire to improve in his field. However, you should not try to learn all languages ​​at once. It is better to master one well than to have fragmentary knowledge of five languages. All languages ​​have similar principles, they are all built on the logic of actions, so over time, with each new language, it becomes easier to learn. Many people can copy or change someone else’s code, but not everyone can write their own code and become a real “artist”.