Шпаргалки для начинающего верстальщика HTML/CSS - Елена Эберт

Скачать книгу

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

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

      <! – Здесь мы пишем комментарий – >

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

      <header>

      <div class=«container»> // весь контент, вся информация располагается в контейнере

      </div>

      </header>

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

      Оформляем шапку сайта в HTML (тип 1)

      Первый тип состоит из логотипа, формы поиска, аватар пользователя.

      Стандартный HTML-код для первого типа шапки сайта будет выглядеть так:

      <header class=«header»>

      <div class=«logo»> Логотип </div>

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

      <form action=" " class=«search»>

      <input type=«search» class=«search-input» placeholder=«Поиск»>

      <button type=«submet» class=«search-button»>

      <img src="img/search-icon.svg» alt=«search-icon»>

      </button>

      </form>

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

      <div class=«user»>

      <img src=«img/Изображение – Иконка.svg» alt=«bookmark» class=«bookmark»>

      <img src=«img/Аватарка пользователя.png» alt=«avatar» class=«avatar»>

      </div>

      </header>

      Кратко опишу теги, примененные выше в коде

      button – данный тег создает кликабельную кнопку.

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

      Пример кода:

      <img src=«img/Иконка (или фотография).svg» alt=«Иконка (Фото)»>

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

      Ширина изображения

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

      <img src="foto.png» width=«100»>

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

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

      <img src=" foto.png» height=«100»>

      Примечание: одновременно не следует задавать и широту и высоту в <img>.

      Форма поиска по сайту

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

      <form>

      <input type=«search»>

      <input type=«submit» value=«Найти»>

      </form>

      form – определяет форму в HTML

Скачать книгу