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

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

Практикум по HTML

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

Практикум по HTML

Занятие № 1. Создание первого HTML-документа

  • Знакомство со структурой HTML-документа.
    HTML-документ заключается в теги <HTML>  и </HTML>.
    Между этими тегами два блока:
    - блок заголовка <HEAD> </HEAD> - содержит описание параметров, используемых при отображении документов, но не отображающихся в окне обозревателя. Например:
    <TITLE>  Название страницы </TITLE> .
    - тело документа <BODY> </BODY> - содержит текст, предназначенный для отображения обозревателем, и теги, указывающие на способ форматирования текста, определяющие графическое оформление, задающие параметры гиперссылок.
  • Задание:
    а) создать HTML-документ:
    <HTML
        <
    HEAD>
           <
    TITLE>  Название страницы </TITLE>
        </
    HEAD>
        <
    BODY>
     Пример страницы
        </
    BODY>
    </
    HTML>
    б) Сохранить документ в файле с именем index.html в рабочей папке.
    в) Просмотреть HTML-документ в обозревателе Internet Explorer.
  • Логическое форматирование.
    а) Оформление заголовков:
    <Hn> </Hn>   n -  целое число от 1 до 6, определяет уровень заголовка (1 - высокий уровень, 6 - низкий уровень). При оформлении заголовков можно использовать атрибут выравнивания -
    <Hn align=left> </Hn>              - выравнивание по левому краю
    <Hn align=center> </Hn>         - выравнивание по центру
    <Hn align=right> </Hn>            - выравнивание по правому краю
    б) Оформление параграфа (абзаца):
    <P> </P>   или с выравниванием  <P align=......> </P>
    в) Перевод на новую строку:
    <BR>
  • Задание:
    а) внести изменения в файл index.html так, чтобы на экране обозревателя были отображены образцы 6 уровней заголовков, три абзаца, выровненные тремя способами, четверостишие, оформленное с помощью тега перевода на новую строку.
    б) Сохранить новый документ в файле с именем index1.html в рабочей папке.
    в) Просмотреть HTML-документ в обозревателе Internet Explorer.

 

 

 

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

практикум по основам
языка разметки гипертекстов
HTML


















Занятие № 1. Создание первого HTML-документа

  • Знакомство со структурой HTML-документа.
    HTML-документ заключается в теги HTML и HTML.
    Между этими тегами два блока:
    - блок заголовка HEAD HEAD - содержит описание параметров, используемых при отображении документов, но не отображающихся в окне обозревателя. Например:
    TITLE Название страницы TITLE .
    - тело документа BODY BODY - содержит текст, предназначенный для отображения обозревателем, и теги, указывающие на способ форматирования текста, определяющие графическое оформление, задающие параметры гиперссылок.

  • Задание:
    а) создать HTML-документ:
    HTML
    HEAD
    TITLE Название страницы TITLE
    HEAD
    BODY
    Пример страницы
    BODY
    HTML
    б) Сохранить документ в файле с именем index.html в рабочей папке.
    в) Просмотреть HTML-документ в обозревателе Internet Explorer.

  • Логическое форматирование.
    а) Оформление заголовков:
    Hn Hn n - целое число от 1 до 6, определяет уровень заголовка (1 - высокий уровень, 6 - низкий уровень). При оформлении заголовков можно использовать атрибут выравнивания -
    Hn align=left Hn - выравнивание по левому краю
    Hn align=center Hn - выравнивание по центру
    Hn align=right Hn - выравнивание по правому краю
    б) Оформление параграфа (абзаца):
    P P или с выравниванием P align=...... P
    в) Перевод на новую строку:
    BR

  • Задание:
    а) внести изменения в файл index.html так, чтобы на экране обозревателя были отображены образцы 6 уровней заголовков, три абзаца, выровненные тремя способами, четверостишие, оформленное с помощью тега перевода на новую строку.
    б) Сохранить новый документ в файле с именем index1.html в рабочей папке.
    в) Просмотреть HTML-документ в обозревателе Internet Explorer.



Занятие № 2. Физическое форматирование (форматирование шрифта)
  • а)strong strong (B B) полужирное начертание
    emem ( I I) курсивное начертание
    U U подчеркнутый шрифт
    FONT size=число color=цвет face= «тип шрифта» FONT - задание параметров шрифта.
    атрибут size – размер шрифта, целое число от 1 до 7, по умолчанию 3
    атрибут color – цвет шрифта, название цвета по-английски или 16-ричный код (например: #FF00FF)
    атрибут face – название типа шрифта
    Атрибуты можно использовать в любом сочетании.

  1. Горизонтальный разделитель:
    HR size=число width=число color=цвет - горизонтальная линия, разделяющая части документа, можно использовать без атрибутов или с атрибутами в любом сочетании,
    size – толщина линии в пикселях,
    width – ширина линии в пикселях,
    color – цвет линии (название или код цвета).

  • Задание:
    а) создать HTML-документ (на основе файла index.html), в котором будут заданы параметры форматирования текста (например, небольшой текст на тему краеведения).
    б) Сохранить документ в файле с именем index2.html в рабочей папке.
    в) Просмотреть HTML-документ в обозревателе Internet Explorer.

  • Пример текста:

