Изучение HTML и CSS путем создания веб-сайта в стиле 90-х годов

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

Веб-дизайн девяностых годов является довольно культовым. Фоны, от которых слезятся глаза, анимированные GIF-файлы и курсоры, перегруженные текстом, графикой и рекламой — для описания веб-дизайна 90-х можно подобрать только одно слово — аляповатый!

Тем не менее, для тех, кто был свидетелем рождения всемирной паутины, веб-дизайн 90-х годов вызывает приятные воспоминания.

Поскольку большинство веб-сайтов, созданных в 90-е годы, не требовали сложных CSS и JavaScript, создание веб-сайта в стиле 90-х может стать интересным первым проектом для изучения веб-разработки.

HTML и CSS

Каждый сайт, который вы видите в Интернете, состоит из двух основных компонентов: HTML и CSS.

Язык разметки гипертекста (HTML) не является языком программирования. Это, как следует из названия, язык разметки. Чтобы понять, что такое язык разметки, нам нужно вернуться в историю.

Представьте, что вы редактор в старые добрые времена и получаете рукопись, которую нужно пересмотреть. Вы хотите написать на рукописи кучу инструкций по редактированию для автора. Или же вы хотите написать инструкции для редактора (написать определенные строки более крупным шрифтом, сделать определенные слова жирными и т.д.).

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

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

Вводим HTML!

Вместо того чтобы размечать содержимое красным и синим карандашами, мы разобьем его на элементы и обернем каждый элемент в открывающий и закрывающий тег HTML.

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

HTML-теги записываются с помощью угловых скобок, например, так: < >. Закрывающий тег также имеет прямую косую черту: </ >.

Допустим, у нас есть текст:

I love 90s design
Вход в полноэкранный режим Выйти из полноэкранного режима

И мы хотим указать браузеру отобразить этот текст в виде заголовка. Мы можем просто обернуть текст между открывающим и закрывающим тегами, как показано ниже:

<h1>I love 90s design</h1>
Войти в полноэкранный режим Выйти из полноэкранного режима

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

HTML — это скелет нашего сайта. Но CSS или каскадные таблицы стилей — это то, что добавляет сайту интерес. CSS используется для стилизации и изменения расположения элементов HTML. Мы используем CSS для задания шрифтов, изменения цвета и размера, добавления анимации и управления другими декоративными функциями нашего сайта.

Мы узнаем больше о HTML и CSS по мере создания нашего сайта.

Начало работы

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

Создайте учетную запись на Replit, если вы еще этого не сделали. Создайте новый Repl и выберите HTML, CSS, JS из выпадающего списка шаблонов.

Вы увидите, что в наш проект добавлены три файла. Файл index.html — это место, где мы будем писать наш HTML. Файл style.css — это файл, в котором мы будем писать наш CSS. Файл script.js можно удалить, так как в этом уроке мы не будем писать JavaScript.

Replit предварительно заполняет файл index.html кучей кода. Удалите все, что там находится, так как мы начнем с нуля.

Скопируйте следующую строку в файл index.html, и вы увидите ее в виде заголовка в окне предварительного просмотра браузера:

<h1>Web Design in the 90s</h1>
Вход в полноэкранный режим Выйти из полноэкранного режима

Вот и все! Вы только что создали свою собственную веб-страницу 🎉🎉🎉🎉.

Построение структуры

Хотя написание отдельных HTML-тегов действительно работает, для создания настоящего веб-сайта нам нужно объединить отдельные элементы в структурированную структуру. Нам также понадобится добавить некоторую дополнительную информацию и метаданные о нашем сайте для SEO и других целей.

В своем редакторе кода сотрите все.

Самый первый кусок HTML, который мы напишем, будет <!DOCTYPE html>.

<!DOCTYPE html>
Войдите в полноэкранный режим Выход из полноэкранного режима

Тег <!DOCTYPE html> является тегом doctype. Это обязательный тег, который добавляется в начало всех HTML-документов. Этот тег гарантирует, что все ведет себя так, как ожидается. Обратите внимание, что здесь нет закрывающего тега, поскольку мы не оборачиваем этот тег вокруг какого-либо содержимого.

Далее мы добавим элемент <html>:

<!DOCTYPE html>
<html lang="en-US"></html>
Вход в полноэкранный режим Выход из полноэкранного режима

Тег <html> оборачивает все содержимое и часто называется корневым элементом. Этот тег сообщает браузеру, что все, что заключено внутри этого тега, является HTML. Элементы HTML также могут быть вложены друг в друга. Все последующие элементы, которые мы добавляем, будут вложены внутрь элемента <html>.

Также обратите внимание, как мы установили язык на USA English, задав значение атрибута lang на "en-US". Мы можем передать дополнительную информацию элементу HTML с помощью атрибутов.

Элемент <head>

Внутри элемента <html> содержимое делится на элемент <head> и элемент <body>.

<!DOCTYPE html>
<html lang="en-US">
  <head> </head>

  <body></body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Элемент head — это контейнер, в который мы включаем всю метаинформацию. Мы также можем включить дополнительную информацию о сайте, которую мы не хотим отображать на самом сайте. Эта дополнительная информация может включать данные для улучшения SEO-рейтинга нашего сайта, ссылки на другие файлы и так далее.

Давайте добавим эти элементы в <head>:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My 90s website</title>
  </head>

  <body></body>
</html>
Вход в полноэкранный режим Выйти из полноэкранного режима

Чтобы правильно отобразить HTML-страницу, веб-браузер должен знать, какой набор символов использовать. Добавление строки <meta charset="utf-8"> указывает нашему браузеру на использование набора символов UTF-8. UTF-8 — это рекомендуемый набор символов, поскольку он охватывает почти все символы и знаки в мире!

Элемент <title> содержит заголовок нашего сайта. Этот заголовок отображается на вкладке браузера. Он также используется для описания страницы при добавлении ее в закладки.

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

Элемент <body>

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

Давайте добавим элемент <header> и заголовок в <body> нашего сайта:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>My 90s Website</title>
  </head>
  <body>
    <header>
      <h1>My 90s Website</h1>
    </header>
  </body>
</html>
Вход в полноэкранный режим Выход из полноэкранного режима

Элемент <header> обычно содержит вводный и/или навигационный контент. Не путайте <header> с элементом <head>.

Элемент <h1> — это элемент заголовка первого уровня. Элементы заголовков позволяют нам указать, что определенные части нашего содержимого являются заголовками или подзаголовками. В HTML существует шесть уровней заголовков, от <h1> до <h6>.

Информационный отступ

Отступы в HTML-коде не обязательны. Единственная причина, по которой мы делаем отступы в коде, — это чтобы его было легче читать.

Добавление дополнительного содержимого

Давайте добавим еще немного контента на наш сайт. У нас уже есть заголовок, поэтому давайте добавим элемент <main> на нашу веб-страницу:

<body>
  <header>
    <h1>My 90s Website</h1>
  </header>
  <main></main>
</body>
Вход в полноэкранный режим Выход из полноэкранного режима

Элемент <main> представляет собой основное содержимое body документа.

Далее мы добавим несколько элементов текста или абзацев:

<body>
  <header>
    <h1>My 90s Website</h1>
  </header>
  <main>
    <p>
      This is a <strong>90s inspired</strong> website. Today, 90s web design is
      more likely to raise a smile than admiration.
    </p>
    <hr />
    <p>
      See what Apple, Microsoft, Yahoo or Pepsi websites looked like in the
      mid-1990s.
    </p>
  </main>
</body>
Вход в полноэкранный режим Выход из полноэкранного режима

Мы добавили два элемента абзаца под заголовком. Согласно документации:

HTML-элемент <p> представляет собой абзац. Абзацы обычно представлены в визуальных медиа как блоки текста, отделенные от соседних блоков пустыми строками и/или отступом первой строки, но в HTML абзацами могут быть любые структурные группы связанного содержимого, например, изображения или поля формы.

Мы также обернули текст «90-е вдохновили» тегом <strong>. Элемент <strong> указывает на то, что его содержимое имеет большое значение. Браузер отобразит содержимое элемента <strong> жирным шрифтом.

Также обратите внимание на элемент <hr>, который добавляет горизонтальный разделитель между двумя абзацами. Некоторые элементы, такие как элемент <hr>, не требуют закрывающего тега, поскольку они не обводят содержимое.

Совет

Какой еще элемент мы использовали, который не требует закрывающего тега?

Нажмите кнопку «Запустить» на вашем сайте Replit, и вы увидите, как новый текст появится в окне предварительного просмотра браузера.

Добавление ссылок

Далее мы добавим ссылку на музей веб-дизайна, чтобы наши читатели могли увидеть несколько реальных сайтов 90-х годов. Мы хотим сделать часть нашего текста кликабельной. Это можно сделать с помощью тега якоря <a>.

Сначала оберните текст, который вы хотите сделать кликабельным, тегами <a></a>, как показано ниже:

<p>
  See what Apple, Microsoft, Yahoo or Pepsi websites
  <a>looked like in the mid-1990s</a>.
</p>
Войти в полноэкранный режим Выйти из полноэкранного режима

Для элемента якоря требуется атрибут href или ссылка на гиперссылку, который представляет собой URL, на который указывает гиперссылка.

<p>
  See what Apple, Microsoft, Yahoo or Pepsi websites
  <a href="https://www.webdesignmuseum.org/exhibitions/web-design-in-the-90s"
    >looked like in the mid-1990s</a
  >.
