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

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

 

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

 

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

Анатомия сайта

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

 

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

 

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

 

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

 

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

 

Введите

Тэг <!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>

<тело

<h1>Приветствуем мир!</h1>

<p>Это наш первый параграф.</p>

</тело>

</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-Tag

 

Вот, ты сделал это! Вы успешно изменили стиль HTML-элемента с помощью CSS. Нам уже весело?

 

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

 

<img src=»https://www.fillmuurray.com/400/500″ >

 

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

 

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

 

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

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

 

<!DOCTYPE html>

<html>

  <глава>

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

    <в стиле

      h1 { цвет: синий;}

    </style>

  </head>

  <тело

    <h1>Приветствуем мир!</h1>

    <p>Это наш первый параграф.</p>

    <img src=»https://www.fillmurray.com/400/500″ alt=»изображение Билла Мюррея»>

  </тело>

</html>

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

 

Как начать кодировать свой первый сайт

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

 

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

 

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

 

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

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

 

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

 

<a href=»www.google.com»>Читайте его запись в Википедии</a>.

 

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

 

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

 

<!DOCTYPE html>

<html>

  <глава>

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

    <в стиле

      h1 { цвет: синий;}

    </style>

  </head>

  <тело

    <h1>Приветствуем мир!</h1>

    <a href=»https://en.wikipedia.org/wiki/Bill_Murray»>Читайте его запись в Википедии</a>.

    <p>Это наш первый параграф.</p>

    <img src=»https://www.fillmurray.com/400/500″ alt=»изображение Билла Мюррея»>

  </тело>

</html>

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

 

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

Пересекая финишную черту

 

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

 

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

 

Основы HTML и CSS

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

 

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

 

Стилизация тела:

 

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

 

тело

  Цвет фона: #eee;

  шрифт-семейство: Helvetica, Arial, sans-serif;

  выравнивание по тексту: в центре;

  поле: 25px;

}

 

фоновый цвет

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

Семейство шрифтов

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

 

Выравнивание по тексту

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

 

Поле

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

Стиль нашего образа:

 

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

 

img {

  Граница: 10px твердый #41bcd6;

  box-shadow: 2px 5px 5px #999;

  подкладка: 10px

  бордер-радиус: 5px;

}

 

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

 

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

 

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

 

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

 

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

Заключение

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

 

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

 

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

 

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

 

    Академия Кодов: 100% БЕСПЛАТНОЕ введение в курс HTML/CSS.

    CSS Zen Garden: Первый пример в сети, который действительно «кликнул» для меня, чтобы помочь мне понять, что вы можете иметь 100 различных по внешнему виду веб-сайтов, которые все используют одну и ту же HTML-разметку

    CSS-анимация

    Мона Лиза использует только CSS

    Анимированная лайковая собака, использующая только CSS.

    CodePen: CodePen — это онлайн-инструмент для живого тестирования и демонстрации вашего HTML, CSS и JavaScript кода.

 

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