Файл: Основы программирования на языке HTML.pdf

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 02.04.2023

Просмотров: 174

Скачиваний: 1

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Введение

Заключение

Используемая литература

Таблица 2

Элемент

Тег

Атрибуты

Пример

Абзац

<P> </p>

<P align="left"> </p> - выравнивание текста по левому краю.

<P align="center> </p> - выравнивание текста по центру.

<P align="right"> </p> - выравнивание текста по правому краю.

<P align="rjustify"> </p> - выравнивание текста по ширине.

<P align="center"> Текст абзаца выровнен по центру экрана </p>

Переход на новую строку

<br>

Всех трудящихся страны <BR> С Первомаем поздравляем <BR> И, конечно, им сейчас <BR> Классно отдохнуть желаем!

Выравнивание по центру

<CENTER>

</center>

<CENTER> Текст будет расположен по центру

</center>

Выделение текста полужирным шрифтом

<B> </b>

<B> Текст будет выделен полужирным шрифтом </b>.

Выделение текста курсивом

<I> </i>

<I> Текст будет выделен курсивом</i>.

Приподнять символ относительно всей строки

<SUB>

</sub>

<SUB>

Текст будет в приподнятом положении относительно строки</sub>

Приспустить символ относительно всей строки

<SUP>

</sup>

<SUP>Текст будет в приспущенном положении относительно строки</sup>

Определение типа, размера и цвета шрифта.

<FONT> </font>

<FONT size=3> </font> - абсолютный размер шрифта (возможные значения от 1 до 7).

<FONT color="blue"> </font> - цвет шрифта

<FONT face="calibri"> </font> - определение требуемого шрифта.

<FONT size=3 color="red" face="calibri"> </font> - все атрибуты вместе могут быть использованы внутри данного тега.

<FONT size=1> Это шрифт 1 </font>

<FONT size=2> Это шрифт 2 </font>

<FONT size=3>Это шрифт 3 </font>

<FONT size=4>Это шрифт 4 </font>

<FONT size=5> Это шрифт 5 </font>

<FONT size=6> Это шрифт 6 </font>

<FONT size=7> Это шрифт 7 </font>

<FONT color="red"> Это шрифт красного цвета </font>

<FONT face="arial" size=3 color="green" > Это шрифт calibri размером 3, цвет зеленый. </font>

Цитаты

<BLOCKQUOTE> </blockquote>

<BLOCKQUOTE> Здесь вписана цитата. </blockquote> Здесь обычный текст

Заголовки

<H#>

</h#>, где #=1,2,3,4,5,6-уровни заголовка

< H# align="left"> </h#>-выравнивание заголовка по левому краю.

< H# align="center> </h#>-выравнивание заголовка по центру.

< H# align="right"> </h#>-выравнивание заголовка по правому краю.

< H#align="rjustify"> </h#>-выравнивание заголовка по ширине.

<H1 align="center>Мой первый сайт</h1>

<H2 align="left">Меня зовут Зарина</h2>

<H3 align="rjustify"> …</h3>

Маркированный список

<UL>

<LI>

<LI>

<LI>

</ul>

<UL>

<LI> Первый пункт списка;

<LI> Второй пункт списка;

<LI> Третий пункт списка.

</ul>

Нумерованный список

<OL>

<LI>

<LI>

<LI>

</ol>

<OL>

<LI> Первый пункт списка;

<LI> Второй пункт списка;

<LI> Третий пункт списка.

</ol>

    1. Цветовые решения на веб-странице

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

    1. Стандартные цвета

Наиболее популярные цвета представлены в Таблице 3.

Таблица 3

    1. Использование цвета при оформлении страницы

Атрибут – color, предназначен для определения цвета, какого цвета будет шрифт на странице. Цвет шрифта вписывается в тег <FONT>, например:

<FONT color="808080"> Цветные буквы 1 </font>   

<FONT color="red"> Цветные буквы 2 </font>

Если требуется установить цвет для фона, то необходимо использовать атрибут color, внутри тега <BODY>, к примеру:

<BODY color="0000FF">

  1. Таблицы

