Уроки верстки: Уроки вёрстки с нуля? — Хабр Q&A

Урок 

Содержание

HTML CSS верстка сайта Портфолио — ВебКадеми

Главная » HTML, CSS

HTML, CSS

На чтение 2 мин Просмотров 2.4к. Опубликовано

В этом курсе вы сверстаете свой первый сайт на HTML и CSS. Он будет многостраничным, и адаптированным под просмотр на мобильных устройствах. Мы будем работать с дизайн макетом из программы Figma. Современный, легкий и более удобный аналог фотошопа, который не требует установки и работает прямо в браузере.

Этот курс подойдет для тех кто хочет научиться создавать сайты и хочет сверстать свой первый сайт.

Файлы с макетом для верстки

Чтобы получить файлы макета и готовой верстки, необходимо подписаться на курс: http://webcademy.ru/htmlsite/

1. Настройка редактора, знакомство с версткой. Уроки по верстке сайта Портфолио HTML CSS

В этом уроке познакомимся с основами HTML и CSS, которые пригодятся нам для верстки данного макета.

2. Верстка Шапки сайта. Уроки по верстке сайта Портфолио HTML CSS

Верстаем HTML шапку сайта. Делаем фоновое изображение через CSS на весь блок.

3. Верстка секции Портфолио. Уроки по верстке сайта Портфолио HTML CSS

Верстаем секцию Портфолио с работами на сайте. Делаем заголовок секции и размещаем карточки с работами в ряд.

4. Верстка Подвала. Уроки по верстке сайта Портфолио HTML CSS

Верстаем подвал сайта. Размещаем копирайт и ссылки на социальные сети.

5. Внутренняя страница для сайта. Уроки по верстке сайта Портфолио HTML CSS

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

6.

Мобильная адаптация сайта. Уроки по верстке сайта Портфолио HTML CSS

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

7. Видео обложка для сайта Плавная прокрутка. Уроки по верстке сайта Портфолио HTML CSS

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

Оцените автора

теги и атрибуты в HTML — Tokar.

ua

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

Теги (tags, таги, тэги) — это ключевые слова, которые окружены угловыми скобками (< и >). Теги являются основой языка HTML. Структура тега всегда такова:

<tag>content</tag>

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

/.

Теги, которые не требуют закрытия имеют такой вид:

<tag />

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

Теги не мы не увидим в браузере, но они являются основой вёрстки любого сайта. Задача тегов — “объяснить” браузеру, где какие размещать элементы, какими свойствами они должны обладать. Далее вы увидите, как писать код и поймёте, где и какие теги следует использовать.

Вот основные теги, которые определяют структуру документа:

ТегОписание
<html>...</html>Весь документ. Всё содержимое должно находиться внутри этого тега
<head>...</head>Информация о документе
<title>...</title>Заголовок страницы, он отображается в заголовке вкладки в браузере
<body>...</body>Визуальное содержимое страницы, все видимые элементы должны находиться внутри этого тега
<h2>...</h2>Заголовок, может меняться от h2, самого главного, до h6
<p>...</p>Параграф текста

Атрибуты тегов

Свойства тегов называют “атрибутами”. Теги могут иметь один или множество атрибутов, а могут быть совсем без них.

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

Правильно:

<a href="...">...</a>

Неправильно:

<a>...</a href="...">

Атрибуты указываются парами в виде имени и значения: имя="значение". Например, вы можете добавить атрибут lang элементу <html>:

<html lang="en-US">

Эта строка читается так: у тега <html> есть атрибут lang, и его значение — en-US.

Гиперссылки и изображения

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

<a href="http://tokar. ua">Уроки верстки сайтов</a>

У одного и того же элемента может быть множество атрибутов. Например, тег 

<img>, который отвечает за изображения:

<img src="img.jpg" alt="Alt text" title="Title">

Давайте разберёмся в этой строке: у элемента <img> есть такие атрибуты:

  • src — источник изображения, адрес файла, который должен загрузиться;
  • alt — альтернативный текст, он будет отображаться вместо изображения, если оно по каким-то причинам не загружено. Например: изображение ещё загружается, неправильно указан его адрес или пользователь использует текстовый режим браузера;
  • title — заголовок (подсказка) изображения, появляется при наведении курсора на него. Может также использоваться для гиперссылок;
  • width и height — ширина и высота изображения в пикселях, реже указывается в процентах: height="50%". Если мы не указываем размеры, то изображение отобразится со своими реальными шириной и высотой.

Как добавлять атрибуты

