Основи Web-майстерності
HTML Методичні вказівки та завдання до лабораторних робіт
Частина 1 Вступні відомості. Форматування тіла веб-сторінки. Структурування тексту. Форматування абзаців.
Основи Web-майстерності: HTML.
Основи Web-майстерності: HTML. Частина 1. Методичні вказівки та завдання до лабораторних робіт.
Фрагмент методического пособия представлен для ознакомления с продукцией электронного магазина МЕТОДИЧКА http://metodichka.com.ua/ МЕТОДИЧКА – Лучшие пособия для самостоятельного практического обучения!
© НМЦ ПОЛИТЕХ Ніяка частина цього видання не може бути тиражована у будь-який спосіб без письмового дозволу правовласників. ® Методичка http://metodichka.com.ua/ 2
Основи Web-майстерності: HTML.
Зміст ЗАНЯТТЯ 1 ........................................................................................................ 4 Вступні відомості про HTML............................................................................ 5 Основні питання заняття ..................................................................................5 Організація робочого середовища....................................................................5 Робочі інструменти і порядок виконання вправ...............................................6 Простий шаблон документу HTML..................................................................7 Розбиття тексту на абзаци ................................................................................7 Вставка зображень............................................................................................8 Вставка гіперпосилань......................................................................................9 Коментарі в коді веб-сторінки........................................................................10 Налагодження заголовку веб-сторінки. Теги META......................................11 Підпис автора веб-сторінки. Елемент ADDRESS...........................................13 На цьому занятті.............................................................................................14 ЗАНЯТТЯ 2 ......................................................................................................15 Форматування тіла веб-сторінки. Атрибути елемента BODY..................... 15 Основні питання заняття ................................................................................15 Ширина полів веб-сторінки............................................................................15 Колір фону та тексту веб-сторінки.................................................................16 Вставка фонового зображення........................................................................16 На цьому занятті.............................................................................................17 ЗАНЯТТЯ 3 ......................................................................................................18 Структурування тексту................................................................................... 18 Основні питання заняття ................................................................................18 Заголовки........................................................................................................18 Горизонтальні лінії .........................................................................................19 Розділи (блоки)...............................................................................................21 На цьому занятті.............................................................................................22 ЗАНЯТТЯ 4 ......................................................................................................23 Форматування абзаців .................................................................................... 23 Основні питання заняття ................................................................................23 Вирівнювання заголовків та тексту................................................................23 Примусовий перенос тексту (розрив рядка)...................................................25 Заборона автоматичного переносу тексту......................................................26 Попереднє форматування тексту....................................................................27 На цьому занятті.............................................................................................30
3
Основи Web-майстерності: HTML.
Ці методичні вказівки є посібником для виконання лабораторних робіт з основ веб-майстерності при підготовці фахівців за напрямом "Web-дизайн". У посібнику докладно розглядаються всі основні можливості та практичні аспекти застосування мови HTML (Hyper Text Markup Language, мова розмітки гіпертекстових документів) до розробки веб-сторінок. За основу взято останню на цей час базову версію HTML 4.01. Частина 1 методичних вказівок містить: вступні відомості про HTML, основи форматування тіла веб-сторінки, структурування тексту, та форматування абзаців. Методичні вказівки можуть бути використані для самостійної роботи всіма, хто хоче самостійно опанувати мову HTML та навчитись її застосовувати для розробки веб-сторінок та веб-сайтів. Посібник побудований таким чином, що при умові ретельного виконання усіх вправ та суворого дотримання методичних вказівок, по закінченні вивчення курсу студент має одержати самостійно створений ним електронний "Довідник Веб-майстра".
Пользуясь эти методическим пособием Вы сможете детально, на прмерах, изучить язык гипетектовой разметки веб-страниц HTML МЕТОДИЧКА http://metodichka.com.ua/
4
Основи Web-майстерності: HTML.
Заняття 1 Вступні відомості про HTML Основні питання заняття - Організація робочого середовища - Робочі інструменти і порядок виконання вправ - Простий шаблон документу HTML - Розбиття тексту на абзаци - Вставка зображень - Вставка гіперпосилань - Коментарі в коді веб-сторінки - Налагодження заголовку веб-сторінки. Теги META - Підпис автора веб-сторінки. Елемент ADDRESS
Організація робочого середовища У своїй робочій папці створіть наступне дерево папок: Ваша папка \Web \Images \Sounds \Videos \HTML Папка Images призначена для зберігання зображень, які будуть використовуватися для створення веб-сторінок під час виконання вправ. Скопіюйте до цієї папки необхідні файли (за вказівкою викладача). Папка Sounds призначена для зберігання аудиофайлів, які будуть використовуватися для створення веб-сторінок під час виконання вправ. Скопіюйте до цієї папки необхідні файли (за вказівкою викладача). Папка Videos призначена для зберігання відеофайлів, які будуть використовуватися для створення веб-сторінок під час виконання вправ. Скопіюйте до цієї папки необхідні файли (за вказівкою викладача). 5
Основи Web-майстерності: HTML.
Папка HTML призначена для зберігання веб-сторінок (HTMLфайлів), які будуть створені вами під час виконання вправ. Зберігайте всі створені Вами веб-сторінки до цієї папки, якщо у методичних вказівках не сказано інше. Методичні вказівки побудовані таким чином, щоб по закінченні роботи ви одержали самостійно створений вами електронний "Довідник Веб-майстра". Для цього необхідно ретельно виконувати всі вправи і суворо додержуватися методичних вказівок. Робочі інструменти і порядок виконання вправ HTML-документи (веб-сторінки) - це звичайні текстові документи. Тому для створення веб-сторінок можна використовувати будь-якій текстовий редактор. На цих заняттях ми будемо користуватися текстовим редактором Блокнот, якій входить до складу стандартних програм операційної системи Windows. Вивчати HTML найкраще на прикладах. Тому порядок роботи на всіх практичних заняттях буде таким: 1. Прочитайте вступні зауваження. 2. Ознайомтеся з лістингом коду запропонованої веб-сторінки. 3. Ретельно дотримуючись лістингу наберіть текст коду вебсторінки у текстовому редакторі Блокнот. 4. Збережіть набраний код у файлі з розширенням *.html або *.htm під назвою, яка вказана у лістингу. Файли зберігайте у папку HTML, яку необхідно завчасно створити у своїй робочій папці. 5. Відкрийте створений файл подвійним клацанням (файл відкриється, як веб-сторінка, у вікні броузера Internet Explorer) і оцініть результат. 6. Якщо необхідно внести зміни або доповнення в код вебсторінки, через контекстне меню веб-сторінки відкрийте її код у текстовому редакторі Блокнот (контекстне меню > Просмотр в виде HTML), внесіть необхідні зміни, збережіть виправлений файл, перейдіть у вікно броузера і виконайте команду Обновить на панелі інструментів - веб-сторінка зміниться відповідно до внесених виправлень. 7. По закінченні роботи над веб-сторінкою закрийте всі вікна. 6
Основи Web-майстерності: HTML.
Простий шаблон документу HTML Запустіть програму Блокнот, і за зразком, поданим у лістингу 1.1, створіть шаблон документу HTML. Примітка. Цей шаблон можна буде використовувати у подальших вправах. Замість того, щоб кожен раз набирати всі обов'язкові теги, такі як <HTML>, <HEAD>, <TITLE>, <BODY> тощо, краще зробити це один раз, а потім копіювати шаблон, доповнюючи його лише новими елементами. Це збереже час і гарантує, що у коді веб-сторінки буде менша кількість помилок.
Створіть веб-сторінку за наступним зразком і збережіть її в папку HTML. Лістинг 1.1. Файл 1.1.html <HTML> <HEAD> <TITLE>Назва Web-сторінки</TITLE> </HEAD> <BODY> Текст Web-сторінки. </BODY> </HTML> Розбиття тексту на абзаци Абзац - головна структурна одиниця тексту. Щоб розбити текст веб-сторінки на окремі абзаци використовують тег P (від англ.: Paragraph). Тег Р розміщують як на початку, так і в кінці абзаца. На початку абзацу він має вид (Р), а в кінці - (/Р). Вважається, що в кінці абзаца тег /Р не обов'язковий. Але стандарти веб-програмування вимагають, щоб тег Р був як на початку, так і в кінці абзацу. Якщо не закрити абзац тегом /Р, то у деяких випадках відступ після абзацу не створюється. 7
Основи Web-майстерності: HTML.
Створіть веб-сторінку за наступним зразком і збережіть її в папку HTML. Лістинг 1.2. Файл 1.2.html <HTML> <HEAD> <TITLE>Розбиття тексту на абзаци</TITLE> </HEAD> <BODY> <P>Абзац - головна структурна одиниця тексту.</P> <P>Щоб розбити текст на окремі абзаци використовують тег P.</P> <P>Тег Р розміщують як на початку, так і в кінці абзаца. На початку абзацу він має вид (Р), а в кінці - (/Р).</P> <P>Вважається, що в кінці абзаца тег /Р не обов'язковий. Але стандарти веб-програмування вимагають, щоб тег Р був як на початку, так і у кінці абзацу.</P> <P>Якщо не закрити абзац тегом /Р, то у деяких випадках відступ після абзацу не створюється.</P> </BODY> </HTML> Вставка зображень Зображення до веб-сторінки впроваджуються за допомогою тегу IMG, головний атрибут якого SRC вказує шлях (адресу URL) до файлу зображення. Примітка. Файл зображення необхідно підготувати завчасно.
Створіть веб-сторінку за наступним зразком і збережіть її в папку HTML. 8
Основи Web-майстерності: HTML.
Лістинг 1.3. Файл 1.3.html <HTML> <HEAD> <TITLE>Вставка зображення</TITLE> </HEAD> <BODY> <P>Вставлене зображення:</P> <IMG SRC="../images/svin.jpg"> <P>Абзац тексту після зображення.</P> </BODY> </HTML> Вставка гіперпосилань Гіперпосилання створюються за допомогою тегу А, який має головний атрибут HREF. Атрибут HREF звичайно вказує адресу (URL) веб-сторінки (абсолютну або відносну), яка відкриється, коли активізувати гіперпосилання (клацнути на ньому мишею). Атрибут HREF може також вказувати адресу електронної пошти, до якої звертається дане гіперпосилання, адресу файла зображення та ін. (докладніше про це - далі). Лістинг 1.4. Файл 1.4.html <HTML> <HEAD> <TITLE>Вставка гіперпосилань</TITLE> </HEAD> <BODY> <P>Клацніть, щоб відкрити <A HREF="1.1.html"> 9
Основи Web-майстерності: 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> </BODY></HTML> Коментарі в коді веб-сторінки Коментар - пояснюючий надпис, якій впроваджується у код веб сторінки там, де це необхідно, щоб допомогати веб-майстрові орієнтуватися у коді веб-сторінки. Коментарі можна вставляти у будь-якому місці коду веб-сторінки. Коментарі не відображаються на веб-сторінці, і не впливають на її вид. Лістинг 1.5. Файл 1.5.html <HTML> <HEAD> <TITLE>Вставка коментарів у тіло вебсторінки</TITLE> </HEAD> <BODY> <P>Після цього тексту йде коментар ...</P> 10
Основи Web-майстерності: HTML.
<!-Тут можна ввести будь-якій текст коментаря. Цей текст не відображається на веб-сторінці. -- > <P>... Перед цим текстом йде коментар.</P> </BODY> </HTML> Налагодження заголовку веб-сторінки. Теги META Для налагодження заголовку веб-сторінки використовують теги МЕТА. МЕТА-теги розміщують в області заголовку веб-сторінки (HEAD). Їх вміст (content) не відображається на веб-сторінці, але він впливає на взаємодію веб-сторінки із серверами Інтернету та із броузерами користувачів. Правильне задання тегів META сприяє правильному відображенню веб-сторінки у броузерах користувачів. Лістинг 1.6. Файл 1.6.html <HTML> <HEAD> <TITLE>Налагодження заголовку веб-сторінки. Використання тегів МЕТА.</TITLE> <!-- Наступний тег надає інформацію про тип вмісту веб-сторінки та вказує кодировку (кодову таблицю), якою веб-броузер має користуватися, коли відкриває дану веб-сторінку --> <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251"> <!-- Наступні теги містять короткий опис веб11
Основи Web-майстерності: HTML.
сторінки, та перелік ключових слів які використовують пошукові системи для індексації веб-сторінки та її пошуку в Інтернеті --> <META NAME="description" content="Короткий опис змісту веб-сторінки."> <META NAME="keywords" content="Перелік ключових слів, які характеризують зміст веб-сторінки."> <!-- Даний тег вказує дату, коли останній раз був оновлений зміст веб-сторінки. Після вказаної дати пошукові системи Інтернету автоматично оновлюють інформацію про веб-сторінку у своїй базі даних --> <META HTTP-EQUIV="last-modified" CONTENT="14.11.2004"> <!-- Наступний тег керує поведінкою броузера користувача: він дає броузерові вказівку через 20 секунд після завантаження цієї сторінки перейти на сайт www.poltava.biz --> <META HTTP-EQUIV="refresh" CONTENT="20; URL=http:\\www.poltava.biz\"> <!-- Цей тег містить вказівку для пошукових роботів Інтернету, щоб вони індексували не тільки дану веб-сторінку, а й усі веб-сторінки пов'язані з нею гіперпосиланнями --> <META NAME="robots" CONTENT="all"> <!-- Цей тег повідомляє роботам, що інформація на сторінці оновлюється через кожні 10 днів. Тобто через кожні 10 днів необхідно повторно проіндексувати дану сторінку --> <META NAME="revisit-after" CONTENT="10 days">
12
Основи Web-майстерності: HTML.
<!-- Теги далі містять інформацію про автора вебсторінки, та засвідчують його авторські права --> <META NAME="copyright" CONTENT="2004, Leonid Flegantov"> <META NAME="author" CONTENT="Leonid Flegantov"> </HEAD> <BODY> Тіло документа. </BODY> </HTML> Підпис автора веб-сторінки. Елемент ADDRESS Для створення авторського підпису на веб-сторінці використовується спеціальний елемент ADDRESS. В цьому елементі веб-майстер може (але не зобов'язаний) назвати себе, як автора документа, розмістити інформацію про авторські права на інформацію та дизайн сайту або його окремих елементів (наприклад, зображень), а також повідомити, як можна зв'язатися з ним (звичайно вказують адресу електронної пошти). На веб-сторінці підпис автора прийнято розміщувати на початку, або в кінці документу. Лістинг 1.7. Файл 1.7.html <HTML> <HEAD> <TITLE>Назва Web-сторінки</TITLE> </HEAD> <BODY> <P>Приклад підпису веб-майстра:</P> <ADDRESS> &copy; 2004 Флегантов Л.О., 13
Основи Web-майстерності: HTML.
<A HREF="mailto:Leonid.Flegantov@rambler.ru"> Leonid.Flegantov@rambler.ru </A> </ADDRESS> </BODY> </HTML> На цьому занятті - Простий шаблон документу HTML - Розбиття тексту на абзаци - Вставка зображень - Вставка гіперпосилань - Коментарі в коді веб-сторінки - Налагодження заголовку веб-сторінки. Теги META - Підпис автора веб-сторінки. Елемент ADDRESS
МЕТОДИЧКА http://metodichka.com.ua/ Магазин классных методичек!
14
Гимнастика для глаз А. Динамический комплекс 1.
Движения глаз вправо-влево, 30 секунд.
2.
Движения глаз вверх-вниз, 30 секунд.
3.
Движения глаз по диагоналям, по 30 секунд.
4.
Круговые движения глазами по часовой стрелке, 30 секунд.
5.
Круговые движения глазами против часовой стрелки, 30 секунд.
6.
Упражнения 1-5, только с закрытыми глазами, общая продолжительность до 3 минут.
Б. Самомассаж глаз 1.
Сильно зажмурить глаза на 3-5 секунд, затем широко открыть глаза на 3-5 секунд. Повторить 10-12 раз.
2.
Быстро моргать в течение 1-2 минут.
3.
Смотреть вдаль 3-5 секунд (можно в окно), затем на палец руки в 2530 см от глаз (можно на оконную раму) в течение 3-5 секунд, повторить 10-12 раз.
4.
Тремя пальцами каждой руки легко нажать на верхнее веко, спустя 1-2 секунды снять пальцы. Повторить 5-6 раз.
5.
Круговыми движениями подушечек пальцев помассировать височную область в течение 2-3 минут.
6.
Выполнить массаж затылочной области продольными движениями пальцев обеих рук в направлении от затылочного бугра к 7-му шейному позвонку и обратно до появления чувства «прилива» к голове.
Регулярное выполнение этих простых упражнений поможет вам уменьшить усталость глаз при работе на компьютере и надолго сохранить хорошее зрение.