Партнерка на США и Канаду по недвижимости, выплаты в крипто

30% recurring commission
Выплаты в USDT
Вывод каждую неделю
Комиссия до 5 лет за каждого referral

Урок № 1 Теоретический урок

Основные понятия:

Internet Всемирная паутина WWW Гипертекстовые ссылки Гипертекст BROWSER Web-страницы Язык разметки гипертекста HTML Команды (тэги, флаги разметки) языка HTML Структура HTML-документа Заголовок HTML-документа Название HTML-документа
Урок № 2 Структура HTML-документа. Заголовок документа. Тело документа

«Проба пера»

Задание 1
Создайте в папке Мои документы папку HTML_фамилия Запустите приложение Блокнот Наберите следующий текст:
<HTML>

Заголовок документа

(в окне браузера)

<HEAD>

<TITLE>Моя первая страничка</TITLE>

</HEAD>

Тело документа

<BODY>

Привет всем, кто читает мою страничку!

</BODY>

</HTML>
Сохраните документ в папке HTML_фамилия под именем первая.HTM Откройте документ. С помощью какого приложения Windows он откроется? Просмотрите документ. Где появилась строка «Моя первая страничка»? Где появилось Ваше сообщение? В пункте меню Вид выбрать HTML и дописать или изменить Ваше сообщение. На панели инструментов программы просмотра нажать кнопку Обновить.
«Мир разноцветен»

Сообщение можно послать не обязательно на белой «бумаге» (фоне), а на цветной, а также сам текст может быть любого цвета.

Цвет фона: <BODY BGCOLOR =”#шестнадцатеричное значение”>

Цвет текста: <BODY TEXT =”#шестнадцатеричное значение”>

FF0000 – красный;

00FF00 – зеленый;

0000FF – синий

Задание 2

1. Используя таблицу цветов, подберите для своего сообщения цвет фона и цвет текста так, чтобы Вам понравилось их сочетание.

НЕ нашли? Не то? Что вы ищете?

2. Сохраните цветную работу под именем вторая.HTM
Урок № 3 Команды форматирования документа

Задание 1
Откройте Ваш документ, сохраненный под именем первая.HTM При помощи кнопки Вид®HTML перейдите в приложение Блокнот
Попробуйте разбить Ваше сообщение на две строки, выделить жирным шрифтом любое слово, пропустить пустую строку, используя возможности Блокнота. Сохраните изменения, посмотрите на результат своей работы. Никаких изменений Вы не увидите!

«Все в наших руках!»

Задание 2

1. Удалите текст, находящийся между командами <BODY> и </BODY>

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

<BODY>

Существует 6 уровней (размер шрифта) заголовков (Н6).

<H1>Главный заголовок</H1>

Начало абзаца

<H2>Подзаголовок</H2>

Эти строчки

будут изображены

слитно, несмотря на то,

что Вы набираете их

не на одной строке и даже

через строку.

Закрывающий тэг не обязателен.

Вставка горизонтальной линии

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

<НR>

Текст после тэга <BR> переходит на другую строку без пропуска пустой строки

</BODY>

3. Сохраните документ под именем третья.HTM.

4. Откройте документ. Посмотрите как «работают» использованные Вами команды (тэги).

Задание 3

1. Создайте документ следующего вида:

РУССКИЕ НАРОДНЫЕ ПОГОВОРКИ

_______________________________________________________________________________________

В кулаке все пальцы равны. Вечный мир - до первой драки.

_______________________________________________________________________________________

Всякое дело концом хорошо.

Где дешево, там и дорого.

2. Сохраните документ под именем пословицы.HTM.

Урок № 4 Параметры выравнивания параграфа (align):

CENTER – по центру;

LEFT – по левому краю;

RIGHT – по правому краю

Пример:

текст

<h1 align=center>текст</h1>

Форматирование шрифта:

1. Начертание шрифта:

текст жирны й;

текст курсив;

текст подчеркнутый;

Увеличение или уменьшение размера шрифта относительно его размера по умолчанию

Размер шрифта:

текст

текст

3. Цвет шрифта:

текст - цвет задается в шестнадцатеричной системе

FF0000 – красный;

00FF00 – зеленый;

0000FF – синий

Задание

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

ОБЫКНОВЕННАЯ ИСТОРИЯ

(перевод с английского)

