book51.ru

Инструменты пользователя

Инструменты сайта

  • Показать страницу
  • История страницы
  • Ссылки сюда
  • Оставить на чай
  • Экспорт в PDF
  • Наверх
    • Вы посетили:
    software:development:ps_pycharm:html5:lesson:lesson.html_1

    Различия

    Показаны различия между двумя версиями страницы.

    Ссылка на это сравнение

    Предыдущая версия справа и слеваПредыдущая версия
    Следующая версия    		Предыдущая версия
    software:development:ps_pycharm:html5:lesson:lesson.html_1 [2023/08/20 19:28] – [Что такое HTML на самом деле?] vladpolskiysoftware:development:ps_pycharm:html5:lesson:lesson.html_1 [2023/08/20 20:05] (текущий) – vladpolskiy
    Строка 10: Строка 10:
     <p>Моя кошка очень раздражена</p> <p>Моя кошка очень раздражена</p>
     </code> </code>
     +
     ===== Анатомия HTML элемента ===== ===== Анатомия HTML элемента =====
     Давайте рассмотрим элемент абзаца более подробно. Давайте рассмотрим элемент абзаца более подробно.
     {{:software:development:ps_pycharm:html5:lesson:grumpy-cat-small.png?|grumpy-cat-small}} {{:software:development:ps_pycharm:html5:lesson:grumpy-cat-small.png?|grumpy-cat-small}}
      
     +  - **Открывающий тег (Opening tag)**: Состоит из имени элемента (в данном случае, **<p>**), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
     +  - **Закрывающий тег (Closing tag)**: Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
     +  - **Контент (Content)**: Это контент элемента, который в данном случае является просто текстом.
     +  - **Элемент(Element)**: Открывающий тег, закрывающий тег и контент вместе составляют элемент.
      
    -===== Понятие языка разметки HTML ===== +Элементы также могут иметь атрибуты, которые выглядят так:
    -**HTML (HyperText Markup Language)** – это не язык программирования (как, например, Python), а так называемый язык разметки. Он необходим для сообщения браузеру способа отображения посещаемой вами веб-страницы. Вместо того, чтобы показывать сплошной текст, **HTML** позволяет обернуть его в специальные элементы **(теги)**. Это обеспечивает особое поведение передаваемой информации: она может выделяться курсивом, жирным текстом, транслироваться в виде таблиц, списков, рисунков и иных мультимедиа-данных. +
    -\\   +
    -Теги способны нести как **структурный смысл** (например, показать, что перед нами таблица некоторой размерности с заголовком), так и **семантический** (выделить информацию определенным образом для поисковых роботов, чтобы те лучше индексировали ваш сайт, или браузеров). +
    - +
    -<WRAP center round info 100%> +
    -Полезно знать +
    -HTML разработал британец Тим Бернес-Ли в конце 1980-х годов, а как официальный стандарт HTML функционирует с 1993 года. Им же опубликован первый в мире сайт – http://info.cern.ch/hypertext/WWW/TheProject.html - работающий по сей день. На нем содержится информация о технологии World Wide Web, базирующейся на протоколе HTTP, адресации URI, разметке HTML. +
    - +
    -Сегодня Тим Бернес-Ли возглавляет W3-Консорциум (World Wide Web Consortium), основная задача которого: разработка и внедрение стандартов Интернета с учетом современных потребностей. +
    -</WRAP> +
    -Изначально HTML был кроссплатформенным, что создавало определенные трудности. Разные браузеры отображали теги по-своему, некоторые элементы могли восприниматься не всеми программами. Причина: отсутствие единого стандарта, поддерживаемого разработчиками. Особую проблему доставлял Internet Explorer (Microsoft долгое время следовала своим наработкам в понимании HTML), что требовало от сайтостроителей учета разных видов браузеров, чтобы содержимое страниц выглядело более-менее одинаковым у пользователей. +
    -\\   +
    -В последние годы данная проблема фактически решена, так как крупные игроки на рынке браузеров пришли к соглашению. На просторах Интернета еще можно встретить сайты, учитывающие старые браузеры, но это уже не обязательное требование к верстальщикам. Чаще всего вас просто попросят обновить свой браузер, чтобы вы смогли увидеть сайт в задуманном виде (для эксперимента попробуйте зайти в любую социальную сеть с очень старого браузера). +
    - +
    - +
    - +
    -==== Ключевые особенности стандарта XHTML: ==== +
    -  * все элементы пишутся строго в нижнем регистре; +
    -  * закрываются даже одиночные теги (например, **<img />**); +
    -  * основная кодировка – **UTF-8**; +
    -  * все атрибуты записываются только в развернутом виде (например, если в **HTML5** отключить возможность выбора элемента из выпадающего списка можно указанием простого атрибута **disabled**, то в **XHTML** обязательно писать **disabled="disabled"**). +
    - +
    -Верстать код сайта на основании стандарта **XHTML** не обязательно, так как **HTML5** и современные браузеры не столь требовательны, но он может встретиться (и этого не нужно пугаться). +
    - +
    -==== Охарактеризуем специфику HTML5: ==== +
    -  * добавлены семантические элементы (**<nav>, <section>, <article> и др.**), которые облегчают чтение структуры страницы как разработчикам, так и поисковым машинам; +
    -  * внедрена поддержка векторной графики и специальных форматов **(svg, canvas, MathML)**; +
    -  * представлены новые элементы управления **(dates, email, tel)**; +
    -  * удалены устаревшие теги **(big, center, isindex)**. +
    - +
    -<WRAP center round info 100%> +
    -**Итог** +
    -\\   +
    -Таким образом, базис современной разработки – стандарт HTML5. +
    -</WRAP> +
    - +
    - +
    - +
    -===== Консорциум Всемирной сети ===== +
    - +
    -Количество сайтов в сети настолько велико, что уже не хватает заложенного объема **IPv4-адресов** для их идентификации. С каждым годом число растет, что логично приводит к необходимости стандартизации их написания и отображения конечным пользователям. +
    - +
    -Некоммерческая организация **W3-Консорциум (www.w3.org)** разрабатывает единые принципы и рекомендации для производителей Интернет-контента, чтобы обеспечить максимальную совместимость между продуктами, платформами, программами. Это позволяет делать Всемирную сеть максимально удобной и универсальной. +
    - +
    -{{:software:development:ps_pycharm:html5:lesson:1_1.png?|W3-Консорциум}} +
    -\\   +
    - +
    -Помимо непосредственно стандартов **HTML** компания занимается утверждением и других **связанных положений**: +
    -  - CSS (каскадные таблицы стилей), +
    -  - DOM (объектная модель документа), +
    -  - PNG (формат хранения растровых изображений), +
    -  - HTTP (протокол передачи данных), +
    -  - RDF (модель представления метаданных), +
    -  - XPath (язык для доступа к частям XML-документов) и др +
    - +
    -Важно и то, что вы всегда можете проверить соответствие вашего кода стандарту при помощи **валидаторов**. В сети их огромное множество и для разных целей: **HTML, CSS, JavaScript**. Сервисы позволяют валидировать свой или чужой код. Для этого требуется ввести в поисковике требуемый (например, **HTML5** валидатор), вставить туда код и произвести проверку. Все нарушения будут подсвечены соответствующим цветом и подсказками. Ими пользуются все разработчики для верификации качества работы программистов. Все современные **IDE** дают возможность валидировать код (в большинстве случаев для этого потребуется установка плагина). +
    - +
    -===== HTML теги. Структура тега ===== +
    - +
    -<WRAP center round tip 100%> +
    -**Тег** – отдельный HTML элемент, позволяющий вкладывать или оборачивать части документа для определенного отображения или поведения. +
    -</WRAP> +
    - +
    -Говоря проще, при помощи тегов вы можете выделять текст, вставлять рисунки и видео, передавать служебную информацию, обозначать ссылки. +
    - +
    -Теги могут дополняться атрибутами, свойствами. С их помощью можно модифицировать содержимое элемента, уникализировать его. +
    - +
    -На текущий момент насчитывается около **120 тегов**, а если убрать устаревшие, то и того меньше. Их не так сложно запомнить, да и наиболее часто используемых несколько десятков. +
    - +
    -Рассмотрим **типичную структуру web-элемента**: +
    - +
    -  - **Открывающий тег** (все теги представляются в угловых скобках, в открывающем, если требуется, перечисляются атрибуты); +
    -  - **Закрывающий тег** (присутствует не во всех тегах, идентифицируется косой чертой); +
    -  - **Атрибут**, свойство (название свойства и его значение предпочтительно в двойных кавычках, возможно использовать и одинарные); +
    -  - **Содержимое** (внутреннее содержимое тега, обычно в виде текста либо других вложенных тегов). +
    - +
    -\\   +
    -{{ :software:development:ps_pycharm:html5:lesson:2_2.2.svg |Структура web-элемента}} +
    -Подобным образом выглядит любой элемент web-страницы. При наличии нескольких атрибутов они разделяются пробелом. Теги не всегда могут иметь свойства или содержимое. +
    - +
    -Первичное знакомство с разнообразием html-элементов можно осуществить на любом сайте. Если вы находитесь в браузере Chrome, то прямо сейчас можно нажать сочетание клавиш **CTRL + U** (откроются **Инструменты разработчика**) и просмотреть код данной страницы . Фактически, весь этот набор тегов и свойств в сочетании с **JavaScript** обрабатывается браузером, чтобы вы смогли удобно пользоваться текущим сайтом. +
    - +
    -Сайт представляет собой совокупность таких страниц, связанных между собой внутренними и внешними гиперссылками. +
    - +
    -Далее поговорим о **классификации тегов и атрибутов**. Более детальное их описание и примеры будут представлены в следующем уроке. +
    - +
    -===== HTML теги. Парные и одиночные теги ===== +
    -Как мы уже поняли выше, теги бывают парными или одиночными. +
    -==== Одиночные тэги ==== +
    -Одиночных элементов насчитывается **16 штук**. Наиболее часто используемые: +
    - +
    -  - **<!doctype>** Некая инструкция браузерам для определения того, к какому типу относится документ, какую версию **HTML** использовать. +
    -  - **<meta>** Необходим для задания дополнительной информации о странице, указывается в заголовке **HTML-документа**. Как и вышеупомянутый тег, не влияет на внешний вид страницы, так как носит служебный характер. +
    -  - <hr> Задает горизонтальную линию для визуального отделения элементов страницы, применяется для отделения заголовка от основного текста, выделения логических блоков. По умолчанию представляет собой серую линию толщиной в 1 пиксель. +
    -  - **<br>** Перенос нижеидущего содержимого на новую строку. Может потребоваться для избегания длинных полотен текста. Небольшие куски информации воспринимаются лучше, чем огромный абзац. +
    -  - **<img>** Чтобы вставить на страницу графический элемент. Рисунки можно демонстрировать в одном из следующих форматов: **jpg, png, gif**. Само изображение в документ не вставляется непосредственно, указывается ссылка на него (локальная или из другого источника), а уже браузер загружает картинку и демонстрирует пользователю. +
    -  - **<input>** Применяется в формах и задает тип полей (могут быть текстовыми, числовыми, позволяют выбирать дату, файл, отмечать те или иные элементы списка и т.п.). +
    - +
    -{{ :software:development:ps_pycharm:html5:lesson:2_2.4.svg |}} +
    - +
    -==== Парные тэги ==== +
    -Парные теги обязательно имеют **закрывающий тег** и содержимое (пусть даже и пустое). В **HTML** их больше всего (около **100**). В качестве примера приведем некоторые: +
    - +
    -  - **<p>Текст</p>** Представляет заключенный внутри текст в виде отдельного абзаца. По умолчанию он имеет отступ и отделяется от предыдущего и последующего элементов дополнительным разрывом (это поведение можно поменять). +
    -  - **<a href="#">Текст ссылки</a>** Используется для задания и представления в документе ссылки (она может вести на другую страницу сайта, определенный участок на самой странице или любой адрес в Интернете). +
    -  - **<small>Текст</small>** Делает текст меньшего масштаба по сравнению с основным. +
    -  - **<mark>Текст</mark>** Выделяет текст по подобию маркера (аналог того, как на листах бумаги подчеркивают самое важное фломастером) желтым цветом. +
    - +
    -<WRAP center round info 100%> +
    -С помощью CSS имеется возможность менять поведение практически всех тегов. +
    -</WRAP> +
    - +
    - +
    -===== HTML теги. Блочные и строчные теги ===== +
    - +
    -Поведение любого тега сегодня (в стандарте **HTML5**) легко изменить по своему усмотрению. Деление элементов на блочные и строчные сложилось исторически (именно поэтому они изначально относятся к одному из этих типов). Сейчас таких типов больше, но их определение связано с каскадными таблицами стилей, о которых пойдет детальная речь в одном из последующих уроков. +
    - +
    -**Блочные теги** занимают всю ширину страницы или родительского элемента. Если вы зададите два таких тега подряд, то каждый из них будет начинаться как бы с новой строки, абзаца.+
      
    -**Строчные теги** не имеют строго размера. Он зависит от того, сколько символов в них содержится. Несколько подряд идущих строчных элементов не будут разделяться новыми строками, а будут выстраиваться друг за другом.+{{:software:development:ps_pycharm:html5:lesson:anatomy_of_an_html_element.png?|anatomy_of_an_html_element.png}}
      
    -<WRAP center round info 100%> +Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, **class - имя атрибута**, а **nase - значение атрибута**. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
    -В **CSS-свойствах** отображение тегов можно менять по следующим типам:+
      
    -  - **Блочные (display: block)** – получает свойство блочности, занимает всю ширину страницы; +Атрибут всегда должен иметь:
    -  - **Строчные (display: inline)** – тег становится строчным; +
    -  - **Флекс (display: flex)** – элемент приобретает свойство особого типа блоков – флекс (ведет себя как блок, но внутреннее содержимое гибко настраивается); +
    -  - **Грид (display: grid)** – еще один блочный тип с особенностями внутреннего поведения элементов (строятся на основании «сетки», состоящей из строк и колонок); +
    -  - **Таблица (display: table)** – тег и его содержимое будут наследовать свойства таблиц; +
    -  - **Строчный блок (display: inline-block)** – блочный элемент ведет себя как строка, но сохраняет часть свойств (можно задать размер, границы). +
    -  - **Спрятанный (display: none)** – делает элемент невидимым и полностью удаляет его отображение со страницы.+
      
    -Существуют и другие свойства отображения, многие из которых узконаправлены и зачастую экспериментальны. +  - Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов). 
    -</WRAP>+  - Имя атрибута, за которым следует знак равенства. 
     +  - Значение атрибута, заключённое с двух сторон в кавычки.
      
    -**1. Блочный тэг <div>** +===== Вложенные элементы ===== 
    -Самый популярный блочный тег времен HTML 4. Основная его задача – отобразить содержимое как блок. Он и сегодня входит в список часто используемых. Достаточно открыть код любой страницы в сети и проанализировать его. Почти везде <div> применяется максимально широко. Посмотрим на простой пример. +Вы также можете располагать элементы внутри других элементов — это называется **вложением**. Если мы хотим заявить, что наша **кошка** очень раздражена, мы можем заключить слово "очень" в элемент <strong> , который указывает, что слово должно быть сильно акцентированно:
    -<code html Пример - HTML> +
    -<div>Этот текст занимает всю ширину страницы</div> +
    -<div>Этот текст начнется с новой строки</div> +
    -</code> +
    -Если сохранить приведенный код в виде **html-файла** и открыть в браузере, то увидим, что куски текста начинаются с разных строк. Причина – в сути блочных элементов (они стремятся занять всю доступную ширину, которая им предоставлена).+
      
    -Другие блочные теги: 
      
    -  - **<table></table>** Позволяет рисовать таблицы 
    -  - **<p>Параграф</p>** Обозначает параграф текста 
    -  - **<h1>Большой заголовок</h1>** Для оформления заголовка самого верхнего уровня (в роли такового обычно выбирается основная статья страницы). 
    -  - **<form></form>** Отражает на сайте форму (авторизации, регистрации, опроса и др.) 
      
    -{{ :software:development:ps_pycharm:html5:lesson:2_2.5.svg |}} 
      
    software/development/ps_pycharm/html5/lesson/lesson.html_1.1692548918.txt.gz · Последнее изменение: 2023/08/20 19:28 — vladpolskiy