Инфоурок Информатика Другие методич. материалыЛабораторная работа "Форматирование web-страницы с помощью таблиц"

Лабораторная работа "Форматирование web-страницы с помощью таблиц"

Скачать материал

Лабораторная работа

Тема: «Форматирование web-страницы с помощью таблиц»

Цель работы: получить представление о методах и средствах сопровождения сайта образовательной организации

Теоретические сведения

Создание и форматирование таблиц

Таблицы являются очень удобным средством форматирования данных на Web-станице. Они позволяют решать чисто дизайнерские задачи: выравни­вать части страницы относительно друг друга, размещать рядом рисунки и текст, управлять цветовым оформлением и т. д.

При создании таблиц используется принцип вложения: внутри основного элемента таблицы <table> создается ряд элементов, определяющих строки <tr>, а внутри этих элементов размещаются элементы для описания каждой ячейки <td> в строке.

<table>. . .</table> — внешний элемент таблицы.

<TR>...</tr> — элемент, задающий строку таблицы. Конечный тэг можно не использовать, так как строка заканчивается там, где начинается следующая строка.

<TD>...</td> — элемент, задающий ячейку таблицы. Конечный тэг также можно не использовать.

Для примера опишем таблицу, которая будет состоять из двух строк и двух столбцов. На рисунке схематично представим расположение элементов, описывающих таблицу.

<Table>

 

<TR><TD> Здесь может быть текст или кapтинка1</td>

</tr><TD> Здесь может быть текст или картинка2 < /td>

<TR><TD Здесь может быть текст или кapтинка3  </td>

</tr><TD> Здесь может быть текст или кapтинка4 </td>

</table>

А вот как будет выглядеть описание этой таблицы на языке HTML:

 

<HTML>

<HEAD>

<TITLE> Пример создания таблицы </title>

<МЕТА http-equiv="Content-Type" content="text/html; charset=windows-1251">

<META name="Author" content="IVAN IVANOV">

<META name="Keywords" content="Таблица, создание, пример, table">

</head>

<BODY>

<TABLE>

<TR>

               <TD> Здесь может быть текст или картинка1 </td>

               <TD> Здесь может быть текст или картинка2 </td>

         </tr>

         <TR>

             <TD> Здесь может быть  текст или картинкаЗ  </td>

            <TD> Здесь может быть  текст или картинка4  </td>

          </tr>

      </table>

</body>

</html>

Ширину и высоту таблицы можно задавать точно в пикселах или в про­центном отношении к ширине страницы в окне браузера. Существуют стан­дартные атрибуты:

·         Width - ширина;

·         Height – высота;

Предположим, нам нужно задать таблицу определенного размера, например, шириной в 500 пикселов, тогда  мы укажем:

<TABLE width="500">

    <TR>

        <TD> Ширина этой таблицы 500 пикселов и она состоит из одной строки и одного столбца.</td>       

    </tr>

</table>

Если мы хотим получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора (800x600, 1024x768, 1280x1024) у того, кто будет просматривать нашу Web-страницу, то мы зададим ширину страницы, как 100%.

<TABLE width="100%">

    <TR>

       <TD> Ширина этой таблицы 100% </td>

       <TD> и она состоит из одной строки и двух столбцов </td>

   </tr>

</table>

Для всей таблицы может быть задан цвет фона: bgcolor="Цвет" или bgcolor="#RRGGBB".

В этом случае атрибут bgcolor помещается внутри элемента <table>, на­пример:

<TABLE width="50%"  bgcolor="#00CC99">

    <TR>

        <TD> Ширина  этой таблицы 50%</td>

    </tr>

    <TR>

        <TD> и она состоит из двух строк и одного столбца </td>

    </tr>

</table>

Можно  задавать  отдельно  цвет  ячеек  таблицы.   В  этом  случае  атрибут bgcolor помещается внутри элемента <td>, например:

<TABLE width="600 align="center">

    <TR>

<TD bgcolor="#00FFFF"> </td>

<TD bgcolor="#CCFF00"> </td>

<TD bgcolor="#FF6633"> </td>

        </tr>

        <TR>

<TD bgcolor="#0000FF"> </td>

<TD bgcolor="#33FF66"> </td>

<TD bgcolor="#FF00FF"> </td>

       </tr>

       <TR>

<TD bgcolor="#CCCCCC"> </td>

<TD bgcolor="#9933FF"> </td>

<TD bgcolor="#FFFFCC"> </td>

       </tr>

</table>

С помощью атрибута border можно задавать ширину рамки таблицы в пикселах. Например:

<TABLE width="300" bgcolor="#00CC99" border="3">

    <TR>

         <TD> </td>

         <TD> Ширина этой таблицы 300 пикceлoв</td>

         <TD> </td>

   </tr>

   <TR>

        <TD> и она состоит из двух строк и трех cтoлбцoв</td>

        <TD> </td>

        <TD> </td>

   </tr>

</table>

Можно сделать грани таблицы невидимыми, для этого ширину рамки таб­лицы нужно задать равной 0:

<TABLE width="300" bgcolor="#00CC99" border="0">

     <TR>

         <TD> </td>

         <TD> Ширина этой таблицы 300 пикселов</td >

        <TD> </td>

     </tr>

     <TR>

          <TD> и она состоит из двух строк и трех столбцов</td >

          <TD> </td>

          <TD> </td>

     </tr>

</table>

