Как называется главная страница сайта в html

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

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

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

1. Текстовый редактор
2. Браузер

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

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

Блокнот – это стандартная программа ОС 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-код всегда помещен между угловых скобок.
Например,

ОСНОВНЫ ЯЗЫКА HTML

HTML это язык, который позволяет представлять информацию (например, научные исследования) в Internet. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы увидеть HTML-код страницы в браузере Chrome

, необходимо кликнуть правой кнопкой мыши на выбранной странице и выбрать "View Page Source".

ℹ️ Важно

Если вы хотите создавать web-сайты, вы не обойдётесь без HTML. Даже если вы используете для создания web-сайтов такие программы, как Dreamweaver, знание основ HTML значительно упростит вам жизнь, а ваш web-сайт станет намного интересней. Хорошей новостью является то, что HTML достаточно легко изучать и использовать.

Почитать про историю развития HTML можно здесь

Что такое HTML-Тег ? ��

Теги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт. Все Теги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">". Обычно имеются два Тега — открывающий: <html> и закрывающий: </html> . Различие в том, что в закрывающем имеется слэш "/". Всё содержимое, помещённое между открывающим и закрывающим Тегами, является содержимым Тега. Но, как говорится, из каждого правила есть исключения, и в HTML также имеются Теги, которые являются и открывающими, и закрывающими. Эти Теги не содержат текста, а являются метками, например, перенос строки выглядит так: <br /> . Большинству браузеров безразлично, в каком регистре введены буквы Тегов. <HTML> , <html> или <HtMl> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому привыкайте печатать Теги в нижнем регистре.

