Здравствуйте, товарищи новички!
Если вы новичок в веб-разработке, идея написания кода веб-сайта с нуля может показаться пугающей. Однако с правильными инструментами и руководством любой может научиться создавать свой собственный веб-сайт.
Какой редактор мне использовать?
Первое, что вам нужно сделать, это выбрать редактор. Редактор — это программное обеспечение, которое вы будете использовать для написания и редактирования кода. Доступно несколько редакторов, как бесплатных, так и платных, но для целей этого поста мы сосредоточимся на Visual Studio Code.
Visual Studio Code — это бесплатный редактор с открытым исходным кодом, который широко используется в сообществе веб-разработчиков. Он доступен для Windows, macOS и Linux и поддерживает широкий спектр языков программирования. Одним из преимуществ использования Visual Studio Code является наличие большого и активного сообщества пользователей, поэтому, если у вас возникнут какие-либо проблемы, вы, скорее всего, сможете найти решение в Интернете.
Чтобы начать работу с Visual Studio Code, просто загрузите и установите его на свой компьютер. Как только вы это сделаете, вы готовы начать кодирование! Если вы новичок в программировании, вы можете начать с простого веб-сайта на HTML и CSS, так как они являются строительными блоками большинства веб-сайтов.
В заключение, выбор редактора — важный первый шаг в веб-разработке. Несмотря на то, что существует множество редакторов на выбор, Visual Studio Code — отличный выбор для начинающих благодаря простоте использования, универсальности и большому сообществу пользователей.
Сегодня мы узнаем о двух основных строительных блоках Интернета: HTML и CSS.
Раньше я думал, что HTML — это болезнь, но теперь я понимаю, что это всего лишь язык гипертекстовой разметки. Это язык, используемый для создания структуры веб-страницы. Думайте о HTML как о скелете в вашем шкафу, *** я имею в виду скелет вашего веб-сайта. Он сообщает вашему веб-браузеру, где размещать различные элементы, такие как текст, изображения и видео.
CSS означает каскадные таблицы стилей. Это язык, используемый для оформления контента, созданного с помощью HTML. CSS определяет, как выглядит ваша веб-страница, включая цвет текста, размер заголовков и расстояние между абзацами.
Теперь, когда мы знаем, что такое HTML и CSS, давайте углубимся в некоторые основы HTML:
Теги и элементы
HTML состоит из тегов и элементов. Тег — это код, который указывает вашему браузеру что-то сделать, а элемент — это содержимое, заключенное в тег.
Например, открывающий тег для абзаца
, а закрывающий тег
. Любой текст или содержимое между этими двумя тегами считается элементом абзаца.
<p>Hello there</p>
Состав
HTML имеет базовую структуру, которая должна быть включена в каждую веб-страницу. Эта структура включает объявление ‹!DOCTYPE›, открывающий тег,
section и section.
Объявление ‹!DOCTYPE› используется, чтобы сообщить вашему браузеру, какой тип HTML используется. Раздел содержит информацию о веб-странице, такую как заголовок и любые метаданные. В разделе находится содержимое вашей веб-страницы.
<!Doctype html> <html> <head> </head> <body> <!-- This is what the website shows and most of our code goes here --> </body> </html>
Общие теги HTML
Некоторые общие теги HTML, которые вы будете часто использовать, включают:
-
: Теги заголовков для разных уровней заголовков
: Тег абзаца
: Тег привязки для создания ссылок
: тег изображения для добавления изображений на вашу веб-страницу.
- : неупорядоченный список и теги элементов списка для создания маркированных списков. Теперь давайте рассмотрим некоторые основы CSS:
Селекторы
CSS использует селекторы для выбора HTML-элементов и применения к ним стилей. Селектор может быть элементом HTML, классом или идентификатором.
Например, чтобы настроить таргетинг на все абзацы на веб-странице, вы должны использовать селектор p.
Чтобы настроить таргетинг на определенный абзац с классом «highlight», вы должны использовать селектор .highlight.
Свойства и значения
Стили CSS состоят из свойств и значений. Свойство — это характеристика HTML-элемента, которому вы хотите придать стиль, например «цвет» или «размер шрифта». Значение — это конкретная настройка для этого свойства, например «красный» или «20 пикселей».
Например, чтобы изменить цвет всех абзацев на красный, вы должны использовать код CSS p {color: red;} .
Общие стили CSS
Вот некоторые распространенные стили CSS, которые вы будете часто использовать:
цвет: для изменения цвета текста.
размер шрифта: для изменения размера шрифта
background-color: для изменения цвета фона
margin and padding: для управления расстоянием вокруг элемента.
Вот оно, краткое введение в HTML и CSS. С этими основами вы можете начать создавать свои собственные веб-страницы и добавлять собственные стили. Продолжайте практиковаться и экспериментировать, не бойтесь задавать вопросы или обращаться за помощью. Удачного кодирования!
