Построение сайта на языке HTML
Выбери формат для чтения
Статья: Построение сайта на языке HTML
Загружаем конспект в формате docx
Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇
ПОСТРОЕНИЕ САЙТА НА ЯЗЫКЕ HTML
Теория. Гипертекст-это текст, в котором имеются ссылки для автоматического перехода на другие тексты - гиперссылки, а язык HTML (Hyper Text Marcup Language) - это независимый от платформ язык разметки текста. Документы размеченные при помощи этого языка визуализируются браузерами конечных пользователей в большинстве случаев одинаково, благодаря тому, что "понимают" и правильно обрабатывают структурные элементы HTML. Исходный код представляет собой текст, между строк которого вставляются элементы разметки, посетителю страницы эти элементы не видны, а виден результат их воздействия на документ. Элементы html-документа, заключенные в угловые скобки, называются тэгами. Они несут информацию о структуре и особенностях форматирования web-страницы.
Базовый HTML-документ должен иметь следующую структуру:
Название html-документа
Тело html-документа
Тег определяет начало HTML- файла, внутри которого хранится заголовок () и тело документа (). Заголовок документа (блок ), может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера .
Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Для идентификации браузером формата преобразования юникода UTF-8 записывается строка: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">.
Тег <title> - определяет заголовок веб-страницы и должен обязательно присутствовать в коде документа. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера.
Тег </head> - закрывает блок заголовка документа.
Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы: <hi> Заголовок</hi>, где i – уровень заголовка.
Тег <p> определяет абзац (параграф) текста. Является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними): <p>Абзац.</p>
Тег </body> - показывает, что тело документа завершено.
Тег </html> - закрывает HTML-файл.
При форматировании web-страницы можно использовать дополнительные теги:
<small>Уменьшенный шрифт</small>
<br /> Перевод строки
<hr /> Горизонтальная линия
<ul>Список</ul>
<ol>Упорядоченный список</ol>
<li>Элемент списка</li>
При создании web-документов имеется возможность оформлять их с использованием графических объектов. Если предполагается, что документ будет публиковаться в сети Интерне, то объекты должны содержаться в файлах с расширением jpg, gif или png. Если документ будет использован на локальном компьютере, то можно использовать файлы с расширением bmp.
Для внедрения рисунка применяется одиночный тег <IMG>. Он всегда должен содержать атрибут SRC.
Примеры.
1) <IMG SRC=ris.jpg> - вставка в документ из текущего каталога графического объекта, содержащегося в файле ris.jpg.
2) <IMG SRC=c:\ris.gif> - вставка в документ из корневого каталога диска c: графического объекта, содержащегося в файле ris.gif.
Если рисунок по размерам слишком мал или слишком велик, то его размеры корректируются атрибутами WIDTH и HEIGHT. Первый из них влияет на ширину рисунка, второй – на его высоту. При использовании данных атрибутов необходимо следить за тем, чтобы искажение рисунков не влияло на способность их качественного восприятия. Целесообразно придерживаться отношения 4:3 или 16:9 для горизонтальных и вертикальных сторон.
Пример.
<IMG SRC=ime.jpg WIDTH=200 HEIGHT=150> - изображение, хранящееся в файле ime.jpg, будет иметь 200 пикселей в длину и 150 в высоту.
Некоторые браузеры настроены на работу так, чтобы при загрузке документа не выводить на экран рисунок. Поэтому при внедрении рисунка желательно задавать его краткое описание. Для этого в теге <IMG> применяется атрибут ALT. Его формат: ALT="текст". Значение атрибута называют альтернативным текстом.
Пример.
<IMG SRC= ime.jpg ALT="Институт механики и энергетики"> - при наведении указателя мыши на рисунок, появляется текст «Институт механики и энергетики».
Для внедрения в web-документ мультимедийных объектов применяется тег <EMBED>. Обязательный атрибут этого тега – SRC. Возможно использовать атрибуты WIDTH и HEIGHT.
Пример.
<EMBED SRC= ime.avi> - вставка в документ из текущего каталога анимационного объекта, содержащегося в файле ime.avi.
Рисунок можно использовать в качестве фона страницы. Для этих целей применяется тег <BODY BACKGROUND=URL>, где URL – адрес к файлу, содержащему рисунок.
Для создания гиперссылок используется парный тег <A>, обязательным атрибутом которого является HREF. После знака равенства, записываемого справа от этого атрибута, указывается адрес страницы в Интернет (URL-адрес), путь к файлу, находящемуся на компьютере или ссылка на какую-то часть данного документа.
Наиболее часто применяются гиперссылки на другие web-документы. Если документ находится в рабочем каталоге, например, proba.htm, то ссылка на него имеет вид: <A HREF=proba.htm> ... </A>. Вместо многоточия записывается текст, который и является указателем гиперссылки. В качестве гиперссылок можно использовать не только текст, но и рисунки. Для этого применяется следующая совокупность тегов:
<A HREF=имя документа> <IMG SRC=имя рисунка> </A>
Для рисунков-ссылок желательны файлы формата *.gif.
Задание: В пункте Пуск открыть вкладку Стандартные далее Блокнот и сформировать текст (10 строк) связанный со своей биографией. Отделить заголовок от основного текста, расположить заголовок по центру и установить для него максимальную высоту символов. Разбить текст на абзацы (не менее трех) и отделите один абзац от другого горизонтальной линией. В каждом из абзацев выбрать по одному ключевому слову и выделить их жирным шрифтом. Символы текста должны быть читаемы на выбранном фоне. Индивидуальные требования к оформлению сайта представлены в вариантах задания.
Вариант 1. Создайте сайт используя 4 изображения, одну таблицу размера 4x4. Таблица должна быть в центре, а изображения будут по краям.
Выделите абзац красным цветом. Используйте гиперссылку на сайт дополняющий информацию к вашему сайту.
Вариант 2. Создайте сайт с 3 изображениями одно по центру, два по нижнему левому краю. Ко всем изображениям сделайте соответствующие подписи, выделенных разным цветом. Используйте гиперссылку на сайт,с которого были взята изображения . Найдите на компьютере два файла формата *.avi или *.wav и внедрите один из них на главную страницу.
Вариант 3. Создайте сайт с несколькими анимациями gif и одним изображением. Создайте фон из изображения,текст сделайте жирным .
Используйте несколько гиперссылок сайтов,с которых был взят текст.
Сделайте обратные графические гиперссылки на головной документ.
Вариант 4. Создайте сайт с таблицой, несколькими анимациями.
Таблица размера 5х5,внутри таблицы должны будут храниться параметры связанные с анимациями. Два изображения обязательных и одно используется как фон. Сделайте обратные графические гиперссылки на головной документ.
Вариант 5. Создайте сайт с двумя таблицами и одним изображением.
Изображение по центру. В таблицах будут заданы параметры как то связанные с тематикой сайта. Найдите на компьютере два файла формата *.avi или *.wav и внедрите один из них на главную страницу.
Вариант 6. Создайте сайт с тремя таблицами, двумя изображени-ями. Вставьте по центру анимацию, и снизу укажите гиперссылкой сайт, с которого была взята анимация.Из исходного документа сделайте текстовую гиперссылку на каждый из созданных web - документов.
Вариант 7.Создайте сайт, с несколькими гиперссылками, благодаря которым можно будет перейти на другие сайты связанные с вашей темой.
Вставьте три изображения, и две анимации. Используйте изображение, как фон.
Вариант 8. Создайте сайт с двумя таблицами, двумя анимациями.
Разместите несколько гиперссылок на сайты ,с которых взяты анимации и текст. Сделайте обратные графические гиперссылки на головной документ.
Вариант 9. Создайте сайт с несколькими анимациями gif и одним изображением. Изображение по центру. Найдите на компьютере три файла формата *.avi или *.wav и внедрите один из них на главную страницу.
Используйте гиперссылки сайтов,с которых были взята avi или wav.
Вариант 10. Создайте сайт с двумя таблицами, двумя изображени-ями. Из исходного документа сделайте текстовую гиперссылку на каждый из созданных web-документов. Сделайте обратные графические гиперссылки на головной документ.
Вариант 11. Создайте сайт с таблицей и с тремя изображениями.
Таблица должна быть в центре, а изображения будут по краям. Снизу укажите гиперссылкой сайт, с которого была взята анимация.
Вариант 12. Создайте сайт используя четыре изображения, одну таблицу размером 4x4. Ко всем изображениям сделайте соответствующие подписи, выделенных разным цветом. Используйте гиперссылку на сайт дополняющий информацию к вашему сайту.
Вариант 13. Создайте сайт с тремяя изображениями одно по центру, два по нижнему левому краю. Изображение по центру. Найдите на компьютере три файла формата *.avi или *.wav и внедрите один из них на главную страницу.Используйте гиперссылки сайтов,с которых были взята avi или wav.
Вариант 14. . Создайте сайт с несколькими анимациями gif и одним изображением. Создайте фон из изображения,текст сделайте жирным .
Разместите несколько гиперссылок на сайты ,с которых взяты анимации и текст.
Вариант 15. Создайте сайт с двумя таблицами, двумя анимациями.
Из исходного документа сделайте текстовую гиперссылку на каждый из созданных web-документов. Сделайте обратные графические гиперссылки на головной документ.
Пример выполнения задания
1.Открыть строку Пуск (Start).
2.Открыть вкладки Cтандартные (Accessories) – Блокнот (Notepad) в соответствии с рисунком.
3.В открытое рабочее поле вкладки Блокнот(Notepad), введите следующий обязательный код:
<html>
<head>
<title>Моя первая веб-страница
Заголовок страницы
Основной текст.
Данный текст строит исходное изображение: 4. Добавляем строки в соответствии с индивидуальными требованиями к оформлению сайта указанными в варианте. 5. Сохраняем и закрываем блокнот. 6.Открываем блокнот с помощью Internet Explorer. 7.Из контекстного меню, открываемого щелчком правой кнопки мыши на документе, выбираем команду Просмотр в виде HTML.
