Как создать хтмл страницу. Как создать html страницу

Всем привет, дорогие друзья и гости моего блога! Ой. Я только что заметил, что Яндекс наградил меня ТИЦ 20, хотя еще вчера был 0. Я понимаю, что ТИЦ уже ничего толком не значит, но всё равно очень приятно и радостно. Ну а вообще я хотел продолжить недавно начатый цикл статей по сайтостроению. И первое, с чего я бы хотел начать — это с основ языка гипертекстовой разметки (не программирования!) HTML.

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

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

Для начала создайте обычный текстовый документ или откройте блокнот. Для открытия блокнота можете вызвать строку «Выполнить» и вписать туда notepad. Открыли? Молодцы!

Любой html-документ или сайт размечаются с помощью специальных тэгов. Тэг — это специальный знак, который дает команду сайту, как правильно нужно отображать тот или иной кусок содержимого, заключенный в него. Сейчас я подробно на этом останавливаться не буду, так как о тэгах я собираюсь рассказать вам в своей .

Скажу лишь, что большинство тэгов парные, то есть сначала ставится открывающий, а после того, как мы написали информацию, надо закрыть тег. Закрывается он точно также как и открывается, только перед закрытием надо поставить знак «/».

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

• — это главный тэг, благодаря которому мы говорим сайту, что сейчас будем писать тут на языке HTML, так что пусть не беспокоится. С него должен начинаться сайт и им же закрываться.
• — сюда заносится служебная информация, например название документа, описание и многие другие. Ставится сразу после открытого тэга .
• — Между этими значениями мы пишем заголовок страницы, то есть это название будет отображаться не в самом содержимом сайта, а во вкладке браузера. Данный тип ставится между
  и
  .
• — этот тэг отвечает за отображение содержимого на сайте. То есть всё, что вы напишите между этими тэгами будет отображаться на веб-странице.

Я так чувствую, что не все всё поняли, и у некоторых осталась каша в голове, поэтому я всё покажу вам на живом примере.

Живой пример

Итак создаем текстовый документ и пишем там следующее содержимое:

Написали? Молодцы! Тут я дал вам информацию специально в виде картинки, а не в виде текста, так что вы ее не скопируете. Вот я негодяй, да?)) Обратили внимание, что тэги вкладываются друг в друга как матрешки? Так и должно быть.

Совет! Старайтесь все таки не копировать содержимое, а переписывать его своими руками. Таким образом вы намного лучше и быстрее усвоите весь материал.

После этого сохраните ваш документ в формате html. Для этого при сохранении, после того как вы назвали ваш документ, ставьте точку и пишите html. То есть у вас должно получиться index.html. Тогда ваш документ автоматически сохранится уже не в виде текстового документа, а в виде веб-страницы. И еще при сохранении документа измените кодировку на UTF-8 Вы можете открыть этот файл с помощью любого браузера. Давайте это сделаем и посмотрим, что у нас получилось.

Смотрите, сколько мы всего написали, а в итоговом документе остался только наш приветственный текст. Почему? Да потому что сами по себе тэги не отображаются в итоговом варианте, а показываемая информация отображается только между тэгами body . Поэтому всё так и получилось. Зато смотрите, то что мы писали в head, точнее в title, теперь отображается во вкладке браузера.

Если вы захотите вновь что-то редактировать здесь, то вам достаточно будет открыть уже этот сохраненный документ снова в блокноте. В общем смотрите, таким образом с помощью блокнота мы сделали первый наш сайт. Да...сайтом это сложно назвать, но по сути это так. Мы сделали основу (каркас) и если мы закинем это на хостинг, то он уже будет отображаться в интернете.

Но попробуйте поставить несколько пробелов и написать еще текст, либо просто напишите несколько строчек текста и сохраните это в том же документе.

Теперь войдите в этот документ с помощью браузера. Что мы видим? А то, что ваши пробелы и переносы строк не повлияли на документ и все идет одной строкой. Некрасиво, да? А всё потому, что html сам по себе не понимает ваши пробелы (кроме одного) или переносы. Для того, чтобы переносить строки всё нужно размечать другими тэгами, о которых мы будем говорить в других статьях.

