В настоящее время я являюсь разработчиком SQL в ZAIO, участвую в 5-недельной программе подготовки к работе с SQL.
Мне было поручено создать исследовательский проект для простой веб-страницы HTML вместе с CSS. Сначала это казалось трудным, пока я не понял, что такое основы.
БАЗОВАЯ ВЕБ-СТРАНИЦА С HTML И CSS
Прежде чем мы начнем нашу экскурсию, чтобы выяснить, как создавать сайты с помощью HTML и CSS, важно понять контрасты между двумя диалектами, структуру предложений каждого языка и некоторые основные фразы.
HTML (язык гипертекстовой разметки) используется для создания фактического содержимого страницы, например письменного текста.
CSS (каскадные таблицы стилей) отвечает за дизайн или стиль веб-сайта, включая макет, визуальные эффекты и цвет фона.
Таким образом, объединение этих двух элементов дает простой макет веб-страницы. В зависимости от навыков в CSS, java-скриптах и веб-дизайне, его можно превратить из статической страницы в адаптивный, анимированный и полнофункциональный веб-сайт.
При объединении файлов CSS и HTML для оформления веб-страницы существует три способа вставки таблицы стилей:
- Внешний CSS
- Внутренний CSS
- Встроенный CSS
Другие важные общие фразы в HTML
* Элементы
Элементы — это обозначения, определяющие структуру и содержимое объектов на странице. Некоторые из наиболее часто используемых элементов включают несколько уровней заголовков (обозначаются как элементы с <h1>
по <h6>
) и абзацы (обозначаются как элемент <p>
); далее список включает элементы <a>
, <div>
, <span>
, <strong>
и <em>
и многие другие.
Элементы идентифицируются с помощью угловых скобок "меньше" и "больше" < >
, окружающих имя элемента. Таким образом, элемент будет выглядеть следующим образом:
<a>
* Теги
Использование угловых скобок "меньше" и "больше" вокруг элемента создает так называемый тег. Теги чаще всего встречаются в виде пар открывающих и закрывающих тегов.
Открывающий тег отмечает начало элемента. Он состоит из знака «меньше», за которым следует имя элемента, а затем заканчивается знаком «больше»; например, <div>
.
Закрывающий тег отмечает конец элемента. Он состоит из знака «меньше», за которым следует косая черта и имя элемента, а затем заканчивается знаком «больше»; например, </div>
.
Содержимое, находящееся между открывающим и закрывающим тегами, является содержимым этого элемента. Анкорная ссылка, например, будет иметь открывающий тег <a>
и закрывающий тег </a>
. То, что находится между этими двумя тегами, и будет содержимым якорной ссылки.
Итак, якорные теги будут выглядеть примерно так:
<a>...</a>
Атрибуты
Атрибуты — это свойства, используемые для предоставления дополнительной информации об элементе. Наиболее распространенные атрибуты включают атрибут id
, который идентифицирует элемент; атрибут class
, который классифицирует элемент; атрибут src
, указывающий источник встраиваемого контента; и атрибут href
, который предоставляет гиперссылку на связанный ресурс.
Атрибуты определяются в открывающем теге после имени элемента. Обычно атрибуты включают имя и значение. Формат этих атрибутов состоит из имени атрибута, за которым следует знак равенства, а затем значение атрибута в кавычках. Например, элемент <a>
, включающий атрибут href
, будет выглядеть следующим образом:
<a href="http://olwethumkhuhlane.com/">Olwethu Mkhuhlane</a>
Когда я сталкивался с какой-либо ошибкой или трудностью, я обращался за помощью к w3schools. Пожалуйста, сделайте то же самое, если вы боретесь в любом случае.
Это предварительный просмотр моей целевой страницы. (найдите ссылку на сайт ниже)
Нажмите ссылку на веб-сайт моего портфолио.
Только подумайте, теперь вы знаете основы HTML и CSS. По мере того, как мы продолжим, и вы потратите больше времени на написание HTML и CSS, вам станет гораздо удобнее работать с двумя языками.
Напомним, что до сих пор мы рассмотрели следующее:
- Разница между HTML и CSS
- Знакомство с HTML-элементами, тегами и атрибутами
- Настройка структуры вашей первой веб-страницы
- Ссылка на CSS в вашем HTML
Я определенно рекомендую использовать HTML и CSS для создания простых веб-сайтов, поскольку их легко понять и использовать, и это делает процесс веб-дизайна быстрее и проще.
Выполнено Olwethu Mkhuhlane, обучение Zaio SQL, 5-недельная программа, 2020 г.