автордың кітабынан сөз тіркестері  Шпаргалки для начинающего верстальщика HTML/CSS

Елена Эберт

. Робсон, Э. Фримена «Изучаем HTML, XHTML и CSS (Head First)».

Пример кода:

Форма поиска по сайту
Запишем отдельно общий пример формы поиска по сайту

Если мы, например, зададим ширину 100, а реальные размеры изображения были 200Х200 пикселей, то изображение станет 100Х100, так как вследствие изменения ширины, изменилась и наша высота, чтобы пропорции изображения не исказились.

Аналогично, если мы зададим высоту изображению с помощью height

Ширина изображения
По умолчанию изображения отображаются реальным размером, однако мы можем изменить его размер через атрибут width, который задает ширину изображению

Кратко опишу теги, примененные выше в коде
button — данный тег создает кликабельную кнопку.

img — добавляет на веб-страницу HTML-изображения. Это одиночный тег. У него есть обязательный атрибут src, который указывает путь к изображению, и необязательный атрибут alt, который содержит в себе резервный контент. То есть если на веб-странице по какой-либо причине не откроется изображение, на ней будет указана информация, которую содержит атрибут alt.

Пример кода:

form содержит наше форму поиска, рассмотрим ее подробнее далее.

<! — Здесь аватар пользователя — >

header class=«header»>

Логотип

<! — Здесь форма поиска — >

Так как контент сайта расположен по середине, а по бокам у него имеется пространство, можно предположить, что все содержимое сайта помещено в контейнер — это некий блок, в которым расположена вся информация веб-страницы.

// весь контент, вся информация располагается в контейнере

Далее верстаем шапку.

Аналогично в нашу папку с названием проекта мы должны положить файл для CSS, его мы должны назвать style. css.

Внутри данного файла и хранится текст HTML-страницы. Он должен обязательно иметь такие теги как:

— тег , который содержит в себе текст всего сайта (все, что написано вне его, браузер будет проигнорировать)

— внутри должен обязательно быть тег , в нем отражается служебное содержимое страницы

— также внутри должен обязательно быть тег , в нем отражен основной текст, который и виден на экране браузера.

В теге должны быть тег , он задает название страницы, в браузере, тег , задающий кодировку страницы (в атрибуте charset, как правило, это значение utf-8).

Также перед тегом пишется конструкция doctype, она указывает на версию языка HTML, на которой сделан сайт. В настоящее время актуальна версия, которую выражает .

Структура любой страницы имеет общую структуру, которая в целом выглядит так:

Заголовок страницы

// подключаем CSS

шапка сайта

основная часть

подвал сайта