Обновите свои навыки работы с фронтендом: практические занятия с HTML5 и CSS3

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

В этой статье мы поможем вам получить практические навыки по основным частям дизайна страницы, HTML5, CSS3. и JavaScript. К концу мы поможем вам создать вашу первую веб-страницу!

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

Чтобы быстрее освоить основы, ознакомьтесь с Руководством по веб-разработке для новичков .

Сегодня мы рассмотрим :

  • HTML: Website Foundation
  • CSS: добавление стиля к наша страница
  • JavaScript: добавление интерактивности
  • DOM: как браузеры видят нашу страницу

Овладейте троицей веб-разработки

Научитесь создавать свои собственные адаптивные и стилизованные веб-страницы.

Веб-разработка: понимание HTML, CSS и JavaScript

Изучите HTML: Фонды

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

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

Теги: Essentials и Div

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

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

После этого мы рассмотрим дополнительный тег div , который будет полезен при реализации JavaScript позже в этой статье.

HTML-тег

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

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

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

Объединяя эти две, первые две строки каждого HTML-документа всегда будут выглядит так:

     

Тег заголовка

Второй важный тег в нашем list, , является элементом контейнера для информации о странице, такой как ее заголовок и связанные с ним ключевые слова.

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

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

В HTML-документе мы этот контейнер всегда будет начинаться в строке 3, то есть верх каждого документа будет выглядеть так:

       

Тег заголовка

Наш третий важный тег, , определяет имя страницы, которая будет представлена ​​браузерам и поисковым системам.

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

Вот пример того, как добавить заголовок в документ HTML:

      aVeryGoodTitle  

Тег тела

Наш четвертый и последний важный тег - , который отмечает начало и конец содержимого страницы.

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

Контейнер основного текста всегда находится под контейнером :

      aVeryGoodTitle     

Тег Div

Наш последний тег, более специализированный

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

Этот и другие теги селектора, подобные ему, необходимы при написании кода JavaScript для работы с HTML, поскольку HTML не является объектно-ориентированным .

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

.

Мы увидим, как это будет происходить позже, когда мы обсудим JavaScript.

Основные типы содержимого

В элементе содержимое страницы может быть дополнительно определено как заголовки или абзацы.

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

Давайте посмотрите немного глубже на оба.

Заголовки

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

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

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

Можно установить заголовки. с первого по шестой уровень, где H1 - самый большой и самый важный заголовок, а H6 - самый маленький и наиболее глубоко вложенный подзаголовок.

В разделе нашего кода это будет выглядеть так:

  

Уровень заголовка 1

Уровень заголовка 2

[…]
Уровень заголовка 6

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

Абзацы

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

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

  

Это абзац текста.

Что будет выглядеть так:

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

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

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

Практический веб-разработчик: пример HTML

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

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

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

Для этого наша программа будет выглядеть так:

     Вызов компилятора    

Зов компилятора

Поздней темной ночью, в холодном офисном свете, разработчик неустанно ищет ошибку в своем коде.

[много часов кодирования позже]

«Почему он не компилируется!», - воскликнул разработчик, запутавшись в собственном цикле.

Fin

Клиентский вид приведенного выше кода.

Примечание. Помните, что вы можете использовать любой браузер. , например Linux, Chrome, Mozilla, Safari и т. д., которые вы предпочитаете. Чтобы узнать больше о браузерах, ознакомьтесь с нашей статьей о веб-разработке для начинающих.

CSS: Добавление стиля

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

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

Здесь нам могут помочь внешние таблицы стилей CSS; вместо этого мы могли бы создать единую таблицу стилей CSS, которая включает всю информацию о стилях, из которой может извлекаться наш HTML-файл. Это считается лучшей практикой в ​​веб-дизайне, поскольку он:

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

Продолжайте обучение.

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

Веб-разработка: понимание HTML, CSS и JavaScript

Базовый стиль Атрибуты

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

Font

Атрибут font используется для установки шрифта нашего текста. Различные шрифты могут быть индивидуально выбраны для каждого типа в документе (p, h1, h4 и т. Д.), Или шрифты могут быть указаны для всего документа, если вы изменяете . Вы можете ввести название определенного шрифта, например Ariel, или общего типа шрифта, например, без засечек, с засечками или моноширинного шрифта. При использовании последнего варианта браузер выберет доступный по умолчанию шрифт из этой категории - скорее всего, Ariel, Times New Roman и Courier, соответственно.

Ниже приведен пример настройки шрифта нашего раздел body:

  body {font-family: 'Georgia', 'Times New Roman', Times, serif;}  

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

Цвет

