lt;B>-Делает текст внутри тега жирным.

Создание сайта

Курсовая работа

Автор: Нежинский Антон, 9«И» класс

Руководитель: Седых Татьяна Юрьевна,

учитель информатики

Иркутск 2016

Содержание

Введение – 3 стр.

Описание всех тегов – 5 стр.

· Форматирование текста – 6 стр.

· Вставка картинки – 8 стр.

· Ссылки – 9 стр.

· Списки – 11 стр.

· Таблицы – 12 стр.

· Вставка аудио – 15 стр.

· Вставка видео – 16 стр.

Заключение – 17 стр.

Введение

В настоящее время невозможно прожить без интернета. Он помогает нам в учёбе, работе и личных интересах. В его сетях есть миллионы гигабайт необходимой информации, которая хранится на множестве сайтов.

Сайт – группа веб-страниц, объединённых единой темой, автором, фирмой и т. п.

Веб-страница – отдельный документ в Интернете, содержащий текст, графику, звук и т. п.

Но задумывались ли вы, из чего состоят сайты, которые вы посещаете каждый день, и которые приносят вам огромную пользу? По большому счёту сайт – это программа. А язык, на котором пишется данная программа называется HTML.

HTML – стандартный язык разметки документов во Всемирной паутине.

HTML-команды исполняются специальной программой – браузером. Как и любой язык программирования, HTML состоит из определённых команд. И называются они – теги.

Тег – элемент языка разметки гипертекста.

Гипертекст – совокупность документов, содержащих текстовую, аудио и видеоинформацию, связанных между собой взаимными ссылками в единый текст.

Большинство тегов имеют два состояния: открытый (<…>) и закрытый (</…>). Также теги имеют определённые регуляторы, которые называются атрибутами.

Для того, чтобы написать простою веб-страничку или даже сайт не нужно иметь специальных программ. Для этого может подойти, встроенная в ОС Windows, программа «блокнот». Главное здесь при сохранении написанного документа после его названия писать расширение «.html». Конечно, лучше создавать сайт более продвинутыми программами, так как в

них есть удобное форматирование программного текста.

Я создал сайт, посвящённый музыкальной группе Rammstein для систематизации и удобного поиска информации и файлов, связанных с деятельностью группы в определённый период времени. И на его примере я хочу показать принцип построения и основные приёмы, с помощью которых создаётся веб-сайт.

Главная страница моего сайта:

Итак, для начала писания сайта необходимо создать для него специальную папку, в которой будут располагаться все страницы и файлы сайта. Затем главный тег – <HTML>. И заранее закрыть его – </HTML>. Внутри этого тега будут писаться все остальные. Это необходимо для того, чтобы браузер понимал, что используемый текст является программным и исполнял его.

Описание всех тегов

<Title> – задаёт название страницы. (Пример: <Title>Главная</Title>

Результат:

)

