Подборка презентаций по видеокурсу "создание web-сайта"

Гиперссылки – фундамент гипертекста

1. Основные элементы синтаксиса html.

2. Пример создания гиперссылки.

3. Синтаксис написания гиперссылок.

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

5. Относительная и абсолютная гиперссылка.

6. Именованный якорь для переходов внутри страницы или в конкретную часть какой либо страницы.

7. Ссылка mailto

Каждая страница содержит следующий код:

• заголовок страницы

В качестве гиперссылок в электронном тексте могут выступать:

• ссылки на словарь терминов и понятий (выделение ключевых слов);
• ссылки на персоналии (портреты и краткие биографические сведения);
• ссылки на статические иллюстрации
• ссылки на мультимедийные элементы (анимации, аудио, видеофрагменты);
• ссылки на хрестоматийный или дополнительный материалы;
• ссылки на структурные элементы текста;
• ссылки на список монографий, учебной и научной литературы;
• ссылки на список организаций;
• ссылки на список исторических событий или;
• ссылки на список географических названий;
• ссылки на Интернет-ресурсы (сайты, библиотеки, приложения и др.).
• При создании гипертекста автор должен выделить гиперссылки из общей массы текста.

Синтаксис написания гиперссылок

• текст ссылки

Закрытие тэга

Текст ссылки

Конкретный адрес гиперссылки

Тэг гиперссылки

Атрибут гиперссылки (адрес, куда приведет ссылка)

Т.к. не указан url – адрес, по ссылке никуда перейти невозможно

2 вида гиперссылок

• Относительные ссылки . Это гиперссылки, прописываемые относительно папок локального сайта.

• Например параграф

• Абсолютные гиперссылки . Это гиперссылки на конкретный элемент определенного сайта, начинающаяся http:// www

• Например http://www.Ido.Rudn.Ru/vestnik/20.Pdf ” электронный учебник

ЗАМЕЧАНИЕ К АБСОЛЮТНОЙ ССЫЛКЕ

Практическое задание

• Упражнение к уроку 6:
• На сохраненной вами странице page1.html поставить гиперссылки на страницы spiski.html, text.html, img.html указав в качестве якоря соответственно темы работа со списками в html, работа с текстом в html и работа с картинками в html.

Практическое задание

• Создать web – страницу «Освоение гиперссылок»
• Текстом на этой странице сделайте конспект сегодняшнего урока.
• Создайте абсолютные и относительные ссылки на этой странице.
• Упражнение к уроку 6:
• На сохраненной вами ранее странице page1.html поставить гиперссылки на страницы spiski.html, text.html, img.html указав в качестве якоря соответственно темы работа со списками в html, работа с текстом в html и работа с картинками в html.

Пример сайта

Как сделать разбивку на отдельные окна?

Способ 1:

Использование фреймов.

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

Недостатки способа 1:

• Очень трудоемкий процесс.
• Часто случаются сбои из-за малейших недочетов (вплоть до запятых и пробелов)

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

Для позиционирования отдельных блоков на сайте часто используют таблицы

В данной таблице 3 строки по 2 ячейки

• ….
• В таблице 3 строки, значит
• …
  …
  …
• В каждой строке 2 ячейки
• …	…
  …	…
  …	…

Толщина таблицы:

