Урок 2: Создание HTML-страниц

Продолжаем разговор об HTML. Для создания HTML-страниц применяются специальные программы — HTML-редакторы. В принципе, можно пользоваться обычным текстовым редактором, однако у HTML-редакторов присутствует незаменимо полезная функция подсветки синтаксиса. Некоторые редакторы имеют функцию автозавершения кода, систему справки по языку и т.п. Из бесплатных редакторов, на мой взгляд, наиболее предпочтительными являются PHP Expert Editor:

Программу можно найти по адресу: http://www.ankord.com/ru/phpxedit.php. PHP Expert Editor является платной, однако жители бывшего СССР могут ее бесплатно зарегистрировать здесь.

Еще один очень неплохой редактор — Web Development Studio вы можете найти по адресу http://delphiworld.narod.ru/wds.html:

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

В арсенале веб-мастера помимо одного или нескольких хороших HTML-редакторов должно быть также несколько самых популярных веб-браузеров. Зачастую веб-браузеры немного по-разному отображают одну и ту же HTML-страницу, и если вы проверяете результаты своей работы в одном браузере, то велика вероятность того, что в других браузерах страница будет выглядеть не совсем правильно. Браузер Internet Explorer установлен по умолчанию в вашем компьютере, установите дополнительно два-три наиболее распространенных веб-браузера (например, Opera, Firefox и Google Chrome).

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

При создании страницы будем пользоваться нашим веб-сервером, который мы устанавливали и настраивали на первом уроке. Перейдите в корневой каталог домена test-domain1 — C:\Program Files\Apache\htdocs\test-domain1\www и создайте в нем файл index.html. Откройте файл в HTML-редакторе и впишите в него следующий HTML-код:

<html> 
  <head>
    <title>Главная страница</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  </head> 
  <body>
    <font>Привет, мир!!!</font>
  </body> 
</html>

Это каркас нашей страницы. Обратите внимание, что мы указали кодировку файла utf-8 (юникод), так как наш веб-сервер настроен на работу с этой кодировкой (опция AddDefaultCharset). Это наиболее универсальная кодировка, которая поддерживает множество национальных языков и спецсимволов. Необходимо также указать кодировку файла utf-8. В PHP Expert Editor это делается следующим образом:

В AkelPad кодировку можно указать при сохранении (обязательно снимите галочку "BOM"):

Откройте в браузере url http://test-domain1, должна появиться фраза "Привет, мир!!!", которая в HTML-коде находится в блоке body. Теперь давайте создадим каркас страницы при помощи таблицы. В файле index.html замените тег font с сообщением "Привет, мир!!!" на следующий код:

    <table border="1" width="100%" height="100%">
      <tr>
        <td height="80px">Шапка</td>
      </tr>
      <tr>
        <td height="40px">Меню</td>
      </tr>
      <tr>
        <td>Основной контент</td>
      </tr>
      <tr>
        <td height="60px">Подвал</td>
      </tr>
    </table>

Эта таблица описывает каркас страницы. Ширина и высота таблицы составляет 100% от ширины и высоты страницы, мы также сделали видимые границы таблицы (атрибут border) для наглядности. Таблица содержит четыре строки: шапку, меню, основной контент и подвал. У всех строк задана высота в пикселях (px), кроме строки с основным контентом. Это позволяет браузеру автоматически установить высоту строки, основываясь на высоте всей таблицы. Просмотрите страницу в различных браузерах, она должна выглядеть примерно одинаково:

В шапке страницы обычно располагается логотип сайта, его название и описание. Давайте поместим в нашу шапку какую-нибудь информацию, для этого заменим слово "Шапка" на код:

          <font size="7">test-domain1</font><br>
          <font size="3">Моя первая HTML-страница</font>

Хочу обратить внимание, что множественные пробелы и переводы строк, находящиеся в HTML-коде, не отображаются на странице в браузере. Можете проверить сами:

<font>Привет, мир!!!</font><br>
<font>Привет,           мир!!!</font><br>
<font>Привет,
      мир!!!</font>

