close

Вход

Забыли?

вход по аккаунту

?

Урок 1. HTML – структура документа

код для вставкиСкачать
Урок 1. HTML - структура документа
Веб-странички состоят из смеси трех основных компонент: языка разметки данных HTML, каскадных таблиц стилей CSS и придающего интерактивность страницам языка Java Script. Есть и другие составляющие, но они просто заменяют одну из перечисленных и рассматриваться не будут. К сожалению, мы не будем рассматривать стили и веб-программирование и остановимся кратко на HTML.
HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. Директивы HTML называются не "командами", "процедурами" или "операторами", а имеют собственное наименование - "теги" (от англ, tag - отметка). Теги HTML заключаются в угловые скобки. Все объекты, не заключенные в угловые скобки, интерпретатор воспринимает как текстовые элементы, отображая их на экране компьютера "как есть". Почти все теги надо писать в нижнем регистре. Большинство тегов - парные, состоящие из "открывающего" и "закрывающего" тегов. Такие теги называются контейнерами и их можно вкладывать один в другой.
Структура страницы (форматировать лесенкой не обязательно, но наглядно):
<html> <head> <тitle>Моя первая web-страничка</title> </head> <body> Тело документа должно находиться между тэгами <body> и </body>. </booy> </html> Теги (команды) языка HTML
* Комментарии <!-- Это комментарий -->
* <Hx> - Заголовки. Содержание страницы структурно делится на просто текст и заголовки различного уровня h1-h6. Например: <h1> Заголовок первого уровня </h1>
* <p> - абзац, может содержать атрибут (параметр) выравнивания, например:
<p align=left| center| right| justify> абзац </p> - выравнивание абзаца по левому краю, центру, правому краю и ширине соответственно. Кстати, заголовки выравниваются аналогично
* <br> - переход на новую строку, <hr> - черта
* Форматирование символов:
ОткрывающийЗакрывающий Описание <i></i> Курсив <em></em> <b></b>Полужирный <strong></ strong ><u></u>Подчеркнутый <strike></ strike >Зачеркнутый<sub></sub > Подстрочный индекс<sub> </sub > Надстрочный индекс<big> </big> Увеличение размера на 1 пункт<small> </small> Уменьшение размера на 1 пункт<pre> </pre> Уже отформатированный текст<blockquote> </blockquote> Цитата. Текст отступает от левого края на 8 пробелов. Так как лишние пробелы внутри текста игнорируются, пробел можно задавать есть специальной escape-последовательностью, например: &nbsp; &nbsp; означает два пробела подряд.
И, наконец, бегущая строка (работает неодинаково в различных браузерах и не рекомендуется):
<marquee behavior="alternate" direction="right">Бегущая строка</marquee>
Атрибут behavior - определяет тип движения текста. При значении alternate текст движется слева направо, достигнув края, меняет направление. При значении scroll бегущая строка, достигнув края, появляется с противоположной стороны. При значении slide бегущая строка останавливается у противоположного края страницы.
Атрибут direction - определяет направление движения текста: down - вниз, up - вверх. При значении left бегущая строка движется справа налево. При right - слева направо.
Задание к уроку 1
1. Создайте новую папку и назовите ее, например, "MySite". Внутри этой папки создайте каталог с названием "image", туда вы будете впоследствии помещать все изображения.
2. Создайте в папке текстовый документ, наберите в нем код структуры и сохраните файл под именем index.html ("Сохранить как").
3. Не закрывая текстовый документ, откройте его в браузере
4. Используя все теги, напишите поздравление с 8 марта, днем рождения или другим праздником (тема будет предложена учителем). Каждый тег желательно писать в новой строке - закрывающий под открывающим. Пример (можно и нужно скопировать, вставить, переделать):
<html>
<head><title>Поздравление</title> </head>
<body>
<h2 align="center"> Поздравляем с 8 марта! </h2>
<h3 align="right"> Мальчики класса: 5 марта 2012 года </h3> <p align="center">
Хотим вас <b>искренне</b> поздравить <br />
С чудесным праздником весны! <br />
Сегодня не к чему <b>лукавить</b> - <br />
Как никогда вы нам нужны! <br />
8 марта - день прекрасный, <br />
Пускай все сбудутся мечты. <br />
И каждому без слов все ясно: <br />
Вы - <i>королевы красоты!</i><br />
</p>
<h4>Что подарить на 8 марта?</h4>
<p align="justify">
<u>Женщины</u> - народ капризный, поэтому и к выбору подарка отнеситесь тщательно, проявив фантазию, вспомнив, что же любит ваша дорогая дама... И не забудьте про открытку к 8 марта с нежными изящными рифмами, она растопит сердце дамы, будьте уверены. А в международный женский день 8 марта принимать поздравления и красивые комплименты всегда приятно!
</p>
<p align="center">
<big>
<sub>Поздравляем,</sub>&nbsp;&nbsp;&nbsp;счастья &nbsp;&nbsp;&nbsp;<sup>желаем!</sup>
</big></p>
<hr /><center> <marquee width="600" direction="right" >
<strong>Поздравляем с <big><em>8</em></big> марта!</strong>
</marquee></center><hr /> <p align="left">
А теперь несколько афоризмов: <blockquote> 8 марта - каждый мужчина может честно признаться: "Сегодня не мой день!"<br />
8 марта - Международный день Подруг Защитников Отечества!<br />
8 Марта - практически единственный день, когда девушка соглашается со всем, что говорится в ее адрес.<br />
</blockquote>
Анекдот:
<blockquote>
Говорит крокодил Гена Чебурашке:<br /> - Смотрю я на тебя, Чебурашка, и не знаю: то ли с 23-м февраля тебя поздравлять, то ли с 8-м марта?<br />
</blockquote>
И.. африканский тост:
<blockquote><big>За женщин, в тени которых нам так хорошо!</big><br /></blockquote>
<small>За всех мальчиков класса писал Вася Иванов</small><br />
</p>
</body>
</html>
Автор
sob-mk
sob-mk146   документов Отправить письмо
Документ
Категория
Методические пособия
Просмотров
92
Размер файла
30 Кб
Теги
урок, структура, документы, html
1/--страниц
Пожаловаться на содержимое документа