Структура HTML страницы

Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо. Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст. Во-первых необходимо сообщить браузеру, что вы будете "говорить" с ним на языке HTML. Это делается Тегом <html> (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить Тег " <html> ". Как Вы помните <html> это открывающий Тег, который должен иметь и закрывающий Тег после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий Тег " </html> " на пару строк ниже и вводите весь текст документа между <html> и </html> . Следующее, что необходимо, это "head" (голова или "шапка"), которая содержит служебную информацию о вашем документе, и "body" (тело), содержимое самого документа. Поскольку HTML логичен, head ( <head> и </head> ) находятся выше body ( <body> и </body> ). Давайте скажем пару слов о том, как собственно создать веб-страницу на практике. Все очень просто, для этого понадобится текстовый редактор, желательно с подсветкой синтаксиса HTML (Sublime Text 2, Notepad++).

❗️ Важно

Примечание: Главную страницу сайта принято называть index (index.html, index.php,index.js).

Все, что будет отображаться на создаваемой web странице, должно быть размещено внутри открывающего и закрывающего <body> . Внутри <head> размещается служебная информация, которая может понадобиться браузеру для правильной интерпретации кода документа. Эта служебная информация внутри <head> не будет видна на web странице.

❗️ Важно

Не забывайте про табуляцию, чтобы Ващ код был читаемым.

Что такое HTML-атрибуты ?��

Теги это метки, указывающие браузеру, как нужно представлять ваш web-сайт. (Например, <br /> информирует браузер, что нужно сделать перевод строки). В некоторых Тегах вы можете вводить дополнительную информацию. Такая дополнительная информация называется "атрибут". Атрибуты всегда записываются внутри Тега, после них следует знак равенства и детали атрибута, заключённые в двойные кавычки. Точка с запятой после атрибута служит для разделения команд разных стилей. Мы к этому ещё вернёмся.

Вложенные Теги

Как вы заметили в разделе структура HTML-страницы, между открывающим и закрывающим Тегами могут быть и другие Теги. Такие Теги называются вложенные. А Тег, внутрь которого они вложены, называется родитель.

Ссылка <a>

Сайт это множество перелинкованных между собой страниц. Ссылка устанавливается с помощью «закрывающегося» тега <a> , у которого есть 12 атрибутов. Ознакомиться со всеми доступными атрибутами можно здесь

Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:

Если page 2 помещена в подпапку "subfolder", ссылка выглядит так:

Вы можете также создавать ссылки-переходы внутри самой страницы — например, оглавление со ссылками на главы. Всё, что вам необходимо, — использовать атрибут id и символ "#". Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:

Теперь можно создать ссылку на этот элемент с помощью знака "#" в атрибуте ссылки. Знак "#" сообщает браузеру, что это переход на той же самой странице. После "#" должен следовать id Тега, на который выполняется переход. Например:

Вы можете также сделать ссылку на e-mail адрес почти так же, как в ссылке на документ:

Блочные и строковые элементы

В описании элементов разметки языка HTML существует понятие строкового (in-line) элемента разметки и блочного (block) элемента разметки. Объяснить различие между блочным и строковым элементами можно на примере: -параграф — это блочный элемент разметки; -выделение курсивом — это строковый элемент разметки.

Блочные элементы HTML (BLOCK) занимают по ширине всю область, в которой они находятся. Высота блочного HTML элемента если он пустой равна нулю, если блочный элемент имеет какое-либо содержимое, то его высота равна высоте содержимого плюс внутренний отступ блочного элемента. Строчные элементы HTML (INLINE) – это такие HTML элементы, ширина которых равна ширине их содержимого, если у строчного элемента HTML нет содержимого, то его ширина равна нулю. Высота строчного элемента равна высоте его содержимого. Ширина строчного элемента HTML не подстраивается ни под один элемент, поэтому содержимое строчного элемента может быть перенесено на другую строку в том случае если ширина области просмотра недостаточно для отображения всего содержимого строчного элемента HTML.

Типичным блочным элементом HTML является HTML тег <div> , HTML тегу <div> доступны все универсальные атрибуты и события HTML, уникальных атрибутов у тега <div> нет, оформление содержимого элемента <div> производится при помощи таблиц стилей CSS. Типичным строчным элементом HTML является HTML тег <span> , для которого доступны универсальные HTML атрибуты и атрибуты событий HTML, у тега <span> нет ни одного уникального атрибута.

Теги для форматирования текста

• <strong> — важный фрагмент текста, жирный;
• <em> — акцентирование внимания, курсив;
• <mark> — подсвеченный участок текста;
• <b> — жирный шрифт;
• <i> — курсив, наклонный шрифт;
• <s> — зачеркнутый текст;
• <small> — текст меньшего размера;
• <sup> — верхний индекс;
• <sub> — нижний индекс;
• <pre> — предварительно отформатированный текст;
• <dfn> — термин;
• <h1> — <h6> — заголовки;
• <q> — короткая внутристрочная цитата;
• <blockquote> — цитата;
• <cite> — сноска на название материала;
• <code> — программный код;
• <samp> — результат вывода компьютерной программы;
• <kbd> — клавиатурный ввод;
• <var> — переменная компьютерной программы.;
• <time> — дата и/или время.

ℹ️ Примечание

Примечание: Возможно использовать комбинации Тегов внутри друг друга, так, например, чтобы получить жирный курсивный текст надо написать следующее:

Изображения

Для того чтобы вставить изображение используется тег <img> . Этот тег имеет единственный обязательный атрибут src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a> . При этом вокруг изображения в некоторых браузерах отображается рамка, которую можно убрать, добавив атрибут border=«0» в тег <img> . Также изображение можно маштабировать, указав в атрибутах width и height , желаемый размер. Атрибут alt содержит описание изображения, которое выводится до загрузки изображения.

Для того чтобы задать позицию изображения (слева, справа, по центру) используется атрибут align , который может принимать пять значений: bottom, left, middle, right, top.

Полный список атрибутов img можно посмотреть здесь

Можно легко вставлять изображения, размещённые в других папках, или даже на других web-сайтах:

❗️ Примечание

При использовании аттрибутов width и height, неплохо помнить, что реальный размер файла изображения в килобайтах останется неизменным, и этот файл будет занимать то же время для загрузки, как и раньше, хотя и будет выглядеть на экране уменьшенным. Следовательно, никогда не уменьшайте размер изображения атрибутами width и height. Вместо этого уменьшайте размер изображения в программе редактирования.

Таблицы

Таблицы используются, когда вам необходимо показать "табличные данные", например, информацию, логически упорядоченную в столбцы и ряды. Построение таблиц в HTML может показаться сложным на первый взгляд, но, если вы не будете дёргаться, это окажется строго логичным — как и всё в HTML.

Для вставки таблиц используются 3 базовых Тега:

• <table> — начало и конец таблицы. Логично.
• <tr> — "table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек. Тоже логично.
• <td> — сокращение от "table data/табличные данные". Этот Тег начинает и заканчивает каждую ячейку ряда таблицы. Всё просто и логично.

Список атрибутов Тега table можно посмотреть здесь

Списки

Тег <ul> устанавливает начало маркированного списка, и как Вы, наверное, уже догадались, тег </ul> — его конец.

Что значит маркированный? ��

Это значит что перед каждым элементом списка располагается маркер, он же буллит, — типографский знак, используемый для выделения элементов списка. Каждый элемент такого списка заключен между тегами <li> и </li> . У данного тега есть один собственный атрибут type, который может принимать 3 значения square (квадрат), disc (диск), circle (кольцо).

По умолчанию для элемент списка устанавливается тип disc.

ℹ️ Примечание

атрибут type для тега <li> позволяет установить тип для каждого из элементов списка в отдельности, для того, чтобы применить тип для всего списка, атрибут type нужно использовать для тега <ul> .

Рассмотрим код простого маркированного списка:

Также в HTML существует такое понятие, как нумерованный список, который устанавливается с помощью тега <ol> . У данного тега есть три собственных атрибута:

• type — Устанавливает вид маркера списка.
• reversed — Нумерация в списке становится в обратном порядке (3,2,1).
• start — Число, с которого будет начинаться нумерованный список.

Код простого нумерованного списка:

На самом деле, списки применяются не только при выводе списка, как может показаться на первый взгляд. Зачастую меню сайта также выводят при помощи списка, при выводе рубрик на блогах также используют списки. Список может отображаться как вертикально, так и горизонтально. Но во втором случае силой одного HTML не обойтись.

Пример ниже содержит большинство описанных выше элементов.

Формы

Форма HTML представляет собой документ, созданный с использованием элементов HTML. Назначением формы является сбор информации от пользователей. После того как пользователь заполнит форму и запускает процесс ее обработки, информация из нее попадает в программу, работающую на сервере.

У тега <form> есть свои атрибуты:

• accept-charset — Устанавливает кодировку, в которой сервер может принимать и обрабатывать данные.
• action — Адрес программы или документа, который обрабатывает данные формы.
• autocomplete — Включает автозаполнение полей формы.
• enctype — Способ кодирования данных формы.
• method — Метод протокола HTTP.
• name — Имя формы.
• novalidate — Отменяет встроенную проверку данных формы на корректность ввода.
• target — Имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.

Элемент <INPUT> используется для определения области внутри формы, где собираются данные. Данный элемент представляет собой поле для ввода информации пользователем (обычно одна строка текста). В этом случае требуется наличие атрибута NAME для определения наименования переменной поля.

Можно использовать следующие атрибуты:

• MAXLENGTH — ограничивает число вводимых символов (по умолчанию ограничений нет)
• SIZE — размер видимой на экране области, занимаемой текущим полем. Если MAXLENGTH > SIZE, броузер будет прокручивать данные в окне.
• VALUE — определяет начальное значение поля ввода.

Атрибут CHECKBOX

При создании форм часто бывает необходимо получить ответ пользователя на вопрос типа (Да/Нет) или (Правда/Ложь). Например, нужно выбрать из списка несколько значений. Для создания независимых кнопок в формах можно использовать атрибут CHECKBOX . В зависимости от содержания можно отметить несколько флагов. Вместе с атрибутом CHECKBOX должны использоваться следующие атрибуты:

• CHECKED — инициализировать данный флаг, как отмеченный
• NAME — наименование поля ввода формы
• VALUE — значение поля ввода

Атрибут RADIO

Данный атрибут используется для организации выбора одного единственного варианта из нескольких возможных. Вместе с атрибутом RADIO должны использоваться следующие атрибуты:

• CHECKED — инициализировать данный флаг, как отмеченный
• NAME — наименование поля ввода формы
• VALUE — значение поля ввода

Элемент SELECT

Для организации списков с прокруткой и выпадающим меню можно использовать элемент <SELECT> .

Для определения списка пунктов используются элементы <OPTION> внутри <SELECT> .

Вместе с атрибутом SELECT можно использовать следующие атрибуты:

• NAME — наименование обьекта
• MULTIPLE — позволяет выбрать более чем одно наименование
• SIZE — определяет число пунктов, видимых для пользователя.

SIZE = 1 — броузер выводит список на экран в виде выпадающего меню (видно одно наименование) SIZE > 1 — броузер представляет на экране обычный список (число — количество видимых наименований)

C элементом OPTION можно использовать следующие атрибуты:

• SELECTED — для первоначального выбора значения элемента по умолчанию
• VALUE — значение, возвращаемое формой после выбора пользователем данного пункта. По умолчанию значение поля равно элементу <OPTION> . Когда пользователь заполняет форму, атрибут NAME элемента <SELECT> состыковывается с атрибутом VALUE элемента.

Атрибут SUBMIT

Данный атрибут используется при окончании ввода пользователем данных. Браузер, в свою очередь выводит данный элемент, как кнопку, на которой пользователь может щелкнуть, чтобы завершить процесс редактирования. Вместе с атрибутом SUBMIT можно использовать следующие атрибуты:

• NAME — наименование кнопки SUBMIT
• VALUE — значение переменной поля в вашей форме

Элемент TEXTAREA

Данный элемент используется для ввода большого количества текстовой информации (несколько строк). Вместе с элементом TEXTAREA можно использовать следующие атрибуты:

• NAME — наименование поля
• COLS — число колонок (символов) в текстовой области
• ROWS — число видимых строк в текстовой области

Следующий пример содержит большинство описанных выше элементов.

Валидация HTML

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

Практика ��‍����‍��

Используя материал лекции наверстать небольшую персональную страничку о себе:

Создание сайта на CSS и HTML: подготовка домашней страницы

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

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

Сегодня мы создадим все папки и файлы, необходимые для сборки веб-сайта на HTML и CSS, а также подготовим домашнюю страницу – файл index.html – к HTML-контенту, который будем добавлять в следующих мануалах.

Требования

Если вы следовали всем мануалам из этой серии, для сборки вашего тестового сайта вы можете использовать каталог проекта css-practice, файл index.html, папки images и css и файл styles.css, которые вы создали ранее. Если вы выполнили не все мануалы и вам нужны инструкции по настройке базовой файловой системы, ознакомьтесь с нашим предыдущим мануалом из этой серии, Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Примечание: Если вы хотите выбрать имена для папок или файлов самостоятельно, избегайте пробелов, специальных символов (например. #,% и т.п.) и заглавных букв, поскольку в дальнейшем такие имена могут вызвать проблемы. Также имейте в виду, что вам нужно будет изменить пути к файлам в некоторых командах, которые мы используем в оставшихся мануалах этой серии.

Сейчас у вас должна быть папка проекта css-practice, содержащая следующие папки и файлы:

#2 – Файл «index.html». Отображение сайта

При создании HTML файла обязательно указывать расширение файла, как: .html . Создав файл с таким расширением вы сможете открыть его через любой веб браузер. Некоторые разработчики указывают расширение .htm , что тоже является верным.

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

Отображение в браузере

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