Страница с гиперссылками. Использование CSS

№

Деятельность учителя

Деятельность учащихся

1

Организационный момент.

Здравствуйте ребята! Садитесь! Назовите отсутствующих.

Ученики садятся

2

Повторение пройденного (Взаимооценка)

Мы продолжаем изучение темы создание Web-сайтов с использованием языка разметки гипертекстовых документов HTML, Давайте проверим ваши знания по данной теме полученные ранее.

Работа по индивидуальному проекту.

3

Проблемная ситуация

Удобно ли демонстрировать странички в домашней работе и почему?

Что можно сделать, чтобы было удобно.

Как вы думаете, чем мы будем заниматься сегодня на уроке?

Для чего нужны ссылки?

Что может быть ссылкой (текст или картинка)?

 Как ссылки  выделяются на странице

А какие ссылки бывают?

Нет, каждую страницу нужно отдельно открывать и закрывать

Нужно сделать гиперссылки

Создавать ссылки

Отвечают

4

Сообщение темы и цели.

 «Вставка гиперссылки в WEB-страницу»

У вас на партах лежат карточки с вопросами, вы сегодня на урозаписываете в эти карточки, а дома вклеите  карточки в рабочую тетрадь. Понятно

• Что такое гиперссылка?
• Какие бывают виды гиперссылок?
• Как задаются гиперссылки в НТМL?
• Научиться создавать гиперссылки на практике

Записывают тему урока в тетрадь

5

   Изучение нового материала.

Ребята попробуйте дать ответ на первый вопрос (Это связь между частями текста в большом тексте) Слово Гиперссылка состоит из двух частей Гипер - большой, ссылка – ссылаемся на что-либо (картинку, текст, другой документ).

Какие бывают виды гиперссылок?

На что можно сделать ссылку?

- Какие бывают типы гиперссылок?

Абсолютная ссылка - содержит полный адрес - адрес URL (Единый указатель ресурсов) сервера в Интернет и полный путь.

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

Чаще всего мы говорим «адрес сайта» - это и есть абсолютная ссылка

- Ещё?

 Относительная ссылка - указывает размещение адресуемого файла относительно исходной страницы, откуда исходит ссылка.

Относительная ссылка применяется при формировании своего сайта и позволяет перенести свой сайт на любой компьютер.

Какой тип гиперссылки нужно использовать в домашней работе.

- Для того, чтобы создать гиперссылку нам необходим элемент, отмечающий в документе ссылку. Граница действия элемента определена парным тэгом,  который называется «Анкор» (от слова Anchor -  буквально "якорь")

Тэг <A>…</A>

Тэг <A> применяют с параметрами HREF или NAME, которые уточняют ссылку.

Гиперссылка, связывающая две  странички

Для создания такой гиперссылки, используется запись <A HREF="адрес куда"> Слова откуда </A>

Рассмотрим примеры:

Ссылка на картинку:

<A HREF="img/oz2.jpg">Картинка </A>.

Картинка является ссылкой

<A HREF="1.html"><img src=”img/2.jpg”> </A>.

на другие WEB-страницы и сайты.

<A HREF= "http://www.ronets.hut.ru">здесь </A>.

на адрес электронной почты.

 <A HREF="mailto:svoisait@narod.ru">я</A>.

Второй вид ссылок - гиперссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя скроллирование экрана. Как только вы щелкнете на ссылке, браузер переместит вас на указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера).

            Для создания ссылок, указывающих на  метки, которые, позволяют посетителю  переходить в определенные места документа используется записи:

<A NAME="маркер"> Текст </A>, и

 <A HREF="# маркер"> Слова откуда </A>

где вводится символ # означающий внутреннюю ссылку к другому тексту той же страницы, который помечен тэгом А с параметром NAME как закладка

Символы "#x1" сообщает браузеру, что необходимо найти в данном HTML-документе маркер с именем "x1".

Когда пользователь щелкнет мышью на строке "Раздел 1", браузер перейдет сразу к разделу 1.

Учитель показывает, как сделать ссылку, связывающую две странички

CSS — это язык для оформления структурированных документов, например, HTML- документов. Синтаксис — это плоский список CSS-правил. CSS-правило состоит из селектора и перечня свойств и их значений:

селектор {

  свойство: значение;

  свойство: значение;

}Для комментариев в CSS используются символы /* и */.

Селектор находится в начале CSS-правила, до фигурных скобок, и определяет, к каким HTML-элементам применятся свойства и значения из правила.

.feature-kitten {

  padding-top: 60px;

}Простейшие (и самые популярные) селекторы — это селекторы по тегам и по классам. Селекторы по тегам содержат имя тега без символов < и > и применяются ко всем подходящим тегам. Селекторы по классам начинаются с точки, за которой идёт имя класса, и применяются ко всем тегам с подходящим атрибутом class.

h1 { color: red; }

.info { color: blue; }

На странице может быть несколько списков, и стили применятся ко всем спискам, даже к тем, которые вы менять не хотели. Чтобы избежать таких ситуаций, лучше не использовать селекторы по тегам или использовать их как можно реже.

Если у CSS-правил отличаются только селекторы, а свойства и значения одинаковые, то их можно сгруппировать через запятую.

