Html страница в странице – Как написать простую HTML-страничку / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Учебник 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> <!--закрывающий элемент (после него не должно быть каких-либо элементов) -->

Давайте разберем по частям, что мы сделали в этом примере:

  1. Объявили декларацию <!DOCTYPE html>, которая определяет тип документа и сообщает браузеру, что необходимо интерпретировать код на языке HTML 5.
  2. Добавили элементы <html> и </html>, которые определяют границы нашего HTML кода. Обращаю Ваше внимание, что после закрывающего тега </html> не должно быть никаких элементов.
  3. В заголовочной части (от слова голова) нашего документа (между тегами <head> и </head>) мы разместили элементы <title> и </title>, которые определяют наименование нашей страницы -
    "Моя первая страница"
    . Наименование страницы, которое вы указали отображается на вкладке любого браузера.
  4. В теле нашей страницы, элементы <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++/, либо можно запустить через Пуск. Открыли программу и вставляем в нее следующий текст:

&lthtml&gt
&lthead&gt
&lttitle&gtМой первый сайт &lt/title&gt
&lt/head&gt
&ltbody&gt
Здравствуйте! Это моя первая веб-страница!
&lt/body&gt
&lt/html&gt

Далее, нажимаем в верхнем меню кнопку "Кодировки" и выбираем "Кодировать в 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> и </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 страницы

Анализируем данный пример

В начале страницы, перед тегом 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. Это очень полезный «прием», ведь с его помощью мы всегда можем направить читателя по клику в ту область страницы, в которую нам необходимо.

Ссылка внутри страницы 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». Можно использовать любой вариант, какой больше нравится. Вот по такому принципу и формируется ссылка внутри страницы.

Понравилось? Поделитесь с друзьями!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *