Создание собственного веб-сайта для начинающих: 5 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:51

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

Запасы

• Компьютер Macintosh или Windows (хотя также можно использовать дистрибутивы Linux, я пока их пропускаю, поскольку это введение для новичков).
• Текстовый редактор на ваш выбор (Блокнот в Windows, TextEdit на Mac) или IDE по вашему выбору. По своему опыту я обнаружил, что Visual Studio Code лучше всего работает для меня, поэтому я также рекомендую проверить его здесь: https://code.visualstudio.com/, не говоря уже о том, что он работает на всех платформах ОС.

Шаг 1. Теги и немного истории

После того, как вы определились с выбором текстового редактора или IDE, давайте начнем с основ.

Хотите верьте, хотите нет, но язык HTML или гипертекстовой разметки существует уже почти 30 лет, и с каждым годом в язык вносится все больше и больше улучшений. Теперь вы можете спросить, как браузер интерпретирует то, что выводить на экран? Это делается в нескольких частях:

Форматировать HTML-документ очень просто. У вас есть две части, известные как голова и тело. Заголовок веб-сайта содержит код, который не виден пользователю. Это используется для связывания таблиц стилей и объявления других необходимых битов, необходимых для правильного отображения сайта. Следуя за головой, тело, как это звучит, является телом веб-сайта. Здесь вы можете сказать своим голосом и продемонстрировать аудитории свои фантастические навыки работы с HTML! Теперь это не так просто, как просто ввести текст в основной текст и отобразить его именно так, как вы хотите, но это почти так же легко в определенном смысле с использованием вещей, которые мы называем тегами.

Вот некоторые из основных тегов HTML:

• title - используется для указания браузеру названия страницы. Это также то, что вы видите, когда смотрите на вкладку веб-страницы.
• h1, h2, h3, h4 - которые используются для заголовков разных размеров, где h1 является наибольшим, а h4 - наименьшим. Я расскажу об этом подробнее в следующем разделе.
• p - абзац, используемый для написания абзацев текста. Как абзацы на бумаге.
• br - разрыв, который вставляет разрыв в строку с текстом.
• a - используется для создания ссылок на другие страницы, например, интерактивной ссылки.
• img - используется для ссылки на изображение на веб-страницу.
• ul, ol, li - неупорядоченные списки, упорядоченные списки и элементы списка.
• - используется для добавления в код встроенных комментариев, которые не будут видны конечному пользователю.

А вот несколько тегов CSS (визуально):

• цвет - используется для присвоения определенного цвета определенному элементу или для настройки на веб-странице.
• font-size - используется для изменения размера шрифта на странице.
• background-color - используется для изменения цвета фона определенного элемента или всей страницы.

Я также приложил небольшую шпаргалку, чтобы помочь вам, если вы чувствуете себя немного потерянным, но не волнуйтесь, вы быстро освоитесь! Кроме того, www.w3schools.com также является отличным ресурсом для ответов на любые ваши вопросы по программированию. Они определенно сэкономили мне время или тоже.

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

и используются для закрытия тега, например

. Это важно, иначе браузеру некуда будет остановиться. Между

а также

теги, здесь вы вводите все, что хотите!

Шаг 2: Настройка редактора

Теперь, когда мы немного рассмотрели основные элементы веб-сайта HTML, давайте погрузимся и попробуем это на себе. На следующем шаге я буду использовать Visual Studio Code для программирования веб-сайта, но макет кода будет таким же, если вам удобнее использовать Блокнот или TextEdit.

В Блокноте:

• В Блокноте программа запускается с пустым файлом, что упрощает начало работы. Это также позволит нам перепрыгнуть на несколько шагов по сравнению с использованием VS Code. Давайте начнем с сохранения файла в правильном формате.
• Щелкните Файл> Сохранить.
• Введите имя файла, затем.html и в разделе «Тип файла» выберите все файлы. Нажмите "Сохранить".

В коде VS:

• Лучший способ воспользоваться всеми функциями IDE - начать с создания файла и сообщить IDE, какой это тип файла. Это можно сделать следующим образом:
• Щелкните Файл> Новый файл.
• Откроется пустой файл
• Затем вы захотите начать с сохранения файла, хотя и пустого, поскольку это позволит среде IDE понять, какой тип файла будет конечным продуктом. При сохранении не забудьте включить расширение.html в конце имени файла. Нажмите "Сохранить".

Шаг 3: чертежи

После того, как вы успешно сохранили файл filename.html, давайте начнем с создания основы для нашей веб-страницы. Вспомните выше, какие ключевые части файла нам нужно объявить, прежде чем мы сможем начать создание остальной части HTML-страницы. Совет: при запуске фреймворка для сайта HTML-тег! DOCTYPE сообщает браузеру, что файл, который он читает, является файлом HTML. Это может пригодиться, если у вас есть разные типы кода в одном файле и вы хотите переключаться между интерпретаторами. Что касается объема этого руководства, мы не будем особо касаться этого, но если после этого руководства вам интересно узнать больше о разработке HTML, не стесняйтесь попробовать. Я вставлю HTML-тег! DOCTYPE вверху файла для лучшей практики. Не забудьте открывать и закрывать с помощью.

Здесь пригодится сохранение файла перед началом программирования, поскольку теперь, когда среда IDE знает, что работает с файлом HTML, она будет использовать intellisense для завершения выражения и предложения предложений, чтобы вы случайно не забыли закрыть тег.. Обратите внимание, что для тех из вас, кто использует Блокнот, intellisense недоступен, как в среде IDE. Мы начинаем с ввода тегов head и body следующим образом: (см. Второе изображение).

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

Шаг 4: Код; Код; Код;

Мы можем начать с вставки заголовка для нашего вновь созданного файла. Введите все, что хотите. Помните, что это имя отображается на вкладке браузера. Давайте также начнем с ввода заголовка для нашего сайта. Вспомните, как мы это делаем. Я слышал h1 / 2/3/4? Это правильно!

Прежде чем мы продолжим, я считаю полезным открыть наш файл в окне браузера, чтобы мы могли видеть в реальном времени, как наши изменения отражаются в браузере. Вы можете сделать это, щелкнув Файл> Сохранить, чтобы сохранить файл, перейдя в папку, в которой сохранен файл HTML, для меня это рабочий стол, и использовать браузер по вашему выбору, чтобы открыть файл, и вы посмотрите на него, вот и ваша страничка! Примечание. Я лично использую Safari в качестве предпочтительного браузера на моем компьютере, однако при веб-разработке Firefox является золотым стандартом для тестирования, поскольку он работает практически со всеми языками веб-сценариев.

Как видите, на вкладке отображается заголовок, а также отображается заголовок h1. Я предпочитаю, чтобы окно браузера файла открывалось вместе с IDE, поскольку, когда вы вносите изменения в IDE и сохраняете их, изменения мгновенно отображаются в браузере.

Не стесняйтесь пробовать добавлять теги и экспериментировать с разными вещами, которые вы можете делать с HTML. Как вы можете видеть ниже, я добавил несколько абзацев, разрывов, внешнюю гиперссылку на Instructables.com, изображение (которое может быть связано либо из внешнего источника, либо в том же каталоге, где хранится файл. HTML), пример неупорядоченного списка, упорядоченного списка и, наконец, комментария.

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

Шаг 5: Заключительные мысли

И вот оно; вы успешно создали свою первую веб-страницу! Поскольку это руководство для начинающих, я хочу, чтобы ваш первый опыт работы с HTML был приятным. Лучший способ научиться на моем опыте - это погрузиться и попробовать что-то на практике, посмотреть, что вы можете сделать со своим кодом, а также посмотреть, как вы можете взломать свой код. Это обеспечивает целостность и помогает лучше понять, как и почему код работает именно так. Помните, что www. W3Schools.com - отличный ресурс для вопросов, и они даже предлагают виртуальную песочницу в браузере, чтобы опробовать ваш код. Надеюсь, вы чему-то научились, и счастливого программирования!