Сторінки

середа, 5 жовтня 2022 р.

Практична робота №2 “Створення веб-сторінки за допомогою «Мови гіпертекстової розмітки».

 Завдання
1.     Створити папку та назвати її власним прізвищем та ім’ям.
2.     У власні папці створити два html документа та назвати «Текст», «Таблиця».
3.     У документі «Текст.html» реалізувати наступне завдання:

Завдання 1: Cтворити веб-сторінку в текстовому редакторі БЛОКНОТ на тему "Тварини Африки". Зміст, який повинна містити веб-сторінка, відображений в наступному файлі нижче:
див. додаток 1 нижче

Завдання 2: 1.     У документі «Таблиця.html» реалізуйте наступне завдання:


див. додаток 2 нижче
Завдання 3:Вашу папку завантажте на Google Диск та надайте доступ на поштову скриньку вчителя vik171288@gmail.com 
Увага! Обов'язково дотримуйтеся технічних вимог у завданні. 
Завдання надіслати до 11 жовтня.

Додаток 1 

    В межах документу виділяються дві області - заголовок та власне "тіло документу". Заголовок оголошується тегами <head> та </head>

    У межах заголовку можуть розміщуватись власне заголовок документу (відображається у верхній стрічці вікна броузера), він створюється тегами <title> та </title>; крім цього у заголовку документу може міститися тег <meta>, який використовується для технічного опису документу (інформація для пошукових програм), а також тег <style>, який використовується для опису стилів, які використовуються у документі.
    Наступним розділом документу HTML є розділ "тіла документу". Він починається тегом <body>, а закінчується тегом </body> . Він має наступні параметри:
  • background = "*.*" Замість *.* вказується адреса малюнка, який повинен бути фоном даного документу
  • bgcolor= Вказується назва або номер кольору, який повинен бути фоновим для даного документу
  • text= Вказується колір тексту
  • link= Визначає колір гіперпосилань у документі
  • alink= Визначає колір гіперпосилань у момент натиснення
  • vlink= Визначає колір переглянутих гіперпосилань
Документ HTML можна розглядати як сукупність вказівок (команд) і даних (як безпосередньо розміщених у документів, так і пов'язаних з ним посиланнями), які при інтерпретації програмою-броузером відтворюють вигляд сторінок документу. Документ HTML складається з так званих тегів.
Для переходу на новий рядок використовується тег <br> .
Для виділення тексту в абзаци існують теги <p> та </p> .
<B> та </В> Напівжирне накреслення
<I> та </I> Курсивне накреслення
<U> та </U> Підкреслене
<S> та </S> Перекреслене
<SUP> та </SUP> Верхній індекс
<SUB> та </SUB> Нижній індекс
<P> абзац (<p align=center> , <p align=right>, <p align=left>).
<BR> новий рядок
&nbsp пробіл
<q> та </q> - цитата (браузер додасть лапки)To be or not to be
<em> та </em>, <strong> та </strong> - виділення тексту EM STRONG
<abbr> - скорочення (при наведенні миші видно повний текст)
<abbr title="got to go">g2g</abbr> GTG
<mark> та </mark> - виділення-підсвітлення mark
Тег <hr> вставляє у документ горизонтальну лінію.
          Заголовки (headings).
Вони позначаються буквою Н.
<h1 align=center>Проекти нашої школи</h1>
< h2 align=left>Наші роботи</h2>
< h3 align=right> Фотогалерея</h3>
<h4 align=center> Музичний калейдоскоп</h4>
 < h5 align=left>Театральна студія</h5>
< h6 align=right> Підсумки роботи</h6>

    Форматування символів    Для оформлення документів може використовуватись багато кольорів. З ними можна ознайомитися на цій сторінці .

                                                 Додаток 2
                           Теги для html-таблиць
Створення таблиці
    <table></table>
Атрибути таблиці:
    align - вирівнювання таблиці на сторінці (значення: left | center | right)
    background - фоновий малюнок
    bgcolor - колір фону таблиці
    border - товщина рамка в пікселях
    bordercolor - колір рамки
    width - ширина таблиці
    height - висота таблиці
    cellpadding - відступ від рамка до вмісту комірки
    cellspacing - відстань між комірками таблиці
    cols - кількість колонок в таблиці
    frame - спосіб відображення рамки навколо таблиці (значення: void - без рамки,  
    border - рамка навколо таблиці "за замовчуванням",  
above - границі по верхньому краю таблиці, 
below - границі по нижньому граю, hsides - тільки горизонтальні границі зверху і знизу,  
vsides - тільки вертикальні границі зліва і справа від таблиці,       
  rhs - границі тільки справа, lhs - границі тільки зліва)
rules - спосіб відображення рамок між комірками (значення: 
all - лінія навколо кожної комірки, 
groups - лінія між групами тегів <thead>, <tfoot>, <tbody>, <colgroup>
 або         <col>, cols - лінія між колонками, 
none - без границь, rows - лінія між рядками, які створені через тег <tr>)
    summary - короткий опис таблиці (не видно у броузері, застарілий, тому не використовується)
Створення рядків:
        <tr></tr>
Створення стовбців:
        <td></td>
Створення стовбця-заголовка:
        <th></th>
Групи рядків:
        <thead></thead> (щоб позначити "шапку" таблиці (назву стовбців)),
        <tbody></tbody> (щоб позначити вміст таблиці),
    <tfoot></tfoot> (щоб позначити підсумок даних, вказаних у таблиці)
Назва (заголовок, підпис) таблиці, він вказується після тегу <table>:
<caption></caption>
 Форматування стовбців таблиці (зовнішній вигляд):
    теги <colgroup></colgroup>, між ними 
    <col> з атрибутами span - кількість стовбців, для яких задається форматування, 
style - стиль форматування (наприклад, колір фону background-color, ширина width)

Приклад створення таблиці можна ознайомитись ТУТ






Опубліковано о

Немає коментарів:

Дописати коментар

Підписатися на: Дописати коментарі (Atom)