Text-book HTML 2 by Leonid Flegantov

Основи Web-майстерності

HTML Методичні вказівки та завдання до лабораторних робіт

Частина 2 Елементи логічного форматування. Списки на веб-сторінці. Форматування шрифту веб-сторінки. Гіперпосилання/

Основи Web-майстерності: HTML.

Основи Web-майстерності: HTML. Частина 2. Методичні вказівки та завдання до лабораторних робіт. – 44 c.

Фрагмент методического пособия представлен для ознакомления с продукцией электронного магазина МЕТОДИЧКА http://metodichka.com.ua/ МЕТОДИЧКА – Лучшие пособия для самостоятельного практического обучения!

Основи Web-майстерності: HTML.

Зміст ЗАНЯТТЯ 5 ........................................................................................................ 4 Елементи логічного форматування.................................................................. 5 Основні питання заняття ..................................................................................5 Оформлення цитат. Елементи BLOCKQUOTE, Q, CITE .................................5 Спеціальні елементи EM, STRONG, DFN, KBD, VAR, CODE, SAMP, ACRONYM.......................................................................................................6 На цьому занятті...............................................................................................9 ЗАНЯТТЯ 6 ...............................10ОШИБКА! ЗАКЛАДКА НЕ ОПРЕДЕЛЕНА. Списки .............................................................................................................. 10 Основні питання заняття ................................................................................10 Маркірований список. Елемент UL ................................................................10 Нумерований список. Елемент OL.................................................................12 Список визначень. Елемент DL......................................................................16 На цьому занятті.............................................................................................17 ЗАНЯТТЯ 7 ......................................................................................................18 Форматування шрифту ................................................................................... 18 Основні питання заняття ................................................................................18 Гарнітура шрифту...........................................................................................18 Розмір шрифту................................................................................................19 Колір шрифту .................................................................................................21 Зміна властивостей основного шрифту. Елемент BASEFONT ......................23 Вбудовані стилі шрифту.................................................................................24 Верхні та нижні індекси .................................................................................26 Спеціальні знаки та символи..........................................................................27 На цьому занятті.............................................................................................28 ЗАНЯТТЯ 8 ......................................................................................................29 Гіперпосилання................................................................................................ 29 Основні питання заняття ................................................................................29 Створення гіперпосилань. Елемент A та його атрибути ................................29 Колір гіперпосилань .......................................................................................33 Відносні гіперпосилання. Елемент BASE ......................................................34 Закладки всередині веб-сторінки....................................................................36 Створення електронного довідника веб-майстра...........................................39 На цьому занятті.............................................................................................43

Основи Web-майстерності: HTML.

Ці методичні вказівки є посібником для виконання лабораторних робіт з основ веб-майстерності при підготовці фахівців за напрямом "Web-дизайн". У посібнику докладно розглядаються всі основні можливості та практичні аспекти застосування мови HTML (Hyper Text Markup Language, мова розмітки гіпертекстових документів) до розробки веб-сторінок. За основу взято останню на цей час базову версію HTML 4.01. Частина 2 методичних вказівок містить: елементи логічного форматування (вбудовані стилі), розмітка списків на веб-сторінці, форматування шрифту, створення гіперпосилань. Методичні вказівки можуть бути використані для самостійної роботи всіма, хто хоче самостійно опанувати мову HTML та навчитись її застосовувати для розробки веб-сторінок та веб-сайтів. Посібник побудований таким чином, що при умові ретельного виконання усіх вправ та суворого дотримання методичних вказівок, по закінченні вивчення курсу студент має одержати самостійно створений ним електронний "Довідник Веб-майстра".

Пользуясь эти методическим пособием Вы сможете детально, на прмерах, изучить язык гипетектовой разметки веб-страниц HTML МЕТОДИЧКА http://metodichka.com.ua/

Основи Web-майстерності: HTML.

Заняття 5 Елементи логічного форматування Основні питання заняття - Оформлення цитат. Елементи BLOCKQUOTE, Q, CITE - Спеціальні елементи EM, STRONG, DFN, KBD, VAR, CODE,

SAMP, ACRONYM Оформлення цитат. Елементи BLOCKQUOTE, Q, CITE Елемент BLOCKQUOTE

Задає відображення довгих цитат окремим текстовим блоком. Форматування блоку залежить від типу і налагодження броузера. Елемент Q

Задає відображення коротких цитат. Вміст елемента Q відображається у складі поточного абзаца без розриву рядка. Форматування залежить від типу і налагодження броузера. Елемент CITE

Цитати, оформлені за допомогою елементу CITE відображаються курсивом. Лістинг 5.1. Файл 5.1.html <HTML><HEAD> <TITLE>Оформлення цитат. Елементи BLOCKQUOTE, Q, CITE</TITLE> </HEAD> <BODY> <H1>Оформлення цитат. Елементи BLOCKQUOTE, Q, CITE</H1> <HR> <H3>Елемент BLOCKQUOTE</H3> <P>Як зазначають відомі фахівці: <BLOCKQUOTE> "Всесвітня інформаційна мережа (World Wide Web) 5

Основи Web-майстерності: HTML.

являє собою один з численних додатків, що працюють в Internet - всесвітній мережі комп'ютерних мереж, яка існує з 1961 року." </BLOCKQUOTE> (Цитата оформлена із застосуванням тега BLOCKQUOTE). </P> <H3>Елемент Q</H3> <P>Всесвітня інформаційна мережа (World Wide Web), за визначенням відомих фахівців, - це <Q> "один з численних додатків, що працюють в Internet - всесвітній мережі комп'ютерних мереж." </Q> (Цитата оформлена із застосуванням тега Q). </P> <H3>Елемент CITE</H3> <P>Всесвітня інформаційна мережа (World Wide Web), за визначенням відомих фахівців, - це <CITE> "один з численних додатків, що працюють в Internet - всесвітній мережі комп'ютерних мереж." </CITE> (Цитата оформлена із застосуванням тега CITE). </P> </BODY></HTML> Спеціальні елементи EM, STRONG, DFN, KBD, VAR, CODE, SAMP, ACRONYM Елемент EM

Більшість броузерів виділяють вміст елементу EM курсивом.

Основи Web-майстерності: HTML.

Елемент STRONG

Більшість броузерів виділяють вміст елементу STRONG напівжирним шрифтом. Елемент DFN

Елемент DFN застосовують для логічного виділення деякого терміну або поняття, котрі вперше зустрічаються у документі. Більшість броузерів виділяють вміст елементу DFN курсивом. Елемент KBD

Вміст елементу KBD виділяється моноширинним шрифтом типу Courier, імітуючи текст друкарської машинки. Елемент VAR

Елемент VAR застосовують для виділення ідентифікаторів (імен змінних) у програмуванні. Вміст елементу VAR виводиться курсивом. Елемент CODE

Елемент CODE застосовують, коли необхідно показати, що виділений елемент є кодом деякої комп'ютерної програми. Більшість броузерів виділяють вміст елементу CODE моноширинним шрифтом ипу Courier. Елемент SAMP

Елемент SAMP показує, що текст, якій міститься в ньому, є зразком. Елемент ACRONYM

У цьому елементі розміщують скорочені назви (абревіатури). Наприклад, такі як HTML, WWW тощо. Розшифровка абревіатури дається у вигляді спливаючої підказки, яка задається атрибутом TITLE елементу ACRONYM. Розшифровка абревіатур допомагає пошуковим системам Інтернету більш точно знаходити інформацію, яка відповідає запиту користувача. Лістинг 5.2. Файл 5.2.html <HTML><HEAD> <TITLE>Елементи EM, STRONG, DFN, KBD, VAR, CODE, SAMP, ACRONYM</TITLE> </HEAD> 7

Основи Web-майстерності: HTML.

<BODY> <H1>Елементи EM, STRONG, DFN, KBD, VAR, CODE, SAMP, ACRONYM</H1> <HR> <H3>Елемент EM</H3> <P>Як зазначають відомі фахівці, <EM> "всесвітня інформаційна мережа (World Wide Web) являє собою один з численних додатків, що працюють Internet - всесвітній мережі комп'ютерних мереж, яка існує з 1961 року." </EM> (Цитата оформлена із застосуванням тега EM). </P> <H3>Елемент STRONG</H3> <P>Пам'ятайте головне правило: <STRONG>Будьте уважні !</STRONG> (Оформлено із застосуванням тега STRONG). </P> <H3>Елемент DFN</H3> <P>Це <DFN>поняття</DFN>, яке вперше зустрічається у документі. </P> <H3>Елемент KBD</H3> <P>Приклад: <KBD>Текст введений з клавіатури виділяється моноширинним шрифтом типу Courier.</KBD></P> <H3>Елемент VAR</H3> <P>Ось як броузер відображає вміст елемента VAR: <VAR>dataArray</VAR>.</P> <H3>Елемент CODE</H3> <P>Приклад коду простої програми на мові 8

