Полная версия
Введение в веб-разработку с HTML, CSS, JavaScript
Это символы <, > и &. И эти символы зарезервированы в HTML. Например, если вы используете в тексте знаки меньше (<) или больше (>), браузер может перепутать их с тегами.
И для отображения зарезервированных символов в HTML используются сущности символов.
Вместо использования символа меньше <, вы должны использовать объект HTML, который начинается с амперсанда &, а затем следует lt;. и браузер интерпретирует это как символ меньше <.
Аналогично, для символа больше > нужно использовать >.
А для символа амперсанда & нужно использовать &.
На самом деле HTML содержит целую массу сущностей символов HTML.
И одним из наиболее распространенных является символ авторского права. И основная причина, по которой мы используем для него сущность символа, заключается в том, что этот символ не очень-то и легко найти на любой клавиатуре.
Поэтому мы можем использовать вместо символа авторского права – ©.
Еще одна полезная сущность HTML, которая очень часто используется, это , что означает неразрывный пробел. При этом слова с неразрывным пробелом всегда будут на одной строке, то есть браузером эти слова будут переноситься на новую строку вместе.
Когда мы сожмем браузер и сделаем его чуть менее широким, эти слова либо вместе переместятся на следующую строку, либо останутся на одной строке, но они не будут разделены.
Теперь, давайте поговорим о ссылках на другие документы и способы их создания на HTML-странице.
Итак, первый тип ссылок, который мы собираемся рассмотреть, – это внутренние ссылки.
И мы создаем ссылки с помощью элемента <а> с атрибутом href.
Атрибут href указывает гипертекстовую ссылку. И значение href может быть как относительным, так и абсолютным URL-адресом.
В нашем случае, так как мы обсуждаем внутренние ссылки, которые указывают на внутренние веб-страницы сайта, ссылки являются относительными URL-адресами.
Также полезно указывать атрибут title для тега a. Атрибут title используется программами чтения с экрана, которые помогают слабовидящим людям просматривать веб-страницу.
Далее, содержимое между открывающим и закрывающим тегами элемента <а> – это содержимое, по которому вы сможете щелкнуть, чтобы перейти к ссылке href.
Теперь, обратите внимание на второй пример тега a. В этом примере мы окружаем тег div тегом а. Другими словами, этот тег div будет контентом ссылки, по которому можно будет щелкнуть.
Таким образом, первая ссылка является встроенным тегом, так как она не инициирует переход на новую строку. Но во втором случае, мы окружаем блочный тег div тегом a.
А тег a в HTML5 одновременно является и встроенным элементом, и элементом уровня блока. Именно это позволяет нам взять тег a и вложить в него тег div, контент которого начинается с новой строки.
Авторы спецификации HTML5 знали, что во многих случаях нужно иметь возможность щелкнуть по целой области HTML документа, например по логотипу компании, чтобы перейти на ее сайт.
До HTML5 приходилось использовать всевозможные приемы, чтобы добиться такого же эффекта, потому что тег a был только встроенным тегом, и мы не могли обернуть тег a вокруг тега div.
Теперь, о внешних ссылках.
На самом деле во внешних ссылках нет ничего особенного, кроме того, что их значение href обычно начинается с http://, потому что обычно внешние ссылки указывают на документы других веб-сайтов.
Однако здесь есть одна особенность элемента a, которая довольно часто используется в сочетании с внешними ссылками. И это целевой атрибут target.
Когда для атрибута target установлено значение _blank, это заставляет браузер открывать страницу по ссылке в новой вкладке или в новом окне.
Таким образом сайт не закрывается, а новая страница открывается в новой вкладке, так что вернуться на сайт после просмотра страницы по ссылке будет удобно.
Следующий тип ссылки – это ссылка на фрагмент страницы. Эта ссылка позволяет навигацию по большому документу, так что не нужно прокручивать его и искать нужный вам фрагмент документа.
Такая ссылка имеет специфический формат атрибута href. Здесь есть символ #, за которым следует идентификатор фрагмента, как в этом примере section1, section2.
Таким образом эта ссылка указывает на раздел страницы внутри элемента, который имеет идентификатор с атрибутом id.
И вы можете использовать любой тег с идентификатором раздела.
Обратите внимание, что имя раздела не содержит знака #. Только ссылка на этот раздел содержит знак #.
И здесь у нас даже есть ссылка «назад к началу», которая указывает на начало документа – тег h1 с идентификатором top.
И если вы щелкнете по такой ссылке, идентификатор фрагмента появится в URL-адресе, например index.html#section1, и вы можете скопировать и использовать этот URL-адрес в качестве другой ссылки. Так что при открытии страницы можно будет сразу перейти к разделу, на который указывает идентификатор.
Теперь, давайте поговорим о том, как включать изображения в HTML-документы.
В этом примере первое изображение отображается прямо перед цитатой.
И здесь у нас есть соответствующий комментарий. Так выглядит HTML-комментарий.
Комментарий в HTML начинается с угловой скобки, восклицательного знака, далее тире, тире, а затем комментарий закрывается тире, тире, и угловой скобкой.
И браузер полностью проигнорирует этот комментарий и не отобразит его.
Теперь давайте посмотрим на тег изображения .
Изображение отображается в HTML с помощью этого тега img, который является сокращением от слова image. А атрибут src тега img – это URL-адрес, указывающий на файл изображения.
И вы можете заметить, что этот URL-адрес ничем не отличается от href, который вы видели у тега ссылки . Это может быть относительный URL-адрес или абсолютный URL-адрес, если он содержит внешнюю ссылку.
Далее мы указываем ширину и высоту изображения. Хотя это и не обязательно, рекомендуется всегда указывать ширину и высоту. И еще есть атрибут alt, который используется программами чтения с экрана, помогающими людям с нарушениями зрения.
Как вы видите, это изображение отображается в браузере в одной строке с текстом, так как тег img является встроенным элементом. Если бы это было не так, изображение было бы на своей собственной строке.
Теперь давайте посмотрим на другой тег img. Здесь используется внешняя ссылка, указывающая на изображение в Интернете.
И здесь не указана высота и ширина изображения. Поэтому оно будет отображаться со своими изначальными размерами. И если эти размеры очень большие, изображение может занять всю вашу HTML страницу, не оставив места для остального контента. Вот почему рекомендуется указывать высоту и ширину изображения.
И еще, если для загрузки изображения требуется время, страница может дергаться во время загрузки. Но если вы используете ширину и высоту изображения, вы говорите браузеру, чтобы он зарезервировал пространство для изображения и загружал его в эту область. Тогда страница не будет дергаться.
Вы можете моделировать скорость загрузки в инструментах разработчика браузера. Здесь вы можете установить ограничение сети и посмотреть, как выглядит страница во время загрузки изображения.
Еще хуже, если вы полагаетесь на изображение, чтобы создать какой-то визуальный макет для своей страницы, и по какой-то причине изображение не загрузилось, например, URL-адрес может быть неверным. Если мы полагаемся на определенное пространство между цитатой и нижним колонтитулом страницы, мы больше не сможем видеть это пространство, так как изображение не загружается.
Однако, если мы укажем ширину и высоту изображения, даже несмотря на то, что изображение не загружается, визуальный интервал и визуальный макет остаются правильными.
Вопросы
Вопрос 1
Основная цель HTML состоит в том, чтобы
(подсказка: что-то, что не сможет выполнить обычный текстовый файл с содержимым)
Отобразить содержимое веб-страницы для пользователя
Сообщить структуру контента
Сообщить браузеру, как расположить и выровнять содержимое в окне браузера.
Сообщить браузеру, что должно произойти после загрузки страницы
Вопрос 2
W3C (Консорциум World Wide Web) – единственная организация, которая диктует, как браузеры должны реализовывать HTML5.
Истина
Ложь
Вопрос 3
ВСЕ теги HTML5 должны иметь
Наличие открывающего тега
Наличие закрывающего тега
Иметь хотя бы 1 атрибут
Быть в нижнем регистре, т.е.
Вопрос 4
Определите правильное объявление страницы HTML5
Вопрос 5
Что произойдет, если вы не укажете объявление HTML5?
Ничего. HTML5 очень либерально относится к своему объявлению, и это всего лишь рекомендация по его использованию.
Браузер автоматически вернется к предыдущей версии HTML.
Страница будет интерпретироваться в режиме причуд.
Страница вообще не отобразится.
Вопрос 6
Браузеры ВСЕГДА интерпретируют HTML последовательно, сверху вниз.
Истина
Ложь
Вопрос 7
Определите недопустимый фрагмент кода HTML ниже
1.
I am just a lonely quiz answer. Will you click me? I am bored!
2.
The sale numbers are in…
You ARE a closer, Johnson!
3.
Wow!
You're ignoring all the other answers just to
look at me?! I AM special!
…
Wait! Where are you going?
What if I AM the answer you've been searching for???!
Вопрос 8
Метатеги передают информацию о браузере на сервер.
Истина
Ложь
Вопрос 9
Без применения каких-либо дополнительных стилей следующий фрагмент кода будет отображаться в браузере как какое количество строк текста? (Предположим, что браузер растянут достаточно широко, чтобы ни одна строка не переносилась).
I took this really cool book
I think it's
my favorite book I've EVER taken!
Here is the URL for it:
Does anyone know how I can give this book 6
out of 5 stars?
Thank you,
–Yaakov.... !
Вопрос 10
Используя только HTML, как бы вы удостоверились, что 3 слова в HTML-документе ВСЕГДА появляются вместе в 1 строке, даже если текст переносится по словам, потому что окно браузера слишком узкое для этой текстовой строки?
Невозможно выполнить только с помощью HTML!
Поместите &nowrap; перед 1-м словом и после 3-го слова
Поместите после 1-го слова и после 2-го слова (без пробелов)
Поместите перед 1-м словом и после 3-го слова
Вопрос 11
Как заставить браузер открывать ссылку в новом окне или вкладке?
Укажите несколько специальных метатегов как часть страницы
Попросите пользователя щелкнуть ссылку правой кнопкой мыши и выбрать «Открыть в новой вкладке».
Включить атрибут target='_blank' как часть тега
Включите атрибут target="new" как часть тега
Вопрос 12
Несмотря на то, что атрибуты ширины и высоты тега img не требуются, всегда полезно их использовать.
Истина
Ложь
Введение в CSS
Мы уже говорили о том, что в Интернете главное – контент. И мы говорили о том, что HTML определяет структуру этого контента.
Но, хотя контент и является основой, очень важно и то, как пользователи воспринимают этот контент. И когда дело доходит до реального веб-сайта, одной структуры недостаточно, вы должны оформить свой контент таким образом, чтобы он был приятным и полезным для пользователя.
И использование цвета, позиционирования, размера и прочего является частью этого оформления.
Каскадные таблицы стилей, или CSS, – это технология, обеспечивающая возможность стилизации и оформления контента в Интернете.
В качестве примера можно посмотреть сайт csszengarden.com, где один и тот же HTML файл с помощью CSS выглядит фантастически по-разному.
CSS или каскадные таблицы стилей работают следующим образом, они связывают определенные правила с элементами HTML.
Эти правила управляют тем, как должно отображаться содержимое указанных элементов.
И хотя стилизация всей веб-страницы может быть довольно сложным процессом, определить простое правило CSS довольно просто.
Правило CSS состоит из селектора, в данном случае это p, тэг абзаца, и это говорит о том, что это правило должно применяться к содержимому каждого тэга абзаца на всей HTML-странице.
За селектором следуют открывающие и закрывающие фигурные скобки. И внутри этих фигурных скобок у нас есть объявление CSS, которое состоит из двух частей, свойства и значения.
Имя свойства предопределено спецификацией CSS, и для каждого свойства существует определенное количество предопределенных значений.
Каждое свойство отделяется от значения двоеточием и заканчивается точкой с запятой.
С технической точки зрения, точка с запятой не является обязательным требованием, но это лучшая практика, и вы должны всегда ее использовать.
Каждое правило CSS может состоять из нескольких объявлений. Например, в этом случае мы указываем, что содержимое тегов абзаца на нашей HTML-странице должно иметь определенный шрифт и определенный размер шрифта.
Теперь, набор этих правил CSS называется таблицей стилей.
В этом HTML-документе у нас есть заголовок h1, пара заголовков h2 и пара абзацев между ними, обозначенные тегом абзаца p. И что мы хотим сделать, так это придать этим элементам индивидуальный стиль. И мы разместим таблицу стилей прямо в разделе заголовка нашего HTML-документа.
И в этой таблице мы видим тег абзаца. И мы изменим его цвет на синий, размер шрифта на 20 пикселей и ширину на 200 пикселей, что означает, что он будет занимать область экрана шириной 200 пикселей.
Далее для тега h1, мы определяем зеленый цвет и увеличиваем его размер шрифта, и мы также выравниваем его по середине экрана.
Так эта страница выглядит в браузере.
И если вы посмотрите на подзаголовок 1, а затем на подзаголовок 2, вы увидите, что они выделены жирным шрифтом и немного больше, чем обычный текст.
Откуда взялся этот стиль? Ведь мы не определяли стиль для тега h2.
И этот стиль исходит от самого браузера. Каждый браузер поставляется с определенными стилями по умолчанию, которые применяются к различным элементам HTML.
Таким образом, во многих случаях наша работа заключается в том, чтобы переопределить эти стили браузеров по умолчанию.
Как мы уже говорили, правило CSS состоит из селектора, за которым следуют открывающие и закрывающие фигурные скобки с объявлениями CSS, состоящими из двух частей, свойства и значения.
И селекторы CSS используются для определения того, к какому элементу HTML или набору элементов следует применить объявления CSS. Браузер использует свой API-интерфейс для обхода документа и выбора элементов, соответствующих данному селектору.
И существует три разных типов селекторов: элемент, класс и идентификатор.
Первый тип селектора – элемент – это просто указание имени элемента. Например, в этом случае селектор p говорит о том, что текст каждого абзаца в нашем HTML-документе должен быть синего цвета.
И это объявление никак не влияет на другие элементы, содержащие текст. Например, у нас может быть элемент div, содержащий текст, но на этот текст не повлияет наше правило CSS для абзаца.
Далее идет селектор класса, который указывается точкой и именем класса. В этом случае мы создаем класс blue CSS, который будет окрашивать синим цветом.
И селектор класса требует изменения вашего HTML-документа, так как каждый элемент, к которому вы хотите применить этот класс, должен иметь атрибут класса с именем этого класса.
В этом случае у нас есть p, тег абзаца и тег div, и оба имеют атрибут class="blue" и, следовательно, их текстовое содержимое будет окрашено в синий цвет.
Обратите внимание, что это совершенно не влияет на другой абзац, не помеченный атрибутом class="blue".
И обратите внимание на разницу между тем, как вы определяете класс, и тем, как вы используете класс. Вы всегда определяете класс с точкой перед именем. И между точкой и именем класса не должно быть пробела. Однако, когда вы используете класс, вы не используете точку в его имени, вы просто используете его имя.
И последний тип селектора – это селектор id.
Вы указываете селектор идентификатора с помощью значения идентификатора элемента в вашем HTML-документе, которому предшествует знак решетки.
Так, например, если у вас есть элемент div с id="name", а затем вы указываете правило CSS с помощью селектора #name, объявления CSS будут применяться к содержимому элемента div с его значением id name.
Селектор идентификатора определяется знаком решетки, за которым следует значение идентификатора в вашем HTML-документе. И опять же, у вас не может быть никакого промежутка между ними.
Теперь, чтобы писать более эффективные правила, CSS позволяет нам сгруппировать несколько селекторов в одно правило CSS.
Здесь у нас есть два селектора, сгруппированные вместе, div и также селектор класса blue, так как они оба используют одно и то же объявление CSS.
Помимо группировки селекторов существует объединение или комбинирование селекторов. И объединение селекторов – это очень мощная техника, позволяющая более точно выделять элементы документа.
Первый способ комбинирования селекторов – это селектор элемента с селектором класса.
Здесь у нас есть селектор элемента p, за которым сразу без пробелов следует точка, которая является селектором класса. И это говорит о том, что мы хотим выделить каждый элемент p, который имеет атрибут класса со значением big.
И обратите внимание на отсутствие пробела между этими селекторами. Если вы поставите пробел, это будет означать совершенно другую комбинацию.
Этот метод довольно часто используется, когда у вас есть оправило CSS, которое применяется к различным элементам, но вы хотите, чтобы для конкретного элемента это правило изменилось.
Следующим типом комбинации селекторов является дочерний селектор.
В этом случае указывается селектор, за которым следует угловая скобка, за которой следует еще один селектор. И вы читаете эту комбинацию справа налево.
И в этом случае мы выделяем каждый элемент p, который является прямым дочерним элементом элемента article. Таким образом, в этом примере элемент p, который является прямым дочерним элементом элемента article, получит стиль синего цвета, в отличие от обычного элемента p.
Другой тип комбинации селекторов – это селектор потомков.
И синтаксис этой комбинации – селектор пробел родительский селектор. И так же, вы читаете эту комбинацию справа налево.
В этом случае мы выделяем каждый элемент p, который находится внутри элемента article на любом уровне, что означает, что даже если это не прямой дочерний элемент, даже если он глубоко внутри, до тех пор, пока один из его родителей является элементом article, это правило будет применяться.
Теперь, нужно отметить, что эти комбинации селекторов не ограничиваются селекторами элементов. Так, например, у нас может быть комбинация .colored p элемента с классом, или комбинация класса с классом.
Помимо простых селекторов (выбор элементов на основе тега, идентификатора, класса), есть также селекторы псевдоклассов, которые выбирают элементы на основе определенного их состояния.
Селекторы псевдоклассов дают возможность стилизации документа на основе взаимодействия пользователя со страницей. Например, мы можем сделать так, чтобы стиль элемента менялся, когда пользователь наводит курсор мыши на элемент.
Селектор псевдокласса определяется с помощью указания некоторого селектора с двоеточием и предопределенным именем псевдокласса. И существует множество селекторов псевдоклассов.
Например, селектор ссылок «:link» стилизует не посещенные ссылки. Здесь мы окрашиваем не посещенную ссылку в желтый цвет.
Также мы можем стилизовать посещенную ссылку с помощью селектора «:visited».
Селектор «:hover» используется для выбора и стилизации элементов при наведении на них курсора мыши. И селектор «:hover» можно использовать для любых элементов, а не только для ссылок или кнопок.
При использовании селектора «:hover» для ссылок, он должен идти после селекторов «:link» и «:visited» в определении CSS.
Селектор «:active» используется для выбора и стилизации активной ссылки, т.е. ссылки при нажатии на нее. Хотя селектор «:active» можно использовать для всех элементов, а не только для ссылок.
При использовании селектора «:active», он должен идти после селектора «:hover» в определении CSS, что соответствует логики действий пользователя.
Селектор «:nth-child(n)» выбирает каждый элемент, который является n-м дочерним элементом своего родителя. При этом n может быть числом, ключевым словом (четный или нечетный, odd или even) или формулой, например (an + b), где a представляет размер цикла, n – счетчик (начиная с 0), а b – значение смещения.
В этом примере, элемент «This is some text.» в первом теге div никак не стилизован, далее такой же элемент во втором теге div выделен красным цветом. В списке содержимое второго элемента выделено зеленым цветом, и содержимое каждого третьего элемента выделено желтым цветом.
