kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей

Гиперссылки и списки

Нажмите, чтобы узнать подробности

Тема урока: Гиперссылки и списки.

Ход урока

  1. Организационная часть – 5 минут
    1. Приветствие и отчет дежурного о присутствии учащихся
    2. Проверка внешнего вида
    3. Проверка готовности к уроку

 

  1. Вводный инструктаж – 35 минут
    1. Сообщение темы и цели урока
    2. Актуализация опорных знаний
      1. Какие теги формирования документа вы знаете?
      2. Как установить цвет фона документа?
      3. Какие теги используются для создания таблиц?
      4. Как поместить в качестве фона изображение?
    3. Мотивация.
    4. Изложение нового материала
    5. Повторение правил по ТБ
    6. Закрепление  изученного материала
    7. Подведение итога вводного инструктажа
  2. Текущий инструктаж
  3. Заключительный инструктаж

 

Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Наладить дисциплину на своих уроках.
Получить возможность работать творчески.

Просмотр содержимого документа
«Памятка»

Основные тэги языка HTML

Назначение

Вид тэгов

Примечание

Общая структура документа HTML

Тип документа


HTMLHTML

Начало и конец

Имя документа

HEADHEAD

Не отображается Браузером

Заголовок

Отображается в строке заголовка окна Браузера

Тело

Просмотр содержимого документа
«Практ_3_ HTML»

Язык разметки гипертекста HTML


Практическая работа № 3


Добавить списки на WEB-странички, созданные на прошлом уроке:

1.html


1.












2.














3.












4. Создать еще одну WEB-страничку index.html, на которой должны быть гиперссылки на 1.html, 2.html, 3.html. На этих страничках нужно сделать переход на главную (index.html)

Просмотр содержимого документа
«конспект»

Тема урока: Гиперссылки и списки.

Ход урока

  1. Организационная часть – 5 минут

    1. Приветствие и отчет дежурного о присутствии учащихся

    2. Проверка внешнего вида

    3. Проверка готовности к уроку


  1. Вводный инструктаж – 35 минут

    1. Сообщение темы и цели урока

    2. Актуализация опорных знаний

      1. Какие теги формирования документа вы знаете?

      2. Как установить цвет фона документа?

      3. Какие теги используются для создания таблиц?

      4. Как поместить в качестве фона изображение?

    3. Мотивация.

    4. Изложение нового материала

    5. Повторение правил по ТБ

    6. Закрепление изученного материала

    7. Подведение итога вводного инструктажа

  2. Текущий инструктаж

  3. Заключительный инструктаж


Ход урока

  1. Организационная часть – 5 минут


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


  1. Вводный инструктаж – 30 минут

Мастер сообщает тему и цели урока:

Тема: Гиперссылки и списки.

Цель – сформировать основные принципы добавления гиперссылок в Web-документы, познакомится с основными видами списков в HTML.


Актуализация опорных знаний.

Вопросы учащимся:

  • В каких скобках записываются теги?

HTML-тэг записывается в угловых скобках () и состоит из имени

  • Какие теги формирования документа вы знаете? (определяющие структуру документа)

HTML –документ заключается в тэги HTML и /HTML. Между этими тэгами располагаются две секции:

секция заголовка (между тэгами HEAD и HEAD) и

секция тела документа (между тэгами BODY и BODY).

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

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


  • Как установить цвет фона документа?

Цвет основного текста, цвет гиперссылок и фон документа описываются в начальном тэге тела документа BODY с помощью атрибутов.

  • Как вставить новую строку?

Тэг BR (от английского break) – вставка новой строки.

Тэг P (от английского paragraph) – начинает абзац с новой строки, отделяя от предыдущего двойным межстрочным интервалом.

  • Как установить заголовок, какие уровни заголовков вы знаете?