Цвет задается двумя разными атрибутами: color , который устанавливает цвет текста, и background-color , который устанавливает цвет фона текста. При изменении цвета вы можете выбрать один из 140 предустановленных цветов, поддерживаемых всеми браузерами, написав соответствующую метку («красный», «аквамарин», «темно-зеленый» и т. Д.) Или введя шестнадцатеричный цвет. код (# FF69B4 для ярко-розового).

Вот как это будет выглядеть в таблице стилей CSS:

  h1 {color: red;  }  

Этот атрибут устанавливает положение выбранного элемента на экране. Маржа измеряется в пикселях. У поля есть четыре вектора, на которых оно может быть установлено: margin-top , margin-bottom , margin-right и margin-left , каждый из которых контролирует величину пустого расстояния на этой стороне элемента. Например, значение margin-top - это количество пикселей, на которое элемент будет отображаться от верхнего края страницы.

Также можно установить атрибуты поля. сокращенно в таблице стилей CSS, введя в виде одной строки:

  margin: [top] px [right] px [bottom] px [left] px;  

Или для удобства центрирования элемента вы можете ввести:

  margin: auto;  

Однако это не работает с заголовками.

Связывание таблицы стилей CSS и документа HTML

Все эти атрибуты устанавливаются в отдельной таблице стилей CSS, но как заставить наш HTML-документ применять этот стиль? Чтобы связать два, вам нужно добавить только одну строку!

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

В строке это будет выглядеть так:

    

Здесь href дает HTML-файл, имя которого CSS-файл для ссылки, а rel = "stylesheet" указывает ему использовать файл CSS в качестве таблицы стилей.

Подробнее о таблицах стилей CSS и препроцессоры, ознакомьтесь с нашей статьей SASS для CSS.

Практический веб-разработчик: стилизация нашего примера с помощью CSS

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

Они хотят, чтобы мы создали таблицу стилей CSS со следующими руководствами по стилю:

  • Текст заголовка должен быть слева- с выравниванием, шрифтом с засечками, красным текстом и черным фоном.

  • Абзацы должны иметь левое поле 20 пикселей в шрифт с засечками, белый текст и черный фон.

Вот как мы настроили нашу таблицу стилей CSS и HTML-документ для этого:

horrorStyle.css
callOfCompiler.html
  тело {font-family: 'Georgia', 'Times New Roman', Times, serif;  цвет фона: черный;  } h1 {цвет: красный;  } p {цвет: белый;  маржа слева: 20 пикселей;  } 

Клиентский вид приведенного выше кода.

JavaScript: добавление интерактивности

Для последнего слоя в нашем руководстве, посмотрите, как JavaScript может оживить наши веб-страницы!

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

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

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

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

Некоторые из распространенных - AngularJS, NodeJS и Django (написаны на Python).

Чтобы добавить JavaScript в HTML файла, нам нужно добавить контейнер в наш HTML-файл. Здесь можно написать JavaScript. Поскольку теперь они так тесно переплетены, вам даже не нужно загружать что-либо дополнительное! Раздел выполняется при первой загрузке веб-страницы и продолжает проверять наличие события, такого как щелчок.

Примечание : имейте в виду, что другие языки программирования, такие как PHP, Ruby on Rails и Python, также используются для веб-разработки, особенно для внутреннего и серверного программного обеспечения.

См. нашу статью "Веб-разработка на Python", чтобы узнать больше.

Практика веб-разработки: добавление реактивного элемента

Чтобы завершить наш пример, давайте добавим немного JavaScript.

Наш автор говорит, что просто чтение - это слишком 20 век для их работы; они хотят, чтобы это было интерактивно.

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

Для этого мы будем использовать встроенные подсказки событий из onmouseover = и onmouseout = и разработки двух функций, mOver и mOut чтобы отреагировать на это событие.

Вот как наш HTML-документ будет выглядеть с этой функцией (наша таблица стилей CSS останется прежней):

horrorStyle.css
callOfCompiler.html
       Вызов компилятора    

Вызов компилятора

Поздней темной ночью при холодном офисном свете разработчик неустанно ищет ошибку в своем коде.

[many hou rs кодирования позже]

«Почему он не компилируется!» - воскликнул разработчик, зациклившись на своем собственном цикле.

Скомпилировать?

Fin

function mOver (obj) {obj.innerHTML = "ERROR"} function mOut (obj) {obj.innerHTML = "Compile?"}
Вид со стороны клиента, когда курсор мыши не находится над интерактивным элементом.
Вид на стороне клиента, когда курсор мыши находится над интерактивным элементом,

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

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

Погружение в этот контейнер div , мы видим, что событие onmouseover = вызывает функцию mOver , которая редактирует HTML-код элемента внутри контейнера div , изменяя отображаемый текст на «ERROR».

Аналогично, когда запускается событие onmouseout , функция mOut вызывается для редактирования той же строки HTML для нашего выбранного элемента, изменяя отображаемый текст обратно на «Скомпилировать?».

DOM: как JavaScript взаимодействует с HTML

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

Это потому, что HTML и JavaScript взаимодействует через средний формат: сгенерированная структура данных, называемая объектной моделью документа (DOM), которая переводит элементы HTML и CSS в объекты узлов в древовидной структуре.

При этом DOM создает эти элементы в объектно-ориентированную форму, позволяющую JavaScript легко перемещаться и редактировать код HTML и CSS в узлах, даже когда страница активна!

Как вы можете просмотреть DOM?

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

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

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

Это неудивительно, поскольку DOM страницы анализируется из ее HTML-кода.

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

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

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

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

Заключение

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

Если вы ищете следующий шаг на своем пути и хотите узнать больше о тонкостях веб-разработки, просмотрите наш курс Unraveling HTML, CSS и JavaScript ! Вы получите подробное описание всех новых уловок веб-разработчиков, которые вам понадобятся, чтобы стать современным и эффективным программистом.

Удачного обучения!

Продолжить чтение о веб-разработке

  • Руководство по веб-разработке для новичков
  • SASS для CSS: расширенные навыки работы с интерфейсом
  • Учебное пособие по CSS Flexbox: как использовать свойства flexbox

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