Правила написания атрибутов очень просты:

  • значения всегда должны указываться в кавычках;
  • используйте только одни и те же кавычки: если слева значения стоит одинарная или двойная кавычка (' и " соответственно), то справа должна быть такая же;
  • используйте только строчные буквы для имён атрибутов (не касается значений).

Приведу одни из самых часто используемых атрибутов:

АтрибутОписание
altальтернативный текст для изображения
classкласс или классы
hrefадрес, куда указывает ссылка
idидентификатор
srcисточник, обычно для изображений
titleподсказка для изображения или ссылки
valueзначение, часто используется в формах

Атрибуты class и id

Классы и идентификаторы — это атрибуты, которые называются

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

Селекторами могут быть любые имена тегов, но в том случае, когда тегов много, их придётся часто повторять. Тогда верстальщику пригодятся классы и идентификаторы, чтобы отличать одни теги от других.

Атрибуты class и id используются, чтобы можно было применить стили только к указанным объектам, они необходимы для стилевого оформления страниц (это CSS, речь о нём пойдёт в следующих уроках и он ещё успеет вам надоесть), а также для скриптов на страницах.

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

Правильно:

<img src="img.jpg" alt="">

Неправильно:

<img src="img. jpg" alt="">

Классов может быть любое количество, они указываются через пробел в атрибуте

class, для одного и того же объекта можно указать как только идентификатор, так и только классы, а также и то, и то.

Пример:

<p>Текст</p>

Для имён идентификаторов и классов используются одинаковые правила:

  • только латинские буквы
    хорошо: class="class_01", плохо: class="класс_01";
  • только нижний регистр
    хорошо: class="class_01", нежелательно:;
  • первый символ — только буква
    хорошо: image_01, плохо: 01_image;

Атрибут alt — обязателен для изображений

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

<img src="... " alt="">

Нижний регистр для имён атрибутов

Как имена классов и id, так и имена тегов должны указываться в нижнем регистре.

Вообще HTML-теги регистронезависимы, то есть <P> для браузера равнозначен <p>. В спецификации HTML5 нет указаний о том, какой регистр необходимо использовать. Тем не менее, раньше использование прописных букв в именах тегов являлось ошибкой.

Правильно: 

<p>Как хорошо, что вы больны не мной</p>

Неправильно:

<P>Как хорошо, что я больна не вами</P>

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

Учебник по CSS и верстке | Узнайте достаточно, чтобы быть опасным

О
Учиться достаточно Курсы

Должен сказать, что серия «Учись достаточно» — шедевр образования. Спасибо за эту невероятную работу!

— Майкл К.

Должен сказать, эта серия «Учись достаточно» — шедевр образования. Спасибо за эту невероятную работу!

— Майкл К.

Я могу сказать только фантастические вещи о @LearnEnough. Я почти закончил курс #javascript. Я должен сказать, что видео являются обязательными, потому что @mhartl будет играть новичком и разделять радость иметь что-то Вы написали на самом деле работу! 🤓

— Клаудия Мари (@StarvingHearts) 30 мая 2019 г.

Я хочу поблагодарить вас за прекрасную работу с учебными пособиями. Вероятно, это лучшие учебники, которые я когда-либо читал.

— Педро И.

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

— Жанель С.

Только что купила новую электронную книгу и хочу сказать, продолжайте в том же духе! Серия «Научись быть опасным» возродила во мне желание программировать после 10 с лишним лет «ммм».

— Дайан Ю.

Общество «Учись достаточно» и курсы просто невероятные. На мой взгляд, это лучшая цена на рынке онлайн-курсов. Как вы сказали, это обучение технологиям, что очень полезно в нашем мире.

— Себастьен Д.

Я просто хотел сказать вам: ваши учебники из серии «Учись достаточно» потрясающие! Книги хорошо написаны, ясны, лаконичны, суперполезны и даже интересны для чтения. Спасибо вам огромное за это! Я купил первые три и куплю все, что вы опубликуете дальше. Продолжайте делать эту очень хорошую работу и еще раз спасибо.

— Пьер В.

Я следил за всей серией «Научись быть опасным», и она меня ОЧЕНЬ впечатлила. Я менеджер проектов, который ежедневно работает с разработчиками программного обеспечения. Эти сессии дали мне огромное количество очень полезной информации, в той степени, что теперь я не только понимаю, о чем говорят ребята из разработчиков, но и начинаю использовать инструменты (командная строка, Git и т. д.), которые они используют.

— Брайан

Майкл Хартл — один из лучших преподавателей веб-разработки. Давно слежу за ним, все, что он производит, отличного качества. Если вы ищете быстрый способ стать полноценным и продуктивным профессиональным веб-разработчиком, книги Хартла — отличное место для начала.

— Abram Bailey

Также — если вы работаете через @RailsTutorial вы, вероятно, заглянете на @ LearnEnough довольно скоро, что является невероятным ресурсом для начинающих. Такое же высокое качество, как и в учебнике по рельсам, но все же понятное для начинающих.

— Майкл Валлбаум (@mwallba) 24 апреля 2018 г.

Привет, меня зовут Филипп, и я начинаю изучать веб-разработку. Я немного пробовал Ruby /Rails около полутора лет. Время от времени я пишу скрипты на ruby ​​для решения проблем на работе. Я также балуюсь изучением: JavaScript, Ember, еще Ruby/Rails, краткие вводные чтения по Scala.

Я пробовал Codeschool, Codecademy и я остановимся на этом, чтобы вы не тратили следующие 3 часа на чтение всех различных учебных ресурсов, которые я пробовал.0007

Ruby on Rails Tutorial (Rails 5), несомненно, самый эффективный и образовательный ресурс, с которым я когда-либо сталкивался, когда дело доходит до изучения веб-разработки или написания любого кода на любом уровне.

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

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

Спасибо за такое замечательное образовательное руководство по Ruby on Rails.

— Philip

Пакет макетов

Разверните любую главу, чтобы увидеть включенные в нее уроки. Мы предлагаем проходить курс по порядку, но вы также можете выбирать, какие уроки наиболее актуальны для вас. Обязательно ЗАПИСАТЬСЯ, чтобы начать курс.

  • 1