Тэги вида HnHn оформляют заключенный в них текст в виде Заголовка n-уровня. Значения n могут изменяться от 1 (самый крупный) до 6 (самый мелкий). Так же, как и тэг абзаца P, тэг Заголовка прерывает текстовый поток и отделяет его пустой строкой.

Тэги H1, H2, H6 могут иметь атрибут выравнивания ALIGN со значениями LEFT (по умолчанию), CENTER, RIGHT и JUSTIFY.


  • Какие теги используются для создания таблиц?

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

Основные тэги таблиц:

TABLE …TABLE – начало и окончание таблицы;


TRTR – начало и окончание строки;

TDTD – начало и окончание ячейки.


Ячейки таблицы могут содержать любые данные, допустимые в HTML-документе, в том числе и вложенные таблицы. Не следует оставлять ячейки таблицы незаполненными. Если по замыслу ячейка должна выглядеть пустой, следует расположить в ней хотя бы неразрывный пробел – &nbsp.

Для оформления таблиц могут быть использованы атрибуты, задаваемые в тэгах TABLE, TR и TD


  • Как поместить в качестве фона изображение?

Тэг IMG вставляет изображение в текстовый поток. Закрывающего компонента тэг не имеет.

Обязательным атрибутом его является SRC=URL


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

Умея создавать гиперссылки при создание веб-документов поможет нам при разработке собственных веб-страниц.


Изложение нового материала

Мастер на мультимедийном экране показывает презентацию.


Гиперссылки.

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

С помощью гиперссылок можно указать:

  • На другой HTML-документ;

  • На любой другой документ;

  • На определенное место внутри текущего или какого-либо другого документа;

 Документы превращаются в точки пересечения нитей информационной паутины и становиться понятным название «Всемирная паутина»


Создание гиперссылок

Связь между HTML-документами и фрагментами документов организуется с помощью тэгов A …A (от английского anchor – якорь).

Тэг A употребляется в двух формах – для перехода на другой документ в его начало, или для перехода к поименованному фрагменту (якорю) того же или другого документа.

В первом случае обязательным атрибутом является HREF=URL – адрес целевого документа.

Текст и изображения, размещенные между тэгами A …A, становятся активной зоной, чувствительной к щелчку мыши, который вызывает загрузку целевого документа. Текст гиперссылки выделяется подчеркиванием и цветом, указанным как значение атрибута LINK тэга BODY, либо цветом по умолчанию.

Во втором случае при создании якоря (метки или закладки) фрагмента обязателен атрибут NAME=#имя, где имя – идентификатор фрагмента (якоря).

Пример. Пусть в документе report.htm была определена закладка:

A NAME=”CHEPTER2” A

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

переход к Главе 2


Списки


HTML позволяет создавать нумерованные и маркированные списки.

Фрагмент текста, представляющий список, заключается в тэги:

OL …. OL упорядоченный список (ordered list);

UL ….UL неупорядоченный список (unordered list);

DL ….DL список определений (definition list).

Каждый элемент списка заключается в тэги LI ….LI (от английского list item). При вывод на экран элементы списка имеют отступ и начинаются с новой строки.

Тэг нумерованного списка может иметь параметры TYPE= , определяющий вид нумерации, и START= , задающий начальное значение первого элемента списка (независимо от типа указывается цифрой). Ниже приведены значения параметра TYPE, задающие тип маркера:

TYPE=A – маркеры в виде прописных латинских букв;

TYPE=a – маркеры в виде строчных латинских букв;

TYPE=I – маркеры в виде больших римских цифр;

TYPE=i – маркеры в виде маленьких римских цифр;

TYPE=1 – маркеры в виде арабских цифр (по умолчанию).

В тэгах маркированного списка параметр TYPE указывает тип маркера: закрашенные кружочки – disc, не закрашенные кружочки – circle, закрашенные квадратики – square.


Повторение правил по ТБ – 3-5 мин

Показ презентации


Закрепление изученного материала – 10 мин

