Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Основы HTML

Содержание

Содержание Урок 1. Общие представления о языке HTMLHTML – слайды 3-12Урок 2. Ввод и форматирование текста Урок 2. Ввод и форматирование текста WebУрок 2. Ввод и форматирование текста Web-страницы – слайды 13-22Урок 3. Специальный текст и
Основы HTMLУчебное пособие для уроков информатики Содержание Урок 1. Общие представления о языке HTMLHTML – слайды 3-12Урок 2. Урок 1Общие представления о языке HTMLНа содержание Общие понятия HTMLHTML (Hyper Text Markup Language – язык гипертекстовой разметки) является Историческая справкаСеть Word Wide Web (WWW) родилась в 1989 году в Женеве, Создание HTML-документаДля создания HTML-документа подойдет любой текстовый редактор (например, Блокнот). Введите в Просмотр и изменение  HTML-кодаЧтобы отобразить исходный код Web-страницы, нужно в контекстном Обязательные дескрипторы HTML	параметры страницы	текст страницы< HTML>… - устанавливаются в начале и конце Дескрипторы раздела заголовкаПеречислим некоторые наиболее часто используемые дескрипторы, устанавливаемые в заголовке (между Дескрипторы основного разделаВ основном разделе Web-страницы содержится текст документа с дескрипторами, которые Практика Откройте Блокнот (Пуск ->Все программы ->Стандартные -> Блокнот) и сохраните документ Откройте HTML-код (правой кнопкой по Web-странице вызовите контекстное меню и выберите команду Урок 2Ввод и форматирование текста Web-страницыНа содержание Разметка текста на страницеОбозреватели Web-страниц игнорируют все отступы, пробелы и разрывы строк, Создание нового абзацаВыравнивание по левому краюВыравнивание по центруВыравнивание по правому краюВыравнивание по Разрыв строкиЕсли текст нужно начать с новой строки, используется непарный дескриптор . Практика Задание 1. Введите в документ proba.html между дескрипторами … строфу из Текстовые заголовкиЗаголовки шести уровней устанавливаются с помощью парных дескрипторов от … до Установка шрифтаДескриптор … позволяет устанавливать параметры текста: шрифт, его размер и цвет.Шрифт Цвет текста и фонаЦвет текста можно установить двумя способами: с помощью параметра Форматирование текстаДля форматирования текста используются следующие дескрипторы:… - полужирный шрифт;… - курсив;… ПрактикаЗадание 1. Введите в документ proba.html 	в дескриптор параметры BGCOLOR=‘yellow’ TEXT=‘blue’ текст Урок 3Специальный текст и символыНа содержание Нумерованный списокДля создания нумерованного списка используются парные теги …, задающие начало и Маркированный списокДля создания маркированного списка вместо тегов … используются теги …, а Многоуровневый списокМногоуровневый список создать легко: нужно просто вложить список внутрь другого. Попробуйте Бегущая строкаБегущая строка создается с помощью парного дескриптора … . Текст, расположенный Комментарии для разработчиковКод Web-страницы может быть достаточно сложным, и со временем разработчик Урок 4Графика на Web-страницахНа содержание Форматы графических файлов В Интернете используется всего три формата графических файлов:JPEG – Добавление рисунка на Web-страницуЧтобы добавить рисунок, используется непарный тег . Атрибуту SRC Размещение рисункаРазмер изображения задается атрибутами WIDTH и HEIGHT в дескрипторе . Значения Фоновый рисунокРисунок можно использовать в качестве фона, установив в дескрипторе атрибут BACKGROUND, Практика Создайте авторскую страницу (см. пример).Измените фон страницыИзмените выравнивание фотографии относительно текста.Улучшите Урок 5Гиперссылки на Web-страницахНа содержание Создание гиперссылкиГиперссылки создаются с помощью тега ….Атрибуту HREF присваивается следующие значения:гиперссылкаНа содержание Оформление гиперссылкиЦвет ссылки нужно прописывать: link - цвет ссылки, alink - цвет Распределение ссылок по картинкеМожно создать графическое меню из одной большой картинки таким Вставка звукового файлаДля того, чтобы вставить в вашу страничку звуковой файл, например, Ссылка в новом окнеПо умолчанию, файл по гиперссылке открывается в том же Практика Вставьте в документ proba.html ссылку на авторскую страницу:	имя автора	Проверьте, как она Урок 6ТаблицыНа содержание Простейшая таблицаТаблица создается с помощью пары дескрипторов …, строки и ячейки которой Форматирование текста в ячейкеДля выравнивания текста по горизонтали и вертикали используются атрибуты Форматирование ячеек таблицыРазмеры ячеек устанавливаются с помощью атрибутов WIDTH и HEIGHT, которым Границы таблицыПо умолчанию обозреватели не показывают границы таблицы. Если же границы нужны, Выборочная прорисовка границFRAME – внешние границы таблицы:void – нет внешних границ;above – Объединение ячеекДля объединения ячеек в дескрипторах и устанавливают следующие параметры:COLSPAN – число Группирование столбцов и строкДля группировки столбцов применяются парные дескрипторы: - разбивка на Приложения Словарь дескрипторов (тегов)Готовые конструкцииНачало страницыТаблицаТаблица 1Таблица 2Таблица 3Фрейм 1Фрейм 2Фрейм 3Таблицы Литература Рева О.Н. HTML. Просто как дважды два. – М.: Изд-во Эксмо,
Слайды презентации

Слайд 2 Содержание
Урок 1. Общие представления о языке HTMLHTML

Содержание Урок 1. Общие представления о языке HTMLHTML – слайды 3-12Урок

– слайды 3-12
Урок 2. Ввод и форматирование текста Урок

2. Ввод и форматирование текста WebУрок 2. Ввод и форматирование текста Web-страницы – слайды 13-22
Урок 3. Специальный текст и символы – слайды 23-28
Урок 4. Графика на Графика на WebГрафика на Web-страницах – слайды 29-34
Урок 5. Гиперссылки на Гиперссылки на WebГиперссылки на Web-страницах – слайды 35-41
Урок 6. Таблицы – слайды 42-49
Приложения –
Литература –


Слайд 3 Урок 1
Общие представления о языке HTML
На содержание

Урок 1Общие представления о языке HTMLНа содержание

Слайд 4 Общие понятия HTML
HTML (Hyper Text Markup Language –

Общие понятия HTMLHTML (Hyper Text Markup Language – язык гипертекстовой разметки)

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

Web-страниц.
Язык HTML представляет собой коллекцию управляющих символов – дескрипторов. Для настройки внешнего вида и функционирования элемента страницы устанавливаются его атрибуты.
Обозреватели распознают дескрипторы языка HTML и преобразуют код документа в Web-страницу. Приложения обозревателей разрабатываются с учетом мировых стандартов языка HTML, поэтому Web-страницы выглядят одинаково в окнах разных обозревателей.

На содержание


Слайд 5 Историческая справка

Сеть Word Wide Web (WWW) родилась в

Историческая справкаСеть Word Wide Web (WWW) родилась в 1989 году в

1989 году в Женеве, Швейцария. Придумал мировую паутину Тим

Бернес-Ли. Создание WWW не было для Тима внезапным озарением. Еще в 1980 году им была разработана для личного использования система маркирования гипертекста Enquire – ранний прототип HTML.
У HTML был еще более ранний предшественник – GML (Generalized Markup Language – язык обобщенной разметки), разработанный Чарльзом Гольдфардом в 1969 году. В 1986 году этому языку, переименованному в SGML (стандартный GML), был присвоен статус международного стандарта. Язык HTML создавался Тимом Бернес-Ли в соответствии со стандартами SGML. Но идея гиперссылок и URL-адресов в стиле структуры доменных имен www. имя. имя. была впервые реализована именно Тимом Бернес-Ли.
С тех пор язык HTML много раз был модифицирован, особенно в 90-тые годы, когда Интернет развивался наиболее динамично.

На содержание


Слайд 6 Создание HTML-документа
Для создания HTML-документа подойдет любой текстовый редактор

Создание HTML-документаДля создания HTML-документа подойдет любой текстовый редактор (например, Блокнот). Введите

(например, Блокнот). Введите в текстовый файл HTML-код, а затем

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

На содержание


Слайд 7 Просмотр и изменение HTML-кода
Чтобы отобразить исходный код Web-страницы,

Просмотр и изменение HTML-кодаЧтобы отобразить исходный код Web-страницы, нужно в контекстном

нужно в контекстном меню выбрать команду Открыть с помощью…->

Блокнот или Просмотр HTML-кода.
Если вы хотите изменить HTML-код, внесите необходимые изменения в исходный HTML-документ, сохраните его (Файл->Сохранить), затем обновите Web-страницу (Вид->Обновить или нажмите клавишу F5 или значок на панели инструментов)


На содержание


Слайд 8 Обязательные дескрипторы HTML


параметры страницы


текст страницы


< HTML>… -

Обязательные дескрипторы HTML	параметры страницы	текст страницы< HTML>… - устанавливаются в начале и

устанавливаются в начале и конце документа.
… -

заголовок Web-страницы.
… - основной раздел Web-страницы.
Дескрипторы бывают парные и непарные. Обязательные дескрипторы – парные: открывающие (< HTML>) и закрывающие (). Отсутствие закрывающего дескриптора может вызвать ошибку при просмотре Web-страницы.

На содержание


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

Дескрипторы раздела заголовкаПеречислим некоторые наиболее часто используемые дескрипторы, устанавливаемые в заголовке

устанавливаемые в заголовке (между тегами … )

- заголовок Web-страницы.
- непарный дескриптор для установки метапараметров (имя автора, описание Web-страницы и ключевые слова для поисковиков). Этот дескриптор мы рассмотрим позднее.
- код сценария, выполняемого во время загрузки Web-страницы. Об этом дескрипторе мы также поговорим позднее.

На содержание


Слайд 10 Дескрипторы основного раздела
В основном разделе Web-страницы содержится текст

Дескрипторы основного разделаВ основном разделе Web-страницы содержится текст документа с дескрипторами,

документа с дескрипторами, которые выполняют форматирование текста и добавление

элементов Web-страницы. Эти дескрипторы также бывают как парные (например,

), так и непарные (
)
Более подробно об этом разделе мы поговорим на следующих уроках.

На содержание


Слайд 11 Практика
Откройте Блокнот (Пуск ->Все программы ->Стандартные ->

Практика Откройте Блокнот (Пуск ->Все программы ->Стандартные -> Блокнот) и сохраните

Блокнот) и сохраните документ с расширением .html (Файл ->

Сохранить как… ->укажите тип файла Все файлы ->имя документа proba. html)
Введите HTML-код из примера.
Сохраните документ (Файл -> Сохранить) и закройте его.
Найдите сохраненную Web-страницу, откройте ее, обновите и посмотрите, что у вас получилось.



Проба


Я хочу сделать Web-страницу


На содержание


Слайд 12 Откройте HTML-код (правой кнопкой по Web-странице вызовите контекстное

Откройте HTML-код (правой кнопкой по Web-странице вызовите контекстное меню и выберите

меню и выберите команду Просмотр HTML-кода).
Внесите изменения в

основной раздел Web-страницы (измените текст между дескрипторами … ).
Сохраните изменения (Файл -> Сохранить) и обновите Web-страницу.

Поздравляю с успешным началом!

На содержание


Слайд 13 Урок 2
Ввод и форматирование текста Web-страницы
На содержание

Урок 2Ввод и форматирование текста Web-страницыНа содержание

Слайд 14 Разметка текста на странице
Обозреватели Web-страниц игнорируют все отступы,

Разметка текста на страницеОбозреватели Web-страниц игнорируют все отступы, пробелы и разрывы

пробелы и разрывы строк, заданные в текстовом редакторе. Абзацы,

введенные в Блокноте, объединяются в сплошной текст в окне обозревателя. Поэтому, чтобы разметить текст Web-страницы, следует воспользоваться специальными дескрипторами HTML.

На содержание


Слайд 15 Создание нового абзаца

Выравнивание по левому краю
Выравнивание

Создание нового абзацаВыравнивание по левому краюВыравнивание по центруВыравнивание по правому краюВыравнивание

по центру
Выравнивание по правому краю
Выравнивание по ширине

Этот текст не будет переноситься на другую строку, даже если его длина больше ширины окна



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

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

.
Дескриптор , вставленный между тегами

блокирует автоматический перенос слов.

Вставьте листинг в основной раздел вашей Web-страницы и посмотрите, что у вас получилось.

На содержание


Слайд 16 Разрыв строки
Если текст нужно начать с новой строки,

Разрыв строкиЕсли текст нужно начать с новой строки, используется непарный дескриптор

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

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

Пробелы и отступы текста

Если вы хотите сохранить форматирование текста из Блокнота, воспользуйтесь парой

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

На содержание


Слайд 17 Практика
Задание 1. Введите в документ proba.html между

Практика Задание 1. Введите в документ proba.html между дескрипторами … строфу

дескрипторами … строфу из стихотворения «Зеленый шум»:
Люби, покуда любится,
Терпи,

покуда терпится,
Прощай, пока прощается,
И - Бог тебе судья!
Н. А. Некрасов
Проверьте, что у вас получилось.
Задание 2. Вставьте в конце каждой строки дескриптор
. Проверьте, как изменился вид документа.
Задание 3. Вставьте перед именем автора три символа  . Посмотрите, как теперь выглядит текст. Добавьте еще необходимое количество символов.

На содержание


Слайд 18 Текстовые заголовки
Заголовки шести уровней устанавливаются с помощью парных

Текстовые заголовкиЗаголовки шести уровней устанавливаются с помощью парных дескрипторов от …

дескрипторов от … до …, причем размер заголовка уменьшается

с каждым уровнем. Дескрипторы заголовков устанавливаются в «тело» Web-страницы и имеют больший приоритет для поисковых программ, таких как Yahoo, Rambler или Яндекс. Поэтому, чем четче заголовок будет выражать суть Web-страницы, тем больше вероятность того, что ваш документ будет найден в Интернете.

Заголовок первого уровня


Заголовок второго уровня


Заголовок третьего уровня


Заголовок четвертого уровня


Заголовок пятого уровня

Заголовок шестого уровня


Вставьте листинг в вашу Web-страницу и посмотрите, что у вас получилось.

На содержание


Слайд 19 Установка шрифта
Дескриптор … позволяет устанавливать параметры текста: шрифт,

Установка шрифтаДескриптор … позволяет устанавливать параметры текста: шрифт, его размер и

его размер и цвет.
Шрифт выбирается с помощью параметра FASE.

В значении параметра следует указать имя шрифта или нескольких шрифтов. Например:
текст
Число шрифтов в списке не ограничено, но некоторые из них могут отсутствовать на компьютере пользователя. Поэтому обязательно указывайте распространенные шрифты. Обозреватель будет применять шрифты в том порядке, как они записаны.
Размер шрифта устанавливается с помощью параметра SIZE, значение которого меняется от 1 до 7. Например:
текст
Шрифт увеличивается при увеличении размера.

На содержание


Слайд 20 Цвет текста и фона
Цвет текста можно установить двумя

Цвет текста и фонаЦвет текста можно установить двумя способами: с помощью

способами:
с помощью параметра COLOR в дескрипторе ;
с

помощью параметра TEXT в дескрипторе .
Значение цвета в обоих случаях устанавливается одинаково: либо с использованием шестнадцатеричного кода, либо с помощью именного кода.
Цвет фона устанавливает параметр BGCOLOR в дескрипторе


На содержание


Слайд 21 Форматирование текста
Для форматирования текста используются следующие дескрипторы:
… -

Форматирование текстаДля форматирования текста используются следующие дескрипторы:… - полужирный шрифт;… -

полужирный шрифт;
… - курсив;
… - подчеркивание;
- сохраняет форматирование

исходного текста;
- надстрочный символ;
- подстрочный символ.
Текст для форматирования помещается непосредственно между дескрипторами пары. Например, создадим запись: х2-3х+2=0, корни этого уравнения – х1=1, х2=2.
x2-3x+2=0, корни этого уравнения –x1=1, x2=2
Введите листинг в вашу Web-страницу. Удобнее сначала набрать весь текст, а затем расставьте необходимые дескрипторы.

На содержание


Слайд 22 Практика
Задание 1. Введите в документ proba.html в дескриптор

ПрактикаЗадание 1. Введите в документ proba.html 	в дескриптор параметры BGCOLOR=‘yellow’ TEXT=‘blue’

параметры BGCOLOR=‘yellow’ TEXT=‘blue’
текст

страницы
Измените значения параметров, пользуясь таблицей цветов. Посмотрите, как изменится вид Web-страницы.
Задание 2. Введите в документ proba.html между дескрипторами

листинг:
Шрифт 1

Шрифт 2

Шрифт 3

Шрифт 4

Шрифт 5

Шрифт 6

Шрифт 7

Измените значения параметров. Посмотрите, как изменится вид Web-страницы.

На содержание


Слайд 23 Урок 3
Специальный текст и символы
На содержание

Урок 3Специальный текст и символыНа содержание

Слайд 24 Нумерованный список
Для создания нумерованного списка используются парные теги

Нумерованный списокДля создания нумерованного списка используются парные теги …, задающие начало

…, задающие начало и конец списка и …, устанавливающие

начало и конец каждого пункта.

Способ нумерации устанавливается c помощью атрибута TYPE в дескрипторе


Начальный номер пунктов устанавливается c помощью атрибута START в дескрипторе

Если нужно пропустить часть номеров и продолжить нумерацию с другого номера, то это можно сделать c помощью атрибута VALUE в дескрипторе
  • , присвоив ему нужный номер


    На содержание


    Слайд 25 Маркированный список
    Для создания маркированного списка вместо тегов …

    Маркированный списокДля создания маркированного списка вместо тегов … используются теги …,

    используются теги …, а каждая строка списка - также

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

    маркированный список



    • окружность

    • круг

    • квадрат




    На содержание


    Слайд 26 Многоуровневый список
    Многоуровневый список создать легко: нужно просто вложить

    Многоуровневый списокМногоуровневый список создать легко: нужно просто вложить список внутрь другого.

    список внутрь другого. Попробуйте сделать это самостоятельно.
    Создание отступов
    Отступ от

    левого края создается с помощью следующих тегов:
    начало и окончание списка определений;
    заголовок термина;
    определение термина;
     
    пустая строка;

    текст абзаца

    красная строка

    На содержание


    Слайд 27 Бегущая строка
    Бегущая строка создается с помощью парного дескриптора

    Бегущая строкаБегущая строка создается с помощью парного дескриптора … . Текст,

    … . Текст, расположенный между этими тегами, можно форматировать

    так же, как обычный текст.
    Атрибуты этого дескриптора:
    BEHAVIOR способ выполнения эффекта бегущей строки
    scrool текст исчезает за краем страницы;
    slide текст остается у левого края страницы;
    Alternate направление перемещения текста меняется на противоположное;
    BGCOLOR цвет фона бегущей строки;
    DIRECTION направление перемещения текста;
    left влево;
    right вправо;
    HEIGHT высота бегущей строки;
    WIDTH ширина бегущей строки;
    HSPASE отступ от полей страницы;
    LOOP число показов текста
    любое целое число, указывающее число повторов;
    Infinite бесконечное повторение.

    На содержание


    Слайд 28 Комментарии для разработчиков
    Код Web-страницы может быть достаточно сложным,

    Комментарии для разработчиковКод Web-страницы может быть достаточно сложным, и со временем

    и со временем разработчик может забыть назначение отдельных блоков.

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


    параметры страницы
    текст страницы




    На содержание


    Слайд 29 Урок 4
    Графика на Web-страницах
    На содержание

    Урок 4Графика на Web-страницахНа содержание

    Слайд 30 Форматы графических файлов
    В Интернете используется всего три

    Форматы графических файлов В Интернете используется всего три формата графических файлов:JPEG

    формата графических файлов:
    JPEG – для высококачественных полноцветных изображений, фотографий

    *.jpg;
    GIF – для рисунков, содержащих текст, линии, фигуры и одноцветные области. В этом формате также сохраняются кнопки, логотипы, анимированные рисунки.
    PNG – альтернатива двум первым форматам. Этот формат можно использовать во всех вышеперечисленных случаях, но он поддерживается не всеми обозревателями.

    На содержание


    Слайд 31 Добавление рисунка на Web-страницу
    Чтобы добавить рисунок, используется непарный

    Добавление рисунка на Web-страницуЧтобы добавить рисунок, используется непарный тег . Атрибуту

    тег . Атрибуту SRC присваивается путь к

    файлу на диске или URL-адрес файла рисунка в Интернете. Если рисунок находится в другой папке, то в ссылке указывается также имя папки.
    По умолчанию рисунок отображается без границ. При желании границы можно сделать видимыми с помощью атрибута BORDER, присвоив ему значение толщины границы в пикселях. BORDER=‘0’ – границы нет.
    Рисунки замедляют выгрузку Web-страницы, поэтому существуют специальные приемы, занимающие внимание пользователя на время выгрузки. Например, можно создать две копии рисунка: с высоким и низким разрешением и использовать атрибут LOWSRC: . При загрузке сначала появится файл с низким разрешением, который потом заменяется файлом с высоким разрешением. Атрибут ALT может снабдить рисунок альтернативным текстом, появляющимся вместо незагрузившегося рисунка.

    На содержание


    Слайд 32 Размещение рисунка
    Размер изображения задается атрибутами WIDTH и HEIGHT

    Размещение рисункаРазмер изображения задается атрибутами WIDTH и HEIGHT в дескрипторе .

    в дескрипторе . Значения этих атрибутов могут быть указаны

    в пикселях или в процентах от истинного размера рисунка. Можно одному из изображений задать значение auto, чтобы пропорции рисунка сохранялись.
    Выравнивание рисунка относительно текста задает атрибут ALIGN, принимающий значения:
    left – рисунок слева от текста;
    right – рисунок справа от текста;
    top – текст выровнен по верхнему краю рисунка;
    middle – текст выровнен посередине;
    botton – текст выровнен по нижнему краю рисунка.
    Отступ текста от рисунка управляется атрибутами HSPASE и VSPASE в пикселях– слева и справа, над и под рисунком. Все атрибуты устанавливаются в дескрипторе

    На содержание


    Слайд 33 Фоновый рисунок
    Рисунок можно использовать в качестве фона, установив

    Фоновый рисунокРисунок можно использовать в качестве фона, установив в дескрипторе атрибут

    в дескрипторе атрибут BACKGROUND, указав в его значении

    адрес расположения рисунка.

    При этом выбранный рисунок замостит область окна обозревателя.
    Чтобы зафиксировать фон (не давать ему прокручиваться), можно установить атрибут BGPROPERTIES=‘fixed’ в дескрипторе

    myimg.gif

    На содержание


    Слайд 34 Практика
    Создайте авторскую страницу (см. пример).
    Измените фон страницы
    Измените

    Практика Создайте авторскую страницу (см. пример).Измените фон страницыИзмените выравнивание фотографии относительно

    выравнивание фотографии относительно текста.
    Улучшите внешний вид страницы, добавив рисунки,

    анимацию, горизонтальные и вертикальные линии, рамки и т.п.
    Сохраните web-страничку, дав ей имя (например, avtor.html)

    Вот и готова твоя первая авторская страница!

    На содержание


    Слайд 35 Урок 5
    Гиперссылки на Web-страницах
    На содержание

    Урок 5Гиперссылки на Web-страницахНа содержание

    Слайд 36 Создание гиперссылки
    Гиперссылки создаются с помощью тега ….
    Атрибуту HREF

    Создание гиперссылкиГиперссылки создаются с помощью тега ….Атрибуту HREF присваивается следующие значения:гиперссылкаНа содержание

    присваивается следующие значения:
    гиперссылка



    На содержание


    Слайд 37 Оформление гиперссылки
    Цвет ссылки нужно прописывать:
    link - цвет

    Оформление гиперссылкиЦвет ссылки нужно прописывать: link - цвет ссылки, alink -

    ссылки,
    alink - цвет активной ссылки (нажатой),
    vlink

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


    На содержание


    Слайд 38 Распределение ссылок по картинке
    Можно создать графическое меню из

    Распределение ссылок по картинкеМожно создать графическое меню из одной большой картинки

    одной большой картинки таким образом, чтобы каждый элемент рисунка

    являлся ссылкой. Распределение ссылок по картинке описывается в тэге IMG.
    USEMAP задает имя элемента рисунка map_name.
    определяет область на картинке посредством параметров SHAPE и COORDS.
    SHAPE – форма области.
    default -- стандартная форма
    rect -- прямоугольник
    circle -- круг
    poly -- многоугольник произвольной формы
    COORDS – координаты области. Задаются в пикселах. Круг имеет три координаты (центр и радиус), прямоугольник – четыре (координаты противоположных вершин), а для многоугольника вы должны описать каждую его вершину в двух координатах.
    HREF=“адрес” – определяет ссылку на схеме





    Слайд 39 Вставка звукового файла
    Для того, чтобы вставить в вашу

    Вставка звукового файлаДля того, чтобы вставить в вашу страничку звуковой файл,

    страничку звуковой файл, например, midi-файл, используйте следующую конструкцию:

    SRC="bob1.mid" WIDTH="140" HEIGHT="50" ALIGN="MIDDLE" BORDER="0" AUTOSTART=TRUE>.

    В этом тэге были использованы следующие параметры: WIDTH – параметр, определяющий ширину midi-плеера. HEIGHT – параметр, определяющий высоту midi-плеера. BORDER – ширина рамки midi-плеера.
    AUTOSTART – запустить midi-плеер сразу после того, как загрузится документ HTML.

    Точно также загружаются и видеоролики.

    На содержание


    Слайд 40 Ссылка в новом окне
    По умолчанию, файл по гиперссылке

    Ссылка в новом окнеПо умолчанию, файл по гиперссылке открывается в том

    открывается в том же окне, что не всегда удобно.

    Как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Для этого у тэга есть параметр target


    Значение параметра target="blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне браузера

    На содержание


    Слайд 41 Практика
    Вставьте в документ proba.html ссылку на авторскую

    Практика Вставьте в документ proba.html ссылку на авторскую страницу:	имя автора	Проверьте, как

    страницу:
    имя автора
    Проверьте, как она работает.
    Подберите рисунок машины и

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

    На содержание


    Слайд 42 Урок 6
    Таблицы
    На содержание

    Урок 6ТаблицыНа содержание

    Слайд 43 Простейшая таблица
    Таблица создается с помощью пары дескрипторов …,

    Простейшая таблицаТаблица создается с помощью пары дескрипторов …, строки и ячейки

    строки и ячейки которой добавляются тегами:
    … - строка таблицы;

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













    фамилия
    имя отчество

    На содержание


    Слайд 44 Форматирование текста в ячейке
    Для выравнивания текста по горизонтали

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

    и вертикали используются атрибуты ALIGN и VALIGN, которым присваиваются

    следующие значения:
    ALIGN
    left – влево;
    center – по центру;
    rigth – вправо.
    VALIGN
    top – вверх;
    middle – по центру;
    bottom – вниз.

    На содержание


    Слайд 45 Форматирование ячеек таблицы
    Размеры ячеек устанавливаются с помощью атрибутов

    Форматирование ячеек таблицыРазмеры ячеек устанавливаются с помощью атрибутов WIDTH и HEIGHT,

    WIDTH и HEIGHT, которым присваиваются значения как в пикселях,

    так и в процентах от размеров окна браузера.
    Для установки цвета ячейки применяется атрибут BGCOLOR, принимающий те же значения, что и при установке цвета фона Web-страницы. Также можно применить фоновый рисунок, используя атрибут BACKGROUND. Все эти атрибуты можно применять как для форматирования всей таблицы, так и для форматирования ее отдельных ячеек.
    Очень часто таблицы применяют для разметки Web-страницы и использование заливки и фоновых рисунков позволяет разработать интересный дизайн документа.

    На содержание


    Слайд 46 Границы таблицы
    По умолчанию обозреватели не показывают границы таблицы.

    Границы таблицыПо умолчанию обозреватели не показывают границы таблицы. Если же границы

    Если же границы нужны, то их ширину можно установить

    с помощью специальных атрибутов, присвоив им значение в пикселях:
    BORDER – внешняя граница таблицы;
    CELLPADDING – горизонтальная граница;
    CELLCPACING – вертикальная граница.
    BOLDER=‘0’ – границы нет.
    По умолчанию цвет границ – серый. Чтобы изменить цвет границы, можно воспользоваться атрибутом BORDERCOLOR, который изменит цвет как внешних, так и внутренних границ.

    На содержание


    Слайд 47 Выборочная прорисовка границ
    FRAME – внешние границы таблицы:
    void –

    Выборочная прорисовка границFRAME – внешние границы таблицы:void – нет внешних границ;above

    нет внешних границ;
    above – граница по верхнему краю;
    below –

    граница по нижнему краю;
    rhs – граница по правому краю;
    lhs – граница по левому краю;
    hsides – границы по верхнему и нижнему краям;
    vsides – границы по правому и левому краям;
    bolder – все внешние границы.
    RULES – внутренние границы таблицы:
    none – нет внутренних границ;
    cols – границы между столбцами;
    rows– границы между строками;
    all – все внутренние границы.

    На содержание


    Слайд 48 Объединение ячеек
    Для объединения ячеек в дескрипторах и

    Объединение ячеекДля объединения ячеек в дескрипторах и устанавливают следующие параметры:COLSPAN –

    устанавливают следующие параметры:
    COLSPAN – число столбцов, занятых ячейкой;
    ROWSPAN

    – число строк, занятых ячейкой.
    Следует помнить, что при объединении ячеек число столбцов или строк сокращается на 1.

     



     


    На содержание


    Слайд 49 Группирование столбцов и строк
    Для группировки столбцов применяются парные

    Группирование столбцов и строкДля группировки столбцов применяются парные дескрипторы: - разбивка

    дескрипторы:
    - разбивка на столбцы разных типов (например, столбец

    заголовков и столбцы данных;
    - произвольная группировка.
    В обеих дескрипторах протяженность групп задается атрибутом SPAN. Этот атрибут объединяет указанное количество первых столбцов. Примененный еще раз, он объединяет следующие столбцы:
    • Имя файла: osnovy-html.pptx
    • Количество просмотров: 180
    • Количество скачиваний: 0