Глава 3
HTML и не только
рамках этой главы мы предлагаем вам выполнить несколько практических заданий, связанных с созданием с создать простейшую веб-страницу и разместить ее на бесплатном хостинге. Советуем выполнить предложенные пр
так как полученные навыки сэкономят вам много времени в дальнейшем.
3.1. Что такое HTML и стоит ли тратить время на его изучение?
Как мы уже сказали в главе 1, аббревиатура HTML определяет язык разметки гипертекста (Hyper Text Markup Language гипертекст – это текст, описывающий особую разметку, которая указывает браузеру, где и в каком виде отображ страницы. К примеру, браузер должен знать, что картинку надо выводить по центру, а текст под ней должен быть зеленого цвета.
Не стоит путать HTML с языками программирования. На языках программирования, таких как Java, C++, Pascal и программы, а с помощью HTML лишь размечается обычный текст, который после подобной разметки превращается в гипертекст.
Выше мы уже говорили, что в отличие от обычного текста гипертекст может содержать гиперссылки, и это, пож ценность.
Как увидеть гипертекст конкретной веб-страницы? Очень просто – необходимо щелкнуть правой кнопкой мыш странице (но не на картинке) и выбрать команду для отображения исходного кода. Для браузера Google Chrome это ком страницы, для Opera – Исходный код, а для Mozilla Firefox – Исходный код страницы.
Вот так, к примеру, выглядит HTML-код веб-страницы одного из сайтов, открытый в браузере Google Chrome (рис. 3.1).
Рис. 3.1. HTML-код веб-страницы
Первоначально все выглядит несколько пугающе, но, поверьте, со временем это нагромождение непонятных симв более или менее привычную картину. Уже сейчас можно увидеть наличие на странице английских слов, заключенных
например <head>.
Это так называемые управляющие символы – tags, или «теги». Любой профессиональный веб-мастер знает HT профессиональный музыкант знает нотную грамоту. Но стоит ли тратить время на изучение HTML начинающим веб-м его знания можно создавать сайты? Действительно, создавая сайт на uCoz, мы обошлись без знания HTML, но толь меняли шаблон и не использовали сторонний HTML-код . Увы, в реальных условиях без этого не обойтись. Готовясь к не стоит пропускать эту главу. Постарайтесь вникнуть в основы HTML, так как в дальнейшем это сократит время
сайтами.
Перед тем как переходить к созданию веб-страницы, немного расскажем о картинках.
3.2. О картинках
Десять лет назад, работая над сайтом, веб-мастеру даже не приходилось задумываться о том, где взять картинки загружай что душе угодно , не думая об уникальности и авторских правах. Сейчас ситуация кардинальным образом поисковые сервисы в состоянии оценить уникальность изображения.
Совет
Если у вас есть возможность использовать при создании сайтов уникальные изображения, то не упускайте ее.
Поскольку картинки – это далеко не последний элемент любой веб-страницы, стоит поговорить о них подробней.
Типы графических файлов
Файл – это программа или данные, хранящиеся в долговременной памяти компьютера. У каждого файла есть имя , частей, разделенных точкой. До точки пишется собственно имя файла, как правило, присваиваемое пользователем. расширение файла, по которому компьютер понимает, с файлом какого типа он имеет дело (в операционной систе
файла может отсутствовать).
Вся информация в компьютерах, будь то настольный компьютер, ноутбук, сервер Интернета и т. д., хранится в фа хорошо знакомые папки – это тоже файлы. Файлы могут хранить различную информацию: числовую, текстовую, гра (видеофайлы содержат одновременно графическую и звуковую информацию).
графических файлах хранятся изображения, которые могут быть растровыми и векторными. Применительно к с
первую очередь интересуют растровые изображения. Они хранятся в памяти компьютера в виде точек (пикселов) различного цвета.
К основным типам растровых графических файлов относятся GIF, JPG (JPEG), PNG, BMP и TIF. При создании сайто
использовать только форматы GIF, JPG (JPEG) и PNG.
GIF – этот формат подходит для изображений, имеющих небольшое количество цветов – до 256. Соответственн рисунки с однородной заливкой, например логотип сайта. Современный формат GIF поддерживает прозрачность
изображений) и анимацию. Не стоит сохранять в этом формате фотографии, так как 256 цветов для фото явно недостаточно.
JPEG – «любимый» формат пользователей Интернета. Именно в нем, как правило, хранятся фотографии, выложен
сайтах. Формат JPEG позволяет хранить изображение с большим количеством цветов – около 16 млн.
PNG – очень перспективный формат применительно к Интернету. Был создан для замены формата GIF и устрани
количество цветов в 256. Увы, формат PNG не поддерживает анимацию, так что списывать со счетов GIF пока не приходится.
Работая над сайтами, вы наверняка будете снимать большое количество скриншотов, поэтому сейчас мы подроб
процедуру.
Создание скриншотов
При работе над тестовым сайтом «Компьютер для чайников» нам пришлось довольно часто снимать скриншоты – простейшем случае при создании скриншота можно воспользоваться клавишей Print Screen. После нажатия кла изображение экрана помещается в буфер обмена. Затем достаточно запустить любой растровый графический редакт
Photoshop), создать новый документ и вставить изображение из буфера обмена.
Возможны два варианты снятия скриншотов с использованием клавиши Print Screen:
если необходимо «сфотографировать» весь экран, нажимаем клавишу Print Screen;
если необходимо сделать скриншот только активного окна, то используем сочетание клавиш Alt + Print Screen.
некоторых случаях необходимо «сфотографировать» только небольшую область экрана, да еще и запечатлет мыши. Для этого лучше воспользоваться небольшими специализированными программами для снятия скриншо работать с бесплатной версией программы ScreenHunter. Программа «висит» в области уведомлений и всегда готова к
Несмотря на то что у ScreenHunter английский интерфейс, настройки интуитивно понятны (рис. 3.2).
Рис. 3.2. Окно программы ScreenHunter
Перечислим основные особенности программы ScreenHunter.
Запускается по умолчанию нажатием клавиши F6.
Есть возможность захвата любой прямоугольной области экрана (Rectangular area), активного окна (Active windows), вс screen).
Есть возможность захвата указателя мыши (Mouse pointer).
Скриншот может сохраняться в указанную папку в форматах GIF, JPEG и BMP.
Подготовка изображений для публикации в Интернете
Чаще всего изображения, загруженные из Интернета, можно использовать на своих сайтах без обработки, че фотографиях, полученных с цифрового фотоаппарата. К примеру, размер файла с фотографией, сделанной обычно достигать нескольких мегабайт. Если использовать на сайте необработанные фотографии, то страницы будут загру
Это может привести к тому, что нетерпеливый пользователь покинет страницу, не дождавшись ее загрузки.
Подобными ошибками очень часто грешат начинающие веб-мастера, создающие сайты с помощью визуальных в FrontPage. Они вставляют на страницы необработанные фотографии, размер которых как по ширине, так и по высоте с тысяч пикселов, а для того чтобы они полностью помещались на странице, уменьшают их масштаб отображения с п после подобного масштабирования картинка может выглядеть очень маленькой, размер файла остается прежним. Д на фрагмент веб- страницы, на которой присутствует изображение размером 155 х 117 пикселов, однако его реальные пикселов, а файл весит почти 3 Мбайт (рис. 3.3).
Рис. 3.3. Картинка выглядит очень маленькой, но размер файла почти 3 Мбайт
Никогда не допускайте подобных вольностей и обрабатывайте фотографии перед размещением на веб-страницах.
Если вы пользуетесь растровым графическим редактором Photoshop, то в меню File (Файл) выберите команду Save fo (Сохранить для Сети и устройств). После этого будут доступны настройки, позволяющие быстро подготовить публикации в Интернете (рис. 3.4).
Рис. 3.4. Photoshop позволяет быстро подготовить изображение для публикации в Сети
Во многих случаях можно ограничиться изменением размера и качества изображения. К примеру, для блогов м изображение с размером 600 пикселов по большей стороне, а для параметра Quality (Качество) устанавливаем 51 %.
Если вы не дружите с Photoshop или привыкли пользоваться только легальным программным обеспечением, бесплатной программой FastStone Image Viewer. Это многофункциональный растровый редактор для операционных с Windows (сайт программы: www. faststone.org). Несмотря на то что FastStone Image Viewer бесплатен, он обладает неплохи функций. Перечислим его основные возможности:
конвертирование изображений в различные растровые форматы;
добавление надписей и водяных знаков на изображения;
пакетная обработка изображений;
удаление эффекта «красных глаз»;
создание скриншотов.
Пакетная обработка изображений позволяет работать с изображениями не по одному, а сразу с группой. К приме фотографий с цифрового фотоаппарата и за считанные секунды уменьшить их размер и качество до необходимых значений.
Отдельно стоит сказать и о водяных знаках. Поскольку в Интернете процветает повальное заимствование чужих нелишне на своих фотографиях размещать водяной знак или надпись. Логично указывать на изображениях адрес ва найдутся желающие на него заглянуть (рис. 3.5).
Рис. 3.5. В правом нижнем углу отображается надпись, созданная в программе FastStone Image Viewer
При установке FastStone Image Viewer можно выбрать русский язык, благодаря чему не составит большого труд принципах работы с программой.
Теперь вы знаете о картинках достаточно для того, чтобы с умом использовать их при создании сайтов.
3.3. Немного практики
Сейчас мы проведем несколько небольших экспериментов, которые дадут возможность вникнуть в основы HTM рассказывать все таким образом, чтобы в вашей памяти закрепились базовые принципы создания веб- страниц . К п
запомнить, как правильно именовать файлы веб-страниц и по каким причинам на сайтах иногда не отображаются картинки.
Создание простейшей веб-страницы
Начнем практику с создания простой веб-страницы с повторяющимся несколько раз текстом «Добро пожаловать!»
Хотя на данный момент существует большое количество различных HTML- редакторов, многие из которых автом написания HTML-кода, мы воспользуемся стандартным приложением Блокнот. Поскольку в Блокноте приходится все позволяет быстрее вникнуть в процесс создания веб-страниц.
Примечание
На практике, если вам придется править HTML-код, воспользуйтесь приложением типа Notepad++ – это продвин поддержкой синтаксиса многих языков программирования. Он не добавляет в код BOM – невидимые символы, из
нарушиться нормальная работа сайта.
Итак, запускаем приложение Блокнот, которое находится в папке со стандартными приложениями Windows (под есть и в Linux), и набираем следующий текст (рис. 3.6).
Рис. 3.6. HTML-код тестовой страницы
Документ открывается тегом <html> (он дает понять браузеру, что здесь начинается веб-страница), а заканчивается
страницы).
Примечание
Тег <html> – корневой элемент в документе HTML 5.0. Его наличие обязательно.
Наклонная черта в закрывающем теге называется «слеш». В данном случае, поскольку слеш наклонен в правую ст
прямым слешем.
Открывающий и закрывающий теги образуют так называемый контейнер. Как вы понимаете, для образования кон чтобы теги были парными, то есть был тег открывающий и тег закрывающий. В нашем случае все теги парные, но так
скоро мы применим одиночные теги.
контейнер <head></head> (с английского head переводится как «голова») помещается название документа и разли информация, например ключевые слова. Сюда же добавлен контейнер <title></title>, в котором содержится название ве помещенный в этот контейнер, отображается в заголовке окна браузера. Некоторые начинающие веб-мастера по не контейнер <title></title> или оставляют то, что прописывается по умолчанию веб-редакторами. Если взглянуть на скрин ниже страницы, то можно увидеть, что она называется «Экспериментальные физические задачи. Механика», а на е
Новая страница 2, то есть содержимое контейнера <title></title> даже не дает намека о содержании веб-страницы (рис. 3.7).
Рис. 3.7. По надписи в заголовке окна браузера Новая страница 2 непонятно, чему посвящена веб-страница
Что произошло? Дело в том, что при работе над сайтом использовался популярный веб-редактор Microsoft FrontPage 20 убедиться, заглянув в HTML-код страницы. По умолчанию этот веб-редактор задает содержимое контейнера <title страница 1, Новая страница 2 и т. д. Разработчику необходимо самому позаботиться о «правильном» наполнении контейнера.
Применительно к FrontPage 2003 нужно было открыть искомую страницу, в контекстном меню выбрать пункт Свойс изменить значение поля Название с Новая страница 2 на, к примеру, Экспериментальные физические задачи. Механика.
Далее идет контейнер <body></body> (с английского body переводится как «тело») – в него помещается основн страницы: текст, картинки, таблицы и т. д.
нашем случае в контейнере <body></body> находятся шесть контейнеров, первым из которых является <h1></h1> <h6></h6>. Это заголовки различных уровней, самый крупный из которых – hi. Как правило, при создании веб-стран
только три первых заголовка, то есть hi, h2 и h3.
Внимание!
Никогда не оставляйте контейнер <title></title> пустым или не отражающим содержание страницы. В первую оч обращает внимание поисковый робот, пытаясь понять, какая информация размещена на странице. Несоблюде пожалуй, худшее, что можно сделать применительно к оптимизации сайта для поисковых машин.
Теперь можно просмотреть результат нашей работы в браузере. Для этого необходимо сохранить созданный страницу, то есть расширение файла должно быть .htm либо .html. Для этого заходим в меню Файл и выбираем команд появившемся окне в поле Имя файла указываем полное имя файла, в раскрывающемся списке Тип файла выбирае
(рис. 3.8). Остается лишь нажать кнопку Сохранить.
Рис. 3.8. Сохранение кода в виде веб-страницы
Мы дали файлу имя proba_pera.htm. Обратите внимание, что оно набрано на латинице и вместо пробела указан подчеркивания. Всегда следуйте этому правилу при именовании файлов, предназначенных для размещения в Инте
случае есть большая вероятность того, что файл не удастся загрузить на сервер.
После сохранения файла как HTML-документа он будет открываться браузером, установленным в системе по ум случае это Google Chrome, который отобразил заголовки шести уровней (рис. 3.9).
Рис. 3.9. Отображение заголовков шести уровней в окне браузера
Обратите внимание, что в заголовке окна браузера отображается надпись Пробная страница, то есть содержим начнем немного менять нашу пробную страницу, добавляя и удаляя элементы.
Использование изображений
Как мы уже сказали выше, при создании сайтов обычно используются изображения трех форматов: JPG (JPEG), ограничимся только JPEG-файлами.
Поскольку изображения – очень значимый элемент для сайта, то постараемся провести с ними более масштабны нашу вебстраницу мы вставим дважды одно и то же изображение, но храниться оно будет в различных местах.
Примечание
Изображение, которое мы используем для примера, можно загрузить, пройдяwww.pcbeeпо.ru/wpссылке-content/uploads/2011/08/mfu_0.jpg. Сохраните это изображение на Рабочем столе под именем mfu_0.jpg.
Для вставки рисунков используется тег <img src="URL">, где URL – это адрес картинки.
Для изменения нашей страницы необходимо открыть HTML-файл в Блокноте. Для этого щелкаем на значке фа мыши и выбираем команду Открыть с помощью → Блокнот. Далее изменим текст согласно образцу (рис. 3.10).
Рис. 3.10. Добавление в HTML-код ссылок на изображения
Первое изображение хранится на сервере в Интернете, а второе – на Рабочем столе вместе с веб-страницей. Просма окне браузера, мы убеждаемся, что картинки исправно отображаются (рис. 3.11).
Рис.
3.11. Одинаковые файлы с изображениями,
добавленными на веб-страницу, находятся
в разных местах
первом случае используется абсолютная ссылка, а во втором – относительная. Чтобы понять разницу между ним веб-страницей с Рабочего стола в папку Мои документы и снова откроем страницу в браузере. Второй рисунок
(рис. 3.12).
Рис. 3.12. Второй рисунок не отображается, так как HTML-страница была перемещена в другую папку
Причина заключается в том, что браузер «пытается найти» файл с изображением в той же папке, где находится в его нет. Наверняка подобную картину вы видели на некоторых сайтах. На своих сайтах необходимо избегать проб
рисунков.
Что делать, если рисунок не отображается?
Проверить, есть ли это изображение по указанной в HTML-коде ссылке.
Посмотреть, правильно ли указан путь к картинке.
Проверить, правильно ли указано имя файла. К примеру, вместо названия файла name.jpg вы могли написать name.jpeg.
Нелишне вспомнить такое определение из курса информатики: полное имя файла – это путь к файлу вместе с имен абсолютной ссылкой указывается именно полное имя файла, и даже если веб-страница будет перемещена, файл конечно, он не удален). В случае с относительной ссылкой путь к файлу указывается относительно того каталог
страница.
Внимание!
Главное, что вы должны понять из этого примера, – в действительности никаких изображений на веб-странице ссылки на эти изображения и указание на то, в каком месте вебстраницы и как они должны отображаться.
Если проводить аналогию с текстовым редактором типа Microsoft Word, то там мы, как правило, внедряем изображен есть они реально присутствуют в текстовом файле. Однако при использовании Word возможен такой вариант вставки изображения, как на веб-странице. Иначе говоря, картинка будет отображаться в тексте, но файл с ней будет храниться отдельно от до
файл с изображением, то картинка перестанет отображаться и в документе Word.
До сих пор мы не использовали атрибуты тегов, с помощью которых можно менять свойства объекта, соответс начала рассмотрим такие атрибуты тега <img>, как alt, width и height.
alt – позволяет добавлять к картинке так называемый альтернативный текст. Если в браузере отключить показ приходилось делать во время коммутируемого доступа к Интернету, чтобы ускорить загрузку веб-страниц), то вме увидеть текст, который дает пользователю понять, что изображено на рисунке. На данный момент альтернативный
для удобства пользователей, а для обеспечения возможности поиска по картинкам, как это делают современные поисковые сервисы.
width и height – если вы немного знаете английский язык, то уже догадались, что речь идет о ширине и высоте изоб выше показывает, что браузер и без этих атрибутов корректно отображает картинки. Но, как и в случае с тегом подыграть поисковым сервисам, которые при выполнении поиска по картинкам предоставляют пользователям в размер изображения. К примеру, Google позволяет искать изображения не только по таким критериям, как большие,
но и по точному размеру в пикселах. Более того, есть возможность указать тип изображения: цветное или черно-белое (рис. 3.13).
Рис. 3.13. При поиске изображений Google позволяет указывать различные параметры рисунка
Как вы уже, наверное, догадались, необходимую информацию для подобного поиска Google берет из атрибут Соответственно, при создании сайтов было бы неразумно отказаться от их использования.
Сейчас мы применим указанные выше атрибуты на нашей тестовой странице. Нужно изменить HTML-код согласно листингу 3.1. Листинг 3.1. Использование атрибутов alt, width и height <html>
<html>
<head>
<title>МФУ для дома</title>
</head>
<body>
<h1>МФУ для дома</h1>
<img src="http://pcbee.ru/wp-content/uploads/2011/08/mfu_0.jpg"
alt="МФУ для дома фото" width="200" height="200">
<img src="mfu_0.jpg" alt="МФУ для дома фото" width="200"
height="200" >
</body>
</html>
Теперь можно посмотреть, какие изменения произошли на веб-странице. После использования атрибута alt появил текст, а добавление атрибутов width и height привело к появлению рамки, показывающей размер изображения (рис. 3.14).
Рис. 3.14. Результат использования атрибутов alt, width и height
Теперь пришла пора немного рассказать об использовании таблиц. Но перед тем как продолжить, вернем нашу с
стол, чтобы отображались обе картинки.
Использование таблиц
Работая с текстовыми редакторами, мы не раз использовали таблицы, чтобы, к примеру, более наглядно пред информацию. В сайтах у таблиц изначально было несколько другое предназначение: размещение элементов веб-местам (позиционирование). Иными словами, в ячейки таблицы помещались определенные элементы: меню сайта, за текст и т. д. Иногда границы делались невидимыми, и при просмотре веб-страницы пользователь видел лишь р
помощью таблицы, даже не догадываясь о ее существовании.
На данный момент использование таблиц для верстки считается вчерашним днем, но, как бы то ни было, они наверняка будут применяться еще долго. Дело в том, что использование таблиц – быстрореализуемый вариант,
элемент веб-страницы не получается правильно разместить другими способами.
качестве эксперимента добавим на нашу веб-страницу под рисунками небольшую таблицу, состоящую из двух ст
(четыре ячейки), добавив немного кода (листинг 3.2).
Листинг 3.2. Добавление таблицы под рисунками <html>
<html>
<head>
<title>МФУ для дома</title>
</head>
<body>
<h1>МФУ для дома</h1>
<img src="http://pcbee.ru/wp-content/uploads/2011/08/mfu_0.jpg"
alt="МФУ для дома фото" width="200" height="200">
<img src="mfu_0.jpg" alt="МФУ для дома фото" width="200"
height="200">
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</body>
</html>
При просмотре в браузере мы видим, что под рисунками появилась таблица с прозрачными границами, состоящая каждой ячейке есть надпись – Ячейка 1, Ячейка 2, Ячейка 3, Ячейка 4 (рис. 3.15).
Рис. 3.15. На странице появилась таблица с невидимыми границами, состоящая из четырех ячеек
Теперь мы предлагаем вам самостоятельное задание. Необходимо поместить первое изображение вместо надписи вместо надписи Ячейка 4. Если вы все сделаете правильно, то результат будет таким, как на рис. 3.16.
Рис. 3.16. Изображения в ячейках таблицы
Пример с использованием таблицы в качестве инструмента позиционирования изображений выбран неслучайно.
применять при описании конкретных вариантов размещения рекламных блоков.
Теперь пора перейти от обычных таблиц к каскадным таблицам стилей.
Введение в CSS
Ранее мы добавляли атрибуты к тегу img. Как вы понимаете, другие теги тоже могут содержать атрибуты, но иногда добавлять их в код HTML-страницы, о чем мы сейчас и расскажем.
Изначально заголовок на нашей странице размещен по левому краю и имеет черный цвет. Допустим, нужно выровн установить для него зеленый цвет. Для этого вносим изменения в код страницы в контейнере <h1></h1>: <h1 alig color="green"> ФУ для дома</h1>, после чего заголовок будет размещен по центру страницы и окрасится в зеленый цвет (рис. 3.17).
Рис. 3.17. Заголовок размещен по центру за счет атрибута align
Если сайт состоит из 1000 страниц, то подобные изменения придется вносить в заголовки каждой из них.
Может случиться так, что через некоторое время снова понадобится разместить заголовок по левому краю, а цв этом случае придется вновь править код 1000 страниц. Как вы понимаете, это крайне неудобно. По этой причин форматирования (изменения внешнего вида) страницы выгодней держать в так называемых каскадных таблицах сти стилей можно указать, каким образом должно форматироваться содержимое тех или иных тегов веб-страницы единственный файл со стилями можно подключить к 1000 страницам и таким образом изменить их форматировани изменения в каскадной таблице стилей приведут к изменениям на всех веб-страницах, к которым она подключена.
Перед созданием каскадной таблицы стилей мы уберем все форматирование заголовка первого уровня, то есть вернем все к состоянию, изображенному на рис. 3.16. Каскадную таблицу стилей мы будем создавать с помощью все того же Блокнота. О наберите код из листинга 3.3.
Листинг 3.3. Содержимое файла каскадной таблицы стилей
h1
{
text-align: center;
color: green;
font-style:italic;
}
Наша таблица стилей должна отформатировать заголовок первого уровня следующим образом:
выравнивание: по центру;
цвет: зеленый;
начертание: курсив.
Созданную таблицу стилей необходимо сохранить подобно тому, как мы сохраняли веб-страницу, но указать расш случае мы сохранили файл под именем style.css.
Для того чтобы подключить каскадную таблицу стилей к веб-странице, добавим в код страницы ссылку на CSS:
type="text/ css" href="style.css"> сразу перед закрывающим тегом </head>. Код нашей страницы на этом этапе выглядит, как в листинге 3.4.
Листинг 3.4. Код веб-страницы с подключенной таблицей CSS <html>
<html>
<head>
<title>МФУ для дома</title>
<!– Комментарий. Подключаем таблицу стилей –>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>МФУ для дома</h1>
<table>
<tr>
<td> <img src="http://pcbee.ru/wp-content/uploads/2011/08/mfu_0.jpg" alt="МФУ для дома фото" width="200" height="200"> </td>
<td>Ячейка 2</td>
</tr>
<td>Ячейка 3</td>
<td> <img src="mfu_0.jpg" alt="МФУ для дома фото" width="200"
height="200"> </td>
</body>
</html>
код мы добавили комментарий, который заключен в соответствующие теги. Текст, находящийся внутри эт
отображаться на странице, но поможет нам вспомнить, какой элемент за что отвечает.
Совет
При создании или правке веб-страниц не ленитесь добавлять комментарии, так как в дальнейшем они помогут Человек не в состоянии запомнить все, что он когда-то делал, поэтому комментарии дадут возможность освежи собираетесь удалять с веб-страницы большой фрагмент кода, но сомневаетесь в своих действиях, лучше «зак фрагмент. Если понадобится вернуть все в исходное состояние, достаточно будет удалить теги комментариев.
После подключения каскадной таблицы стилей к веб-странице оценим полученный результат в браузере (рис. 3.18).
Рис. 3.18. Страница с подключенной таблицей стилей
Итак , мы создали веб-страницу и подключили к ней каскадную таблицу стилей. Теперь можно поставить закл загрузить результат нашей работы в Интернет.
Публикация сайта
После того как мы создали одностраничный сайт, его необходимо опубликовать, то есть разместить на каком-либо хостинге Интернета.
Для примера используем упомянутый ранее сервис «Народ», начав регистрацию на странице http://narod.yandex.ru (рис. 3.19).
Рис. 3.19. Сервис «Народ»
Наш сайт посвящен МФУ для дома, поэтому в процессе регистрации мы подобрали логин mfuhome, отображающий сайта. После регистрации, зная логин и пароль доступа к сервису, можно загрузить на него наш сайт.
Для загрузки сайта на бесплатный хостинг «Народа» воспользуемся популярным бесплатным FTP-клиентом FileZill скачать с сайта http://filezilla-project.org. Для подключения к серверу с помощью FileZilla необходимо знать следующие данные:
хост: mfuhome.ftp.narod.ru;
логин: mfuhome;
пароль.
Введя указанные данные, нужно нажать кнопку Быстрое соединение и подключиться к серверу по протоколу FTP для передачи данных (рис. 3.20).
Рис. 3.20. Подключение к серверу прошло удачно
Окно FileZilla разделено на две части: в левой отображаются файлы, размещенные на локальном компьютере, в расположенные на сервере. Как видно из рис. 3.20, на сервере уже есть папка inc с полезной для начинающих веб-маст
файл robots.txt, в котором находится информация, предназначенная для поисковой системы.
левой части мы уже выделили знакомые вам файлы, теперь их можно скопировать на сервер, перетащив мышью
правую. Попробуем зайти на сайт по адресуhttp://mfuhome.narod2.ru и посмотреть, что у нас получилось. Увы, браузер Google Chrome соо что нет главной страницы (рис. 3.21).
Рис. 3.21. Страница недоступна
Дело в том, что браузер не смог найти главную страницу, которая должна называться особым образом, наприме содержать до расширения слово index. Чтобы исправить ошибку, переименуем файл, расположенный на сервере, index.htm. Для этого в контекстном меню выберем команду Переименовать (рис. 3.22).
Рис. 3.22. Переименование файла непосредственно на сервере
После переименования снова зайдем на сайт. Теперь страница отображается без проблем (рис. 3.23).
Рис. 3.23. Созданная нами страница доступна по адресу http://mfuhome.narod2.ru Предлагаем вам еще немного потренироваться, используя новые теги.
<p></p> – теги позволяют формировать абзацы. Вы уже, наверное, заметили, что в отличие от Microsoft Word абзацы
называемой «отбивкой» – более широким отступом, чем между строками.
<br> – это одиночный тег, который предназначен для перевода строки без образования нового абзаца (без отбивки).
<a href ="url"> текст ссылки (анкор) <a> – ссылка на другую веб-страницу.
<hr> – еще один одиночный тег, который создает горизонтальную линию, заполняющую всю свободную ширину экрана.
<strong></strong> – теги выделяют текст полужирным.
3.4. Выводы
Для работы над сайтами крайне важно знать основы HTML.
Фотографии, полученные с помощью цифрового фотоаппарата, перед публикацией в Интернете необходимо обр
графических редакторах.
На фотографиях, авторские права на которые принадлежат вам, стоит размещать водяные знаки или надписи с адресом сайта.
При загрузке файлов на сервер удобно использовать протокол FTP. В качестве FTP-клиента подойдет бесплатная программа FileZilla.
На этом мы заканчиваем разминку перед созданием сайта, который будет располагаться на платном хостинге и второго уровня.