У вас вопросы?
У нас ответы:) SamZan.net

Тема- Створення текстової HTMLсторінки Мета роботи- освоїти основні прийоми роботи створення HTMLсторінки за

Работа добавлена на сайт samzan.net:

Поможем написать учебную работу

Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.

Предоплата всего

от 25%

Подписываем

договор

Выберите тип работы:

Скидка 25% при заказе до 26.12.2024

Практична робота №2 

Тема: Створення текстової HTML-сторінки

Мета роботи: освоїти основні прийоми роботи створення HTML-сторінки за допомогою текстового редактору "Блокнот" та методику використання тегів форматування тексту та HTML-документу.

Хід роботи:

  1.  Підготовчі роботи:
  •  Створюємо теку де будуть розміщуватись HTML-файли. Наприклад на диску Е створюємо теку  HTML.
  •  Встановлюємо настройки для відображення розширень файлів. Для цього заходимо в нашу теку та вибираємо команди меню "Сервис" –> "Свойства папки". У вікні "Свойства папки" переходимо на вкладку "Вид" та знімаємо перемикач у рядку "Скрывать расширения для зарегистрированных типов файлов" (рис.1).

Рис. 1 Настройка папки для відображень розширення файлів

  1.  В теці HTML створюємо текстовий документ з назвою text.html. При цьому повинно з’явитись вікно запиту зміни розширення файлу (рис.2). В цьому вікні натискаємо на кнопку "Да". Іконка, файлу text.html зміниться на таку, що відповідає браузеру.

Рис. 2. Вікно запиту зміни розширення файлу

  1.  Відкриваємо файл text.html за допомогою браузеру (рис.3). Відзначимо, що на цей момент файл порожній.

Рис. 3 Відображення порожнього файлу text.html у вікно браузера

  1.  Для запису інформації у файл text.html вибираємо наступні меню браузера, "Вид" –> "Просмотр HTML-кода".  У відповідь на це відкривається вікно текстового редактора "Блокнот" з файлом text.html.
  2.  В редакторі "Блокнот" записуємо HTML-код, що визначає основні розділи HTML-документу, встановлює кодування Windows-1251 та встановлює назву документу "Практична робота №2". Відзначимо, що назва HTML-документу відображається в рядку заголовку браузера.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;

charset=windows-1251">

<title> Практична робота №2</title>

</head>

<body>

</body>

</html>

  1.  Зберігаємо в блокноті записаний текст, переходимо в браузер та за допомогою кнопки "Обновить" оновлюємо сторінку text.html (рис.4).

Рис. 4 Відображення назви HTML-документу

  1.  Для визначення тексту напівжирними символами, курсивом та підкресленими символами в тілі HTML-документу записуємо:

<body>

<b>напівжирні символи</b>,

         <i>курсив</i>, 

        <u>підкреслені символами</u>,

        <b><i><u>комбінація</u></i></b>

</body>

Зберігаємо документ у "Блокноті" та оновлюємо його в браузері (рис. 5)

Рис. 5 Форматування тексту

  1.  Додамо в HTML-документ формулу  X2+X4 = Yi. Для цього в кінці тіла документу допишемо:

…

<br>X<sup>2</sup>+X<sup>4</sup>=Y<sub>i</sub>

</body>

Відзначимо, що тег <br> використано для запису формули з нового рядка.

  1.  Додамо в наш документ HTML-код для відображення тексту у вигляді заголовків:

…

<h1>Заголовок 1</h1>

<h2 align="center">Заголовок 2. Вирівнювання "по центру"</h2>

<h3 align="right">Заголовок 3. Вирівнювання "по правому краю" </h3>

<h4>Заголовок 4</h4>

<h5>Заголовок 5</h5>

<h6>Заголовок 6</h6>

</body>

Фрагмент вікна браузера з текстом у вигляді заголовків показаний на рис.6.

  1.   Додамо в документ три фрагменти тексту, червоного кольору. Перший фрагмент запишемо шрифтом "Arial", розміром 7, другий шрифтом "GothicG" розміром 3, "Verdana" розміром 1. Для цього додамо наступний HTML-код:

…

<br><font face="Arial" size="7" color="Red">Перший фрагмент

тексту</font>

<br><font face="GothicG" size="3" color="Red">Другий фрагмент

тексту</font>

<br><font face="Verdana" size="1" color="Red">Третій фрагмент

тексту</font>

</body>

Відповідний фрагмент вікна браузера показаний на рис. 7.

Рис. 6. Відображення заголовків

Рис. 7. Використання тегу <font>

  1.  За допомогою тегів абзаців та ліній розділимо наш HTML-документ на окремі частини. До того ж визначимо, що колір фону сторінки сірий, а колір тексту коричневий. Крім того встановимо, що горизонтальні відступи від об’єктів HTML-сторінки до границь вікна браузера дорівнюють 3, а  вертикальні 2 пікселі. Для цього змінимо HTML-код наступним чином:

<body leftmargin=2 topmargin=1 bgcolor="Silver" text="Maroon">

<p align="right">

<b>напівжирні символи</b>,  <i>курсив</i>,  <u>підкреслені

символами</u>,

<b><i><u>комбінація</u></i></b>

<br>X<sup>2</sup>+X<sup>4</sup>=Y<sub>i</sub>

</p>

<hr width="100%" size="2" noshade>

<h1>Заголовок 1</h1>

<h2 align="center">Заголовок 2. Вирівнювання "по центру"</h2>

<h3 align="right">Заголовок 3. Вирівнювання "по правому краю" </h3>

<h4>Заголовок 4</h4>

<h5>Заголовок 5</h5>

<h6>Заголовок 6</h6>

<hr width="70%" size="3" noshade>

<p align="center">

<br><font face="Arial" size="7" color="Red">Перший фрагмент

тексту</font>

<br><font face="GothicG" size="3" color="Red">Другий фрагмент

тексту</font>

<br><font face="Verdana" size="1" color="Red">Третій фрагмент

тексту</font>

</p>

</body>

Відображення даної HTML-сторінки у вікні браузера показане на рис. 8.

Рис. 8. Використання форматування текстової частини HTML-документу

Завдання для самостійної роботи

1. Оформити у вигляді HTML-документу титульну сторінку курсової роботи з вказаної викладачем навчальної дисципліни.

2. Оформити звіт.

Питання для самоперевірки

  1.  Як визначити розмір вертикального відступу від тексту до границі браузера?
    1.  Як визначити розмір горизонтального відступу від тексту до границі браузера?
    2.  Як визначити колір тексту для всього документу?
    3.  Як визначити колір фрагменту тексту?
    4.  Як визначити шрифт, яким текст буде відображуватись у вікні браузера?
    5.  Як записати тег лінії з товщиною в 5 пікселів?
    6.  Чи можливо задати лінію товщиною в 200 пікселів?
    7.  Як записується тег заголовку 5 розміру з вирівнюванням по центру?
    8.  Як записується тег абзацу з вирівнюванням по лівому краю?
    9.  Яким чином задати обов’язкове відображення фрагменту тексту з нового рядка?

ВИСНОВКИ_______________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________

PAGE  8




1. і Українська мова має складну історію розвитку особливо в радянські часи
2. Социальная стратификация и социальная мобильность
3. а регулировать въезд и выезд из губернии бПроводить реквизиции в запрещать вывоз средств которые могли был
4. Задание- Создайте памятник который называется так-
5. вариант Найдите имена существительные 1
6. правовая наука характеризующая социальные экономические и политические основы государства и права как яв
7. Финансовые условия внешнеэкономических контрактов
8. варианта управляемой самостоятельной работы 3
9. государственная политика занятости и ее эффективность
10. ТАМОЖЕННЫЙ МЕНЕДЖМЕНТ Специальность- 080115
11. тема нормативноправових актів які регламентують суспільні відносини у сфері раціонального використання і
12. Лечебное дело Акушерское дело
13. темат удоск Вибння Компетентність осіб які здійснюють процес управління Вибння Якість управлінського
14. ВИБІР КОНСТРУКЦІЇ ТА ГЕОМЕТРІЇ РІЖУЧОГО ІНМТРУМЕНТУ
15. Тесты по биологии для школ (к сожалению без ответов)
16. беспроводная среда может ввести в заблуждение поскольку как бы означает полное отсутствие проводов в сети.
17. ведя называют хозяином дремучих лесов
18. ГОСПОДА ГОЛОВЛЕВЫ
19. Введение Актуальность исследования определяется тем что проблема безработицы является одной из важнейши
20. Ощущения в жизнедеятельности человека

Материалы собраны группой SamZan и находятся в свободном доступе