Web-сторінку в редакторі Word і безпосередньо з додатка Мій комп'ютер чи Провідник. Для цього досить:
Вибрати у вікні додатка потрібний файл.
У меню Файл вибрати команду Відкрити за допомогою – Microsoft Word (Windows 2000), чи команду Відкрити в Microsoft Word (Windows 98).
8.2 Типове навчальне завдання
8.2.1 Використовуючи один із тектових редакторів, наприклад NotePad, створіть HTML-такого змісту:
<html>
<head>
<title> Приклад 1 </title>
</head>
<body>
<H1> Привіт! </H1>
<P> Це найпростіший приклад HTML-документа </P>
<P> Цей *.html-файл може бути одночасно відкритим
і в Notepad, и в Internet Explorer. Зберігши файл в Notepad,
просто натисніть кнопку "Просмотр в виде HTML" в Internet Explorer, щоб побачити ці зміни реалізованими в HTML-документе.
</P>
</body>
</html>
Запишіть цю структуру і збережіть цей файл, як приклад №1.
8.2.2 Прогляньте створений файл в Internet Explorer, запустивши його і викликавши команду головного меню Файл =>Открыть.
8.2.3 Вирівнювання абзаца. Вставте між <body> і </body> наступний текст
<H1 ALIGN=CENTER>Привіт!</H1>
<H2>Це більш складніший приклад HTML-документа</H2>
<P>Тепер ми знаємо, що абзац можно вирівнювати не тільки вліво, </P>
<P ALIGN=CENTER>але й по центру</P>
<P ALIGN=RIGHT>або по правому краю</P>
8.2.4.Що змінилося при перегляді в браузері? Збережіть ці зміни в іншому файлі, як приклад №2.
8.2.5.Використання непарних тег.
<BR> – Ця мітка використовується, якщо необхідно перейти на новий рядок, не перериваючи абзацу. Дуже зручно при публікації віршів.
<HR> – Ця мітка описує от таку горизонтальну лінію:
Мітка може додатково включати атрибути SIZE (визначає товщину лінії в пікселах) і/чи WIDTH (визначає розмах лінії у відсотках від ширини екрана). Запишемо невеличкий вірш та розглянемо колекцію горизонтальних ліній. Вставте між <body> і </body> наступний текст
<H1>Колекція горизонтальних ліній</H1>
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=4 WIDTH=50%><BR>
<HR SIZE=8 WIDTH=25%><BR>
<HR SIZE=14 WIDTH=20%><BR>
<HR SIZE=16 WIDTH=12%><BR>
<H1>Вірш</H1>
<H2 ALIGN=LEFT> Олександр Олесь</H2>
<H1 ALIGN=CENTER>ПОЧАТКИ РУСІ</H1>
<P>Де стоїть тепер наш Київ,<BR>
Там була сама гора,<BR>
Жив там перший Кий з Хоривом,<BR>
Щек та Либідь - їх сестра. </P>
8.2.6.Збережіть змінений текст і зробіть висновок.
&-послідовності
Оскільки символи "<" і ">" сприймаються браузерами как початок і кінець HTML-міток, виникає питання: а как показати ці символи на екрані? У HTML це робиться за допомогою &-послідовностей (их ще називають символьними чи об'єктами ескейп-послідовательностями). Браузер показує на екрані символ "<", коли зустрічає в тексті послідовність < (по перших буквах англійських слів less than — менше, ніж). Знак ">" кодується послідовністю > (по перших буквах англійських слів greater than — більше, ніж).
Символ "&" (амперсанд) кодується послідовністю &
Подвійні лапки (") кодуються послідовністю "
Пам’ятайте: крапка з комою — обов'язковий елемент &-послідовності. Крім того, усі букви, що складають послідовність, повинні бути в нижньому регістрі (тобто, маленькі). Використання міток типу " чи & не допускається.
Узагалі говорячи, &-послідовності визначені для всіх символів із другої половини ASCII-таблиці (куди, природньо, входять і російські букви). Справа в тім, що деякі сервери не підтримують восьмибітну передачу даних, і тому можуть передавати символи з ASCII-кодами вище 127 тільки у виді &-послідовностей.
Коментарі
Браузери ігнорують будь-який текст, поміщений між <!-- і -->. Це зручно для розміщення коментарів.
<!-і Це коментар -і>
8.2.7.Форматування шрифта. Ознайомтеся з форматуванням шрифта, записуючи між <body> і </body> наступний текст:
<H1>Шрифтове виділення фрагментів тексту</H1>
<P>Тепер ми знаємо, що фрагменти тексту можна виділяти
<B>жирним</B> або <I>наклонним</I> шрифтом. Крім того, можна
включати в текст фрагменти с фіксованою шириною символа
<TT>(імітація пишучої машинки)</TT> - <B>це фізичні стилі</B></P>
<P>Крім того, існує ряд <B>логічних стилів:</B></P>
<P><EM>EM - від англійського emphasis - акцент </EM><BR>
<STRONG>STRONG - від англійського strong - сильний акцент </STRONG><BR>
<CODE>CODE - для фрагментів вихідних текстів</CODE><BR>
<SAMP>SAMP - від англійського sample - взірець(для демонстрації взірців повідомлень) </SAMP><BR>
<KBD>KBD - від англійського keyboard - клавиатура (для вказання того, що потрібно ввести з клавіатури)</KBD><BR>
<VAR>VAR - від англійського variable - переменная (для позначення змінних)</VAR></P>.
8.2.8.Збережіть змінений текст і зробіть висновок.
8.2.9.Списки:нумеровані, ненумеровані і списки визначень. Вставте між <body> і </body> наступний текст:
<H1>HTML підтримує декілька видів списків </H1>
<DL>
<DT>Ненумеровані списки
<DD>Елементи ненумерованого списку виділяються спеціальним
символом и відступом зліва:
<UL>
<LI>Елемент 1
<LI>Елемент 2
<LI>Елемент 3
</UL>
<DT>Нумеровані списки
<DD>Елементи нумерованого списку виділяються відступом зліва, а
також нумерацією:
<OL>
<LI>Елемент 1
<LI>Елемент 2
<LI>Елемент 3
</OL>
<DT>Списки визначень
<DD>Цей вид списків дещо складніший, ніж два попередніх, але і
виглядає більш ефектно.
<P>Памятайте, що списки можна вбудовувати один в інший, але не
варта закладати дуже багато рівнів вкладання. </P>
<P>Зверніть увагу, що всередині елемента списку може знаходитися
декілька абзаців. Всі абзаци при цьому будуть мати одинакове
ліве поле. </P>
</DL>
8.2.10.Збережіть змінений текст і зробіть висновок.
8.2.11.Навчитися використовувати зсилки на документи. Вставте між <body> і </body> наступний текст:
BODY>
<H1>Зв"язування </H1>
<P>За допомогою зсилок можна переходити до інших файлів (наприклад, по <A HREF="Лаб1.html">лабораторній роботі №1 цих методичних вказівок</A>).</P>
<P>Можна вигружати файли (наприклад, <A HREF="ftp://гi.com/home/ChuvakhinNikolai/html-pr.doc"> лабораторний практикум</A>) по FTP.</P>
<P>Можна дати користувачу можливість посилати пошту (наприклад, <A HREF="mailto:nc@iname.com">автору цього практикума</A>).</P>.
8.2.12.Збережіть змінений текст і зробіть висновок.
8.2.13.Завантажте графічний редактор Paint, і створіть невеличкий рисунок для власної Web-сторінки. Збережіть його у файлі на диску, вказаному викладачем.
8.2.14.Використайте створений рисунок на Вашій сторінці за прикладом:
<BODY>
<H1>Зображення </H1>
<P>Зображення можно встроить очень просто: </P>
<P><CENTER><IMG SRC="tigers.gif"ALT="Tiger"></CENTER></P>
<Р><HR SIZE=2 Width=100%><P>
<P>Крім того, зображення можна зробити "гарячим", тобто здійснити перехід при натиску на зображення:</P>
<P><A HREF="Лаб1.html"><IMGSRC="tigers.gif"></A></P>
</BODY>
</HTML>.
8.2.15.Перегляньте створену Вами Web-сторінку. Зробіть зміни, якщо потрібно.
Для цього використайте довідник початківця Web-дизайнера.
Таблиця 8.1 – Теги для форматування тексту
<p> | початок нового абзаца
<br> | наступний за цим тегом текст буде виведено у новому рядку
<hr> | Проводиться горизонтальна лінія
<b> текст </b> | Товстий шрифт тексту, що є між тегами
<i> текст </i> | Шрифт-курсив
<u> текст </u> | Підкреслений шрифт
<sub> текст </sub> | Верхній індекс
<big> текст </big> | Великий шрифт
<small> текст </small> | Малий шрифт
<b><i> текст </i></b> | Товстий курсив
<hi> заголовок </hi>де i=1,2,3,4,5,6 | задання заголовка, де величина і задає