- Преподавателям
advertisement
Основы языка разметки гипертекста HTML ВВЕДЕНИЕ В HTML Общие сведения о HTML Теги HTML Структура HTML -документа Форматирование Определение функциональных разделов документа Управление стилем шрифта Определение элементов фразы Создание списков Гипертекстовые ссылки и якоря Мультимедиа и HTML Рисунки Мультимедийные объекты Создание таблиц ЧТО ТАКОЕ HTML? Hyper Text Markup Language – это язык разметки гипертекста – На данный момент в разработке версия HTML 5.0 – Гипертекст – текст, содержащий специальные коды (теги, tags) , управляющие форматированием, включающие рисунки и мультимедийные объекты, содержащие ссылки на другие документы – HTML – «родственник» языков программирования, но в отличие от них крайне прост БРАУЗЕРЫ HTML- документы отображаются с помощью специальной программы – браузера, которая отображает информацию, содержащуюся в документе в соответствии с тегами разметки – На данный момент самыми распространенными браузерами являются Opera, Mozilla Firefox, Google Chrome, Internet Explorer, Safari ТЕГИ HTML Теги – коды HTML, с помощью которых выполняется разметка текста Тег представляет собой набор символов между угловыми скобками < … > Регистр букв в тега не имеет значения, но принято использовать большие буквы Теги, воздействующие на часть документа бывают открывающие и закрывающие : <…> … </…> Теги, дающие разовый эффект в месте их появления в закрывающей части не нуждаются Если использован тег, отсутствующий в HTML или не поддерживаемый браузером, он игнорируется В браузере теги не отображаются (но влияют на отображение документа), их можно увидеть в «исходном коде страницы» Примеры тегов <Title> <Body> </A> <TABLE> <IMG> </Center> Примеры парных тегов <HTML> </HTML> <B> </B> <HEAD> </HEAD> <H3> </H3> <ADDRESS> </ADRESS> <LI> </LI> Примеры одиночных тегов <BR> <HR> <META> <BASEFONT> <FRAME> <INPUT> АТРИБУТЫ ТЕГОВ Открывающие теги могут содержать атрибуты, влияющие на эффект, производимый тегом это дополнительные ключевые слова, отделенные от содержимого тега и друг от друга пробелами некоторые атрибуты требуют задания значения атрибута значение отделяется от атрибута знаком = значение атрибута должно быть в кавычках, но иногда их можно не писать Закрывающие теги никогда не имеют атрибутов! Примеры тегов с атрибутами <BODY BGCOLOR=“#000000” TEXT=“#FFFFFF” BACKGROUND=“RAIN.JPG”> <OPTION SELECTED> <FRAME SRC=“file.html” NORESIZE> СТРУКТУРА HTML-ДОКУМЕНТА Структура HTML- документа строго фиксирована: • начинается с <HTML> и заканчивается </HTML> • cостоит из раздела заголовков и тела документа • раздел заголовков ограничен тегами <HEAD> </HEAD> • между ними помещают, например заголовок документа между тегами <TITLE> и </TITLE> • сам текст документа располагается в его теле и ограничивается тегами <BODY> и </BODY> ПРОСТЕЙШИЙ ДОКУМЕНТ <HTML> <HEAD> <TITLE> Моя первая страничка </TITLE> </HEAD> <BODY> Привет всем! Смотрите - это моя первая Web- страничка! </BODY> </HTML> Инструкция по работе с HTML Наиболее простой формой работы с HTML является использование блокнота. ШАГ 1. Откройте «Пуск», далее «Все программы», далее «Стандартные», далее «Блокнот». Шаг 2. Скопируйте теги с прошлого слайда и вставьте их в блокнот Шаг 3. В блокноте нажмите пункт «Файл», далее «Сохранить как». В открывшемся окне дайте имя файлу «Моя первая веб-страница» и ИЗМЕНИТЕ расширение файла с .txt на .html Шаг 4. В месте, куда Вы сохранили файл Моя первая веб-страница.html, откройте его с помощью любого браузера РЕЗУЛЬТАТ Вопросы для самопроверки Что такое веб-страница? Что такое веб-сайт? Что такое браузер? Какие браузеры Вы знаете? Что отобразится в браузере, если он обнаружит в документе незнакомый тег? Можно ли указывать атрибуты в закрывающих тегах? Как изменится отображение документа браузером, если в веб-странице убрать теги <HTML> и <BODY>? ФОРМАТИРОВАНИЕ ОПРЕДЕЛЕНИЕ ФУНКЦИОНАЛЬНЫХ РАЗДЕЛОВ ДОКУМЕНТА Существует два вида функциональных разделов заголовки и абзацы •В HTML имеется шесть уровней заголовков – от <H1> и </H1> до <H6> и </H6> •Абзацы ограничиваются тегами <P> и </P> – при просмотре абзацы отделяются друг от друга пустой строкой и не содержат отступов – «лишние» пробелы и пустые строки игнорируются •тег <HR> создает горизонтальную линию •<BR> позволяет принудительно перейти на новую строку Пример документа с форматированием <HTML> <HEAD> <TITLE> О преподавателе</TITLE> </HEAD> <BODY> <H1> Екатерина Александровна Поддячая</H1> <HR> <P> Добрый день! <BR> Меня зовут Екатерина Александровна. Я работаю преподавателем дисциплины «Современные интернеттехнологии» в Институте рекламы и связей с общественностью. </P> <P> Сферой моих интересов является изучение особенностей маркетинговых коммуникаций в Интернете и оценка их эффективности</P> <HR> </BODY> </HTML> Посмотрите результаты данного кода в браузере (см. инструкцию на слайде 13) Задание По аналогии с примером на предыдущем слайде, создайте страницу с информацией о себе. Усложните ее, создав разделы с заголовками второго уровня, такие как «Автобиография», «Образование», «Профессиональные интересы», «Увлечения». МЕТА-ТЕГИ Для хранения информации о документе в том виде, в котором ее могут получить поисковики, используйте следующие атрибуты тега <meta>: <meta name “Keywords” content=“……..”> <meta name “Description” content=“……...”> Данные теги помещаются внутри тегов <HEAD> </HEAD> УПРАВЛЕНИЕ СТИЛЕМ ШРИФТА Тег <FONT> задает размер, цвет и начертание шрифта и должен иметь хотя бы один из атрибутов: SIZE= , COLOR= , FACE= – SIZE= задает размер шрифта • от 1 до 7 • по умолчанию 3 • может быть относительным, например, -2 или +3 – COLOR= задает цвет шрифта • ключевые слова black, red, white… • шестнадцатеричные значения #000000, #FF0000, #FFFFFF ,… – FACE= задает вид шрифта • «безопасно» устанавливать его значение в Arial или Times New Roman, потому что неизвестно, какие шрифты есть на компьютере пользователя, просматривающего эту страницу Одиночный тег <BASEFONT> задает параметры шрифта для всего документа в целом ЕЩЕ О ФОРМАТИРОВАНИИ <B> и </B> делают текст между ними полужирным <I> и </I> делают текст между ними курсивным <U> и </U> делают текст между ними подчеркнутым <S> и </S> делают текст между ними перечеркнутым <TT> и </TT> эффект пишущей машинки Пример <HTML> <HEAD> <TITLE> О преподавателе </TITLE> </HEAD> <BODY> <BASEFONT SIZE=4 FACE=“Arial”> <FONT SIZE=+2 COLOR=“Red”> Екатерина Александровна Поддячая </H1> <HR> <P><B> Добрый день! </B><BR> Меня зовут Екатерина Александровна. Я работаю преподавателем дисциплины <I> «Современные интернеттехнологии» </I> в Институте рекламы и связей с общественностью. </P> <P> Сферой моих интересов является изучение особенностей <U>маркетинговых коммуникаций в Интернете</U> и оценка их эффективности </P> <HR> </BODY> </HTML> Посмотрите результаты данного кода в браузере (см. инструкцию на слайде 13) ЦВЕТ Фоновый цвет задается в теге <Body>, он может указываться по имени или кодом #000000 – Цвет фона определяется атрибутами BGCOLOR • <BODY BGOLOR= “GREEN”> – Цвет всего текста – TEXT • <BODY BGOLOR= “GREEN” TEXT= “BLUE”> СОЗДАНИЕ СПИСКОВ HTML использует три вида списков: – упорядоченные (нумерованные) • <OL> и </OL> – неупорядоченные (маркированные) • <UL> и </UL> – элементы списков заключаются между тегами • <LI> и </LI> – списки определений • <DL> и </DL> • определяемые термины помечаются тегом <DT> • определения – тегом <DD> Пример упорядоченного и неупорядоченного списка <H1> Устройства компьютера </H1> <UL> <LI> Внешние <OL> <LI> Принтер <LI> Сканер <LI> Монитор </OL> <LI> Внутренние </UL> Пример списка определений • • • • <H1> Компьютерные стандарты </H1> <DL> <DT><STRONG>MIDI <DD> Стандарт подключения к компьютеру музыкальных инструментов <DT><STRONG>MPC • <DD> Стандарт, описывающий требования к мультимедийному компьютеру <DT><STRONG>OLE • <DD> Технология связывания и внедрения объектов от Microsoft • </DL> Вопросы • Сколько уровней заголовков имеется в HTML? • Что будет отображено в браузере в результате обработки тегов <HR> Добрый день! </HR> ? • Какие два вида шрифтов можно «безопасно» использовать в веб-страницах? • Какие применения списку определений Вы можете предложить? Задание Аналогично примерам предыдущих слайдов – создайте страницу с нумерованным списком профессиональных интернетресурсов – создайте страницу с маркированным списком дел на день ГИПЕРТЕКСТОВЫЕ ССЫЛКИ Гипертекстовые ссылки Гиперссылки – ссылки на другие, связанные вебстраницы или другие файлы • теги <A> и </A> ограничивают текст ссылки • обязателен атрибут HREF= Его значением является адрес документа (URL), на который указывает ссылка <A HREF=“http://www.microsoft.com/”>Microsoft</A> • в браузере текст ссылки отображается синим и подчеркнутым • при щелчке на ссылке происходит переход по заданному адресу • здесь описана внешняя ссылка – ссылка на документ, находящийся на другом сервере • если документ находится на том же сервере, то это внутренняя ссылка Пример <HTML> <HEAD><TITLE>Ссылки в пределах одного документа</Title> </HEAD> <BODY>Здесь используются текстовые ссылки в пределах одного и того же документа. При щелчке на ссылке окно браузера будет прокручиваться до тех пор, пока не появится соответствующий ссылке якорь. <P> <H2>Содержание</H2> <P><P><A HREF= “#Глава1”>Глава1.Основы HTML</A> <BR><A HREF= “#Глава2”>Глава2.Примеры программ</A> <P><P> <H2><A NAME= “Глава1”>Глава1</A>Основы HTML</H2> В этой главе мы собираемся рассмотреть основные элементы языка программирования HTML. На языке программирования HTML создаются документы, которые могут быть опубликованы в Интрнете. После изучения основных конструкций языка мы подробно рассмотрим примеры программ (<A HREF= “#Глава2”>см. Главу 2.</A>) <P> <H2><A NAME= “Глава2”>Глава 2.</A>Примеры программ</H2> Здесь мы рассмотрим примеры программ с использованием элементов языка, которым посвящена <A HREF= “#Глава1”>Глава 1.</A> <BODY> </HTML> Вопросы Что такое гиперссылка? В чем разница между внутренними и внешними ссылками? Какие атрибуты необходимы для тега <A> ? Что будет отображено в браузере в результате отработки тега? <A HREF=“http://www.microsoft.com/”>ссылка на внешний ресурс</A> Задание Снабдите страничку с информацией о себе ссылкой на сайт ИОДО и НГПУ и свой аккаунт Вконтакте. Мультимедиа и HTML ВСТАВКА РИСУНКОВ Одиночный тег <IMG> – обязательный атрибут SRC= – Его значение – адрес изображения в абсолютной или относительной форме: • <IMG SRC=“c:WINDOWSКофейня.bmp”> – атрибуты WIDTH= и HEIGHT= позволяют задать ширину и высоту изображения на странице: • <IMG SRC=“c:WINDOWSКофейня.bmp” WIDTH=“30” HEIGHT=“30”> ВСТАВКА РИСУНКОВ – атрибут ALT= позволяет задать альтернативный текст, который отображается, если браузер не может показать рисунок или просто при наведении на него мыши: • <IMG SRC=“C:\Users\Александр\Desktop\ИРСО\ Кофейня.bmp” ALT=“ Чашка кофе ”> – рисунок, как и текст, может быть гиперссылкой. Так делаются графические кнопки: • <A HREF=“page2.html”><IMG SRC=“next.jpg”></A> Есть два типа ссылок: абсолютная и относительная -абсолютная, в которой прописана адресная часть (http://nspu.ru) -относительная, в которой отсутствует общая адресная часть (iode.nspu.html). Применительно к мультимедиа лучше использовать относительные ссылки (изображение.jpg), а не абсолютные (C:\Users\Александр\Desktop\ИРСО\ Кофейня.bmp Кофейня.bmp). Но для этого нужно все создаваемые страницы или размещаемые изображения хранить в одной папке данного сайта, только тогда изображения будут отображаться ВСТАВКА МУЛЬТИМЕДИЙНЫХ ОБЪЕКТОВ • Самый простой способ – сделать гиперссылку на звук или видео • Внедрение видео или звука непосредственно в веб-страницу – одиночный тег <EMBED> – обязательный атрибут SRC= , значение которого абсолютный или относительный путь к файлу – можно также использовать WIDTH= или HEIGHT= , чтобы определить размер области на страницы, отведенной под воспроизведение: – <EMBED SRC=“File.avi” WIDTH=“200” HEIGHT=“200”> Вопросы С помощью какого атрибута тега <IMG> можно задать альтернативный текст? Вам необходимо ограничить область воспроизведения видео на веб-странице размером 150х150. Как этого добиться? Задание • Добавьте в страничку с информацией о себе свою фотографию. • Добавьте в страничку с информацией о себе гиперссылку на MP3-файл любимой песни Создание таблиц ТАБЛИЦЫ Таблица заключается между тегами <TABLE> и </TABLE> – между ними один раз может встретиться пара тегов <CAPTION> и </CAPTION> , между которыми находится заголовок страницы – каждая строка таблицы находится между <TR> и </TR> – строки состоят из ячеек, содержимое каждой из которых находится внутри тегов <TD> и </TD> – внутри ячейки возможны любые теги ЗАЧЕМ НУЖНЫ ТАБЛИЦЫ? • Для отображения данных табличной структуры • Для точного размещения элементов на странице Пример <TABLE WIDTH=“90%” BORDER=10 CELLPADDING=2 CELLSPACING=10> <CAPTION> Основные теги таблиц </CAPTION> <TR> <TD><B> Открывающий тег </B> <TD><B> Закрывающий тег </B> <TD><B> Описание </B> <TR> <TD>TABLE <TD ROWSPAN=2> Обязателен <TD> Начало и конец таблицы <TR> <TD>CAPTION <TD> Начало и конец заголовка таблицы <TR> <TD>TR <TD ROWSPAN=2> Необязателен <TD> Начало строки таблицы <TR> <TD>TD <TD> Начало ячейки таблицы </TABLE> Вопросы Можно ли опускать теги </TD> и </TR> ? Что случится, если опустить тег <CAPTION> ? Для чего еще, кроме их прямого назначения, применяют таблицы в веб-дизайне? Задание • Дополните страничку с информацией о себе таблицей с оценками по различным предметам, полученным в прошлую сессию (№, Название предмета, Оценка) • Переделайте страничку с информацией о себе так, чтобы вся текстовая информация была помещена в правой части окна браузера, а в левой части было Ваше фото