Вокзал и Bell-vue

У пристани, на берегу моря, устроен с 1849 года красивый вокзал, где желающие могут иметь удобное помещение в особых комнатах. Отдельные комнаты можно иметь и в строении Bell-vue на берегу моря, вблизи вокзала. Вид на море с балконов Bell-vue вполне оправдывает это название.

В продолжение летнего сезона в вокзале и Bell-vue помещается кафе-ресторан. В обширной, светлой зале вокзала устраиваются петергофскими жителями летом балы, в саду вокзала играет оркестр.



Занятие № 3. Использование списков при оформлении текстов.
  • Текст с перечислением – список. Выделяют два основных вида списков – маркированный и нумерованный. Маркированный список используют, если порядок перечисления не важен, нумерованный – если порядок перечисления важен.
    а) Оформление маркированного списка:

UL
LI элемент списка LI
LI элемент списка LI
. . . . . . . . .
LI элемент списка LI
UL

атрибут type – вид маркера (вводится в теге UL)
type=circle - маркер в виде небольшой окружности ○
type=disc - маркер в виде закрашенной окружности ●
type=square - маркер в виде закрашенного квадратика ■

б) Оформление нумерованного списка:

OL
LI элемент списка LI
LI элемент списка LI
. . . . . . . . .
LI элемент списка LI
OL

атрибут type – вид нумерации (вводится в теге OL)
type=1 - арабская нумерация (1,2,3 …)
type=I - римская нумерация заглавными буквами (I, II, III, IV)
type=I - римская нумерация строчными буквами (i, ii, iii, iv )
type=A - нумерация латинскими заглавными буквами (A,B,C,D…)
type=a - нумерация латинскими строчными буквами (a,b,c,d…)
атрибут start=число в выбранной системе нумерации (стартовое число)

Атрибуты записываются в открывающиеся теги UL или OL.

  • Задание:
    а) оформить HTML-документ (на основе файла index.html), содержащий 6 списков (расположить друг под другом):

Дни недели:

Времена года:

Летние месяцы:

  1. Понедельник

  2. Вторник

  3. Среда

  4. Четверг

  5. Пятница

  6. Суббота

  7. Воскресенье

    1. Зима

    2. Весна

    3. Лето

    4. Осень


  1. Июнь

  2. Июль

  3. Август


Виды информации,

воспринимаемой человеком:

Виды информации,

воспринимаемой компьютером:

Виды компьютерных сетей:

    • Зрительная

    • Слуховая

    • Осязательная

    • Обонятельная

    • Вкусовая

  • Числовая

  • Символьная

  • Графическая

  • Звуковая

  • Видео

  • Локальные

  • Корпоративные

  • Региональные

  • Глобальные

б) Сохранить документ в файле с именем index3.html в рабочей папке.
в) Просмотреть HTML-документ в обозревателе Internet Explorer.


Занятие № 4. Оформление таблиц в HTML-документе.
  • В практическом HTML-программировании таблицы совершенно незаменимы для создания левых и правых полей страницы, выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга, для отображения на экране табличного материала. Таблица представляет собой прямоугольник, расчерченный на клетки, образующие столбцы и строки.

  • Таблица задается командой TABLE…TABLE . Внутри этих тегов задаются строки командами TR…TR, внутри строк задаются ячейки командами TD…TD. Таким образом, по строкам задается вся структура таблицы:


Атрибуты для тегов

, ,
:
border=число - толщина линии
bordercolor= цвет - цвет линии
bgcolor=цвет - цвет заливки фона
Атрибут width=число (или %) – ширина таблицы или ячейки в пикселях

  • Задание:
    а) создать HTML-документ (на основе файла index.html), содержащий таблицу:

Тип связи

Скорость, Мгбит/с

Помехоустойчивость

Электрические кабели:

  • Витая пара

  • Коаксиальный кабель


10 – 100

до 10


Низкая

Высокая

Телефонная линия

10 – 20

Низкая

Оптоволоконный кабель

10 – 200

Абсолютная

Характеристики коммуникационной сети


б) Сохранить документ в файле с именем index4.html в рабочей папке.
в) Просмотреть HTML-документ в обозревателе Internet Explorer.

Занятие № 5. Графика в HTML- документе.
  • Браузеры «понимают» три графических формата – gif, jpg, png.

Формат gif.

