Начальные сведения
Язык HTML
1
Язык HTML
HTML (Hyper Text Markup Language) – язык разметки гипертекста, включает в себя способы оформления гипертекстовых документов.
SGML (Standard Generalized Markup Language) - стандартный язык обобщенной разметки.
XML (Extended Markup Language) - расширяемый язык разметки.
2
Основные понятия
Гипертекст – структура, позволяющая устанавливать смысловые связки между элементами текста и другими документами.
Гиперссылка – фрагмент текста, который является указателем на другой файл или объект.
Web-узел или Web-сайт – группа Web-страниц, принадлежащих одному автору или одному издателю, взаимосвязанных общими гиперссылками.
3
Фрейм (Frame)
Этот термин имеет два значения:
Область документа со своими полосами прокрутки
Одиночное изображение в анимационном графическом файле (кадр)
4
Апплет (Applet)
Программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы
Браузер (Browser)
Программа для просмотра Web-страницы
5
Скрипт или сценарий
(Script)
Программа, включенная в состав Web-страницы, для расширения ее возможностей
CGI (Common Gateway Interface) – общее название программ, которые работая на сервере, позволяют расширить возможности Web –страничек.
6
Что могут содержать Web-страницы:
1). Тексты;
2). Таблицы;
3). Логотипы;
4). Эмблемы;
7
5). Графику
Графические файлы самые распространенные и выгодные в формате .jpg (jpig), менее распространенные gif , но могут содержать не более 256 цветов, редко .png, и .bmp т.к. они имеют большие размеры, а основное правило хорошо оформленной страницы, это быстрая загрузка!!! По этому правилу размер любого графического файла не должен превышать 70 Кбайт или 400-500 пикселей со средним качеством.
Что могут содержать Web-страницы:
8
Графические форматы
GIF - Graphic Interchange Format. При сохранении изображения в этом формате количество используемых цветов не должно превышать 256.
JPEG (JPG) - Joint Photography Experts Group.
Этот формат допускает сохранение изображений, содержащих миллионы цветов.
9
6). Банеры – анимированные и не анимированные, выполняют чаще рекламную роль и роль переключателей на другие страницы.
большие имеют размер 468 х 60 пикселей, средние 120 х 60, маленькие 88 х 31.
Собираются из файлов, созданных, например, в FotoShope. Это может быть текст, сменяющий другой или картинки.
Могут быть анимированные кнопки. Gif- анимация – это, например, при наведении на кнопку появляется надпись
10
7). Мультимедиа –файлы (содержащие музыку (.mid), речь (.wav), видео (.avi).
avi-фрагменты это очень большие файлы, поэтому на Web-страницах они не должны превышать 100 Кбайт
wav- файлы лучше упаковывать, для чего есть специальные программы, которые сжимают в 10 раз (например, 10 секунд звучания это примерно 250 Кбайт можно упаковать до 25 Кбайт)
mid – файлы это в основном инструментальная музыка без голоса. Поддерживаются только браузером Internet Explorer.
.mp3 – файлы тоже можно использовать, но они очень большие(средний размер 5-7 Мбайт, 3 мин 3 Мбайта.
Эти файлы (avi, wav, mid, mp3) практически не сжимаются. Из 3 Мбайт получается приблизительно 2,8 Мбайт.
Gif-файлы сжимаются на 20%.
Что могут содержать Web-страницы:
11
8) Скрипты – программы, которые расширяют возможности страниц, делают ее активной с обратной связью (формы, регистрационные листы, пишутся на языке Jawa и т.п.). Можно делать самим (бегущая строка, падающие буквы и т.п.), а можно брать готовые.
9). Апплеты – программы, которые загружаются с сайта на компьютер клиента при открытии страницы, создают различные видеоэффекты (перелистывание страниц, вихревое движение, эффект пламени, деформации изображения, пишутся на языке Jawa с расширением .class).
Что могут содержать Web-страницы:
12
10). Флэш-анимации – файлы сделанные по технологии макромедиа с расширением .swf. В этих файлах происходит действие, рекламные ролики. (Они быстро открываются, но для их открытия дополнительно к браузеру должна быть установлена специальная программа, позволяющая просматривать эти файлы, если программа не установлена, то как правило выдается запрос на ее загрузку из интернет).
11). Гиперссылки – ссылки на другие станицы.
12). Таблицы стилей –то файлы с расширением .css, в которых прописаны все изменения. Такое оформление придают страницам современный, эстетический стиль.
Что могут содержать Web-страницы:
13
теги HTML
14
HTML - теги
Язык разметки гипертекстовых документов HTML представляет собой совокупность команд, называемых тегами
(от английского tag).
Тег – начальный или конечный маркер элемента записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов (все атрибуты располагаются в начальном теге).
Большинство тегов имеют два компонента: открывающий и закрывающий. Закрывающий компонент имеет то же название, но при записи перед названием ставится символ « / ».
15
Назначение HTML-тегов
Форматирования текста;
Описания кадров и форм;
Форматирования таблиц и списков;
Организации ссылок на другие ресурсы;
Вставки изображений и расширений HTML.
16
Здесь размещается содержимое страницы
Каждый охотник желает знать, где сидит фазан <h1> Роман <h2> Книга
<h3> Том
<h4> Часть
<h5> Глава
<h6> Параграф
Уж небо осенью дышало.
Все реже солнышко блистало.
Короче становился день.
> Уж небо осенью дышало.
Все реже солнышко блистало.
Короче становился день.
>
< Уж небо осенью дышало. Все реже солнышко блистало. Короче становился день. >
указать атрибут bgcolor =“цвет”. Цвет задается также как и для шрифта названием или цифровым кодом.
Пример
… …
61
Вставка рисунков
IMG – тег для создания ссылки на графический файл. С его помощью также можно использовать изображение в гиперссылках, вставлять картинки в таблицы, использовать изображения для фона страницы. Не содержит конечного тега.
Необходимым атрибутом является src- указатель пути к графическому файлу, alt – выводит текст, поясняющий загружаемый рисунок. Высоту и ширину рисунка задают с помощью атрибутов height и width. Рамка вокруг объекта задается атрибутом border.
Пример.
62
рисунок в центре, текст сверху и снизу
рисунок слева
рисунок справа
Примеры обтекания иллюстраций в документе
63
Задание 7 Размещение графики на Web - страницах
Создайте новую страницу в редакторе блокнот.
В элемент укажите «Практическая работа 7» и вашу фамилию.<br /> В элементе <body> задайте атрибут, чтобы цвет фона страницы был черным.<br /> Сделайте надпись «Спокойной ночи» голубым цветом, 6 шрифтом, центральным выравниванием.<br /> Вставьте горизонтальную линию красного цвета.<br /> Сделайте надпись желтого цвета «Приятных сновидений» 8 шрифтом, центральным выравниванием.<br /> Вставьте горизонтальную линию синего цвета толщиной 10 пикселей, длиной 50%, выровните по центру.<br /> Рисунок<br /> <br /> <br /> <b>64</b><br /> <br /> <br /> <b>Задание 8 Размещение графики на Web - страницах</b><br /> <br /> <br /> Создайте новую страницу в редакторе блокнот.<br /> В элемент <title> укажите «Практическая работа 8» и вашу фамилию.<br /> Разместите на странице рисунок <br /> Сделайте надпись к рисунку<br /> Создайте рамку вокруг рисунка шириной 2 пикселя.<br /> Над рисунком поместите заголовок (например «Мир футбола») самого большого размера и выровняйте его по центру.<br /> Вставьте горизонтальную линию синего цвета толщиной 8 пикселей, выровняйте по левому краю по центру.<br /> <br /> <br /> <b>65</b><br /> <br /> <br /> <b>Задание 9 изменение размеров изображения</b><br /> <br /> <br /> Создайте новую страницу в редакторе блокнот.<br /> В элемент <title> укажите «Практическая работа 9» и вашу фамилию.<br /> В элементе <body> задайте атрибут, чтобы цвет фона страницы зеленым.<br /> Вставьте изображение. Задайте его размеры 100x100 пикселей.<br /> Отредактируйте картинку в графическом редакторе так, чтобы рисунок был на прозрачном фоне и добавьте это изображение на вашу страничку.<br /> <br /> <br /> <b>66</b><br /> <br /> <br /> гиперссылки<br /> <br /> <br /> <b>67</b><br /> <br /> <br /> <b>Гиперссылки</b><br /> <br /> <br /> Гиперссылки условно можно разделить на следующие виды:<br /> <b>Внутренние </b>–связывающие документы внутри одного и того же узла;<br /> <b>Внешние </b>– связывающие Web-страницу с документами, не принадлежащими данному узлу;<br /> Гиперссылка на <b>почтовый адрес</b>;<br /> <b>Метки-якоря</b> – позволяющие переходить посетителю на определенные разделы документа.<br /> <br /> <br /> <b>68</b><br /> <br /> <br /> <b>Гиперссылки</b><br /> <br /> <br /> <b> текст для щелчка мыши </b><br /> <b> <img src=“ссылка на рисунок”> </b><br /> <br /> <br /> Внутри тега <b><body></b> используется атрибут, <a href="/laboratornaya-rabota-sozdanie-zakladok-giperssilok-snosok-v-te/index.html" title="Лабораторная работа «Создание закладок, гиперссылок, сносок в текстовом редакторе Word»">задающий цвет гиперссылок</a><br /> <b>link </b>– задает цвет исходных ссылок<br /> <b>vlink </b>– задает цвет посещенных ссылок<br /> <b>alink</b> – задает цвет активных ссылок (цвет при нажатии мыши)<br /> <br /> <br /> Для указания электронной почты и запуска электронной программы используется ссылка:<br /> <<b>A href =“mailto:vvv@mail.ru”> Иванов Иван</b><br /> <br /> <br /> <b>69</b><br /> <br /> <br /> <b>Примеры гиперссылок</b><br /> <br /> <br /> <b> Новые поступления</b> - переход к строке той же страницы, помеченной тегом <br /> <b> примечания</b> - переход на страницу сайта <b>pag2 </b>к строке, помеченной тегом <br /> <b><br />подробности читайте вторая страница <br />- </b>ссылка на другую страницу того же сайта<br /> <br /> <br /> <b>70</b><br /> <br /> <br /> <b><br /> IMG src=log.gif alt=“о нашей фирме” <br />- </b>ссылка на другую страницу того же сайта, но ссылкой является рисунок<br /> <b> Скачать программу </b>-ссылка с подсказкой <b>title</b><br /> <b>тест</b> - внешняя ссылка<br /> <br /> <br /> <b>Примеры гиперссылок</b><br /> <br /> <br /> <b>71</b><br /> <br /> <br /> <b>Примеры гиперссылок</b><br /> <br /> <br /> <b>первая страница </b><br /> <b> yandex</b><br /> <b> Почта </b><br /> <br /> <br /> <b>72</b><br /> <br /> <br /> <b>Задание 10 <a href="/laboratornaya-rabota-sozdanie-zakladok-giperssilok-snosok-v-te/index.html" title="Лабораторная работа «Создание закладок, гиперссылок, сносок в текстовом редакторе Word»">Создание гиперссылок</a></b><br /> <br /> <br /> 1.Создайте две страницы с именами str1.htm str2.htm <br /> 2.В элемениеTITLTRE укажите название странички<br /> 3. Задайте фон первой страницы зеленого цвета, а второй <br /> Синего<br /> 4. На первой странице задайте ссылку на вторую страницу<br /> <b> На вторую страницу</b><br /> 5. На второй странице задайте ссылку на 1 страницу<br /> <b> На вторую страницу</b><br /> 6.Поместите на страницы две разные картинки и проверьте работу гиперссылок<br /> <br /> <br /> <b>73</b><br /> <br /> <br /> <b>Задание 11 Создание гиперссылок</b><br /> <br /> <br /> 1.Создайте к страницам прошлого задания с именами str1.htm str2.htm еще одну страницу str3.htm<br /> 2.Добавьте на первых двух страницах ссылку на 3 страницу?<br /> А на третьей ссылки на две первые<br /> 3. В теге <body> определите текст гиперссылок:<br /> все гиперссылки -белые активные гиперсылки - красные посещенные гиперссылки -серые <br /> 4. На третьей странице задайте ссылки на вторую и первую страницы в виде рисунка кнопки<br /> <b> IMG src=“kn.gif”></b><br /> 5. Задайте бордюр для кнопок=2<br /> 6. Проверьте работу гиперссылок<br /> <br /> <br /> <b>74</b><br /> <br /> </body></body></body> |
Скачать 0.64 Mb.