Гулял по улице щенок –

Не то Пушок, не то Дружок.

Гулял в метель и солнцепек,

И под дождем гулял и мок,

И если даже шел снежок,

Гулял по улице щенок.

Гулял в жару, в мороз и сырость

Гулял

и вырос.

2. Сохраните документ под именем щенок.HTM
Урок № 5 Включение графического изображения в страничку

Задание

1. создайте в графическом редакторе Paint изображение щенка

2. сохраните рисунок под именем dog. bmp в папке содержащей Ваши работы с Web-страницами (HTML-фамилия)

3. В документ щенок.HTM c помощью команды <IMG SRC=”dog. bmp”> вставьте изображение щенка:

ОБЫКНОВЕННАЯ ИСТОРИЯ

(перевод с английского)

Гулял по улице щенок –

Не то Пушок, не то Дружок.

Гулял в метель и солнцепек,

И под дождем гулял и мок,

И если даже шел снежок,

Гулял по улице щенок.

Гулял в жару, в мороз и сырость

Гулял

и вырос.

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

Размер задается в пикселях

WIDHT (ширина)

2. HEIGHT (высота),

3. ALIGN (выравнивание).

CENTER – по центру;

LEFT – слева;

RIGHT – справа

Если Вы располагаете изображение внутри параграфа, то можете его выровнять

по левому полю (ALIGN=left); по правому полю (ALIGN=right); по верхней границе (ALIGN=top); по нижней границе (ALIGN=bottom); по центру (ALIGN=center).

Урок № 6 Наклеим обои…

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

Чтобы взять любые понравившиеся вам «обои» с какой-нибудь странички, щелкните по ним правой кнопкой мыши, выберите команду save Picture as и сохраните файл в каталоге, где хранятся все Ваши HTML-документы. Назовите его bg. jpg.

Задание

1. Создайте документ-HTML следующего содержания:

<HTML>

<HEAD>

<TITLE> Моя страничка</TITLE>

</HEAD>

<BODY background=”bg. jpg”>

На этой страничке текст и изображения будут располагаться на фоне «обоев»

</BODY>

</HTML>

2. Сохраните документ под именем обои.HTM

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

3. Откройте файл обои.HTM в программе просмотра и посмотрите, что у Вас получилось.

4. Создайте свой рисунок обоев в редакторе Paint, сохраните рисунок в своей папке под именем bg1.bmp

5. Поменяйте обои в документе

Урок № 7 Создание списков

I Нумерованные списки

<ol> открытие нумерованного списка

<li> номер в списке по порядку

<li>

</ol> закрытие нумерованного списка

процессор память устройства ввода

II Маркированные списки

<ul> открытие маркированного списка

<li> первый маркер

<li>..второй маркер

<li>..третий маркер

</ul> закрытие маркированного списка

процессор память устройства ввода

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

<ol> открытие нумерованного списка

<li> номер в списке по порядку

<ul> открытие нумерованного списка

<li> первый маркер

<li>..второй маркер

</ul> закрытие маркированного списка

<li>

<ul> открытие нумерованного списка

<li> первый маркер

<li> второй маркер

</ul> закрытие маркированного списка

<li>

</ol> закрытие нумерованного списка

фрукты:

· виноград

· яблоки

овощи:

· капуста

· свекла

Наберите следующий текст:

ОБУЧЕНИЕ И РАБОТА

1. Массажист

2. Парикмахер-косметолог

3. Автомеханик

КОНТОРА «РОГА И КОПЫТА»

Продает:

· Веники

· Мочалки

· Мыло

УСТРОЙСТВА ВВОДА/ВЫВОДА ЭВМ

Устройства ввода:

· клавиатура

· мышь

устройства вывода:

· монитор

· принтер

Урок № 8 Создание таблиц

<TABLE>…</TABLE> между этими тэгами помещается таблица

<TABLE BORDER=n>…</TABLE> таблица с обведенным контуром, число n – толщина контура

<CAPTION>…</CAPTION> между этими тэгами располагается заголовок над таблицей, по ее центру

<TR>…</TR> строка таблицы

<TD>…</TD> ячейка с простыми данными

<TH>…</TH> ячейка таблицы, содержащая заголовок

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

Объединение двух строк: <TD ROWSPAN=2>…. </TD>

Объединение двух столбцов: <TD COLSPAN=2>…</TD>

Задание № 1

Самая простая таблица

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 2	Ячейка 5	Ячейка 6

Задание № 2

Самая простая таблица с заголовком

Заголовок	Заголовок
Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Задание № 3

Ячейка А	Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4
Ячейка В	Ячейка С

Сохраните выполненные работы (3 таблицы в одном документе) под именем таблица.HTM

Урок № 9 Создание таблиц (продолжение)

Вариант 1

Таблица 1

1. первый

2. второй

3. третий

Вариант 2

Таблица 2

· первый

· второй

· третий

Вариант 3

Таблица 3

1. первый

2. второй

третий

Вариант 4

Таблица 4

· первый

· второй

· третий

Вариант 5

Таблица 5

4. первый

5. второй

6. третий

Сохраните выполненную работу под именем таблица_1.HTM

Урок № 10 Рамки (фреймы)

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

Для создания рамок (областей страницы) используется команда <FRAMESET> и закрывающая команда </FRAMESET>, а для их описания («заселения» в рамки других страниц) – команда <FRAME>

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

«В тесноте, но не в обиде»

Задание

1. Создайте базовую страничку, на которой будут отображаться рамки и сохраните ее в файле с именем рамки.HTM:

<HTML>

Внимание!

В документе с рамками отсутствует тэг <BODY>

<HEAD><TITLE>Рамки</TITLE></HEAD>

</FRAMESET>

</HTML>

2. Измените цвет фона документа списки.htm на желтый (#FFFF00) и цвет фона документа щенок.htm на розовый (#FF00FF)

3. Используя команду <FRAMESET ROWS> сделайте разбиение горизонтальным.

4. Разбейте страничку на три рамки, используя команду
<FRAMESET COLS=”30%, 30%,*”>
символ «*» обозначает, что размер третьей рамки должен занимать всю оставшуюся площадь главной страницы.

Урок № 11 Гипертекстовые ссылки

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

Гиперссылка – выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши.

Часть текста, название, участок изображения и пр. могут иметь ссылки на другой текст внутри этого же документа или на другой документ в сети Интернета. Это называется гипертекстовой связью (Hypertext link), гипертекстовой ссылкой или гиперсвязью. Изображение или участок текста, слово, с которым ассоциированы гиперсвязи, называется якорем (anchor), линком (link) или ссылкой.

Теги гиперссылок:

внешние (на другой Web-узел):

<A HREF=http://www. vega. ru>Международная Лаборатория Вега</A>

внутренние (в пределах документа)

<A HREF=”списки. htm”>моя работа со списками</A>

на определенное место внутри страницы (по якорю)

а) месту ссылки дать имя (якорь):

б) ссылка:

Задание

1. Создайте в своей папке документ со следующим текстом:

Я умею форматировать текст и шрифт в тексте с помощью команд языка HTML.

В этом Вы можете убедиться, заглянув на мою страничку с работой по тексту стихотворения <A HREF=”щенок.htm”> «Обыкновенная история»</A>.

2. Сохраните документ под именем Index.htm

3. Откройте документ Index.htm

4. Перейдите по ссылке на страничку щенок.htm

5. Организуйте возврат на страничку Index.htm

6. Создайте якорь, дав имя (любое) последнему слову ГУЛЯЛ и сделайте по этому якорю ссылку от заголовка стихотворения.

Можно задать цвет для ссылки, цвет посещенной ссылки так же как и цвет фона документа:

vlink –посещенная ссылка

Правила пользования Сайтом
Правила публикации материалов
Политика конфиденциальности и обработки персональных данных

При перепечатке материалов ссылка на pandia.org обязательна.
Минимальная ширина экрана монитора для комфортного просмотра сайта: 1200 пикселей.
Сайт не содержит автоматически сгенерированных данных и не принимает подобные материалы.

Мы признательны за найденные неточности в материалах, опечатки, некорректное отображение элементов на странице - отправляйте на [email protected]

Лизинговая поддержка инвестиционной деятельности предприятий нефтедобывающей отрасли

Партнерка на США и Канаду по недвижимости, выплаты в крипто

ОБУЧЕНИЕ И РАБОТА

КОНТОРА «РОГА И КОПЫТА»

УСТРОЙСТВА ВВОДА/ВЫВОДА ЭВМ

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы