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

Размер шрифта. Обычно размер шрифта определяется в пунктах (72 пункта (пт) = 1 дюйм высоты шрифта) но, к сожалению, эти размеры не достаточно точно переводятся между платформами. Отчасти это происходит потому, что их операционные системы управляют дисплеями с различными разрешениями.

2.2 Представление графики на Web-страницах

На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее – краткий обзор "большой тройки" онлайновых графических форматов. Более подробная информация представлена в главах, посвященных каждому из форматов.

GIF. GIF – Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web.

Его свойства состоят в следующем:

– поддерживает не более 256 цветов (меньше можно и часто нужно);

– использует палитру цветов;

– использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы в дальнейшем практически не сжимаются);

– поддерживает чересстрочную развертку;

– является поточным форматом, т.е. показ картинки начинается во время перекачки;

– позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов;

– имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов;

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

А теперь немножко разъяснений – к чему эти свойства могут привести. Как мы написали, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод – если у взять красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже – оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если надо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.

JPEG. Вторым наиболее популярным графическим форматом в Web является JPEG – Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16,77 млн цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.

Фотографии или любые изображения с плавными градациями цветов лучше всего сохранять в JPEG-формате, потому что он предлагает более высокое качество изображений, умещающихся в файл меньшего объема. Тем не менее, JPEG не является лучшим решением для графических изображений с одноцветными областями, поскольку этот формат имеет тенденцию испещрять цвета крапинками и конечный файл, как правило, будет несколько больше, чем GIF-файл для того же изображения.

PNG. Есть еще третий графический формат, конкурирующий за постоянное использование в Web. Это формат PNG – Portable Network Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web. Именно поэтому он включен здесь в "большую тройку". PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).

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

В этом отношении для Web-дизайнера существует единственное наиболее важное правило: размер файла графического изображения должен быть минимально возможным! Создание изображений, предназначенных для передачи по сети, возлагает ответственность на разработчиков серьезно относиться к проблеме времени загрузки.

2.3 Планирование информационного потока

Многие Web-мастера не тратят время на то, чтобы продумать информационный поток, а ограничиваются только размещением текста и изображений на странице. Хотя на многих сайтах вы можете встретить хвастливые уверения, что у них гораздо больше посетителей, чем у конкурентов, однако это не самый лучший индикатор качества исполнения. Лучшим показателем является время: если пользователи остаются на вашем сайте достаточно долго для того, чтобы пройти по разным его уровням и разделам, то вы вправе быть уверенными в хорошо выполненной работе. Это означает, что они могут найти то, что им нужно, осмотреть остальное и без особого труда вернуться обратно.

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

2.4 Условия для создания успешного сайта

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

Четко сформулировать назначение сайта. Необходимо определить цели сайта, стараться формулировать цели настолько четко, насколько это возможно. Я хочу, чтобы сайт представлял продукцию компании Марс. После этого нужно задуматься о том, как продукция будет представлена, как позиционировать продукты на сетевом рынке. Без четко определенной цели сайт будет обречен на забвение где-то на задворках Всемирной Паутины.

Обязательно продумать аудиторию. Кто будет основной (и вторичной) аудиторией сайта? Какого они возраста? Чем они занимаются? Сколько времени они проводят на сайте?

Использовать быстро загружаемые элементы. Причина номер один, почему люди быстро уходят с сайта (или не посещают его вовсе) - слишком долгая загрузка информации. Большой объем графических файлов вызывает желание как-то повлиять на ход событий, и самое простое - это нажать на кнопкуStop, остановив загрузку.

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

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

Разумно организовать содержимое. Знакомое утверждение, что содержание первично, а форма вторична. И это правда, но форма подачи содержания тоже важна. Сколько раз при посещении очередного сайта вы говорили себе: "Здесь нет ничего интересного"? Возможно, где-то глубоко внутри и захоронено что-то ценное, но откопать это что-то можно, лишь случайно на него натолкнувшись. Информация, которую посетители должны увидеть, не нужно прятать вглубь сайта. Важную информацию необходимо сделать настолько легко доступной, насколько это возможно.

Воспользоваться картой сайта. Карта сайта может оказаться особенно полезной, когда возникнут трудности с представлением информации. Начните работу с главной страницы и идите вглубь. Это визуальное представление поможет "увидеть" содержимое вашего сайта, более ясно организовать его и избежать глобальных изменений при модификации сайта. Чем более четко я смогу представить себе структуру сайта, тем больше у меня появятся новых идеи по его улучшению.