Картинки в этом формате поддерживают 256 цветов. Этот формат имеет дополнительные возможности:

  1. Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного.

  2. Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск.

Формат jpg.

Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества. Но это отражается на увеличении объема файлов.

Графические файлы желательно хранить в отдельной папке.

  • Оформление фона:
    атрибут background=”имя файла” – для тегов BODY, TABLE, TD)

  • Вставка рисунков:
    IMG src=”имя файла” width=число height=число - имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях.

  • Задание:

а) Создать папку для рисунков Image;

б) Скопировать в папку Image файлы с понравившимися рисунками и фонами;

в) Создать html-документ следующего содержания:

  • оформить фон страницы;

  • в ячейки, помеченные *, вставить рисунки, указав размеры рисунка;

  • в ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.

+

*

*

+

+

*

г) Сохранить файл с именем index5.html в рабочей папке;

д) Просмотреть результат в обозревателе Internet Explorer.


Занятие № 6. Гиперссылки в HTML- документе.
  • Гипертекст – документ, содержащий ссылки на другие документы. Информация, подготовленная в виде гипертекста, это электронная информация, и работать с ней можно только на компьютере. Чаще ссылка выделяется на фоне экрана монитора с помощью изменения цвета и подчеркивания. Это гиперссылка или гиперсвязь. Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гипертекст связывает множество документов с помощью гиперссылок. На занятие будут рассмотрены способы создания гиперссылок на документы локального компьютера.

  • Гиперссылка с одного файла на другой.
    Для того, чтобы броузер загрузил в свое окно новый html-документ (файл), нужно записать ссылку при помощи тега A с атрибутом href=имя_файла:
    A href=имя_файлатекст или рисунокA Задание перехода к

новому документу.

  • Гиперссылка внутри одного файла.
    Для задания гипертекстового перехода внутри документа используют два тега A. Первая команда с атрибутом href является источником перехода, а вторая с атрибутом name – приемником:
    A href=#метка текст или рисунок A Задание перехода

по метке
На экран выводится ссылка.

метка Метка. Сюда броузер

переходит по ссылке.
На экране ничего
не отображается.

Метка – набор символов (латинских букв и (или) цифр).

  • Рисунок как гиперссылка:
    A href=имя_файла1 IMG src=имя_файла width=число height=число A

  • Текст как гиперссылка:
    A href=имя_файлатекстA

  • Задание:

  1. Скопировать в рабочую папку html-файлы с текстами (avia.html, avto.html, flot.html, geldor.html – см. Приложение).

  2. Скопировать в рабочую папку файлы с изображениями.

  3. Создать html-документ, состоящий из четырех картинок-ссылок на текстовые файлы, картинки расположены в таблице по две картинки в два ряда. Документ сохранить под именем index6.html в рабочей папке.

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

  5. Просмотреть результат работы в обозревателе Internet Explorer.

  • Отформатировать файлы с текстами, используя изученные на предыдущих уроках приемы оформления шрифта и фона.




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

Предмет: Информатика

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

Целевая аудитория: 9 класс

Скачать
Практикум по HTML

Автор: Петрачук Анастасия Владимировна

Дата: 09.11.2014

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

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

object(ArrayObject)#860 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(68) "Практикум по Web-программированию (HTML) "
    ["seo_title"] => string(40) "praktikum-po-web-proghrammirovaniiu-html"
    ["file_id"] => string(6) "124855"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1414823799"
  }
}
object(ArrayObject)#882 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(111) "7-9 cыныптар?а арнал?ан "WEB-ДИЗАЙН" ?олданбалы курс ба?дарламасы "
    ["seo_title"] => string(67) "7-9-cynyptarg-a-arnalg-an-web-dizain-k-oldanbaly-kurs-bag-darlamasy"
    ["file_id"] => string(6) "151819"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(12) "planirovanie"
    ["date"] => string(10) "1420747113"
  }
}
object(ArrayObject)#860 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(109) "Конспект урока на тему: Создание веб-страницы: Мир животных "
    ["seo_title"] => string(64) "konspiekt-uroka-na-tiemu-sozdaniie-vieb-stranitsy-mir-zhivotnykh"
    ["file_id"] => string(6) "108791"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1403861222"
  }
}
object(ArrayObject)#882 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(40) "Web-сайт куру  тасiлдерi "
    ["seo_title"] => string(24) "web-sait-kuru-tasildieri"
    ["file_id"] => string(6) "103851"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1402642001"
  }
}
object(ArrayObject)#860 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(99) "Урок по теме: "Электронная почта. Необходимость почты" "
    ["seo_title"] => string(57) "urok-po-tiemie-eliektronnaia-pochta-nieobkhodimost-pochty"
    ["file_id"] => string(6) "133387"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1416501662"
  }
}



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

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

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

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

Ваш личный кабинет
Проверка свидетельства