HTML-таблицы предназначены для упорядочивания и вывода на экран устройства, данные в виде таблицы, состоящих из строк и столбцов. Пересечение строк и столбцов образуют ячейки, из которых и состоят таблицы. Ячейки в таблицах могут содержать любые элементы, списки, обычный текст, изображения, другие вложенные таблицы и т.д.

<TABLE> </table> - тег используется для добавления таблицы на веб-страницу.

<TR> </tr> - тег используется для определения количества строк и ячеек, из которых будет состоять будущая таблица.

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

Пример:

<table>

<tr>

<td>Строка1 Ячейка1</td>

<td>Строка1 Ячейка2</td>

<td>Строка1 Ячейка3</td>

<td>Строка1 Ячейка4</td>

</tr>

<tr>

<td>Строка2 Ячейка1</td>

<td>Строка2 Ячейка2</td>

<td>Строка2 Ячейка3</td>

<td>Строка2 Ячейка4</td>

</tr>

<tr>

<td>Строка3 Ячейка1</td>

<td>Строка3 Ячейка2</td>

<td>Строка3 Ячейка3</td>

<td>Строка3 Ячейка4</td>

</tr>

<tr>

<td>Строка4 Ячейка1</td>

<td>Строка4 Ячейка2</td>

<td>Строка4 Ячейка3</td>

<td>Строка4 Ячейка4</td>

</tr>

</table>

Выглядит мой код будет следующим образом:

Изначально, при создании таблицы, ее ширина будет по умолчанию равна ширине ее внутреннего содержимого. Если требуется установить определенную ширину, то для этого необходимо задать значение для свойства width. Задать значение можно либо в пикселях, либо в процентном соотношении к ширине окна браузера.

Пример создания таблицы с шириной в 300 пикселей:

<TABLE width="350">

<TR>

<TD> Ширина данной таблицы равна 350 пикселям </td>

<TD> и она состоит из 1 строки и 2 столбцов </td>

</tr> </table>

Во втором же случае, когда мне необходимо задать ширину таблицы, в соответствии с шириной окна моего браузера (вне зависимости от его разрешения), то мне необходимо задать ширину экрана следующим образом:

<TABLE width="100%">

<TR>

<TD> Ширина таблицы равна 100%.</td>

<TD> она состоит из 1 строки</td>

<TD> и 2 столбцов </td>

</tr>

</table>

Для этой таблицы можно задать цвет к фону следующим образом:

<TABLE width="100%" bgcolor="# 00FF00">

<TR>

<TD> Ширина 70%</td>

</tr>

<TR>

<TD> и она состоит из трех строк </td>

</tr>

<TR>

<TD> и двух столбцов </td>

</tr>

</table>

Где параметр bgcolor определяет цвет фона и может принимать значения, указанные на английском языке или в формате кодов HTML.

При необходимости, я так же могу только отдельные ячейки выделить цветом вместо фона целиком, для этого необходимо прописать код:

<table width="900" border="2" cellspacing="0" cellpadding="3" align="right">
<tr>
<td bgcolor="#592A2A"></td>
<td bgcolor="#244F68"></td>
<td bgcolor="#BA3897"></td>
</tr>
<tr>
<td bgcolor="#645B62"></td>
<td bgcolor="#B16739"></td>
<td bgcolor="#40BDBF"></td>
</tr>
<tr>
<td bgcolor="#12DC4D"></td>
<td bgcolor="#EAF117"></td>
<td bgcolor="#5DA00F"></td>
</tr>
</table>

Где border – это толщина границы, cellspacing – расстояние между границами, а cellpadding – предназначен для указания расстояния между границей и содержимым ячейки. Все три атрибута принимают значения в пикселях.

<TABLE width="80%" bgcolor="#0000FF" border="5" >

<TR>

<TD> </td>

<TD> Ширина таблицы равна 500 пикселям</td>

<TD> </td>

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

<TD> </td>

</tr>

</table>

Границы таблицы могут быть невидимыми, для этого значение параметра border необходимо выставить на 0, пример:

<TABLE width="100%" bgcolor="#FA8E47" border="0" >

<TR>

<TD> </td>

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

<TD> </td>

</tr>

<TR>

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

