HTML language from scratch. How to learn HTML and CSS faster? Let's meet - HTML
It is quite stable, so it is not surprising that the number of people wishing to master this craft is growing. Moreover, in my opinion, this is one of the easiest “paths to getting into IT.” Although it is important to understand that for good results you must become a pro - in addition to having knowledge, you must constantly systematize and modernize your skills, always be “on the wave” and use only relevant modern methods.
As in any other profession, learning to design websites begins from scratch - with basic concepts and theory. We'll talk about them today. In particular, I will consider the super useful service Interneting is Hard, which I 100% recommend to all beginners.
I don’t know if there are similar directions in modern universities, but I think that the prerogative in this area is specialized online courses or independent study of layout. The first method offers a more comprehensive and serious approach, but the second is completely free. Considering the development of thematic blogs and video channels, there are no problems with finding information now.
Personally, I started mine with simple (and paper) books on HTML/CSS, then there were years of training and over time I decided to consolidate / systematize the knowledge with the help of some courses. There really is a lot to choose from, although not all options end up being worthwhile. I took online training in layout at the company Netology. They are currently recruiting for the next group.
The advantage of courses is that they can provide step-by-step and effective knowledge acquisition through:
- informative lectures compiled by leading experts and practicing layout designers;
- clear and well-illustrated examples;
- practical tasks to consolidate the material.
In particular, in Netology everything takes place in the format of webinars with the opportunity to ask questions. There is homework, a thesis and a certificate of completion of training. In short, everything is serious. Such additional features make online courses more “profitable”, and the costs are simply an investment in yourself.
If in doubt, look for free materials on certain sites - as a rule, you can get a couple of classes or educational articles for reference just for free. Well, of course, there are dozens of other educational web resources that you don’t need to pay for access to.
Interneting is Hard - layout learning serviceFinally, let's move on to the Interneting is Hard project - the thing is actually very cool! This is a full-fledged comprehensive course for mastering HTML and CSS for beginners who have never tried to understand in detail the structure of web pages and their development. If you don’t know where to start learning layout, 100% come here.
All you need to get started is motivation and knowledge of the English language. There will be no problems with organizational issues - the developers have compiled something like a “curriculum”, which includes:
- 14 chapters with gradual deepening of the material;
- 284 clear code examples;
- charts and graphs;
- almost 43 thousand words;
- modern technologies (yes, there is Flexbox too).
The process of learning HTML layout in Interneting is Hard has several advantages compared to other similar projects:
1. Beautiful diagrams illustrate difficult aspects of a subject, making difficult-to-understand structures clear and simple. Instead of piling up a lot of unfamiliar concepts in your head, it’s enough to visualize them in the most basic way, as the course authors do.
2. All modern layout techniques are used in the learning process: web typography, semantic HTML, creating responsive design and illustrations, as well as Flexbox. They will help a beginner to become a sought-after specialist, and a professional to refresh their knowledge;
3. Illustrative examples demonstrate the core concepts of the material being taught through specific scenarios. This means that the user does not have to read endless “canvases” of text. This approach invariably leads to boredom, which ultimately leads to abandonment of the study.
Every 2-3 paragraphs are followed by writing the code and presenting how it works. This is how the future specialist gets his first practice in text editors and checking results in a browser;
4. This option for learning website layout is completely free. When starting to learn HTML, many people are still hesitant about whether this is really what they want to do. And if paid courses may make you regret the lost money, then Interneting is Hard will give you maximum knowledge without asking for a dollar in return.
Sections for step-by-step learning of layoutAs I said above, the “curriculum” consists of 14 thematic blocks. Let's take a quick look at them:
In order to appreciate the functionality and convenience of the Interneting is Hard service, I propose to consider the implementation of one of its subsections. Let's take the second lesson on creating basic web pages.
What I personally like:
- All material is organized by subheadings. The text is presented in accessible language and does not require deep knowledge of complex terminology. Everything is short and to the point - in the best traditions.
- Important and complex points are beautifully illustrated with diagrams.
- For ease of understanding and practical skills, examples of writing code are given.
- Everything is as convenient as possible: in the upper right corner there is a button to return to the menu, you can instantly switch to the desired subtitle of the lesson (navigation on the right) and after the lecture you can open the next chapter. Excellent usability.
conclusions
How do I like it? Interneting is Hard is currently one of the best sites for teaching layout from scratch. The authors of the course made sure that beginners who have never dealt with HTML and CSS could understand the basics of creating web pages in a simple and accessible way. The information is very well structured - gradually over 14 sections you will overcome the path from a novice user to an experienced layout designer. Of course, it’s impossible without practice and application of knowledge, but as for the theoretical basis, this is the most complete collection of information I’ve ever come across. If you want to study with teachers, check out the option from Netology, which is also quite good, although it’s paid.
If you know any other interesting services for studying website layout, send links in the comments.
HTML stands for H yper T ext M arkup L anguage, i.e. Hypertext Markup Language is the basic building block of web pages, used to create and visually present web pages.
HTML adds markup to plain text. Hypertext contains various links through which web pages are connected to each other. With HTML, anyone can create both static and dynamic websites. HTML is a language that describes the structure and semantics of the content of a web document. The content of a web page is marked up using tags that represent HTML elements. Examples of such elements are, , and so on. These elements form the building blocks for any website.
HTML was invented in 1991 by scientist Tim Berners-Lee, and was originally intended for the exchange of documents between scientists at different universities. With his invention, Tim Burns-Lee laid the foundations of the modern Internet.
There are several versions of HTML. The language standard is continuously updated and supplemented, and as a result, a new version of HTML is released almost every year. Version "HTML 2.0" was the first standard HTML specification, which was published in 1995. HTML 4.01 is the major version of HTML that was published in late 1999 and is widely used today. Today, the most popular version is HTML-5, which is an extension of HTML 4.01, published in 2012.
An HTML document or web page is a simple text document containing tags (which in turn are plain text enclosed in angle brackets). A web page can be typed either in a regular text editor (Notepad, WordPad, Word, etc.) or in a specialized one with code highlighting (Notepad++, Sublime Text, etc.). HTML documents are stored as files with the extension .htm or .html.
Online examples in every lessonAs we present the material, each lesson will provide examples that will help you understand each code in detail and, through practice, enjoy learning. With our online HTML editor, you can edit an HTML document, and then click the orange "Run" button in the editor, which is located above the left editor window, to see the result. If you use a specialized HTML editor, then you can copy the example and view the results of your work in the browser installed on your computer.
Example HTML: Try it yourselfPage title
This is the title
This is a paragraph.
Online HTML examples
The HTML tutorial provides you with more than 100 online examples that will help you easily master the markup language. Better to see once than hear a hundred times! Theory plus practice is the key to your success in mastering HTML.
HTML basics for beginners, what every novice webmaster or blogger should know now. If you want to learn how to create basic websites, understand the code itself, know what goes behind what and what should go, it is simply impossible to do this without knowledge of the basics of the HTML language. On my blog I will have a whole chain of articles that I will devote to this topic from A to Z, I will describe each tag that is present in the document, what it means and how to use it correctly.
HTML BasicsIf you don’t know the most basic things, your path is closed. I believe that every person who decides to develop and create websites should know and understand the basics, what the site itself consists of, how it works and what happens in the code itself.
Of course, there are quite a few programming languages, they are all complex in their own way, but there are some that you absolutely need to know. If you want to beautifully design a letter to be sent by mail, you have your own VKontakte group, a group on other social networks, the same YouTube channel, you need to tinker with the code on any of the site engines, you just need to know the basic concepts.
I gave only a few examples, in fact, now this knowledge is being used more and more often on the Internet. I am more of a practitioner than a theorist, so in my articles in this section I will show you my examples of how and what I did, step by step. I will post both example pages and entire sites.
An Html document is the simplest text document, a tagging language that you come across every day on the Internet. Tags describe the structure of a document. Tags are formatted as angular< >brackets, inside which the name of the tag is written. The browser looks at the structure of the document, builds it and displays it according to its instructions on your monitor, if, of course, you did everything correctly.
This whole process begins before you even see the finished picture. Browsers process a document sequentially, from beginning to end. Including everything that should be on the page. Tables, pictures, scripts and so on, except this includes CSS styles.
Basics for BeginnersWhat is html - if you look at what Wikipedia writes - (HyperText Markup Language) hypertext markup language for documents. Most pages on the Internet contain page markup in this language. This language is interpreted by browsers, and the resulting formatted text is displayed on your computer monitor or mobile device.
This language is inherently very easy and accessible to learn. Anyone can learn and understand its basics. To use such a language, you need to know and use descriptors, which are also called tags. It is with the help of tags that a document is created.
What should the structure of the document consist of, what tags should be present. Let's look at everything with one small example. I wrote some text in MS Office and showed it in this screenshot.
To display this text in the browser in the same way as it was written in the document, you need to add page markup to it, which includes some tags. First, look at them, then I will describe each one who is responsible for what.
Welcome to my blog, you are now taking a lesson on HTML Basics. If you liked this article, you can subscribe to this blog to receive new articles in your email inbox.
Blog of Evgeny Nesmelov! website Basics of html and css for beginnersWhat tags does any html document consist of, what does it include, and where should it all be written down?
< html > < body > < h2 >< / h2 > < p >Welcome to my blog, now take the tutorial on HTML Basics. If you liked this article, you can subscribe to this blog to receive new articles in your email inbox.< / p > < h2 >Blog of Evgenia Nesmelov! Nesmelov. ru Basics of HTML and CSS for beginners< / h2 > < / body > < / html > |
Any code consists of characters that are placed in angle brackets. All these are called elements. All elements usually consist of two tags, opening and closing. I advise you to initially look carefully at the tags; if you miss one of them and do not close it, you will need to revise large parts of the code to find the error.
There were cases when it took more than one day, a person contacts and asks for help, he cannot find an error on his site, so always look very carefully at what and where you write. Let's now use this example to look at each element of the code, what is written in it, what it means and what happens in the end.
Most tags are paired, which includes an opening tag and a closing tag. In addition to such tags, there are also single tags. Tags can go together with others, thus nesting within each other. For example, display text in bold and italics at once.
Text
< strong > < i >Text< / strong > < / i > |
Let me remind you once again, you need to follow the rules that are present in the document. This is how the browser understands what is on the page, its sequence, content, and so on.
A tag is a component that tells the web browser to perform a particular task. For example, the presence of a paragraph, table, form or image.
Attribute - modifies the tag. For example, you can align a paragraph centered or right-aligned, also set the location of the image on the page, and so on.
ALWAYS close tags, if you open it, be sure to close it. Otherwise, an error will occur and your document will not display correctly on the page. There are also exceptions, which should not be forgotten.
It is clearly necessary to understand that there is a document title and its body. The title is everything that is contained in the tag. Document body (), the body of the document contains all the contents of the page. If there is a need to leave a section of code for yourself, thereby enclosing these tags in comments, the tag is used for this. Everything that is inside such a tag serves as a comment and is not perceived by browsers.
Let's start with the very first one. At the beginning of the document I opened a tag and at the end I closed it. This code is present in absolutely every document; it tells the browser that everything placed between these tags is HTML code. It is the root of the document itself; everything that is subsequently present behind this tag is no longer included in the document and is not perceived by browsers. At the very beginning of the document, the tag is opened and at the very end it must be closed.
The entire section of this tag contains all the technical information of the document. Like the previous tag, head must also be opened and closed at the end. This information includes the page title, description, search engine keywords, and encoding. About the encoding a little below.
Content
< head >Content< / head > |
This tag is included in the head and must be written inside the head tag. This title tag is mandatory and must be present in every HTML document. In addition to this, it appears as the title of the browser window. The length of such a header should not exceed 60 characters. The text of such a header should contain the most complete information that characterizes the content of the page.
If you wrote "Hello World" in the header, this is the information that should be displayed on the page and no other. You shouldn’t deceive people and search engines, they don’t like it, and thereby you make things worse for yourself. The information contained in this tag should be relevant to the content of your page.
After the mandatory title tag, there is an optional, but equally important meta tag. This tag is single. Using this tag, you set a description for the page (description) and its keywords (keywords).
In addition, the meta tag may contain data about the author of the page and other metadata properties. You can prevent the entire page from being indexed by search engines. Set the page to automatically refresh after 20 seconds or after 5 seconds, followed by transition to another page.
< meta name = "robots" content = "index, follow" > < meta http - equiv = "refresh" content = "20" > < meta http - equiv = "refresh" content = "5; url=http://сайт/" > |
There can be several such meta elements, since they can carry completely different information. Other users, when they open the page in the browser, do not see all your descriptions; all this remains hidden from view.
The style tag can also be used to set styles on the page. If you use many different css styles, then it is advisable to set them in a separate file. If you need to specify several of them, all this can be specified directly in the html document.
.base ( width: 100px; background-color: #000; height: 150px; color: #fff; )
< style type = "text/css" > Base( width: 100px; background - color : #000; height: 150px; color : #fff; |
Or add styles specifically to one tag; to do this, you need to add a style element inside the tag itself. This tag must be used inside a container that sets styles for the page. You can use several such tags, this will not be an error.
A bit similar to the previous tag, the link tag allows you to set styles for a document that are in another file. In other words, you can attach a complete css style sheet, which consists of many properties, to an existing document. Thus, you reduce the size of the document, which will ultimately load and open faster on a computer or mobile device with low Internet speeds.
You can connect more than one file, there are no restrictions. There is no need to close such a tag. If everything is done correctly, specific styles from a separate file will be loaded into your document. This tag can be added to the basics of html and not forget about its existence. The result is a picture like this:
< link href = "css/style-lg.css" rel = "stylesheet" > < link href = "css/style-md.css" rel = "stylesheet" > < link href = "css/style-sm.css" rel = "stylesheet" > |
Using the script tag, you can connect different scenarios (scripts) to a document. The presence of the closing tag is required. The script itself can be located at the beginning of the document, inside or at the end.
|
Tells the browser that anything placed between these tags should appear in your browser window. Here are the main tags that can be present in absolutely every document. The body tag serves as the main body of the page, which includes all of its content. It is advisable to open this tag and remember to close it at the end of the document.
Page headings h1 h2 h3Let's go further, we see a tag that opens and closes in the same way. This tag denotes the main title of the text; in most cases, under the H1 heading is the page title. In fact, there are only six data headings. . They are also used in SEO, but this is a slightly different topic. I will definitely highlight one article for this and give a detailed description for them, subscribe to blog updates so you don’t miss anything.
The presence of such headings in the article will play an important role in promoting the page. In addition, their use gives you a clear page structure, its title, subheadings, highlights, subparagraphs, and so on. Always use them and put them into practice. On many CMS, such as WordPress, when writing text, you can see “heading 1”, “heading 2”, “heading 3” and so on. They are the ones responsible for h1, h2 and h3.
If you write body text from a new paragraph, you write a tag
At the beginning and close it at the end
. Marking a paragraph in html is equivalent to creating a new paragraph in a MS Word document. I didn't add anything new to the document. But this is not all that should be present in an html document. Let's look at another example, the description will come a little later.HTML document
This text will be bold, and this one is also in italics
< ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >HTML document< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html > |
Every document contains a head and title element. The first one, which comes immediately after the first tag. This tag contains all the information about the page, it also contains the element. Title – information about the title of the page, in other words the title of the page, its name. It is in the title that you indicate the correct name of the page by which the user will search for you through a search engine, a very important point. Both elements must be open and also closed. Each element is closed with a “/” sign. The result is a picture like this.
Heading&Page Contents
| < / html > |
As you can see, there is nothing complicated. Here are the most basic tags that should be present in every html document. Do not forget to close each of them, otherwise the browser will not be able to perceive the full picture of the code. You need to know and remember this always. Then you start inserting text, pictures, videos, and so on. But this will already be in other articles.
Notepad++ editor
To work with the code, use the Notepad++ program. It is free, and it is not difficult to find it on the Internet. Very convenient for understanding any code; it also conveniently displays the opening and closing tags. We support the syntax of more than 40 programming languages. Just what you need to learn the basics of html.
Notepad is superior in every way to a regular notepad. For maximum convenience, simplicity and learning, this editor must initially be installed on your computer. The most important advantage and convenience is that the Notepad++ editor shows hints when writing code, which makes your work much faster and better quality.
DOCTYPE elementEach document must also contain the following doctype element. Why is it needed and what should be in it. Usually people are not very keen on these lines, they copy them into their documents and work calmly. These elements tell the browser what version of html is being used in the document, what the page description is, what encoding is being used, what keywords are included, who the author is, and what the page is called.
They are usually placed at the very beginning. There are several options and they all differ from each other, I will write one example that is used most often. This blank can be used as a ready-made template. Next there will be a clear description of each line, there should be no problems with this.
Briefly in clear language about the basics of html: This line tells the browser that this document is XHTML version 1.0, English is used and this whole mess is located at this address. Next, in the meta tag we indicate the encoding that is used. The most commonly used is Windows 1251.
Description - the topic of SEO is touched upon, one of the three main tags that must be present in absolutely every document; this tag indicates the description of the page. What is written on this page, a short description, no more than two sentences. The keywords tag also covers the topic of SEO, this tag is required. It contains keywords that Internet users will use to find you through search engines.
The title tag contains the name of the document itself, its title, which we see in the browser. Probably the most important tag in the entire document, which has the greatest impact on the promotion of the page. The article on adding and designing describes this tag in more detail.
What you need to remember from this lesson about the basics of html:
All main pages should always be named index. This is how it is accepted and everyone is used to it, no matter what the file extension is, it can be html or php. It is always called that way.
Watch a video about HTML basics from Webformyself.
Hypertext markup language, basic elements and structure. I will try to describe all this and much more on my blog. First of all, useful information will be written for beginners, a code example will be provided, and the opportunity to download the example itself along with the finished page will be provided.
From the author: Hello everyone. We all want to better understand website building in order to tackle interesting projects and bring our ideas to life. But what if you are a complete beginner? Our html textbook for dummies with practical lessons will help you finally make such an important breakthrough in website building from zero level to at least a basic understanding.
In learning website building, as in almost any other matter, practice is important. You can re-read the recipe for making borscht 1000 times, but that won’t prevent you from cooking it. You can learn the basic principles of driving a car, but until you get behind the wheel, it's all a mystery. There is undoubtedly some benefit from knowledge of theory, but not as great as from real skills.
So, if we are talking about learning html, then there is also theory, and then there is practice. The theory in this case is simply some kind of series of articles, lessons on the topic of language, basic tags and their application, etc.
Practice begins for you when you create an HTML file yourself, write the starting code there and begin to study with your own hands how it all works. I wrote a tag and saw how it works. I inserted a picture and checked it. Added some attributes, etc. It is practice that makes it possible to quickly understand and remember the main tags. Then you just write them automatically and you don’t need to remember for half an hour how to create a list.
Well, for rare tags you should always use a dictionary. Nobody, not a single super layout designer or web developer, I think, knows all the tags by heart. It's simply not necessary. If you use a tag once every 10 years, then why keep it in your head? I think this is clear.
But I would call this practice simply a kind of sandbox game. You just write different tags, try to figure everything out in as much detail as possible, but for what? There must be some purpose. Typically, html and css are studied in order to later create your own web pages and full-fledged websites.
So, the best practice is to take a ready-made website layout and layout it. Layout is precisely the process of creating web pages from a multi-layered drawing using html and css languages. Even during layout they can use frameworks, javascript and application libraries, but this is a topic for another conversation. All this is an addition. HTML is a basic technology that needs to be understood very well.
But I’ll make you happy - it’s basic, it’s the simplest. It's very easy to learn how certain tags work and how to apply them. There are no complex algorithms, functions, methods, classes in html, as is the case in programming languages. This is a markup language, just study it a little, and everything will be extremely clear.
How to learn a language correctly and where to get practice?Again, I'm talking about easy learning only if you go the right way. That is, watch smart video tutorials where the necessary things are explained step by step, from simple to complex. If you watch lessons that are not structured according to this format, then most likely you simply will not understand most of the material.
Fortunately, on our website all the lessons are structured and arranged from simple to complex. Therefore, if you study html using our lessons, you will not have any problems with mastering the material.
I can assure you that CSS is more interesting to learn! And in some ways it’s even easier. Firstly, CSS also has quite a few properties and rules that you must remember. Secondly, this language has a very simple syntax, so even a beginner will not have any problems writing code in it. Thirdly, since CSS is responsible for the appearance of the page, at first you will be delighted that you made the page turn red and gave that picture a frame.
In general, learning css is simple and interesting, so I recommend not to procrastinate and start immediately after you finish with the basics of html.
Your final practiceFinally, you have an exam. But don't worry, it won't be difficult. Moreover, you don’t have to do it yourself, but only according to the instructions that are in the lessons. This exam is a course. In it you will finally achieve the main intermediate goal - you will design your first website and gain an understanding of how to use html and css in real website building. Even if it’s a simple site, the knowledge you’ve gained will be enough to grow further and create more complex layouts.
Greetings to everyone who is still interested in these articles, and in general this blog as a whole :) It so happens that I have not written for a very long time. I won’t make excuses now; I’ll write a separate article for that a little later. And now, by popular demand, “CSS from scratch: the first lecture.” Let me first tell you what you will learn from this lecture: “what is CSS?”, “what is it for?”, “how to use it?”.
CSS is a styling language responsible for displaying elements, and not only in an HTML document (for example, CSS is used when defining the properties of elements in Qt). Remember the lectures? So, if you learn CSS at the proper level, you will completely lose the need to use additional attributes for elements. By the way, since you decide to learn CSS, it would be nice to know that this is an abbreviation, and it stands for Cascading Style Sheets. CSS is an integral part of block-based layout, which I mentioned in the last lecture on HTML from Scratch.
What is CSS for?CSS is used to give personality to the page, or, more generally speaking, to the site. CSS helps optimize the structure of the site, reduce the weight of pages, and will also make it easier to change the appearance of the site (I will give all the reasons and facts for this in the next lecture).
How to use CSS?There are strange queries at the top: “How to install CSS?” , "How to create CSS?" , relax, the CSS was created without us, and you don’t have to install anything :) Everything is simpler than it might seem. Let's take a simple HTML page:
Page with CSS * ( background:#333; color:#fff; ) Simple Text
Everything is simpler than it might seem, right? This is because CSS is integrated into all modern browsers. CSS is very simple and visual, which allows you to quickly get used to it and fall in love with it :)