Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Кондаратцева «Создание WEB-страниц»
З а н я т и е 2
Язык разметки гипертекста HTML
Повторение: С чего начинается сайт?
Структура
|
 |  |
|
|
|
|
| |
Каркас
(главной страницы)
 |
Кондаратцева «Создание WEB-страниц»
|
Предлагаю каркас, соответствующий примеру структуры сайта:
Работу с рисунками и таблицами будем рассматривать позже, поэтому упростим каркас, используя сегодня только текст и горизонтальную черту:
Сегодня мы запрограммируем эту страницу будущего сайта на специальном языке, который называется HTML.
Кондаратцева «Создание WEB-страниц»
Язык разметки гипертекста HTML
HTML - Hyper Text Markup Language - язык разметки гипертекта. WEB-страницы записываются с помощью этого языка в виде текстовых файлов (например, в текстовом редакторе БЛОКНОТ). Файлы с текстом программы надо сохранять с расширением html. Значит, текст WEB-страницы хранится в файле с названием имя.html
Операторы (команды) языка HTML называются тегами.
Общий вид записи тега:
<Тег> Фрагмент страницы </Тег> или <Тег>
Фрагмент
Страницы
</Тег>
Основные тэги
Любой HTML-документ открывается тэгом <HTML> и им же закрывается. Затем, между тэгами <HTML> и </HTML> следует разместить заголовок и тело документа.
Тег <HTML> | <HTML> - открытие WEB-страницы Содержимое всей страницы </HTML> - закрытие WEB-страницы |
Тег заголовка <HEAD> | <HEAD> текст </HEAD> |
Внутри заголовка часто используется | |
Тег <TITLE> | <TITLE> название окна </TITLE> (текст появляется в заголовке окна) |
Тег <TITLE> вставляется в тег <HEAD>: | |
<HEAD> <TITLE>Название окна <TITLE> </ HEAD > | |
Тег тела страницы<BODY> | <BODY> Содержимое тела страницы </BODY> |
| Вот и все! Начало положено - мы получаем заготовку страницы. Вот как должен выглядеть наш базовый HTML-файл перед началом работы: Обобщение: |
Общий вид программы WEB- страницы | <HTML> <HEAD> <TITLE> Название окна</TITLE></HEAD> <BODY>
страницы </BODY> </HTML> |
Содержимое ?Кондаратцева «Создание WEB-страниц»
Тэги оформления текста для
заполнения содержимого страницы
Для оформления текстов познакомимся с несколькими тэгами.
Тег заголовковтекстов <Hn> (n от 1 до 6) | <H 1> текст </H 1> самый крупный заголовок <H 2> текст </H 2> ……… <H 6> текст </H 6> самый мелкий заголовок |
Пример: <H 1> Моя личная страница </H 1>
У тэгов <Hn> могут быть дополнительные функции, которые называются атрибутами. Записывается это так:
<Тег атр1=“знач1” атр2=“знач2”>
Например, тег <Hn> имеет атрибут ALIGN (выравнивание) со значениями Left, Right, Center.
Пример:<H1 ALIGN=“Center”>Моя личная страница</H1>
Тег перехода на новую строку <BR> | текст <BR> (без закрывающего тега) |
Тег разметки параграфов <P> | <P> текст </P> |
Тег выделения текста жирным шрифтом <В> | <В> текст </В> |
Тег выделения текста курсивом <I> | <I> текст </I> |
Тег форматированиятекста <FONT> c атрибутами COLOR (цвет), FACE (тип шрифта) SIZE (размер букв от1 до 7) | <FONT> текст </FONT> |
Пример: <FONT SIZE="3" FACE="Courier" COLOR="Magenta">фиолетовый текст 3 размера шрифтом «Курьер»</FONT>
Кондаратцева «Создание WEB-страниц»
Также нам понадобятся тэг расположения по центру <CENTER> и
Тег горизонтальной Черты <HR> c атрибутами COLOR (цвет), WIDTH (% от ширины страницы), ALIGN (выравнивание), SIZE (размер от1 до 7) | <HR> (без закрывающего тега) |
Пример: <HR SIZE="3" COLOR="Red" WIDTH =100%>
(утолщенная красная линия по всей ширине страницы)
Программа для заполнения
содержимого страницы
Итак, запрограммируем текст содержания страницы.
Рассмотрим только тело программы:
<BODY>
<CENTER><H1>Моя личная <BR>страница</H1></CENTER>
<HR SIZE="3" COLOR="Red" WIDTH =100%>
<FONT COLOR="Navy" SIZE="3">
<I>Главная О себе Моя группа Фотоальбом </I></FONT><BR>
<HR SIZE="3" COLOR="Red" WIDTH =100%>
<P><FONT COLOR="Navy" SIZE="5" FACE="Arial">
Я родился в ………………….. </FONT></P>
<P><FONT COLOR="Blue" SIZE="4">
Сейчас я учусь в ………………….. </FONT></P>
<P><FONT COLOR="Magenta" SIZE="3" FACE="Courier">
Моя специальность ………………….. </FONT></P>
<HR SIZE="3" COLOR="Red" WIDTH =100%>
<CENTER>e-mail: *****@***ru</CENTER>
</BODY>
Практическое задание
Создать папку для своего сайта:
· Открыть папку Мои документы / Факультатив WEB / Студенты и создать личную папку Сайт ВашаФамилия-Группа
· Войти в папку Мои документы / Факультатив WEB / Занятие2 и скопировать файл index.html в свою личную папку
Открыть заготовку программы:
· Запустить Internet Explorer / Работать Автономно
· Выполнить команды Файл /Открыть / Обзор / Факультатив WEB / Сайт ВашаФамилия-Группа / index.html / OK
Кондаратцева «Создание WEB-страниц»
Корректировка программы:
· Выполнить команду Вид / В виде HTML
· Вместо Моя личная страница напечатайте свои Фaмилию и Имя
· Вместо точек напечатайте свой текст.
· Дополнить текст программы тэгами с атрибутами.
· Выполнить команду Файл / Сохранить
Запустить откорректированную программу:
· Internet Explorer/ Обновить
Исправить ошибки, если они есть.
Обратите внимание на типы шрифтов.
Дизайн страницы
Добавим немного дизайна на нашей странице. Мы уже поработали с цветом текстов и черты.
Что на ней скучновато? Черный заголовок, белый фон. Изменим их.
Изменим стандартный черный цвет текста в заголовке на синий («Blue»), а также украсим фон страницы графикой («наклеим обои»).
Для этого используем два атрибута тега BODY:
Атрибут TEXT тега <BODY> | <BODY TEXT=”цвет”> |
Атрибут BACKGROUND тега <BODY> | <BODY BACKGROUND=”файл”> |
Пример:
<BODY TEXT=”Blue” BACKGROUND=”fon. gif”>
Практическое задание
· Войти в папку Мои документы / Факультатив WEB / Фоны и скопировать файл fon.jpg в свою личную папку
· Дополнить тэг <BODY> в тексте программы.
(Открыть текст программы, дополнить, сохранить, закрыть, обновить в Internet Explorer)
Дополнительное практическое задание
· Сделайте текст Сейчас я учусь… курсивом
· Сделайте следующую строку жирным шрифтом.
· Попробуйте сменить фон страницы на другой
· Измените цвет любого текста
