Разработка Web-сайтов с использованием яз
Download
Report
Transcript Разработка Web-сайтов с использованием яз
Разработка Web-сайтов с
использованием языка
разметки гипертекста
HTML
Web-страницы
Создаются с использованием языка
разметки гипертекстовых документов
HTML (Hyper Text Markup Language). В
обычный текстовый документ вставляются
управляющие символы – HTML-тэги,
которые определяют вид Web-страницы при
её просмотре в браузере.
Достоинства Web-страниц
малый информационный объём;
возможность просмотра в различных
операционных системах (ОС).
Для создания Web-страниц используются
простейшие текстовые редакторы. В
качестве такого редактора в Windows можно
использовать стандартное приложение
Блокнот.
Web-сайты
Публикации во Всемирной паутине
реализуются в форме Web-сайтов, которые
обычно содержат материал по
определённой теме или проблеме.
Web-сайты состоят из компьютерных
Web-страниц. Сайт должен содержать
систему гиперссылок, которая позволяет
пользователю перемещаться по Webстраницам.
Структура Web-страницы
Тэги
одиночные
<…>
парные (контейнер)
<…>
</…>
Тэги могут записываться как прописными, так и
строчными буквами.
<HTML> </HTML> - открывает/закрывает
HTML-документ.
Без этих тэгов браузер не в состоянии
определить формат документа и правильно
его интерпретировать.
логические части Web-страницы
заголовок
содержание
<HEAD></HEAD> - заголовок Web-страницы, содержит
название документа и справочную информацию о
странице.
<TITLE></TITLE> - название страницы, отображается в
верхней строке окна браузера.
<BODY></BODY> содержание страницы .
Заготовка Web-страницы «Компьютер»
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
Компьютер и ПО
</BODY>
</HTML>
Форматирование текста на Web-странице
Заголовок
От <H1></H1> (самый крупный) до <H6></H6>
(самый мелкий)
Абзац
<P></P> - абзац
Переход на новую строку
<BR> - непарный тэг (для стихов)
Шрифт
<FONT> </FONT>
SIZE=4 – размер шрифта (от 1 до 7)
FASE=“ARIAL” – тип шрифта
COLOR = “RED” - цвет шрифта
Начертание шрифта
<b> жирный текст </b>
<i> наклонный текст </i>
<u> подчеркнутый текст</u>
<tt> текст - имитирующий стиль печатной
машинки </tt>
A можно и всё сразу:
<b><i><u>супервыделенный текст...</u></i></b>
Цвета HTML
Профессиональные дизайнеры используют шестнадцатеричные коды
цветов системы RGB. RGB (сокращенно от Red/Green/Blue) - это
шестизначное число, определяющее цвет. Первые две цифры задают
количество красного цвета, вторые две цифры - зеленого, последние синего.
Мы привыкли к десятичной системе счисления: от 0 до 9.
Шестнадцатеричная СС - это числа от 0 до буквы f.
То есть, самая старшая цифра здесь не 9, a f.
Теперь идем далее. Шестнадцатеричный код для черного цвета будет
такой: 000000
А для белого: ffffff
Желтый цвет будет таким: ffff00.
Можно придумывать разные комбинации цифр таких кодов. Например,
код 12abfe9 соответствует одному из оттенков зеленого цвета.
Цвета HTML
“#ffffff” – белый
“#000000” – черный
“#ff00ff” – пурпурный
“#0000ff” – синий
“#ff0000” – красный
“#00ffff” – голубой
“# ffff00” – желтый
“#00ff00” – ярко-зеленый
“#336699” – темно-голубой
Можно придумывать разные комбинации цифр таких
кодов. Например, код 12abfc9 соответствует одному из
оттенков зеленого цвета. Делайте эксперименты.
Используется это так: text="#код".
Например:
text="#12abf9"
<body bgcolor="#12abf9">
Выравнивание
ALIGN =“left” (right, center)
Горизонтальная линия <HR>
Метка может включать атрибуты SIZE (определяет
толщину линии в пикселях) и/или WIDTH (определяет
размер линии в % от ширины экрана).
Например,
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=8 WIDTH=25%><BR>
Картинки
< IMG SRC="адрес"> - вставка картинки
Замечание. Если ваши картинки находятся в отдельной папке
(рекомендую!), например в папке "fotos", то адрес будет таким:
<IMG SRC="fotos/имя_файла.jpg">
Дополнительные (необязательные) атрибуты тега <IMG>:
1. ALIGN - позиционирует картинку. Значения: left, right, center.
Например, отобразить
картинку справа в браузере можно так:
<IMG SRC="fotos/имя_фaйлa.jpg" ALIGN="right">
2. ALT - всплывающая подсказка при наведении мышки на картинку, т.е.
ALT="Moe фото".
3. BORDER - ширина рамки вокруг картинки. Значения: от 1 до ...
Пример: BORDER="l".
Гиперссылки
<A HREF=“Адрес”>Указатель ссылки</A>
<A HREF=“Fale.html”>Указатель ссылки</A>
Созданную Web-страницу необходимо
сохранить в виде файла под именем
index.htm. В качестве расширения файла
Web-страницы можно также использовать
html. Рекомендуется создать для
размещения сайта специальную папку и
сохранять все файлы разрабатываемого
сайта в этой папке.
Списки на Web-страницах
Нумерованные <OL> </OL>
<OL>
<LI>первый элемент
<LI>второй элемент
<LI>третий элемент
</OL>
Маркированные <UL> </UL>