Создать простую html страницу. Как создать первую web (html) страницу
Урок «Как создать HTML-страницу» посвящен верстке самой простой веб-страницы. Вы научитесь правильно сохранять HTML-файл, задавать необходимую кодировку для корректного отображения HTML-страницы в браузере и размещать на веб-странице тексты, списки, изображения.
После изучения этого урока Вы уже научитесь создавать первую web-страничку, как на рисунке 1.
Рисунок 1
1. Структура html-документа
Файлы html имеют расширение .htm или .html .
Обычно теги парные: начальный и конечный теги. Начальный - <>, конечный >, например
и
Парный тег называют еще контейнерный .
Некоторые теги не имеют обязательного парного тега, такой тег называют одиночный
. Закрывается такой тег написанием правого слеша перед закрывающей угловой скобкой, например
Структура html-документа выглядит следующим образом (рисунок 2).
Рисунок 2
Пояснения к листингу на рисунке 2
В первой строке конструкция DOCTYPE означает один из стандартов верстки web-страницы.
Между тегами
и
содержится заголовочная часть. В нее входит конструкция
Рисунок 3
Запись означает кодировку кириллицы, чтобы буквы корректно отображались в браузере. Если кодировку не прописывать, шрифты иногда могут отображаться следующим образом (рисунок 4)
Рисунок 4
Та же страничка после вставки кодировки (рисунок 5)
Рисунок 5
Примечание: вместо кодировки charset="windows-1251" можно использовать кодировку charset=" utf -8" , которая позволяет создавать мультиязычные сайты, так как все существующие в мире символы в ней присутствуют. В этом случае в Notepad ++ необходимо до верстки и сохранения html -файла выбрать из верхнего меню Кодировки - Кодировать в UTF -8 без BOM (UTF-8 without BOM)
Для создания первого документа этой информации достаточно.
Практическое задание 1
1. Создайте папку, назовите ее my house . Имена всех папок и файлов необходимо создавать латинскими строчными буквами, русские названия использовать нельзя . Задавайте имена короткими и смысловыми.
Код web-страницы будем писать в Блокноте. Лучше пользоваться не тем Блокнотом, который идет в поставке Windows, а более «продвинутым», например Notepad++. Дистрибутив Notepad++ есть в папке CD/distr .
2. Откройте Notepad++. Убедитесь, что установлена кодировка ANSI, для этого в меню в пункте Кодировки , установите позицию Кодировать в ANSI .
3. Наберите в Notepad++ код из листинга на рисунке 2.
Код в листинге на рисунке 2 в дальнейшем будет служить нам шаблоном, чтобы каждый раз не набирать структуру html-документа. Конструкцию DOCTYPE скопируйте отсюда (запоминать и заучивать ее не надо).
4. Сохраните файл под именем shablon.html в папке myhouse , при этом в поле Тип файла установите All types (рисунок 6), иначе Ваша web-страничка потом не откроется в браузере.
Рисунок 6
5. После сохранения запустите shablon . html двойным щелчком. В результате Ваш файл будет выглядеть следующим образом (рисунок 7).
Рисунок 7
Если у Вас не получился результат, как на рисунке выше, значит, в коде скорей всего есть ошибка. Достаточно одного неверного символа и web-страница не будет отображаться корректно. Еще раз сверьте код с листингом на рисунке 2.
6. Внутри папки myhouse создайте папку public _ html . Таким именем обычно называется папка, в которой хранится сайт при размещении на настоящем хостинге (также эта папка может называться www).
7. Сохраните файл shablon . html в папке public _ html под новым именем main . html .
8. Из папки CD / html_css_1 откройте файл text_main.txt в Notepad++, а также откройте файл, сохраненный под именем main . html
9. Скопируйте весь текст из файла text_main.txt и вставьте в файл main . html вместо фразы «Содержимое web-страницы». В теге
10. Сохраните изменения и просмотрите файл main . html в браузере. Вы увидите неотформатированный текст. Даже переносы строк, которые есть в исходном тексте, браузер не делает (рисунок 8).
Рисунок 8
2. Форматирование web -страницы тегами HTML
В данном уроке «Как создать HTML-страницу» рассматриваются основные теги, которые используются для разметки веб-страницы.
Теги предназначены для форматирования текста web-страницы. Список тегов более подробно можно посмотреть в папке CD /Справочник HTML в справочнике html401_ru.chm (в верхнем меню пункт элементы ).
Рассмотрим некоторые из тегов.
Элементы h 1, h 2, h 3, h 4, h 5, h 6
Структурирование тела документа выполняется внутри элемента < body > с помощью заголовков, задаваемых элементами h1, h2, h3, h4, h5, h6.
Элементы заголовков являются парными, поэтому должны имеет открывающий < h 1> и закрывающий h 1> теги.
HTML располагает шестью уровнями заголовков: h1 (самый верхний), h2, h3, h4, h5 и h6 (самый нижний). Функции элементов заголовков подобны обычным стилям заголовков в текстовых редакторах.
Действие этих шести тегов представлено на рисунках ниже. На одном рисунке исходный код (рисунок 9), на другом - вид в браузере (рисунок 10).
Рисунок 9
Рисунок 10
Разделение текста на абзацы
Тег < p > задает начало абзаца и вставляет сверху абзаца расстояние - отступ для отделения этого абзаца от предыдущего.
Принудительный разрыв строки
Тег
позволяет выполнить перенос оставшейся части текста абзаца на следующую строку. Это непарный тег и в отличие от тега абзаца не увеличивает интервал между строками.
Практическое задание 2
1. Отформатируйте заголовок «Каталог архитектурных проектов» с помощью тегов
и
.2. Отформатируйте заголовок «Проекты для Вашего будущего дома» с помощью тегов
и
.3. Отформатируйте заголовки «Проекты домов» и «Площади домов» с помощью тегов
и
.4. Основной текст разделите на абзацы с помощью тега
Внутри первых двух абзацев используйте тег
для переноса строки. В результате Ваш код должен выглядеть следующим образом (рисунок 11).
5. Просмотрите результат в браузере.
Рисунок 11
Маркированные и нумерованные списки
Средствами HTML можно создавать любые списки: нумерованные (цифровые и буквенные) и маркированные с разными типами маркеров.
Тег < ul >… ul > формирует маркированный список.
Тег < ol >… ol > формирует нумерованный список.
Отдельный элемент списка как в
- , так и в
- Реализуйте в новом файле код, приведенный на рисунке 13.
- Сохраните файл в папке myhouse под именем spisok _ vlozh . html . Результат на рис. 13
- абсолютная;
- относительная.
- войти в папку folder_2,
- затем войти в папку folder_1,
- затем присоединить изображение.
- выйти из папки folder_1,
- выйти из папки folder_2,
- присоединить изображение.
- выйти из папки folder_1,
- выйти из папки folder_2,
- зайти в папку folder_3,
- зайти в папку folder_4,
- присоединить изображение pic.jpg
- выйти из папки folder_1,
- выйти из папки folder_2,
- выйти из папки folder_3,
- войти в папку folder_4,
- присоединить изображение pic.jpg.
- shablon.html
- main.html
- spisok_vlozh.html
- внутри папки myhouse должна быть папка public _ html с файлами будущего сайта
- семь примеров на относительную адресацию и два примера в качестве контрольных из практического задания 14
- формируется с помощью тега <
li
>
.
Практическое задание 3
1. Создайте нумерованный список под заголовком «Проекты домов».
2. Создайте маркированный список под заголовком «Площади домов». Ваш код будет выглядеть следующим образом (рисунок 12).
Рисунок 12
3. Просмотрите страницу в браузере.
Списки можно вкладывать друг в друга, используя при этом различные маркеры.
Пример вложенного списка приведен на рис. 13
Практическое задание 4
Рисунок 13. Пример вложенного списка
Начертания шрифтов
Тег … - позволяет отобразить текст полужирным шрифтом.
Тег … - позволяет отобразить текст в курсивном начертании.
Тег … - отображает подчеркнутый текст.
Например:
В этом случае текст будет отображен жирным курсивом , но не подчеркнутым.
А в этом случае текст будет написан жирным подчеркнутым курсивом .
Нижние и верхние индексы
Тег < sub > и sub > позволяет опустить текст на полстроки ниже обычного текста.
Тег < sup > и sup > позволяет поднять текст на полстроки выше обычного текста. Текст, расположенный между этими тегами, будет изображаться меньшим шрифтом, по сравнению с обычным текстом.
Практическое задание 5
1. Отформатируйте в первом абзаце название myhouse.ru полужирным шрифтом (рисунок 14).
Рисунок 14
2. Отформатируйте во втором абзаце фразу «Более 95% проектов» подчеркнутым курсивом (рисунок 15).
Рисунок 15
3. Отформатируйте верхние индексы в тех местах, где используются квадратные метры (рисунок 16).
Рисунок 16
4. Сохраните файл. Просмотрите через браузер. Web-страница должна выглядеть следующим образом (рисунок 17).
Рисунок 17
3. Вставка изображений
В нашей статье «Как создать HTML-страницу» мы рассмотрим, как размещать на веб-странице изображения.
Для вставки изображений используется тег . Обязательным для этого тега является атрибут src (от английского SouRCe - источник). Он определяет путь до графического файла, изображение которого должно быть выведено на web-странице.
Для вставки изображения используется команда
Например: " image1.jpg " alt="Картинка" />
Атрибут alt необходим для того, чтобы при просмотре web-страницы в режиме отключенных изображений, вместо отсутствующей картинки была надпись, которая прописана в атрибуте alt. Также alt-тексты рекомендуется использовать всегда, т.к. поисковые машины анализируют их как ключевые слова при поиске изображений.
Графические файлы могут быть в формате jpg, gif, png и обязательно в цветовой модели RGB .
Практическое задание 6
1. После списка площадей домов вставьте в web-страницу изображения проектов коттеджей project _1.jpg и project _2.jpg из папки CD/ html_ css _1 . Для этого сначала скопируйте два этих изображения в ту папку, в которой расположен файл main.html. Код вставки изображений будет выглядеть следующим образом (рисунок 18).
Рисунок 18
2. Просмотрите результат в браузере (рисунок 19).
Рисунок 19
В основном принцип использования тегов HTML должен быть понятен. Они используются по одному и тому же принципу: если тег контейнерный, то есть открывающий и закрывающий тег. Если тег одиночный, то закрывающего тега нет, в этом случает правый слэш пишется до закрывающей угловой скобки, например < br />. Является ли тег контейнерным или одиночным Вы всегда можете посмотреть в спецификации html401_ru.chm в разделе «элементы».
4. Адресация внутри сайта
В нашем первом уроке «Как создать HTML-страницу» мы разберем понятия адресации в HTML.
Рассмотрим варианты адресации, когда в html-файле надо разместить изображения, которые могут находиться в разных папках сайта.
Существует два вида адресации:
Абсолютная адресация (с использованием названий дисков компьютера) не используется (рисунок 20)
Рисунок 20
Используется относительная адресация - адресация в пределах документа или совокупности документов на одном сервере. Чтобы сослаться на файл внутри сайта, нужно указать браузеру, какой путь он должен проделать, что бы прийти к нужному файлу.
Пример 1 Изображение расположено в одной папке с HTML-документом (рисунок 21). То есть изображение и HTML-файл находятся на одном уровне в файловой системе и HTML-документ может сразу присоединить изображение. В этом случае вставка изображения в web-страницу будет выглядеть следующим образом. / > Рисунок 21 Практическое задание 7 Реализуйте пример 1 (создайте папку, файл doc.html, возьмите любое изображение). Изображение |
Пример 2 Изображение pic . jpg находится в папке folder _1 . HTML-документ расположен за пределами папки folder_1. Т.е. в файловой системе сайта HTML-документ расположен на один уровень выше, чем изображение (рисунок 22). Необходимо войти в папку folder_1, затем присоединить изображение
Рисунок 22 Практическое задание 8 Реализуйте пример 2 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html. |
Пример 3 Изображение pic . jpg находится в папке folder _1 , которая в свою очередь лежит в папке folder _2 . HTML-документ расположен за пределами этих папок (рисунок 23). Таким образом, HTML-документ расположен на два уровня выше, чем изображение. Необходимо:
Рисунок 23 Практическое задание 9 Реализуйте пример 3 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html. |
Пример 4 folder _1 . Изображение находится за пределами папки folder_1. Т.е. HTML-документ расположен на один уровень ниже, чем изображение (рисунок 24). Необходимо выйти из папки folder_1, затем присоединить изображение. Выход из папки обозначается конструкцией ../ (две точки и слэш вправо). / > Рисунок 24 Практическое задание 10 Реализуйте пример 4 (создайте папку, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html. |
Пример 5 HTML-документ находится в папке folder _1 , которая в свою очередь находится в папке folder _2 . Изображение находится за пределами этих папок. Таким образом, HTML-документ расположен на два уровня ниже, чем изображение (рисунок 25). Необходимо: Так как надо выйти два раза, то и конструкция ../ повторяется два раза. / > Рисунок 25 Практическое задание 1 1 Реализуйте пример 5 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html. |
Пример 6 (рисунок 26) Необходимо:
Рисунок 26 Практическое задание 1 2 Реализуйте пример 6 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html. |
Пример 7 (рисунок 27) Необходимо: Так как выйти надо три раза, то и конструкция ../ повторяется три раза.
Рисунок 27 Практическое задание 1 3 Реализуйте пример 7 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html. Таким образом, сколько раз надо выйти, столько раз ставим конструкцию../, а если заходим, то перечисляем имена встречающихся на пути папок. |
Практическое задание 1 4
1. Создайте html-документ и вставьте в него изображение, чтобы путь к изображению был следующим.
" ../../../../../../folder_1/folder_2/folder_3/image.jpg " / >
2. Разработайте собственный пример вставки изображения в html-документ, чтобы он содержал и выход из папок, и вход в папки. Пример должен отличаться от всех вышеприведенных примеров.
В результате выполнения этой темы, у Вас должны быть созданы следующие файлы:
Простота - это крайняя степень изощренности.
Леонардо да Винчи
О бычно для создания сайтов используют специальные программы типа Macromedia Dreamweaver, или , которые гораздо облегчают работу. Но можно обойтись без них и создать сайт в Блокноте от Windows. В этом случае понадобится знание , а так же пригодятся .
Внесём ещё некоторые изменения, зададим стили для , выровняем его по центру.
Моя первая web-страница
Не забываем сохранять изменения в файле index.html.
Моя первая web-страница
Это мой первый сайт, который очень скоро будет самым популярным сайтом в Интернете.
С сегодняшнего дня я супер-, мега-, web-мастер, seo-гуру и т.д. и т.п. Читайте мои советы по созданию и продвижению сайтов.
Василий Пупкин - главный web-мастер Интернета
А теперь при помощи , придадим web-странице более привлекательный вид.
Моя первая web-страница
Это мой первый сайт, который очень скоро
будет самым популярным сайтом в Интернете.
С сегодняшнего дня я супер-, мега-, web-мастер, seo-гуру и т.д. и т.п. Читайте мои советы по созданию, оптимизации, продвижению сайтов и о том как заработать деньги в интернете.
Буквально некоторое время назад, я вряд ли смог бы назвать себя web-мастером. Но сегодня, не имея специального образования программиста, не заканчивая какой либо компьютерный или инженерный университет, а имея свой сайт, я с гордостью могу заявить, что я web-мастер.
Теперь, когда мне будут задавать вопрос «Чем ты занимаешься?», я с улыбкой и, не стесняясь, отвечу – «Я web-мастер, а ты?»
Копируем код и смотрим, что получилось.
Инструкция
Все, что посетитель видит на веб- , воссоздается браузером из инструкций, присланных по его сервером. Эти инструкции написаны на HTML (HyperText Markup Language - «язык разметки гипертекста») и для файлов, в которых они хранятся, выделены htm и html. Создать такой файл вы можете в обычном текстовом редакторе - это будет первым шагом создания веб-страницы . Откройте, например, стандартный Блокнот, и создайте пустой файл с именем index.html. Когда вы набираете адрес сайта, не указывая конкретную страницу (например, ), первым делом ищет страницу именно с таким названием - index.
Инструкции языка HTML называют «тегами» и каждый из них заключен в такие скобки - <>. Некоторые из тегов - парные, то есть состоят из открывающего и закрывающего тегов, а между ними размещается информация. Например, тег, дающий браузеру , что ниже размещен код именно на языке HTML, так:Закрывающий тег, сообщающий, что в этом месте код HTML закончен, пишется так:Как видите, закрывающий тег отличается от открывающего наличием значка слэша после открывающей скобки ().
Весь код, который вы поместите между тегами и , должен быть разбит на две части - заголовочную и тело документа. Открывающий и закрывающий теги заголовочной части пишутся так:
Это «служебная» часть страницы - здесь размещается информация для заголовка окна, ключевые слова и описания для поисковых роботов, описания стилей, скрипты и т.д. Впишите в нее заголовок окна страницы: