Практические работы основы html

Сборник практических работ по созданию сайта с помощью языка «HTML»

Создать Web -страницу, знакомящую с основными тэгами HTML.

1. Запустить текстовый редактор Блокнот командой [Пуск — Программы — Стандартные — Блокнот].

2. Ввести HTML -код, задающий структуру Web-страницы:



Первое</b> <b>знакомство</b> <b>с</b> <b>тэгами</b> <b>HTML

3. Ввести команду [Файл — Сохранить]. Файлу Web -страницы присвоить имя первое_знакомство.htm

4. Сохранить в вашу папку.

5. Запустить браузер и открыть созданный файл командой [Файл — Открыть]. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тэгами HTML.

6. Открыть заново этот файл с помощью блокнота (не закрывая этот файл в браузере) и внести в текст страницы после < BODY >в пустую строку тэги заголовков различных уровней (размеров).

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

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


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


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


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

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

Сохранить изменения в блокноте. Активизировать браузер с открытым в нем предыдущим вариантом страницы. Щелкнуть по кнопке Обновить. В процессе создания Web -страницы приходится добавлять новые тэги и просматривать получаемый результат.

7. В окне браузера отобразится обновленная Web-страница. Закончить работу с файлом.

Работа 2. Форматирование шрифта.

Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Отделить этот фрагмент от остального текста с помощью горизонтальных разделительных линий.

1. Открыть файл из вашей папки первое_знакомство.htm через блокнот.

2. Внести в текст страницы тэги, между тегами

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

(в блокнот необходимо внести только то, что написано полужирным шрифтом в работе.)

Жирный
Курсив
Подчеркнутый
Жирный подчеркнутый курсив
Равноширинный

4. Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений.


ТЕРМИН 1

Пояснение к термину 1

ТЕРМИН 2

Пояснение к термину 2

ТЕРМИН 3

Пояснение к термину 3

Читайте также:  Smtp content type html

5. Сохранить изменения в блокноте. Активизировать браузер. В окне браузера отобразится обновленная Web-страница.

6. В итоге в файле первое_знакомство. htm у вас должно получиться

7. Закончить работу с файлом

Работа 3. Цветовые схемы. Шрифты.

Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок). Цвет на Web-странице задают либо его названием, либо числовым шести разрядным шестнадцатеричным кодом # RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зеленого и третьи – синего). Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов:

Основную цветовую схему Web -страницы можно задать в тэге < BODY >с помощью атрибутов:

Цвет текста активной ссылки

Цвет текста просмотренной ссылки

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

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

1. Открыть файл первое_знакомство. htm через блокнот.

2. Для оформления страницы можно использовать следующую цветовую схему:

(. ) описание атрибутов цвета производится в открытом теге < BODY >(. )

3. Сохранить файл и Обновить страничку (цвет текста и цвет фона должен поменяться).

4. Закончить работу с файлом.

Работа 4. Вставка изображений.

Вставка изображений. Для размещения на Web -страницах используются графические файлы форматов GIF , JPEG и PNG . Изображения помещаются на Web -страницу тэгом IMG с атрибутом SRC , сообщающим браузеру имя и местоположение графического файла.

Если рядом с изображением не должно быть текста, его размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге < P >. Размеры изображения (в пикселах) можно задать с помощью атрибутов WIDTH и HEIGHT . К изображению атрибутом ALT можно добавить название, которое появляется на экран или вместо иллюстрации (если по какой — либо причине графика не выводится в окне браузера), или в качестве всплывающий строки, при указании на рисунок мышью.

Читайте также:  Anaconda error due to incompatibility with several python libraries

1. Открыть файл первое_знакомство. htm в блокноте.

2. Вставить в начале страницы картинку (после тега < BODY >) с помощью тега:

ПК .png» WIDTH=»380″ HEIGHT=»380″ ALT RU»>Просто ПК «>

Атрибут ALIGN выравнивает по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top , bottom , middle , left или right .

3. Форматирование текста. Для выделения фрагментов текста используется тэг < FONT >. Атрибут FACE определяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут

SIZE — размер символов. Выравнивание текста по горизонтали задает атрибут ALIGN . Выравнивание можно добавлять к тэгам, задающим заголовки, абзацы, или размещающим информацию в таблице. Выровнять по центру заголовок страницы. HSPACE, VSPACE — горизонтальный и вертикальный отступы между картинкой и текстом. Введем заголовки различных уровней сразу после изображения.

А это — заголовок нашей странички.

А это — подзаголовок нашей странички.

Сохранить файл и Обновить страничку.

Выделим часть текста более крупным шрифтом и цветом и определим выравнивание

P ALIGN RU»>»> FONT SIZE =»6″ COLOR RU»>0066″ FACE RU»>» > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по левому краю.

P ALIGN RU»>»> FONT SIZE =»5″ COLOR RU»>0000″ FACE RU»>» > Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по правому краю.

P ALIGN RU»>»> FONT SIZE =»4″ COLOR RU»>0011″ FACE RU»>»> Давайте, просто напечатаем простой текст для создания нашей странички, выровненный по центру. FONT > P >

4. Сохранить файл и Обновить страничку). Закончить работу с файлом.

Источник

Практическая работа «Основы HTML»

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

Самуил Маршак(заголовок в 6 уровнях) (Апрель! Апрель!
На дворе звенит капель.
По полям бегут ручьи,
На дорогах лужи.)- по левому краю
(Скоро выйдут муравьи
После зимней стужи.
Пробирается медведь) – по центру
(Сквозь густой валежник.
Стали птицы песни петь
И расцвел подснежник.)- по правому краю

  • а)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-документ в котором будут заданы параметры форматирования текста
  • б) Сохранить документ в файле с именем 2.html в рабочей папке
  • Пример текста:

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

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

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

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

  • Браузеры «понимают» три графических формата – gif, jpg, png.
  1. Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик (нарисовать отдельные кадры, настроить время задержки и последовательность показа, «зациклить» кино или показывать кадры только один раз). Когда анимация готова, она записывается на диск как обычный gif-файл. В HTML нет различия в выводе на экран простого gif-файла или анимационного.
  2. Прозрачная графика. GIF-формат позволяет один или несколько цветов в картинке объявить прозрачными. Это помогает избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательно. Прозрачный цвет задается в редакторе (GIF-редактор или FOTOSHOP) при записи файла на диск.
  • Оформление фона:
    атрибут background=”имя файла” – для тегов BODY, TABLE, TD)
  • Вставка рисунков:
    IMG src=”имя файла” width=число height=число — имя файла – путь к файлу с рисунком, width – ширина рисунка в пикселях, height – высота рисунка в пикселях.
  • Задание:
  • оформить фон страницы;
  • в ячейки, помеченные *, вставить рисунки, указав размеры рисунка;
  • в ячейки, помеченные +, вставить текст пояснения к соответствующим рисункам и оформить фон ячейки.

Источник

Оцените статью