Почему вам следует научиться кодировать (немного): введение в HTML и CSS

Опубликовано: 2021-08-15
Примечание. Прежде чем вносить какие-либо изменения в код вашего магазина, всегда делайте резервную копию своего сайта.

Начать интернет-магазин никогда не было так просто. Благодаря таким платформам, как Shopify, вы можете купить тему, загрузить свои продукты и продавать своим клиентам в считанные часы! Барьер для входа настолько низкий, что это может сделать практически каждый.

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

Что, если бы я сказал вам, что вы могли бы заранее потратить немного времени, чтобы изучить основы работы веб-сайтов, и сэкономили бы время и деньги в будущем?

К концу этой статьи вы должны знать основы HTML и CSS и знать достаточно, чтобы начать возиться в собственном магазине.

Так что потратьте несколько минут на подготовку и приступим!

Что такое HTML и CSS?

HTML означает язык гипертекстовой разметки. Это один из старейших и важнейших языков, лежащих в основе Интернета. Он отвечает за структурирование и представление контента на этой самой странице!

CSS означает каскадные таблицы стилей. Он отвечает за предоставление HTML-стиля и форматирования.

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

Поскольку я большой поклонник Билла Мюррея (а он им не является), мы собираемся создать в сети наш собственный храм Билла.

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

Анатомия веб-сайта

Мы можем легко понять, как HTML и CSS работают вместе, сравнив их со структурными частями дома.

За стенами каждого дома скрывается каркас, отвечающий за его структуру. Думайте об HTML как о фрейме дома. Он отвечает за структуру веб-сайта.

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

Давайте рассмотрим базовую разметку HTML и рассмотрим ее построчно.

Пример разметки HTML

Doctype

Тег <! DOCTYPE html> помогает браузеру узнать, что тип документа, с которым мы хотим работать, - это HTML.

Голова

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

Реклама

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

Пример фавикона

Тело

Тег <body> содержит всю разметку (код) для веб-сайта. Это единственный код, который увидит конечный пользователь при просмотре нашего сайта.

Инструменты, необходимые для создания веб-сайта

Чтобы начать писать HTML, вы можете подумать, что вам нужно какое-то модное и дорогое программное обеспечение, но это не так. Фактически, у вас уже есть то, что вам нужно.

Если вы используете ПК, откройте программу NotePad. Если вы используете Apple Mac, откройте TextEdit.

Теперь, когда у вас открыта программа редактирования текста, следуйте за мной, пока мы расширяем базовую разметку HTML выше. Скопируйте (Ctrl + C в Windows / Cmd + C в Mac) и вставьте (Ctrl + p в Windows / Cmd + P в Mac) следующий код в текстовый редактор.

<! DOCTYPE html>
<html>
<head>
<title> Заголовок вашей страницы </title>
</head>
<body>
<h1> Привет, мир! </h1>
<p> Это наш первый абзац. </p>
</body>
</html>

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

Пример отрисовки кода

Элемент заголовка (<h1>)

Тег <h1> используется, когда вы хотите привлечь внимание к определенному тексту и дать ему определение. В данном случае нам нужен текст «Hello World!» быть крупнее и заметнее, чем последующий текст.

По умолчанию в HTML есть шесть различных тегов заголовков, которые вы можете использовать: h1, h2, h3, h4, h5 и h6.

Примеры заголовков HTML
Размер шрифта будет уменьшаться с каждым «шагом вниз»; H1 будет самым большим, а H6 - самым маленьким. По умолчанию у них будет некоторое поле (или интервал вокруг них), чтобы отделить их от других элементов на странице и дать пользователю визуальную иерархию.

Потратьте минуту, чтобы поэкспериментировать с изменением тегов заголовка, заголовка и / или абзаца. После внесения изменений сохраните их, а затем обновите страницу в браузере. Поздравляем, вы впервые редактировали HTML!

Хотя выглядит скучно, правда?

Давайте добавим немного стиля на нашу страницу и узнаем больше об истинной силе CSS.

Чтобы добавить наши собственные стили к этим HTML-элементам, нам нужно добавить тег <style> внутри <head> нашего документа.

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

Под тегом <title> в новой строке добавьте тег стиля, подобный этому:

<title> Заголовок вашей страницы </title>

Реклама

<стиль>

 </style>

Внутри тега стиля мы можем ввести все наши объявления. Объявление CSS состоит из свойства, за которым следует значение .

Декларация CSS

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

<стиль>
h1 {цвет: синий; }
</style>

Надеюсь, теперь вы увидите что-то похожее на это! Вы заметите, что наш «Hello World!» текст теперь синий. Все просто, правда?

Изменение CSS для H-тега

Вот и все! Вы успешно изменили стиль элемента HTML с помощью CSS. Мы уже развлекаемся?

Добавление изображений на нашу страницу

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

<img src = «https://www.fillmurray.com/400/500» >

Примечание. Для демонстрации я использую службу-заполнитель изображений под названием www.fillmurray.com. Вы можете использовать изображение на своем локальном компьютере, если хотите.

Альтернативный (профессиональный совет) способ получения изображения с веб-сайта: найдите изображение на веб-сайте, которое вы хотите использовать, и щелкните его правой кнопкой мыши. Щелкните Копировать адрес изображения, и URL-адрес этого изображения будет в вашем буфере обмена. В зависимости от вашего браузера формулировка может немного отличаться. Я использую Google Chrome. Я не рекомендую чрезмерно использовать хотлинкинг, но для этой демонстрации это не имеет большого значения.

Как сохранить изображение с веб-сайта

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

<! DOCTYPE html>
 <html>
 <head>
 <title> Заголовок вашей страницы </title>
 <стиль>
 h1 { цвет : синий;}
 </style>
 </head>
 <body>
 <h1> Привет, мир! </h1>
 <p> Это наш первый абзац. </p>
 <img src = « https://www.fillmurray.com/400/500 » alt = «изображение Билла Мюррея» >
 </body>
 </html>

Сохраните файл и перезагрузите браузер, и теперь вы должны увидеть что-то вроде этого:

Как начать писать код для своего первого веб-сайта

Если вы обратили внимание, то заметили еще один атрибут в теге <img> , alt = «изображение Билла Мюррея» . Поскольку браузер расшифровывает код и не может видеть визуализированный вывод, как вы и я, ему нужен способ узнать контекст того, что он отображает.

Реклама

Добавляя тег ALT (альтернативный текст) к нашему изображению, мы можем сообщить браузеру, о чем идет речь.

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

Но как насчет ссылок?

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

Поговорим об элементе якоря. Настоящая магия элемента привязки - это его атрибут href. Давайте продемонстрируем структуру тега привязки, добавив ссылку на страницу Билла в Википедии.

<a href= "www.google.com"> Прочитайте его Wikipedia запись </a>

Этот код сообщает браузеру, что, когда пользователь нажимает на текст: «Прочтите его запись в Википедии», переместите его на www.google.com.

Давайте добавим этот код прямо под нашим элементом заголовка, чтобы наш блок кода теперь выглядел так:

<! DOCTYPE html>
 <html>
 <head>
 <title> Заголовок вашей страницы </title>
 <стиль>
 h1 { цвет : синий;}
 </style>
 </head>
 <body>
 <h1> Привет, мир! </h1>
 <a href= "https://en.wikipedia.org/wiki/Bill_Murray"> Прочитайте его Wikipedia запись </a>
 <p> Это наш первый абзац. </p>
 <img src = «https://www.fillmurray.com/400/500» alt = «изображение Билла Мюррея» >
 </body>
 </html>

Нажмите «Сохранить» и обновите страницу в браузере, и, надеюсь, ваша страница будет похожа на мою.

Основы кодирования

Переходя к финишу

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

Барабанная дробь, пожалуйста ...

Основы HTML и CSS

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

Реклама

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

Укладка тела:

Сначала в теле страницы я добавил:

тело {
 цвет фона: #eee;
 семейство шрифтов: Helvetica, Arial, sans-serif;
 выравнивание текста: центр;
 маржа: 25 пикселей;
 }

фоновый цвет
Я установил очень светло-серый цвет фона страницы, используя шестнадцатеричное значение цвета #eee. Вы можете узнать о них больше и увидеть некоторые примеры здесь, в MOZ.

семейство шрифтов
Я хотел изменить шрифт, который используется браузерами Times New Roman по умолчанию. Для этого я выбрал Helvetica в качестве первого варианта (если у пользователя установлен этот шрифт на своем компьютере), Arial в качестве второго варианта (если у пользователя нет Helvetica, по умолчанию будет использоваться Arial) и в качестве окончательной резервной копии , основной шрифт без засечек.

выравнивание текста
Я решил, что весь текст на моей странице выровнен по центру. Есть несколько других вариантов значений, таких как left и right, но я подумал, что это лучше всего выглядит по центру.

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

Стилизуем наш образ:

Наконец, я стилизовал красивое лицо Билла, я имею в виду элемент изображения.

img {
 граница: 10px solid # 41bcd6;
 box-shadow: 2px 5px 5px # 999;
 отступ: 10 пикселей;
 радиус границы: 5 пикселей;
 }

Я мало что сделал, но хотел, чтобы фотография Билла присутствовала на странице.

граница
Я добавил рамку в 10 пикселей вокруг изображения. # 41bcd6 - это еще одно шестнадцатеричное значение цвета, которое отображает голубой цвет (часть моей секретной подсознательной цветовой темы Стива Зиссу).

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

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

border-radius
Чтобы проиллюстрировать одну из замечательных возможностей CSS, я сделал углы изображения скругленными с помощью border-radius. Когда я начал создавать веб-сайты, ничего подобного не существовало, а создание закругленных углов в Интернете было довольно сложной задачей. С тех пор мы прошли долгий путь, и теперь это довольно просто. Он принимает такие значения, как px или ems, и здесь я решил просто округлить его достаточно, чтобы заметить, установив значение 5px.

Вывод

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

Если серьезно, то я надеюсь, что вы смогли последовать за мной и создать свой первый базовый веб-сайт. Теперь, если Билл Мюррей не ваш любимый актер, я призываю вас отредактировать этот код, чтобы продемонстрировать вашего любимого актера, группу или что угодно.

Если вам понадобится сослаться на этот код в любое время, вернитесь и прочтите эту статью, или, для удобства, я разместил ее здесь на CodePen.

Есть так много забавных вещей, которые вы можете сделать с помощью только HTML + CSS. Вот несколько отличных ресурсов, которые помогут вам расширить свое обучение:

Реклама

  • Code Academy: 100% БЕСПЛАТНОЕ введение в курс HTML / CSS
  • CSS Zen Garden: первый пример в Интернете, который действительно «щелкнул» для меня, чтобы помочь мне понять, что у вас может быть 100 разных по виду веб-сайтов, которые все используют одну и ту же разметку HTML.
  • CSS анимации
  • Мона Лиза с использованием только CSS
  • Анимированная собака хаски с использованием только CSS
  • CodePen: CodePen - это онлайн-инструмент для LIVE-тестирования и демонстрации вашего кода HTML, CSS и JavaScript.

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