Также можно комбинировать любые типы селекторов через пробел. Такие селекторы называются вложенными или контекстными и читаются справа налево. Например:

nav a {…}

  .menu ul {…}

  .post .title {…}

• • и значения

Список свойств и значений находится внутри фигурных скобок CSS-правила. Свойство определяет, какую характеристику внешнего вида мы хотим изменить, а значение — как именно.

.feature-kitten {

  padding-top: 60px;

}Каждый раз, когда мы добавляем новое свойство или изменяем его значение, мы меняем что-то на странице.

Наследование в CSS — это механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам. Стили, присвоенные одному элементу, наследуются всеми потомками (вложенными элементами), но только в том случае, если они где-то явно не переопределены.

• • свойства

В CSS есть обычные свойства, управляющие одним параметром отображения, и есть составные свойства, управляющие одновременно несколькими параметрами. Например, свойство font. Оно задаёт сразу шесть параметров: размер и название шрифта, высоту строки и некоторые другие.

font: 16px/26px "Arial", sans-serif;

Если значение обычного свойства не было задано в составном, то браузер при «расшифровке» использует исходное значение этого свойства.

• • значений: абсолютные и относительные

Абсолютные единицы измерения привязаны к настоящим физическим размерам и связаны между собой жёсткими пропорциями. Пиксели, px, используют чаще всего, остальные абсолютные единицы почти не применяют. Примеры абсолютных единиц измерения:

font-size: 1cm;

font-size: 10mm;

font-size: 38px;

Относительные единицы измерения описывают значения, которые зависят от других значений. Например, ширина элемента в процентах зависит от ширины родительского элемента, а ширина элемента в em зависит от размера шрифта самого элемента. К относительным единицам относятся em, rem, vh, vw и некоторые другие, ну и, конечно же, проценты.

• • по умолчанию

Некоторым элементам можно не задавать никаких стилей, но у них всё равно будет какое-то оформление. Например, у списка <ul> есть отступы и маркеры. Такие стили называются стилями по умолчанию и задаются внутри браузерных стилей изначально. Их можно переопределить или сбросить, задав другие значения свойств элементу.

Когда браузер отрисовывает страницу, он должен определить итоговый вид каждого HTML-элемента. Для этого он собирает все CSS-правила, которые относятся к каждому элементу, ведь на элемент могут влиять сразу несколько CSS-правил. Механизм комбинирования стилей из разных источников в итоговый набор свойств и значений для каждого тега называется каскадностью. Например, есть такой элемент в разметке:

<p class="beloved-color">Зелёный - мой любимый цвет</p>

Заданные стили:

.beloved-color { color: green; }

Браузерные стили:

margin: 1em 0;

Итоговые стили:

color: green;

margin: 1em 0;

• • свойств

На один элемент могут действовать несколько CSS-правил. Если в этих правилах есть одинаковые свойства с разными значениями, то возникает конфликт. Например:

ul { list-style: disc; }

.blog-navigation ul { list-style: none; }

Браузеру нужно как-то решать, какими будут итоговые значения конфликтующих свойств. Конфликт разрешается максимум за три шага. Если на текущем шаге определиться не удалось, то выполняется следующий шаг. Вот эти шаги:

1. Сравниваются приоритеты стилевых файлов, в которых находятся конфликтующие свойства. Например, авторские (то есть наши) стили приоритетнее браузерных.
2. Сравнивается специфичность селекторов у CSS-правил с конфликтующими свойствами. Например, селектор по классу более специфичен, чем селектор по тегу.
3. Побеждает то свойство, которое находится ниже в коде.

Каскад работает и внутри CSS-правил.

• • и подключение внешних стилей

Внешние стили подключаются через тег <link>

<link rel="stylesheet" href="style.css">

Встраивание стилей в тег <style>. Его обычно размещают внутри <head>:

<head>

  <style>

    CSS-код

  </style>

</head>

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

Встраивание в атрибут style:

<div style="width: 50%;"></div>

Свойства и значения, прописанные таким образом, применятся точечно к одному элементу.

Обычно использование этого способа считается плохой практикой. Но иногда в виде исключения бывает удобнее воспользоваться встраиванием стилей в атрибут style, чем писать отдельные CSS-правила. Например, когда нужно управлять стилями именно из разметки, и создавать отдельные классы при этом будет излишне. Так бывает, когда какие-то стилевые параметры устанавливаются с помощью сторонних программ или другими людьми, например, через CMS.

Гиперссылка состоит из двух частей Гипер - большой, ссылка – ссылаемся на что-либо (картинку, текст, другой документ).

Отвечают устно

ссылку можно сделать:

• на другой адрес в Интернет,
• на другой файл на своем сайте (сервере),
• на другое помеченное место на читаемой странице,
• на адрес электронной почты E-mail 

(учащиеся записывают в карточку)

Относительные гиперссылки

Ученики записывают в карточку

Смотрят примеры

Ученики записывают в карточку

Внимательно смотрят и помогают учителю

• Например:

<p><b>

Список разделов

</b></p>  <a href="#x1">Раздел 1</a><br> <a href="#x2">Раздел 2</a><br>

<a name="x1"></a>Раздел1</p>  <p>Текст раздела 1</p>   <p><a name="x2"></a>Раздел 2</p>   <p>Текст раздела 2 </p>