- Изучение HTML: руководства и уроки
- Путь обучения (образовательная траектория)
- Модули
- Решение общих HTML задач
- Смотрите также
- Found a content problem with this page?
- HTML Basic Examples
- HTML Documents
- Example
- My First Heading
- The Declaration
- HTML Headings
- Example
- This is heading 1
- This is heading 2
- This is heading 3
- HTML Paragraphs
- Example
- HTML Links
- Example
- HTML Images
- Example
- How to View HTML Source
- View HTML Source Code:
- Inspect an HTML Element:
- HTML Introduction
- What is HTML?
- A Simple HTML Document
- Example
- My First Heading
- Example Explained
- What is an HTML Element?
- Web Browsers
- HTML Page Structure
- This is a heading
- HTML History
- Learn HTML
- Welcome to Learn HTML! #
- Overview
- Overview of HTML
- Document structure
- Metadata
- Semantic HTML
- Headings and sections
- Attributes
- Text basics
- Links
- Lists
- Navigation
- Tables
- Forms
- Images
- Audio and Video
- Template, slot, and shadow
- HTML APIs
- Focus
- Other inline text elements
- Details and summary
- Dialog
- Conclusion and next steps
- Next and previous lessons
Изучение HTML: руководства и уроки
Чтобы создавать веб-сайты, вы должны знать о HTML — фундаментальной технологии, которая используется для определения структуры веб-страницы. HTML применяется для того, чтобы определить как должен отображаться ваш контент: в виде абзаца, списка, заголовка, ссылки, изображения, мультимедийного проигрывателя, формы или же в виде одного из множества других доступных элементов, а также возможного нового элемента, который вы сами создадите.
Путь обучения (образовательная траектория)
В идеале вы должны начать своё учебное путешествие с изучения HTML. Начните с прочтения раздела «Введение в HTML». Затем вы можете перейти к изучению более продвинутых тем, таких как:
- «CSS (Каскадные таблицы стилей)», и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов).
- «JavaScript», и как его использовать для придания динамической функциональности веб-страницам (например, определение вашего местоположения и отображение его на карте, создание элементов, которые будут появляться/исчезать при нажатии на кнопку, сохранение данных пользователей локально на их компьютерах и многое другое).
Прежде чем приступить к этой теме, вы должны иметь хотя бы базовое представление об использовании компьютеров вообще и уметь «пассивно» использовать Интернет (т.е. уметь просматривать веб-страницы, быть потребителем контента). У вас должна быть базовая рабочая среда, описанная в разделе «Установка базового программного обеспечения», а также вы должны понимать, как создавать файлы и управлять ими, что подробно описано в разделе «Работа с файлами» — обе статьи являются частью нашего модуля для новичков — «Начало работы с вебом».
Перед тем, как начать эту тему, рекомендуется пройтись по разделу «Начало работы с вебом», однако это необязательно; многое из того, что описано в статье «Основы HTML», также рассматривается и во «Введении в HTML», причём даже более подробно.
Модули
Данный раздел содержит модули, которые расположены в порядке, наиболее оптимальном для их изучения. Вам определённо следует начать с первого модуля.
Этот модуль даёт основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы.
В этом модуле рассматривается использование HTML для подключения мультимедиа-контента к вашим веб-страницам, включая различные способы встраивания изображений, видео и аудио и даже других веб-страниц.
Представление табличных данных на веб-странице в понятном, доступном образе, может стать проблемой. Этот модуль описывает основы табличной разметки, а также более сложные функции, такие как реализация подписок и резюме.
Формы — очень важная часть интернета, они обеспечивают большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнёте с создания частей форм на стороне клиента.
Решение общих HTML задач
Использование HTML для решения общих задач содержит ссылки на разделы контента, объясняющего, как использовать HTML для решения очень распространённых проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение содержимого, создание базовой формы и т.д.
Смотрите также
Отправная точка HTML документации на MDN, там вы сможете найти как подробное описание основных элементов и их атрибутов, так и более продвинутые уроки по языку, это отличное место для старта.
Found a content problem with this page?
This page was last modified on 26 июл. 2023 г. by MDN contributors.
Your blueprint for a better internet.
HTML Basic Examples
In this chapter we will show some basic HTML examples.
Don’t worry if we use tags you have not learned about yet.
HTML Documents
All HTML documents must start with a document type declaration: .
The HTML document itself begins with and ends with .
The visible part of the HTML document is between
and .Example
My First Heading
My first paragraph.
The Declaration
The declaration represents the document type, and helps browsers to display web pages correctly.
It must only appear once, at the top of the page (before any HTML tags).
The declaration is not case sensitive.
The declaration for HTML5 is:
HTML Headings
HTML headings are defined with the to tags.
defines the most important heading. defines the least important heading:
Example
This is heading 1
This is heading 2
This is heading 3
HTML Paragraphs
HTML paragraphs are defined with the
tag:
Example
This is a paragraph.
This is another paragraph.
HTML Links
HTML links are defined with the tag:
Example
The link’s destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the tag.
The source file ( src ), alternative text ( alt ), width , and height are provided as attributes:
Example
How to View HTML Source
Have you ever seen a Web page and wondered «Hey! How did they do that?»
View HTML Source Code:
Right-click in an HTML page and select «View Page Source» (in Chrome) or «View Source» (in Edge), or similar in other browsers. This will open a window containing the HTML source code of the page.
Inspect an HTML Element:
Right-click on an element (or a blank area), and choose «Inspect» or «Inspect Element» to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.
HTML Introduction
HTML is the standard markup language for creating Web pages.
What is HTML?
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as «this is a heading», «this is a paragraph», «this is a link», etc.
A Simple HTML Document
Example
My First Heading
My first paragraph.
Example Explained
- The declaration defines that this document is an HTML5 document
- The element is the root element of an HTML page
- The element contains meta information about the HTML page
- The element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
- The element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
- The element defines a large heading
- The
element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
The HTML element is everything from the start tag to the end tag:
Note: Some HTML elements have no content (like the
element). These elements are called empty elements. Empty elements do not have an end tag!
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document:
HTML Page Structure
Below is a visualization of an HTML page structure:
This is a heading
This is another paragraph.
Note: The content inside the section will be displayed in a browser. The content inside the element will be shown in the browser’s title bar or in the page’s tab.
HTML History
Since the early days of the World Wide Web, there have been many versions of HTML:
Year | Version |
---|---|
1989 | Tim Berners-Lee invented www |
1991 | Tim Berners-Lee invented HTML |
1993 | Dave Raggett drafted HTML+ |
1995 | HTML Working Group defined HTML 2.0 |
1997 | W3C Recommendation: HTML 3.2 |
1999 | W3C Recommendation: HTML 4.01 |
2000 | W3C Recommendation: XHTML 1.0 |
2008 | WHATWG HTML5 First Public Draft |
2012 | WHATWG HTML5 Living Standard |
2014 | W3C Recommendation: HTML5 |
2016 | W3C Candidate Recommendation: HTML 5.1 |
2017 | W3C Recommendation: HTML5.1 2nd Edition |
2017 | W3C Recommendation: HTML5.2 |
This tutorial follows the latest HTML5 standard.
Learn HTML
This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML.
Welcome to Learn HTML! #
Welcome to HTML! HyperText Markup Language, or HTML, is the backbone of the web, providing the content, as well as the structure of that content, that you see displayed in your web browser.
Unless you’re reading a PDF or a printed version of this page, this content is made up of various HTML elements and text. HTML is the content layer of the web. HTML elements are the nodes that make up the Document Object Model.
Cascading Style Sheets provide the look and feel, or presentation layer of the page. JavaScript is the behavior layer, often used to manipulate the objects within a document. Sites that are built with JavaScript frameworks are really just manipulating HTML. In turn, it’s important to mark up your HTML in a way that scripts can easily parse and that assistive technologies can easily understand. This means writing HTML code with modern standards.
Overview
This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML. If you’re completely new to HTML, you will learn how to build structurally sound content. If you’ve been building websites for years, this course may fill in gaps in knowledge that you didn’t even know you had.
Along this journey, we will be building the structure for MachineLearningWorkshop.com. No machines were harmed in the creation of this series.
This is not a complete reference. Each section introduces the section topic with brief explanations and examples, providing you an opportunity to explore further. There will be links to topic references, such as MDN and WHATWG specifications, and other web.dev articles. While this is not an accessibility course, each section will include accessibility best practices and specific issues, with links to deeper dives on the topic. Each section will have a short assessment to help people confirm their understanding.
Overview of HTML
A brief introduction to the key concepts in HTML.
Document structure
Learn how to structure your HTML documents with a solid foundation.
Metadata
How to use meta tags to provide information about your documents.
Semantic HTML
Using the correct HTML elements to describe your document content.
Headings and sections
How to correctly use sectioning elements to give meaning to your content.
Attributes
Learn about the different global attributes along with attributes specific to particular HTML elements.
Text basics
How to format text using HTML.
Links
Everything you need to know about links.
Lists
Lists and other ways of grouping your content.
Navigation
Navigation is a key element of any site of application, and it starts with HTML.
Tables
Understanding how to use tables to mark up tabular data.
Forms
An overview of forms in HTML.
Images
An overview of images in HTML.
Audio and Video
Discover how to work with HTML media such as audio and video.
Template, slot, and shadow
An explanation of template, slot, and shadow.
HTML APIs
Learn how HTML information can be exposed and manipulated using JavaScript.
Focus
How to manage focus order in your HTML documents.
Other inline text elements
An introduction to the range of elements used to mark-up text.
Details and summary
Discover how the very useful details and summary elements work, and where to use them.
Dialog
The <dialog> element is a useful element for representing any kind of dialog in HTML, find out how it works.
Conclusion and next steps
Wrapping up with some further resources.
So, are you ready to learn HTML? Let’s get started.
This course was written by Estelle Weyl, with input and review from Rachel Andrew, and Jhey Tompkins.
Next and previous lessons
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.