</p>
Вход в полноэкранный режим Выйдите из полноэкранного режима

Нажмите «Выполнить», и вы увидите ссылку в действии:

Добавление изображений

Не может быть сайта в стиле 90-х без анимированного GIF с танцующим ребенком!

Создайте новую папку в разделе «Files» в вашем repl и назовите ее «img». Скачайте изображения отсюда и загрузите их в папку «img».

Изображения добавляются с помощью элемента изображения <img>. Внутри этого тега нужно указать местоположение изображения, или источник, с помощью атрибута src, как показано ниже:

<img src="img/dancing-baby.gif" />
Вход в полноэкранный режим Выйти из полноэкранного режима

Мы добавим изображение внутри элемента <header>. Мы также добавим описание изображения с помощью атрибута alt:

<body>
  <header>
    <h1>My 90s Website</h1>
    <img src="img/dancing-baby.gif" alt="Animated GIF of a dancing baby" />
  </header>
  <main>
    <p>
      This is a <strong>90s inspired</strong> website. Today, 90s web design is
      more likely to raise a smile than admiration.
    </p>
    <hr />
    <p>
      See what Apple, Microsoft, Yahoo or Pepsi websites
      <a
        href="https://www.webdesignmuseum.org/exhibitions/web-design-in-the-90s"
        >looked like in the mid-1990s</a
      >.
    </p>
  </main>
</body>
Вход в полноэкранный режим Выход из полноэкранного режима

Вот как выглядит наш сайт:

Элемент <div>.

Элемент <div> похож на пустую коробку. Мы можем использовать его, когда нам нужно разбить содержимое нашего сайта на различные разделы, управлять стилем и многое другое.

Для нашего сайта мы будем использовать элемент <div>, чтобы позже добавить фоновое изображение на наш сайт.

Давайте добавим новый элемент <div> в наш файл «index.html» и вложим в него все остальное:

<body>
  <div><!-- This is the new addition. -->
    <header>
      <h1>My 90s Website</h1>
      <img src="img/dancing-baby.gif" alt="" />
    </header>
    <main>
      <p>
        This is a <strong>90s inspired</strong> website. Today, 90s web design
        is more likely to raise a smile than admiration.
      </p>
      <hr />
      <p>
        See what Apple, Microsoft, Yahoo or Pepsi websites
        <a
          href="https://www.webdesignmuseum.org/exhibitions/web-design-in-the-90s"
          >looked like in the mid-1990s</a
        >.
      </p>
    </main>
  </div><!-- Don't forget to close the div element -->
</body>
Вход в полноэкранный режим Выход из полноэкранного режима

Информационные комментарии

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

Связывание файлов

На сайте есть все необходимое содержимое. Теперь пришло время добавить немного магии CSS.

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

Чтобы связать файл CSS с HTML-файлом, мы будем использовать элемент ссылки <link>. Элемент <link> используется для указания связей между текущим документом и внешним ресурсом. Чаще всего этот элемент используется для ссылок на CSS, но его можно использовать и для ссылок на другие файлы.

Мы добавим элемент <link> в элемент <head> нашего сайта:

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>My 90s Website</title>
</head>
Вход в полноэкранный режим Выход из полноэкранного режима

Элементу <link> необходим атрибут rel или relationship и атрибут href. Мы устанавливаем атрибут rel в «stylesheet», чтобы сообщить браузеру, какой документ мы связываем. Мы добавим имя нашей таблицы стилей в качестве значения атрибута href.

Информация

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

Обратите внимание, что мы также добавили новый тег <meta>. Он дает браузеру инструкции по управлению размерами и масштабированием страницы. Подробнее об этом можно прочитать в документации MDN.

Базовая стилизация

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

Существует множество способов указать на нужные нам элементы. Самый простой способ — использовать имя элемента.

Например, следующий код выделит элемент <body> и изменит его свойство background-color на черный:

