Презентация на тему "Создание Веб-сайта. Язык html." 10 класс

Практическое задание Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.

Выровняйте весь заголовок по центру и сделайте его красным цветом, размер шрифта - 5, создайте голубой фон и желтый цвет текста Поработайте с заголовками разных уровней, обратите внимание, что цвет добавленного текста – желтый, т.к. в

, заменив на
• :

Создайте нумерованный список:

замените на

. Посмотрите разные виды нумераций, написав
, попробуйте все виды нумераций списка: "Circle", "Disk", "A", "I" Не забывайте сохранять свою страницу в одном и том же файле glavn.htm. Назад

Вставка графических изображений

Одиночный тег вставляет графические изображения в текстовый поток в любом месте: Необязательные атрибуты тега : ALT = альтернативный текст BORDER =толщина обрамляющей рамки в пикс., 0 нет рамки HEIGHT =высота изображения в пикселах или % WIDTH =ширина изображения в пикселах или %

VSPACE =- свободное пространство сверху и снизу от изображения в пикселах или % ALIGN = left, right, middle выравнивание изображения Чтобы рисунок был по центру, можно использовать тег

Для вставки рисунка в web – страницу используется тег , с его неотъемлемым атрибутом src, которому присваивается значение адреса рисунка, его названия и расширения. В данном примере это “tiger” c расширением jpg. Видим рисунок.

Практическое задание Задание: Создать папку для рисунков, скопировать рисунки, переименовать.Создать новый документ html. Вставить 4 рисунка, используя все атрибуты, но присваивая им различные значения. Добавить текст. Чтобы сделать вашу новую страничку интереснее можете закрасить фон страницы и изменить цвет текста. - Мы с вами это уже делали на предыдущих занятиях.

Найдите фотографию любимого места в городе и сохрание в своей папке. Вставьте фотографию на Web-страницу в файл glavn.htm. Чтобы рисунок был по центру, его надо заключить в тег

Создайте альтернативный текст, который появится под указателем мыши при наведении на картинку, написав alt= “Мое любимое место в Санкт-Петербурге”. Создайте вокруг рисунка обрамляющую рамку: border=5. Если рисунок окажется слишком маленьким, поэкспериментируйте с соответствую щими атрибутами.

Самостоятельно создайте HTML-документы для всех мест, называя их a1.htm, a2.htm, a3.htm, a4.htm, взяв за основу файл glavn.htm. Измените заголовок, фотографию мест, вместо списка мест вставьте небольшой текст про любимое место в городе и выровняйте его по ширине. Фотографии любимых мест и текст берите из Интернета. Фотографии любимых мест сохраняйте в своей папке. Копирование фрагментов текста из Интернета осуществляйте через опции «Копировать» и «Вставить».

Вставка графических изображений Всеми браузерами поддерживаются форматы .gif,.jpg. Эти форматы являются растровыми. GIF –поддерживается прозрачность и анимация, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотоuрафий,анимацию не поддерживает.Одиночный тег вставляет графические изображения в текстовый поток в любом месте:

Необязательные атрибуты тега : ALT = альтернативный текст BORDER =толщина обрамляющей рамки в пикс., 0 нет рамки HEIGHT =высота изображения в пикселах или % WIDTH =ширина изображения в пикселах или % VSPACE =свободное пространство сверху и снизу от изображения в пикселах или % ALIGN = left, right, middle выравнивание изображения Чтобы рисунок был по центру, можно использовать тег

Практическое задание №3 Вставка и форматирование графических изображений. Самостоятельное создание Web-страниц любимых мест в Санкт-Петербурге. Назад

Фундаментальное свойство гипертекста состоит в том, что он позволяет связывать документы гиперссылками. С помощью гиперссылок можно указать: На другой HTML-документ; На любой другой документ; На определенное место внутри текущего или какого-либо другого документа;  Документы превращаются в точки пересечения нитей информационной паутины и становиться понятным название «Всемирная паутина» Гиперссылки

Атрибуты: href=“URL”– адрес перехода. Как задавать адрес? Любимые места в Санкт-Петербурге переход к документу, расположенному в той же папке, что и документ-источник. Гиперссылки

Связь с другими документами организуется тегами …. текст гиперссылки. Рисунок так же можно сделать, как гиперссылку,написав: Гиперссылки

Использование рисунков в качестве гиперссылки . . . Любимые места в Санкт-Петербурга … . . . 2.html 1.html

2. Уроки по информатике Переход к документу, который находится в Интернете по указанному адресу. Для этого перехода нужно, чтобы компьютер был подключен к Интернету. 3. Пишите мне Щелчок на такой гиперссылке вызывает загрузку почтовой программы с уже заполненным полем адреса электронной почты. 4. Перейти к разделу 1 Ссылка на определенное место в текущем документе. 5. Глава 1 Ссылка на определенное место в документе 2.html .

Создание гиперссылки внутри текущего документа или к определенному фрагменту какого-либо другого документа распадается на 2 части: Создание метки (якоря), которая является целью гиперссылки. Создание самой гиперссылки. Гиперссылки внутри одного документа Ссылка на главу 1. Ссылка на главу 2. Якорь для главы 1 Якорь для главы 2

Практическое задание №4 Оформление списка любимых мест в Санкт-Петербурге на главнойстраницеglavn.htm, как гиперссылки на соответствующиеWeb-страницы театров Назад

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

Основные атрибуты тегов

WIDTH=значение – ширина таблицы (ячейки) – в пикселах, или в процентах (

Создание навигации по сайту в форме таблицы из одной строки Практическое задание №5 Назад

Секция заголовка

HEAD>

Самостоятельная работа над своим проектом Примерные темы проекта: “Мосты через Неву”,“Реки и каналы Санкт-Петербурга”, “Мосты через каналы Санкт-Петербурга”, “Необычные музеи Санкт-Петербурга”, “Музыкальные театры”, “Филармонии и капелла”, “Технические ВУЗ-ы Санкт-Петербурга”, “Детские театры Санкт-Петербурга”, “Гуманитарные ВУЗ-ы Санкт-Петербурга”, “Пригороды Санкт-Петербурга”, “Музеи Санкт-Петербурга”, “Военные учебные заведения в Санкт-Петербурге”и др. Необходимо оформить главную страницу сайта по образцу файла glavn.htm, выбрав в качестве навигации по сайту таблицу или список, и 2 - 3 страницы, раскрывающие содержание сайта и содержащие: заголовок, текст и рисунок Назад

«Создание Web-сайта на языке HTML» 1. Для каких целей может использоваться тег : 1. Для вставки рисунков; 2. Для оформления текста полужирным шрифтом; 3. Для создания гиперссылки; 4. Для оформления текста курсивом;   2. Увеличить размер шрифта можно, используя тег: 1. ; 2. ; 3.

; 4. ;

«Создание Web-сайта на языке HTML» 3. Какой из вариантов структуры HTML-документа правильный? 1. Первый; 2. Второй; 3. Третий; 4. Четвертый;

«Создание Web-сайта на языке HTML» 4. Чтобы закончить строку и начать новую используют тег: 1.

;  5. Какой из тегов разместит текст посередине окна браузера? 1.

; 2. ; 3.

; 4. ;

«Создание Web-сайта на языке HTML» 6. Какой из тегов служит для управления различными параметрами шрифтового оформления? 1.

«Создание Web-сайта на языке HTML» 8. Какой из вариантов вставки рисунка правильный? 1. ; 2. ; 3. ; 4. >;   9. Что делает тег

? 1. Оформляет выделенный участок текста курсивом; 2. Создает абзац; 3. Выделяет текст полужирным шрифтом; 4. Вставляет пробелы перед следующим словом текста;

«Создание Web-сайта на языке HTML» 10. Какая структура таблицы правильная? Первая; Вторая; Третья; Четвертая; Назад

«Создание Web-сайта на языке HTML»