Существует набор атрибутов, предназначенных для выравнивания данных в ячейках таблиц. Атрибут align позволяет выравнивать данные в ячейках по горизонтали. Он принимает следующие значения:

·         Left — выравнивание влево;

·         Right — выравнивание вправо;

·         Сenter — центрирование.

Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть следующие:

·         Тор — выравнивание по верхнему краю ячейки;

·         Center — выравнивание по центру;

·         Baseline — выравнивание по первой строке.

Например:

<TABLE width="100%"  border="l"   align="center">

     <TR>

          <ТD><В>Выравнивание по горизонтали </b></td>

          <TD align="center"> По центру </td>

          <TD align="left"> По левому краю </td>

          <TD align="right"> По правому краю </td>

    </tr>

    <TR>

          <TD <В>Выравнивание по вертикали </b></td>

          <TD valign="top"> По верхнему краю </td>

          <TD valign="middle"> По центру </td>

          <TD valign="baseline"> По нижнему краю </td>

    </tr>

</table>

 

Ход работы:

Задание 1. Создание таблицы по образцу

Указания к выполнению:

·          Создайте новую Web-страницу в редакторе Блокнот.

·         В элементе <title> укажите название странички "П/р № 5. Задание 1.

·         Создайте таблицу, как показано на рисунке

Один

Два

Три

Четыре

Пять

Шесть

·         Обратите внимание на выравнивания в ячейках, на размер шрифта (он меняется от 1 до 6), начертание и цвет шрифта (он должен быть разным в каждой ячейке).

 

Задание 2. Форматирование таблицы

Указания к выполнению:

·         Для выполнения этого задания воспользуйтесь результатами выполне­ния Задания 1.

·         В элементе <title> укажите название странички "П/р № 5. Задание 2".

·         Сделайте фон таблицы зеленого цвета.

·         Задайте ширину бордюра таблицы, равным 3 пикселам.

·         Ширину таблицы сделайте равной ширине экрана.

·         Шрифт, которым написан текст внутри таблицы, сделайте белым.

Задание 3. Заполнение таблицы

Указания к выполнению:

·         В элементе <title> укажите название странички "П/р № 5. Задание 3".

·         Вставьте таблицу из одной строки и двух столбцов.

·         В    первую    ячейку     строки    вставьте    рисунок    из    файла tanya.jpg. Расположите рисунок по центру.

·         Во второй ячейке второй строки напишите и красиво оформите четверости­шие:
Наша Таня горько плачет,
Уронила в речку мячик
Тише, Танечка, не плачь,
Не утонет в речке мяч.

·         Фон первой ячейки - желтый, фон второй – голубой.

·         Над таблицей заголовок  с названием и фамилией автора.

 

Задание 4. Самостоятельное проектирование и создание таблицы

Указания к выполнению

·         Составьте таблицу для расписания ваших уроков. Пусть эта таблица со­стоит из семи столбцов и девяти строк.  Ширина таблицы — 100%.

·         В первом столбце укажите время начала и конца ваших уроков. Вырав­нивание данных в ячейках должно быть по левому краю.

·         В остальных столбцах укажите школьные предметы по дням недели. Не забудьте указать названия дней.

·         Выравнивание дней недели — по центру ячейки и жирным шрифтом.

·         Выравнивание  названий  предметов в ячейках должно быть по левому краю.

·         У всех столбцов фон сделайте разным цветом.

·         Перед таблицей поместите заголовок "РАСПИСАНИЕ УРОКОВ", выде­лив его тэгами <H1> и </hl>. Цвет заголовка — красный.

·         Между заголовком и таблицей найдите самостоятельно  и поместите рисунок.

 

Покажите работу преподавателю.

Критерии оценки лабораторных работ

Оценка «отлично»

-    при выполнении задания на 100% и верном ответе на дополнительные вопросы.

Оценка «хорошо»

-    при выполнении задания на 85-90% и верном ответе на дополнительные вопросы.

Оценка «удовлетворительно»

-    при выполнении задания на 60-85% и затруднениях при ответе на дополнительные вопросы.

Оценка «неудовлетворительно»

-    при выполнении задания менее чем на 60% и затруднениях при ответе на дополнительные вопросы.

 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Лабораторная работа "Форматирование web-страницы с помощью таблиц""

Методические разработки к Вашему уроку:

Получите новую специальность за 2 месяца

Педагог-психолог

Получите профессию

Копирайтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 747 628 материалов в базе

Скачать материал

Другие материалы

Презентация на тему "Использование Интерактивной системы компьютерного сервиса на уроках информатики"
  • Учебник: «Информатика», Босова Л.Л., Босова А.Ю.
  • Тема: Глава 2. Компьютер как универсальное устройство для работы с информацией
  • 09.12.2023
  • 128
  • 2
«Информатика», Босова Л.Л., Босова А.Ю.

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 09.12.2023 232
    • DOCX 76.7 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Розова Евгения Николаевна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

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

    Удалить материал
  • Автор материала

    Розова Евгения Николаевна
    Розова Евгения Николаевна
    • На сайте: 1 год и 3 месяца
    • Подписчики: 0
    • Всего просмотров: 575
    • Всего материалов: 2

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Мини-курс

Цифровые валюты и правовое регулирование

4 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Психология и педагогика в работе с подростками

5 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 76 человек из 31 региона
  • Этот курс уже прошли 54 человека

Мини-курс

Оказание первой помощи

4 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 590 человек из 73 регионов
  • Этот курс уже прошли 1 836 человек