In the comments to one of our articles, the reader asked for a selection of courses layout of web pages. A simple list of links to sites of real and virtual educational institutions would be useful for part of the blog's audience. And so that the publication interested all readers, it had to be expanded. This article will be helpful:
- Site owners and marketers. You will learn what HTML-layout is and what tasks it solves.
- Novice webmasters. You will understand in what cases you can do without a typesetter, and in which you can do his work yourself.
- All supporters of the principle "if you want to do well, do it yourself." You will learn what minimum knowledge in the field of web page layout is needed for each blogger, copywriter, marketer, site owner.
- Future professionals. You will learn how to become a typesetter.
- "The coder can you not be, but HTML must know"
- What you need to know the site administrator to do without the coder
- "The maker-up realizes ideas of the designer"
- Where to learn layout
- Online courses for beginners and advanced
- Useful themed sites
- Full-time courses on web layout
- Web layout books
- English speaking resources
- Anyone can become a layout designer.
What is an HTML layout and why is it needed?
Layout is the stage of website development where visual layouts are translated into code that provides the display of pages in browsers. Conventionally, this can be represented as follows: the layout designer translates the page from the visual language of the designer into the language of browsers.
Rolled-up page layout gets from a layout maker to a programmer who integrates it into a content management system. After that, the webmaster can fill and publish the page, and site visitors can view it.
Do you need layout services for owners of existing sites? The answer to the question depends on the needs of the webmaster.
If the blogger or the administrator of the corporate site is satisfied with the functionality and appearance of the resource and its individual pages, he doesn’t need a coder. The publication of notes in the blog, descriptions of products in the online store, the content on the pages of the site will cope with any employee with minimal knowledge of HTML. Moreover, you can post a note or description of the product, even if you have not heard anything about HTML.
In popular CMS, there are visual editors with which you can format content and make it readable. Pay attention to the capabilities of the regular WordPress WYSIWIG editor.
You can type the text directly in the CMS editor, format it, add photos. CMS functionality provides correct display of content with a few reservations.
Publishing content with a visual editor can still lead to problems. In this case, the capabilities of the regular visual editor of the engine do not allow displaying subtitles of the first and second order correctly. You can visually highlight text in bold or italics, but this does not make it a subtitle for the browser and search engines. For users, too, it is not obvious why the text is highlighted.
In theory, the problem can be solved without knowledge of HTML. It is enough to format the content correctly in a word processor and transfer it to the CMS visual editor.
The CMS Editor automatically converted the visual format of the content into HTML code. That is, it is enough for the site administrator to publish content to be able to work with a word processor and a WYSIWYG CMS editor.
But sometimes copying content from Word to CMS leads to errors. Pay attention to the page code.
In practice, at least minimal knowledge of HTML content manager is needed. This is confirmed by the illustration above: extra subtitle tags are in the code of the page. Such garbage is a frequent side effect when copying content from word processors, such as Word. Details further.
"The coder can you not be, but HTML must know"
An adapted excerpt from the work of Nekrasov refers to the owners, administrators and content managers of sites. Again, pay attention to the extra tags on the page when copying content from MS Word. In this case, they do not directly affect the user experience: visitors to the page do not see them.
Trash code that hits a page when copying content from text editors can cause problems. For example, if there is content inside the extra tags, it will be displayed to users incorrectly. Such an error will violate the structure of the page and make it poor quality.
Unnecessary tags make the page code invalid. The validity of the code is not included in the number of factors ranking the sites of the largest search engines. However, invalid page code can send search robots on the wrong path and distort the page scan results.
A simple example: subheadings help search engines structure text into meaningful blocks. If the subtitle says "How to create a robots.txt file", the search engine understands that the relevant section of the page will deal with the robots.txt file.
What happens if the subtitle is not labeled with valid html tags? Yandex and Google will find it harder to determine what the relevant section of the page is about. Robots may find the page irrelevant to requests for a robots.txt file. As a result, the site will receive fewer visitors.See also: How to use a robots.txt file
Now it’s clear why a blogger, a journalist or a shoemaker and part-time administrator of the shoemaker’s site won’t hurt at least know the basic HTML tags? For example, this knowledge can help remove the garbage from the page.
Most WYSIWIG editors in CMS have two modes: visual and HTML. To find and remove unnecessary tags from the page code, it is enough to switch the regular WordPress editor to the "Text" mode.
Knowledge of HTML at a basic level prevents extra code from appearing on a page during the transfer of content from a word processor to the engine editor. To solve this problem, clean the content created in Word from formatting. To do this, use the "Delete formatting" function in a text editor or copy the content and paste it into Notepad. Then paste the formatted content into the CMS editor in HTML format.
Tag content using HTML tags and publish.
Clearing content from formatting and adding HTML tags manually prevented the appearance of a garbage code on the page and ensured that the publication was correctly displayed to users.
What you need to know the site administrator to do without the coder
Pay attention to two points. First, we are talking about the websites of small companies and personal blogs whose owners do not want or can not cooperate with a professional coder. True bootstrappers publish content on their own. And they need basic knowledge about HTML markup in order to turn a brick of text with a picture sticking out of it into readable material.Bootstrapping is an approach to doing business that involves financing an enterprise from an entrepreneur’s own resources. Bootstrappers do not use the services of hired employees until the business reaches the planned targets.
Secondly, knowledge of the basics of HTML does not turn a blogger or shoemaker and part-time administrator of the site of a shoemaker's workshop into a coder. To professionally perform the layout, you need to learn and practice.
The administrator of the car wash site will not blush to readers for content that is inconvenient for perception if he has the following knowledge:
- Overview of web pages and browsers. How Internet browsers display site pages for users. What is the structure of the HTML-document, which tasks solve hyperlinks.
- A general idea of HTML. Why you need a hypertext markup language, where and how it is used.
- What is HTML tags. How tags are designated.
- Key tags. To correctly mark a simple page on a website or blog, in most cases it is enough to know the tags of headings, paragraphs, images, links. To correctly use the tags of images and links, you will have to remember their main attributes.
- A little more advanced knowledge will help with the help of tags to identify important semantic blocks or visually separate arbitrary phrases from the surrounding text, draw a bulleted or numbered list, quotation.
In order to use tags correctly, the webmaster must understand their meaning. For example, a specialist must know the difference between second and third order headers or visually identical i and em tags.
The study of basic information will help mark up and publish content. If the basics of HTML come easy, and the interest in web-layout does not disappear, you can really start learning and become a professional layout maker.
Is it difficult to learn layout? Where is taught on the typesetter? What does this specialist do in practice? Alexey Pechenkin, head of the layout department of TexTerra, told about this and not only to the readers.
"The maker-up realizes ideas of the designer"
Alexey shared information about the typesetting profession, despite the extreme workload. He immediately explained what had to be distracted for the sake of a mini-interview for a blog.
Dmitry Dementiy: Tell us in a few words about the typesetting profession: what do you and the staff of your department do, how is the work process organized? A coder - who is this: a programmer, a technical specialist, a designer? The British and Americans call typographic layout designers. Can an HTML coder be called an artist?
Alexey Pechenkin: For the most part, our job is to add content to the site. The tasks we have to work with are, in most cases, similar. This is a layout of articles, sections and infographics for publication on sites. Often it is necessary to solve more complex problems. For example, landing page layout requires a lot of effort from a specialist. A coder cannot be called a programmer or designer. This is an independent profession.
DD: What tasks solves HTML layout from the point of view of the site owner? How can the coder to help the owner of an online store?
A.P .: Simply put, layout - the embodiment of the ideas of the designer. At the development stage, the designer draws the general structure, the appearance of the site, and after the layout designer all of this implements. This is done with the help of HTML and other markup languages that can "understand" and convert the browser into our usual web pages.
Layout of new elements of pages, sections, blocks - all this is also done by layout designers. With the help of a web layout, the specialist creates a static page to which, if necessary, the front-end programmer can add interactive elements.
DD: Most popular CMS has visual editors of publications. Does this mean that website owners on WordPress, Drupal or Bitrix do not need the services of a layout designer?
A.P .: No, it is not. The visual editor makes life easier for the average user: the editor, the blogger. With the help of the editor, a person without any typesetting knowledge can add material to his blog, website, or page.
These editors really save non-specialists from having to do the extra work for them: mark up the content. But the functionality of the editors is very limited. Because of this, an editor without HTML knowledge cannot always design a page in accordance with user needs and W3C standards.
A simple example: the regular editor of the most popular WordPress engine allows you to select a text passage in bold or italic. In the page code, you can see that the selection is performed using the strong and em tags, respectively. In some cases, this markup is preferably done with the help of b and i tags. The visual editor WP does not have such tools, so you have to add tags manually. And this requires relevant knowledge.
When creating articles, news and other materials on the sites, we do not use visual editors. They limit the possibilities, and we often have to arrange the material in our own way, with our own styles.
DD: Do you think you need minimum knowledge of HTML layout for marketers, copywriters, bloggers? Can a journalist or copywriter independently create their own material and publish it on the site? Or should every specialist do his own business?
A.P .: Everyone can benefit from minimal knowledge in this area. Yes, a copywriter with minimal knowledge in the layout will be able to impose his material without any problems. This requires only basic knowledge of tags in html. But to somehow make the material outside the box, you will need other skills that content managers or layout designers possess.
DD: As a site owner, who does not have the relevant knowledge, can check the quality of the make-up artist? What you need to do to do this: check the display of pages in different browsers, check the URL or code in the W3C validator, view error data in the offices for webmasters? How can a person, far from an HTML layout, understand that everything is done professionally?
A.P .: Yes, first of all, you can view pages on different resolutions and devices, as well as scan the page in the validator. With a bad layout, all the gross flaws that the layout designer left will be immediately noticeable. As for the code itself, then a person without knowledge will not determine the quality.You can check the page display on screens with different resolutions using the Screenfly service. You can check the page in different browsers using Browsershot.
DD: Readers are interested in the possibility of learning HTML-layout. Is it possible for everyone to become a good specialist in this field? What qualities do a good coder need?
A.P .: Yes, I think anyone can learn this. The main thing is to have desire and patience. If something does not work right away, then you just need to practice more. It all depends on you.
DD: Where do they teach layout? These are full-time educational institutions, online courses? Is it possible to learn independently with the help of textbooks and manuals?
A.P .: There are so many online courses, as well as various channels on YouTube, where people share experiences, publish lessons and a lot of useful information on this topic. Also there are many books on layout. However, with books it is more difficult: it will be difficult to find really good.
To gain knowledge and learn to impose is not difficult. The main thing is to be more interested in topics and practice with the knowledge gained.
DD: What kind of knowledge does a good coder need?
DD: Thanks for the information.
A.P .: You are welcome. Readers success in learning.See also: Which CMS to choose: a guide for choosing a "engine" for the site
Where to learn layout
The following selection of training resources will help you get a general idea of HTML-layout or become a professional coder. For training, you only need the desire and a PC with Internet access. Also knowledge of the English language is useful to you, as there are English-language resources in the collection.
The following resources will help you learn web design:
Online courses for beginners and advanced
- Free course "Fundamentals of HTML and CSS" from the "Netology". Five hour classes will introduce you to the basics of HTML and CSS. The course will be useful not only for future web designers, but also for all professionals working in the field of Internet marketing.
- Free video course on HTML and CSS from WebForMyself.com will suit users with any level of training. It can be considered as the first stage of training for future web designers or a tool for professional development for bloggers, journalists or site administrators.
- Online course "Basic HTML and CSS" from Html-academy.
- Semi-annual course "Professional layout of sites by modern standards" from Geekbrains will allow you to remotely learn the profession of typesetter.
- If the layout you are interested in, you can continue your education on the course of "Netology" "HTML-layout: from scratch to the first layout." After receiving a diploma, you can safely call yourself a novice typesetter.
Useful themed sites
- Site htmlbook.ru. This information hub will be useful both for future and beginner web designers, and for experienced professionals. This resource for web designers is the same as Surch for SEOs and Texterra's blog for Internet marketers. Pay attention to the forum.
- In the blog layout designer Julia Panina, you will find universal wisdom about the layout, search, work with popular CMS. Unfortunately, the magazine is not updated very often. But there are so many materials published on the topic, which is enough for a whole book.
- Mastered the basic information? Then develop and look for the helpful information on "Habré". Where do without this resource, if you decide to become a techie?
- Css-live.ru. This resource will be useful for designers, web designers and web programmers.
- Справочный хаб для верстальщиков от студии Артемия Лебедева.
- Консорциум всемирной паутины. Эта организация занимается разработкой и валидацией интернет-стандартов. Будущим и состоявшимся верстальщикам будет полезен валидатор разметки.
Очные курсы по веб-верстке
- Если вы хотите обучаться очно, запишитесь на месячный курс "Верстка для начинающих" от CubeComp Development. Classes are held in Moscow.
- Another full-time free course for beginning layout designers is offered by the Specialist Training Center at the Moscow State Technical University. N.E. Bauman.
Find full-time courses layout in your city, you can using search engines.
Web layout books
- "Learning HTML 5," B. Lawson, R. Sharp. You can purchase this book in electronic or paper format.
- "CSS. Cascading Style Sheets. Detailed Guide", E. Meyer. This book is considered a classic with which every coder should become familiar.
- "HTML and CSS. The path to perfection", B.Henik. Another textbook, mandatory for beginners.
- "Web-design by standards", D. Zeldman. The book is intended for professionals who have a basic knowledge of HTML and CSS. It was published more than 10 years ago, but remains relevant.
English speaking resources
Knowledge of English is considered almost mandatory for the maker-up. One of the arguments - the most modern and relevant books and articles appear first in English, and then they are translated into Russian. If you calmly communicate in a foreign language, the resources listed below will be useful to you.
- W3School.com. This resource can be used as a reference to the layout. It can be called the English analogue of htmlbook.ru. Foreign experts do not recommend using the site for training layout, although it has lessons on HTML and CSS.
- Learn to code HTML and CSS. This is a complete online tutorial that will help you master the basics of typesetting.
- Guide for web layout for beginners. In this huge guide article from Ian Lloyd, almost all issues related to the training of the typesetter profession are addressed. You will learn which software is better to use, how to mark up pages, how to work with style sheets and much more.
- Activejump - site-trainer for HTML and CSS. This is not just an online tutorial, but an online course in which you can independently acquire knowledge and form skills in the field of typesetting.
- In the Channel 9 video blog you will find 21 HTML and CSS video tutorials from Microsoft developers. The course is designed for beginners who want to become professionals.
- HTML5 Tutorial. Another site-tutorial on the layout for beginners.
- Intro to HTML and CSS by Khan Academy. Another free online tutorial for beginning web designers.
You can select one or more resources to remotely or internally to learn the layout.
Anyone can become a layout designer.
The final subtitle of the article can be formulated in the following way: everyone must become a layout designer. Basic knowledge of HTML and CSS will be useful to all professionals working in Internet marketing. A blogger, journalist, copywriter, marketer, site owner should be able to independently mark up and publish content. Of course, we are talking about the standard markup and styles.