Участник:Андрей Гринько
Содержание |
Автор
Гринько Андрей
Тема
Класс
Теория
Урок 1.Структура web-документа.
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. Не пытайтесь запомнить эту строчку наизусть, главное - вы должны знать, что она необходима. Ведь именно она помогает сделать сайт, который будет одинаково смотреться во всех браузерах(обычно это три основных Internet Explorer,Opera, Firefox) .
Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги головы (<head></head>) и тела документа(<body></body>) .
Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п. А основное содержимое: текст,таблицы,картинки, - находится в теле документа.
Урок 2: создаём первую страничку.
ШАГ 1: Создайте на своем компьютере папку с названием вашего будущего сайта, ну к примеру в данном случае актуально будет назвать папку obuchenie_html . Внутри папки создайте еще одну папку с названием www, а внутри нее еще одну для изображений с названием img (позже вставим туда картинки). Для наглядности я нарисовал вам приблизительную структуру, получившуюся в результате:Файл:1111.jpg
Пока поверьте мне на слово, дальше когда начнете изучать Dreamweaver все поймете.
ШАГ 2: Зайдите в созданную на предыдущем шаге папку www и создайте внутри нее текстовый документ. Для этого зайдите в нее, кликните правой кнопкой мыши в выпадающем меню выберите Создать - Текстовый документ. Перед собой вы должны видеть примерно следующее:Файл:222223.jpg
ШАГ 3:
Теперь, следуя предыдущему уроку напишите в Блокноте текст простейшей странички:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Моя первая страничка! </title>
</head>
<body>
Ура!!!! Я создал свою первую страницу на html!!!
</body>
</html>
Готово ! Вы создали свою первую настоящую веб-страницу!
ШАГ 4: Теперь сохраните ваш документ как "index.htm" (расширение ".htm" указывает, что это HTML-документ. ".html" даст тот же результат. Это не имеет значения). Для этого в меню Файл выберите Сохранить Как: Файл:333322.jpg
В пункте Тип файла выберите "Все файлы".
После сохранения можете удалить текстовый документ.
ШАГ 5: Теперь если вы запустите получившийся файл index.htm с помощью браузера увидите примерно следующее:Файл:444422.jpg
Урок 3: Начинаем работать с текстом.
В предыдущем уроке мы создали свою первую простейшую страничку.
В этом уроке мы подробнее остановимся на свойствах текста, научимся выделять абзацы, заголовки и т.д.
Если вы возьмете и скопируете текст данного урока от начала и до первой картинки, и вставите его в свою первую страничку, то вы увидите примерно следующее:Файл:1111122.jpg
Как вы заметили текст идет слитно, без разделений на абзацы, также ничего не выделено заголовком, короче форматирование отсутствует! Т.е. чтобы Браузер правильно отображал текст, необходимо задать его форматирование.
Основными элементами форматирования текста в html являются:
P - Используется для разбивания текста на параграфы
H1,H2,.....H6 - Применяются для создания заголовков 1,2...6 уровней
BR - используется для переноса строки
DIV, SPAN - Используются для выделения части документа определенным способом.
P - используется для разметки параграфов в html документах.
ALIGN - определяет способ горизонтального выравнивания параграфа .
Возможные значения: left, center, right, justify. Это соответственно по левому краю, по центру, по правому краю, и по ширине .По умолчанию имеет значение left.
<palign="center">Например:</p> <p align="center"> Этот параграф по центру </p> <p align="left"> Этот по левому краю</p> <p> Этот тоже по левому (т.к. по умолчанию) </p> <p align="right"> Этот по правому краю</p> <p align="justify"> В этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю
Если вы наберёте это в блокноте, то в браузере увидите следующее:Файл:2222223.jpg
