Тематический план

  • 1.1 HTML страница и ее структура




     HTML

    HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

    HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определенным образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то еще, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее.

    Давайте посмотрим, как отдельные элементы объединяются в целую HTML страницу.


    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

                       <title>Моя тестовая страница</title>

              </head>

              <body>

     

              </body>

    </html>

     

    Здесь мы имеем:

    • <!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включен для того, чтобы все работало правильно. На данный момент это все, что вам нужно знать.
    • <html></html> — элемент  <html>. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
    • <head></head> — элемент  <head>. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
    • <body></body> — элемент  <body>. В нем содержится  весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то еще.
    • <meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
    • <title></title> — элемент  <title>. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете ее в закладки/избранное.



  • 1.2 HTML работа с тегами



     Страница сайта

    Страница сайта — это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head> для служебного содержимого страницы и тег <body> - для основного текста, который и виден на экране браузера.

    В служебное содержимое, которое располагается внутри тега <head>, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8, подробнее об этом в видео, которое будет ниже на пару абзацев).

    Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так - <!DOCTYPE html>.

    Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере - скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим - посмотрите видео под примером).




    Думаю, после того как вы прочитали про основную структуру страницы, у вас по-прежнему остается некоторое недопонимание, как все это выглядит на практике. Поэтому я снял специальное видео, в котором покажу вам, как сделать вашу первую HTML страницу и запустить ее в браузере (в нем я также расскажу про title страницы, про кодировки, про оформление кода).


     Абзацы


    Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге - каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).

    Абзац создается с помощью тега <p> таким образом:




     Заголовки h1, h2, h3, h4, h5, h6


    Кроме абзацев важное значение на странице имеют заголовки. Их также можно сравнить с заголовками из книги - каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.

    Заголовки создаются с помощью тегов <h1>, <h2>,<h3>,<h4>,<h5>,<h6>. Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы, название блоков страницы, в h3 - название подблоков и так далее.

    Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Смотрите пример:




     Жирный шрифт


    Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать жирным и обычный текст - достаточно взять его в тег <b>. Смотрите пример:




    Обратите внимание на то, что тег <b> следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b делает жирным отдельные кусочки текста.

     Курсив

    Кроме жирного можно сделать также и курсив с помощью тега <i>:




     Списки


    Наряду с абзацами и заголовками существует еще один важный элемент страницы - это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).

    Списки создаются с помощью тега <ul>, внутри которого обязательно должны идти теги <li>. Тег  ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя. Смотрите пример:




    Списки, созданные через тег ul, называются  неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег  <ol>, а пункты таких списков также создаются через теги li.

    Давайте сделаем упорядоченный список, используя тег ol:




    Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место - и нумерация сама перестроится (то есть мне не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы я расставлял ее вручную).


     Ссылки



    Ссылки являются теми элементами, которые делают из интернета интернет. Нажимая на ссылки, мы можем переходить с одной страницы сайта на другу. Если бы их не было - интернет был бы просто набором страниц, никак не связанных друг с другом.

    Ссылка создается с помощью тега <a>, при этом у нее должен быть обязательный атрибут  href, в котором хранится адрес той страницы, на которую ведет ссылка. Смотрите пример:




    Ссылки бывают абсолютные и относительные, кроме того, они могут вести как на ваш сайт, так и на чужой.


     Картинки


    Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта. Для этого предназначен тег <img>, имеющий обязательный атрибут src, в котором хранится путь к файлу картинки.

    Как это работает, посмотрим на следующем примере:




    Обратите внимание на то, что тег <img> не требует закрывающего тега.

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

    Ссылкой может быть не только текст, но и картинка - для этого достаточно тег  <img> вложить в тег <a>, как это сделано в следующем примере. Нажмите на картинку - и вы перейдете по ссылке на сайт phphtml.net (чтобы потом вернуться назад на книжку - нажмите кнопку "назад" в браузере):




     Разрыв строки


    Вспомните, что будет, если сделать, к примеру, два абзаца рядом - в этом случае текст, который лежит в каждом из них, будет начинаться с новой строки.

    Давайте убедимся в этом на следующем примере:




    Бывают, однако, ситуации, когда мы хотели бы, чтобы у нас был один абзац, но некоторый текст в нем начинался с новой строки. Зачем такое может понадобится? К примеру, я хочу набрать стихотворение, но не хочу разбивать каждую его строку в отдельный абзац, так как это было бы не очень логично.

    Чтобы сделать такое, в том месте, где должен быть разрыв строки, следует написать тег <br>. Учтите, что этот тег особенный и не имеет закрывающего.

    Давайте посмотрим на его работу на следующем примере:




     Комментарии HTML



    Практически во всех языках программирования есть такое понятие как "комментарии". Комментарии - это такой текст, который будет проигнорирован браузером - на экране он будет не виден, но останется в исходном коде страницы.

    Для чего нужны комментарии? Во-первых, для того, чтобы оставлять в исходном коде пометки себе или тому человеку, который будет править ваш код после вас. Во-вторых, с помощью комментариев можно убирать некоторые вещи, которые вы бы сейчас хотели удалить, но потом, может быть, захотите вернуть. Их можно просто временно закомментировать, а потом откомментировать при необходимости.

    Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса - <!--, потом текст комментария, а потом два дефиса и уголок - -->. Смотрите пример:






  • 1.3 Работа с блоками, вёрстка




     Работа с блоками

    Когда в браузере открывается веб-страница, он воспринимает ее теги в виде отдельных прямоугольных блоков (контейнеров), наполненных содержимым. У каждого такого элемента есть свой контент (текст, графика и прочее) и свои настройки CSS. Для блоков можно определять размеры, отступы, поля, рамки, фон, тем самым создавая для них стиль. Рассмотрим основные свойства CSS, устанавливаемые для блоков:

    • padding (и производные padding-left, padding-right, padding-top , padding-bottom) – это внутренний отступ от края содержимого до границы блока. Можно устанавливать отступы либо от всех четырех сторон контента, либо только от нужных вам.
    • margin (и производные margin-left, margin-right, margin-top , margin-bottom) – это поле, которое являет собой расстояние от границы одного блока до другого. Новички иногда путают свойство margin со свойством padding, поэтому для наглядности ниже показаны рисунки, где лучше понятна разница между этими свойствами. Поля можно задавать как для всех сторон блока одновременно, так и для отдельных.
    • border (и производные border-left, border-right, border-top , border-bottom) – это рамка (граница), которую можно задать для блока. Поля margin остаются за пределами рамки, всё остальное находится внутри неё. Рамку можно установить на всех четырех сторонах или только на нужных вам.
    • background-color – это цвет фона, заливка цветом, которая применяется к заднему фону блока и не выходит за его пределы. Поля этим цветом не закрашиваются, а контент и рамка располагаются поверх фона.


    Схематическое изображение блока


    Также можно настраивать ширину width и высоту height блока (а точнее, контента, который содержится в блоке). Чтобы затем посчитать ширину или высоту всего блока (вместе с отступами, рамкой и полями), необходимо сложить все эти значения. Например:

    width + padding-left + border-left + margin-left  + padding-right + border-right + margin-right  = полная ширина блока

    Аналогично вычисляется полная высота блока.

    Основы верстки:

    Задача верстальщика перенести с помощью html кода и таблиц css скелет будущего сайта в виртуальный мир. Проще говоря, перенести размеры и пропорции ресурса в форму, понятную для браузера.

    В процессе верстки кодом html происходит разбивка «скелета» сайта на части. А с помощью css (каскадных таблиц стилей) задаются размеры его «костей», цвет и расположение.

    Различают несколько видов верстки:

    I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:

    Также к основным недостаткам табличного кода относится его долгая загрузка и плохая индексация содержимого поисковыми системами.

    Содержимое страницы, сверстанной на основе таблиц, не будет отображено до тех пор, пока не загрузятся все данные. Блочная верстка позволяет отображать каждый загруженный элемент отдельно.

    Плохая индексация табличных страниц объясняется большими промежутками между блоками текста, расположенного в разных ячейках таблицы.

    Теперь табличная верста редко используется в качестве основного метода создания сайтов. Сейчас ее применяют лишь для структурирования табличных данных и расположения графических изображений.

    II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:

    Отделение стиля элементов от кода html;

    Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.

    Лучшая индексация поисковиками;

    Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;

    Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок).

    Основным недостатком блочной верстки является некая «двусмысленность» понимания ее кода различными браузерами. Поэтому часто html страницы приходится «доводить» путем использования специальных хаков.

    С появлением блочной верстки родилось такое понятие, как «кроссбраузерность». Из-за различия отображения одного и того же элемента в разных браузерах верстальщикам приходится вставлять в основной html целые куски кода (хаки).

    Действие хака является узкоспециализированным и решает проблему некорректного отображения лишь в одном браузере.


    • 1.4 Синтаксис CSS




       CSS

      Cascading Style Sheets (CSS) — это язык иерархических правил (таблиц стилей), используемый для представления внешнего вида документа, написанного на HTML или XML (включая различные языки XML, такие как SVG и XHTML). CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.

      Cтилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.




      Вначале пишется имя селектора, например, TABLE, это означает, что все стилевые параметры будут применяться к тегу <table>, затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.

      CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика.

      Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности:




      Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите все свойства для каждого селектора вместе:




      Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже:




      В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.

      На самом деле такой записи лучше вообще избегать и удалять повторяющиеся значения. Но подобное может произойти случайно, например, в случае подключения разных стилевых файлов, в которых содержатся одинаковые селекторы.

      Значения

      У каждого свойства может быть только соответствующее его функции значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа.

      Комментарии

      Комментарии нужны, чтобы делать пояснения по поводу использования того или иного стилевого свойства, выделять разделы или писать свои заметки. Комментарии позволяют легко вспоминать логику и структуру селекторов, и повышают разборчивость кода. Вместе с тем, добавление текста увеличивает объём документов, что отрицательно сказывается на времени их загрузки. Поэтому комментарии обычно применяют в отладочных или учебных целях, а при выкладывании сайта в сеть их стирают.

      Чтобы пометить, что текст является комментарием, применяют следующую конструкцию /* ... */





    • 1.5 Селекторы CSS и их виды



       Селекторы

      Базовые (селекторы тегов) — самый простой для понимания, название которого совпадает с именем соответствующего тега в HTML коде документа.

      Возьмем в качестве примера горизонтальную линию как элемент дизайна страницы сайта. Линия создается с помощью тега hr, который прописывается в HTML-коде. Современные тенденции направлены на разгрузку HTML кода за счет использования оформления с помощью стилей CSS, представленных в отдельном файле. Поэтому атрибуты тега hr (width, size, color, noshade) заменяем на свойства стилей, прописанные в style.css:




      Которые позволяют получить точно такой же результат:



      Классы (class) и идентификаторы (id) — имеют некоторую общность, поскольку являются атрибутами тегов, к которым они добавляются в HTML-коде, и одновременно селекторами, кои и указываются в файле CSS, каждый со своим набором свойств.

      Cвязь элементов, описываемых тегами с классами и идентификаторами, осуществляется тем, что параметрами id и class являются названия селекторов. Примеры ниже.

      Тег с классом «text-x» в HTML-коде:




      Стили для этого класса в CSS (впереди обязательно нужно поставить точку):




      То же самое для идентификаторов HTML:




      CSS (перед идентификатором ставится значок решетки):




      3. Дочерние селекторы — как известно, в HTML различают родительские элементы (теги) и дочерние (их потомки), которые в них вложены. Весьма логично, что в CSS точно такое же разделение существует между соответствующими этим элементам селекторами.

      Правило дочернего селектора указывает, что свойства стилей будут применены к конкретному элементу (в ниже следующем примере это тег гиперссылки a) только в том случае, если он является непосредственным потомком (1-й уровень вложенности) определенного родителя (li):




      Контекстные селекторы — очень напоминают дочерние селекторы с той лишь разницей, что здесь свойства CSS будут применены ко всем потомкам относительно указанного родителя, вне зависимости от степени вложенности (родительский селектор в правиле стилей идет первым и отделен от дочернего пробелом):




      Соседние селекторы — данное CSS правило справедливо для элементов, описанных тегами, которые идут друг за другом в HTML-документе, причем, не имеют родственных отношений, иными словами, не вложены друг в друга. Соответствующие им селекторы отделяются друг от друга знаком «+», причем, свойства будут применены ко второму элементу лишь в том случае, если он располагается непосредственно рядом с первым:




      Универсальный селектор — применяется в тех случаях, когда нужно задать единый стиль оформления для тех или иных элементов на веб-странице, расположенных в различных ее областях. Например, определить вид и размер шрифта. Этот селектор обозначается звездочкой:




      Селекторы атрибутов — позволяет присваивать одни и те же стили всем элементам на веб-странице, имеющим одинаковые атрибуты:




      Либо определенным элементам:




      И в том, и в другом случае значение атрибута не имеет никакого значения. Но есть еще большое количество вариантов, которые предполагают применение прописанных свойств в зависимости от содержания параметра конкретного атрибута.



    • 1.7 Глоссарий по тегам HTML

      <header> </header> — теги обрамляющие элементы дизайна верхней части сайта, так называемая "шапка страницы". Также

      теги header можно использовать как верхнюю часть тега section.

      <section> </section> — теги обрамляющие повторяющиеся части страницы или основного контента, например если на

      странице находятся несколько глав рассказа, то каждую главу можно поместить между этими тегами. Или если вы нажмете

      на ссылку в сайдбаре (например по ссылке какой-нибудь рубрики), то появится страница на которой будут ссылки с

      описаниями, ведущие на статьи принадлежащие к данной рубрике, так вот ссылки с описаниями можно обрамлять тегами

      section, а также товары с описаниями в интернет магазине, комментарии к записям, комментарии к теме на форумах и т.д.

      <footer> </footer> — теги обрамляющие нижнюю часть сайта, так называемый "подвал страницы", который может содержать

      имя автора (компании), контакты (адреса, телефоны), правовую информацию (копирайты) и т.п. Также теги footer можно

      использовать как нижнюю часть тега section, т.е. сами теги footer будут находиться между тегами section

      <nav> </nav> — теги обрамляющие основное меню на сайте.

      <article> </article> — теги обрамляющие основной контент страницы: статью, запись в блоге, новость, первую запись форума

      <aside> </aside> — теги обрамляющие сайдбар. Сайдбар — это так называемая "боковая панель", которая обычно содержит

      блоки рубрик (категорий), облака тегов (меток), список последних записей и т.п. Тегами aside также можно обрамлять

      счетчики, виджеты (например комментарии от вконтакта), социальные кнопки.

      <mark> </mark> — текст находящийся между этими тегами становится "выделенным". Одно из предназначений тегов mark,

      обрамлять слова в тексте, которые например совпадают со словом введённым пользователем в поисковую строку.

      <canvas> </canvas> — теги предназначены для создания специальной области на сайте, в которой можно создавать

      векторные фигуры и с помощью языка программирования JavaScript, манипулировать ими. Canvas в будущем, должен

      заменить Flash-технологию (угу в теории…).

      <video> </video> — теги предназначены для воспроизведения видеофайлов, без использования сторонних программ

      (плагинов, расширений).

      <progress> </progress> — теги предназначены для вывода динамического индикатора шкалы (например шкалы загрузки

      файла), при котором результат измерения меняется в реальном времени.