Построение сайта на языке HTML

👀 253 просмотра
📌 229 загрузок

Выбери формат для чтения

Конспект лекции по дисциплине «Построение сайта на языке HTML», docx

Загружаем конспект в формате docx

Это займет всего пару минут! А пока ты можешь прочитать работу в формате Word 👇

Конспект лекции по дисциплине «Построение сайта на языке HTML», 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 – уровень заголовка. Тег определяет абзац (параграф) текста. Является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними): Абзац. Тег </body> - показывает, что тело документа завершено. Тег </html> - закрывает HTML-файл. При форматировании web-страницы можно использовать дополнительные теги: Уменьшенный шрифт Перевод строки <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.