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>- Делает текст внутри текста ниже сроки. (Может пригодиться для записи химических формул (Пример: H2SO4))
<Sup> - Делает текст внутри тега выше строки. (Может пригодиться для записи математических уравнений (Пример: x2+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 Controls>
<Source Src="Ёлочка.Mp3" Type="Audio/Mpeg">
</Audio>
Вставка видео
Для того, чтобы вставить на веб-страницу видео, которое находится в папке сайта и имеет формат Mp4, необходимо использовать следующий тег:
<Video Width="…" Height="…" Controls="Controls" Poster="…">
<Source Src="…" Type='Video/Mp4'>
</Video>
В кавычках перед атрибутом Poster можно вставить путь картинки, которая будет служить постером, пока видео не будет запущено. Атрибут Poster использовать не обязательно. А в кавычках, которые находятся перед атрибутом Src необходимо вставить путь к вашему видео и его обязательное расширение «.Mp4».
Пример:
<Video Width="400" Height="300" Controls="Controls" Poster="Картинка.Jpg">
<Source Src="Видео.Mp4" Type='Video/Mp4'>
</Video>
Заключение
В этой работе на примере созданного мной веб-сайта, посвященного музыкальной группе Rammstein, я показал основные этапы написания программного текста, оформления, структурирования и систематизации информации, использованной в этих целях.
Приведенный пример не является исчерпывающим. Он показывает только основные моменты при создании сайта. Язык программирования HTML позволяет создавать более сложные и содержащие больше информации сайты.