В настоящее время я являюсь разработчиком 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 г.