body {
    background-color: black;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Вы также можете выбрать несколько элементов одновременно. Например, следующий код изменит цвет текста обоих элементов <h1> и <p>:

h1, p {
    color: blueviolet;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Мы также можем объявить более одного правила одновременно. Например, следующая группа правил изменит размер и дополнительное расстояние (padding) в верхней части наших элементов <h1>:

h1 {
    font-size: 4rem;
    padding-top: 10rem;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Существует огромное количество свойств CSS. Рассмотрение их всех выходит за рамки данного руководства. Вы можете найти все свойства CSS в документации MDN.

Другой хороший способ найти свойства CSS и их значения для вашего случая использования — это поиск с помощью вашей любимой поисковой системы. Например, если мы хотим узнать, как выровнять текст на нашей веб-странице по центру, мы можем задать поиск «CSS text align».

Первым результатом будет эта страница MDN, которая объясняет использование свойства text-align. Добавьте это новое свойство в свой код:

body {
    background-color: black;
    text-align: center;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Совет

Хорошим способом изучения CSS является игра с различными свойствами и их значениями.

Классы HTML

Выбор элементов по имени удобен, когда мы хотим выбрать сразу все элементы одного типа на странице. Но для лучшего контроля мы можем захотеть выбрать и внести изменения в отдельные элементы. Один из способов выбора отдельных элементов — использование классов.

Классы HTML — это атрибуты, которые мы можем добавлять к элементам. Если элемент имеет имя класса, мы можем использовать его в нашем CSS. Классы можно рассматривать как пользовательские метки, которые мы прикрепляем к нашим элементам.

Давайте добавим класс bigger-text к нашему первому элементу <p>:

<p class="bigger-text">
  This is a <strong>90s inspired</strong> website. Today, 90s web design is more
  likely to raise a smile than admiration.
</p>
Вход в полноэкранный режим Выход из полноэкранного режима

Название классов полностью зависит от вас. Вы можете называть классы как угодно. Но хорошая практика — давать классам описательное имя.

В нашем файле style.css мы можем выбрать элемент с классом bigger-text. Чтобы указать CSS, что мы выбираем класс, а не встроенный элемент HTML, мы должны добавить точку . перед именем класса. Например, мы можем выбрать класс bigger-text и изменить его шрифт на другой размер следующим образом:

.bigger-text {
  font-size: 1.5rem;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Информация

В CSS есть несколько различных единиц для выражения длины. Здесь мы используем относительную единицу размера rem. Но мы также можем использовать абсолютные единицы, например px, что означает пиксели.

Давайте также добавим класс container к нашему элементу <div> и используем его для добавления фонового изображения:

<body>
  <div class="container">
    <header>...</header>
    <main>...</main>
  </div>
</body>
Вход в полноэкранный режим Выход из полноэкранного режима

Загрузите файл window.png в папку с изображениями, если вы этого еще не сделали. Теперь добавьте следующий CSS-код в файл style.css:

.container {
  background: url("img/window.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 800px;
  width: 800px;
  margin: auto;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Свойства CSS не требуют пояснений. В приведенном выше коде мы используем изображение в качестве фона с помощью функции url(). Это так же, как передача URL изображения в атрибуте href в HTML.

Далее мы указываем браузеру, что нужно расположить это изображение в центре и не повторять его несколько раз. Мы также задаем высоту и ширину. На этот раз мы используем абсолютные единицы длины px.

Свойство margin управляет дополнительным пространством вокруг элемента. Установив значение auto, мы хотим получить равное пространство вокруг элемента, что является хорошим способом центрирования элемента.

Давайте добавим наше изображение эмодзи в элемент body, чтобы сделать наш сайт как можно более привлекательным 😀.

body {
  background: black url("img/emoji.png");
  text-align: center;
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Обратите внимание, что мы изменили свойство background-color на background и добавили к нему и цвет, и изображение в одной строке.

Также обратите внимание, что в этот раз мы не использовали background-repeat: no-repeat, в результате чего наше изображение повторяется несколько раз, заполняя весь элемент body.

Пользовательский домен

Наш сайт готов! Мы можем поделиться им со всем миром, указав URL нашего repl.

Однако есть одна проблема. URL не очень удобен для чтения. Нам нужно что-то попроще, например «ilove90sdesign.com».

Есть много мест, где можно купить индивидуальный URL или домен. Некоторые из них — Google Domains, GoDaddy и Namecheap.

Давайте рассмотрим процесс подключения нашего repl к пользовательскому домену от Namecheap.

Купите домен на Namecheap.

Далее, на вашем сайте Replit нажмите на значок карандаша в окне предварительного просмотра браузера и нажмите на «Создать ссылку на домен». Введите свой домен, и откроется окно создания доменной ссылки:

Скопируйте IP-адрес из диалога «Domain Linking».

Войдите в свою учетную запись Namecheap. Следуйте инструкциям из шага 3 данного руководства. Выберите «@» для «Host» и введите IP-адрес, который вы скопировали выше, в поле «IP Address».

Нажмите «Сохранить изменения». Вернувшись на свой сайт Replit, нажмите кнопку «Далее». Replit проверит домен, и все будет готово!

Примечание

Может пройти некоторое время, прежде чем изменения вступят в силу.

Что дальше?

Это все для данного руководства, но вы можете развивать свой сайт дальше. Попробуйте добавить больше разделов на сайт или поиграйте со свойствами CSS и селекторами, чтобы придать сайту другой вид.

Вы можете найти наш ответ ниже:

Оцените статью
devanswers.ru
Добавить комментарий