• Для задания толщины линий таблицы в атрибутах тэга задается параметр

  Ячейки таблицы без содержимого в большинстве браузеров выводятся не очень хорошо (сжимаются)

  
  • По умолчанию в таблице стоит выравнивание.
  • Пустые строки не отображаются.
  • Для отображения пустых строк используют «неразрывный пробел» -  
  

  Впишем что-то другое:

  table

  Тэг таблицы

  tr

  Тэг строки таблицы

  td

  Тэг ячейки

  

  Получим готовую таблицу:

  

  Укрупнение таблицы:

  • Для изменения размера воспользуемся атрибутами ширины и высоты (как у картинки) тэга table:
  • width и height
  • Например: width=«800» height=«400»
  

  Выравнивание по центру:

  • Для выравнивания по центру прописывается еще один атрибут для table: align
  • align=“center”
  • По умолчанию задается “left”, можно задать выравнивание по правому краю - “right”
  

  Сама таблица встала в середину.

  

  Работа внутри ячеек

  Просто текст, состоящий из нескольких абзацев. Не очень красиво будет, если текст начнется с середины строки.

  Навигация по сайту – несколько строк

  Чтобы задать вертикальное выравнивание в таблице есть специальный тэг valign= “…”

  Тэгу valign можно задать следующие значения: top - выравнивание по верху ; bottom – выравнивание по низу ; middle – выравнивание по середине .

  

  Отступы…

  • для создания отступа от края таблицы прописывается (там же) атрибут cellpadding=«30»
  • Эта процедура действует на все ячейки сразу.
  • Для индивидуального заполнения ячеек в каждой ячейке прописывается свой параграф.
  

  Еще несколько моментов….

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

  Упражнение к уроку 7:

  • Создать таблицу в html:

  Тег

  table

  Описание

  tr

  Определяет таблицу

  Определяет строку таблицы

  td

  Определяет ячейку таблицы

  Просмотр содержимого презентации
  «8. Навигация. Разработка своего сайта и его сохранение»

  

  Навигация. Разработка своего сайта и его сохранение.

  

  Сегодня…

  Шапка - рисунок

  Навигация

  навигация

  заголовок

  текст текст текст текст текст заголовок

  навигация

  навигация

  текст текст текст текст текст текст текст

  Заголовок

  навигация

  текст текст текст текст текст

  

  Перед созданием сайта:

  • Определиться с наполнением сайта (точно знать, какая информация будет на сайте).
  • Подготовить рисунки, поместив их в отдельную папку (шапки, вставки и др.)
  • Подготовить тексты для сайта. (отдельный текстовой документ)
  • Определиться со структурой сайта.

  

  Что понадобится…

  1. Объединить ячейки.

  2. Расширить таблицу до 900 пикселей.

  Ширина 200 пикселей.

  Ширина 700 пикселей.

  3. Добавить вторую строку. ↓

  

  • Убрать атрибут height = тэга table (эт сколько займет..)
  • Объединение ячеек. В первой строке удалить вторую ячейку. С помощью атрибута тэга td colspan=“2” объединим 2 ячейки (число «2» показывает, сколько ячеек подряд объединяется).

  

  Вставка «шапки»

  • Убедитесь, что всё находится в одной папке.
  • Вставляем как картинку:

  «Бортики» вокруг картинки – «не айс»!

  tr Тэг строки таблицы" width="640"

  Еще несколько штрихов…

  • Для удаления отступов, необходимо удалить параметр cellpadding=«30»
  • Можно обрезать рисунок.
  • Изменим размер ячеек второй строки: вставим атрибут ширины ячейки второй строки следующим образом:
  

  Навигация

  • В первой ячейке второй строки пропишем виды электромагнитных волн: радиоволны, инфракрасное излучение, видимое излучение, ультрафиолетовое излучение, рентгеновские лучи, гамма-излучение.
  • После атрибута с указанием ширины этой ячейки ставим тэг . Скопируем его 6 раз ( в зависимости от количества свойств). Между тэгами запишем то, что нужно.
  • Для того, чтобы выровнять их по центру в атрибутах этой ячейки пропишем также align="center"
  • Кстати, старое содержимое давно пора удалить…
  

  Навигация

  • Уберём атрибут border=«1»
  • Закрасим ячейку с навигацией с помощью атрибута в первой ячейке второго столбца bgcolor=“#ffcc77”
  • Сначала оформим главную «страницу» (это могут быть общие сведения об электромагнитных волнах).
  • Во вторую ячейку второй строки поместим абзац с общими сведениями:
  

  Данный текстовой документ необходимо сохранить 6 раз с названиями видов излучений: радиоволны.html, инфракрасное излучение.html, видимое излучение.html, ультрафиолетовое излучение.html, рентгеновские лучи.html, гамма-излучение.html

  

  В папке:

  Открываем каждый как блокнот и исправляем текст на соответствующий

  

  Осталось сделать саму навигацию:

  Прописываем ссылки с помощью тэга

  

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

  

  Усовершенствование навигации:

  Скопировать блок с навигацией (гиперссылками) в основном документе и вставить его в оставшиеся 6.

  

  Результат:

  

  Практическое задание :

  • Создать Web-страницу «Шкала электромагнитных волн», используя предлагаемый материал (в папке «8.навигация» на рабочем столе).
  • Домашнее задание : подготовить материал для работы на следующем уроке.

  -80%

  Курсы повышения квалификации

  Современные педагогические технологии в образовательном процессе

  Продолжительность 72 часа

  4000 руб.

  800 руб.

  Подробнее

  
  

  

  Электронная тетрадь по информатике 9...

  

  Информатика 5 класс ФГОС

  

  Информатика 3 класс

  

  Творческие задания в Sсratch 5-6 классы

  

  Электронная тетрадь по информатике 8...

  

  Информатика 5 класс (Россия)

  

  Информатика 6 класс ФГОС

  

  Основы алгоритмизации и...

  Скачать

  © 2015, Болсуновская Елена Викторовна 966 13

  Рекомендуем курсы ПК и ППК для учителей

  

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

  800 руб.  4000 руб.

  

  Учитель, преподаватель физики и информатики

  3560 руб.  17800 руб.

  

  Проектная деятельность учащихся

  800 руб.  4000 руб.

  

  Информационная культура и образование

  800 руб.  4000 руб.

  

  Методика преподавания информатики, инструменты оценки учебных...

  800 руб.  4000 руб.

  

  Профессиональная компетентность педагогов в условиях внедрения ФГОС

  800 руб.  4000 руб.

  Вконтакте Одноклассники Facebook Twitter Google+

  0 нравится

  0 Нет комментариев

  Вебинар для учителей

  

  Свидетельство об участии БЕСПЛАТНО!

  Полезное для учителя

  • Онлайн инструменты с готовыми материалами
  • Видеоуроки
  • Электронные тетради
  • Онлайн-тесты
  • Комплекты для уроков
  • Курсы повышения квалификации и переподготовки учителей
  • Дистанционные олимпиады
  • Вебинары для учителей
  • Блиц турниры

  

  Новости проекта

  28.12.23

  С наступающим Новым годом, уважаемые учителя! Поздравляем вас с праздником!

  16.11.23

  Лайфхак учителя №3! Что делать, если вы устали из урока в урок повторять одно и то же

  09.11.23

  Лайфхак учителя №2! Как перестать бегать от ученика к ученику во время практической работы

  Курсы для учителей!

  Реализация образовательных программ осуществляется с применением исключительно электронного обучения и ДОТ

  

  Профессиональная компетентность педагогов в условиях внедрения ФГОС

  800 руб.

  4000 руб.

  

  Специфика преподавания дисциплины «Информационные технологии» в...

  800 руб.

  4000 руб.

  

  Система работы с высокомотивированными и одаренными учащимися по...

  800 руб.

  4000 руб.

  Смотреть все курсы

  
  

  
  
  

  width="200 " tr	Тэг строки таблицы
  Шкала электромагнитных волн . Длины электромагнитных волн ….