Многие наверное подумают что-то типа: «И это по твоему сайт? Да ты с дубу рухнул». Да, дорогие мои. Эту примитивную веб-страницу также можно назвать сайтом. И я еще раз повторюсь, что смысл данной статьи был не создать мегакрутой сайтище, а показать вам основу любого сайта, как это выглядит, как всё происходит.

Но вы не волнуйтесь. Это всё вводные уроки. Далее мы всё глубже и глубже погрузимся в html разметку, и сможем всё правильно форматировать, расставлять. В общем всё будет круто и мы сделаем полноценный веб-ресурс. Просто в одну статью всё это не уместится, а комкать и сокращать я тоже не буду, иначе фигня получится.

Специальный блокнот для веб-разработчика

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

В дальнейшем я буду работать именно через редактор Notepad++. Установите его и вы поймете, почему это удобно. Настроек там премудрых нет, но если вдруг вы установили английскую версию, то зайдите в меню «Preference» и в графе «Localization» выберите Русский.

Да, и еще зайдите в меню «Кодировка» и выберите «UTF-8» . Ну и сразу сохраните этот файл в формат html. Для этого выберите меню «Файл» — «Сохранить как» и обзовите документ index, выбрав из из выпадающего списка формат «html» . Это делается для того, чтобы программа поняла, что мы делаем и подсвечивала нам нужные теги и команды.

А почему я вообще называю страницу index? Дело в том, что когда вы заходите на любой сайт, то по умолчанию он ищет страницу index.html или index.php. Именно эти файлы общеприняты как главные, но вообще это можно и изменить на сервере.

Конечно, если вы хотите всё изучить побыстрее, то рекомендую вам посмотреть недавно вышедший курс по HTML5 и CSS3 . Там все подробно рассказывается и показывается на живом примере, кроме того вы научитесь делать несколько видов сайтов. В общем очень интересные и информативные уроки.

Ну а вам я рекомендую подписаться на обновления моего блога, чтобы не пропустить следующих уроков, а также других интересностей. Кроме того обязательно посмотрите и другие статьи моего блога. Я уверен, что многие из них окажутся для вас полезными. В общем желаю вам удачи. Увидимся в других статьях. Пока-пока!

С уважением, Дмитрий Костин.

Как сделать сайт html?

Такой вопрос задают пользователи, которые решили самостоятельно сделать сайт.

Начинающие веб-мастера, решившие научиться делать сайты начинают искать информацию на просторах сети интернет или в учебных пособиях.

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

А все дело в том, что язык разметки гипертекста html специально разработан для того, чтобы было удобно создавать web – страницы. И не имея элементарных знаний html достаточно нелегко создать интернет страницу.

Но бывают ситуации, когда совсем нет времени на изучение основ html, а сайт создать, ну просто, необходимо. Возможно ли сделать сайт html самому с помощью какого – либо сервиса или программы?

Чтобы ответить на поставленный вопрос, прежде всего, необходимо определить, какие минимальные действия надо произвести, чтобы в Интернете появился сайт.

А на самом деле, потребуется всего лишь:

• Создать web-страницу в виде файла (электронного документа) определенного формата. Если быть более точным – это должен быть файл index с расширением html или htm.
• Страница должна находиться в интернете и к ней должен быть открыт постоянный доступ. Она должна быть размещена на специальном сервисе (хостинге).

Если говорить о сервисе, то для начала такую страницу можно разместить на бесплатном хостинге, регистрация на котором занимает не более пяти минут. В интернете таких сервисов более, чем достаточно. Можно просто набрать в поисковике запрос: «бесплатный хостинг» и из предложенного списка выбрать наиболее подходящий. После чего надо будет пройти регистрацию. Одним из таких хорошо известных хостингов является сайт «uCoz».

Ну что ж, с размещением сайта, надеюсь, проблем не возникло.

Как сделать страницы сайта без знаний html

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

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

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

Данный способ создания интернет страниц имеет большой недостаток:

Word генерирует много лишнего кода html. Поэтому этот способ создания сайтов распространения не получил.

Сделать сайт html в Блокноте

Гораздо удобнее и правильнее будет сделать сайт в программе Блокнот. Это стандартная программа для Windows.

Запускаем программу.

Для начала потребуется прописать структуру HTML документа, которая имеет следующий вид:

— теги, определяющие начало и конец документа;

— теги, ответственные за заголовок данной страницы;

— теги, прописывающие название сайта;

— в этом теге прописывается код сайта.

Пример структуры документа сайта на html

В первой строчке документа прописана версия языка html.

Пропишем данный код в Блокноте и сохраним в формате.html.

Затем откроем в любом браузере и если все верно — откроется пустая страница. Затем надо будет определить дизайн сайта: место для шапки, положение меню, где будет располагаться текст.

Я выбрала такой макет: в верхней части сайта – шапка, под ней 4 кнопки, меню – слева и текст – справа.

Чтобы сделать такой сайт необходимо сделать разметку с помощью таблиц.

На языке html таблица определяется тегами

, а строка в таблице — , столбцы — .

Таблица будет иметь следующий вид:

8 и 33 — сроки открывают и закрывают таблицу;

14 и 21 — строки открывают и закрывают строку в данной таблице;

15, 16, 17, 18 строки – открывают и закрывают столбец;

22 и 25 строки — открывают и закрывают столбец. При этом атрибут colspan=”1” – количество столбцов, width=”170” и height=”317” – ширина и длина ячейки;

27 и 30 — опять открывают и закрывают столбец. В данном случае атрибут colspan=”3” — ячейка растягивается на 3 столбца. Ее размеры составляют: width=”510” и height=”317”.

Таким способом и происходит создание страницы с помощью таблиц.

Если убрать в 8-ой строке атрибут border=”1”, то таблица станет невидимой, что мы и сделаем.

Чтобы создать шаблон сайта потребуется программа Adobe Photoshop.

Открываем программу и создаем новый документ «Файл» — «Новый».

Указываем ширину, высоту, разрешение, цветовой режим, фон.

Прописываем все так, как показано здесь:

Откроется пустой документ. Теперь надо сделать подобно тому, как в документе html. Разбиваем его на ячейки таблицы, используя направляющие.

Для отображения линейки, включаем ее «Просмотр» — «Линейки» и прямо с линейки вытаскиваем направляющие и создаем шаблон, как на рисунке:

Для большей наглядности выбираем фон нашего сайта и закрасим его, например зеленоватым цветом. Для этого необходимо в Photoshop создать новый слой, кликнув на панели инструментов «Палитра цветов» и прописываем тот цвет, который мы выбрали. Зажмем горячие клавиши Alt + Backspace и документ окраситься в тот цвет, который мы указали. Таким способом можно выбирать любой цвет.

Продолжим делать сайт в html. Теперь надо разметить меню сайта, шапку, кнопочки и т.д.

Создадим новый слой, для чего берем инструмент «Прямоугольная область». Выделяем шапку сайта и, зажав клавиши Alt + Backspace, закрашиваем шапку. Затем нажимая Ctrl + T один раз, зажав клавишу ALT, уменьшаем шапку.

Должно получиться что-то на подобие:

Похожим образом, делаем и другие области сайта. Можно изменить цвет, сделать рамку у блоков, добавить тень, наложить градиент. Для этого выделяем слой с зажатой клавишей Ctrl и используем функции Photoshop.

Выбираем необходимую функцию, например: обводка. Указываем ее размер в пикселях и цвет.

Подобным образом создаем другие элементы на сайте.

На кнопочках прописываем названия, можно прописать и в html, а можно сразу сделать графичные кнопочки. Выбираем инструмент «Текст» и на кнопках делаем надписи. Например: Главная, Услуги, Контакты и т.п.

Добавляем картинку в шапку сайта и простым перетаскиванием картинки, размещаем ее в верхнем блоке сайта. Изменить размер картинки можно с помощью Ctrl + T.