Основи Web-майстерності: HTML.

JavaScript:<BR> <CODE> var salutation = "Привіт, світе!"; alert(salutation); </CODE> </P> <H3>Елемент SAMP</H3> <P>В англійському алфавіті шість голосних. Вони позначаються літерами <SAMP>A E I O U Y</SAMP>.</P> <H3>Елемент ACRONYM</H3> <P>Абревіатура <ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM> в цьому реченні виділена за допомогою елементу ACRONYM. Наведіть на абревіатуру <ACRONYM TITLE="Hyper Text Markup Language">HTML</ACRONYM> мишу, і одержите спливаючу підказку - розшифровку абревіатури. </P> </BODY> </HTML> На цьому занятті - Оформлення цитат. Елементи BLOCKQUOTE, Q, CITE - Спеціальні елементи EM, STRONG, DFN, KBD, VAR, CODE,

SAMP, ACRONYM

Основи Web-майстерності: HTML.

Заняття 7 Форматування шрифту Основні питання заняття - Гарнітура шрифту - Розмір шрифту - Колір шрифту - Зміна властивостей основного шрифту. Елемент BASEFONT - Вбудовані стилі шрифту - Верхні та нижні індекси - Спеціальні знаки та символи

Гарнітура шрифту Найпростіший спосіб виконати форматування шрифту - розмістити його всередині парного тега FONT, якій має три атрибути: атрибут FACE - задає гарнітуру шрифту; атрибут SIZE - задає розмір шрифту відносно основного базового розміру; атрибут COLOR - задає колір шрифту . Лістинг 7.1. Файл 7.1.html <HTML><HEAD> <TITLE>Гарнітура шрифту</TITLE></HEAD> <BODY> 10

Основи Web-майстерності: HTML.

<H1>Гарнітура шрифту</H1><HR> <H2>Елемент FONT</H2> <H3>Атрибут FACE</H3> <P>Задає гарнітуру шрифта. Наприклад:</P> <FONT FACE="Arial Cyr">Цей шрифт набрано гарнітурой Arial Cyr</FONT><BR> <FONT FACE="Arial Black">Цей шрифт набрано гарнітурой Arial Black</FONT><BR> <FONT FACE="Comic Sans MS">Цей шрифт набрано гарнітурой Comic Sans MS</FONT><BR> <FONT FACE="Courier New">Цей шрифт набрано гарнітурой Courier New</FONT><BR> <FONT FACE="Helvetica">Цей шрифт набрано гарнітурой Helvetica</FONT><BR> <FONT FACE="Impact">Цей шрифт набрано гарнітурой Impact</FONT><BR> <FONT FACE="Monotype Corsiva">Цей шрифт набрано гарнітурой Monotype Corsiva</FONT><BR> <FONT FACE="Palatino">Цей шрифт набрано гарнітурой Palatino</FONT><BR> <FONT FACE="Symbol">Symbol</FONT><BR> <FONT FACE="Tahoma">Цей шрифт набрано гарнітурой Tahoma</FONT><BR> <FONT FACE="Times New Roman">Цей шрифт набрано гарнітурой Times New Roman</FONT><BR> <FONT FACE="Verdana">Цей шрифт набрано гарнітурой Verdana</FONT><BR> <FONT FACE="Serif">Цей шрифт набрано гарнітурой Serif</FONT><BR> <FONT FACE="Sans-Serif">Цей шрифт набрано гарнітурой Sans-Serif</FONT><BR> </BODY></HTML> 11

Основи Web-майстерності: HTML.

Заняття 8 Гіперпосилання Основні питання заняття - Створення гіперпосилань. Елемент A та його атрибути - Колір гіперпосилань. - Відносні гіперпосилання. Елемент BASE - Закладки всередині веб-сторінки.

Створення гіперпосилань. Елемент A та його атрибути Гіперпосилання - це активні елементи веб-сторінки. Якщо клацнути мишею на гіперпосиланні, то відбудеться перехід до іншої вебсторінки або до іншого елементу поточної сторінки, які зв'язані із даним гіперпосиланням. Гіперпосилання створюються за допомогою парного тегу А. Будьякий елемент веб-сторінки, наприклад, текст або зображення, вміщений до контейнера А, автоматично стає активним елементом гіперпосиланням. Атрибут HREF - головний атрибут елементу А. Він звичайно вказує адресу (URL) веб-сторінки (абсолютну або відносну), яка відкриється, коли активізувати гіперпосилання (клацнути на ньому мишею). Або ж вказує ім'я закладки на поточній веб-сторінці, до якої відбудеться перехід при активізації гіперпосилання. Атрибут HREF може також вказувати адресу електронної пошти, до якої звертається дане гіперпосилання, адресу файла зображення тощо. 12

Основи Web-майстерності: HTML.

Правила задання атрибуту HREF

Відносний URL. Якщо зв'язаний файл належить тому ж веб-сайту, що й поточна сторінка, то в атрибуті HREF задається відносна адреса (URL) для зв'язаного файлу - шлях від поточної сторінки до зв'язаного файлу. Наприклад, HREF="1.1.html" або HREF="../images/svin.jpg". Після активізації такого гіперпосилання, зв'язаний файл буде відкритий у вікні броузера. Протокол http. Якщо зв'язаний файл належить іншому веб-сайту, то в атрибуті HREF задається абсолютна адреса (URL) для зв'язаного файлу - з обов'язковим указанням http - протоколу доставки даних. Наприклад, HREF="http://www.poltava.biz/index.html". Після активізації такого гіперпосилання, зв'язаний файл буде відкритий у вікні броузера. Протокол ftp. Якщо зв'язаний файл не можна відкрити у броузері (наприклад, це файли програм, архівні файли, великі графічні, відеофайли, спеціальним чином відформатовані текстові документі, електронні таблиці тощо), то в атрибуті HREF задається відносна або абсолютна адреса (URL) для зв'язаного файлу - з обов'язковим указанням ftp - протоколу доставки даних. Наприклад, HREF="ftp://www.poltava.biz/docs/book.zip". Після активізації такого гіперпосилання, зв'язаний файл можна буде завантажити з Інтернету до комп'ютера користувача. Протокол mailto. Якщо гіперпосилання вказує на адресу електронної пошти, то в атрибуті HREF вказується адреса електронної пошти з обов'язковим указанням протоколу визову електронної пошти mailto. Наприклад, HREF="mailto:webmaster@poltava.biz". Після активізації такого гіперпосилання відбудеться автоматичний запуск програми електронної пошти встановленої на комп'ютері користувача (залежить від налаштування комп'ютера). Атрибут TARGET

Атрибут TARGET вказує, у якому вікні буде відкриватися зв'язаний файл: TARGET="_blank" - зв'язаний файл відкриється у новому вікні броузера. При цьому поточна сторінка, яка викликає цей файл, залишиться відкритою.

Основи Web-майстерності: HTML.

TARGET="_self" - зв'язаний файл відкриється у поточному вікні броузера або у поточному фреймі, де знаходиться веб-сторінка, яка викликає цей файл. При цьому поточна сторінка, яка викликає цей файл, буде закрита. Так само буде, якщо атрибут TARGET не вказаний. TARGET="_parent" - це значення застосовують при роботі з фреймами. У цьому випадку зв'язаний файл відкриється у "батьківському" фреймі, якій містить поточний фрейм, де знаходиться веб-сторінка, яка викликає зв'язаний файл. При цьому "батьківська" фреймова структура, і разом з нею поточна сторінка, яка викликає цей файл, буде закрита. TARGET="_top" - це значення застосовують при роботі з фреймами. У цьому випадку зв'язаний файл відкриється у поточному вікні броузера поверх усієї фреймової структури. При цьому вся фреймова структура, і разом з нею поточна сторінка, яка викликає зв'язаний файл, буде закрита. TARGET="window_name" - це значення вказує ім'я іншого вікна або фрейма, де буде відкрито зв'язаний файл. Атрибут TITLE

Атрибут TITLE задає спливаючу підказку, яка з'являється при наведенні миші на гіперпосилання. Він важливий для пошукових систем Інтернету. Його задання сприяє підвищенню рейтингу вебсторінки у пошукових системах. Лістинг 8.1. Файл 8.1.html <HTML><HEAD> <TITLE>Створення гіперпосилань. Елемент A та його атрибути</TITLE></HEAD> <BODY> <H1>Створення гіперпосилань. Елемент A та його атрибути</H1> <HR> <H2>Атрибути елементу А</H2> <H3>Атрибут HREF</H3> <P>Приклади гіперпосилань: 14

Основи Web-майстерності: HTML.

<P>Клацніть, щоб відкрити <A HREF="1.1.html">простий шаблон веб-сторінки</A> .</P><P>Клацніть, щоб перейти на сторінку про <A HREF="1.2.html">розбиття тексту на абзаци</A> .</P><P>Клацніть, щоб дізнатися про <A HREF="1.3.html">вставку зображень до вебсторінки</A> .</P> <P>Клацніть, щоб відкрити <A HREF="../images/svin.jpg">зображення поросяти</A> .</P> <H3>Правила задання атрибуту HREF</H3> <P>Приклад відносного гіперпосилання: <A HREF="1.1.html">простий шаблон веб-сторінки</A> <P>Приклад абсолютного гіперпосилання (протокол http): <A HREF="http://www.poltava.biz/index.html">Вся Полтава</A> - інформаційно-довідкова система. <P>Приклад абсолютного гіперпосилання (протокол ftp): <A HREF="ftp://www.poltava.biz/docs/book.zip">Текст цієї книги</A> на веб-сайті "Вся Полтава". <P>Адреса електронної пошти (протокол mailto): <A REF="mailto:webmaster@poltava.biz">webmaster@polta va.biz</A> 15

Основи Web-майстерності: HTML.

<H3>Атрибут TARGET</H3> <P> <A HREF="1.1.html" TARGET="_blank">простий шаблон веб-сторінки</A> - відкриється у новому вікні <P> <A HREF="1.1.html" TARGET="_self">простий шаблон веб-сторінки</A> - відкриється у цьому ж вікні <P> <A HREF="1.1.html" TARGET="_parent">простий шаблон веб-сторінки</A> - відкриється у "батьківському" вікні <P> <A HREF="1.1.html" TARGET="_parent">простий шаблон веб-сторінки</A> - відкриється у "верхньому" вікні <H3>Атрибут TITLE</H3> <P><A HREF="1.1.html" TARGET="_blank" TITLE="Відкриється простий шаблон веб-сторінки у новому вікні.">простий шаблон веб-сторінки</A> <P><A HREF="1.1.html" TARGET="_self" TITLE="Відкриється простий шаблон веб-сторінки у цьому ж вікні.">простий шаблон веб-сторінки</A> </BODY></HTML>

МЕТОДИЧКА http://metodichka.com.ua/ Магазин классных методичек!

Гимнастика для глаз А. Динамический комплекс 1.

Движения глаз вправо-влево, 30 секунд.

Движения глаз вверх-вниз, 30 секунд.

Движения глаз по диагоналям, по 30 секунд.

Круговые движения глазами по часовой стрелке, 30 секунд.

Круговые движения глазами против часовой стрелки, 30 секунд.

Упражнения 1-5, только с закрытыми глазами, общая продолжительность до 3 минут.

Б. Самомассаж глаз 1.

Сильно зажмурить глаза на 3-5 секунд, затем широко открыть глаза на 3-5 секунд. Повторить 10-12 раз.

Быстро моргать в течение 1-2 минут.

Смотреть вдаль 3-5 секунд (можно в окно), затем на палец руки в 2530 см от глаз (можно на оконную раму) в течение 3-5 секунд, повторить 10-12 раз.

Тремя пальцами каждой руки легко нажать на верхнее веко, спустя 1-2 секунды снять пальцы. Повторить 5-6 раз.

Круговыми движениями подушечек пальцев помассировать височную область в течение 2-3 минут.

Выполнить массаж затылочной области продольными движениями пальцев обеих рук в направлении от затылочного бугра к 7-му шейному позвонку и обратно до появления чувства «прилива» к голове.

Регулярное выполнение этих простых упражнений поможет вам уменьшить усталость глаз при работе на компьютере и надолго сохранить хорошее зрение.