Вёрстка с нуля. Изучаем язык HTML. Основные понятия и функции

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

Что такое вёрстка

Вёрстка — процесс создания веб-страницы по готовому макету. Он включает в себя создание кода страницы при помощи языка HTML и оформление её с помощью каскадных страниц стилей (css)

Макет создаётся веб-дизайнером.

Показатели хорошей вёрстки (главные-первые три):

  • совпадение с дизайном (в т.ч. совпадение цветов, шрифтов и т.д.)
  • кроссбраузерность (чтобы на всех браузерах отображалась нормально) трудности вызывают браузеры старых версий: эксплэр 7,8.
  • поддержка популярных разрешений (мониторы у пользователей с различ.разрешением) 1024*568 самое маленькое разрешение. Высота экрана не интересует, интересует нас ширина. Минимум:1024 пикселя. Если отображается на 1024, то хорошая вёрстка.
  • валидный и аккуратный код (валидный-  не содержится ошибок, проверяется специальным сервисом; аккуратный-понятный другим верстальщикам.)

Язык html — язык разметки гипертекста. Задача сообщить браузеру, где и какой элемент вывести на главной странице. Это не язык программирования. Язык html это всего лишь структура, всё внешнее оформление — css.

Элементы html

  1. Doctype — указывает тип текущего документа, согласно какому стандарту отображать страницу.(существуют разные версии html:4.0.1,4.0.5,xhtml).
  2. Тег — элемент языка html, текст,заключённый в скобки.
  • парные теги
  • одиночные теги(в конце имеют знак />)

Теги:

  • тег <html> (закрывающий тег: </html>) заключает в себя всё содержимое страницы, должен присутствовать на каждой странице.
  • тег <head> заключает и хранит всю служебную информацию, которая необходима для браузера и поисковых систем. Внутри него пишем все служебные теги.
  • <meta> для установления кодировки текущего документа (например,utf-8). Одиночный тег. Чтобы в notepad перекодировать документ в utf-8 заходим: кодировка->преобразовать в utf-8 без BOM.
  • <title> задает название страницы (это название выводится в виде текста вкладки)
  • <body> весь контент, который выводится в браузере (парный тег).
  • <h1></h1> (парный тег) отображает заголовок текста первого уровня (самый главный заголовок на странице).
  • <h2></h2> отображает заголовок текста второго уровня. До заголовка 6 уровня: <h6></h6>
  • <p></p> тег абзаца
  • <br /> тег переноса строки (одинарный)
  • <strong></strong> жирный шрифт
  • <em></em> курсив
  • <img /> изображения. Имеет обязательные атрибуты: src и alt.
  • <ol></ol> тег нумерованного списка. (парный)
  • <ul></ul> тег маркированного списка (парный)
  • <li></li> определяет отдельный элемент списка.
  • <a></a> тег для создания гиперссылок (парный тег)
  • <table></table> для создания таблиц
  • <tr></tr> создаёт ряд таблицы
  • <th></th> тег для создания шапки таблицы
  • <td></td> тег для создания контента таблицы
  • <form></form> тег для создания форм
  • <input /> используется для создания текстового поля ввода, кнопок.
  • <label></label> активация поля ввода нажатием на лейбл
  • <radio></radio> тег для создания радиокнопок
  • <checkbox></checkbox> тег для создания чекбоксов
  • <select></select> — тег для создания списков выбора форм
  • <textarea></textarea> -тег для создания текстовых областей с возможностью переноса строк
  • <div></div> блочный тег для выделения фрагмента, чтобы применить к нему стили css
  • <span></span> строчный тег применяется, чтобы для какого-то участка текста задать некие стили
  • <link /> тег для подключения к html коду таблиц стилей css.
  1. Блочные и строчные элементы.
  • Блочные: заголовок,абзац. Занимают всю ширину, которая им допускается. Могут включать в себя другие блочные элементы и строчные элементы. Строчный не может в себе содержать блочный элемент, но может содержать другой строчный.
  • Строчные: шрифт,курсив.
  • Внутрь блочного элемента добавляем строчные элементы, а не наоборот.

*Всё, что внутри тега <html> сдвигаем вправо с помощью клавиши tab для удобства. Также поступаем внутри тега <head>

АТРИБУТЫ — дополнит.управляющие слова, с помощью которых мы можем задавать некоторые свойства элемента.

