Поделиться
Рабочий лист урока «Текстовые ссылки».docx
Рабочий лист урока «Текстовые ссылки»
учени_________________________класса_______________
______________________________школы_______________
___________________________________________________
___________________________________________________
1)
Привет
друг!!!!! Меня зовут «Гриша» и я очень люблю создавать различные ссылки!
Сегодня я хочу тебя научить делать ссылки на файлы, страницы, видео и изображения. Думая, для тебя не секрет, что такое ссылка, а если ты не знаешь, что это такое, то зажми CTRL и нажми на кнопку или на значок браузера.
 |
2.Как-то раз меня отправили родители в магазин и сказали купить там…. И я, недослушав родителей, сразу побежал к выходу. Находясь уже на улице, я впал в ступор. А в какой магазин мне нужно? А купить то, что нужно? А принести куда? А положить куда? Мне тогда пришлось возвращаться и ещё раз спрашивать, что нужно купить.
Так вот, зачем я рассказываю тебе эту историю? Чтобы браузер не впал в ступор, как я, ему необходимо знать:
· Точное название документа
· Путь к документу
· Место, где его открыть
3)Перед тем, как создать ссылку на другой документ, нужно его создать.
Давай создадим несколько страниц, по которым будем переходить?
· Первую страницу назовем- Собака
· Вторую-Гриша
1 задание.
Помоги создать Грише первую страницу. Страница, которая нужна Грише, должна выглядеть следующим образом:
Обрати внимание, что:
· Название страницы: Собака
· Заголовок: Собака-это друг человека! (выравнивание в центре)
· Текст:
· 1 строка. У меня есть такой друг!
· 2 строка. Зовут его Гриша.
Расположите теги в правильной последовательности:
2 задание.
Помоги создать Грише вторую страницу. Страница, которая нужна Грише, должна выглядеть следующим образом:
Обрати внимание, что:
· Название страницы: Гриша
· Заголовок: Гриша (выравнивание в центре)
· Цвет фона: красный
· Цвет текста: жёлтый
· Изображение:
· Выравнивание: центр
· Размер: 300 на 300
· Название файла: Гриша.png
Ответ:
4)Отлично, теперь у нас есть 2 страницы и мы можем создать ссылку.
Для этого нам потребуется тег <a>…..</a> и href, который задаёт имя и путь к файлу.
<a href= “путь к файлу”> Название ссылки </a>
Пример:
<HTML>
<head>
<title>Ссылка</title>
</head>
<body>
<a href= “primer.html”> Ссылка на документ</a>
</body>
</HTML>
5)Ссылку можно добавлять не только на файл, но и на другую страницу, картинку или видео в интернете.
Пример
<a href="https://skillbox.ru">Здесь я учусь!!</a>
<a href="https://www.kinopoisk.ru">Тут я смотрю кино</a>
6)Давай теперь создадим 2 ссылки на уже созданных страницах.
Задание 3.
Напишите код двух страниц(задание 1 и задание 2) так, чтобы, при нажатии на ссылку на 1 странице, переходило на 2 страницу, а на второй-на первую.
Название ссылки 1: Дальше
Название ссылки 2: Назад
1
страница 2 страница
 |
7)Ну вот и все! Я очень был рад с тобой познакомится! До новых встреч.
Итог:
<a href= “путь к файлу”> Название ссылки </a>
Проверь себя
1 задание
4,5,7,3,2,10,1,14,15,8,16,15,12,11,13,6,9
2 задание
<HTML>
<head>
<title>Гриша</title>
</head>
<body bgcolor="red">
<font color="yellow">
<h1><p align="center">Гриша</p></h1>
<p align="center"><img src="Гриша.png" width="300" height="300">
</font>
</body>
</HTML>
3 задание
|
1 страница |
2 страница |
|
<HTML> <head> <title>Собака</title> </head> <body> <h1> <p align="center">Собака-друг человека!</p> </h1> У меня есть такой друг! <br> Зовут его Гриша. <a href="Гриша.html ">Вперед </a>
</body> </HTML>
|
<HTML> <head> <title>Гриша</title> </head> <body bgcolor="red"> <font color="yellow"> <h1><p align="center">Гриша</p></h1> <p align="center"><img src="Гриша.png" width="300" height="300"> </font> <a href="Собака.html ">Назад </a>
</body> </HTML>
|
Скачано с www.znanio.ru
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