<Body> – выделяет часть программного текста как основную. Все остальные теги пишутся внутри него. Имеет атрибуты: Bgcolor и Background. Bgcolor отвечает за задний цвет страницы. Цвет обозначается либо словами (пример: Yellow, Red, Blue), либо кодом. (Пример: #FFFF00, #FF0000, #0000FF) Все слова и коды цветов можно посмотреть здесь: http://www.stm.dp.ua/web-design/color-html.php . (Пример <Body Bgcolor=”Red”>...</Body>)

Background отвечает за задний фон страницы и требует ссылку на картинку. (Пример <Body Background =”Картинки/Фон.Jpg”>...</Body>). Если картинка по разрешению занимает не всю страницу, то она дублируется. Поэтому необходимо использовать бесшовные фоны.

Форматирование текста

<Head> – делает текст заголовком.

<P>–Делит обычный текст на абзацы.

Имеет атрибуты: Align, Color. Align отвечает за выравнивание текста: по левому боку – Left, по центру – Center, по правому боку – Right.

Color отвечает за цвет текста в абзаце.

<H.> - Отвечает за размер текста внутри тега. После буквы H ставится цифра от 1 (наибольший) до 6 (наименьший).

Атрибуты: Align.

<Font> - Настраивает текст внутри тега. Атрибуты: Color, Face.

Face отвечает за шрифт текста. Шрифты можно задавать только те, которые встроены изначально в ОС. Пример: Arial, Tahoma, Times New Roman.

Например, текст моего сайта сделан на шрифте Tahoma, а данная работа на Times New Roman.

<Br> - Переходит на следующую строку. Не имеет закрывающей части.

<Hr> - Проводит линию, вместо строки. Не имеет закрывающей части.

lt;B>-Делает текст внутри тега жирным.

<I> - Делает текст внутри тега курсивным.

<U> - Делает текст внутри тега подчёркнутым.

<Sub>- Делает текст внутри текста ниже сроки. (Может пригодиться для записи химических формул (Пример: H₂SO₄))

<Sup> - Делает текст внутри тега выше строки. (Может пригодиться для записи математических уравнений (Пример: x²+x+1=0))

Вставка картинки

Для того, чтобы вставить картинку на вашу веб – страницу необходимо использовать тег<Img Src=”…”>. Между кавычками нужно вставить адрес вашей картинке. Пример: <Img Src=”Картинка.Jpg”>.

Тег имеет атрибуты: Width, Height, Align, Border, Alt. Width отвечает за ширину изображения и требует числовое значение. Height отвечает за высоту. (Пример: Img Src=”Картинка.Jpg” Width=1000 Height=500>) Border создаёт рамку вокруг картинки и тоже требует числовое значение. Alt устанавливает текст, который будет виден, если картинка не загрузилась.

Ссылки

Для того, чтобы создать ссылку на какую-нибудь другую страницу необходимо использовать тег <A с атрибутом Href=”…”>…</A>. Между кавычками необходимо писать название страницы. А между частями <A…> и </A> - текст, при нажатии на который будет производиться переход. Например, нам нужно создать ссылку на веб-страничку, которая находится в папке нашего сайта и имеет название «Информация» и обязательное расширение «.html». Тогда тег будет выглядеть так: <A Href=”Информация.Html”>Информация</A>.

Например, вот как выглядит навигация на моём сайте:

Также можно создать ссылку с одного места страницы на другое. Вначале необходимо указать место, в которое будет производиться переход. Для этого нужно написать тег <A с атрибутом Name=”…”></A> и задать между кавычками название метки. Пример: <A Name=”Место”></A>. Слова между частями <A…> и </A> писать не обязательно. Далее необходимо сделать ссылку к этому месту. Для этого нужно написать уже знакомый тег с атрибутом <A Href=”…”></A>. И между кавычек написать название метки, перед которой нужно поставить решётку (#). Пример: <A Href=”#Метка”>Перейти</A>.

Ещё можно сделать картинку как ссылку. Для этого просто нужно вставить внутри тега картинку. Пример: <A Href=”Информация.Html”><Img Src=”Картинка.Jpg”></A>.

Списки

Часто для лучшего восприятия текста необходимо делать списки.

Пример:

Числа бывают:

1. Натуральные

2. Целые

3. Рациональные

4. Иррациональные

5. Действительные

6. Комплексные

Существительные бывают:

· Собственные

· Нарицательные

Первый список называется нумерованный, а второй маркированный. Нумерованный список создаётся тегом <Ol>. А маркированный - <Ul>

Элементы в любом из тегов создаются тегом <Li>

Пример:

Числа бывают:

<Ol>

<Li>Натуральные

<Li>Целые

<Li>Рациональные

<Li>Иррациональные

<Li>Действительные

<Li>Комплексные

</Ol>

Таблицы

Также для лучшего восприятия информации иногда могут потребоваться таблицы.

Пример:

Фигура	Виды
Треугольник	Остроугольный	Тупоугольный	Прямоугольный

Для создания таблиц существует тег <Table>, который выделяет начало (<Table>) и конец таблицы (</Table>). Атрибуты: Border (Чтобы рамки таблицы были видны, должен стоять на значении как минимум 1!), Bgcolor (, Background, Bordercolor, Width, Height, Align. Bordercolor отвечает за цвет рамки таблицы.

Тег <Table> включает в себя подтег <Tr> . <Tr> создаёт строку таблицы. Атрибуты: Bgcolor, Bordercolor, Align, Valign. Valign отвечает за выравнивание содержимого строки по вертикали. Имеет значения: вверху – Top, посередине – Middle, внизу – Bottom.

Тег <Tr> включает в себя два подтега: <Th> и <Td>.

<Th> создаёт заголовочную ячейку в строке. Атрибуты: Bgcolor , Background, Bordercolor, Width, Height, Align, Valign, Colspan, Rowspan. Colspan объединяет ячейки по горизонтали, а вертикали.

<Td> создаёт обычную ячейку. Атрибуты: Bgcolor , Background, Bordercolor, Width, Height, Align, Valign, Colspan, Rowspan.

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

<Table Border=1>

<Tr Align=Center>

<Th>Фигура</Th>

<Th Colspan=3>Виды</Th>

</Tr>

<Tr Align=Center >

<Td>Треугольник</Td>

<Td>Остроугольный</Td>

<Td>Тупоугольный</Td>

<Td>Прямоугольный</Td>

</Tr>

</Table>

Таблицы можно использовать как основу сайта. И я в своём сайте, как можно было видеть по скриншоту главной страницы, сделал именно так.

Вставка аудио

Иногда может понадобиться вставить аудио-файл. Для этого нужно использовать тег:

<Audio Controls>

<Source Src="…" Type="Audio/Mpeg">

</Audio>

Между кавычками необходимо вставить путь к аудио-файлу и обязательно его расширение(Mp3, Wav).

Пример:

</Audio>

Вставка видео

Для того, чтобы вставить на веб-страницу видео, которое находится в папке сайта и имеет формат Mp4, необходимо использовать следующий тег:

<Video Width="…" Height="…" Controls="Controls" Poster="…">

<Source Src="…" Type='Video/Mp4'>

</Video>

В кавычках перед атрибутом Poster можно вставить путь картинки, которая будет служить постером, пока видео не будет запущено. Атрибут Poster использовать не обязательно. А в кавычках, которые находятся перед атрибутом Src необходимо вставить путь к вашему видео и его обязательное расширение «.Mp4».

Пример:

</Video>

Заключение

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

Приведенный пример не является исчерпывающим. Он показывает только основные моменты при создании сайта. Язык программирования HTML позволяет создавать более сложные и содержащие больше информации сайты.