*Атрибуты друг от друга разделяются пробелом (при применении нескольких атрибутов для одного элемента).

  1. Атрибут align(имя атрибута): задаёт выравнивание элементов (по левому краю,центру и т.д.)
  • Значение «center» (значение атрибута — указывается в кавычках)- выравнивание по центру.
  • «left» -выравнивание по левому краю.
  • «right» — по правому краю.
  • «justify» — по ширине.

Пример: <h1 align=»center»>Заголовок</h1> — заголовок первого уровня выравнен по центру.

  1. Атрибут title — подсказка, которая информирует пользователя об этом элементе. Всплывающая подсказка.

Пример: <h1 title=»указывается необходимая всплывающая подсказка»>

  1. Атрибуты: src — источник, указывает путь до изображения, которое мы хотим вставить.

alt — альтернативный текст, который указывается пользователю в случае, если он зайдет на страницу с отключенными картинками.

Пример: <img src=»picture.jpg» alt=»Картинка» />

  1. Атрибуты ширины и высоты: widht=»указывается ширина изображения/таблицы»,height=»указывается высота изображения/таблицы».

*указание размеров картинки убыстряет загрузку страницы

  1. Атрибут type сообщает браузеру к какому типу относится элемент формы. type=»тип элемента».
  2. Атрибут href задаёт адрес документа, на который следует перейти. href=»текст ссылки»
  3. Атрибут target устанавливает как открывать ссылку.Используется для открытия страницы по ссылке в новом окне. target=»_blank»
  4. Атрибут id — универсальный атрибут,котор.можно задавать для любого элемента. Задает стилевой идентификатор для изменения его стиля и обращения к нему через скрипты. Название идентификатора должно быть уникально на странице. id=»уникальное название».
  5. Атрибуты таблицы: border=»толщина рамки» используется для создания рамки таблицы. cellpadding=»значение в пикселях» задает внутренний отступ внутри ячеек таблицы. rowspan=»число рядов по вертикали,которые нужно объединить»-атрибут для объединения ячеек в рядах. colspan=»число колонок по горизонтали, которые нужно объединить»- атрибут для объединения ячеек в колонках.
  6. Атрибуты формы: action=»адрес обработчика формы»-указывает адрес обработчика, к которому обращаются данные формы при их отправке на сервер. По умолчанию значение «#».method=»указываем post или get(в 90% случаях указывается post)» задает метод отправления данных обработчику. По умолчанию значение указываем «post». name=»имя поля(латинскими буквами)»-используется для всех элементов форм,задает имя поля,чтобы обработчик по данному имени смог идентифицировать это поле. value=»значение» — определяет значение элемента формы, которое будет отправлено на сервер. size=»задается в виде количества символов, которые должны вмещаться в данное поле» задаёт ширину поля; maxlengh=»число символов,которое можно ввести в данное поле»-ограничивает количество символов,которое можно ввести в данное поле. for=»уникальный текст идентификатора» — указывает для какого элемента формы соответствует данный лейбл. checked=»checked»- для того, чтобы при выводе на экран пользователю сразу выводилось значение по умолчанию. rows=»высота текстовой области — количество строк»-задаёт высоту текстовой области. cols=» ширина текст.области-количество символов, которые будут отображаться по горизонтали»-задаёт ширину текстовой области.
  7. Атрибуты стиля:
  • rel=»значение» задаёт взаимосвязь между внешним файлом и текущей html страницей.
  • class=»название класса» задаёт стилевой класс, который позволяет связать определённый тег со стилевым оформлением
  • style=»правила описания стилей» применяется для определения стиля элемента с помощью правил css

Изображения (являются строчными элементами)

Вставляются с помощью тега <img /> с атрибутами src и alt.

Пример: <img src=»picture.jpg» alt=»Картинка» />

*Хранить всю графику в отдельной папке для вёрстки.

Относительные пути

  • файл index и картинка лежат на одном уровне. В таком случае в атрибуте src указываем значением название самой картинки: src=»picture.jpg»
  • файл index и папка с изображениями лежат на одном уровне, а картинка в папке. Указываем путь до картинки. src=»images/picture.jpg» Если путь более длинный (несколько папок в папке, указываем весь путь до картинки).
  • если файл index лежит не на одном уровне с папкой с картинками, а в другой папке. Папки находятся на одном уровне. В током случае в начале пути указываем ../  Это означает, что относительно файла index мы поднялись на уровень выше, далее указываем путь. src=»../images/picture.jpg»

