How to create a web page. How to create an HTML page: step-by-step instructions, technology and recommendations
How to create a web page. How to create an HTML page: step-by-step instructions, technology and recommendations
Hello, dear blog readers. With this article, we will begin to learn the basics of the HTML language.
You probably already know that the main Internet language is language hypertext markup 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 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 regular computer with special software and Internet access. 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
,
,
.
An online store is urgently needed, and time for learning HTML, CSS, PHP and other technologies are not available. 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 organization 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:
Example Web Page
Website about cars.
Welcome to our automotive website. Here you will find many interesting and useful articles about cars. The site contains descriptions of many imported and domestic cars.
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 txt extension, 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 browserMicrosoft 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:
So we've created a Web page in Notepad that, although a little plain, already contains a large heading and a paragraph of text that is automatically broken into lines and contains a portion in bold.
What is a tag?
Now let's talk more about the page structure. Let's look at the fragment:
Website about cars
.
Here we see the text that appears on the page as a title, enclosed in tags
And
. What is a tag in HTML?
HTML tag are ordinary words and symbols enclosed in angle brackets, for example
,
,
. So tag
is the opening tag, tag
the closing tag, and the text between them is called the content of the tag. Also tag
and 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:
defines a first-level header element. There are six levels of headings in total, these are the elements
—
.
Elements can be block or inline (text). Block Elements carry out structural formatting of the page. Block elements are always displayed on a page on a new line and are indented from adjacent elements. Inline elements perform direct text formatting or logical formatting. Element
is a block element.
That's all for me!!! See you in the next posts!
06.09.17 1.5K
What is a web page? This is a document written in hypertext markup language ( HTML), which can be viewed using a browser. The web page is accessed by entering the URL.
A web page may contain text, graphics, and hyperlinks to other pages and files.
How to open a web page
A browser is required to view the web page ( for example Internet Explorer, Edge, Safari, Firefox or Chrome). In your browser, you can open a web page by entering the URL in the address bar. For example, by entering " https://www.computerhope.com/esd.htm", you will open the ESD Computer Hope page.
If you don't know the URL of the site you want to visit, you can use a search engine to find the web page or use Site Search.
When was the first web page created?
The first web page was created in CERN by Tim Berners-Lee August 6, 1991. Before that, you can visit and view the first site and the first web page at http://info.cern.ch/.
What is the difference between a site and a web page?
A website is a place that contains more than one web page. For example, our resource is a site that includes thousands of different web pages, including the one you are reading now:
In the URL example above, "url.htm" is the web page, it is always the last part of the URL. For URLs that do not end in .htm, .html, .php, .cgi, .pl, or other file extension, the server loads the web page index.htm by default. For example, there is no web page for the contact page URL. In this case, the default index file is loaded from the /contact directory.
Web page examples
We have already mentioned that for web browsing browsers are used. A web page consists of several elements, including CSS, images, and JavaScript. The body of the web page is created using HTML. This code can be created using an HTML editor, written by a human, or generated using server-side scripts. Typically, a human-created web page ends with a .htm or .html extension. For example, this page has the file name " webpage.htm" Pages generated by the script can end in .cgi, .php, .pl, etc.
What elements does a web page contain?
Below is a breakdown of the main elements so that web designers can understand what the logical web page structure:
The site title, logo, or company name is almost always found in the top left corner of every web page. It's also a good idea to use a tagline or short description of the page to give new visitors an idea of the site. This web page element is usually a link that leads to the home page;
The search bar allows visitors to quickly find a web page. It should be present on every page;
The navigation bar or menu is usually found at the top or left side of every web page. It should include links to each of the main sections of the site;
Advertising banners may be displayed in different places on the web page. They are typically displayed at the top, left, right, or bottom of a web page, or included in the main content;
Social buttons allow visitors to share a link to a web page on social networking sites;
In created web pages bread crumbs help the visitor understand where he is, as well as navigate to other sections of the site;
The title should be at the top of every web page. It is created using HTML tag
.
The opening paragraph is one of the most important elements web pages. It should interest the visitor to read the contents of the web page. One way to grab visitors' attention is to insert an image next to the opening paragraph;
Each web page should be divided into headings of more than low level, which allow the visitor to easily browse the content and find on the page what interests him most. When creating a web page, this can be done using HTML tags
…
;
It's a good idea to provide visitors with a link or button that redirects to a feedback form so they can tell you whether the web page was helpful to them or not;
Additional information and tools, such as a button to print the page, may also be useful to users;
The footer should include additional information that is important to the company or site. As well as links to other web pages;
Copyright and any legal or confidential notice must also be posted on all web pages. In web page design basics, this element not only can link to relevant legal information. It also indicates that visitors have reached the end of the web page;
A Top of Page button can help visitors quickly navigate back to the top of a web page to access menu links.
What can users do on a web page?
Most web pages have interesting hyperlinks that you click to find more information. You can also listen to music, watch videos, make purchases, chat and much more.
Where does a web page start?
What are the stages of the creation process? In order to understand what a web page is, you need to understand how it is formed.
Design
It all starts with the work of the designer. He, in accordance with the requirements and goals of the customer, develops a layout of the future website. This layout is created for one, two or more pages. At this stage, the location of all necessary objects is determined, fonts, pictures, and design in general are selected. That is, the appearance of the pages is initially formed, from which a full-fledged website will then be assembled.
Layout
Then the layout designer gets involved in the work. Based on the layout developed by the designer, he makes the page layout, optimizing it for various browsers. To do this, create a regular document, for example, in Notepad, which is saved with the .html extension. It is in this language that a simple web page is written. HTML stands for HyperText Markup Language and is a set of tags that serve to implement a variety of tasks. This language is quite simple but functional. With its help it is created logical structure page and it is divided into individual elements- headings, lists, paragraphs, tables and other objects. Additionally, tags define the meaning of all content. They give the browser information about what to highlight, underline, where to indent, where to insert a picture, and what to convert into a link. As a result, the page takes on the appropriate appearance. However, in order for it to fully correspond to what the designer came up with, it is also necessary to use CSS. These are cascading style sheets that define the appearance of an HTML document and its design. WITH using CSS-tools you can “color” the page in required colors, apply one or another font style, add other design elements. Using HTML and CSS gives us a finished, beautifully designed page. But it still needs to be made dynamic, and this is up to the programmer.
Programming
On at this stage you already have an understanding of what a web page is and how it is created. However, that's not all. There are several types of pages - static, dynamic and interactive. The first ones are precisely those that are created only with using html and css. In order to make a page dynamic, you need an engine - CMS (or Content Management System). This is a special program that, based on user requests, creates a page from data stored in the server database. That is, the page is created when a request is received from the user. To write it, languages such as ASP, PHP and others are used. Regarding interactive pages, then they include so-called forms through which the user and the server exchange data. They are also written in PHP, JavaScript, etc. Programming is a more complex process than layout; it requires high-quality specific knowledge of at least one (or preferably several) of the listed languages.
How does a web page load?
In order for the page to become available to all Internet users, it (that is, the document in which it is described) is placed on a web server. This is a computer that continuously works, waiting for requests from browsers to arrive. When it receives it, it finds the required resource (for example, a web page) and sends it to the appropriate browser. And that, in turn, based on the information (signals) contained in the document, displays a web page.
Why can't I open a web page?
There are situations when you enter a request (indicate an address, write a word in the search bar, or click on a link), but the browser cannot display the information you need and writes that the web page was not found. What is the reason here and how to solve such a problem?
First, you should check the URL to see if it is entered correctly. If an error is made in any letter or symbol, then the server will not be able to find information adequate to your request, and the browser, accordingly, will not be able to display it. But if the address is correct, then why is the web page unavailable? The cause may be cookies. They are created by web pages that you have visited previously to store some settings and other things. If such a file is damaged, it may interfere normal loading pages. To correct the situation, it must be removed. To do this, find the "Privacy" section, go to the content settings and in the window that opens, select "All cookies and site data." Click "Delete All".
The third reason could be slow work browser due to the use of a proxy server. To fix the problem you need to change the settings. This can be done in the "Internet Connections" section. Select the network you're using, open Settings and find the Proxy tab. Set required settings its use. Now everything should work.
Conclusion
From this article you learned about what a web page is, how it is formed and what specialists take part in its creation. We also looked at how site pages load and display, why they may not open, and how to solve this problem. Now you know a little more about how the Internet works and what its web resources are.
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
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, and then 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 rather than .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 because it's complex editors. The two most popular text editors for writing HTML and CSS are Dreamweaver and Sublime Text. Free Alternatives also 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 use the latter HTML version, 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 this:
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 document title 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 such 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>In 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://i0.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 you add elements to a web page, they can be styled using CSS. 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 <a href="https://rustrackers.ru/en/tips/php-dvoinye-figurnye-skobki-ponyatie-operatornyh-skobok-operatornye/">curly braces</a>() and immediately 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 <a href="https://rustrackers.ru/en/game/ten-abzaca-stil-napravo-vniz-cvet-seryi-primery-ispolzovaniya-css/">color properties</a> and font-size applied 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 property value, 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. Structure <a href="https://rustrackers.ru/en/multimedia/css-border-s-odnoi-storony-bonus-vertikalnoe-centrirovanie/">CSS syntax</a> includes selector, properties and values</p><p>Knowledge of several basic terms and <a href="https://rustrackers.ru/en/customize-windows-10/winrar-komandnaya-stroka-obshchii-sintaksis-komandnoi-stroki-probel-v/">general syntax</a> CSS is a great place to start, but we have a few more points to cover before we dive into the deep end. 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://rustrackers.ru/en/network-and-internet/sekrety-veb-dizaina-v-stile-kartochek-adaptivnyi-i-mobilnyi-dizain-razlichnye/">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 href="https://rustrackers.ru/en/useful-on-windows-10/kak-podnyat-reputaciyu-prinadlezhnost-k-opredelennym-gruppam/">certain group</a> elements, rather than all elements of the same type.</p><p>Classes allow you to apply the same styles directly to <a href="https://rustrackers.ru/en/useful/kak-uvelichit-masshtab-stranicy-kak-uvelichit-masshtab-stranicy-v/">different elements</a>, 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 select only 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. It's good practice to include all of our styles in one <a href="https://rustrackers.ru/en/customize-your-desktop/yavlyaetsya-vnutrennei-ili-vneshnei-imya-faila-ne-yavlyaetsya-vnutrennei-ili/">external file</a>, to which there is a pointer inside the element <head>our HTML document. Using one <a href="https://rustrackers.ru/en/news/list-style-type-css3-primery-pravila-css-dlya-nastroiki-vneshnego-vida/">external CSS</a> allows us to apply the same styles throughout the site and quickly make changes to it.</p><h3>Other options for adding CSS</h3><p>Other options <a href="https://rustrackers.ru/en/security/podklyuchenie-shriftov-google-podklyuchenie-shriftov-css-rabota-s/">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 chosen text editor to create a new <a href="https://rustrackers.ru/en/problem-with-os/redaktirovat-fail-hosts-na-make-kak-otredaktirovat-fail-hosts-v-os-x/">text file</a> with .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://rustrackers.ru/en/education-and-science/kogda-sozdali-odnoklassniki-kto-vladelec-odnoklassnikov/">at the 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 haven't declared 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 <a href="https://rustrackers.ru/en/disks-and-files/vdavlennyi-blok-na-belom-fone-css-css-neskolko-tehnik-dlya/">various elements</a>. The way <a href="https://rustrackers.ru/en/education-and-science/problemy-s-ustanovkoi-google-chrome-ne-ustanavlivaetsya-google-chrome/">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 href="https://rustrackers.ru/en/problem-with-os/kak-krasivo-oformit-profil-v-instagram-v-edinom-stile-kak/">uniform style</a> for all browsers. These resets usually involve removing dimensions, padding, margins, or additional styles that lower these values. Because <a href="https://rustrackers.ru/en/tips/nasledovanie-kaskadirovanie-i-prioritetnost-stilei-css-nasledovanie/">CSS cascading</a> works from top to bottom (you'll learn about this 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://rustrackers.ru/en/desk-desktop/chto-delat-esli-fotografii-ne-otobrazhayutsya-kak-vklyuchat-i/">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://rustrackers.ru/en/internet/sintaksis-javascript-massivy-terminaly-peremennye-preobrazovanie-v/">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 <a href="https://rustrackers.ru/en/customize-windows-10/poshlyi-rules-html-pravila-napisaniya-css-poshlye-voprosy-parnyu-po-perepiske/">writing CSS</a>. The good news is that you can do it all and it just takes a little patience to master it.</p><h2>In practice</h2><p>Let's go back to where we are <a href="https://rustrackers.ru/en/multimedia/edge-svyaz-mobilnyi-internet-teper-v-dva-raza-bystree-poterya/">last time</a> stopped by 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://rustrackers.ru/en/tips/programma-dlya-sozdaniya-papok-na-android-kak-sozdat-novuyu-papku-na/">new folder</a> named assets. This is where we will store all the assets 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 with <a href="https://rustrackers.ru/en/graphics-and-design/raznye-faily-mogut-imet-odinakovye-imena-v-kakom-sluchae-raznye-faily-mogut/">same base</a>. 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; border-spacing: 0; )</p><li>Our main.css file is starting to take shape, so let's connect it to the index.html file. Open index.html in <a href="https://rustrackers.ru/en/tips/chto-takoe-tekstovyi-redaktor-ms-word-funkcii-tekstovogo-redaktora-microsoft/">text editor</a> and add the element <link>V <head>, immediately after the element <title>
.</li><li>Since we are pointing to styles through the element <link>add a rel attribute with the value stylesheet .</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, as well as download the site's current source code.
Resume
So, everything is fine! We took some big steps in this tutorial.
Just think, now you know the basics of HTML and CSS. As we continue and you spend more time writing HTML and CSS, you will become much more comfortable working with these two languages.
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
Everything that we see on the browser screen while “traveling” on the Internet is called a WEB page. A WEB page can contain a wide variety of content (or content): text, pictures, videos, playing music or an interesting online game.
Any WEB page has an address. The page can be found on the Internet at this address. The page address is displayed in the browser address bar. For example, the WEB page you are reading now has the following address:
http://www..html
Check that it should be displayed in the address page of your browser.
Now many people enter in the address bar keyword or a whole phrase. Previously, the browser program generated an error in this case. No such address, page not found! Now the browser processes this error in the following way: it contacts a search engine (Google, Yandex or another) with a request consisting of a word or phrase entered into the address bar. Thus, search engine tries to push the user to the correct answer to his question and find the necessary information on the Internet WEB page, where the user-entered words occur most often. Try writing to search bar question posed in the title of this article, and you will receive a whole list of links that contain answers to this question. It is quite possible that you will find this article on this list.
But let's return to the WEB page address. This address is read from left to right and consists of several parts. The first part of the address for WEB pages will always be http:// or https://. These letters designate the protocol by which WEB pages are transmitted over the Internet. This protocol is called the HyperText Transfer Protocol (HTTP). WEB pages are a typical hypertext, that is, text with links to other text and multimedia materials. Therefore, the HTTP protocol is always used to transfer WEB pages.
If a WEB page is like a book page posted on the Internet, then the book itself can be considered an Internet site that unites several WEB pages interconnected by Internet links. Just like a WEB page, an Internet site also has an address. The website address is part of the WEB page address and is located between the characters // and the first character /.
The site address has two forms: digital - for the computer and symbolic - so that this address is perceived by people. It is easy to translate one form of representation into another. This is done by a special domain name system (DNS) that serves the Internet.
The site address, written in symbolic form, has several components separated by dots, among them - the name of the site (topauthor) and the name national domain, to which the site belongs (ru, which means Russia). The / is followed by the WEB page name, which is essentially the address of the page on the site.
The addressing system does not end at the page level. All content components (image files, music and videos) also have addresses. Such addresses are otherwise called uniform resource locators (Uniform Resource Locator - URL). So, for example, the address of the Topavtor logo is:
The fact that this component of the content is a picture is indicated by three letters, png, following the dot at the end of the address. The name of the picture is located between the / symbol and the dot. This picture is called a logo and is posted on the website www.. If you enter the above URL address into the address bar of your browser, an image of the logo of the Topavtor website will appear on the screen.
What happened? The browser program at the address found on the site www.site where the image was stored, copied this file to local computer user (sometimes they say “downloaded”) and showed the corresponding picture on the browser screen, which is now stored not somewhere in the Internet sky, but at hand, on the local computer.
In fact, the content components posted on the WEB page do not necessarily have to be stored on the same site. For example, to post the painting “Deuce Again” on the WEB page, you can provide a link to a file located on another site, for example, on the Wikipedia website in the article “Deuce Again” or on the website of the Tretyakov Gallery, where this painting is exhibited. The result will be the same. In both cases, the picture will appear on the WEB page.
The WEB page itself is text written in a special hypertext markup language (HTML). This text can be seen if you give the browser a command to show the source of the WEB page (View page source). The HTML language allows you to unambiguously describe the placement of all components of content on a WEB page. For example, the types and sizes of fonts that are used when printing texts, the sizes of pictures and their position relative to the text.
Any Internet site is hosted on a server. A server is a computer controlled by a special program. The server serves all requests sent to the site. Thanks to the work of the server, information is exchanged between the site and the browser. The browser is hosted and runs on the user's computer connected to the Internet. The user's computer is also called a local computer. The process of exchanging information between the server and the local computer begins in response to a browser request from the local computer. This process is much like a radio broadcast, where the server is the radio transmitter and the browser is the radio receiver.
Text written in HTML is transferred to the local computer. We can assume that a photo album has been transferred to the local computer with empty spaces left for pictures, music, video clips and programs. In these places so far there are only URL addresses all multimedia components of content. The browser “passes” through all these addresses and copies image files, music or videos from them to the local computer. Then all these files are placed on the screen, as intended by the programmer who developed the WEB page. The browser handles this in a few seconds, and then it’s up to the user: read, listen to music, watch videos. The Internet is at your service!
