Организация и формирование таблиц. Построение форм
Построение таблицы на Web-странице при помощи языка разметки HTML. Отображение HTML-документа в браузере. Атрибуты таблицы, вычерчивание рамок и управление размером и цветом ячеек. Порядок создания меню и управляющих элементов на гипертекстовой странице.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | лабораторная работа |
| Язык | русский |
| Дата добавления | 07.12.2016 |
| Размер файла | 617,3 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Министерство Образования Республики Беларусь
Белорусский национальный технический университет
Кафедра "Маркетинг"
Отчет о выполнении лабораторной работы
по дисциплине "Компьютерные информационные технологии"
Тема: "Организация и формирование таблиц. Построение форм"
Исполнил: студент группы 10502115
Конончик Ю.А.
Проверил: ст. преподаватель
Ругалёва И.Е.
Минск 2016
Цель работы: приобрести навыки создания таблиц различных структур, приобрести навыки создания форм различных типов.
Ход отчёта
Задания:
1. Построить таблицу следующего вида:
2.
|
Заголовок 1 |
Заголовок 2 |
||||
|
Заголовок 3 |
Ячейка 1 |
Ячейка 1 |
Ячейка 2 |
Ячейка 3 |
|
|
Таблицы 2 |
Таблицы 2 |
||||
|
Заголовок 4 |
Ячейка 2 |
Ячейка 3 |
Ячейка 4 |
Ячейка 4 |
|
|
Таблицы 2 |
Таблицы 2 |
||||
|
Заголовок 5 |
Ячейка 5 |
3. Построить форму в виде таблицы.
Порядок выполнения заданий:
1. Построение на Web-странице таблицы осуществляется при помощи следующего кода:
</title>
</head>
<Body bgcolor=lime>
<center>
<Font color=red>
<H3>Конончик. Вариант 7.</H3>
</font>
<table border=5 cellspasing=4>
<caption>Заголовок таблицы</caption>
<tr>
<td bgcolor="white">
<td bgcolor="white">Заголовок 1
<td colspan=3 bgcolor="white">Заголовок 2
<tr><Td bgcolor="white"> Заголовок 3
<Td> Ячейка 1
<Td> Ячейка 1 Таблицы 2
<Td> Ячейка 2 Таблицы 2
<Td> Ячейка 3
<tr><Td bgcolor="white"> Заголовок 4
<Td> Ячейка 2
<Td> Ячейка 3 Таблицы 2
<Td> Ячейка 4 Таблицы 2
<Td> Ячейка 4
<tr><Td bgcolor="white"> Заголовок 5
<td colspan=4>Ячейка 5
</table>
</center>
</Body>
</Html>
Просмотр созданной Web-страницы (рис.1):
Рис.1. - Отображение HTML-документа в браузере
2. Построение на Web-странице формы осуществляется при помощи следующего кода:
<Html>
<Head>
<title>Пример формы
</title>
</head>
<Body bgcolor=maroon>
<center>
<Font size= color=silver><i>Пример формы
</font>
</center>
<p>
<hr color="red">
<table border=4 bgcolor="lime">
<form action-"mailto:Имя@сервер.домен" method="post">
<tr>
<td><label for="FIO">ФИО:</label>
<td><Input type="text" id="familiya">
<td><Input type="text" id="imya">
<td><Input type="text" id="otchestvo">
<tr>
<td> Страна проживания:
<td>
<Select>
<Option>Англия</Option>
<Option>Беларусь</Option>
<Option>Германия</Option>
<Option>Франция</Option>
</Select>
<tr>
<td>Имеется электронная почта на
<td><Input type="checkbox" name="F001" value="Yandex">Yandex
<td><Input type="checkbox" name="F001" value="Google">Google
<td><Input type="checkbox" name="F001" value="Mail.ru">Mail.ru
<tr>
<Td>Какая из них, по вашиму мнению, наиболее удобная? Почему?
<Td><Textarea rows=3 cols=36> </textarea>
<tr><td>Важнейщий критерий по выбору почты:
<td>
<Input type="radio" name="poll" value="">Дизайн 
<Input type="radio" name="poll;" value="Female">Удобство 
<Input type="radio" name="poll;" value="Female">Простота
<Tr><td>
<H3> Кнопка с изображением </h3>
<td><Input type="image" src= "юля.jpg" width=50%>
<Tr><td>Действия, которые Вы чаще всего делаете в Интернете <td>
<Select multiple>
<Option value=a> Общаетесь в соц.сетях
<Option value=b> Узнаете новости
<Option value=c> Играете в игры
<Option value=c> Читаете онлайн книги
</select>
<Tr>
<Td>Дополнительная информация:
<Td><Textarea rows=* cols=*> </textarea>
<Tr>
<Td align = "bottom">
<Input align="bottom" type="submit" value="send">
<Input type="reset" value="reset" >
</form>
</table>
</Body>
</Html>
Просмотр созданной Web-страницы (рис.2):
Рис.2. - Отображение HTML-документа в браузере
Контрольные вопросы
1. Структура таблицы в HTML-документе.
2. Основные атрибуты таблицы.
3. Вычерчивание рамок и управление размером и цветом ячеек таблицы.
4. Какие теги используются для создания форм?
5. Каково назначение атрибутов value, checked, size?
6. Каков порядок создания меню на гипертекстовой странице?
7. Опишите технологию построения управляющих элементов сложной формы.
Ответы на контрольные вопросы
таблица атрибут ячейка браузер
1. HTML таблицы упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов. Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы. Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.
2. Атрибуты
Align - Определяет выравнивание таблицы.
Backgroun - Задает фоновый рисунок в таблице.
Bgcolor - Цвет фона таблицы.
Border - Толщина рамки в пикселах.
Bordercolor - Цвет рамки.
Cellpadding - Отступ от рамки до содержимого ячейки.
Cellspacing - Расстояние между ячейками.
Cols - Число колонок в таблице.
Fram - Сообщает браузеру, как отображать границы вокруг таблицы.
Height - Высота таблицы.
Rules - Сообщает браузеру, где отображать границы между ячейками.
Summary - Краткое описание таблицы.
Width - Ширина таблицы.
3. Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется атрибут bordercolor тега <table>, то вид рамки меняется в зависимости от браузера. Когда в теге <table> используется атрибут border без значений (<table border>), то браузер отображает рамку толщиной один пиксел.
<table border="толщина">...</table>
Для выравнивания всех ячеек в строке может использоваться атрибут align со своими стандартными значениями left, center, right.
Для описания в ячейках заголовков используется внутри тега <Тr > тег < Th >. При этом текст заголовка в ячейке обычно выделяется полужирным шрифтом.
Цвет шрифта текста в таблице, как правило, задается с помощью тега < Font > с атрибутом color, например, < Font color = red >, а цвет фона внутри ячейки задается атрибутом bgcolor внутри тега < Th >, например,<Th bgcolor ="lime">. Тег <Td> определяет обычную ячейку в таблице.
4. Форма создаётся с помощью тега <form>, внутри которой могут быть любые необходимые теги, и характеризуется следующими необязательными параметрами:
- адрес программы на веб-сервере, которая будет обрабатывать содержимое данных формы;
- элементами формы, которые представляют собой стандартные поля для ввода информации пользователем;
- кнопку отправки данных на сервер.
Тег < Input > позволяет создавать различные элементы управления в форме в зависимости от своих атрибутов type, value, checked, size и name.
- type = "text" Создание поля ввода для текстовых данных.
- type = "password" Создание строки для ввода пароля.
- type = "checkbox" Создание флажков.
- type = "radio" Формирование переключателей.
- type = "submit" Описание кнопки, нажатие на которую подтверждает ввод информации в форму.
- type = "reset" Описание кнопки для отмены ввода данных в форму.
- type = "image" Построение кнопки с рисунком.
- type = "file" Средство выбора файла для присоединения к форме.
5. Атрибут value используется для определения произвольного текста в поле ввода (type = "text") или для надписи на кнопке (type = "submit").
Атрибут checked определяет переключатель, требуемый по умолчанию.
Атрибут size описывает длину поля ввода.
Атрибут name - имя поля (элемента управления).
6. Тег <menu> предназначен для отображения списка пунктов меню. Аналогично тегам <ol> и <ul> внутри контейнера <menu> список формируется с помощью тегов <li>.
<menu>
<li>пункт меню</li>
<li>пункт меню</li>
</menu>
Или выпадающее меню:
<H3> Выпадающее меню </h3>
<Select>
<option>первый</option> <option>второй</option> <option>mpemuй </option></select>
7. Построение элементов управления в формах с помощью тега < Select >.
Элемент управления в форме:
<Center>
<Font color=red><H2>ЭЛЕМЕНТ SELECT </h2> </font>
</center>
<Select multiple>
<Option value=a> Первый
<Option value=b> Второй
<Option value=c>Tpemий
</select>
Выпадающее меню:
<H3> Выпадающее меню </h3>
<Select>
<option>первый </option>
<option>второй </option>
<option>третий </option> </select>
Формирование области для ввода текста:
<Center>
<Font со 1оr=red><Н 2>ЭЛЕМЕНТ TEXTAREA </h2> </font>
</center>
<Textarea rows=6 cols=40>
Область для ввода текста </textarea>
Построение кнопки с надписью и рисунком с помощью тегов <Button> </button> и <Img>.
Фрагмент в коде HTML:
<Center>
<Font color=red><H2>KHOIIKA С НАДПИСЬЮ И РИСУНКОМ</H2> </font>
</center>
<Button name="submit" value="submit" type="submit">
Pencil<lmg src="fon01.gif" аlt="Рисунок"></button>.
Группа полей:
<Center>
<Font color=red><H2>ГPУППA ПОЛЕЙ </H> </font>
</center>
<Fieldset>
<Legend>Заголовок группы </legend> Имя: <Input name = "imya2 " type="text ">
Фамилия: <lnput name="familiya2" type="text"><BR> Телефон: <lnput name="telefon2"type="text"><BR> </fieldset>
Вывод
Проводилось изучение использования и создания таблиц различных структур; приобретение навыков создания форм различных типов.
Размещено на Allbest.ru
...Подобные документы
Структура HTML–документа. Синтаксис записи тега. Обозначение цветов в шестнадцатеричной системе счисления. Формат задания и параметры таблицы в документе, параметры её заголовка, строк и ячеек, группирование столбцов. Наследование свойств выравнивания.
курсовая работа [318,8 K], добавлен 03.01.2014Понятие, сущность и особенности применения языка HTML, а также структура его документа. Рекомендации по созданию сайтов в интернете. Общая структура и порядок оформления гипертекстов, записанных в языке HTML, примеры отображения их в браузере компьютера.
контрольная работа [29,4 K], добавлен 12.09.2010Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.
презентация [439,3 K], добавлен 29.01.2014Изучение тегов для создания списков и таблиц в HTML, основных атрибутов тегов. Практические навыки создания списков и таблиц в HTML-документах. Нумерованные, маркированные и вложенные списки, список определений. Выравнивание данных в ячейках таблицы.
контрольная работа [322,1 K], добавлен 09.08.2014История развития Интернета и принципы его работы. Сквозные протоколы и шлюзы. Логическая и физическая структура сайта. Основы HTML и форматирование текста. Списки, таблицы, гиперссылки. Мультимедиа на web–странице. Формат задания фреймовой структуры.
курсовая работа [1,2 M], добавлен 27.03.2009Определение понятия гипертекста. Основные части документа SGML. История создания стандартного языка разметки документов HTML. Отличия синтаксиса XHTML от HTML. RSS - семейство XML-форматов для описания лент новостей. Применение языка разметки KML.
презентация [4,3 M], добавлен 15.02.2014Создание сайта при помощи HTML и CSS. Язык гипертекстовой разметки HTML и таблица стилей CSS. Основные понятия об этих языках, этапы и алгоритмы программного обеспечения. Добавление стилей в документ. Свойства элементов, принцип построения Web-страницы.
курсовая работа [2,9 M], добавлен 12.01.2016Основные теги и атрибуты языка HTML. Создание web-сайта, который должен представлять собой несколько связанных между собой страниц. Рассмотрение различных значений атрибутов и тегов на страницах и в других документах. Экранные формы разработанных страниц.
лабораторная работа [1,2 M], добавлен 16.04.2014Основы языка программирования Web-страниц – HTML. Виды информации, которую может содержать Web-страница: текст, графика, звук, анимация и видео. Инструментарий для создания Web-страниц. Основные HTML-редакторы, которые используются для Web-дизайна.
реферат [374,0 K], добавлен 19.01.2011Понятие об html. Структура файла в формате html. Отличительный признак html-документа. Гипертекстовые ссылки. Создание документов в стандарте html. Заголовки. Форматирование текста и изменение стилей. Фреймы.
реферат [23,7 K], добавлен 17.08.2007Общая характеристика языка разметки гипертекста Hypertext Markup Language. Структура HTML-документа. Обзор основных возможностей HTML. Элементы современного дизайна Web-страниц. Анализ практического применения HTML (на примере обучающих программ).
курсовая работа [47,9 K], добавлен 24.11.2012Hyper Text Markup Language (html) как стандартный язык для создания гипертекстовых документов в среде web. Тэги списков, гипертекстовые ссылки, графика внутри документа, специальные тэги html и таблицы. Планирование фреймов. Этапы создания сайтов.
контрольная работа [126,9 K], добавлен 18.11.2010История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Общие принципы создания Web-узла. Особенности его оформления, структуры, сочетание графики и текста. Варианты размещения Web-узла в Internet, роль правильного выбора провайдера. История развития HTML. Принципы гипертекстовой разметки. Группы тегов НТМL.
лекция [35,9 K], добавлен 07.02.2010HTML как язык разметки гипертекста, его структура, элементы. Каскадные таблицы стилей, их разработка. Верстка: страницы как мы их видим. Новые технологии – HTML5, CSS3. LESS. Динамический язык стилевой разметки. Технологии упрощенной разметки HAML, SASS.
дипломная работа [3,4 M], добавлен 19.04.2013Цель и место размещения документа Web. Язык гипертекстовой разметки. Сценарий и структура Web-документа. Основные редакторы гипертекста. Создание документов в стандарте HTML. Создание заголовков, форматирование и изменение стиля, нумерация списков.
реферат [34,4 K], добавлен 22.11.2009Основные операции, связанные с созданием и форматированием таблиц. Создание таблицы, внесение в нее текстовой информации и выполнение обрамления таблицы. Задание фиксированных размеров ячеек, слияние ячеек, использование автоматической нумерации.
лабораторная работа [165,9 K], добавлен 10.03.2007Создание основы интернет-сайта - набора таблиц, которые расположены в нужном порядке. Использованные теги и их атрибуты. Кодовое оформление сайта, наложение второго слоя. Стильный текст в HTML. Использование скриптов для большей информативности сайта.
методичка [813,6 K], добавлен 08.11.2013Концептуальное проектирование сайта по онлайн-продаже кофе, его древовидная логическая структура страниц. Описание языка гипертекстовой разметки сайта HTML, особенности отображения HTML-тегов в браузерах. Создание формы заказа для онлайн-торговли.
курсовая работа [2,2 M], добавлен 16.04.2017Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.
курсовая работа [26,9 K], добавлен 05.07.2009