Списки

  • Нумерованный список. Создается с помощью тега <ol></ol>. Строки текста создаются с помощью тега <li></li>. Количество тегов <li></li> зависит от количества строк текста.

Можно задать тип нумерации римскими цифрами, буквами с помощью атрибута type со значением i, I, a, A (в зависимости от нужного типа цифр). type=»I», type=»i», type=»a».type=»A»

  • Маркированный список. Создается с помощью тега <ul></ul>. Строки текста создаются с помощью тега <li></li>. Количество тегов <li></li> зависит от количества строк текста. Можно задать разные типы маркера с помощью атрибута type. type=»disc» (стандартный)type=»circle»(пустые кружки) type=»square»(квадратики).

 

  • Вложенный список (имеет в своей структуре несколько списков). Создаем главный список с помощью тегов ol или ul и тега li. Внутрь тега<li></li> главного списка помещаем нужный нам вложенный список с помощью тегов ul или ol и li. Вложенный список всегда помещается внутрь тега li, а не за его пределами.

Пример: <ol>

                          <li>текст

                                  <ul>

                                          <li>текст</li>

                  ‘                       <li>текст></li>

                                  </ul>

                          </li>

                          <li>текст</li>

                  </ol>

 

Создание гиперссылок

  • Гиперссылка — часть электронного документа, которая ссылается на другой элемент.

Совокупность страниц сайта соединена гиперссылками.

  • Ссылки создаются с помощью тега <а><а/> с обязательными атрибутами href=»адрес ссылки»

Между тегами <а> и </а> указывается текст, который будет выведен сверху данной ссылки.

Пример: <а href=»адрес ссылки»>название текста ссылки</а>

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

  • Чтобы ссылка открывалась в новой вкладке необходимо добавить атрибут target=»_blank»

Пример: <а href=»адрес ссылки» target=»_blank» >название текста ссылки</а>

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

Пример: <а href=»page.html»>Название ссылки</а>

*Ссылки также могут вести на какой-то файл.

  • Скачивание файла по ссылке. Используются файлы разных форматов: архив,pdf,doc и т.д.Прописывается также, как и в относительных ссылках. При нажатии в браузере начнется скачивание файла.

 

  • Графические ссылки — некое изображение, кликая по которому, будет осуществляться переход на заданную страницу. Для этого между тегами<а>и </а> вставляем тег <img srс=»адрес изображения»alt=»имя изображения» />.

*если мы не знаем, куда должна вести ссылка, в качестве значения атрибута href указывать решетку.

  • Ссылки внутри одной страницы. Якорные ссылки. Задаются с помощью атрибута id. Атрибут id присваивается элементу, на который будет осуществляться переход. Название идентификатора должно быть уникальным. Это название используется в значении атрибута href вместе с символом #

Пример: <а href=»#уникальное название»>название ссылки</а>

               <img id=»уникальное название» scr=»адрес изображения» alt=»название изображения»>

В данном примере сделана ссылка на изображение на странице.

  • Ссылка на емейл. В качестве названия атрибута href указываем значение:mailto:адрес почтового ящика. Пример: <а href=»mailto:адрес@почтового ящика»></а>

Таблицы

  • Создаются с помощью тега <table></table>
  • Состоят из рядов и колонок. Шапка и контент.
  • С помощью тега <tr></tr> создаём ряды, тегом <th></th> создаём шапку внутри ряда. В зависимости от количества ячеек шапки прописываем такое же количество тегов th.
  • Между тегами <th> и </th> прописываем значение, которое будет выводиться на экране в ячейках шапки.
  • Основной контент таблицы создаётся с помощью тега <td></td>. Между тегами <td>и</td>прописывается основной контент ряда. Это может быть текст, картинка, ссылка и т.п.

