Електронний навчальний посібник для створення вебсторінок Елементарний HTML

Зарегистрируйтесь, чтобы просмотреть полный документ!

Електронний навчальний посібник для створення вебсторінок “Елементарний HTML”

Елементарний HTML Навчальний посібник Зміст Словник тегів Перевір себе Від автора Мандруючи по глобальній мережі Інтернет, ви бачите сотні веб-сторінок, які створенні за допомогою мови розмітки гіпертекстових документів HTML. Вона проста для розуміння, і освоїти її допоможе наш електронний посібник. Матеріал спробували подати доступною для всіх мовою. Ви можете зразу перейти до посібника, а можете спочатку переглянути зміс або словник тег щоб швидко знайти те, що вам потрібно.

Зміст Навчальний посібник Зміст Список тег Завдання Від автора Вступ. Крок 1. Перетворення текстового файлу у вебсторінку. Крок 2. Що таке обов’язкові теги. Найпростіше. Крок 3. Як змінити фон. Крок 4. Як змінити колір тексту. Крок 5. Вирівнюємо текст. Крок 6. Як виділити заголовок. Крок 7. Як задати розмір букв. Крок 8. Курсив, напівжирний текст, підкреслений. Крок 9. Що таке шлях? Як вставити малюнок. Крок 10. Що таке гіперпосилання. Крок 11. Чи може картинка бути посиланням. Крок 12. Списки.

Словник тегів Зміст Тег Призначення, атрибути A Посилання href=“інший_документ. html" – шлях до документу target=_blank – відкриває посилання в новому вікні name="anchor 1" – ім’я закладки title=“Ваш текст" – текст про посилання (текстовий) B виділення тексту напівжирним шрифтом BIG виділення тексту крупнішим шрифтом, ніж основний BODY BR CENTER DIV тіло документа, обов'язковий тег text="#cc 0000" - задає колір тексту всього документа bgcolor="#000000" - задає колір фону документа background="картинка. jpg" - задає фон з малюнка link="#ff 9999" - задає колір посилання alink="#ff 9999" - задає колір активного (натиснутою) посилання vlink="#ff 9999" - задає колір відвіданого посилання перенесення тексту на інший рядок clear="all" (left, right) - завершення обтікання текстом об'єкту центрування тексту і об'єктів вирівнювання тексту і об'єктів align="center" - центрування align="right" - вирівнювання по правому краю документа align="left" - вирівнювання по лівому краю документа align="justify" - вирівнювання по обох краях документа

Словник тегів Зміст Тег FONT FRAMESET Призначення, атрибути управління шрифтами color="#cc 0000 - задає колір для блоку тексту size="+0" - задає розмір шрифту тексту (від -2 до +4) face="Arial" - задає певний тип шрифту визначає вміст і вид одного фрейма marginheight="0" - ширина верхнього і нижнього полів фрейма marginwidth="0" - ширіна лівого і правого полів фрейма scrolling="yes" (no, auto) - лінійка прокрутки name="window-1" - ім'я фрейма noresize - заборонити відвідувачеві міняти розміри фреймів визначає макет основного вікна у вигляді прямокутних просторів rows="100, 200, *" - визначає розташування горизонтальних фреймів cols="10%, 20%, 70%" - визначає розташування вертикальних фреймів border - визначає ширину рамок фреймов в пікселях Hx заголовки (H 1, H 2, H 3, H 4, H 5, H 6) HEAD голова документа, обов'язковий тег HR HTML лінія align="right" (center або left) width="30%" (ширина лінії у відсотках) size="6" (товщина лінії) color="cc 0000" (колір лінії, тільки в IE) указує на тип документа, обов'язковий тег

Словник тегів Зміст Тег I IMG LI MAP MARQUEE Призначення, атрибути виділення тексту курсивом підвантаження зображень (картинок) Border="5" - рамка картинки width="500" - ширина картинки height="100" - висота картинки align="left" - розташування тексту по відношенню до картинки vspace="10" - відстань від картинки до тексту по вертикалі hspace="30" - відстань від картинки до тексту по горизонталі alt="описание" - опис картинки usemap="#karta 1" - посилання на карту визначає елемент списку визначає клієнтську навігаційну карту name="karta 1" - ім'я карти рядок тексту, що біжить (тільки IE) bgcolor - колір фону рядка, що біжить height - висота рядка width - ширина рядка behavior="scroll" звичайна прокрутка behavior="slide" - рядок пробігає до краю і зупиняється behavior="alternate" - рядок рухатиметься від краю до краю scrollamount="1" (1 -10) - швидкість руху рядка direction="left" (right, up, down) - рух вліво (управо, вгору, вниз)

Словник тегів Зміст Тег OL P Призначення, атрибути впорядковані списки type="I" (i, 1, а, A) - стиль елементу списку параграф, вирівнювання тексту і об'єктів align="center" - центрування align="right" - вирівнювання по правому краю документа align="left" - вирівнювання по лівому краю документа align="justify" - вирівнювання по обох краях документа PRE форматований текст S перекреслений текст SMALL виділення тексту дрібнішим шрифтом, ніж основний SUB нижній індекс SUP верхній індекс TABLE таблиця bgcolor="#FFCC 33" - колір фону таблиці (рядки, комірки) background="картинка. gif" - задає фоновий малюнок width="50" або width="50%"- ширина таблиці height="45" або height="45%"- висота таблиці cellspacing="5" - відстань між комірками cellpadding="5" - відстань усередині комірок border="3" - задає товщину рамки таблиці bordercolor="#000000" - задає колір рамки таблиці

Словник тегів Зміст Тег TD TITLE TR U UL Призначення, атрибути комірка даних таблиці bgcolor="#FFCC 33" - колір фону background="картинка. gif" - задає фоновий малюнок width="50" або width="50%"- ширина height="45" або height="45%"- висота align="center" (right, left) - горизонтальне вирівнювання вмісту valign="middle" (top, bottom) - вертикальне вирівнювання вмісту colspan="2" - розтягнути комірки на декілька стовпців rowspan="2" - розтягнути комірки на декілька рядків cellspacing="5" - відстань між комірками заголовок документа рядок таблиці bgcolor="#FFCC 33" - колір фону background="картинка. gif" - задає фоновий малюнок width="50" або width="50%"- ширина height="45" або height="45%"- висота підкреслений текст неврегульовані списки type="disk" (circle, square) - стиль елементу списку

Крок 1. Перетворення текстового файлу у веб-сторінку. Перед початком роботи ми створимо на нашому комп'ютері окрему папку для майбутньої сторінки. Тепер відкриємо блокнот і скопіюємо туди наступний текст: <HTML> <HEAD> <TITLE>Моя перша Web-сторінка</TITLE> </HEAD> <BODY> Добрий день! Це моя перша Web-сторінка. Можливо щось вам не сподобається, але не дуже зважайте на мої помилки, адже "На помилках навчаються!" </BODY > </HTML> (Проглянути) Збережемо цей документ, привласнивши йому ім'я *. html. Тепер відкриємо броузер, допустимо, Internet Explorer (не закривайте блокнот, він нам ще прігодітся), і відкриємо в броузере наш документ. Якщо ми щось змінимо в нашому *. html документі (у блокноті), то, щоб подивитися, як це виглядає в нашому броузері, треба не забувати натискати в броузері кнопку ОБНОВИТИ. Якщо змін не видно, то це означає, що ви десь щось неправильно написали, або забули зберегти документ. Зміст Крок 2

Крок 2. Що таке обов’язкові теги. Перше, що нам потрібно засвоїти: хтмл (html) - це те, що html не є мовою програмування, він призначений для розмітки текстових документів (тобто за допомогою його ми розмічаємо текст, таблиці, картинки і т. д. на нашій сторінці). То, як виглядатимуть картинки, текст і інші елементи на вашій сторінці, і як вони розташовуватимуться щодо один одного, визначають мітки (tags або теги). Приклад тега: (перенесення тексту на інший рядок). Отже, все, що знаходиться між < і > - це тег. Текст, що не знаходиться між такими дужками < > - весь видно при перегляді в броузері. Звернете увагу на картинку, вона тут не просто так, вона показує нам обов'язкові теги. Обов'язкові теги, це такі теги, які ви завжди повинні прописувати для кожної своєї сторінки. <html> Цей тег повинен відкривати документ. Якщо є відкриваючий тег, то повинен бути і що закриває: </html> <head> </head> - голова документа <body> </body> - тіло документа Всі теги, розташовані між <head> </head>, це щось подібне до службової інформації. Наприклад <title>- заголовок. Навіщо він? Відкрийте IE (Internet Explore) з нашим документом і спрямуйте свій погляд на заголовок вікна. . . Побачили? : ) Всі теги, розташовані між <body> </body>, - безпосередній зміст документа. <тег> </тэг> - не просто тег, це контейнер - тег, який може містити усередині себе інші теги (і текст). Зверніть увагу: <тэг 1><тэг 2><тэг 3>. . . </тэг 3></тэг 2></тэг 1> Тільки така черговість закриваючих тегів вірна: тег, який ми відкрили першим, закриваємо останнім, другою - передостаннім і т. д. Деякі теги, ніби , не вимагають закриваючого тега. Крок 1 Зміст Крок 3

Крок 4. Як змінити колір тексту. Як броузер визначає, яким шрифтом потрібно виводити текст? Зазвичай він використовує той шрифт, який заданий в його настройках за умовчанням. Але ці значення можна змінити. Більш того, сторінка, набрана тільки одним шрифтом, одного розміру і одного кольору, мало кому сподобається. Таку і читати неприємно, і робити нецікавий. Щоб задати колір тексту на всій сторінці можна скористатися атрибутом text=“колір” тегу <body> Зверніть увагу: ми одночасно можемо прописати в тегу <body> і колір тексту в документі, і колір фону (це про всяк випадок, якщо ви ще не зрозуміли - одному тегу може бути привласнені декілька атрибутів : ). <BODY text =darkblue bg. Color=00 CC 99> А що робити, коли потрібно змінити колір лише певної частини тексту? У текстових процесорах цю проблему вирішують просто: заходять в діалогове вікно настройки шрифту і виставляють там потрібні параметри - розмір, колір і ін. У програмах з англійським інтерфейсом це вікно звичайне так і називається Font, тобто "Шрифт". Дескриптор, що відповідає за параметри шрифту в HTML, теж називається . Зрозуміло, він парний і впливає на вигляд тексту, розміщеного всередину конструкції . . . . У дескриптора тільки три параметри: гарнітура, розмір і колір. Давайте розфарбуємо слова “На помилках навчаються” в червоний, а інший текст в синій. <HTML> <HEAD> <TITLE>Моя перша Web-сторінка</TITLE> </HEAD> <BODY> Добрий день! Це моя перша Web-сторінка. Можливо щось вам не сподобається, але не дуже зважайте на мої помилки, адже "На помилках навчаються!" </BODY></HTML> (проглянути результат) Color - параметр (атрибут) для тега font, він відповідає, в даному випадку, за колір укладений в контейнер тексту. Атрибут color, як і інші атрибути, не належить тільки одному тегу, він може бути привласнений і деяким іншим тегам. Крок 2 3 Зміст Крок 5

Крок 3. Як змінити фон. На цій сходинці ми дізнаємося, як змінювати колір фону документа, і поговоримо про етику. Колір фону встановлюється у вже знайомому нам тегу <body>: <body bgcolor="#00 CCCC "> Спершу нам буде потрібна палітра (всі кольори інтернету - http: //www. artlebedev. ru/tools/colors/). Якщо до Інтернету у вас зараз немає доступу, то натискайте тут і знайомтеся з палітрою. Я прописала зелено-бірюзовий колір, ви ж свій документ можете розфарбувати будь-яким іншим. До речі, якщо колір в <body> не указувати, то за за умовчанням він буде білим, хоча б іноді кольором за умовчанням може бути будь-якій іншій, окрім білого, тому краще завжди прописуйте колір фону в body. <HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE> </HEAD> <BODY bg. Color= "#00 CCCC > Добрий день! Це моя перша Web-сторінка. Можливо щось вам не сподобається, але не дуже зважайте на мої помилки, адже "На помилках навчаються!" </BODY></HTML> подивитися З теоретичною частиною на даній сходинці ми закінчили, тепер сядемо і небагато поговоримо про кольори. Я хочу порадити вам не зловживати яскравими фонами (жовтим, червоним, салатовим, ну, і чорним з яскравою сумішшю тексту). Чому? Так, просто пошкодуйте очі ваших друзів, знайомих і випадкового відвідувача. Не слід також вживати дуже багато різні кольорів на вашій сторіночці, це, як і яскравий фон, відволікає від змісту, заважає прочитанню і виставляє вас самого не в кращому світлі. Так, трохи не забула сказати про те, що картинку можна зробити фоном документа. <body bgcolor="#00 CCCC " background="ваш_фон. jpg"> Атрибут background указує на те, де лежить фонова картинка, в нашому прикладі він указує на те, що наша фонова картинка лежить в тій же директорії (папціі), що і наш документ. <HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE></HEAD> <BODY bg. Color= "#00 CCCC background="фон. jpg"> Добрий день! Це моя перша Web-сторінка. Можливо щось вам не сподобається, але не дуже зважайте на мої помилки, адже "На помилках навчаються!" </BODY></HTML> подивитися Але навіщо залишати атрибут bgcolor, якщо є background? А раптом фонова картинка не завантажиться (представте, таке може бути), тоді самі зрозумієте навіщо. Крок 2 Зміст Крок 4

Крок 5. Вирівнюємо текст. У цьому розділі ми поговоримо про параграфи. Параграфи вводяться тегом: За допомогою параграфів ми можемо центрувати текст: текст За допомогою параграфів ми можемо вирівняти текст по лівому краю: текст По правому краю документа: текст По обох краях документа: текст Тепер введемо параграфи в наш документ і подивимося наочно, що вийде (у наш приклад я підставила параграф з атрибутом центрування тексту (align=" center "), спробуйте підставити в параграф атрибут align з іншими значеннями: Left, Right, Justify). <HTML> <HEAD><TITLE>Моя перша Web-сторінка</TITLE> </HEAD> <BODY text=darkblue bg. Color=mediumaquamarine> Добрий день! Це моя перша Web-сторінка. Можливо щось вам не сподобається, але не дуже зважайте на мої помилки, адже "На помилках навчаються!" </BODY></HTML> подивитися До речі, правильно говорити не вирівнювання, а виключення: виключення по лівому краю, правому, центру, по обох краях. Якщо ви пізніше заглиблюватиметеся в область дизайну, то вам напевно цей термін зустрінеться. Між іншим, HTML не має до дизайну анінайменшого відношення, не вважайте, що, вивчивши HTML, ви станете раптом дизайнером, це велика помилка багатьох початківців в області сайтобудування. Відмітьте, що текст в документі, якщо не задавати параграфи, завжди вирівнюється за умовчанням по лівому краю. Також запам'ятаєте, що після того, що закриває тега автоматично відбувається перенесення рядка. Але що робити, якщо вам це перенесення ніяк не потрібне? Є тег альтернативний : Крок 4 Зміст Крок 6

Крок 6. Як виділити заголовок. У цьому розділі ми навчимося виділяти текст за допомогою заголовків. Існують шість рівнів заголовків: <H 1> текст </H 1> <H 2> текст </H 2> <H 3> текст </H 3> <H 4> текст </H 4> <H 5> текст </H 5> <H 6> текст </H 6> Отже, h 1 - найважливіший, h 6 – менш важливий. Вводячи заголовки в текст, ви дозволяєте вашому відвідувачеві легше орієнтуватися на сторінці. Заголовками ви визначаєте структуру усередині тексту. Давайте тепер введемо заголовок в наш документ. Мені здається, що фраза "Добрий день! Це моя перша Webсторінка. " так і проситься, щоб її виділили і помістити по центру (для заголовків можна також використовувати вирівнювання за допомогою атрибуту align): <HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE></HEAD> <BODY text=darkblue bg. Color=mediumaquamarine> <H 3 align=center>Добрий день!</H 3> <H 4 align=center>Це моя перша Web-сторінка. </H 4> На відміну від моїх однолітків, я зовсім недавно познайомилася із Глобальною мережею Інтернет, але вже навчаюся створювати власні Web-сторінки. Спочатку було трохи складно, та зараз, коли вже помітно перші результати, я сподіваюся, що в недалекому майбутньому, цю сторінку побачать навіть далеко за межами мого міста. Можливо, за допомогою можливостей мережі, я знайду нових друзів. </BODY></HTML> (подивитися) У приклад я ввела заголовок третього рівня <h 3></h 3> (мій улюблений розмір: ). Дивитеся, що вийшло. Як ми бачимо, візуально заголовки відображаються не тільки крупнішим шрифтом, але до того ж і напівжирним. Також після закриваючого </hx> відбувається автоматично перенесення на інший рядок. Крок 5 Зміст Крок 7

Крок 7. Як задати розмір букв. Заголовки призначені для виділення невеликій частині тексту (рядки, фрази). Але, якщо ви хочете виділити великий фрагмент тексту, то заголовки для цього використовувати не можна. Для цього призначений атрибут size тега , який встановлює бажаний розмір шрифту: текст текст текст текст текст текст текст <HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE> </HEAD> <BODY text=darkblue bg. Color=mediumaquamarine> <H 3 align=center>Добрий день!</H 3><H 4 align=center>Це моя перша Web-сторінка. </H 4> На відміну від моїх я зовсім недавно познайомилася із Глобальною мережею Інтернет, але вже навчаюся створювати власні Web-сторінки. Спочатку було трохи складно, та зараз, коли вже помітно перші результати, я сподіваюся, що в недалекому майбутньому, цю сторінку побачать навіть далеко за межами мого міста. Можливо, за допомогою можливостей мережі, я знайду нових друзів. </BODY></HTML>(подивитися) Перш, ніж ми рушимо далі, хочу попередити, що є така небезпечна хвороба у початківців сайтобудівників, як гігантоманія. Її симптоми: непомірно великі розміри шрифту, замість маленьких і милих кнопочок, і товстий (жирний) у всіх випадках текст. Тому нагадую: стандартний size (за умовчанням) ="+0". Жалійте очі своїх відвідувачів, і вони до вас потягнуться. Крок 6 Зміст Крок 8

Крок 8. Курсив, напівжирний текст, підкреслений. Після того, як ми дізналися про те, як задавати розмір шрифту, настав час поговорити про те, як визначити стиль шрифту. У цьому розділі ми дізнаємося, як виділити текст курсивом, підкреслити, перекреслити, зробити напівжирним, як робити верхній і нижній індекси - всі ці теги, як правило, розглядаються разом, і ми не відступатимемо від традицій. Спочатку розглянемо курсив і напівжирний текст: Напівжирний текст Похилий текст (курсив) Підкреслений текст <strike> Перекреслений текст</strike> <s> Перекреслений текст</s> Тег <big> представляється крупним шрифтом, а малим шрифтом щодо основного тексту: Малий Нормальний текст <big> Великою </big> Теги Sup і Sub - визначають верхній і нижній індекси. Sup - верхній, Sub - нижній. Де вони можуть пригодиться? Ну, наприклад, при написанні якої-небудь формули. Верхній індекс Нижній індекс Як бачите, все просто. Можете їх самі понаставляти в тексті, де хочеться, для проби, а в прикладі я виділила підкресленим фразу про Інтернет. <HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE> </HEAD> <BODY text=darkblue bg. Color="#00 CCCC "> <H 3 align=center> Добрий день!</H 3> <H 4 align=center> Це моя перша Web-сторінка. </H 4> На відміну від моїх однолітків, я зовсім недавно познайомилася із Глобальною мережею Інтернет, але вже навчаюся створювати власні Web-сторінки. Спочатку було трохи складно, та зараз, коли вже помітно перші результати, я сподіваюся, що в недалекому майбутньому, цю сторінку побачать навіть далеко за межами мого міста. Можливо, за допомогою можливостей мережі, я знайду нових друзів. </BODY></HTML>подивитися Ось, власне, і все. Можемо переходити на наступну сходинку. Крок 7 Зміст Крок 9

Крок 9. Що таке шлях? Як вставити малюнок. Є декілька питань, з приводу яких серед Web-дизайнерів йдуть постоянниє дискусії. Деякі з них нам ще устрінуться. А ось перший: що є картинки для Web-сторінки - користь чи шкода? Також я пораджу не ухитрятися з анімованими картинками: вони відволікають увагу від змісту сторіночки. Постарайтеся також створювати свої картинки для свого сайту, а не збирати їх по безкоштовних колекціях з графікою, хай ваш сайт буде унікальним. Запам'ятаєте, сторінка (сайт) не повинна бути супер графічним витвором, який важить сотні кілобайт, оскільки це жорстоко, і жодна жива душа не витримає подібних тортур (вантажити довго). Тепер поговоримо як вставляти картинки в документ: <img src="my. jpg"> Замість my. jpg ми можемо підставити ім'я будь-якої картинки (me. gif, main. png). Найголовніше зрозуміти, що все розташоване між лапками - посилання (шлях до картинки). Наш приклад говорить про те, що картинка лежить в тому ж каталозі (директорії, теці), в якій лежить і наш документ. Якщо картинка лежить в піддиректорії (у теці, яка лежить у вашій основній теці), то посилання на неї виглядатиме так: <img src="my/my. jpg"> Якщо картинка лежить на рівень вище, а документ знаходиться в піддиректорії, то посилання на неї буде таким: <img src=". . /my. jpg"> Якщо картинка лежить на іншому сайті, то шлях прописується повністю: <img src="http: //www. homepage. ru/my/my. jpg"> Для вашої зручності кладіть картинку в ту ж теку, що і документ, тоді плутанини буде менше: ) Також я хочу звернути вашу увагу на те, що MY. jpg, my. JPG, my. jpg і MY. JPG - це різні імена файлів. Ніколи не забувайте, що регістр потрібно враховувати. <HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE> </HEAD> <BODY text=darkblue bg. Color="#00 CCCC "> <H 3 align=center> Добрий день! Це моя перша Web-сторінка. </H 3> <IMG src="Моя перша Web-сторінка. files/5. JPG" > На відміну від моїх однолітків, я зовсім недавно познайомилася із Глобальною мережею Інтернет, але вже навчаюся створювати власні Web-сторінки. Спочатку було трохи складно, та зараз, коли вже помітно перші результати, я сподіваюся, що в недалекому майбутньому, цю сторінку побачать навіть далеко за межами мого міста. Можливо, за допомогою можливостей мережі, я знайду нових друзів. </BODY></HTML>продивитися

Як бачите, я отримала не той результат, що хотіла. Розмір малюнка великий, та і текст хотілося щоб був весь біля картинки. Чи можна збільшити або зменшити картинку у вікні броузера? У дескрипторі <IMG> є два параметра, що визначають ширину і висоту зображення, width і height, відповідно. Задаються ці величини в пікселях. <IMG src="Моя перша Web-сторінка. files/5. JPG" width=“ 100” height=“ 120 ” > Подивимося як змінилося наше зображення. Пам'ятається, для вирівнювання тексту використовувався атрибут align. Правда, там він застосовувався просто для вирівнювання рядка по горизонталі відносно сторінки. З графікою справа йде трохи інакше. Проте, спробуємо. Ми хочемо, щоб малюнок розташовувався зліва. Так і напишемо: <IMG src="Моя перша Web-сторінка. files/5. JPG" align=“left” >. Продивимося, що отримали. Дійсно, це зручно. Якщо тексту мало - він розміщується праворуч від картинки. А якщо його стає багато, то він обтікає її, і що "не помістилися"строчки виводяться як завжди, починаючи з лівого краю вікна. Щоб зробити навпаки (картинка справа, текст зліва) треба прописати right: <img src="pr 1. png" align="right"> Але це не все: текст може розташовуватися (1) - <img src="pr 1. png" align="bottom"> внизу картинки (це за умовчанням) (2) - <img src="pr 1. png" align="middle"> посередині (3) - <img src="pr 1. png" align="top">вгор Для тега <img> можна ввести ще декілька атрибутів: (1) - <img src="pr 1. png" vspace="10"> (2) - <img src="pr 1. png" hspace="30"> (3) - <img src="pr 1. png" alt="моя фотографія"> (4) - <img src="pr 1. png" border="5"> Тепер послідують пояснення за пунктами. (1) - атрибут vspace - задає відстань між текстом і малюнком (по вертикалі). Відстань задається в пікселях. У нашому прикладі відстань рівна 10 пікселям. (2) - атрибут hspace - теж задає відстань між текстом і малюнком, але по горизонталі. Відстань задається в пікселях. У нашому прикладі воно рівне 30 пікселям (крапкам). (3) - атрибут alt - короткий опис картинки. Якщо навести курсором миші на малюнок, і так потримати його (курсор) декілька секунд, вискочить опис картинки. У нашому випадку це буде фраза - "моя фотографія". (4) - атрибут border - рамка навколо самої картинки (у пікселях). Крок 8 Зміст Крок 10

Крок 10. Що таке гіперпосилання. Хто не знає, що таке гіперпосилання? На сторінках Internet їх бачили всі. Так чи не дасте визначення цього явища? Непросто, правда? Гіперпосилання - це пряме з'єднання окремих точок в документі з іншими точками в тому ж самому або іншому документах. У HTML термінології точку часто називають anchors (якір). Існують два кінці зв'язку (якорі): зв'язок здійснюється від однієї точки до іншої. Остання, названа метою (target) зв'язку, часто є початком документа. За допомогою посилань ми зв'язуємо документи. Так з головної сторінки по посиланнях ми можемо перейти на сторінку з фотографіями, з цієї сторінки ми можемо перейти назад на головну сторінку, або, допустимий, на сторінку з нашими віршами, і т. д. Посиланням на ці та інші документи може бути текст (фраза, слово), а може бути і картинка. На цій сходинці ми розглянемо тільки текстове посилання. Спершу створимо новий документ (у нашому прикладі Мої фотографії. htm) в тій же директорії, де знаходиться наш головний документ index. html. Зміст документа вигадайте самі, у вас для цього вже достатньо знань. Хай Мої фотографії. htm- документ з вашими фотографіями. Тоді ми можемо фразу “про мене" зробити посиланням на Мої фотографії. htm: <а href="Мої фотографії. htm">про мене</a> Тег <a></a> робить посиланням укладену в нього картинку або фразу (текст). Принципи прописування шляху ми вже знаємо. Для всіх посилань в нашому документі ми можемо прописати кольори: link - колір просто посилання, alink - колір активного посилання (натиснутою), vlink - колір вже відвіданого посилання. <body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE></HEAD> <BODY text=darkblue bg. Color=mediumaquamarine> <H 3 align=center> Добрий день! Це моя перша Web-сторінка. </H 3> <IMG src="Крок. files/5. JPG" width=100 align=left > На відміну від моїх однолітків, я зовсім недавно познайомилася із Всесвітньою павутиною Інтернет, але вже навчаюся створювати власні Web-сторінки. Спочатку було трохи складно, та зараз, коли вже помітно перші результати, я сподіваюся, що в недалекому майбутньому, цю сторінку побачать навіть далеко за межами мого міста. Можливо, за допомогою можливостей мережі, я знайду нових друзів, і вони захочуть дізнатися <A href="Мої фотографії. htm">про мене. </A>На жаль, якість не найкраща, але в цілому, можна розгледіти мої риси характеру. </BODY></HTML> проглянути Крок 9 Зміст Крок 11

Веб-сторінка на яку посилається зв’язок Фраза, що є гіперпосиланням

Крок 11. Чи може картинка бути посиланням. Як я вже згадувала, посиланням може бути і картинка. Принцип посилання той же, що і у випадку з текстом, тільки в тег <a></a> вставляється не текст, а картинка: <а href=" Мої фотографії. htm "><img src"Крок. files/5. JPG""></a> Отже, зробимо посиланням картинку 5. JPG на документ з фотографіями (Мої фотографії. htm l): <HTML><HEAD><TITLE>Моя перша Web-сторінка</TITLE></HEAD> <BODY text=darkblue bg. Color=mediumaquamarine> <H 3 align=center> Добрий день! Це моя перша Web-сторінка. </H 3> <A href= "Мої фотографії. htm "><IMG src="Крок. files/5. JPG" width=100 align=left ></A> На відміну від моїх однолітків, я зовсім недавно познайомилася із Всесвітньою павутиною Інтернет, але вже навчаюся створювати власні Web-сторінки. Спочатку було трохи складно, та зараз, коли вже помітно перші результати, я сподіваюся, що в недалекому майбутньому, цю сторінку побачать навіть далеко за межами мого міста. Можливо, за допомогою можливостей мережі, я знайду нових друзів, і вони захочуть дізнатися <A href="Мої фотографії. htm">про мене. </A>На жаль, якість не найкраща, але в цілому, можна розгледіти мої риси характеру. </BODY></HTML> проглянути Тепер подивитеся в броузері, що у нас вийшло. Картинка 5. JPG стала посиланням. Якщо ви відмітили (а якщо не відмітили, то звернете увагу): навколо картинки з'явилася рамочка. Цю рамочку можна залишити, якщо вам вона подобається, а можна прибрати, якщо ви задасте картинці атрибут border="0" (про нього ми вже говорили з вами). <img src="5. JPGf" align="left" hspace="30" vspace="5" border="0"> Але, якщо ваша картинка буде посиланням, то рамка навколо неї буде того кольору, який ми задали для посилань в тегу body за допомогою link, vlink, alink, тобто атрибут bordercolor в цьому випадку вже не впливає на колір рамки навколо картинки. Крок 10 Зміст Крок 12

Крок 12. Спискивизначають структуру документа. Візуально списки відображаються таким чином: • Текст один • Текст інший Це називається маркований список. Існують ще і впорядковані списки: 1. Спочатку зробимо це. 2. Потім ми зробимо те. Різні типи списків можна вживати одночасно один з одним. Марковані списки вводяться тегом <ul>…</ul>: Щоб ввести елементи списку (текст один, текст інший) нам потрібно ввести в нашу конструкцію тег <li> (непарний): У тега <li> є атрибут type, він відповідає за стиль елементу списку, візуально це виглядає так: <Li type="disk"> зафарбоване коло (за замовчуванням) <Li type="circle"> пусте коло <li type="square">квадрат Атрибут type може вводитися не тільки для кожного елементу списку <li>, але і для всього списку в цілому: <ul type="square"> А тепер наведу вам приклади маркованих типів: А зараз я розповім вам про свої улюблені речі. Квіти: <UL> <LI>Троянди <LI>Волошки </UL> Тварини <UL type=circle> <LI >Кішки <LI >Тигри </UL> Заняття <UL> <LI >Вишивання <LI type=square>Розгадування головоломок <LI type=circle>Прослухування музики</LI></UL> проглянути На цьому з маркованими списками ми закінчили, тепер поговоримо про впорядковані списки.

Крок 12. Списки. Впорядковані списки вводяться тегом <ol>: <ol> </ol> Як і у випадку з маркованими списками, нам потрібно ввести в нашу конструкцію тег <li> Для впорядкованих списків також може уживатися атрибут type. Для впорядкованих списків можливі наступні значення атрибуту type: 1 арабські цифри 1, 2, 3. . . а букви нижнього регістра а, b, с … A букви верхнього регістра A, B, C. . . i римські цифри в нижньому регістрі i, iii. . . I римські цифри у верхньому регістрі I, III. . . Розглянемо нумеровані списки на прикладі моєї веб-сторінки: Музика <OL> <LI>Гурт "Evanescence" <LI>Avril Lavigne <LI>Міка Newton <LI>Віталій Козловський</OL> Жанри літератури <OL type=a> <LI>Фентeзі <LI>Містика <LI>Триллери</OL> проглянути Крок 11 Зміст

Тестові завдання 1. Що можна використовувати для проглядання HTML-сторінки? а) Microsoft Word б) Microsoft Internet Explorer в) Microsoft Front. Page Express r) Home. Site д) Netscape Navigator е) Opera ж) Mozilla з) Notepad и) Windows к) Linux л) Photo. Shop м) Google. com 2. Що можна використовувати для проглядання коду HTML-сторінки? а) Microsoft Word б) Microsoft Internet Explorer в) Microsoft Front. Page Express r) Home. Site д) Netscape Navigator е) Opera ж) Mozilla з) Notepad и) Windows к) Linux л) Photo. Shop м) Google. com

Тестові завдання 3. Як виглядатиме у вікні броузера наступний фрагмент HTML-сторінки? Для того, щоб броузер сприймав вміст файлу як HTML-код, цей файл . htm або . html: повинен мати розширення а) Для того, щоб броузер сприймав вміст файлу як HTML-код цей файл повинен мати розширення. htm або. html б) Для того, щоб броузер сприймав вміст файлу як HTML-код цей файл повинен мати розширення. htm або. html в) Для того, щоб броузер сприймав вміст файлу як HTML-код цей файл повинен мати розширення. htm або. html 4. У якому випадку абзац буде вирівняний по лівому краю? а) <Р align = center> Цей абзац вирівняний по лівому краю? б) <Р align = left> Цей абзац вирівняний по лівому краю? в) <Р align = right> Цей абзац вирівняний по лівому краю? г) <Р align = justify> Цей абзац вирівняний по лівому краю? д) <Р> Цей абзац вирівняний по лівому краю? е) <Р align> Цей абзац вирівняний по лівому краю?

Навчальний посібник Уважаємі Зміст Список тег Завдання Від автора користувачі! Хочеться вірити, що ця програма допоможе вам легко ознайомитися з мовою HTML і досягнути найвищих результатів. УСПІХУ В А М ! ! !

Скачать презентацию Електронний навчальний посібник для створення вебсторінок Елементарний HTML

b643509aaedbe0c845dfae0a93772b06.ppt

Количество слайдов: 40