HTML Blog Lab
Loading...
</> HTML Blog Lab
Студия веб-дизайна 01 из 04
Presenter mode

HTML BLOG LAB · 01

Создайте страницу блога с помощью HTML.

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

✦

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

01ПланированиеОпределите, что читателям нужно в первую очередь.
02СозданиеИспользуйте теги, чтобы сформировать страницу.
03ЗаботаСделайте страницу доступной для большего числа людей.
HTML
+
IDEAS

Страница — это разговор с читателем.

ШАГ 1 · СТРУКТУРА

Начните с каркас.

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

Попробуйте этоУкажите на каждый тег и скажите, за что он отвечает.
<header><nav><main><article><footer>
blog.htmlHTML
<!DOCTYPE html>
<html>
  <body>
    <header>
      <h1>Полевые заметки</h1>
      <nav>О нас · Архив</nav>
    </header>
    <main>
      <article>
        <h2>Что делает страницу хорошей?</h2>
      </article>
    </main>
  </body>
</html>
Смысловые теги облегчают навигацию по странице.

ШАГ 2 · КОНТЕНТ

Придайте странице голос.

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

✓Заголовок, который формирует ожидания
✓Абзац с одной четкой идеей
✓Ссылка, которая говорит, куда она ведет
Подсказка для парыПрочитайте заголовок вслух. Привлекает ли он внимание?
our-blog.local / journal•••

ОБЩИЙ ЖУРНАЛ

Что представляет собой
хорошая веб-страница?

Сборник небольших наблюдений из нашей студии для вашей.

Прочитать запись↗

ШАГ 3 · ЗАБОТА И ДОСТУПНОСТЬ

Освободите место для всех.

Хороший HTML — это не только правильный внешний вид. Он дает большему количеству людей равный шанс прочитать, понять и присоединиться к обсуждению.

AaЗаголовкиСоздайте четкий путь.
↗СсылкиОпишите пункт назначения.
▧ИзображенияДобавьте полезный альтернативный текст.
Ваша очередьНабросайте один раздел блога, а затем выберите HTML-тег, который станет для него основой.
Я заметил…
Интересно…
Я могу попробовать…
←Назад
Далее→