Аналогичным образом с помощью тега td создаются остальные ряды. Если ячейка пустая, то между тегами <td> и </td> ничего не пишем.

  • Для того чтобы сделать рамку для таблицы устанавливаем атрибут border=»толщина рамки» внутри тега <table>.
  • Для создания ширины таблицы используем атрибут width=»значение в пикселях» внутри тега <table>.
  • Для создания внутреннего отступа внутри ячеек таблицы используется атрибут cellpadding=»значение отступа в пикселях»
  • Для выравнивания контента по центру, левому или правому краю используется атрибут align=»нужное значение» внутри тега ряда <tr>. Если какая-то ячейка/ячейки выровнены отлично от остальных можно прописать для них специальное значение с помощью атрибута align=»нужное значение» внутри тега шапки и/или контента <th> и <td>
  • Для объединения ячеек в рядах необходимо использовать атрибут rowspan=»число рядов по вертикали,которые нужно объединить» внутри тега той ячейки, которую мы хотим объединить. Ту ячейку, которую мы объединяем с данной из кода можно удалить.
  • Для объединения ячеек в колонках используется атрибут colspan=»число колонок по горизонтали, которые нужно объединить» внутри тега той ячейки, которую мы хотим объединить. Ту ячейку, которую мы объединяем с данной из кода можно удалить.

Создание форм

  • Создаётся с помощью тега <form></form> и атрибутов: action=»#»; method=»post».
  • Текстовое поле ввода создается с помощью тега <input /> и атрибутов: type=»text» name=»задаем имя поля латинскими буквами»(задается для всех элементов формы ) value= «текст по умолчанию,который будет выводиться в поле ввода» size= «задается в виде количества символов, которые должны вмещаться в данное поле», но символов ввести можно еще больше. Чтобы ограничить количество символов, которые можно ввести используется атрибут maxlengh=»число символов,которое можно ввести в данное поле»
  • Активация поля ввода нажатием на лейбл создается с помощью тега <label></label>, который помещается в двух сторон от активируемого текста лейбла. <label>текст лейбла</label> и атрибута for=»уникальный текст идентификатора» — указывает для какого элемента формы соответствует данный лейбл. Для этого в нужном элементе формы создаём идентификатор id=»уникальный текст идентификатора»
  • Текстовое поле ввода с маскировкой символов создается также как и обычное, только в значении атрибута указываем password type=»password».
  • Радиокнопки — позволяет выбрать один единственный вариант ответа. Создаются с помощью тега input с атрибутами type=<radio>  name=<имя для идентификации элемента разработчиком> value=»значение» и текстом кнопки,который пишется после тега input. В зависимости от того, сколько радиокнопок нужно, ставится нужное количество тегов input. Для переноса радиокнопки на новую строку используем тег <br />.

Для того чтобы создать лейбл, тег input вместе с текстом радиокнопки обернуть тегом <label></label>

Для того, чтобы при выводе на экран пользователю сразу выводилось значение по умолчанию, используется атрибут checked=»checked» Его устанавливаем рядом с той радиокнопкой, которая будет выводиться по умолчанию на экране :

Пример:<label><input type=»radio» name=»имя для идентификации элемента разработчиком»> value=» текст по умолчанию,который будет выводиться в поле ввода » checked=»checked» /> текст радиокнопки </label> <br />

  • Чекбокс — позволяет пользователям выбрать,как 1 элемент, так и 2,3 и т.д.,или не одного. Создаются с помощью тега input с атрибутами type=<checkbox>  name=<имя для идентификации элемента разработчиком> В случае с чекбоксом в отличии от радиокнопок чтобы обработчику корректно передались данные имена должны быть разными. Либо необходимо задать массив [].value=»значение» и текстом кнопки,который пишется после тега input. В зависимости от того, сколько радиокнопок нужно, ставится нужное количество тегов input. Для переноса радиокнопки на новую строку используем тег <br />.

Для того чтобы создать лейбл, тег input вместе с текстом радиокнопки обернуть тегом <label></label>

Для того, чтобы при выводе на экран пользователю сразу выводилось значение по умолчанию, используется атрибут checked=»checked» Его устанавливаем рядом с тем чекбоксом, который будет выводиться по умолчанию на экране:

Пример:<label><input type=»checkbox» name=»имя для идентификации элемента разработчиком[]»> value=» текст по умолчанию,который будет выводиться в поле ввода » checked=»checked»/> текст радиокнопки </label> <br />

  • Списки выбора — списки для выбора одного или нескольких вариантов ответа. Создаётся с помощью тега <select></select> и атрибута name=» имя для идентификации элемента обработчиком » Пункты списка создаются с помощь тега <option></option> между которыми прописывается название пункта списка. и атрибута value=»значение». Для того чтобы из списка можно было c помощью клавиши ctrl выбрать несколько позиций используем атрибут multiple=»multiple»внутри тега select и массив [ ] вконце значения атрибута name.