3. Разработка Web-сайта посвященного компании "Марс"

3.1 Создание новой web-страницы (шаблона)

Для создания новой страницы в Dreamweaver я выбрала в меню Файл пункт Новый… или. На экране появится диалоговое окно Новый документ

Шаблон - это особым образом подготовленная и сохраненная Web-страница, где уже имеются некоторые элементы, которые могут понадобиться (заголовок, сведения об авторских правах, элементы оформления и т. п.).

После того, как в главном окне программы появится наш шаблон, необходимо сохранить наш файл. На жестком диске необходимо создать отдельную папку (далее корневая папка), в которой будут находиться все файлы, необходимые для создания файла. Назовем эту папку Мой сайт. Для сохранения файла выбираем в меню Файл пункт Сохранить и в появившемся окне указываем путь сохранения Корневая папка.

Задаем имя первой страницы glavnaya.html. Теперь мы можем найти созданную страничку в правом окне экрана. По тому же принципу необходимо создать и сохранить еще 6 страничек. Имена новых страниц задаются в соответствии с содержанием страниц сайта (это необходимо для создания гиперссылок). Имена задаются английскими буквами.

3.2 Ввод и форматирование текста

Начнем мы с того, что введем в нашу только что созданную Web-страницу текст и отформатируем его - расставим заголовки, выделим части текста полужирным шрифтом и пр. В этом смысле Dreamweaver мало чем отличается от текстовых редакторов.

Текст набирается с помощью клавиатуры при этом Dreamweaver самостоятельно разобьет текст на строки. Чтобы создать новый абзац, нужно нажать клавишу . Если же надо просто перенести текст на другую строку (вставить так называемый разрыв строк), то достаточно нажать комбинацию клавиш +.

Текстовый курсор, т. е. мигающая вертикальная черточка, показывающая место, где будет появляться набираемый нами текст, может перемещаться во всех направлениях с помощью клавиш-стрелок. Также мы можем "листать" текст нажимая клавиши И Мгновенно перемещаться к началу и концу строки клавишами <Ноте> и . Чтобы быстро переместиться в начало или конец документа, нужно нажать, соответственно, комбинацию клавиш + или +. Мы также можем устанавливать текстовый курсор в произвольное место, просто щелкнув там мышью.

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

Кроме того, в окне документа Dreamweaver доступны такие операции, как перемещение ("вырезание"), копирование текста в буфер обмена Windows и последующая его вставка в место, где находится текстовый курсор. Это может быть очень полезно, если нам нужно переместить фрагмент текста с места на место или поместить похожие фрагменты текста в разные места документа.

Быстро выполнить все необходимые операции с текстом поможет специальная панель, расположенная снизу главного окна в программе Dreamweaver:

После того, как необходимый текст набран и отформатирован, необходимо поработать с цветом. Цветовые параметры страницы тоже можно отредактировать при помощи этой панели.

Для задания цвета используется так называемый селектор цвета. Вот он

Селектор цвета состоит из двух частей. Справа находится поле ввода, где вводится код нужного цвета в формате RGB. Выглядит это так - #RRGGBB, где RR - это шестнадцатеричное число от 0 до FF, задающее долю в окончательном цвете красной составляющей, GG - зеленой, а BB - синей. Пример задания цвета в формате RGB - #336699 (это тускло-голубой цвет). Но вряд кто запомнит наизусть шестнадцатеричные коды цветов. Поэтому в левой части селектора цвета находится кнопка вызова окна выбора цвета, которое в раскрытом виде показано на след рисунке:

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

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

Зададим фон всей страничке. Я выбрала цвет #14285F. Соответственно теперь нужно изменить цвет шрифта, чтобы текст был удобнее читать. Я сделаю шрифт черным, а заголовки фиолетовым.

То же самое необходимо проделать с остальными страницами будущего web-сайта, чтобы была выдержана единая стилистика текста. После всей проделанной работы в главном окне программы мы увидим следующее:

3.3 Работа с графикой

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

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

Форматов графических изображений на свете существует очень много. Но в Web-графике популярны только три из них: GIF, JPEG и PNG. При разработке своего сайта я используя только формат JPEG.

Формат JPEG (Joint Pictures Encoding Group, группа кодирования неподвижных изображений), напротив, замечательно подходит для хранения полутоновых изображений. Поэтому картины и сканированные фотографии хранят только в этом формате. Для начала, все графические изображения, которые я буду использовать при разработке web-сайта, необходимо скопировать в корневую папку. Если этого не сделать, при просмотре сайта в Web обозревателе вы не увидите желаемых изображений. Чтобы вставить изображение на страницу сайта, нужно в меню Вставить выбрать пункт Изображение, и в сплывающем окне найти тот файл, который я хочу разместить.

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

Теперь давайте щелкнем мышью по только что вставленному изображению, чтобы его выделить. (Собственно, Dreamweaver автоматически выделит изображение сразу после его вставки.) После этого вокруг изображения появится тонкая черная рамка, на правой и нижней границе которой появятся небольшие черные квадратики. Это так называемые маркеры изменения размера. Можено "захватить" мышью любой маркер и перетащить его на новое место, изменив тем самым горизонтальный или вертикальный размер изображения соответственно. А для того, чтобы оба размера изменялись пропорционально, перетащим мышью маркер, находящийся в правом нижнем углу изображения, при нажатой клавише . Теперь сохраним получившуюся страницу, выделим изображение, если оно не выделено, и посмотрим на редактор свойств. Вот, что мы там увидим

Тип урока: урок усвоения новых знаний

Цели:

• Познакомиться с понятием Веб 2.0, а также со структурой веб-сайтов, рассмотреть основные этапы создания сайта на хостинге
• Вырабатывать навыки по регистрации на хостинге и разработке структуры сайта, используя возможности бесплатного хостинга
• Формировать ответственное отношение к представляемой на сайте информации, её достоверности, актуальности, оригинальности.

Дидактические материалы : инструкционные листы с заданиями

Программное обеспечение : браузер, пакет «Denver», СМS «Kandidat»

Структура урока

I. Организационный момент
II. Актуализация опорных знаний

V. Закрепление материала учащимися
VI. Подведение итогов
VII. Домашнее задание

Ход урока

I. Организационный момент
II. Актуализация.

1. Что представляет собой сайт и каково его назначение?
2. Какая служба в Интернет отвечает за веб-сайты?
3. Что означает доменное имя сайта?
4. С чего начать создание собственного сайта и какие технологии использовать?

III. Сообщение темы и целей урока
IV. Изучение теоретического материала

Структура веб-сайтов

Структура веб-сайта – это его каркас, определяющий порядок навигации.

Базовые структуры веб-сайтов можно разделить на три группы: линейная, древовидная, решетчатая.

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

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

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

Разновидности веб-страниц

Веб-сайты различных структур в основном включают в себя четыре типа страниц:

• главная страница,
• страницы категорий,
• конечные страницы,
• служебные страницы.

Главная страница должна давать обобщенные сведения о сайте в целом и указывать направления по основным категориям.

Конечные страницы содержат в себе основные материалы сайта – статьи, изображения, видео. Именно эти страницы представляют наибольший интерес для пользователя.

Служебные страницы предназначены для размещения карты сайта, контактной информации, лицензионного соглашения и других служебных данных.

Выбор хостинга и доменного имени

Хо?стинг - это услуга по предоставлению вычислительных мощностей для физического размещения сайта на сервере, постоянно подключенном к компьютерной сети (в данном случае Интернет).

Хостинговая компания (хостинг-провайдер ) - организация, предоставлением услуг размещения оборудования, данных и web-сайтов на своих серверах.

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

Создание сайта с помощью СМС

В настоящее время сайты, как правило, создаются с помощью специальных программ, именуемых системами управления сайтом (СМS). Часто используется термин «Конструктор сайтов», который по сути является также CMS. Система управления сайтом предназначена для автоматизированного создания сайта, а также для управления контентом (содержимым). Другими словами, СМС позволяет на основе шаблона определенного типа создать сайт, задать его структуру и наполнить информацией даже человеку, слабо владеющему HTML. Ряд хостингов имеют встроенные CMS: в частности, популярный ucoz.ru.

Несмотря на многообразие CMS, принципы их работы одинаковы. Для отработки приемов работы с ней целесообразно на свой локальный компьютер установить пакет программ «Denver», который позволяет смоделировать работу сервера. С помощью данного пакета можно использовать разнообразные СМС, создавая сайты непосредственно на локальном компьютере. Овладев основными приемами работы с сайтом, можно уверенно приступать к регистрации на сервере хостинг-провайдера.

Технология Веб 2.0

Следует упомянуть современное направление в принципах web-разработок, называемое web 2.0

Веб 2.0 является методикой проектирования сайтов, которые путём взаимодействия с пользователями становятся тем совершеннее, чем больше людей ими пользуются. Эта методика подразумевает участие пользователей в развитии web-проекта (примером является «Википедия»), а если точнее, в наполнении информацией. Хотя Веб 2.0 именуется технологией, далеко не все специалисты с этим согласны, поскольку речь не идет о каком-то особом методе web-дизайна.

V. Закрепление материала учащимися (Создание сайта на локальном сервере)

1. Запустить на выполнение программу «Start Denver»
2. В адресную строку браузера ввести доменное имя, указанное в инструкционной карте (например, http://school24.ua). Ознакомиться с шаблоном сайта, предложенного по умолчанию.
3. Открыть административную панель сайта: http://school24.ua/admin
4. Указать логин и пароль (admin, admin)
5. Настройки , задать название сайта, выбрать шаблон, соответствующий теме сайта
6. В разделе “Навигация” выбрать пункт Начало . Создать нужное количество категорий (Ссылка «Добавить категорию»–Указать название категории–Установить переключатель Включить ссылку страницы в меню в положение «Да »–Кнопка Добавить категорию )
7. При необходимости откорректировать меню сайта (В разделе “Навигация” выбрать пункт «Редакция меню»)
8. Проверить созданный сайт (Ссылка «Перейти на сайт»)

VI. Подведение итогов.

1. Домашнее задание: зарегистрироваться на одном из бесплатных хостингов со встроенной CMS, получить доменное имя сайта, создать сайт (без наполнения контентом).

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

Что такое HTML и CSS?

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей - это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка - HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.

Основные термины HTML

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

Элементы

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

до

) и абзацев (определены как

); в список можно включить элементы ,

, , и и многие другие.

Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:

Теги

Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.

Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например,

.

Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например,

.

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

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

...

Атрибуты

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id , который идентифицирует элемент; атрибут class , который классифицирует элемент; атрибут src , который определяет источник встраиваемого содержимого; и атрибут href , который указывает ссылку на связанный ресурс.

Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент с атрибутом href будет выглядеть следующим образом:

Shay Howe

Демонстрация основных терминов HTML

Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега и закрывающего тега охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com" в открывающем теге.

Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег

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

Настройка структуры документа HTML

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением.html, а не.txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.

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

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

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

Всё видимое содержимое веб-страницы будет находиться в элементе . Структура типичного HTML-документа выглядит следующим образом:

Привет, мир!

Это веб-страница.

Демонстрация структуры HTML-документа

Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы и . Элемент содержит кодировку страницы через тег и название документа через элемент

Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.

Рис. 1.04. Наш сайт Styles Conference со сбросом CSS

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.

Напомним, что мы рассмотрели следующее:

• Разница между HTML и CSS.
• Знакомство с элементами HTML, тегами и атрибутами.
• Настройка структуры вашей первой веб-страницы.
• Знакомство с селекторами CSS, свойствами и значениями.
• Работа с селекторами CSS.
• Указатель на CSS из HTML.
• Важность CSS сброса.

Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

Ресурсы и ссылки

• Common HTML terms via Scripting Master
• CSS Terms & Definitions via Impressive Webs
• CSS Tools: Reset CSS via Eric Meyer

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

Пример 4.1. Исходный код веб-страницы

Заголовок

Первый абзац.

Второй абзац.

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Существует несколько видов , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

Табл. 4.1. Допустимые DTD

DOCTYPE	Описание
HTML 4.01
	Строгий синтаксис HTML.
	Переходный синтаксис HTML.
	В HTML-документе применяются фреймы.
HTML 5
	В этой версии HTML только один доктайп.
XHTML 1.0
	Строгий синтаксис XHTML.
	Переходный синтаксис XHTML.
	Документ написан на XHTML и содержит фреймы.
XHTML 1.1
	Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

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

Например, в строгом HTML и XHTML непременно требуется наличие тега

Тег