Пользователь
-
Автор темы
- #1
Курс взят с Франции, более понятный и лёгкий как по мне.
Я надеюсь, вам это будет полезно.
Я надеюсь, вам это будет полезно.
HTML означает «язык разметки гипертекста». Он используется для создания и представления содержимого веб-страницы и ее структуры. Другие технологии используются с HTML для описания представления страницы (CSS) и / или ее интерактивных функций (JavaScript).
HTML работает с помощью тегов, вставленных в обычный текст. Каждый из этих тегов указывает значение той или иной части текста на сайте. Гипертекст называется ссылками на ссылки, которые соединяют веб-страницы друг с другом. Это оригинальная механика "Всемирной паутины", которую мы знаем сегодня. Написав и опубликовав веб-страницы, вы становитесь участником интернета, Как только ваш сайт становится доступным в интернете.
HTML позволяет включать изображения и другой контент на веб-страницы. Благодаря HTML каждый может создавать как статические, так и динамические веб-сайты. HTML - это язык, на котором описывается структура и содержимое веб-документа. Это содержимое помечено элементами HTML, такими как <head>, <title>, <body>, <header>, <footer>,<p>, <div>, <span>, <img > и многими другими. Эти элементы образуют блоки, используемые для создания веб-сайта.
Начните с HTML
Этот курс посвящен основам HTML, чтобы начать с нуля. Мы определим, что такое элементы, атрибуты и любые другие важные термины, которые вы, возможно, слышали, а также их правильное расположение в языке. Мы рассмотрим, как структурирован элемент HTML, как структурирована классическая HTML-страница, и объясним основы языка.
HTML-это не язык программирования: это язык разметки, который служит для указания браузеру, как структурировать посещаемые веб-страницы.
HTML состоит из ряда элементов, с помощью которых вы можете обрамлять, обертывать или помечать различные части контента, чтобы они отображались или действовали определенным образом. Обрамляющие теги могут превращать небольшую часть контента в ссылку на другую страницу в Интернете, выделять слова курсивом и т. д.
Интерфейсные веб-разработчики обычно говорят о 3 языках, которые используются для создания веб-страницы, HTML, CSS и JavaScript.
Каждый язык образует слой, который допускает разные вещи и дополняет друг друга :
Например, возьмем следующее предложение:
Сегодня утром хорошая погода
Мы можем сделать его абзацем, обернув его элементом (состоящим из тегов) абзаца <p>:
<p>Сегодня утром хорошая погода<p>
Примечание: элементы в HTML нечувствительны к регистру, то есть их можно записывать как в верхнем, так и в нижнем регистре. Например, элемент <title> можно записать <title>, <TITLE>, <Title>, <TiTlE> и т. д. и он будет работать отлично. Однако наилучшей практикой является запись всех элементов в нижнем регистре по соображениям согласованности, удобочитаемости и тому подобного
Основными частями нашего элемента являются:
1. Открывающий тег: это имя элемента (в данном случае p), обрамленное chevron люка (<) и угловая скобка (>). Она указывает, где элемент начинает действовать: в этом случае начинается абзац
2. закрывающий тег: он такой же, как открывающий тег, за исключением того, что он содержит косую черту (/) перед именем элемента. Она указывает конец элемента, в данном случае конец абзаца. Не включение закрывающего тега является распространенной ошибкой среди новичков и может привести к странным результатам.
3. Содержание: это содержимое элемента. В нашем случае это просто текст.
4. Элемент: набор открывающий, закрывающий тег и содержимое, составляющих
В вашем онлайн-редакторе кода (jsfiddle.net или codepen.io), введите следующий текст в окне редактирования HTML :
сегодня утром хорошая погода
Теперь поместите этот текст между тегами <strong> и </strong>:
<strong>сегодня утром хорошая погода</strong>
Текст в рамке в тегах <strong> теперь должен отображаться жирным шрифтом.
Вложенные элементы:
Вы можете помещать элементы внутри других элементов: это называется вложением.
Если вы хотите подчеркнуть, что погода хорошая, вы можете поместить слово "хорошая" в элемент <strong>, чтобы оно было сильно выделено:
<p>сегодня утром<strong>хорошая</strong>погода</p>
Однако вы должны убедиться, что ваши элементы правильно вложены: в приведенном выше примере мы сначала открыли элемент <p>, затем элемент <strong>, поэтому нам нужно сначала закрыть элемент <strong>, а затем элемент <p>. Следующее неверно:
<p>сегодня утром<strong>хорошая погода</p></strong>
Встроенные и блочные элементы:
В HTML есть две важные категории элементов, о которых вам нужно знать: элементы блочного уровня и встроенные элементы.
● Элементы уровня блоков образуют блок, видимый на странице, они отображаются в новой строке независимо от предшествующего содержимого, а любой контент, следующий за ними, также отображается в новой строке. Элементы уровня блока часто являются структурными элементами страницы и представляют, например, абзацы, списки, навигационные меню, нижние колонтитулы и многое другое. Элемент уровня блока не может быть вложен в встроенный элемент, но он может быть вложен в другой элемент уровня блока.
● Встроенные элементы содержатся в элементах на уровне блоков. Они окружают только небольшие части содержимого документа, а не целые абзацы или группы содержимого. Встроенный элемент не отображает новую строку в документе. Обычно он отображается в абзаце текста ,например, в элементе гиперссылки < А> или в элементах выделения, таких как <em > или < strong>.
Рассмотрим следующий пример:
С встроенными элементами <em>:
<em>первый</em><em>второй</em><em>третий</em>
С элементами блока <p>:
<p>четвертая</p><p>пятая</p><p>шестая</p>
Отображаемый результат будет:
первый второй третий
четвертый
пятый
шестой
Примечание: HTML5 переопределил категории элементов в HTML5.
Хотя эти определения более точны и менее неоднозначны, чем предыдущие, их гораздо сложнее понять, чем «блочные» и «встроенные». Поэтому мы будем придерживаться этого на протяжении всей этой темы.
Другой пример:
Сначала мы создадим правило CSS, которое поместит фон выбранного элемента в желтый фон с помощью класса, который мы создадим, и назовем его "фоновый фон":
.fondJaune{
background-color:yellow;
}
Затем давайте рассмотрим этот фрагмент HTML-кода:
<p>следующий span - это элемент <span class="fondJaune">в ряд</span>его цвет фона был изменен с помощью правила CSS, чтобы мы могли визуализировать его область влияния.</p>
Встроенные и блочные элементы:
В предыдущем примере страницы элемент <p> (абзац) представляет собой элемент блока, содержащий текст. В этом тексте у нас есть элемент <span>, который является встроенным элементом. Поскольку элемент <span> является встроенным элементом, абзац хорошо отображается в виде текстового потока без разрыва.
Теперь давайте преобразуем предыдущий элемент, чтобы перейти из встроенного элемента <span> в элемент блока <div>
<p>следующий span - это элемент <div class="fondJaune">в ряд</div>его цвет фона был изменен с помощью правила CSS, чтобы мы могли визуализировать его область влияния.</p>
Здесь мы видим, что элемент блока <div> полностью изменяет макет текста и разрезает его на три части: Часть перед <div>, часть, состоящая из текста элемента <div>, и последняя часть после него.
С помощью свойства CSS display можно выбрать способ отображения элемента, чтобы изменить его поведение по умолчанию. Передав значение display из "inline" в "block", можно указать браузеру отображать элемент как элемент блока, а не как встроенный элемент.
Будьте осторожны, элемент больше не будет отображаться таким же образом, проверьте полученный результат !
Концептуальные различия:
В общих чертах ниже приведены концептуальные различия между встроенными и блочными элементами:
● Шаблон контента :
Как правило, встроенные элементы могут содержать только данные или другие встроенные элементы. Невозможно разместить элементы блоков внутри встроенных элементов.
● Форматирование :
По умолчанию встроенные элементы не вводят новую строку в поток документа. Напротив, элементы блоков вызывают разрыв строки (это поведение можно изменить с помощью CSS).
Упражнение: изменение типа элемента:
<p>следующий span - это элемент <span class="fondJaune">в ряд</span>его цвет фона был изменен с помощью правила CSS, чтобы мы могли визуализировать его область влияния.</p>
Давайте повторим предыдущий пример и добавим в класс "foundjaune"
.fondJaune{
background-color : yellow;
display : inline;
}
Давайте преобразуем элемент <span>, который по умолчанию является встроенным элементом, в блочный элемент со свойством CSS display и значением «block», и посмотрим на результат:
.fondJaune{
background-color : yellow;
display : block;
}
Презентация некоторых элементов:
Самозакрывающиеся теги:
Не все теги состоят из открывающего и закрывающего тега (например, <p> ... </p>).
Некоторые элементы состоят только из одного тега. Обычно они используются для вставки / встраивания чего-либо в документ, в котором они размещены. Например, элемент <img /> или <img> вставляет изображение на страницу, где оно размещено (предпочтительно самозакрывающийся тег <img />):
Атрибуты:
Атрибуты содержат дополнительную информацию об элементе, но не в фактическом содержании.
<p> class="classe-css">сегодня утром хорошая погода</p>
В этом примере атрибут «class» позволяет вам дать элементу <p> идентифицирующее имя, которое затем можно использовать для нацеливания на элемент, чтобы придать ему, например, стиль CSS или определенное поведение.
Правила, которым необходимо следовать при создании атрибута:
1. Между этим атрибутом и именем элемента (или предшествующим атрибутом, если элемент уже имеет один или несколько атрибутов) должен быть вставлен пробел;
2. присвойте атрибуту имя, затем добавьте знак равенства;
3. Присвойте значение атрибуту, заключив его в открывающие и закрывающие кавычки.
Другой пример элемента, атрибуты которого должны быть правильно параметризованы: элемент <a>. Он представляет собой якорь и позволяет преобразовать элемент, который он оборачивает, в ссылку. Ему можно присвоить ряд атрибутов, но вот два основных:
● href: этот атрибут указывает веб-адрес, на который должна указывать ссылка, т. Е. Адрес, на который браузер будет перенаправлять при нажатии ссылки.
● target: атрибут target определяет контекст навигации, используемый для отображения ссылки. Например, target = "_ blank" отобразит ссылку в новой вкладке. Если вы хотите отображать ссылку в текущей вкладке, просто не ставьте этот атрибут.
Атрибуты class и ID:
Мы можем идентифицировать один или несколько элементов на веб-странице, назначив им один или несколько классов и идентификатор. Здесь мы увидим разницу между этими двумя терминами и то, для чего мы можем их использовать.
Атрибут ID:
● Атрибут id - это уникальный идентификатор, который используется для указания элемента документа.
Он используется CSS и JavaScript для выполнения задач над одним элементом.
В CSS атрибут id записывается с использованием символа #, за которым следует значение атрибута id (проще говоря, имя идентификатора).
например, тег <p> с атрибутом Id, имеющим значение "main-menu" (т.е. <p id = "main-menu">), будет идентифицирован в CSS с помощью ярлыка # main-menu.
Подводя итог: ID - это уникальный идентификатор! Если веб-страница содержит несколько элементов с одним и тем же идентификатором, будет обработан только первый элемент HTML-канала.
Атрибут класса:
Атрибут class используется для указания одного или нескольких имен классов для элемента HTML (в отличие от идентификатора, который является уникальным, класс может совместно использоваться несколькими элементами веб-страницы, и / или веб-элемент может иметь несколько классов).
Эти классы позволяют идентифицировать один или несколько элементов веб-страницы, чтобы иметь возможность назначить им стиль в CSS или действие со сценарием.
В CSS атрибут класса записывается с помощью символа. (период), за которым следует значение атрибута класса (проще говоря, имя класса).
Например, тег <p> с атрибутом класса, имеющим значение "text-bold" (т.е. <p class = "text-bold">), будет идентифицироваться в CSS с помощью ярлыка .texte-bold
Итак, чтобы подвести итог, у нас может быть несколько элементов с одним и тем же классом на одной странице:
<p class="texte-gras">текст</p> <span class="texte-gras">диапазон текста</span>
И у элемента может быть несколько классов (разделенных пробелом):
<p class="texte-gras texte-bleu">текст</p>
Анатомия HTML-документа
Типичная структура HTML-документа:
На коде написанном выше у нас есть:
● <!DOCTYPE html>: тип документа. Используемый в начале WWW, он определяет тип содержимого документа. Однако в настоящее время они никого не интересуют, и это всего лишь исторический артефакт, который необходимо включить, чтобы все работало хорошо.
● <html></html>: элемент <html>. Этот элемент является контейнером кода для страницы и известен как корневой элемент. Атрибут и его значение lang = "ru" используются для определения языка страницы.
● <head> </head>: элемент <head>. Этот элемент действует как контейнер для всего, что вы хотите включить в HTML-страницу, что не является содержимым для отображения посетителям страницы: ключевые слова, описание страницы для результатов поиска, стили CSS, символы заданных объявлений, скрипты ...
● <meta charset = "utf-8">: этот элемент определяет, что в вашем документе используется кодировка UTF-8. Эта игра содержит почти всех персонажей всех известных сценариев человеческого языка. В настоящее время он может обрабатывать любой текстовый контент, который вы можете в него поместить. Нет причин не определять это, и это может помочь избежать некоторых проблем позже.
● <title> </title>: элемент заголовка. Он определяет заголовок страницы, который отображается на вкладке браузера, в которую загружена страница, и который используется для описания страницы, когда вы добавляете или добавляете закладку.
● <body> </body>: элемент <body>. Он содержит весь контент, который вы хотите показывать пользователям Интернета, когда они посещают вашу страницу, будь то текст, изображения, видео ...
В приведенном ниже примере заголовок довольно маленький:
Он содержит такую информацию, как заголовок страницы (<title>), ссылки на CSS (если вы хотите составить HTML-контент с помощью CSS), ссылки на пользовательские значки, сценарии и другие метаданные (автор документа, ключевые слова, описывающие документ, и т. Д.).
Однако на более сложных страницах заголовок может содержать множество элементов: попробуйте перейти на некоторые из ваших любимых веб-сайтов и используйте инструменты разработчика, чтобы проверить содержимое заголовка.
Некоторые типичные элементы, найденные в <head>:
<meta name="description" content="описание сайта для отображения" />
Этот тег <meta> используется для создания описания, которое будет отображаться в результатах поиска.
<link href="/css/style.css" rel="stylesheet" type="text/css" />
Этот тег <link> используется для связывания файла CSS с нашим HTML-документом.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Этот тег <link> используется для отображения значка сайта в браузере.
<script type="text/javascript" src="mon-script.js"></script>
Этот тег <script> используется для загрузки файла сценария javascript в браузер.
Подобно тому, как HTML используется для определения различных независимых частей страницы (например, «абзаца» или «изображения»), HTML используется для определения областей вашего веб-сайта (например, «заголовок», «меню навигации», «Основное содержание» и др.). В этом уроке подробно описывается структура простого сайта и написание соответствующего HTML.
Веб-страницы могут сильно отличаться друг от друга, но все они, как правило, имеют одинаковые стандартные компоненты, если только страница не отображает полноэкранное видео или игру, не является своего рода художественным проектом или ... просто плохо структурирована.
На диаграмме справа представлена типичная структура веб-страницы -
Заголовок
Обычно в верхней части страницы размещается большая полоса с заголовком или логотипом. Здесь основная информация сайта остается от страницы к странице.
Панель навигации (nav)
Ссылки на основные разделы сайта; обычно он представлен в виде кнопок меню, ссылок или вкладок. Как и заголовок, он обычно остается неизменным от одной страницы к другой.
Основное содержание (основное)
Большая область в центре, содержащая большую часть уникального содержимого указанной веб-страницы. Это часть сайта, содержимое которой меняется от страницы к странице.
Боковая панель (в сторону)
Часто необязательно. Обычно это контекстно по отношению к основному контенту (например, в интернет-магазине боковая панель может содержать инструменты для поиска и фильтрации продуктов из каталога), но также есть случаи, когда вы найдете повторяющиеся элементы в качестве вторичной системы навигации.
Нижний колонтитул
Область внизу страницы, которая обычно содержит мелким шрифтом уведомления об авторских правах или контактные данные. Это место для размещения общей информации (например, заголовка), но в данном случае это некритическая или даже вторичная информация.
HTML для структурирования содержимого:
Чтобы реализовать семантическую разметку для структуры вашей страницы, HTML предоставляет специальные теги, которые вы можете использовать для представления этих частей, например:
Учебное пособие по HTML: форматирование текста HTML
Одна из основных целей HTML - структурировать текст и придать ему значение (называемое семантикой), чтобы браузер мог правильно отображать его. Этот урок объясняет
как можно использовать HTML для структурирования страницы путем добавления заголовков и абзацев, выделения акцентов, создания списков и многого другого.
Большинство структурированных текстов включают заголовки и абзацы, будь то в романах, газетах, школьных учебниках, журналах и т. Д.
Структурированный контент делает чтение более легким и приятным.
Например, в HTML абзацы должны содержаться в элементе <p>, например:
<p>Я абзац!</p>
Есть 6 элементов заголовка: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. Каждый элемент представляет отдельный уровень титула; <h1> представляет основной заголовок, <h2> представляет подзаголовок, <h3> представляет подзаголовок и так далее до самого низкого уровня заголовка, соответствующего <h6>.
Пример структурной текстовой иерархии:
В истории тег <h1> будет представлять заголовок истории, теги <h2> будут представлять заголовки глав, теги <h3> помечают подразделы глав, таким образом продолжаясь до <h6 тег>.
<h1> Смертельная скука </h1>
<p> Крис Миллс </p>
<h2> Глава I. Темная ночь </h2>
<p> Он был черным как смоль. Где-то ухала сова. Дождь падал на ... </p>
<h2> Глава II: Вечное молчание </h2>
<p> Наш главный герой даже не мог шептать в тени силуэта ... </p>
<h3> Призрак говорит </h3>
<p> Прошло несколько часов, как вдруг сидящий призрак встал и воскликнул: «Пожалуйста, помилуй мою душу!» "... </p>
Примечания к иерархии структурного текста:
● Вы должны использовать только один тег <h1> на странице! Он используется роботами поисковых систем для определения содержания вашей страницы. Более того, соответствующий заголовок <h1> поможет вам лучше ссылаться на вашу страницу.
● Убедитесь, что теги заголовков используются в правильном и логическом порядке: <h1>, затем <h2>, затем <h3> и так далее.
● Хотя существует 6 уровней заголовка (от <h1> до <h6>), не рекомендуется использовать более трех уровней на странице. Документы с большим количеством уровней становятся сложными и трудными для навигации. В этом случае лучше разместить контент на нескольких страницах.
Зачем нужно структурировать текст документа?
● Посетители веб-страницы просматривают ее в поисках релевантного содержания. В результате они часто читают только заголовки (обычно мы проводим очень мало времени на веб-странице). Если они не могут найти нужный контент за секунды, они, скорее всего, будут разочарованы и поищут нужную информацию где-нибудь в другом месте.
● Поисковые системы при индексировании вашей страницы рассматривают заголовки как ключевые слова, которые влияют на рейтинг страницы во время поиска. Без заголовка у страницы будет низкий SEO.
● Люди с ослабленным зрением, которые не могут читать вашу страницу, могут использовать программы чтения с экрана. Это программное обеспечение обеспечивает быстрый доступ к части текста. Они делают это, читая пользователям заголовки вашего документа, что позволяет им быстро находить нужную информацию. Если заголовки недоступны, программы чтения с экрана читают весь документ, что делает его недоступным для людей с нарушениями зрения.
● Чтобы создавать стиль с помощью CSS или делать интересные вещи с помощью JavaScript, вам необходимо иметь элементы, обертывающие соответствующий контент, который затем позволяет настраивать их таргетинг с помощью CSS / JavaScript.
Упражнение: структурируйте следующий текст в HTML:
Добавьте теги, чтобы структурировать этот текст в удобочитаемой форме:
Шелковый Путь
Шелковый путь - это древняя сеть торговых путей между Азией и Европой, соединяющая город Чанъань (современный Сиань) в Китае с городом Антиохия в средневековой Сирии (сегодня в Турции). Он получил свое название от самого ценного товара, который проходил через него: шелка.
Этимология
Дорога получила свое название от самого дорогого товара, который проходил по ней: шелка, производственный секрет которого долгое время оставался только китайцами. Однако это название относится к 19 веку и принадлежит немецкому географу Фердинанду фон Рихтгофену.
История
Греки, а затем римляне, начали говорить о «земле Серес» с 4 века до нашей эры. AD для обозначения Китая). К началу христианской эры римляне стали большими любителями шелка после того, как приобрели его у парфян, которые в то время были организаторами этой торговли.
Зачем нам семантика?
Семантика используется повсюду вокруг нас, мы полагаемся на наш предыдущий опыт, чтобы знать, для чего используются повседневные предметы. Когда мы что-то видим, мы знаем, для чего это нужно. Например, ожидается, что красный световой сигнал будет означать «Стоп», а зеленый - «Продолжить». Все может быстро усложниться, если применяется неправильная семантика.
Точно так же мы должны убедиться, что мы используем правильные элементы и что мы придаем правильное значение, функцию и внешний вид нашему контенту. В этом контексте элемент <h1> также является семантическим элементом. Он дает текст, к которому применяется функция (или значение) «основного заголовка страницы».
<h1>Это основной заголовок</h1>
По умолчанию браузер отображает его с большим размером шрифта, чтобы он выглядел как заголовок (хотя вы можете сделать его похожим на любой элемент с помощью CSS). Что еще более важно, его семантическое значение используется по-разному, включая поисковые системы или программы чтения с экрана (как описано выше).
Зачем нам семантика?
С другой стороны, вы можете сделать любой элемент похожим на основной заголовок. Например :
<span style="font-size: 32px; margin: 21px 0;">Это главное название?<span>
Будет выглядеть так же, как элемент <h1>, но без использования его семантики.
Этот элемент не имеет смыслового значения. Он используется с контентом, к которому вы хотите применить стиль CSS (или изменить его с помощью JavaScript).
Мы применили к нему CSS, чтобы он выглядел как основной заголовок, но, поскольку он не имеет семантического значения, он не использует никаких семантических значений, описанных выше. Желательно использовать HTML-элементы, адаптированные к их роли.
Списки:
Теперь посмотрим на списки. Есть списки на всю жизнь, расы, маршруты, не говоря уже о списке инструкций, которым вы следуете в этом уроке! Списки также очень распространены в Интернете, нас будут интересовать два разных типа списков: упорядоченные и неупорядоченные.
Упорядоченные списки:
Упорядоченные списки используются для представления списков, в которых важен порядок элементов, возьмем, например, серию инструкций, которым нужно следовать:
Ехать до конца дороги
Поверни направо
Двигайтесь прямо на первых двух кольцевых развязках
На третьей кольцевой развязке поверните налево
Проехать 300 метров, справа от вас школа.
Список содержится в элементе <ol>, а каждый элемент списка - в элементе <li>:
<ol>
<li>Двигайтесь до конца дороги.</li>
<li>Поверните направо</li>
<li>Двигайтесь прямо на первых двух кольцевых развязках.</li>
<li>На третьей кольцевой развязке поверните налево.</li>
<li>Проехать 300 метров, школа будет справа от вас.</li>
</ol>
дам :
1. Двигайтесь до конца дороги.
2. Поверните направо.
3. Двигайтесь прямо на первых двух кольцевых развязках.
4. На третьей кольцевой развязке поверните налево.
5. Проехать 300 метров, школа будет справа от вас.
Неупорядоченные списки:
Неупорядоченные списки используются для представления списков элементов, для которых порядок не имеет значения. Возьмем, к примеру, список покупок:
молоко
яйца
хлеб
Неупорядоченные списки начинаются с элемента <ul> (неупорядоченный список), который охватывает все элементы списка, которые сами находятся в элементе <li>:
<ul>
<li>молоко</li>
<li>яйца</li>
<li>хлеб</li>
</ul>
Отобразится HTML-код с предыдущей страницы:
● молоко
● яйца
● хлеб
Списки вложенности:
Вполне возможно вложить один список в другой. Вы можете вставить маркированный список за одним маркером верхнего уровня. Возьмем, к примеру, второй список рецепта:
<ol>
<li> Снимите кожицу с чеснока и крупно нарежьте его. </li>
<li> Удалите из перца семена и стебель, крупно нарежьте его. </li>
<li> Поместите все ингредиенты в кухонный комбайн, пока не получите тесто.
<ul>
<li> Если вы хотите получить зернистый хумус, не перемешивайте его слишком долго. </li>
<li> Если вы хотите получить мягкий хумус, взбивайте его дольше. </li>
</ul>
</li>
</ol>
Упражнение: расставьте теги, чтобы структурировать рецепт приготовления:
Получите следующий блок текста. Структурируйте его с помощью тегов, которые мы видели, чтобы текст был приятным для чтения.
Быстрый рецепт хумуса
Этот рецепт позволяет быстро и без осложнений получить вкусный хумус. Это адаптация нескольких рецептов, которые я пробовал на протяжении многих лет. Хумус - это вкусная густая паста, которую используют в блюдах Греции и Ближнего Востока. Прекрасно сочетается с салатом, мясом на гриле и калабрийским хлебом.
Ингредиенты 1 банка (400 г) нута (гарбанзос) 175 г кунжутного крема 6 вяленых помидоров половина красного перца щепотка кайенского перца 1 зубчик чеснока щепотка оливкового масла
Снимите кожицу с чеснока и крупно нарежьте его. С перца удалить косточки и плодоножку, крупно порезать. Поместите все ингредиенты в кухонный комбайн и перемешайте, пока не получите тесто. Если вы хотите зернистый хумус, не взбивайте его слишком долго. Если вы хотите получить гладкий хумус, взбивайте его дольше.
Для разных вкусов вы можете попробовать добавить сок лимона и кинзы, табаско, лайм и чипотле, хариссу и мяту или шпинат и фету. Попробуйте и посмотрите, что вам подходит.
Гиперссылки - одно из самых захватывающих нововведений, которые может предложить Интернет. Они были частью Интернета с самого начала, и именно они делают WWW сетью.
Гиперссылки позволяют нам связывать документы с другими документами или ресурсами, для доступа к определенным частям документов или к сайтам, доступным по веб-адресу.
Практически весь веб-контент может быть преобразован в ссылку, так что при нажатии или другой активации веб-браузер переходит на другой веб-адрес (URL).
Примечание. URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео или аудио файлы и все, что может существовать в Интернете. Если веб-браузер не знает, как просматривать файл или управлять им, он спрашивает, хотите ли вы открыть файл (в этом случае ответственность за открытие файла и управление им возлагается на соответствующее собственное приложение на устройстве) или загрузить файл (в этом случае вы можете попробовать разобраться с ним позже)
Анатомия ссылки:
Элементарная ссылка создается путем интеграции текста (или любого другого содержимого, такого как изображение), который вы хотите преобразовать в ссылку в элементе <a>, и путем присвоения ему атрибута href, содержащего веб-адрес, для которого вы хотите ссылка на точку.
Этот HTML-код отобразит ссылку в виде текста "Yougame":
<a href="yougame.biz">Yougame</a>
Мы также можем создать нашу ссылку с изображением, которое мы будем интегрировать между открытием и закрытием тега <a> (<a><img /></a>):
<a href="yougame.biz"><img src="https://yougame.biz/images/rlm/logo/logoconcept4.png" /></a>
Относительные и абсолютные пути, корневой каталог сайта:
Корень сайта:
Как и любое дерево компьютеров, веб-сайт состоит из каталогов и файлов.
В компьютерных файловых системах корень каталогов является основой каталогов в иерархии. Его можно представить в виде ствола дерева, то есть начальной точки всех ветвей (всех каталогов / папок).
Например, когда вы вводите в браузере «голый» веб-адрес, такой как «https://yougame.biz», вы попадаете в корень сайта.
Это означает, что если бы наш URL был «"
Относительные и абсолютные пути, корневой каталог сайта:
Относительные и абсолютные пути:
Часто источник ошибок, страницы не найдены, отсутствующие изображения или не примененные стили, формат написания ссылок очень важен. И все же мы не обязательно обращаем внимание на то, как мы указываем эти последние на разные целевые файлы. В зависимости от используемого письменного соглашения может возникнуть множество проблем. Действительно, сосуществуют два типа письма, каждый со своей спецификой:
● относительный путь (без косой черты / начальный)
● абсолютный путь (косая черта / префикс пути)
Относительные и абсолютные пути, корневой каталог сайта:
Относительный путь:
dossier/page.html
Целевой объект (page.html) будет искать браузер на html-странице или в таблице стилей, которую он интерпретирует, в подкаталоге «папка», мы не ставим перед ним косую черту «/».
./dossier/page.html
./: означает, что страница ищется из текущего каталога.
../dossier/page.html
../: означает, что страница ищется из родительского каталога (мы поднимаемся на один уровень выше).
Собрать несколько каталогов вполне возможно. Для этого нужно будет накапливать ../ и, таким образом, подняться на два уровня, можно будет написать ../../dossier/page.html..
Относительные и абсолютные пути, корневой каталог сайта:
Абсолютный путь:
/dossier/page.html
Начальная косая черта «/» указывает, что мы больше не ссылаемся на текущее местоположение, а возвращаемся непосредственно к корню, а затем указываем полный путь.
Во многих случаях абсолютный путь является самым безопасным соглашением о записи, но также наименее гибким, если древовидная структура должна измениться. Поиск целевой страницы будет осуществляться браузером из корня сайта. В нашем примере выше файл page.html будет найден непосредственно из корня домена:
Форма HTML состоит из одного или нескольких виджетов. Это могут быть текстовые поля (одна или несколько строк), поля выбора, кнопки, флажки или переключатели. В большинстве случаев эти элементы связаны с меткой (тег <label>), которая описывает их роль.
Основное различие между формой HTML и обычным документом HTML заключается в том, что обычно данные, собранные формой, отправляются на веб-сервер. В этом случае вам необходимо настроить веб-сервер для получения этих данных и их обработки. Настройка такого сервера не входит в число тем этого урока.
Элемент <form>:
Все HTML-формы начинаются с такого элемента <form>:
<form action="traitementFormulaire.php" method="POST">
</form>
Этот элемент описывает форму. Это элемент-контейнер, как элементы <div> или <p>, но он также принимает несколько определенных атрибутов, чтобы контролировать его поведение. Все его атрибуты являются необязательными, но установка по крайней мере атрибутов действия и метода считается хорошей.
упражняться.
● Атрибут action определяет место (URL-адрес), куда должны быть отправлены данные, собранные формой.
● Атрибут метода определяет метод HTTP, используемый для отправки данных (это может быть «получить» или «отправить»).
Анатомия формы для сбора адресов электронной почты:
1. <form id="newsletter" action="traitementFormulaire.php" method="POST">
2. <p class="txtCentre">подпишитесь на мою рассылку, чтобы получать больше информации</p>
3. <input type="email" class="inputEmail" placeholder="Votre e-mail" />
4. <input type="submit" value="Envoyer" class="boutEnvoyer" />
5. </form>
1. Откройте элемент формы.
2. Мы можем интегрировать стандартные элементы HTML в форму, здесь абзац.
3. Элемент <input type = "email"> является одним из виджетов формы. Он позволяет вам ввести адрес электронной почты (указанный с помощью атрибута type = "email") в однострочное текстовое поле.
4. Элемент <input type = "submit"> - это второй виджет формы. Будет отображена кнопка с текстом «отправить» (который мы определили с помощью атрибута value = «отправить»). Этот элемент используется для отправки формы на сервер, который будет обрабатывать нашу форму.
5. закрытие тега <form>
HTML работает с помощью тегов, вставленных в обычный текст. Каждый из этих тегов указывает значение той или иной части текста на сайте. Гипертекст называется ссылками на ссылки, которые соединяют веб-страницы друг с другом. Это оригинальная механика "Всемирной паутины", которую мы знаем сегодня. Написав и опубликовав веб-страницы, вы становитесь участником интернета, Как только ваш сайт становится доступным в интернете.
HTML позволяет включать изображения и другой контент на веб-страницы. Благодаря HTML каждый может создавать как статические, так и динамические веб-сайты. HTML - это язык, на котором описывается структура и содержимое веб-документа. Это содержимое помечено элементами HTML, такими как <head>, <title>, <body>, <header>, <footer>,<p>, <div>, <span>, <img > и многими другими. Эти элементы образуют блоки, используемые для создания веб-сайта.
Начните с HTML
HTML-это не язык программирования: это язык разметки, который служит для указания браузеру, как структурировать посещаемые веб-страницы.
HTML состоит из ряда элементов, с помощью которых вы можете обрамлять, обертывать или помечать различные части контента, чтобы они отображались или действовали определенным образом. Обрамляющие теги могут превращать небольшую часть контента в ссылку на другую страницу в Интернете, выделять слова курсивом и т. д.
Интерфейсные веб-разработчики обычно говорят о 3 языках, которые используются для создания веб-страницы, HTML, CSS и JavaScript.
Каждый язык образует слой, который допускает разные вещи и дополняет друг друга :
<html> | {CSS} | javascript() |
Слой содержимого | Слой презентации | Уровень поведения |
Это основное содержание страницы . HTML формирует структуру страницы и содержит ее семантику. | CSS улучшает макет страницы с помощью правил, в которых указывается, как должен быть представлен HTML-контент. | JS позволяет изменить поведение страницы и добавить к ней интерактивность. |
Например, возьмем следующее предложение:
Сегодня утром хорошая погода
Мы можем сделать его абзацем, обернув его элементом (состоящим из тегов) абзаца <p>:
<p>Сегодня утром хорошая погода<p>
Примечание: элементы в HTML нечувствительны к регистру, то есть их можно записывать как в верхнем, так и в нижнем регистре. Например, элемент <title> можно записать <title>, <TITLE>, <Title>, <TiTlE> и т. д. и он будет работать отлично. Однако наилучшей практикой является запись всех элементов в нижнем регистре по соображениям согласованности, удобочитаемости и тому подобного
Основными частями нашего элемента являются:
1. Открывающий тег: это имя элемента (в данном случае p), обрамленное chevron люка (<) и угловая скобка (>). Она указывает, где элемент начинает действовать: в этом случае начинается абзац
2. закрывающий тег: он такой же, как открывающий тег, за исключением того, что он содержит косую черту (/) перед именем элемента. Она указывает конец элемента, в данном случае конец абзаца. Не включение закрывающего тега является распространенной ошибкой среди новичков и может привести к странным результатам.
3. Содержание: это содержимое элемента. В нашем случае это просто текст.
4. Элемент: набор открывающий, закрывающий тег и содержимое, составляющих
В вашем онлайн-редакторе кода (jsfiddle.net или codepen.io), введите следующий текст в окне редактирования HTML :
сегодня утром хорошая погода
Теперь поместите этот текст между тегами <strong> и </strong>:
<strong>сегодня утром хорошая погода</strong>
Текст в рамке в тегах <strong> теперь должен отображаться жирным шрифтом.
Вложенные элементы:
Вы можете помещать элементы внутри других элементов: это называется вложением.
Если вы хотите подчеркнуть, что погода хорошая, вы можете поместить слово "хорошая" в элемент <strong>, чтобы оно было сильно выделено:
<p>сегодня утром<strong>хорошая</strong>погода</p>
Однако вы должны убедиться, что ваши элементы правильно вложены: в приведенном выше примере мы сначала открыли элемент <p>, затем элемент <strong>, поэтому нам нужно сначала закрыть элемент <strong>, а затем элемент <p>. Следующее неверно:
<p>сегодня утром<strong>хорошая погода</p></strong>
Встроенные и блочные элементы:
В HTML есть две важные категории элементов, о которых вам нужно знать: элементы блочного уровня и встроенные элементы.
● Элементы уровня блоков образуют блок, видимый на странице, они отображаются в новой строке независимо от предшествующего содержимого, а любой контент, следующий за ними, также отображается в новой строке. Элементы уровня блока часто являются структурными элементами страницы и представляют, например, абзацы, списки, навигационные меню, нижние колонтитулы и многое другое. Элемент уровня блока не может быть вложен в встроенный элемент, но он может быть вложен в другой элемент уровня блока.
● Встроенные элементы содержатся в элементах на уровне блоков. Они окружают только небольшие части содержимого документа, а не целые абзацы или группы содержимого. Встроенный элемент не отображает новую строку в документе. Обычно он отображается в абзаце текста ,например, в элементе гиперссылки < А> или в элементах выделения, таких как <em > или < strong>.
Рассмотрим следующий пример:
С встроенными элементами <em>:
<em>первый</em><em>второй</em><em>третий</em>
С элементами блока <p>:
<p>четвертая</p><p>пятая</p><p>шестая</p>
Отображаемый результат будет:
первый второй третий
четвертый
пятый
шестой
Примечание: HTML5 переопределил категории элементов в HTML5.
Хотя эти определения более точны и менее неоднозначны, чем предыдущие, их гораздо сложнее понять, чем «блочные» и «встроенные». Поэтому мы будем придерживаться этого на протяжении всей этой темы.
Другой пример:
Сначала мы создадим правило CSS, которое поместит фон выбранного элемента в желтый фон с помощью класса, который мы создадим, и назовем его "фоновый фон":
.fondJaune{
background-color:yellow;
}
Затем давайте рассмотрим этот фрагмент HTML-кода:
<p>следующий span - это элемент <span class="fondJaune">в ряд</span>его цвет фона был изменен с помощью правила CSS, чтобы мы могли визуализировать его область влияния.</p>
Встроенные и блочные элементы:
В предыдущем примере страницы элемент <p> (абзац) представляет собой элемент блока, содержащий текст. В этом тексте у нас есть элемент <span>, который является встроенным элементом. Поскольку элемент <span> является встроенным элементом, абзац хорошо отображается в виде текстового потока без разрыва.
Теперь давайте преобразуем предыдущий элемент, чтобы перейти из встроенного элемента <span> в элемент блока <div>
<p>следующий span - это элемент <div class="fondJaune">в ряд</div>его цвет фона был изменен с помощью правила CSS, чтобы мы могли визуализировать его область влияния.</p>
Здесь мы видим, что элемент блока <div> полностью изменяет макет текста и разрезает его на три части: Часть перед <div>, часть, состоящая из текста элемента <div>, и последняя часть после него.
С помощью свойства CSS display можно выбрать способ отображения элемента, чтобы изменить его поведение по умолчанию. Передав значение display из "inline" в "block", можно указать браузеру отображать элемент как элемент блока, а не как встроенный элемент.
Будьте осторожны, элемент больше не будет отображаться таким же образом, проверьте полученный результат !
Концептуальные различия:
В общих чертах ниже приведены концептуальные различия между встроенными и блочными элементами:
● Шаблон контента :
Как правило, встроенные элементы могут содержать только данные или другие встроенные элементы. Невозможно разместить элементы блоков внутри встроенных элементов.
● Форматирование :
По умолчанию встроенные элементы не вводят новую строку в поток документа. Напротив, элементы блоков вызывают разрыв строки (это поведение можно изменить с помощью CSS).
Упражнение: изменение типа элемента:
<p>следующий span - это элемент <span class="fondJaune">в ряд</span>его цвет фона был изменен с помощью правила CSS, чтобы мы могли визуализировать его область влияния.</p>
Давайте повторим предыдущий пример и добавим в класс "foundjaune"
.fondJaune{
background-color : yellow;
display : inline;
}
Давайте преобразуем элемент <span>, который по умолчанию является встроенным элементом, в блочный элемент со свойством CSS display и значением «block», и посмотрим на результат:
.fondJaune{
background-color : yellow;
display : block;
}
Презентация некоторых элементов:
Элемент | Описание |
<a> | Элемент <a> определяет гиперссылку на другое место на той же странице или на другую страницу в Интернете. |
<br> | Элемент <br> создает разрыв строки (возврат каретки) в тексте. |
<em> | Элемент <em> (для выделения) используется для выделения текста, который вы хотите выделить. |
<strong> | Элемент <strong> указывает на то, что текст имеет особую важность, серьезность или даже срочность. Обычно это приводит к полужирному изображению. |
<span> | Элемент <span> - это общий встроенный контейнер. Он не представляет собой ничего особенного. Его можно использовать для группировки элементов с целью их форматирования (благодаря атрибутам class или id и правилам CSS). |
<i> | Содержание этого элемента отображается курсивом. |
<u> | Содержимое этого элемента выделяется цветом. |
<img> | Элемент <img> используется для представления изображения в документе. |
<input> | Элемент <input> используется для создания интерактивного элемента управления в веб-форме, который позволяет пользователю вводить данные. |
<button> | Элемент <button> используется для создания интерактивного элемента управления в виде кнопки, которую можно использовать в форме или в документе. |
<textarea> | Элемент <textarea> представляет область формы, которая позволяет редактировать текст на нескольких строках. |
<label> | Элемент <label> представляет заголовок для элемента формы. |
<div> | Элемент <div> (который означает разделение документа) - это общий блок-контейнер. |
<header> | Элемент <header> представляет заголовок вашей страницы. Он может содержать элементы заголовка, а также другие элементы, такие как логотип, меню ... |
<main> | Элемент <main> представляет основное содержимое страницы. |
<footer> | Элемент <footer> представляет нижний колонтитул. |
<form> | Элемент <form> представляет собой раздел документа, содержащий элементы формы. |
<ul> / <ol> | Элемент <ul> представляет собой список элементов в произвольном порядке. Элемент <ol> представляет собой упорядоченный список. |
<li> | Элемент <li> используется для представления элемента в списке. Он должен содержаться в родительском элементе: упорядоченном списке (<ol>), неупорядоченном списке (<ul>) или меню (<menu>). |
<nav> | Элемент <nav> представляет собой раздел страницы, который имеет ссылки на другие страницы или фрагменты этой страницы. Другими словами, это раздел, предназначенный для навигации по документу (меню). |
<p> | Элемент <p> представляет абзац текста. |
<section> | Элемент <section> представляет собой общий раздел документа, например тематическую группу содержимого. Раздел обычно начинается с заголовка. |
<table> | Элемент <table> используется для представления таблицы данных. |
<hr> | Элемент <hr> представляет собой горизонтальную разделительную линию. |
<figure> | Элемент <figure> позволяет группировать медиафайлы с помощью подписи. |
<figcaption> | Элемент <figurecaption> представляет заголовок изображения. |
Самозакрывающиеся теги:
Не все теги состоят из открывающего и закрывающего тега (например, <p> ... </p>).
Некоторые элементы состоят только из одного тега. Обычно они используются для вставки / встраивания чего-либо в документ, в котором они размещены. Например, элемент <img /> или <img> вставляет изображение на страницу, где оно размещено (предпочтительно самозакрывающийся тег <img />):
Атрибуты:
Атрибуты содержат дополнительную информацию об элементе, но не в фактическом содержании.
<p> class="classe-css">сегодня утром хорошая погода</p>
В этом примере атрибут «class» позволяет вам дать элементу <p> идентифицирующее имя, которое затем можно использовать для нацеливания на элемент, чтобы придать ему, например, стиль CSS или определенное поведение.
Правила, которым необходимо следовать при создании атрибута:
1. Между этим атрибутом и именем элемента (или предшествующим атрибутом, если элемент уже имеет один или несколько атрибутов) должен быть вставлен пробел;
2. присвойте атрибуту имя, затем добавьте знак равенства;
3. Присвойте значение атрибуту, заключив его в открывающие и закрывающие кавычки.
Другой пример элемента, атрибуты которого должны быть правильно параметризованы: элемент <a>. Он представляет собой якорь и позволяет преобразовать элемент, который он оборачивает, в ссылку. Ему можно присвоить ряд атрибутов, но вот два основных:
● href: этот атрибут указывает веб-адрес, на который должна указывать ссылка, т. Е. Адрес, на который браузер будет перенаправлять при нажатии ссылки.
● target: атрибут target определяет контекст навигации, используемый для отображения ссылки. Например, target = "_ blank" отобразит ссылку в новой вкладке. Если вы хотите отображать ссылку в текущей вкладке, просто не ставьте этот атрибут.
Атрибуты class и ID:
Мы можем идентифицировать один или несколько элементов на веб-странице, назначив им один или несколько классов и идентификатор. Здесь мы увидим разницу между этими двумя терминами и то, для чего мы можем их использовать.
Атрибут ID:
● Атрибут id - это уникальный идентификатор, который используется для указания элемента документа.
Он используется CSS и JavaScript для выполнения задач над одним элементом.
В CSS атрибут id записывается с использованием символа #, за которым следует значение атрибута id (проще говоря, имя идентификатора).
например, тег <p> с атрибутом Id, имеющим значение "main-menu" (т.е. <p id = "main-menu">), будет идентифицирован в CSS с помощью ярлыка # main-menu.
Подводя итог: ID - это уникальный идентификатор! Если веб-страница содержит несколько элементов с одним и тем же идентификатором, будет обработан только первый элемент HTML-канала.
Атрибут класса:
Атрибут class используется для указания одного или нескольких имен классов для элемента HTML (в отличие от идентификатора, который является уникальным, класс может совместно использоваться несколькими элементами веб-страницы, и / или веб-элемент может иметь несколько классов).
Эти классы позволяют идентифицировать один или несколько элементов веб-страницы, чтобы иметь возможность назначить им стиль в CSS или действие со сценарием.
В CSS атрибут класса записывается с помощью символа. (период), за которым следует значение атрибута класса (проще говоря, имя класса).
Например, тег <p> с атрибутом класса, имеющим значение "text-bold" (т.е. <p class = "text-bold">), будет идентифицироваться в CSS с помощью ярлыка .texte-bold
Итак, чтобы подвести итог, у нас может быть несколько элементов с одним и тем же классом на одной странице:
<p class="texte-gras">текст</p> <span class="texte-gras">диапазон текста</span>
И у элемента может быть несколько классов (разделенных пробелом):
<p class="texte-gras texte-bleu">текст</p>
Анатомия HTML-документа
Типичная структура HTML-документа:
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Моя тестовая страница</title>
</head>
<body>
<p>Вот моя страничка</p>
</body>
</html>● <!DOCTYPE html>: тип документа. Используемый в начале WWW, он определяет тип содержимого документа. Однако в настоящее время они никого не интересуют, и это всего лишь исторический артефакт, который необходимо включить, чтобы все работало хорошо.
● <html></html>: элемент <html>. Этот элемент является контейнером кода для страницы и известен как корневой элемент. Атрибут и его значение lang = "ru" используются для определения языка страницы.
● <head> </head>: элемент <head>. Этот элемент действует как контейнер для всего, что вы хотите включить в HTML-страницу, что не является содержимым для отображения посетителям страницы: ключевые слова, описание страницы для результатов поиска, стили CSS, символы заданных объявлений, скрипты ...
● <meta charset = "utf-8">: этот элемент определяет, что в вашем документе используется кодировка UTF-8. Эта игра содержит почти всех персонажей всех известных сценариев человеческого языка. В настоящее время он может обрабатывать любой текстовый контент, который вы можете в него поместить. Нет причин не определять это, и это может помочь избежать некоторых проблем позже.
● <title> </title>: элемент заголовка. Он определяет заголовок страницы, который отображается на вкладке браузера, в которую загружена страница, и который используется для описания страницы, когда вы добавляете или добавляете закладку.
● <body> </body>: элемент <body>. Он содержит весь контент, который вы хотите показывать пользователям Интернета, когда они посещают вашу страницу, будь то текст, изображения, видео ...
Элемент <head>
Заголовок <head> в документе HTML - это часть документа, которая не отображается браузером при загрузке страницы.
В приведенном ниже примере заголовок довольно маленький:
HTML:
<head>
<meta charset="utf-8">
<title>Моя тестовая страница</title>
</head>Однако на более сложных страницах заголовок может содержать множество элементов: попробуйте перейти на некоторые из ваших любимых веб-сайтов и используйте инструменты разработчика, чтобы проверить содержимое заголовка.
Некоторые типичные элементы, найденные в <head>:
HTML:
<head>
<meta charset="utf-8">
<meta name="description" content="описание сайта для отображения" />
<title>Моя тестовая страница</title>
<link href="/css/style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<script type="text/javascript" src="mon-script.js"></script>
</head>Этот тег <meta> используется для создания описания, которое будет отображаться в результатах поиска.
<link href="/css/style.css" rel="stylesheet" type="text/css" />
Этот тег <link> используется для связывания файла CSS с нашим HTML-документом.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
Этот тег <link> используется для отображения значка сайта в браузере.
<script type="text/javascript" src="mon-script.js"></script>
Этот тег <script> используется для загрузки файла сценария javascript в браузер.
Типичная структура веб-страницы
Основные части документа
Подобно тому, как HTML используется для определения различных независимых частей страницы (например, «абзаца» или «изображения»), HTML используется для определения областей вашего веб-сайта (например, «заголовок», «меню навигации», «Основное содержание» и др.). В этом уроке подробно описывается структура простого сайта и написание соответствующего HTML.
Веб-страницы могут сильно отличаться друг от друга, но все они, как правило, имеют одинаковые стандартные компоненты, если только страница не отображает полноэкранное видео или игру, не является своего рода художественным проектом или ... просто плохо структурирована.
На диаграмме справа представлена типичная структура веб-страницы -
Пожалуйста, авторизуйтесь для просмотра ссылки.
Заголовок
Обычно в верхней части страницы размещается большая полоса с заголовком или логотипом. Здесь основная информация сайта остается от страницы к странице.
Панель навигации (nav)
Ссылки на основные разделы сайта; обычно он представлен в виде кнопок меню, ссылок или вкладок. Как и заголовок, он обычно остается неизменным от одной страницы к другой.
Основное содержание (основное)
Большая область в центре, содержащая большую часть уникального содержимого указанной веб-страницы. Это часть сайта, содержимое которой меняется от страницы к странице.
Боковая панель (в сторону)
Часто необязательно. Обычно это контекстно по отношению к основному контенту (например, в интернет-магазине боковая панель может содержать инструменты для поиска и фильтрации продуктов из каталога), но также есть случаи, когда вы найдете повторяющиеся элементы в качестве вторичной системы навигации.
Нижний колонтитул
Область внизу страницы, которая обычно содержит мелким шрифтом уведомления об авторских правах или контактные данные. Это место для размещения общей информации (например, заголовка), но в данном случае это некритическая или даже вторичная информация.
HTML для структурирования содержимого:
Чтобы реализовать семантическую разметку для структуры вашей страницы, HTML предоставляет специальные теги, которые вы можете использовать для представления этих частей, например:
Название зоны | Выделенный тег |
Заголовок | <header> |
Панель навигации | <nav> (с различными подразделами контента, представленными с использованием элементов <article>, <section> и <div>) |
Основное содержание | <main> |
Боковая панель | <aside> (часто включается в <main>) |
Нижний колонтитул | <footer> |
Форматирование текста HTML
Учебное пособие по HTML: форматирование текста HTML
Одна из основных целей HTML - структурировать текст и придать ему значение (называемое семантикой), чтобы браузер мог правильно отображать его. Этот урок объясняет
как можно использовать HTML для структурирования страницы путем добавления заголовков и абзацев, выделения акцентов, создания списков и многого другого.
Большинство структурированных текстов включают заголовки и абзацы, будь то в романах, газетах, школьных учебниках, журналах и т. Д.
Структурированный контент делает чтение более легким и приятным.
Например, в HTML абзацы должны содержаться в элементе <p>, например:
<p>Я абзац!</p>
Есть 6 элементов заголовка: <h1>, <h2>, <h3>, <h4>, <h5> и <h6>. Каждый элемент представляет отдельный уровень титула; <h1> представляет основной заголовок, <h2> представляет подзаголовок, <h3> представляет подзаголовок и так далее до самого низкого уровня заголовка, соответствующего <h6>.
Пример структурной текстовой иерархии:
В истории тег <h1> будет представлять заголовок истории, теги <h2> будут представлять заголовки глав, теги <h3> помечают подразделы глав, таким образом продолжаясь до <h6 тег>.
<h1> Смертельная скука </h1>
<p> Крис Миллс </p>
<h2> Глава I. Темная ночь </h2>
<p> Он был черным как смоль. Где-то ухала сова. Дождь падал на ... </p>
<h2> Глава II: Вечное молчание </h2>
<p> Наш главный герой даже не мог шептать в тени силуэта ... </p>
<h3> Призрак говорит </h3>
<p> Прошло несколько часов, как вдруг сидящий призрак встал и воскликнул: «Пожалуйста, помилуй мою душу!» "... </p>
Примечания к иерархии структурного текста:
● Вы должны использовать только один тег <h1> на странице! Он используется роботами поисковых систем для определения содержания вашей страницы. Более того, соответствующий заголовок <h1> поможет вам лучше ссылаться на вашу страницу.
● Убедитесь, что теги заголовков используются в правильном и логическом порядке: <h1>, затем <h2>, затем <h3> и так далее.
● Хотя существует 6 уровней заголовка (от <h1> до <h6>), не рекомендуется использовать более трех уровней на странице. Документы с большим количеством уровней становятся сложными и трудными для навигации. В этом случае лучше разместить контент на нескольких страницах.
Зачем нужно структурировать текст документа?
● Посетители веб-страницы просматривают ее в поисках релевантного содержания. В результате они часто читают только заголовки (обычно мы проводим очень мало времени на веб-странице). Если они не могут найти нужный контент за секунды, они, скорее всего, будут разочарованы и поищут нужную информацию где-нибудь в другом месте.
● Поисковые системы при индексировании вашей страницы рассматривают заголовки как ключевые слова, которые влияют на рейтинг страницы во время поиска. Без заголовка у страницы будет низкий SEO.
● Люди с ослабленным зрением, которые не могут читать вашу страницу, могут использовать программы чтения с экрана. Это программное обеспечение обеспечивает быстрый доступ к части текста. Они делают это, читая пользователям заголовки вашего документа, что позволяет им быстро находить нужную информацию. Если заголовки недоступны, программы чтения с экрана читают весь документ, что делает его недоступным для людей с нарушениями зрения.
● Чтобы создавать стиль с помощью CSS или делать интересные вещи с помощью JavaScript, вам необходимо иметь элементы, обертывающие соответствующий контент, который затем позволяет настраивать их таргетинг с помощью CSS / JavaScript.
Упражнение: структурируйте следующий текст в HTML:
Добавьте теги, чтобы структурировать этот текст в удобочитаемой форме:
Шелковый Путь
Шелковый путь - это древняя сеть торговых путей между Азией и Европой, соединяющая город Чанъань (современный Сиань) в Китае с городом Антиохия в средневековой Сирии (сегодня в Турции). Он получил свое название от самого ценного товара, который проходил через него: шелка.
Этимология
Дорога получила свое название от самого дорогого товара, который проходил по ней: шелка, производственный секрет которого долгое время оставался только китайцами. Однако это название относится к 19 веку и принадлежит немецкому географу Фердинанду фон Рихтгофену.
История
Греки, а затем римляне, начали говорить о «земле Серес» с 4 века до нашей эры. AD для обозначения Китая). К началу христианской эры римляне стали большими любителями шелка после того, как приобрели его у парфян, которые в то время были организаторами этой торговли.
Зачем нам семантика?
Семантика используется повсюду вокруг нас, мы полагаемся на наш предыдущий опыт, чтобы знать, для чего используются повседневные предметы. Когда мы что-то видим, мы знаем, для чего это нужно. Например, ожидается, что красный световой сигнал будет означать «Стоп», а зеленый - «Продолжить». Все может быстро усложниться, если применяется неправильная семантика.
Точно так же мы должны убедиться, что мы используем правильные элементы и что мы придаем правильное значение, функцию и внешний вид нашему контенту. В этом контексте элемент <h1> также является семантическим элементом. Он дает текст, к которому применяется функция (или значение) «основного заголовка страницы».
<h1>Это основной заголовок</h1>
По умолчанию браузер отображает его с большим размером шрифта, чтобы он выглядел как заголовок (хотя вы можете сделать его похожим на любой элемент с помощью CSS). Что еще более важно, его семантическое значение используется по-разному, включая поисковые системы или программы чтения с экрана (как описано выше).
Зачем нам семантика?
С другой стороны, вы можете сделать любой элемент похожим на основной заголовок. Например :
<span style="font-size: 32px; margin: 21px 0;">Это главное название?<span>
Будет выглядеть так же, как элемент <h1>, но без использования его семантики.
Этот элемент не имеет смыслового значения. Он используется с контентом, к которому вы хотите применить стиль CSS (или изменить его с помощью JavaScript).
Мы применили к нему CSS, чтобы он выглядел как основной заголовок, но, поскольку он не имеет семантического значения, он не использует никаких семантических значений, описанных выше. Желательно использовать HTML-элементы, адаптированные к их роли.
Списки:
Теперь посмотрим на списки. Есть списки на всю жизнь, расы, маршруты, не говоря уже о списке инструкций, которым вы следуете в этом уроке! Списки также очень распространены в Интернете, нас будут интересовать два разных типа списков: упорядоченные и неупорядоченные.
Упорядоченные списки:
Упорядоченные списки используются для представления списков, в которых важен порядок элементов, возьмем, например, серию инструкций, которым нужно следовать:
Ехать до конца дороги
Поверни направо
Двигайтесь прямо на первых двух кольцевых развязках
На третьей кольцевой развязке поверните налево
Проехать 300 метров, справа от вас школа.
Список содержится в элементе <ol>, а каждый элемент списка - в элементе <li>:
<ol>
<li>Двигайтесь до конца дороги.</li>
<li>Поверните направо</li>
<li>Двигайтесь прямо на первых двух кольцевых развязках.</li>
<li>На третьей кольцевой развязке поверните налево.</li>
<li>Проехать 300 метров, школа будет справа от вас.</li>
</ol>
дам :
1. Двигайтесь до конца дороги.
2. Поверните направо.
3. Двигайтесь прямо на первых двух кольцевых развязках.
4. На третьей кольцевой развязке поверните налево.
5. Проехать 300 метров, школа будет справа от вас.
Неупорядоченные списки:
Неупорядоченные списки используются для представления списков элементов, для которых порядок не имеет значения. Возьмем, к примеру, список покупок:
молоко
яйца
хлеб
Неупорядоченные списки начинаются с элемента <ul> (неупорядоченный список), который охватывает все элементы списка, которые сами находятся в элементе <li>:
<ul>
<li>молоко</li>
<li>яйца</li>
<li>хлеб</li>
</ul>
Отобразится HTML-код с предыдущей страницы:
● молоко
● яйца
● хлеб
Списки вложенности:
Вполне возможно вложить один список в другой. Вы можете вставить маркированный список за одним маркером верхнего уровня. Возьмем, к примеру, второй список рецепта:
<ol>
<li> Снимите кожицу с чеснока и крупно нарежьте его. </li>
<li> Удалите из перца семена и стебель, крупно нарежьте его. </li>
<li> Поместите все ингредиенты в кухонный комбайн, пока не получите тесто.
<ul>
<li> Если вы хотите получить зернистый хумус, не перемешивайте его слишком долго. </li>
<li> Если вы хотите получить мягкий хумус, взбивайте его дольше. </li>
</ul>
</li>
</ol>
Упражнение: расставьте теги, чтобы структурировать рецепт приготовления:
Получите следующий блок текста. Структурируйте его с помощью тегов, которые мы видели, чтобы текст был приятным для чтения.
Быстрый рецепт хумуса
Этот рецепт позволяет быстро и без осложнений получить вкусный хумус. Это адаптация нескольких рецептов, которые я пробовал на протяжении многих лет. Хумус - это вкусная густая паста, которую используют в блюдах Греции и Ближнего Востока. Прекрасно сочетается с салатом, мясом на гриле и калабрийским хлебом.
Ингредиенты 1 банка (400 г) нута (гарбанзос) 175 г кунжутного крема 6 вяленых помидоров половина красного перца щепотка кайенского перца 1 зубчик чеснока щепотка оливкового масла
Снимите кожицу с чеснока и крупно нарежьте его. С перца удалить косточки и плодоножку, крупно порезать. Поместите все ингредиенты в кухонный комбайн и перемешайте, пока не получите тесто. Если вы хотите зернистый хумус, не взбивайте его слишком долго. Если вы хотите получить гладкий хумус, взбивайте его дольше.
Для разных вкусов вы можете попробовать добавить сок лимона и кинзы, табаско, лайм и чипотле, хариссу и мяту или шпинат и фету. Попробуйте и посмотрите, что вам подходит.
Гиперссылки
Что такое гиперссылка?
Гиперссылки - одно из самых захватывающих нововведений, которые может предложить Интернет. Они были частью Интернета с самого начала, и именно они делают WWW сетью.
Гиперссылки позволяют нам связывать документы с другими документами или ресурсами, для доступа к определенным частям документов или к сайтам, доступным по веб-адресу.
Практически весь веб-контент может быть преобразован в ссылку, так что при нажатии или другой активации веб-браузер переходит на другой веб-адрес (URL).
Примечание. URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео или аудио файлы и все, что может существовать в Интернете. Если веб-браузер не знает, как просматривать файл или управлять им, он спрашивает, хотите ли вы открыть файл (в этом случае ответственность за открытие файла и управление им возлагается на соответствующее собственное приложение на устройстве) или загрузить файл (в этом случае вы можете попробовать разобраться с ним позже)
Анатомия ссылки:
Элементарная ссылка создается путем интеграции текста (или любого другого содержимого, такого как изображение), который вы хотите преобразовать в ссылку в элементе <a>, и путем присвоения ему атрибута href, содержащего веб-адрес, для которого вы хотите ссылка на точку.
Этот HTML-код отобразит ссылку в виде текста "Yougame":
<a href="yougame.biz">Yougame</a>
Мы также можем создать нашу ссылку с изображением, которое мы будем интегрировать между открытием и закрытием тега <a> (<a><img /></a>):
<a href="yougame.biz"><img src="https://yougame.biz/images/rlm/logo/logoconcept4.png" /></a>
Относительные и абсолютные пути, корневой каталог сайта:
Корень сайта:
Как и любое дерево компьютеров, веб-сайт состоит из каталогов и файлов.
В компьютерных файловых системах корень каталогов является основой каталогов в иерархии. Его можно представить в виде ствола дерева, то есть начальной точки всех ветвей (всех каталогов / папок).
Например, когда вы вводите в браузере «голый» веб-адрес, такой как «https://yougame.biz», вы попадаете в корень сайта.
Это означает, что если бы наш URL был «"
Пожалуйста, авторизуйтесь для просмотра ссылки.
, мы бы больше не находились в корне сайта, а в подкаталоге с именем «pages».Относительные и абсолютные пути, корневой каталог сайта:
Относительные и абсолютные пути:
Часто источник ошибок, страницы не найдены, отсутствующие изображения или не примененные стили, формат написания ссылок очень важен. И все же мы не обязательно обращаем внимание на то, как мы указываем эти последние на разные целевые файлы. В зависимости от используемого письменного соглашения может возникнуть множество проблем. Действительно, сосуществуют два типа письма, каждый со своей спецификой:
● относительный путь (без косой черты / начальный)
● абсолютный путь (косая черта / префикс пути)
Относительные и абсолютные пути, корневой каталог сайта:
Относительный путь:
dossier/page.html
Целевой объект (page.html) будет искать браузер на html-странице или в таблице стилей, которую он интерпретирует, в подкаталоге «папка», мы не ставим перед ним косую черту «/».
./dossier/page.html
./: означает, что страница ищется из текущего каталога.
../dossier/page.html
../: означает, что страница ищется из родительского каталога (мы поднимаемся на один уровень выше).
Собрать несколько каталогов вполне возможно. Для этого нужно будет накапливать ../ и, таким образом, подняться на два уровня, можно будет написать ../../dossier/page.html..
Относительные и абсолютные пути, корневой каталог сайта:
Абсолютный путь:
/dossier/page.html
Начальная косая черта «/» указывает, что мы больше не ссылаемся на текущее местоположение, а возвращаемся непосредственно к корню, а затем указываем полный путь.
Во многих случаях абсолютный путь является самым безопасным соглашением о записи, но также наименее гибким, если древовидная структура должна измениться. Поиск целевой страницы будет осуществляться браузером из корня сайта. В нашем примере выше файл page.html будет найден непосредственно из корня домена:
Пожалуйста, авторизуйтесь для просмотра ссылки.
/page.html.Формы <form>
HTML-формы являются одним из основных векторов взаимодействия пользователя с веб-сайтом или приложением. Они позволяют пользователю отправлять данные на веб-сайт. В большинстве случаев эти данные отправляются на веб-серверы, но страница также может их перехватить и использовать сама.
Форма HTML состоит из одного или нескольких виджетов. Это могут быть текстовые поля (одна или несколько строк), поля выбора, кнопки, флажки или переключатели. В большинстве случаев эти элементы связаны с меткой (тег <label>), которая описывает их роль.
Основное различие между формой HTML и обычным документом HTML заключается в том, что обычно данные, собранные формой, отправляются на веб-сервер. В этом случае вам необходимо настроить веб-сервер для получения этих данных и их обработки. Настройка такого сервера не входит в число тем этого урока.
Элемент <form>:
Все HTML-формы начинаются с такого элемента <form>:
<form action="traitementFormulaire.php" method="POST">
</form>
Этот элемент описывает форму. Это элемент-контейнер, как элементы <div> или <p>, но он также принимает несколько определенных атрибутов, чтобы контролировать его поведение. Все его атрибуты являются необязательными, но установка по крайней мере атрибутов действия и метода считается хорошей.
упражняться.
● Атрибут action определяет место (URL-адрес), куда должны быть отправлены данные, собранные формой.
● Атрибут метода определяет метод HTTP, используемый для отправки данных (это может быть «получить» или «отправить»).
Анатомия формы для сбора адресов электронной почты:
1. <form id="newsletter" action="traitementFormulaire.php" method="POST">
2. <p class="txtCentre">подпишитесь на мою рассылку, чтобы получать больше информации</p>
3. <input type="email" class="inputEmail" placeholder="Votre e-mail" />
4. <input type="submit" value="Envoyer" class="boutEnvoyer" />
5. </form>
1. Откройте элемент формы.
2. Мы можем интегрировать стандартные элементы HTML в форму, здесь абзац.
3. Элемент <input type = "email"> является одним из виджетов формы. Он позволяет вам ввести адрес электронной почты (указанный с помощью атрибута type = "email") в однострочное текстовое поле.
4. Элемент <input type = "submit"> - это второй виджет формы. Будет отображена кнопка с текстом «отправить» (который мы определили с помощью атрибута value = «отправить»). Этот элемент используется для отправки формы на сервер, который будет обрабатывать нашу форму.
5. закрытие тега <form>
Последнее редактирование:
