Уроки HTML

1. Урок 1 - необходимая информация, подготовка семинара.

Урок 1 - необходимая информация, подготовка семинара.

Прежде чем мы начнем создавать сайт, мы должны понять философию его работы. До сих пор, готовя документ (например, форматируя текст), мы видели его окончательную форму за все время. При создании страницы дело выглядит немного иначе. А именно, мы создаем страницы, записывая в текстовый файл его исходный код. Интернет-браузер (например, Internet Explorer) читает этот файл и соответствующим образом интерпретирует его содержимое, а затем отображает его в виде страницы. Если на странице есть какие-либо графические элементы (например, рисунок, фотография), они должны быть прикреплены в отдельных файлах и должным образом описаны в исходном коде страницы. Этот код состоит из текста, который должен отображаться на странице, и ряда HTML-маркеров, эти теги информируют браузер о том, как он отображает отдельные элементы сайта. Каждый тег начинается с «<» и заканчивается круглыми скобками «>». В качестве упражнения мы предлагаем сейчас взглянуть на исходный код отображаемой в данный момент страницы. Если у вас есть браузер Internet Explorer, вы можете сделать это, выбрав меню VIEW-RDO.

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

• Используемое программное обеспечение - браузеры разных компаний или разных версий (более старых, более новых) могут по-разному интерпретировать исходный код. Части созданы так, чтобы он работал независимо от типа, используемого для просмотра браузера.
• Разрешение монитора, разрешение дается в пикселях, например 800x600 или 1024x768, можно сказать, что 1 пиксель - это одна точка на мониторе. Очевидно, что страница, которая занимает поверхность монитора с более высоким разрешением, может неправильно отображаться на мониторах с более низким разрешением. Самое простое решение этой проблемы - создать страницу с размером, адаптированным к разрешению 800x600, на более крупных мониторах будет просто неиспользуемое пространство.
• Количество цветов, которое может отображать монитор. На данный момент это больше не проблема, потому что только очень старые компьютеры имеют ограниченное количество отображаемых цветов.
• Просмотр страницы также может зависеть от других факторов, связанных с ее дизайном, например, от типа используемого шрифта. Рекомендуется использовать шрифты, которые, скорее всего, будут установлены на компьютере получателя. Следует выбирать шрифты без засечек, например, Arial или специально разработанные для отображения на мониторе, например Verdana. Шрифт Times, очень популярный в Windows, вероятно, является худшим выбором.

Сейчас мы начнем готовить семинар. С помощью, например, проводника Windows на любом выбранном диске мы создаем папку с именем My Page. В этой папке мы будем хранить все файлы, которые будут включены в проект, который мы готовим. мы идем сейчас, и мы сохраним графические файлы, которые нам нужны. Это будет: файл с рисунком книг (books.gif) и файл, представляющий собой белый прямоугольник с размерами 1 на 1 пиксель (1x1w.gif). мы обрабатываем их следующим образом: щелкните правой кнопкой мыши на первом из рисунков, видимых ниже, и выберите Сохранить изображение как ... из контекстного меню, в открывшемся диалоговом окне укажите местоположение - папку «Моя страница». Мы повторяем те же действия для второго рисунка.

На следующем этапе мы продолжаем программу, которая позволит нам проверять кодировку польских символов (ISO-8859-2) для публикации в Интернете. Это будет бесплатная программа под названием Notepad +. Он работает как ноутбук, подключенный к Windows, поэтому вам не нужно никаких дополнительных навыков для его использования. Чтобы заставить его работать, мы поступаем так же, как и в случае загрузки графических файлов: щелкните правой кнопкой мыши по ссылке ниже и выберите: «сохранить цель как ...», в открывшемся диалоговом окне укажите место хранения, выберите диск C: (основная папка ). Другим местом записи может быть папка Windows, затем notepad + can (если вы измените его на notepad.exe) заменит системный блокнот, и теперь нам не придется задумываться, какое приложение мы запускаем.

Если приложение Notebook + сохранено на диске C :, тогда мы находим файл notepad.exe и запускаем его двойным щелчком мыши. После запуска программы у нас открывается новый пустой файл. Мы сохраним этот файл в папке «Моя страница», назвав его index.html. Это имя, зарезервированное для файла, который должен быть главной страницей сайта, он будет открыт первым. Если мы дадим ему другое имя, страница не будет работать. Имена всех файлов, которые должны быть размещены в Интернете, будут написаны очень маленькими буквами, в их именах нельзя использовать польские буквы и пробелы.

После выполнения этих действий папка «Моя страница» должна содержать три файла: index.html, books.gif, 1x1w.gif. Файл index.html - это тот, в который мы напишем исходный код страницы. Два других представляют собой графику, которая при вводе соответствующих маркеров в файле index.html будет отображаться на странице.

Индексный файл будет отредактирован и открыт нами. Эти мероприятия будут значительно отличаться. Открыв файл, например, дважды щелкнув по нему, запустится веб-браузер и отобразится содержимое страницы в нем. Мы отредактируем файл, когда запустим Блокнот и выберем FILE-OPEN из меню, в диалоговом окне нам нужно будет перейти в папку My Page, а в нижней части под названием «Files of type» выбрать опцию «All files», затем выбрать наш файл (индекс). html) и вырезать кнопку Открыть. Редактирование в Блокноте позволит нам ввести или изменить исходный код созданной страницы.

Напоследок несколько комментариев.
Если то, что происходит на странице, созданной во время следующего урока, то причины в первую очередь должны выглядеть не в том коде, вам следует внимательно посмотреть на страницу и исправить ошибки. Замена одного символа или буквы внутри тега может привести к неправильному отображению страницы. Если проблема заключается в неправильном отображении польских символов, мы, вероятно, забыли об их преобразовании в стандарт ISO. Мы можем сделать это, выбрав в меню «Блокнот»: EDITION-TEXT-CONVERSION-WIN -> ISO или нажав клавишу F11. Затем сохраните изменения и верните просмотр страницы в веб-браузер.
Может случиться и обратное, несмотря на неправильно введенный код или даже отсутствие некоторых маркеров или параметров, на странице будет отображаться правильный. За такое положение вещей отвечает браузер, который может выявлять и исправлять ошибки BDI. Тем не менее, мы настоятельно рекомендуем вам всегда вводить код правильно и полностью, иначе вы никогда не узнаете, правильно ли отображается страница с другими пользователями, в конце концов, вы можете использовать другой браузер.
Мы также можем столкнуться с такой ситуацией, что страница на компьютере, на котором мы создавали, работает нормально, но после размещения ее в Интернете больше нет. Причины этого также можно найти в исходном коде, в первой строке следует проверить правильность имен файлов.
Страница, созданная в этом цикле урока, написана так, чтобы она выглядела как можно больше в следующих браузерах: Internet Explorer от версии 4, Netscape от версии 4, Mozilla от версии 1.0rc2, Opera от версии 5 (от nakadk). Эта страница, вероятно, также будет доступна для чтения в некоторых старых версиях этих браузеров.

Похожие