Выполнение учащимися заданий для закрепления нового материала

Проверка правильности выполнения задания.


Типичные ошибки.

  • Не закрытие основного тега документа.

  • Не правильно прописан адрес нахождения документа на который сделана ссылка

a href="List_1.html"Упорядоченные спискиa

  • Не правильно прописано имя документа на которое ссылается ссылка

  • Файл на который ссылается гиперссылка находиться в другой папке (если адрес не прописан)

  • Не правильно прописан атрибут


Запись

Подведение итога вводного инструктажа – 5 мин


  1. Текущий инструктаж – 6 часов

  2. Заключительный инструктаж – 5 мин


Задание.

  1. В блокноте создайте документ

Списки гиперссылок


Перечень типов списков

  • List_1.html"Упорядоченные списки

  • List_2.html"Неупорядоченные списки

  • List_3.html"Списки определений

  • List_5.html"Вложенные списки

List_5.html"

1.JPG" width="100" align="middle"

Списки с рисунком-маркером

Просмотр содержимого презентации
«гиперссылки»

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

Гиперссылки

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

С помощью гиперссылок можно указать:

  • На другой HTML - документ;
  • На любой другой документ;
  • На определённое место внутри текущего или какого-либо другого документа;

 Документы превращаются в точки пересечения нитей информационной паутины и становиться понятным название «Всемирная паутина»

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

Создание гиперссылок Тэг

Атрибуты:

href=“URL” – адрес перехода.

Как задавать адрес?

  • Перейти на вторую станицу

переход к документу, расположенному в той же папке, что и документ-источник.

1.html

. . .

Перейти на вторую станицу

2.html

. . .

Перейти к разделу 1 Ссылка на определенное место в текущем документе. 5. Глава 1 Ссылка на определенное место в документе 2.html ." width="640"

2.

Уроки по информатике

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

3.

Пишите мне

Щелчок на такой гиперссылке вызывает загрузку почтовой программы с уже заполненным полем адреса электронной почты.

4. раздел 1” Перейти к разделу 1

Ссылка на определенное место в текущем документе.

5. Глава 1

Ссылка на определенное место в документе 2.html .

Использование рисунков в качестве гиперссылки

Использование рисунков в качестве гиперссылки

Списки Упорядоченные Неупорядоченные Списки определений Вложенные списки

Списки

Упорядоченные

Неупорядоченные

Списки определений

Вложенные списки

Упорядоченные списки Используются для:

Упорядоченные списки

Используются для:

  • Оглавлений
  • Перечня предписаний (например инструкции по установке стиральной машины)
  • Последовательных разделов книги
  • Присоединения номеров к кратким фразам, на которые, возможно, придется где-то ссылаться.
Тэг … заголовок списка  Тэг  элемент списка Атрибуты start=“ число “  устанавливает номер списка, с которого начинается нумерация Type=” тип ” устанавливает тип номеров в списке Тип Стиль 1 Образец Арабские цифры (по умолчанию) A Заглавные буквы a 1, 2, 3, 4,… A, B, C, D,… Строчные буквы I Заглавные римские a, b, c, d,… i I, II, III, IV,… Строчные римские i, ii, iii, iv,… В тэг  можно вставлять атрибуты Type=” тип ”  и value=“ число “  Пример использования  упорядоченного списка

Тэг

