Учебник HTML 5. Статья «Создание первой страницы»
В этом учебнике для создания HTML файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.
Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.
Рассмотрим, как вы будете создавать свой первый HTML файл с использованием программы Notepad++.Шаг 1: Откройте текстовый редактор
Нажмите кнопки WIN + R одновременно (аналог Пуск — Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.
Перед Вами откроется основное окно программы:
Рис. 2 Текстовый редактор Notepad++.Шаг 2: Напишите несколько HTML тегов
Запишите в редактор следующий HTML код:
<!DOCTYPE html> <!-- декларация сообщает, что в этом документе используется пятая версия HTML --> <html> <!-- корневой элемент HTML документа (все остальные элементы должны быть его потомками) --> <head> <title>Моя первая страница</title> <!-- обеспечивает название для документа --> </head> <body> <!-- описывает видимое содержимое страницы --> <h3> Это заголовок </h3> <!-- описывает заголовок второго уровня --> <p>Это параграф.</p> <!-- определяет параграф (абзац) --> </body> </html> <!--закрывающий элемент (после него не должно быть каких-либо элементов) -->
Давайте разберем по частям, что мы сделали в этом примере:
- Объявили декларацию <!DOCTYPE html>, которая определяет тип документа и сообщает браузеру, что необходимо интерпретировать код на языке HTML 5.
- Добавили элементы <html> и </html>, которые определяют границы нашего HTML кода. Обращаю Ваше внимание, что после закрывающего тега </html> не должно быть никаких элементов.
- В заголовочной части (от слова голова) нашего документа (между тегами <head> и </head>) мы разместили элементы <title> и </title>, которые определяют наименование нашей страницы — «Моя первая страница». Наименование страницы, которое вы указали отображается на вкладке любого браузера.
- В теле нашей страницы, элементы <body> и </body> мы разместили заголовок второго уровня (<h3>) и абзац (<p>). Еще раз обращаю Ваше внимание, что видимое содержимое страницы помещается между тегами <body> и </body>.
В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег <!— … —>, текст внутри такого элемента не отображается браузером. Подробно использование комментариев мы рассмотрим далее в учебнике в статье «Комментарии и якоря».
Код HTML нашего примера в редакторе Notepad++:
Рис. 3 Пример создания HTML документа.Шаг 3: Сохраните HTML страницу
Чтобы сохранить файл на вашем компьютере как HTML документ выберите в редакторе Файл > Сохранить как (либо сочетание Ctrl-Alt-S).
Вы можете не искать в списке тип файла, а сразу указать название файла с разрешением html. Назовите файл «index.html» и файл автоматически сохранится как HTML документ в кодировке UTF-8.
Допускается выбрать любое понравившееся вам имя документа, на данном этапе обучения это не имеет значения. Справочно: заглавные страницы сайтов, как правило, называют index.*. Это связано с тем, что отсутствует необходимость изменять конфигурацию файла веб-сервера, установленную по умолчанию.
После того как Вы сохранили ваш текстовый документ как HTML файл, редактор начинает выделять весь HTML код цветом (визуализация кода) — это одно из основных достоиноств текстовых редакторов
Окно сохранения в редакторе Notepad++:
Рис. 4 Сохранение текстового файла как HTML документ.Шаг 4: Просмотр HTML страницы в браузере
Откройте Ваш сохраненный файл в браузере, результат должен выглядеть следующим образом:
Рис. 5 Пример отображения HTML документа в браузере.Если у вас некорректно отображается содержимое страницы, попробуйте изменить настройки кодировки Вашего браузера, необходимо указать, чтобы браузер проводил автоматически определение кодировки.
При создании собственного сайта в заголовочной части страницы необходимо обязательно указывать кодировку символов для текущего документа (подробнее об этом вы узнаете в конце учебника в статье «Метаданные в HTML»).
Изменение настройки кодировки в браузере Chrome:
Рис. 6 Пример настройки кодировки в браузере Chrome.Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив с текстовым файлом:
- Используя полученные знания составьте следующую HTML страницу:
Практическое задание № 1.
Подсказка: используйте для первого заголовка на странице, тег заголовка первого уровня.
Обращаю Ваше внимание, что готовые практические примеры будут доступны для открытия в новом окне, но старайтесь выполнять их самостоятельно. Подглядеть код готовой страницы можно, используя инструменты разработчика, как правило, в любом браузере достаточно кликнуть правой кнопкой по странице и нажать на просмотр кода страницы, либо элемента:
Фрагмент страницы примера в инструментах разрабочика браузера Chrome.Создаем первую html страницу.
Урок 2.В этом уроке, Вы по моей инструкции создадите свою первую веб-страницу. Пока что Вам не надо вникать что за непонятные символы придется использовать. В этом уроке мы создаем страницу, а в следующих двух уроках мы полностью разберемся в каждом написанном символе.
Первое что мы делаем, это создаем папку на рабочем столе и даем ей название «Сайт». В этой папке будет проходить все наше дальнейшее творение.
Теперь запускаем блокнот Notepad++ который мы установили. (Если Вы этого еще не сделали, то инструкция по установке здесь). По умолчанию программа должна быть по директории /Program Files/Notepad++/, либо можно запустить через Пуск. Открыли программу и вставляем в нее следующий текст:
<html><head>
<title>Мой первый сайт </title>
</head>
<body>
Здравствуйте! Это моя первая веб-страница!
</body>
</html>
Далее, нажимаем в верхнем меню кнопку «Кодировки» и выбираем «Кодировать в UTF-8»
Большинство сайтов рунета состоят из страниц html написанных на кодировке UTF-8. Для того чтобы наши страницы корректно отображались в браузере, мы тоже будем использовать данную кодировку.
Теперь нужно сохранить наш файл в формате html.
Не забываем, что Notepad++, это текстовый редактор, а это значит, что на данный момент мы имеем обычный текстовый файл с набором символов. Для того чтобы наш браузер отображал созданную нами текстовую страницу как веб-страницу, нам нужно сделать из нее файл с расширением html.
Для этого нажимаем в верхнем меню кнопку «Файл», затем «Сохранить как», выбираем директорию (путь) куда будет сохранен файл, сохраним его в созданной нами папке: Рабочий стол/Сайт/, далее самое главное, выбираем нужный тип файла, в нашем случае это Hyper Text Markup Language (html).
Поздравляю Вас! Вы только что создали свою первую веб-страницу! Теперь Вы можете зайти в папку «Сайт» и запустить созданный файл. Страница откроется с помощью браузера, и Вы увидите, что вместо непонятных символов которые мы вставляли, браузер выводит на экран вполне понятную информацию.
Как это все работает, мы разберем в следующих уроках.
* Когда нам нужно будет открывать файл для редактирования, будем нажимать правой кнопкой мыши на файл и выбирать «Edit with Notepad++» (открыть с помощью Notepad++).
Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]
Структура HTML-документа
Всем доброго времени суток! Сегодня мы научимся создать каркас нашей первой HTML страницы. А точнее разберемся с базовой структуры html страницы, узнаем, из чего она состоит. Но прежде всего, поговорим немного о тегах.
Что такое тег в HTML?
Тег это базовый элемент языка HTML. То есть HTML состоит именно из тегов и для того чтобы учить HTML, достаточно изучить основные теги, которые чаще всего используются. Если сравнивать с примером из реальной жизни, то тег в HTML это как кирпич для дома. Кирпич это основной элемент, который используется для строительства дома. То же самое и в HTML, тег это базовый элемент для создания html страницы. С помощью тега мы указываем браузеру, как правильно отобразить содержание html страницы.
Существует два типа тегов это парные теги и одинарные теги:
- Парные теги это теги, которые состоит из открывающего тега и закрывающего тега. По короче это теги, которые имеют закрывающего тега. Примеры: <html> и </html>; <title> и </title>; <head> и <head>; <body> и </body>; <p> и </p>;
- Одинарные теги это теги, которые не имею закрывающего тега. Примеры одинарных тегов: <br />. <hr />
У html страницы есть базовая структура. Базовая структура на всех страницах сайта, выглядит одинаково. Единственное что может отличаться в базовой структуре страниц от сайта к сайту, это элемент DOCTYPE. Для того чтобы узнать что такое DOCTYPE и какие типы существуют, прочитайте эту статью Что такое DOCTYPE и зачем он нужен . Если не укажем этот элемент то браузер отобразит страницу некорректно.
Вот как выглядит базовый каркас html страницы:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Описание страницы. Не менее 160 символов. " />
<meta name="keywords" content="Здесь указываем список ключевых слов, разделенные запятой." />
<title>Главная страница</title>
</head>
<body>
</body>
</html>
Сейчас если откроем данную страницу в браузере, то она будет пуста. Теперь добавим пару строк кода внутри тега body, и откроем еще раз эту страницу в браузере.
<div>
<p>Моя первая html страница</p>
<!-- Это комментарий. Он не отображается на странице в браузере. -->
</div>
Вот как выглядит страница в браузере после того как изменили ее код:
Анализируем данный пример
В начале страницы, перед тегом html всегда указываем DOCTYPE, то есть тип документа.
Каждая html страница начинается с тега <html> и заканчивается тегом </html> и состоит из заголовка <head></head> и тела <body></body>.
Внутри заголовка пишется служебные элементы, которые не отображаются на странице в браузере. В основном это:
- Мета теги. Главные из них это мета-тег кодировки, через которого указываем кодировку страницы (<meta http-equiv=»Content-type» content=»text/html; charset=utf-8″/>), мета теги для поисковых систем, это мета-тег c описанием страницы (description) и ключевые слова для страницы (keywords).
- Заголовок страницы, который указывается внутри тега <title></title>. Этот заголовок отображается во вкладке браузера.
- Блок с внутренними стилями. <style type=”text/css”>Внутренние стили. </style>
- Одинарный тег <link />, через которого подключаем внешние файлы.
- А также блок <scriptsrc=»library.js» type=»text/javascript«> </script> в котором пишутся различные скрипты JavaScript.
Внутри тега <body></body> пишется контент страницы. Контент может содержать текст, изображения, таблицы, списки, ссылки и другие элементы которые отображаются на странице в браузере.
Имена тегов можно писать в любом регистре, то есть если напишем <BODY>, <bOdY>,<Body> или <body>, то результат будет один и тот же, но рекомендуется всегда писать в нижнем регистре, то есть <body>.
Пожалуй, на этом все. Из этой маленькой, но очень важной статьи вы узнали, как выглядит базовая структура html страницы.
Похожие статьи:
Видео:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
<< Предыдущая статьяСледующая статья >>Если у Вас есть какие-то вопросы или предложения, то можете писать их в комментариях или мне на почту [email protected]. И если Вы заметили какую-то ошибку в статье, то прошу Вас, сообщите мне об этом, и в ближайшее время я всё исправлю.
Добавляйтесь ко мне в друзья в:
Добавляйтесь в мои группы:
Подпишитесь на мои каналы:
Автор статьи: Мунтян Сергей
Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!
Дата добавления: 2014-11-11 15:04:51
Ссылка внутри страницы HTML, урок
Иногда на практике возникает необходимость сделать ссылку на определенную область внутри одной страницы HTML. Это очень полезный «прием», ведь с его помощью мы всегда можем направить читателя по клику в ту область страницы, в которую нам необходимо.
Ссылку внутри страницы можно сделать двумя способами, давайте их рассмотрим:
1) Ссылка внутри страницы с помощью атрибута «name»:
<html> <head> <title>Структура HTML документа</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <p> <a href="#link">Перейти к разделу 5</a></p> <h2> Заголовок раздела 1</h2> <p>Текст раздела 1</p> <h3>Заголовок раздела 2</h3> <p>Текст раздела 2</p> <h3>Заголовок раздела 3</h3> <p>Текст раздела 3</p> <h3>Заголовок раздела 4</h3> <p>Текст раздела 4</p> <h3><a name="link">Заголовок раздела 5</a></h3> <h3>Заголовок раздела 6</h3> <p>Текст раздела 6</p> <h3>Заголовок раздела 7</h3> <p>Текст раздела 7</p> <h3>Заголовок раздела 8</h3> <p>Текст раздела 8</p> <h3>Заголовок раздела 9</h3> <p>Текст раздела 9</p> <h3>Заголовок раздела 10</h3> <p>Текст раздела 10</p> </body> </html>
В данном примере мы прописали ссылку (строка 7) и непосредственно сам атрибут «name» с параметром «link» (строка 16). В результате чего, при нажатии по ссылке «Перейти к заголовку раздела 5» нас перебросит к 5 заголовку, т.к. именно для него мы и задали метку.
2) Ссылка внутри страницы с помощью атрибута (идентификатора) «id»:
<html> <head> <title>Структура HTML документа</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <p> <a href="#link">Перейти к разделу 5</a></p> <h2>Заголовок раздела 1</h2> <p>Текст раздела 1</p> <h3>Заголовок раздела 2</h3> <p>Текст раздела 2</p> <h3>Заголовок раздела 3</h3> <p>Текст раздела 3</p> <h3>Заголовок раздела 4</h3> <p>Текст раздела 4</p> <div><h3>Заголовок раздела 5</h3></div> <p>Текст раздела 5</p> <h3>Заголовок раздела 6</h3> <p>Текст раздела 6</p> <h3>Заголовок раздела 7</h3> <p>Текст раздела 7</p> <h3>Заголовок раздела 8</h3> <p>Текст раздела 8</p> <h3>Заголовок раздела 9</h3> <p>Текст раздела 9</p> <h3>Заголовок раздела 10</h3> <p>Текст раздела 10</p> </body> </html>
Данный пример практически аналогичен первому. Вместо атрибута «name» здесь используется идентификатор «id». Можно использовать любой вариант, какой больше нравится. Вот по такому принципу и формируется ссылка внутри страницы.
Понравилось? Поделитесь с друзьями!