Поэтому для перевода на новую строку используется тег <br>. Вернемся к нашей странице. Создадим каркас меню, в роли которого будет выступать таблица, состоящая из одной строки и нескольких ячеек:

          <table border="1" bgcolor="yellow" width="100%">
            <tr>
              <td width="80px" align="center">Главная</td>
              <td width="80px" align="center">Статьи</td>
              <td width="80px" align="center">Уроки</td>
              <td width="80px" align="center">О нас</td>
              <td>&nbsp;</td>
            </tr>
          </table>

Установим желтый фоновый цвет таблицы и ширину 100%. Обратите внимание на последнюю ячейку с содержимым &nbsp;. Эта ячейка нужна нам для того, чтобы меню было растянуто на всю ширину страницы, так как остальные ячейки имеют жестко заданную ширину в 80 пикселей. Как и в случае с основной каркасной таблицей браузер автоматически рассчитает ширину этой ячейки. &nbsp; — это символ пробела, служит для создания, например, последовательности из нескольких пробелов, т.к. обычные пробелы, как мы убедились ранее, на странице игнорируются. В ячейку мы вставили пробел, т.к. браузеры не отрисовывают некоторые стили пустых ячеек (например, границы). Поэтому часто веб-разработчики в ячейки таблиц, которые по каким-то причинам необходимо оставить пустыми вставляют код &nbsp;, либо, реже, тег <br>. Можете попробовать убрать &nbsp; из ячейки и проверить, что получится.

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

      <tr>
        <td valign="top">Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.         Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи.</td>
      </tr>

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

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

      <tr>
        <td height="60px" align="center">
          Все права защищены<br>
          &copy; 2010 Я
        </td>
      </tr>

&copy; — еще один спецсимвол в HTML, обозначающий copyright. Таких символов достаточно много, можете попробовать задать в поисковике "Спецсимволы в HTML" и более подробно ознакомиться.

Наша страница почти готова, осталось скрыть границы каркасной таблицы. Для этого в атрибуте border основной таблицы измените значение с 1 на 0. Полный код страницы:

<html>
  <head>
    <title>Главная страница</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  </head>
  <body>
    <table border="0" width="100%" height="100%">
      <tr>
        <td height="80px">
          <font size="7">test-domain1</font><br>
          <font size="3">Моя первая HTML-страница</font>
        </td>
      </tr>
      <tr>
        <td height="40px">
          <table border="1" bgcolor="yellow" width="100%">
            <tr>
              <td width="80px" align="center">Главная</td>
              <td width="80px" align="center">Статьи</td>
              <td width="80px" align="center">Уроки</td>
              <td width="80px" align="center">О нас</td>
              <td>&nbsp;</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td valign="top">Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1991—1992 годах в стенах Европейского совета по ядерным исследованиям в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.        Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи.</td>
      </tr>
      <tr>
        <td height="60px" align="center">
          Все права защищены<br>
          &copy; 2010 Я
        </td>
      </tr>
    </table>
  </body>
</html>

А вот так выглядит сама страница (в браузере Firefox):

Конечно, непрофессионально, но для первого раза сойдет.

Продолжайте изучать язык HTML, пытайтесь реализовывать простейшие вещи. Не бойтесь пользоваться таблицами, используйте вложенные таблицы (когда одна таблица находится внутри ячейки другой) для создания необходимой структуры.

Комментарии

Оставить комментарий »

 
denis
27 декабря 2010, 17:28
#1
 

Короче все пользуемся Netbeans

Opossum
14 июня 2012, 19:04
#2
 

Джокер, а как же лялих, что для него можно использовать?)

Joker-jar
15 июня 2012, 4:16
#3
 

Я использую Kate, но это не среда разработки а всего лишь текстовый редактор. Можно использовать Еклипс, KDevelop, Geany и т.п.

Dart
25 июля 2012, 7:02
#4
 

у меня не вышло! я копировал хтмл коды и заменял не копирующиеся русские буквы на свои тексты. В итоге все броузеры отображаю только анг буквы и неправильные символы вместо русских

Ruslan
22 октября 2012, 12:31
#5
 

Пока полёт нормальный. Всё что описано - получается без проблем!
"Чайник" рад! Автору респект !!!

Денис
23 октября 2012, 7:38
#6
 

Причина такого отображения текстов - сам файл index.html сохранен с неподходящей для данного случая кодировкой. Нужно пересохранить их, указав кодировку при сохранении UTF-8.

Илья
7 декабря 2012, 18:47
#7
 

Спасибо вам!)

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий