Выбранный для просмотра документ 16-17_ гиперссылки на фрагмент страницы и ресурс www.pptx
Скачать материал "HTML. Курс по разработке сайтов. От простого к сложному."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Гиперссылки на фрагменты страницы
2 слайд
Ссылки могут использоваться для перемещения по частям документа.
В тексте, куда будет обращаться ссылка, устанавливается метка с помощью команды:
<a name=CH1>
Раздел 1
</a>
3 слайд
Затем для того, чтобы перейти на эту часть текста, необходимо написать команду:
<a href=“#CH1”>
Смотри раздел 1
</a>
4 слайд
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#000000” text= =“#336699” >
<marquee bgcolor=pink height=20 direction=right behavior=alternate>
СЕМЬ ЧУДЕС СВЕТА
</marquee>
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
<p align=justify>
<font face=“Arial” size=4 color= “#CC0000” >
К моменту изобретения долговечной формулы «семь чудес»
<a name=CH1>
(III век до нашей эры)
</a>
все они существовали , в большинстве своем нетронутые людьми…..
<a href=“#CH1”>
Когда же это было?
</a>
</font>
</p>
<ol>
<li>
…
</li>
….
</body>
</html>
Создадим ссылку, используя текст нашей программы:
5 слайд
Добавление таких гиперссылок может оказаться полезным при составлении оглавления для объемной страницы, а также для быстрого нахождения различных фрагментов HTML-документа.
6 слайд
Гиперссылка на ресурсы WWW
7 слайд
Гиперссылка, содержащая URL-адрес, имеет следующий вид
<a href=http://yandex.ru>
Яндекс
</a>
8 слайд
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#000000” text= =“#336699” >
<marquee bgcolor=pink height=20 direction=right behavior=alternate>
СЕМЬ ЧУДЕС СВЕТА
</marquee>
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
<p align=justify>
….
</p>
<a href=http://gturs.com/Interesting/7.vonder.htm>
ГЕО-ТУР все, что вы хотите знать о географии
</a>
<ol>
…
</ol>
</body>
</html>
Создадим ссылку, используя текст нашей программы:
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ 18_ гиперссылки на адрес электронной почты.pptx
Скачать материал "HTML. Курс по разработке сайтов. От простого к сложному."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Гиперссылки на адрес электронной почты
2 слайд
Адрес для отправки электронной почты:
<a href=mailto: почтовый адрес>
Пишите письма
</a>
3 слайд
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#000000” text= =“#336699” >
<marquee bgcolor=pink height=20 direction=right behavior=alternate>
СЕМЬ ЧУДЕС СВЕТА
</marquee>
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
<p align=justify>
…
</p>
<ol>
…
</ol>
….
<a href=mailto: moimail1@mail.ru>
Ждем ваших отзывов
</a>
</body>
</html>
Создадим ссылку, используя текст нашей программы:
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ 19_создание таблиц.pptx
Скачать материал "HTML. Курс по разработке сайтов. От простого к сложному."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Создание таблиц
2 слайд
Для включения таблицы используется команда:
<table>
Данные таблицы
</table>
3 слайд
Элементы таблицы (заголовки столбцов, строки, ячейки) задаются с помощью следующих подкоманд (тегов):
4 слайд
Например:
<table>
<th> Столбец 1 </th>
<th> Столбец 2 </th>
<th> Столбец 3 </th>
<tr>
<td> Ячейка 1.1 </td>
<td> Ячейка 1.2 </td>
<td> Ячейка 1.3 </td>
</tr>
<tr>
<td> Ячейка 2.1 </td>
<td> Ячейка 2.2 </td>
<td> Ячейка 2.3 </td>
</tr>
</table>
5 слайд
Разместим на нашей web-странице следующую таблицу
6 слайд
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#000000” text= =“#336699” >
…
<a href=mailto: moimail1@mail.ru>
Ждем ваших отзывов
</a>
<table border=2>
<th> Название </th>
<th> Век </th>
<th> Расположение </th>
<tr>
<td> Египетские пирамиды </td>
<td> XXVIII до н.э. </td>
<td> близ Гизы </td>
</tr>
<tr>
<td> Сады Вавилона</td>
<td> VII до н.э. </td>
<td> близ Багдада </td>
</tr>
</table>
</body>
</html>
Например:
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ 20_ гиперссылки на фрагмент страницы и ресурс www.pptx
Скачать материал "HTML. Курс по разработке сайтов. От простого к сложному."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Гиперссылки на фрагменты страницы
2 слайд
Ссылки могут использоваться для перемещения по частям документа.
В тексте, куда будет обращаться ссылка, устанавливается метка с помощью команды:
<a name=CH1>
Раздел 1
</a>
3 слайд
Затем для того, чтобы перейти на эту часть текста, необходимо написать команду:
<a href=“#CH1”>
Смотри раздел 1
</a>
4 слайд
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#000000” text= =“#336699” >
<marquee bgcolor=pink height=20 direction=right behavior=alternate>
СЕМЬ ЧУДЕС СВЕТА
</marquee>
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
<p align=justify>
<font face=“Arial” size=4 color= “#CC0000” >
К моменту изобретения долговечной формулы «семь чудес»
<a name=CH1>
(III век до нашей эры)
</a>
все они существовали , в большинстве своем нетронутые людьми…..
<a href=“#CH1”>
Когда же это было?
</a>
</font>
</p>
<ol>
<li>
…
</li>
….
</body>
</html>
Создадим ссылку, используя текст нашей программы:
5 слайд
Добавление таких гиперссылок может оказаться полезным при составлении оглавления для объемной страницы, а также для быстрого нахождения различных фрагментов HTML-документа.
6 слайд
Гиперссылка на ресурсы WWW
7 слайд
Гиперссылка, содержащая URL-адрес, имеет следующий вид
<a href=http://yandex.ru>
Яндекс
</a>
8 слайд
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#000000” text= =“#336699” >
<marquee bgcolor=pink height=20 direction=right behavior=alternate>
СЕМЬ ЧУДЕС СВЕТА
</marquee>
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
<p align=justify>
….
</p>
<a href=http://gturs.com/Interesting/7.vonder.htm>
ГЕО-ТУР все, что вы хотите знать о географии
</a>
<ol>
…
</ol>
</body>
</html>
Создадим ссылку, используя текст нашей программы:
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ 4 Простейшие команды форматирования.pptx
Скачать материал "HTML. Курс по разработке сайтов. От простого к сложному."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Простейшие команды форматирования
2 слайд
Команда форматирования тела BODY
<body bgcolor=pink text=red link=blue vlink=yellow>
Текст
</body>
Атрибуты:
Bgcolor – цвет фона
Text – цвет текста
Link – цвет ссылки
Vlink – цвет ранее посещавшейся ссылки
3 слайд
Атрибуты команды BODY
Bgcolor – цвет фона
Text – цвет текста
Link – цвет ссылки
Vlink – цвет ранее посещавшейся ссылки
4 слайд
Команда форматирования заголовка
Главный заголовок:
<h1 align=center>
Заголовок 1
</h1>
Подзаголовки:
<h2> Заголовок 2 </h2>
<h3> Заголовок 3 </h3>
<h4> Заголовок 4 </h4>
<h5> Заголовок 5 </h5>
5 слайд
Команда установки шрифта
<font face=“Monotype Corsiva” size=7 color=red>
Текст
</font >
Атрибуты:
Face - вид шрифта
Size - размер шрифта
Color – цвет шрифта
6 слайд
Команда перевода строки br
Для перевода строки на странице HTML используется команда
* Тег
не требует закрывающего тега, т.е. закрывается сразу после выполнения команды
7 слайд
Команда установки абзаца p
<p align=justify>
Текст
</p >
Атрибут align задает вид выравнивания:
justify – по ширине
left – по левому краю
right – по правому краю
Center – по центру
*Будет пропущена пустая строка между абзацами
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ 5-6 Создание и редактирование страницы.pptx
Скачать материал "HTML. Курс по разработке сайтов. От простого к сложному."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Создание и редактирование WEB-страницы
2 слайд
Создадим страницу
«Семь чудес света»
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=pink text=red>
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
<p align=justify>
<font face=“Arial” size=4 color=grey>
ТЕКСТ доклада
</font>
</p>
</body>
</html>
3 слайд
Сохраним набранный текст в файле index.html
4 слайд
Редактирование страницы
Изменение фона страницы:
<body background= “fon1.jpg” text=red>
Цвета можно задавать англ. словами или шестнадцатеричным кодом
<body bgcolor=pink text=“#336699”>
<body bgcolor= “#000000” text=“#336699”>
5 слайд
Включение изображения в документ
<img src=“имя файла”>
Например:
<img src=“piramids.jpg”>
Выравнивание
Top – по верхнему краю
Middle – по середине
Bottom – по нижнему краю
<img align=top src=“piramids.jpg”>
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ 7-8 Изменение цветовой палитры, изменение размера изображений.pptx
Скачать материал "HTML. Курс по разработке сайтов. От простого к сложному."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Изменение цветовой палитры, изменение размера изображений
2 слайд
Добавим немного цвета на нашу страницу и поместим туда семь изображений чудес света
* исходные файлы в формате jpg сохраним в подкаталог MAGIC
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#000000” text= =“#336699” >
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
<p align=justify>
<font face=“Arial” size=4 color= “#CC0000” >
ТЕКСТ доклада
</font>
</p>
<img src=magic/chudo1.jpg>
<img src=magic/chudo2.jpg>
<img src=magic/chudo3.jpg>
<img src=magic/chudo4.jpg>
<img src=magic/chudo5.jpg>
<img src=magic/chudo6.jpg>
<img src=magic/chudo7.jpg>
</body>
</html>
3 слайд
Изменение размера изображения
Команда <img scr> может иметь следующие необязательные параметры:
Aling – выравнивание изображения
Height и width – размер изображения
Hspace и vspaсe – назначает отступы
Например:
<img scr=“zevs.jpg” height= 200 width =200>
в пикселях
<img scr=“zevs.jpg” height= 20% width =20%>
в процентах
4 слайд
Параметры Hspace и Vspace задают размеры пустого пространства (по вертикали и горизонтали соответственно), которое будет оставлено между изображением и другими элементами
Например:
<img scr=“zevs.jpg” hspace = 10 vspace =20>
5 слайд
Выровняем наши иллюстрации на странице по центру и увеличим их размер
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#000000” text =“#336699” >
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
<p align=justify>
<font face=“Arial” size=4 color= “#CC0000” >
ТЕКСТ доклада
</font>
</p>
<img src=magic/chudo1.jpg align=middle height=20% width=20%>
<img srcmagic/chudo2.jpg align=middle height=20% width=20% >
<img src=magic/chudo3.jpg align=middle height=20% width=20% >
<img src=magic/chudo4.jpg align=middle height=20% width=20% >
<img src=magic/chudo5.jpg align=middle height=20% width=20% >
<img src=magic/chudo6.jpg align=middle height=20% width=20% >
<img src=magic/chudo7.jpg align=middle height=20% width=20% >
</body>
</html>
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ 9-10_списки на странице_практическая работа.pptx
Скачать материал "HTML. Курс по разработке сайтов. От простого к сложному."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Списки на странице
html-документа
2 слайд
В языке HTML существуют следующие виды списков:
Маркированные
Нумерованные
Списки определений
3 слайд
Маркированный список
Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка (квадрата, галочки, звездочки).
Для указания маркированных списков используется команда:
<ul>
<li> Первый элемент списка</li>
<li>Второй элемент списка </li>
<li>Третий элемент списка </li>
</ul>
4 слайд
Форма маркера
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега <ul>.
5 слайд
Нумерованный список
Нумерованные списки представляют собой набор элементов с их порядковыми номерами.
Нумерованный список задается командой:
<ol>
<li> Первый элемент списка </li>
<li> Второй элемент списка</li>
<li>Третий элемент списка </li>
</ol>
6 слайд
Тип нумерации
Нумерация устанавливается автоматически.
Атрибут type назначает тип нумерации.
7 слайд
Список определений
Список определений состоит из двух элементов — термина и его определения.
Сам список задается с помощью контейнера <dl>, термин — тегом <dt>, а его определение — с помощью тега <dd>.
<dl>
<dt>Термин 1</dt> <dd>Определение 1</dd> <dt>Термин 2</dt> <dd>Определение 2</dd>
</dl>
8 слайд
ПРАКТИЧЕСКАЯ РАБОТА
Размещение списков в HTML-документе
9 слайд
Добавим на созданную нами страницу «Семь чудес света» списки из семи элементов
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#000000” text= =“#336699” >
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
<p align=justify>
<font face=“Arial” size=4 color= “#CC0000” >
ТЕКСТ доклада
</font>
</p>
<ol>
<li> Пирамиды
<img src=magic/chudo1.jpg align=middle height=20% width=20% hspace=10 vspaсe=20>
</li>
<li> Cады Семирамиды
<img src=magic/chudo2.jpg align=middle height=20% width=20% hspace=10 vspaсe=20>
</li>
<li> третье чудо
<img src=magic/chudo3.jpg align=middle height=20% width=20% hspace=10 vspaсe=20>
</li>
….
<li> седьмое чудо
<img src=magic/chudo7.jpg align=middle height=20% width=20% hspace=10 vspaсe=20>
</li>
</ol>
</body>
</html>
10 слайд
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ 11-12бегущая строка, что такое URL.pptx
Скачать материал "HTML. Курс по разработке сайтов. От простого к сложному."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Бегущая строка
2 слайд
Бегущая строка представляет из себя текст, бегущий из одного края web-страницы к другому
Бегущие строки создаются с помощью команды:
<marquee>
ТЕКСТ
</marquee>
3 слайд
Атрибуты
4 слайд
Добавим бегущую строку на нашу страницу:
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#FFE4C4” text= =“#336699” >
<marquee bgcolor=pink height=20 direction=right behavior=alternate>
СЕМЬ ЧУДЕС СВЕТА
</marquee>
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
…
</html>
5 слайд
URL
6 слайд
Главным преимуществом документов HTML является возможность указать связи с другими документами и перейти на них.
URL (Uniform Resource Locator) –
единый указатель ресурсов сети Интернет
Стандарт записи:
http://имя сервера/путь/имя файла
http – протокол передачи гипертекста – способ обмена данными между серверами и клиентами
7 слайд
Для размещения на нашей странице картинки, которая находится на другом компьютере, необходимо указать ее URL
<IMG src= “www.homepage.ru/one/piramids.jpg” >
Если графический файл находится на вашем компьютере, но на другом диске, указываем полный путь к нему:
<IMG src= “d:/one/two/piramids.jpg” >
НО для удобства доступа к графическим изображениям лучше хранить все необходимые файлы в папке на вашем компьютере
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ 13-14_гиперссылки на странице.pptx
Скачать материал "HTML. Курс по разработке сайтов. От простого к сложному."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Гиперссылки на странице
html-документа
2 слайд
Гиперссылка выделяется в тексте специальным цветом и активируется мышью.
<a href=“имя файла”>
Название ссылки
</a>
3 слайд
Ссылки на странице могут указывать:
На другой текстовый файл
Фрагменты текста
Ресурсы www
Адрес электронной почты
Графические изображения
4 слайд
Создадим новый текстовый файл egipt_pyramids.html
На главной странице сайта «Семь чудес света» добавим гиперссылку на этот файл, сделав ссылкой первый элемент списка.
5 слайд
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#000000” text= =“#336699” >
<marquee bgcolor=pink height=20 direction=right behavior=alternate>
СЕМЬ ЧУДЕС СВЕТА
</marquee>
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
<p align=justify>
<font face=“Arial” size=4 color= “#CC0000” >
ТЕКСТ доклада
</font>
</p>
<ol>
<li> Пирамиды
<a href=egipt_pyramids.html>
Египетские пирамиды
</a>
<img src=magic/chudo1.jpg align=middle height=20% width=20% hspace=10 vspaсe=20>
</li>
…
</body>
</html>
На главной странице сайта «Семь чудес света» добавим гиперссылку на этот файл, сделав ссылкой первый элемент списка.
6 слайд
Для возврата на главную страницу организуем ссылку на странице «Египетские пирамиды» с помощью той же команды, но правильно указав имя головного файла index.html
7 слайд
<html>
<head>
<title> Египетские пирамиды </title>
</head>
<body bgcolor=“#000000” text= =“#336699” >
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Египетские пирамиды
</font>
</h1>
<p align=justify>
<font face=“Arial” size=4 color= “#CC0000” >
ТЕКСТ о пирамидах
</font>
</p>
<a href=index.html>
На главную
</a>
</body>
</html>
8 слайд
Рабочие листы
к вашим урокам
Скачать
Выбранный для просмотра документ 15_изображение как гиперссылка.pptx
Скачать материал "HTML. Курс по разработке сайтов. От простого к сложному."
Рабочие листы
к вашим урокам
Скачать
1 слайд
Изображение как гиперссылка
2 слайд
Ссылкой может быть не только текст, но и картинка.
Изображение в этом случае надо поместить между тегами <a> и </a>, как показано в примере 1
3 слайд
<html>
<head>
<title> Семь чудес света </title>
</head>
<body bgcolor=“#000000” text= =“#336699” >
<marquee bgcolor=pink height=20 direction=right behavior=alternate>
СЕМЬ ЧУДЕС СВЕТА
</marquee>
<h1 align=center>
<font face=“Monotype Corsiva” size=7 color=yellow>
Семь чудес света
</font>
</h1>
<p align=justify>
<font face=“Arial” size=4 color= “#CC0000” >
ТЕКСТ доклада
</font>
</p>
<ol>
<li> Пирамиды
<a href=egipt_pyramids.html>
Египетские пирамиды
<img src=magic/chudo1.jpg align=middle height=20% width=20% hspace=10 vspaсe=20>
</a>
</li>
…
</body>
</html>
Пример 1
Рабочие листы
к вашим урокам
Скачать
Рабочие листы
к вашим урокам
Скачать
6 663 584 материала в базе
Настоящий материал опубликован пользователем Неизвестный Константин Алексеевич. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт
Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.
Удалить материал
Ваша скидка на курсы
40%
Курс профессиональной переподготовки
300/600 ч.
Курс повышения квалификации
36 ч. — 180 ч.
Курс профессиональной переподготовки
500/1000 ч.
Мини-курс
10 ч.
Оставьте свой комментарий
Авторизуйтесь, чтобы задавать вопросы.