Создание html главной страницы

Как создать первую веб-страницу

Данная статья написана командой Vertex Academy. Это одна из статей из нашего Самоучителя по HTML&CSS. Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

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

В качестве текстового редактора можно использовать как обычный Блокнот, так и более продвинутые программы. Рассмотрим некоторые из них:

Текстовые редакторы

Блокнот – это стандартная программа ОС Windows. Чтобы создать документ в этом редакторе – кликните по рабочему столу правой кнопкой мыши, выберите «создать» «текстовый документ».

Notepad++ представляет собой по сути более продвинутый блокнот, но в нем есть подсветка HTML-синтаксиса, что делает чтение кода более удобным. Рекомендую использовать этот редактор в процессе обучения.
Чтобы скачать Notepad++ идем на их сайт и жмем «download». После завершения загрузки устанавливаем его на свой компьютер. Программа абсолютно бесплатна.

Также в него можно установить плагины, которые позволят избежать кучи ручной работы, но для начала нам нужно набить руку и написать сотни метров кода именно вручную, чтобы все лучше усвоилось. Поэтому о плагинах пока не думаем.
Помните, как в 1-м классе мы писали одну и ту же букву по несколько строк в специальных тетрадках в косую линию? 🙂 Считайте, что сейчас я прошу вас писать эти буковки, т.к. это улучшит ваше понимание и запоминание кода.

Sublime Text очень удобен тем, что подсказывает теги (автодополнение), сам делает отступы, закрывает теги и много чего другого. Словом, он очень упрощает работу над HTML-документом, но рекомендую использовать его позже, когда уже выучите хотя бы основные теги и поймете главные правила синтаксиса. Правда, если у вас не Windows, а другая операционка – ставьте сразу Sublime.

Здесь выбирайте подходящую вам систему и качайте. Программой можно пользоваться бесплатно, но, если вам захочется убрать надпись “unregistered” – придётся заплатить $70.

Браузер

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

Итак, с рабочим инвентарём мы определились.

Теперь создайте папку с любым названием, например, “HTML_Start” и в ней сохраните свой первый HTML-документ:

1. Открываем Notepad++
2. В левом верхнем углу жмём «Файл» — «сохранить как», выбираем нашу папку
3. Называем файл «index.html», либо просто «index» и в строке «тип файла» выбираем Hyper Text Markup Language file.
4. Жмём «сохранить».

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

Почему именно index.html ?

Обычно мы заходим на сайт с главной страницы. Когда у сайта множество страниц, мы подсказываем веб-серверу, которую из них нужно загружать автоматически. В большинстве случаев, адрес сайта указывается кратко, без лишних файлов на конце. Сравните, vertex-academy.com и vertex-academy.com/index.html – это одна и та же страница, но мы конечно же напишем, как в первом варианте. Вот тогда браузер заходит в папку сайта и определяет файл, который нужно показать. Если index.html в этой папке отсутствует, тогда браузер покажет список всех файлов, которые лежат в этой папке.
Теперь мы наконец готовы создать свою первую веб-страницу.

Но прежде буквально пару слов о тегах

HTML-код всегда помещен между угловых скобок.
Например,

Источник

Урок 2. Создание главной страницы сайта

– Научиться добавлять текст на вебстраницу.
– Научиться форматировать текст.
– Научиться добавлять списки.
– Научиться добавлять видоеконтент на страницу.

В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 2.1):

2.1 — Предварительный просмотр веб-страницы

Создание главной страницы.

В первом уроке вами была создана страница с дизайном сайта, в начале второго урока вы создадите страницу index.html, которая будет являться главной страницей сайта.

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

– Запустите Visual Studio Code. Автоматически должен открыться ваш проект. Если этого не произошло, то воспользуйтесь первым уроком и откройте проект.
– Кликните на файл design.html правой кнопкой мыши и выберите пункт «Копировать».
– Кликните правой кнопкой мыши в пустой области под файлом design.html и выберите в открывшемся меню пункт «Вставить».
– Кликните на появившийся файл design copy.html правой кнопкой мыши и выберите в открывшемся меню пункт «Переименовать».
– Задайте имя файла index.html и нажмите кнопку «Enter».

В результате выполнения всех пунктов упражнения у вас должен появиться в списке файлов, файл index.html, а так же он должен быть открыт в рабочей области Visual Studio Code (рисунок 2.2).

2.2 — Результат создания файла index.html

Оформление главной страницы.

В этом упражнении вы укажите, что index.html это главная страница сайта.

– Перейдите в рабочую область Visual Studio Code.
– Переместите курсор мыши к тегу Title.
– Добавьте через тире к тексту ЮК Советник текст «Главная страница» (рисунок 2.3).

2.3 — Главная страница в теге Title

Добавления абзаца на страницу.

HTML текст представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения.

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

– Выберите файл index.html.
– Кликните на строку с текстом «Контент«(рисунок 2.4).

– С помощью файлового менеджера откройте папку work_files, а ней папку txt.
– С помощью текстового редактора откройте файл index.txt (рисунок 2.5).

– Выделите мышью первый абзац, кликните правой кнопки мыши и выберите в открывшемся меню пункт «Копировать».
– Перейдите в Visual Studio Code и удалив слово «Контент» кликните правой кнопкой мышью между тегами , . В появившемся меню выберите пункт «Вставить».
– В конце предложений вставьте тег переноса на новую строку
(рисунок 2.6).

2.6 — Вставка текста и тега переноса строки

В результате выполнения упражнения вы получили страницу с абзацем (рисунок 2.7).

Добавления списка на страницу.

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

– Выберите файл index.html.
– Кликните на конец абзаца (на тэг

) и нажмите «Enter».
– Для добавления ненумерованного списка добавьте теги и .
– Для добавления одного пункта списка добавьте между предедыщими тегами, теги и .
– Каждый отдельный пункт списка находится между тегами и .
– Заполните список из файла index.txt согласно рисунку 2.8.

В результате выполнения упражнений вы получили страницу с абзацем и списком (рисунок 2.9).

Повторив упражнения на добавление абзаца и списка, добавьте второй, третий абзац и второй список из файла index.txt (рисунок 2.10).

2.10 — Главная страница. Три абзаца и два списка

Добавления видеоконтента на страницу.

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

– Выберите файл index.html.
– Кликните на строку ниже
– Для выравнивания видеоконтента по середине введите текст:
– Для добавления видео добавьте теги и
– Введите между этими тегами фразу Ваш браузер не поддерживает HTML5.
– Для добавления видео перейдите к тегу видео и введите атрибут src, указав путь до файла video/present.mp4 (рисунок 2.11).

 html> head> title>Моя веб-страницаtitle> head> 

h1>Добро пожаловать на мою страницу!h1> h2>Меня зовут Макс.h2> h3>Надеюсь, вам не будет скучно.h3> 

b> Полужирный текст b> i> Наклонный текст i> u> Подчеркнутый текст u> sub> Подстрочный текст sub> sup> Надстрочный текст sup>