С помощью атрибута size=»количество отображаемых пунктов на экране» внутри тега select можно задать размер списка выбора, чтобы браузер отображал нужно нам число позиций на экране.

Для создания лейбла используем тег <label></label> для заголовка списка с атрибутом for=»значение идентификатора» в значении которого указываем идентификатор элемента, для которого создаём этот лейбл и атрибут id=»уникальное значение» создаем внутри тега select.

Пример:<p><label for=»значение идентификатора»>Заголовок списка</label></p>

                 <select name=»имя для идентификации элемента обработчиком[]» multiple=»multiple» size=»количество отображаемых пунктов на экране» id=»уникальное значение»>

                         <option value=»1″>Название пункта</option>

                         <option value=»2″ >Название пункта</option>

                         <option value=»3″> Название пункта</option>

                 </select>

 

  • Текстовые области применяются там, где необходимо, чтобы посетитель мог ввести несколько строк текста. Можно делать переносы строк.

Создаются с помощью тега <textarea></textarea> и атрибутами: name=» имя для идентификации элемента обработчиком «;  rows=»высота текстовой области-количество строк»; cols=» ширина текст.области-количество символов, которые будут отображаться по горизонтали». Для того чтобы создать текст по умолчанию прописываем его между тегами <textarea>и</textarea>

Для создания лейбла используем тег <label></label> для заголовка списка с атрибутом for=»значение идентификатора» в значении которого указываем идентификатор элемента, для которого создаём этот лейбл и атрибут id=»уникальное значение» создаем внутри тега textarea.

Пример: <p><label for=»значение идентификатора»>Заголовок текстовой области</label></p>

                  <textarea name=» имя для идентификации элемента обработчиком » rows=»количество «; cols=»количество символов, которые будут отображаться по горизонтали» id=»уникальное значение» >Текст по умолчанию</textarea>

 

  • Кнопки для отправки всех данных из формы на сервер обработчику.(адрес отправки прописывается в теге action)

Для создания кнопок используется тег с атрибутами <input type»submit» name=» имя для идентификации элемента обработчиком» value=»текст, написанный на кнопке»/>

  • Кнопки для сброса значений и возврата их в первоначальное создаются с помощью тег с атрибутами <input type»reset» name=» имя для идентификации элемента обработчиком» value=»текст, написанный на кнопке»/>

 

  • Кнопка для того, чтобы по ней можно было просто кликнуть (далее программист задаст нужное действие для этой кнопки) создаётся с помощью тег с атрибутами <input type»button» name=» имя для идентификации элемента обработчиком» value=»текст, написанный на кнопке»/>

 

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

<input type»image» name=» имя для идентификации элемента обработчиком» src=»путь к картинке»/>

 

Создание комментариев в HTML

  • Не отображаются в браузере, несут служебную информацию для разработчика. Чтобы легче было в коде найти нужный элемент
  • Создаются с помощью <!—КОММЕНТАРИЙ ДЛЯ РАЗРАБОТЧИКА—!>

Блоки

Любой сайт можно разделить на блоки. Пример:

— header — шапка сайта (делится на блоки):

— — логотип

— — меню сайта

— — соц.кнопки

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

— — сайт-бар

— — блок с осн.контентом:

— — — краткое описание статьи

— — — второй блок

И т.д.

Каждый блок выделяем тегом <div></div> и применяем стили css.

Символы

-©(знак копирайта)-  &copy;

-® (знак зарегистрированной торговой марки)-  &reg;

— ™(знак торговой марки)- &trade;

->(знак больше)- &gt;

-<(знак меньше)- &lt;

-&(знак амперсанда)- &amp

 

Подписывайтесь на обновления моего блога, чтобы не пропустить появление в нем новых статей!

6 thoughts on “Вёрстка с нуля. Изучаем язык HTML. Основные понятия и функции”

  1. Я считаю, что Вы не правы. Я уверен. Давайте обсудим это. Пишите мне в PM, пообщаемся.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *