основы Html

Основы HTML экспресс-курс Александр Бабич [email_address]

Для чего это все? Эта презентация содержит начальные сведения о языке разметки гипертекста, достаточные для создания простейших статических сайтов Также рассказано о тех программных средствах, которые можно (и нужно) использовать начинающему веб-дизайнеру Этот экспресс-курс (2 часа) не сделает из Вас профессионала, но покажет, в каком направлении развиваться

План курса – часть І Введение в HTML Общие сведения WWW и HTML Теги HTML Структура HTML -документа Форматирование Определение функциональных разделов документа Управление стилем шрифта Определение элементов фразы Создание списков Гипертекстовые ссылки и якоря Мультимедиа и HTML Рисунки Мультимедийные объекты Создание таблиц Фреймы Вопросы качества Web- страниц

План курса – часть ІІ ПО для веб-дизайна Редакторы тегов ACE HTML 1 st Page Metacreations Web studio Графика Adobe PhotoShop Adobe Image Ready Adobe Image Styler Irfan Viewer Serif Photo Plus Дополнительное ПО Express Thumbnail Creator Master Album Maker Lite Заключение

Введение в HTML Общие сведения

WWW, HTTP, страницы и сайты 90-е – появился протокол HTTP (Hyper Text Transfer Protocol) служба WWW (World Wide Web) – всемирная паутина (сеть) серверов HTTP , передающих файлы через Интернет Web- страницы – текстовые файлы, написанные на языке HTML (Hyper Text Markup Language) публикуются в Интернете путем размещения на серверах HTTP (Web -серверах ) имеют расширение .htm , .html Web- сайт – группа Web- страниц, связанные тематически, однотипно оформленные и снабженные навигацией

Что такое HTML Hyper Text Markup Language язык разметки гипертекста На данный момент – HTML 4.0 Гипертекст – текст, содержащий специальные коды (тэги, tags) , управляющие форматированием, включающие рисунки и мультимедийные объекты, содержащие ссылки на другие документы HTML – «родственник» языков программирования, но в отличие от них крайне прост

Браузеры HTML- документы отображаются с помощью специальной программы – браузера , которая отображает (рендерит) информацию, содержащуюся в документе в соответствии с тегами разметки Браузеров очень много Microsoft Internet Explorer (MSIE) Maxxton (MyIE) Mozilla Firefox Opera Off by One Linx …

Отличие HTML -разметки от верстки документа В MS Word , создавая документ мы однозначно определяем, как будет выглядеть документ при печати на определенном принтере и на бумаге выбранного формата Создавая Web-страницу , мы не знаем , какой компьютер будет использован для его просмотра современный браузер для Windows или Linux ? консольный браузер? синтезатор речи? устройство вывода азбукой Брайля? Сколько цветов используется – 16, 256, High Color , True Color? HTML – не для форматирования, а для функциональной разметки текста определение назначения фрагментов текста

Теги 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 начинаются с  комментарии не могут содержать другие теги! Пример: <!– Версия документа 1.0 от 18.05.2006 -- >

Структура HTML -документа HTML- документ – обычный текстовый файл может создаваться в любом текстовом редакторе, например, «Блокноте» Структура HTML- документа строго фиксирована: начинается с <HTML> и заканчивается </HTML> Состоит из раздела заголовков и тела документа раздел заголовков ограничен тэгами <HEAD> </HEAD> между ними помещают, например заголовок документа между тэгами <TITLE> и </TITLE> сам текст документа располагается в его теле и ограничивается тэгами <BODY> и </BODY> все эти тэги можно опустить – современные браузеры «догадаются», где они должны быть, но лучше такого не делать!

Простейший документ <HTML> <HEAD> <TITLE> Моя первая страничка </TITLE> </HEAD> <BODY> Привет всем! Смотрите - это моя первая Web- страничка! </BODY> </HTML>

Вопросы Что такое веб-страница? Веб-сайт? Что такое браузер? Какие браузеры Вы знаете? Каким пользуетесь? В чем разница между созданием документа в текстовом процессоре и созданием HTML- документа? Что отобразится в браузере, если он обнаружит в документе незнакомый тэг? Можно ли указывать атрибуты в закрывающих тэгах? Как изменится отображение документа браузером, если в веб-странице убрать тэги <HTML> и <BODY> ?

Задание 1 Запустите «Блокнот» Пуск > Все программы > Стандартные > Блокнот Наберите текст примера, приведенный ранее Сохраните под именем Simple.html Закройте «Блокнот» Откройте папку, в которую Вы сохранили файл, в «Проводнике» Пуск > Все программы > Стандартные > Проводник Дважды щелкните левой кнопкой мыши на сохраненном файле Наслаждайтесь! Обратите внимание на строку заголовка браузера!

Введение в HTML Форматирование

Определение функциональных разделов документа Два вида функциональн ых разделов - заголовки и абзацы В HTML имеется шесть уровней заголовков – от <H1> и </H1> до <H6> и </H6> Абзацы ограничиваются тэгами <P> и </P> (закрывающий тэг необязателен) при просмотре абзацы отделяются друг от друга пустой строкой и не содержат отступов «лишние» пробелы и пустые строки игнорируются Тэг <HR> создает горизонтальную линию <BR> позволяет принудительно перейти на новую строку

Пример документа с форматированием <HTML> <HEAD> <TITLE> Обо мне </TITLE> </HEAD> <BODY> <H1> Вася Пупкин </H1> <HR> <P> Добрый день! <BR> Меня зовут Вася Пупкин.Я учусь в ППК НТУ «ХПИ» и хочу рассказать вам о себе. </P> <P> Недавно мне исполнилось 16 лет и я чувствую себя ужасно взрослым. </P> <HR> </BODY> </HTML>

Задание 2 По аналогии с примером на предыдущем слайде, создайте страницу с информацией о себе Усложните ее, создав разделы с заголовками второго уровня, такие как «Автобиография», «Образование», «Квалификация», «Увлечения» Наслаждайтесь просмотром!

Управление стилем шрифта Тэг <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> делают текст между ними перечеркнутым В HTML имеется еще целый ряд подобных тэгов

Пример <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> 16 лет </U> и я чувствую себя ужасно взрослым. </P> <HR> </BODY> </HTML>

Задание 3 Используя тэги управления стилем шрифта и форматирования измените страничку с информацией о себе, созданную при выполнении предыдущего задания Наслаждайтесь просмотром!

Определение элементов фразы Похожи на тэги форматирования, но они действительно описывают реальные свойства текста Закрывающий тэг обязателен! <CITE> и </CITE> указывают, что текст является цитатой из другого источника <CODE> и </CODE> - исходный текст программы <KBD> и </KBD> - текст, введенный с клавиатуры <SAMP> и </SAMP> - пример вывода компьютерной программы <VAR> и </VAR> - описание переменных или параметров программы <EM> и </EM> - выделение текста <STRONG> и </STRONG> - сильное выделение

Задание 4 Пользуясь тэгами, представленными на предыдущем слайде, создайте страничку с описанием работы такой программы на языке Pascal: Uses WinCRT; Var a,b:Real; Begin write(‘a=‘); readln(a); write(‘b=‘); readln(b); writeln(‘a+b=‘, a:8:3) readkey; donewincrt; End.

Создание списков 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> ? Какие два вида шрифтов можно «безопасно» использовать в веб-страницах? Каким тэгам аналогичны по воздействию <EM> и <STRONG> ? Допускаются ли HTML вложенные списки? Какие применения списку определений Вы можете предложить?

Задание 5 Аналогично примерам предыдущих слайдов создайте страницу со списком определений терминов из этой презентации Создайте страницу с нумерованным списком студентов группы Создайте страницу с маркированным списком дел на день

Введение в HTML Гипертекстовые ссылки и якоря

Гипертекстовые ссылки Гиперссылки – ссылки на другие, связанные Web-страницы или другие файлы тэги <A> и </A> ограничивают текст ссылки обязателен атрибут HREF= . Его значением является адрес документа ( URL ), на который указывает ссылка : <A HREF=“http://www.microsoft.com/”>Microsoft</A> в браузере текст ссылки отображается синим и подчеркнутым при щелчке на ссылке происходит переход по заданному адресу здесь описаны внешние ссылки – ссылки на документы, находящиеся на других серверах если документ находится на том же сервере ( внутренняя ссылка ) можно указывать относительный путь : <A HREF=“../Images/Me.jpg”> Мое фото </A>

Якоря Гипертекстовая ссылка может указывать на определенное место в тексте страницы, если в него встроить якорь тэги <A> и </A> , но вместо HREF= используется NAME= значение этого атрибута – имя якоря латинские буквы и цифры без пробелов Для ссылки на имеющийся якорь надо указать имя якоря в конце адрес через #

Пример <HTML> <HEAD> <TITLE>Решения проблем</TITLE> </HEAD> <BODY> <A NAME=“top”> <H1>Где взять драйвера?</H1> <HR> <P> Новые версии драйверов устройств и обновления Windows можно найти на Web- сайте компании производителя – <A HREF=“http://www.microsoft.com/”>Microsoft Corp.</A> <P> Некоторые полезные программы можно также найти на <A HREF=“my.html”> моей домашней странице .</A> <P> Также очень поможет в этом деле поиск в <A HREF=“http://www.google.com/”> Google</A>. <HR> <P ALIGN=“RIGHT”> <A HREF=“#top”> в начало страницы </A> </BODY> </HTML>

Вопросы Что такое гиперссылка? В чем разница между внутренними и внешними ссылками? Для чего можно применить якоря? Какие атрибуты необходимы для тэга <A> ? Что будет отображено в браузере в результате отработки тэга <A HREF=“http://www.microsoft.com/”></A> ?

Задание 6 Снабдите страничку с информацией о себе ссылкой на сайты колледжа и Бабича А.В ( www.ppc-kpi.ukrbiz.net и www.alexander-babich.narod.ru соответсвенно) По аналогии с предыдущим примером сделайте в конце странички о себе ссылку для перехода в начало страницы

Введение в HTML Мультимедиа и HTML

Вставка рисунков Одиночный тэг <IMG> обязательный атрибут SRC= . Его значение – адрес изображения в абсолютной или относительной форме: <IMG SRC=“c:\WINDOWS\Кофейня.bmp”> атрибуты WIDTH= и HEIGHT= позволяют задать ширину и высоту изображения на странице: <IMG SRC=“c:\WINDOWS\Кофейня.bmp” WIDTH=“30” HEIGHT=“30”> атрибут ALT= позволяет задать альтернативный текст, который отображается, если браузер не может показать рисунок или просто при наведении на него мыши: <IMG SRC=“c:\WINDOWS\Кофейня.bmp” ALT=“ Чашка кофе ”> рисунок, как и текст, может быть гиперссылкой. Так делаются графические кнопки: <A HREF=“page2.html”><IMG SRC=“next.jpg”></A>

Вставка мультимедийных объектов самый простой способ – сделать гиперссылку на звук или видео Внедрение видео или звука непосредственно в Web- страницу – одиночный тэг <EMBED> обязательный атрибут SRC= , значение которого - абсолютный или относительный путь к файлу можно также использовать WIDTH= или HEIGHT= , чтобы определить размер области на страницы, отведенной под воспроизведение: <EMBED SRC=“File.avi” WIDTH=“200” HEIGHT=“200”>

Вопросы С помощью какого атрибута тэга <IMG> можно задать альтернативный текст? Вам необходимо ограничить область воспроизведения видео на веб-странице размером 150х150. Как этого добиться? Можно ли использовать альтернативный текст для мультимедиа объектов?

Задание 7 Добавьте в страничку с информацией о себе свою фотографию. Добавьте в страничку с информацией о себе гиперссылку на .MP3 - файл с любимой песней и внедрите в страницу любимый фильм. Наслаждайтесь!

Введение в HTML Создание таблиц

Таблицы Таблица заключается между тегами <TABLE> и </TABLE> между ними один раз может встретиться пара тэгов <CAPTION> и </CAPTION> , между которыми находится заголовок страницы каждая строка таблицы находится между <TR> и </TR> строки состоят из ячеек, содержимое каждой из которых находится внутри тэгов <TD> и </TD> внутри ячейки возможны любые тэги существует много атрибутов таблиц (см. пример)

Зачем нужны таблицы? Для отображения данных табличной структуры Для точного размещения элементов на странице Для размещения в ячейках частей большого изображения, что ускоряет его загрузку Adobe Image Ready

Пример <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> ? Какие атрибуты тэга <TABLE> Вы знаете? Для чего еще, кроме их прямого назначения, применяют таблицы в веб-дизайне?

Задание 8 Дополните страничку с информацией о себе таблицей с оценками по различным предметам, полученным в прошлую сессию (№, Название предмета, Оценка) Переделайте страничку с информацией о себе так, чтобы вся информация была помещена в таблицу, а слева от текста было Ваше фото

Введение в HTML Фреймы

Фреймы HTML позволяет разбить окно браузера на несколько частей - фреймов , в каждой из которых будет отображаться отдельный документ Для создания фреймов используется особый документ, не содержащий тела документа и какого-либо текста вообще: описание фреймов между тегами <FRAMESET> и </FRAMESET> размеры и порядок размещения фреймов в окне документы, загружаемые в каждый фрейм обязательный атрибут COLS= или ROWS= , которые задают разбиение окна на столбцы и строки соответственно размеры строк (столбцов) задаются в процентах от ширины окна или пикселах , * означает все оставшееся место

Фреймы Между тэгами <FRAMESET> и </FRAMESET> располагают тэги <FRAME> , определяющие документы, загружаемые в отдельные области обязательный атрибут SRC= , который задает документ, загружаемый в этот фрейм Может использоваться атрибут NAME= для задания имени фрейма и адресации гиперссылок Тэги <FRAMESET> могут быть вложенными Существуют также «плавающие фреймы» <IFRAME> , которые можно расположить в любом месте страницы, хоть по центру ее синтаксис – подобен описанному выше

Пример – index.html <HTML> <HEAD> <TITLE> Мои фото </TITLE> </HEAD> <FRAMESET ROWS=“15%,*”> <FRAME SRC=“Title.html”> <FRAMESET COLS=“15%,*”> <FRAME SRC=“Menu.html”> <FRAME SRC=“Content.html” NAME=“Main”> </FRAMESET> </FRAMESET> </HTML>

Пример – Title.html <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <H1> Мои любимые фото </H1> </BODY> </HTML>

Пример – Menu.html <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <A HREF=“photo1.jpg” TARGET=“Main”> Фото1 </A> <BR> <A HREF=“photo2.jpg” TARGET=“Main”> Фото 2</A> <BR> <A HREF=“photo3.jpg” TARGET=“Main”> Фото 3</A> <BR> </BODY> </HTML>

Пример – Content.html <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <P> Для просмотра фотографий щелкайте на ссылках слева </BODY> </HTML>

Вопросы Что такое фрейм? Могут ли тэги <FRAMESET> быть вложенными? Для чего предназначен атрибут NAME= тэга <FRAME> ? Приведите пример использования тэга <IFRAME> . Когда такой вид фрейма может быть полезен? Почему использование фреймов считается плохим тоном в веб-дизайне?

Задание 9 Проверьте работоспособность примера, приведенного на четырех предыдущих слайдах Переделайте страничку с информацией о себе так, чтобы она имела фреймовую структуру c о ссылками на «Автобиографию», «Образование», «Квалификацию» и «Увлечения» Сделайте фотоальбом по образцу примера, но ссылками должны служить уменьшенные копии изображений

Вопросы качества Web- страниц Содержание документа важнее, чем его оформление Хорошо продуманная навигация (система ссылок) должна позволять переходить от страницы к странице сайта без использования кнопок «Вперед» и «Назад» в браузере Не следует использовать самые новые тэги и стандарты Не злоупотребляйте элементами оформления, цветами, шрифтами, графикой и мультимедиа Отлаживайте страницы, проверяйте их работоспособность до публикации на сервере Если фантазии не хватает, пользуйтесь шаблонами, например с www.freelayouts.com Использование фреймов (по ряду причин) считается плохим тоном в Web -дизайне Более важная информация должна располагаться в верхней части страницы Всегда указывайте альтернативный текст для картинок Используйте гиперссылки

ПО для веб-дизайна

Виды Web- редакторов Редакторы тэгов написание и правка HTML- кода больше возможностей, но надо знать язык WYSIWYG -редакторы ( What You See Is What You Get ) визуальное создание страниц не требуются специальные знания меньше возможностей и больший размер файлов используются лишь в тех случаях, когда сайт надо сделать быстро MS Word , MS Publisher, MS FrontPage, … www.microsoft.com 

Редакторы тегов ACE HTML www.visicommedia.com есть бесплатная версия беспрецедентный контроль над кодом наилучший выбор 1 st Page www.evrsoft.com абсолютно бесплатен содержит коллекцию Java- скриптов несколько режимов Metacreations Web studio www.snkey.net наиболее красивый и удобный, но, увы не бесплатен чем-то похож на ACE HTML Pro и … Borland Delphi на него обязательно надо посмотреть!

Графические редакторы Adobe PhotoShop лучший, но не бесплатный графический редактор лучше использовать «свободный» GIMP Adobe Image Ready программа для оптимизации веб-графики и «нарезки» больших изображений для ускорения их загрузки через таблицы тоже стоит денег Adobe Image Styler www.adobe.com создание веб-графики, кнопок и Rollover- графики прекрасная вещь, но платная Irfan Viewer www.irfanview.com удобный и простой «свободный» графический вьювер подойдет для несложного редактирования Serif Photo Plus www.serif.com еще одна бесплатная замена PhotoShop’ у На худой конец сгодится и MS Paint!

Дополнительное ПО Express Thumbnail Creator www.express-soft.com отличная, хоть и не бесплатная вещь для создания веб-галерей проста в использовании пробной версии вполне хватит для создания всего, что нужно Master Album Maker Lite «свободная» среда для создания фотоальбомов очень удобная и красивая вещь + программы для подбора цветовой гаммы, создания анимированных GIF -изображений и т.д.

Вопросы Какие виды веб-редакторов Вы знаете? Приведите пример визуального веб-редактора не от Microsoft. Каково Ваше личное отношение к использованию визуальных редакторов? Какие редакто ры тэгов Вы знаете? Каким пользуетесь? Какое вспомогательное ПО используете при создании веб-страниц?

Задание 10 Установите и запустите в «режиме эксперта» 1 st Page 2000 Создайте в нем страницу с информацией о вашей группе. Используйте инструментальную панель в верхней части окна программы Наслаждайтесь!

Некоторые напутствия Если даже у Вас нет специального ПО, используйте «Блокнот» Перенимайте хорошие идеи Вид > Просмотр HTML -кода Используйте готовые шаблоны www.freelayouts.com Изучите Java Script Больше практикуйте!

Источники Симонович С.В., Евсеев Г.А., Алексеев А.Г. Специальная информатика: Учебное пособие. – М.: АСТ-ПРЕСС: Инфорком-Пресс, 1998 Личный опыт

основы Html

More Related Content

What's hot (20)

Similar to основы Html (20)

More from Alexander Babich (20)

основы Html