Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Тема: загальні принципи створення сайтів. Вивчення мови розмітки гіпертекстів HTML. ⇐ ПредыдущаяСтр 3 из 3
Мета роботи: Ознайомитись з технологією створення Web-сайтів. Вивчення мови розмітки гіпертексту HTML. Вивчити основні теги Web-документу, навчитися створювати нумеровані та маркеровані списки, таблиці. Звіт: вказати номер, тему, мету роботи, створити таблицю тегів та включити тексти створених документів sample1.htm–sample7.htm. Зробити висновки по роботі. ЗАВДАННЯ 1. Вивчіть теоретичний матеріал для виконання роботи. 2. Перевірте наявність програмного забезпечення, що необхідне для виконання лабораторних робіт: оглядачі Internet Explorer 5.0 або вище або FireFox, Блокнот або інший текстовий редактор. 3. Створіть файли sample1.htm–sample7.htm. 4. Створіть порівняльну таблицю всіх відомих Вам тегів. Для зручності розташуйте теги у алфавітному порядку. Створена таблиця буде постійно поповнюватись по мірі вивчення HTML і може бути використана в якості довідкового матеріалу (Табл. 4.1.). Таблиця тегів Табл. 4.1
5. Захистіть лабораторну роботу Хід роботи Як влаштований HTML–документ HTML-документ – це текстовий файл з розширенням *.htm (Unix-системи можуть містити файли з розширенням *.html). Текстовий редактор, наприклад, WordPad або Notepade (Блокнот) використовується для підготовки HTML-файлів, а оглядач, наприклад, Internet Explorer – як інструмент контролю за зробленим.
Приклад 1. У текстовому редакторі, наприклад WordPad або Notepade (Блокнот) введіть простий HTML-документ: <html> <head> <title> Приклад 1 </title> </head> <body> <H1> Початок! </H1> <P> Це найпростіший приклад HTML-документа. </P> <P> Цей sample.htm-файл може бути одночасно відкритий і у Notepad (або WordPad), і у Internet Explorer. Збережіть зміни в Notepad (Файл–Сохранить). Відкрийте sample.htm у Internet Explorer, щоб побачити зміни реалізовані у HTML-документі. </P> </body> </html>Для зручності читання були введені абзаци, але у HTML це не обов'язково. Браузери ігнорують символи кінця рядку і пропуски у HTML–файлах. Змініть sample1.htm таким чином і збережіть зміни:
Зробіть активним вікно Internet Explorer з відкритим файлом sample1.htm і застосуйте команду Обновить. Вся інформація про форматування документа зосереджена в його фрагментах, що знаходяться між знаками "<" і ">". Такий фрагмент (наприклад, <html>) називається тегом (англійською–tag). Більшість HTML–тегів–парні, на кожний тег, що відкривається <tag> є тег, що закривається</tag> з тим же ім'ям, але додається "/". Теги можна вводити як великими, так і маленькими літерами. Наприклад, теги <body>, <BODY> и <Body> будуть сприйматись браузером однаково. Багато тегів, крім імені, можуть містити атрибути –елементи, що дають додаткову інформацію про те, як браузер повинен обробляти поточний тег. Обов'язкові теги <html>... </html> Тег <html> відкриває HTML–документ. Тег </html> – завершує HTML–документ. <head>... </head> Ця пара тегів вказує на початок і кінець заголовку документа. Крім назви документа, в цей розділ можна додати багато службової інформації. <title>... </title> Все, що знаходиться між мітками <title> і </title>, тлумачиться оглядачем як назва документа. Оглядач показує назву поточного документа у заголовку вікна. Рекомендується назва не довша 64 символів. <body>... </body> Ця пара тегів вказує на початок і кінець HTML–документа, тіло і визначає вміст документа. Теги форматування <H1>... </H1>–<H6>... </H6> Теги виду <Hi> (де i–цифра від 1 до 6) описують заголовки шести різних рівнів. Заголовок першого рівня–самий крупний, шостого рівня–самий дрібний. <P>... </P> Така пара тегів описує абзац. Все, що знаходиться між <P> і </P>, сприймається як один абзац.
Теги <Hi> і <P> можуть містити додатковий атрибут ALIGN ("вирівнювати"), наприклад: <H1 ALIGN=CENTER> Вирівнювання заголовку по центру</H1>або <P ALIGN=RIGHT> Зразок абзацу з вирівнюванням по правому краю </P>Приклад 2. У редакторі Notepade створіть файл sample2.htm з таким вмістом: <html> <head> <title>Приклад 2</title> </head> <body> <H1 ALIGN=CENTER>Продовження!</H1> <H2>Це складніший приклад HTML–документа</H2> <P>Тепер ми знаємо, що абзац можна вирівнювати не тільки вліво, </P> <P ALIGN=CENTER> але й по центру </P> <P ALIGN=RIGHT> або по правому краю.</P> </body> </html>Перегляньте файл sample2.htm у браузері Internet Explorer. Непарні теги та &–послідовності <BR> Цей тег використовується для переходу на новий рядок, не перериваючи абзац. Приклад 3. У редакторі Notepade створіть файл sample3.htm з таким вмістом: <html> <head> <title>Приклад 3</title> </head> <body> <H1>Деякі положення</H1> <H2>Основи роботи</H2> <P>HTML–файли розробляються на локальному диску <BR> Іншими словами, комп'ютер, на якому виконуються роботи може і не мати підключення до Інтернет<BR> *.htm–файл може бути одночасно відкритий і у Notepad (або WordPad), і у Internet Explorer. <BR> Для того, щоб побачити зміни, що зроблені у текстовому редакторі, у Internet Explorer, застосовується команда Обновить <BR> </body></html><HR> Тег <HR> описує горизонтальну лінію:
Тег може включати атрибути SIZE (визначає товщину лінії в пікселях) і/або WIDTH (визначає розмах лінії в процентах від ширини екрана). Приклад 4. У редакторі Notepade створіть файл sample4.htm колекції горизонтальних ліній з таким вмістом: <html> <head> <title>Приклад 4</title> </head> <body> <H1>Колекція горизонтальних ліній</H1> <HR SIZE=2 WIDTH=100%><BR> <HR SIZE=4 WIDTH=50%><BR> <HR SIZE=8 WIDTH=25%><BR> <HR SIZE=16 WIDTH=12%><BR> </body> </html> &–послідовності Символи "<" і ">" сприймаються браузерами як початок і кінець HTML–тегів. Для того, щоб показати ці символи на екрані в HTML використовуються &–послідовності (символьні об'єкти або эскейп–послідовності). Браузер показує на екрані символ "<", коли зустрічається в тексті послідовність <. Знак ">" – кодується послідовність > (за першими буквами англійських слів greater than–більше, ніж). Символ "&" (амперсанд) кодується послідовністю & Послідовність лапки (") кодується послідовністю " Крапка з комою – є обов'язковими елементами &– послідовності. Крім того, всі літери, що складають послідовність, повинні бути в нижньому регістрі (тобто маленькі). Використання тегів типу " або & не допускається. &–послідовності визначені для всіх символів з другої половини ASCII–таблиці (куди входять і російські букви). Деякі сервери не підтримують восьми бітну передачу даних, і тому можуть передавати символи з ASCII–кодами вище 127 тільки у вигляді &–послідовностей. Коментарі Браузери ігнорують будь–який текст, що розміщений між <!–– і ––>. Це зручно для розміщення коментарів. <!–– Це коментар ––> 3. Форматування шрифтаHTML допускає два підходи до шрифтового виділення фрагментів тексту. З одного боку, можна прямо вказати, що шрифт на деякій ділянці тексту повинен бути жирним або нахиленим, тобто змінити фізичний стиль тексту. З іншого боку, можна помістити деякий фрагмент тексту, що має деякий відмінний від нормального логічний стиль, залишивши інтерпретацію цього стилю браузеру.
Фізичні стилі Під фізичним стилем прийнято розуміти пряму вказівку браузеру на модифікацію поточного шрифту. Наприклад, все, що знаходиться між тегами <B> і </B>, буде написано жирним шрифтом. Текст між мітками <I> і </I> буде написаний нахиленим шрифтом. Текст, розміщений між тегами <TT> і </TT>, буде написаний шрифтом, що імітує друкарську машинку, тобто має фіксовану ширину символів. Логічні стилі При використанні логічних стилів автор документа не може знати напевне, що побачить на екрані читач. Різні браузери відтворюють одні й ті ж теги логічних стилів по–різному. Деякі браузери ігнорують деякі мітки і показують нормальний текст замість виділеного логічним стилем. Приклади логічних стилів. <EM>... </EM> Від англійського emphasis–акцент. <STRONG>... </STRONG> Від англійського strong emphasis–сильний акцент. <CODE>... </CODE> Рекомендується використовувати для фрагментів вихідних текстів. <SAMP>... </SAMP> Від англійського sample–взірець. Рекомендується використовувати для демонстрації взірців повідомлень, що виводяться на екран програмами. <KBD>... </KBD> Від англійського keyboard–клавіатура. Рекомендується використовувати для вказівки того, що потрібно ввести з клавіатури. <VAR>... </VAR> Від англійського variable–змінна. Рекомендується використовувати для написання імен змінних.
Приклад 5. У редакторі Notepade створіть файл sample5.htm з таким вмістом: <html> <head> <title>Приклад 5</title> </head> <body> <H1>Шрифтове виділення фрагментів текста</H1> <P> Ми знаємо, що фрагменти тексту можна виділяти <B> жирним </B> або <I> нахиленим </I> або <U>підкреслиним</U>шрифтами. Крім того, можна включати в текст фрагменти з фіксованою шириною символу <TT>(імітація друкарської машинки)</TT></P> <P>Існує ряд логічних стилів:</P> <P><EM>EM – акцент </EM><BR> <STRONG>STRONG – сильний акцент </STRONG><BR> <CODE>CODE – для фрагментів вихідних текстів</CODE><BR> <SAMP>SAMP – взірець </SAMP><BR> <KBD>KBD – клавіатура</KBD><BR> <VAR>VAR – змінна </VAR></P> </body> </html> 4. Організація тексту всередині документаHTML дозволяє визначати вигляд цілих абзаців тексту. Абзаци можна організовувати в списки, виводити їх на екран у відформотованому вигляді тощо. Розберемо все по порядку.
Маркіровані списки: <UL>... </UL> Текст, розташований між мітками <UL> і </UL>, сприймається як маркірований список. Кожен новий елемент списку починається з тегу <LI>. Наприклад, щоб створити маркірований список: · 1 елемент списку; · 2 елемент списку; · 3 елемент списку. необхідно записати такий HTML–текст: <UL> <LI>1 елемент списку; <LI>1 елемент списку; <LI>1 елемент списку; </UL>У тега <LI> немає парного закриваючого тегу. Нумеровані списки: <ol>... </ol> Текст, розташований між мітками <ol> і </ol>, сприймається як нумерований список. Кожен новий елемент списку починається з тегу <LI>. Наприклад, щоб створити нумерований список: 1 елемент списку; 2 елемент списку; 3 елемент списку. необхідно записати такий HTML–текст: <OL> <LI>1 елемент списку; <LI>2 елемент списку; <LI>3 елемент списку; </OL>Приклад 6. У редакторі Notepade створіть файл sample6.htm з таким вмістом: <html> <head> <title>Приклад 6</title> </head> <body> <H1>Створення маркірованих списків</H1> <UL> <LI>1 елемент списку; </LI> <LI>1 елемент списку; </LI> <LI>1 елемент списку; </LI></UL><H1>Створення нумерованих списків</H1> <OL> <LI>1 елемент списку; </LI> <LI>2 елемент списку; </LI> <LI>3 елемент списку; </LI></OL><DT>Списки визначень <DD>Цей вид списків складніший, ніж два попередніх, але він виглядає більш ефектно. <P>Списки можна вбудовувати один в другий, але не слід вбудовувати багато рівнів. </P> <P>Всередині елемента списку може знаходитись декілька абзаців. Всі абзаци при цьому будуть мати однакове ліве поле. </P> </DL> </body> </html> Перегляньте результат у оглядачі. Форматированный текст: <PRE>... </PRE>Текст, розміщений між мітками <PRE> и </PRE> (від англійського preformatted–попередньо форматований), виводиться браузером на екран як є–зі всіма пропусками, символами табуляції і кінця рядку. Текст с отступом: <BLOCKQUOTE>... </BLOCKQUOTE> Текст, розміщений між мітками <BLOCKQUOTE> і </BLOCKQUOTE>, виводиться браузером на екран зі збільшеним лівим полем. Таблиці Таблиці потрібні для представлення інформації в табличному виді, а також для необхідного розміщення тексту та рисунків. Приклад 7. У редакторі Notepade створіть файл sample7.htm. Коментарі можна не друкувати. <HTML> <HEAD> <TITLE>Приклад 10</TITLE> </HEAD> <H1>Найпростіша таблиця </H1> <TABLE BORDER=1> <!–Це початок таблиці–> <CAPTION> <!–Це заголовок таблиці–> У таблиці може бути заголовок </CAPTION> <TR> <!–Це початок першого рядка–> <TD> <!–Це початок першої комірки–> Перший рядок, перший стовпчик </TD> <!–Це кінець першої комірки–> <TD> <!–Це початок другої комірки–> Перший рядок, другий стовпчик </TD> <!–Це кінець другої комірки–> </TR> <!–Це кінець першого рядка –> <TR> <!–Це початок другого рядка–> <TD> <!–Це початок першої комірки–> Другий рядок, перший стовпчик </TD> <!–Це кінець першої комірки–> <TD> <!–Це початок другої комірки–> Другий рядок, другий стовпчик </TD> <!–Це кінець другої комірки–> </TR> <!–Це кінець другого рядка–> </TABLE> <!–Це кінець таблиці–> </BODY> </HTML>Перегляньте sample7.htm у оглядачі.
Таблиця починається з тегу <TABLE> і закінчується тегом </TABLE>. Тег <TABLE> може включати атрибути: ALIGN Встановлює розташування таблиці стосовно полів документа. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центрі), ALIGN=RIGHT (вирівнювання вправо). WIDTH Ширина таблиці. Її можна задати в пікселях (наприклад, WIDTH=400) або у відсотках від ширини сторінки (наприклад, WIDTH=80%). BORDER Встановлює ширину зовнішньої рамки таблиці й комірок у пікселях (наприклад, BORDER=4). Якщо атрибут не встановлений, таблиця показується без рамки. CELLSPACING Встановлює відстань між рамками комірок таблиці в пікселях (наприклад, CELLSPACING=2). CELLPADDIN Встановлює відстань між рамкою комірки і текстом у пікселях (наприклад, CELLPADDING=10).Таблиця може мати заголовок (<CAPTION>... </CAPTION>), хоча заголовок не є обов'язковим. Тег <CAPTION> може включати атрибут ALIGN. Припустимі значення: <CAPTION ALIGN=TOP> (заголовок міститься над таблицею) і <CAPTION ALIGN=BOTTOM> (заголовок міститься під таблицею). Кожен рядок таблиці починається з тега <TR> і закінчується тегом </TR>. Мітка <TR> може включати наступні атрибути: ALIGN Встановлює вирівнювання тексту в комірках рядка. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо). VALIGN Встановлює вертикальне вирівнювання тексту в комірках рядка. Припустимі значення: VALIGN=TOP (вирівнювання по верхньому краю), VALIGN=MIDDLE (вирівнювання по центру), VALIGN=BOTTOM (вирівнювання по нижньому краю).Кожна комірка таблиці починається з тега <TD> і закінчується тегом </TD>. Тег <TD> може включати наступні атрибути: NOWRAP Присутність цього атрибуту означає, що вміст комірки повинен бути показаний в один рядок. COLSPAN Встановлює "розмах" комірки по горизонталі. Наприклад, COLSPAN=3 означає, що комірка простирається на три стовпчики. ROWSPAN Встановлює "розмах" комірки по вертикалі. Наприклад, ROWSPAN=2 означає, що комірка займає два рядки. ALIGN Встановлює вирівнювання тексту в комірці. Припустимі значення: ALIGN=LEFT (вирівнювання вліво), ALIGN=CENTER (вирівнювання по центру), ALIGN=RIGHT (вирівнювання вправо). VALIGN Встановлює вертикальне вирівнювання тексту в комірці. Припустимі значення: VALIGN=TOP (вирівнювання по верхньому краю), VALIGN=MIDDLE (вирівнювання по центру), VALIGN=BOTTOM (вирівнювання по нижньому краю). WIDTH Встановлює ширину комірки в пікселях (наприклад, WIDTH=200). HEIGHT Встановлює висоту комірки в пікселях (наприклад, HEIGHT=40).Якщо комірка таблиці порожня, навколо неї не малюється рамка. Якщо комірка порожня, а рамка потрібна, в комірку можна ввести символьний об'єкт (non–breaking space – пробіл, що не розриває,). Комірка як і раніше буде порожньою, а рамка навколо неї буде. Будь–яка комірка таблиці може містити в собі іншу таблицю.
|
|||||||||||||||
|
|
Последнее изменение этой страницы: 2016-09-13; просмотров: 183; Нарушение авторского права страницы; Мы поможем в написании вашей работы! infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.20.238.187 (0.049 с.) |