заголовок списка Тэг
  • элемент списка

    Атрибуты

    start=“ число устанавливает номер списка, с которого начинается нумерация

    Type=” тип устанавливает тип номеров в списке

    Тип

    Стиль

    1

    Образец

    Арабские цифры (по умолчанию)

    A

    Заглавные буквы

    a

    1, 2, 3, 4,…

    A, B, C, D,…

    Строчные буквы

    I

    Заглавные римские

    a, b, c, d,…

    i

    I, II, III, IV,…

    Строчные римские

    i, ii, iii, iv,…

    В тэг

  • можно вставлять атрибуты

    Type=” тип и value=“ число

    Пример использования

    упорядоченного списка

    Неупорядоченные списки Используются для перечня элементов, для которых не важен порядок следования: Список гиперссылок; Выделение ключевых фрагментов текста; Список покупок.  Тэги … заголовок списка   элемент списка Атрибуты ( маркеры для обозначения элементов списка) Disc   (по умолчанию) Circle  Square  Пример использования  неупорядоченного списка

    Неупорядоченные списки

    Используются для перечня элементов, для которых не важен порядок следования:

    • Список гиперссылок;
    • Выделение ключевых фрагментов текста;
    • Список покупок.

    Тэги

    заголовок списка

  • элемент списка

    Атрибуты

    ( маркеры для обозначения элементов списка)

    Disc (по умолчанию)

    Circle

    Square

    Пример использования

    неупорядоченного списка

    Списки определений Используются для: Словарей; Списка типа имя / значение; Создания маркеров элементов списка.  Списки определений устроены как статьи в толковом словаре, которые могут быть заполнены текстом и картинками. Тэг … заголовок списка Каждый элемент списка состоит из двух частей – термина и определения:   - термин   - определение или объяснение Пример использования списка определений

    Списки определений

    Используются для:

    • Словарей;
    • Списка типа имя / значение;
    • Создания маркеров элементов списка.

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

    Тэг заголовок списка

    Каждый элемент списка состоит из двух частей – термина и определения:

    - термин

    - определение или объяснение

    Пример использования

    списка определений

    Вложенные списки В любой из типов списков можно вкладывать другие списки . Пример Использование небольших рисунков в качестве маркеров списка Пример

    Вложенные списки

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

    Пример

    Использование небольших рисунков

    в качестве маркеров списка

    Пример

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

    Компьютеры

    Компьютер является электрическим прибором, поэтому для собственной безопасности необходимо помнить,

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

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

    Нельзя!!!

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

    Пользоваться неисправной техникой.

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

    Нельзя!!!

    Нельзя!!!

    • Касаться тыльной стороны монитора, разъёмов, соединительных кабелей, токоведущих частей аппаратуры руками и/или острыми металлическими предметами.
    • Самостоятельно устранять неисправность работы аппаратуры.
    • Передвигать системный блок и монитор.
    Нельзя!!! Прикасаться к экрану руками.

    Нельзя!!!

    Прикасаться к экрану руками.

    Нельзя!!! Близко приближаться к монитору. Придерживайтесь безопасного расстояния.

    Нельзя!!!

    Близко приближаться к монитору.

    Придерживайтесь безопасного расстояния.

    Разрешено!!! Соблюдать правила техники безопасности, порядок и дисциплину. Заходить в кабинет только с разрешения мастера. Передвигаться в кабинете спокойно, не торопясь. Работать только на том компьютере, который выделен на данное занятие.

    Разрешено!!!

    Соблюдать правила техники безопасности, порядок и дисциплину.

    Заходить в кабинет только с разрешения мастера.

    Передвигаться в кабинете спокойно, не торопясь.

    Работать только на том компьютере, который выделен на данное занятие.

    Разрешено!!! Перед началом работы убедиться в отсутствии видимых повреждений оборудования на рабочем месте. Строго следовать инструкциям мастера. После себя закрыть все открытые программы. В случае неисправности оборудования сообщить мастеру или лаборанту.

    Разрешено!!!

    Перед началом работы убедиться в отсутствии видимых повреждений оборудования на рабочем месте.

    Строго следовать инструкциям мастера.

    После себя закрыть все открытые программы.

    В случае неисправности оборудования сообщить мастеру или лаборанту.

    Запрещено!!!

    Запрещено!!!

    • Находиться в кабинете в верхней одежде, головных уборах, грязной ( не сменной!!!) обуви.
    • Работать грязными, влажными руками, во влажной одежде.
    • Громко разговаривать, шуметь, отвлекать других учащихся.
    Запрещено!!!

    Запрещено!!!

    • Употреблять ненормативную лексику.
    • Употреблять пищу за компьютером.
    • Играть в компьютерные игры в учебное время.
    • Включать/выключать компьютер без разрешения мастера.
    • Класть рядом с компьютером посторонние вещи.
    • Удалять компьютерные программы.
    За грубое нарушение правил поведения в кабинете информатики учащийся может быть лишен права пользования вычислительной техникой !!!

    За грубое нарушение правил поведения в кабинете информатики учащийся может быть лишен права пользования вычислительной техникой !!!


  • Получите в подарок сайт учителя

    Предмет: Внеурочная работа

    Категория: Уроки

    Целевая аудитория: Прочее

    Скачать
    Гиперссылки и списки

    Автор: Шувикина Евгения Игоревна

    Дата: 09.02.2015

    Номер свидетельства: 170091

    Похожие файлы

    object(ArrayObject)#863 (1) {
      ["storage":"ArrayObject":private] => array(6) {
        ["title"] => string(97) "Презентация к уроку язык гипертекстовой разметки HTML "
        ["seo_title"] => string(62) "priezientatsiia-k-uroku-iazyk-ghipiertiekstovoi-razmietki-html"
        ["file_id"] => string(6) "101311"
        ["category_seo"] => string(11) "informatika"
        ["subcategory_seo"] => string(11) "presentacii"
        ["date"] => string(10) "1402413420"
      }
    }
    
    object(ArrayObject)#885 (1) {
      ["storage":"ArrayObject":private] => array(6) {
        ["title"] => string(126) "Конспект урока по руссому языку по теме "Самостоятельные части речи" "
        ["seo_title"] => string(76) "konspiekt-uroka-po-russomu-iazyku-po-tiemie-samostoiatiel-nyie-chasti-riechi"
        ["file_id"] => string(6) "181376"
        ["category_seo"] => string(12) "russkiyYazik"
        ["subcategory_seo"] => string(5) "uroki"
        ["date"] => string(10) "1425324177"
      }
    }
    
    object(ArrayObject)#863 (1) {
      ["storage":"ArrayObject":private] => array(6) {
        ["title"] => string(46) "Практикум по информатике"
        ["seo_title"] => string(24) "praktikum_po_informatike"
        ["file_id"] => string(6) "542230"
        ["category_seo"] => string(11) "informatika"
        ["subcategory_seo"] => string(5) "uroki"
        ["date"] => string(10) "1583811701"
      }
    }
    
    object(ArrayObject)#885 (1) {
      ["storage":"ArrayObject":private] => array(6) {
        ["title"] => string(125) "Конспект урока информатики и ИКТ «Интернет и его основные понятия». "
        ["seo_title"] => string(72) "konspiekt-uroka-informatiki-i-ikt-intierniet-i-iegho-osnovnyie-poniatiia"
        ["file_id"] => string(6) "164887"
        ["category_seo"] => string(11) "informatika"
        ["subcategory_seo"] => string(5) "uroki"
        ["date"] => string(10) "1422715818"
      }
    }
    
    object(ArrayObject)#863 (1) {
      ["storage":"ArrayObject":private] => array(6) {
        ["title"] => string(130) "Конспект урока по информатике и ИКТ «Интернет и его основные понятия». "
        ["seo_title"] => string(76) "konspiekt-uroka-po-informatikie-i-ikt-intierniet-i-iegho-osnovnyie-poniatiia"
        ["file_id"] => string(6) "164898"
        ["category_seo"] => string(11) "informatika"
        ["subcategory_seo"] => string(5) "uroki"
        ["date"] => string(10) "1422716777"
      }
    }
    




    ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

    Добавить свою работу

    * Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

    Удобный поиск материалов для учителей

    Проверка свидетельства