So what is a Web site and a Web page? To understand this issue, let's think about what information the Web site actually contains? The answer is obvious - almost anything. The site may contain information about computer games, cars, aquarium fish, mythical creatures, cities and countries of the world, etc. etc. The list is endless. You can even place on the site, for example, the works of the great Russian classics. How do you like the site "War and Peace"? It turns out that the site is a book, but not a simple one, but an electronic one? Yes, a Web site is, at its core, really an e-book, magazine, or textbook that can contain information that is useful to you or that you are not interested in at the moment.
Like a book, a Web site is made up of pages called Web pages.
And how do we, in fact, find, in the same computer science textbook, the information we are interested in? We open the content that is at the beginning or end of the textbook, look for the paragraph in which the necessary information is located, in front of the paragraph we look at the page number, open it and study the material. Everything is pretty simple and commonplace.
After we get to the main page of a well-designed site, we should also see something similar to the content of a textbook in order to be able to quickly find the information we need.
But how to get to the necessary information located on the website, because we cannot flip through electronic pages like ordinary paper ones? Indeed, we usually use the mouse.
In fact, moving between pages on a site is even faster than moving between pages when working with a regular tutorial. To move between the pages of the site, elements of the Web page are used, when you click on them, you can move to another page of the site. These page elements are called hyperlinks and are present on all pages that make up the site.
In the "classic" case, a part of the text (a word or several words) and graphic images (pictures and photographs) are used as hyperlinks.
Since in the first case, text is used to create hyperlinks, such a hyperlink is called text. Quite often, a text hyperlink is blue underlined text. Seeing, for example, on the main page of a site the inscription "Web sites and Web pages" designed in a similar way and clicking on it with the left mouse button, you should be on the Web page dedicated to this topic. The "Websites and Web Pages" page must in turn have at least one hyperlink that you can use to return to the content.
If a graphic image, such as a photograph, is used as a hyperlink, it will be difficult to guess that this is a hyperlink. How, then, can you determine whether an image is a hyperlink or not? In this case, remember the following rule: "If, when you move the mouse cursor over an element of a Web page, it turns into a hand, then this element is a hyperlink."
Note: There is an exception to this rule, for example, in the case of rollovers, which may not be hyperlinks, but when you hover the mouse over them, the cursor also takes the shape of a hand. In addition to changing the appearance of the cursor, when you hover over the hyperlink, the URL (unique address of the resource) should also be displayed, but we will talk about this in the lesson on creating hyperlinks using the FrontPage program.
Control questions:
- What is a Web Site?
- What is a Web Page?
- What is a hyperlink?
- What elements of a web page can be used as hyperlinks?
- How can I tell if a page element is a hyperlink?
- Can individual Web pages on a site not contain any hyperlinks?
Welcome to the Start-Luck blog pages. Today I would like to show you how to use the code. Writing websites is an interesting activity that may seem overwhelmingly difficult to many. In fact, a simple page can be created in just 5 minutes.
In this article, I will talk about creating an html page. We will complete this task in less than 10 minutes, and then we will deal with the main tags in more detail. It would be wrong to call such a publication a lesson. Rather, it’s a seed that is designed to show you the ease of work and give you the desire to move on, learn more, do better.
How to create a page
I suggest you make the first page in notepad. The most simple, which is located in the "Start" menu, the "Standard" folder. You don't need to download anything yet. Try to use what you have.
Open your document.
Paste this code into it.
<html>
<head>
<title> My first page</ title>
</ head>
<body>
<center> </ h1> <br /><center> <font style = "color: red"></ font> <br /> <b></ b> <br /> We got to the very bottom<br /> Now you know a little more about tags and can use them. Let's try to insert a link to link several pages together.<br /> <hr> For example, here is a link to my blog -<a href = "http: // site /"> Start-Luck</ a>- talks simply about "difficult".<br /> <br /> </ body> </ html> |
Making a page is easier than you think
Simple code makes text red
Writing in bold isn't much harder
We got to the very bottom
Now you know a little more about tags and can use them. Let's try to insert a link to link several pages together ..
So that is all. Your first page is ready
The file needs to be named index.html... The ending ".Html" indicates the file extension. If you just enter the name of the index, then the document will be saved as a text file and will not open in a browser.
I saved the document to my desktop. Now you need to find it, right-click and open it using any browser. I will choose Google Chrome.
This is how the page I just created looks like. Yours will be no different. Everything is exactly the same: with pictures and colored font.
Now I'll go into more detail about tags, but for now let's just remove from the title “ center "And insert a line containing the word" Color". By the way, I already wrote. It's very simple, I recommend reading it.
Save the document again, this time you can just use the keyboard shortcut Ctrl + S, and then refresh the page in the browser using the F5 button
Remember, almost any tag must open and close. That is, there must be a slash code somewhere. In this case, it looks like this: .
See, the headline has turned red. Likewise, you can give the desired shade to any part of the text.
Well, that's all, an example is ready, and you should be proud of yourself. Of course, it is not online yet, for this you need to put the web page on, which is provided by the hosting. You also need to connect your domain so that other people can see your creation.
So far, only you can see the page. But you must admit that such a site can only surprise a person from the Iron Age. But this is the first experience, let's make it even more successful by understanding the tags that we used. This will help you learn how to create your own projects, without anyone else's help.
Tags
With your permission, I will switch to NotePad ++. It has a number of advantages over a regular notebook. For now, tag highlighting comes in very handy to show you the elements I'm going to talk about. In general, if you are going to learn html, then I highly recommend installing this free program.
It is not the only one and I can offer you a few more if someone is interested in alternatives. We will move on to the theoretical part.
The main
The page starts and ends with tags ... They show the browser that this is a web document generated using html.
Next comes or heading. It contains the most important information about the page, in our case -. If you have not yet found the phrase "My first page", which is present in the code, pay attention to the tab itself, above the search line.
Namely tags
Tag
indicates that the phrase is a heading. By default, it is slightly larger than the body text and is bold. If you and I were now writing not only in html, but also creating a CSS file with which our file echoed, we could control the size, font, and even the color of all headers on the page without prescribing font style
as we did in the example. Although this is also a bit early.
By the way, Title and H1 have their effect when assigning your site to the search results. You need to treat them with great attention and not write inside just what. They are related to. Besides h1, there are also h2, h3, h4.
In the same line there is an opening and a closing
Is one of the few single tags. That is, it works by itself. Thanks to this, elements you jump from one line to another. In simple terms, indent. We wrote it once, which means we moved down once, twice, like mine, and the indentation turned out to be a little more.
Picture
Next comes the tag img , that is, image, picture. The square bracket is opened, all the basic information about the image is entered into it, only after that it is closed. It should be noted that img Is a tag, and all other code elements that fit inside are its attributes.
The first thing is alt , that is, a description. This is also needed for optimization. Sometimes it is added and title ... When you hover over the image with the mouse, a tooltip appears next to the cursor when the page is already open in the browser.
It was possible to upload a picture to the site folder and write a path to it, but I went the easy way. I found a picture on Pixabay, opened it in a new window and pasted the link.
In the tag src the path to the picture is written. It is he who tells the browser what to move next to find the desired image, and in which direction to look - you write yourself.
Text formatting
is responsible for giving a part of the text some special style, for example, as in our case, a different color. style = "color: red" indicates that the color will be red. If you want yellow, write yellow, green - green. You can use the color codes from Photoshop.
helps make text bold.
draws a horizontal line. It is single and is used only when closed. If you write
several times, you will get exactly the same number of horizontal stripes when you open the page in a browser.
Links
tells the browser that the link will be next. You want to redirect the reader to a different address. This tag comes with a required attribute href = "address" ... The quotes include the path where the browser should take the visitor to the page. After this tag is registered, a description is inserted, a word or several, by clicking on which the reader will be transferred further. After these conditions are met, you can insert a second, closing tag .
After the main body of the page is written, you close the tag body since the body is complete. And indicate that you stop using for today html .
If you want to learn more about html tags and learn how to insert not only pictures, but also videos, create buttons, various forms, lists, paragraphs, then I can offer you a free course by Evgeny Popov “ HTML basics ". Just 33 lessons will help you reach the next level.
I would also like to recommend you a video course that tells you how sites are made up. The whole process is shown with real examples, which is especially good. The course is intended both for beginners who do not even know HTML yet, and for those who already know both HTML and CSS well, however, they are not good at coding sites. You can get more complete information by clicking on the link: www.srs.myrusakov.ru/makeup
In addition, take away Free book on website building ! This book is designed for beginners, and this is where an OT and DO site is being created. That is, the design is prepared, then the pages are made up, the software part is written, and then the site is placed on the Internet. The author thoroughly comments on everything, and the book contains a lot of screenshots and illustrations. Moreover, the peculiarity of the book is that it is not an abstract site that is being created, but a completely real one that exists on the Internet.
Today you have done a lot, because the first step is the hardest.
Subscribe to the newsletter and VKontakte group , and learn more: how and why you need a site engine, what is a block layout and a modular grid, how to write sites correctly, and much more.
Until next time and good luck!
Before we begin our journey through the lessons of creating websites in HTML and CSS, 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 such content as, for example, headings, paragraphs or images. CSS (Cascading Style Sheets) or Cascading Style Sheets is a presentation language designed to style the appearance of 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. Typically, HTML will always represent the content, and CSS will always dictate how it is styled.
With this understanding of the difference between HTML and CSS, let's dive into HTML in more detail.
Basic HTML terms
Before getting started with HTML, you are likely to come across new and often strange terms. Over time, you will become more familiar with all of them, but for now you should start with three basic HTML terms - elements, tags, and attributes.
The elements
Elements indicate 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 items in the list
, Items are identified using angle brackets<>surrounding the element name. Thus, the element will look like this: Adding angle brackets< и >around the element creates what is known as a tag. Tags are most commonly found in pairs of start and end tags. An opening tag marks the beginning of an element. It consists of the symbol<, затем идёт имя элемента и завершается символом >; for example, An end tag marks the end of an element. It consists of the symbol< с последующей косой чертой и именем элемента и завершается символом >; for example, The content that falls between the start and end tags is the content of this element. A link, for example, will have an opening tag and the closing tag... What's in between these two tags will be the content of the link. So, link tags will look something like this: Attributes are properties used to provide additional information about an element. The most common attributes include the id attribute, which identifies the element; the class attribute that classifies the element; the src attribute, which identifies the source of the embedded content; and an href attribute that indicates a link to the associated resource. Attributes are defined in the start tag after the element name. In general, attributes include name and value. The format for these attributes consists of the attribute name followed by an equal sign followed by the value of the attribute in quotation marks. For example, element with the href attribute would look like this: Shay howe This code will display the text "Shay Howe" on the web page and when clicked will take the user to http://shayhowe.com. The link element is declared with an opening tag and the closing tag covering the text, as well as the attribute and value of the URL of the link declared through href = "http://shayhowe.com" in the opening tag. Rice. 1.01. The schema HTML syntax includes an element, an attribute, and a tag Now that you know what HTML elements, tags, and attributes are, let's take a look at our first web page. If something looks new here, don't worry - we'll decipher everything along the way. HTML documents are plain text documents saved with the .html extension rather than .txt. To start writing HTML, you first need a text editor that is comfortable for you to use. Unfortunately, this does not include Microsoft Word or Pages as they are complex editors. The two most popular text editors for writing HTML and CSS are Dreamweaver and Sublime Text. Free alternatives are also Notepad ++ for Windows and TextWrangler for Mac. All HTML documents contain a mandatory structure that includes the following declarations and elements:
,
, Document type declaration oris located at the very beginning of the HTML document and tells browsers which version of HTML is being applied. Since we will be using the latest HTML, our document type will simply be... This is followed by the element denoting the beginning of the document. Inside element All visible content of the web page will be in the element
This is a web page. This code shows the document starting with the document type declaration,, then immediately comes the element ... Inside items go Time to test our work and see how our HTML and CSS get along. Opening the index.html file (or refreshing the page if it's already open) in a browser should show a slightly different result than before. Rice. 1.04. Our Styles Conference Website With CSS Reset Below you can view the Styles Conference website in its current state, as well as download the source code of the website at the moment. So, it's okay! We've taken a few big steps in this tutorial. Just think, you now know the basics of HTML and CSS. As we move on and you spend more time writing HTML and CSS, you will become much more comfortable working with these two languages. Recall that we looked at the following: Now let's take a closer look at HTML and get a little familiar with the semantics. Instructions Everything that the visitor sees on the web is recreated by the browser from the instructions sent by its server. These instructions are written in HTML (HyperText Markup Language) and are highlighted in htm and html for the files in which they are stored. You can create such a file in a regular text editor - this will be the first step in creating web pages... Open standard Notepad, for example, and create an empty file named index.html. When you type a website address without specifying a specific the page(for example), the first thing to do is look for the page with this name - index. HTML instructions are called "tags" and each of them is enclosed in such brackets -<>... Some of the tags are paired, that is, they consist of opening and closing tags, and information is placed between them. For example, a tag that tells the browser that the code is in HTML below, like this: The closing tag indicating that the HTML is complete at this point is written like this: As you can see, the closing tag differs from the opening tag by the presence of a slash after the opening parenthesis ( All the code that you put between the tags and, should be split into two parts - the header and the body of the document. The opening and closing heading tags are written like this: After the heading part, you need to place tags between which the document body instructions will be enclosed: There's a whole paragraph of information here! The first line of the paragraph. The first line of the paragraph. In this article, we will introduce different concepts related to the Web: web pages, websites, web servers and search engines. These terms often confuse both beginners with the web and people who rarely use the web. Let's figure out what exactly these concepts mean! Like any other field of knowledge, the Web is full of specific terms. But do not worry, we do not want to overload you at the very beginning of your journey (and if curiosity still prevails, then we have a dictionary). However, to begin with, you still have to learn a few basic terms, since you will come across them in our articles quite often. It is sometimes easy to confuse these terms as they are related but have different functions. You've probably noticed their misuse in the news or elsewhere. We will discuss these concepts and technologies a little later, but now the brief definitions below will be a very good start for you: Webpage A document that can be displayed by web browsers such as Firefox, Google Chrome, Microsoft Internet Explorer / Edge, or Apple's Safari. For the sake of brevity, the notion "web page" itself will be referred to simply as "page". Website A collection of web pages that are linked in any way. Vocabulary usage: "website" or simply "site". Web server A computer that provides the computer and software required for a website to function. Search engine A website that helps you find other web pages, such as Google, Bing, or Yahoo. So far, active learning is not available. If you can provide useful information, then. So let's dig a little deeper and find out how these 4 terms are related to each other, and why these concepts are often confused with each other. Webpage- a simple document displayed on a computer screen through a browser. Such a document is written in HTML (which we will look at in more detail). A web page can contain many different materials such as: Note: browsers can often display some PDF documents or images, but the term webpage more directly related to HTML documents. Until the end of the article, in this case, we will use the concept document. All web pages on the web have their own unique address. To access the desired page, just type its address in the address bar of your browser: Web site is a collection of pages linked in any way (including their links to other resources), which are available under a single domain name. Each page of the site contains direct links (almost always highlighted parts of the text that can be clicked with the mouse), which allows the user to quickly jump from one page of the website to another. To access a website, type its domain name in the address bar of your browser, and your browser will display the site's home page or, in other words, the home page: Web page and Web site it is especially easy to confuse with each other when site contains only one page. This site is sometimes called one page website. Web server is a computer that provides one or many websites (hosting)... Hosting means that everything pages and the files attached to them are contained on this computer. Those. Web server will send any the page with site at the request of any user, which will host the user's browser. Don't be confused website and web server... For example, if you hear someone say, "My website is not responding," it really means that it is web server does not respond to the request, and therefore is not available itself site. Moreover, since a web server can host multiple sites, the term web server is never used to refer to a website, as this could lead to a lot of confusion. Returning to the previous example, if we said, "My web server is not responding," it would mean that there are no sites available on this server at the moment. Search engines are a common cause of network confusion. Search system is a special kind of website that helps users find the pages they want others sites. Most popular search engines: Google, Bing, Yandex, DuckDuckGo, and many others. Some of them are universal, and some are focused on a specific area. Use the search engine that is convenient for you. Many novice netizens confuse a search engine and a browser. Let's clarify: browser
is software that finds and displays web pages; search system
is a special kind of site that helps users find the pages they need others sites. The confusion arises from the fact that when someone first launches a browser, they display the search engine home page. This is exactly the case, because the first thing you do when launching your browser is to find a web page and open it. But don't confuse infrastructure (i.e. browser) with service (i.e. search engine). This difference will help you a little, but even some experts use these concepts arbitrarily, so you should not worry too much about this. Below is an example of how the Firerox browser displays the Google search box on the start (home) page by default:Tags
Attributes
Demonstration of basic HTML terms
Setting up the structure of the HTML document
Hello World!
Demonstration of the structure of an HTML document
Demo and source code
Summary
Resources and links
:
Second line of the paragraph.
Second line of the paragraph.
On this
In a nutshell
Active learning
Going deeper
Webpage
Web server
Search system