В итоге получим готовый шаблон сайта:

Разрежем шаблон на части и сохраним все в отдельной папке в нужном формате.

Берем инструмент «раскройка» и выделим каждую область сайта.

Все сохраняем. Идем в меню, выбираем «Файл» —> «Сохранить для Web». Сохраняем в формате.jpeg или.png.

В итоге: на рабочем столе – папка с готовыми блоками будущего сайта. Перенесем эти файлы в нашу папку с сайтом.

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

Ниже приводится окончательный результат:

Я думаю, что здесь не сложно разобраться, что к чему.

10 строка – прописываем шапку сайта атрибутом background;

15, 16, 17, 18 – вставляем кнопки и прописываем ссылки;

22 строка – прописываем фон меню атрибутом background;

23 – 28 строчки – прописываем пункты меню сайта;

33 строка – текст сайта.

Оказывается, что ничего сложного в создании сайта на html нет.

В итоге мы узнали, как сделать сайт в html.

Вот и все, наш сайт готов!

Да, это, конечно, простая страница, созданная на html.

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

Попробуйте и начните с малого, и если вы научитесь создавать простые страницы, со временем вы сможете создать нечто большее. Самое главное – не бросайте обучение, тогда в скором времени вы научитесь создавать профессиональные сайты.

Рекомендую:

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

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

Что такое web-страница?

Гипертекстовый документ либо веб-страница представляет собой текстовый файл, размеченный тегами при помощи языка HTML (HyperText Markup Language).

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

К примеру, тег, говорящий браузеру, что ниже находится документ на HTML языке, имеет следующий вид: . А закрывающий, говорящий, что тут код заканчивается, выглядит так: . Таким образом, единственным отличием закрывающего тега от открывающего является наличие слэша после скобки открытия.

Данный язык разметки позволяет форматировать текст web-страницы, устанавливать на ней рисунки, графические элементы, создавать гипертекстовые ссылки, добавлять мультимедийные элементы, звукозаписи, скрипты (VBScript, JavaScript).

Чтобы узнать, что из себя представляет этот язык, вовсе не обязательно лезть в скучные учебники. Мне лично вполне достаточно было открыть мой браузер, и выбрать опцию «Посмотреть исходный код» (нажать правую кнопку мыши). Представленные в окне строчки кода и есть тот самый html-код. Именно этот код браузер в дальнейшем трансформирует в web-страницу.

Виды страниц в Интернете

Существует три типа веб-страниц:

1. Интерактивные . Они включают в себя формы, сформированные на языках VBScript, JavaScript, РНР, при помощи которых сервер обменивается с пользователем данными;
2. Динамические . Они написаны на языке ASP, РНР с разрешениями.aspx, .php. Данные страницы создаются движком либо особой программой, формирующей по пользовательским запросам web-страницу, используя при этом данные с сервера базы данных;
3. Статические . К ним относятся статические файлы (рисунки, таблицы, набор текста и прочее), сформированные на языке разметки HTML.

Как создать?

Для создания веб-страниц используются редакторы html: FCKeditor, TinyMCE WYSIWYG Editor, Macromedia Dreamweaver, Microsoft FrontPage и прочие. Во всех этих редакторах имеется масса различных мастеров, дающих возможность с лёгкостью создавать web-сайты, а также шаблоны для страничек с дизайном и структурой. С их помощью можно быстро создать собственную web-страницу.

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

Инструкция:

1. С помощью текстового редактора создаём файл. Это первое, что необходимо сделать. В блокноте создайте пустой файл под названием index.html. Именно эту страничку сперва ищет сервер, если вы вводите адрес ресурса без указания определённой web-страницы сайта.
2. Сформировать инструкцию. Помещённый между тегами и код должен состоять из двух частей – тела документа и заголовка.
3. Делаем заголовок. Открывающие и закрывающие заголовочную часть теги: и . На этой «служебной» части страницы находятся данные для заголовка окна, описания, слов-ключей для поисковых систем, скриптов, описания стилей и прочее. Между этими словами прописываем заглавие окна страницы с помощью тегов: . Ваша веб-страница к этому моменту должна иметь следующий вид:

4. С заголовочной частью мы справились. Теперь необходимо разместить теги тела и . Между ними будут находиться инструкции документа: ссылки, тексты, картинки и т.д, то есть основной .

Итак, код в общем должен иметь следующий вид:

  

Привет Мир

Также есть еще один способ для сохранения файла, нужно нажать на значок дискеты который находится на панеле инструментов.

Урок «Как создать HTML-страницу» посвящен верстке самой простой веб-страницы. Вы научитесь правильно сохранять HTML-файл, задавать необходимую кодировку для корректного отображения HTML-страницы в браузере и размещать на веб-странице тексты, списки, изображения.

После изучения этого урока Вы уже научитесь создавать первую web-страничку, как на рисунке 1.

Рисунок 1

1. Структура html-документа

Файлы html имеют расширение .htm или .html .

Обычно теги парные: начальный и конечный теги. Начальный - <>, конечный , например

и

Парный тег называют еще контейнерный .

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

Структура html-документа выглядит следующим образом (рисунок 2).

Рисунок 2

Пояснения к листингу на рисунке 2

В первой строке конструкция DOCTYPE означает один из стандартов верстки web-страницы.

Между тегами и содержится заголовочная часть. В нее входит конструкция . Это название при загрузке документа появляется в строке заголовка браузера (рисунок 3).

Рисунок 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 > формирует нумерованный список.

Отдельный элемент списка как в

, так и в
формируется с помощью тега < li > .

Практическое задание 3

1. Создайте нумерованный список под заголовком «Проекты домов».

2. Создайте маркированный список под заголовком «Площади домов». Ваш код будет выглядеть следующим образом (рисунок 12).



Рисунок 12

3. Просмотрите страницу в браузере.

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

Пример вложенного списка приведен на рис. 13

Практическое задание 4

1. Реализуйте в новом файле код, приведенный на рисунке 13.
2. Сохраните файл в папке myhouse под именем spisok _ vlozh . html . Результат на рис. 13



Рисунок 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-документ расположен на два уровня выше, чем изображение. Необходимо: войти в папку folder_2, затем войти в папку folder_1, затем присоединить изображение. Рисунок 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). Необходимо: выйти из папки folder_1, выйти из папки folder_2, присоединить изображение. Так как надо выйти два раза, то и конструкция ../ повторяется два раза. / > Рисунок 25 Практическое задание 1 1 Реализуйте пример 5 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 6 (рисунок 26) Необходимо: выйти из папки folder_1, выйти из папки folder_2, зайти в папку folder_3, зайти в папку folder_4, присоединить изображение pic.jpg Рисунок 26 Практическое задание 1 2 Реализуйте пример 6 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html.

Пример 7 (рисунок 27) Необходимо: выйти из папки folder_1, выйти из папки folder_2, выйти из папки folder_3, войти в папку folder_4, присоединить изображение pic.jpg. Так как выйти надо три раза, то и конструкция ../ повторяется три раза. Рисунок 27 Практическое задание 1 3 Реализуйте пример 7 (создайте папки, файл doc.html, возьмите любое изображение). Изображение должно быть вставлено в web-страницу doc.html. Таким образом, сколько раз надо выйти, столько раз ставим конструкцию../, а если заходим, то перечисляем имена встречающихся на пути папок.

Практическое задание 1 4

1. Создайте html-документ и вставьте в него изображение, чтобы путь к изображению был следующим.

" ../../../../../../folder_1/folder_2/folder_3/image.jpg " / >

2. Разработайте собственный пример вставки изображения в html-документ, чтобы он содержал и выход из папок, и вход в папки. Пример должен отличаться от всех вышеприведенных примеров.

В результате выполнения этой темы, у Вас должны быть созданы следующие файлы:

• shablon.html
• main.html
• spisok_vlozh.html
  
• внутри папки myhouse должна быть папка public _ html с файлами будущего сайта
• семь примеров на относительную адресацию и два примера в качестве контрольных из практического задания 14