<TD> </td>

<TD></td>

<TD></td>

</tr>

</table>

Ранее в одном из примеров был использован атрибут align, который предназначен для выравнивания данных в ячейках (горизонтально), атрибут принимает следующие значения:

«left» – выровнять по левой стороне;

«right» – выровнять по правой стороне;

«center» – разместить по центру ячейки.

Если же требуется так же выровнять данные в ячейках, но только по вертикали, то необходимо использовать атрибут valign, принимает следующие значения:

top – по верхнему краю

center (или middle) – по центру

baseline – по первой строке

Примеры:

<table width="70%" border="3" cellspacing="1" cellpadding="6" align="left">
<tr> <td width="421">По горизонтали</td>
<td width="456" align="center"> Выровнять по центру </td>
<td width="412" align="left"> Выровнять по левому краю </td>
<td width="444" align="right"> Выровнять по правому краю </td>
</tr>
<tr>
<td width="369" height="149">По вертикали</td>
<td width="324" height="149" valign="top">Выровнять по верхнему краю</td>
<td width="367" height="149" valign="middle">Выровнять по центру</td>
<td width="318" height="149" valign="baseline">Выровнять по нижнему краю</td>
</tr>
</table>

  1. Формы

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

Тег <FORM> </form> имеет атрибут Action=”…” – которому присваивается URL адрес. На этот адрес в последствии будет передана и обработана информация, введенная пользователем в форме.

Method= "POST/GET"– атрибут определяет метод, согласно которому данные из формы будут отправлены. Может принимать значения:

• get –для отправки сообщений в небольшом объеме, есть ограничение.

• post – отправляет данные на сервер в запросе браузера, предназначен для отправки большого количества данных, не имеет ограничений по объему.

    1. Создание элементов управления <INPUT …>

Type=”…” – обязательный атрибут. Определяет тип элемента, который необходимо создать.

Принимает значения:

• text – создание строки для ввода текста

• password – создание строки для ввода текста, при этом вводимые значения будут скрыты за символами ***

• checkbox – создание флажка

• radio – создание переключателей

• image – создание кнопки-изображения

• button – создание кнопку произвольного значения

• submit – создание кнопки «отправить»

• reset – создание кнопки «очистить»

Name – указывается имя элемента, для получения доступа к объектам

Value – предназначено для значения атрибутов

Size – определение размеров различных элементов

Checked – данные атрибут предназначен для проверки, установлен ли флажок по умолчанию, при загрузке страниц для полей типа type="checkbox" и type="radio".

<INPUT Type= ”checkbox” Name=”group”> Value=”p”>

<INPUT Type= ”submit” Name= ”submit1” Value=”отправить”>

<INPUT Type= ”reset” Name= ”reset1” Value=”очистить”>

<BUTTON> – создание кнопки с вложенными элементами, например, с изображением.

</button> Type=”…” – обязательный атрибут, указывает на тип создаваемого элемента управления. Принимает такие значения как:

• button – создание кнопки с произвольным значением

• submit – создание кнопки «отправить»

• reset – создание кнопки «очистить»

Name – задает имя текстового поля

Value – определяет значение атрибута< BUTTON Type= ”reset” Name= ”reset”>

<IMG Src= “sun.gif” Alt=”!”> Сброс <IMG Src= “sun.gif” Alt=”!”>

</button>

    1. Элементы списка <OPTION>

Selected – отображение элемента, выбранного по умолчанию <SELECT Name= “systems”>

<OPTION Selected> Windows

<OPTION>MacOS

<OPTION>Linux

</select>

    1. Область для ввода текст <TEXTAREA>

</textarea> Name – определяет имя элемента

Rows – определяет количество строк

Cols – определяет ширину в символах

<TEXTAREA Name =”…” Rows=13 Cols=85> текст </textarea>

    1. Списки <SELECT>

</select> Name – определение имени элемента

Size – определение количества строк для списка

Multiple – позволяет выбрать более одного элемента списка <SELECT Name= “selection” Size=13> ...

</select>

  1. Изображение на веб-странице

<IMG> - тег применяется для добавления изображения на страницу.

Смотрите также файлы