Презентация на тему: Начальные сведения

Начальные сведения
Язык HTML
Начальные сведения
Начальные сведения
Начальные сведения
HTML - теги
Назначение HTML- тегов
<HTML>
Начальные сведения
Пример Web - страницы
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Разбивка на абзацы
Начальные сведения
Начальные сведения
Начальные сведения
Форматирования текста
Начальные сведения
Названия цветов и значения RGB
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Форматирования заголовков
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
1. Создайте новую страницу в редакторе блокнот. 2. В элемент <title> укажите « Практическая работа 3» и вашу фамилию. 3. Отформатируйте текст по заданию :
<html> <head> <title> Практическая работа 4 Фамилия </title> </head> <body> < h1> Роман </h1> < h2> Книга </h2> < h3> Том </h3> < h4> Часть </h4> < h5> Глава
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Разбивка на абзацы
Параметры тега HR
1/51
Средняя оценка: 4.3/5 (всего оценок: 59)
Код скопирован в буфер обмена
Скачать (1531 Кб)
1

Первый слайд презентации: Начальные сведения

Язык HTML 1

Изображение слайда
2

Слайд 2: Язык HTML

HTML ( Hyper Text Markup Language ) – язык разметки гипертекста, включает в себя способы оформления гипертекстовых документов. 2

Изображение слайда
3

Слайд 3

Основные понятия Гипертекст – текст, содержащий гиперссылки Гиперссылка – фрагмент текста, который является указателем на другой файл или объект. Web- узел или Web -сайт – группа Web -страниц, принадлежащих одному автору или одному издателю, взаимосвязанных общими гиперссылками. 3

Изображение слайда
4

Слайд 4

Браузер ( Browser ) Программа для просмотра Web - страницы 5

Изображение слайда
5

Слайд 5

теги HTML 14

Изображение слайда
6

Слайд 6: HTML - теги

Язык разметки гипертекстовых документов HTML представляет собой совокупность команд, называемых тегами (от английского tag ). Тег – начальный или конечный маркер элемента записывается в угловых скобках и состоит из имени, за которым может следовать список атрибутов (все атрибуты располагаются в начальном теге). Большинство т ег ов имеют два компонента: открывающий и закрывающий. З акрывающий компонент имеет то же название, но при записи перед названием ставится символ « / ». 15

Изображение слайда
7

Слайд 7: Назначение HTML- тегов

Форматирования текста Форматирования таблиц и списков ; Организации ссылок на другие ресурсы ; Вставки изображений и расширений HTML. 16

Изображение слайда
8

Слайд 8: <HTML>

</HTML> <HEAD> </HEAD> <BODY> </BODY > Структура HTML- документа …. Начало разметки документа содержание страницы Конец разметки документа 17 <Title> </Title> название сайта

Изображение слайда
9

Слайд 9

Пример Web - страницы <HTML> <HEAD> <TITLE> Название Web- страницы </TITLE> </HEAD> <BODY> </BODY> </HTML> 19 Меня зовут ___. Мне ___лет. Это моя первая Web- страница. Тут я могу писать любой текст. Я размещу эту страницу в Интернете.

Изображение слайда
10

Слайд 10: Пример Web - страницы

Изображение слайда
11

Слайд 11

Задание 1 Создание структуры страницы Откройте текстовый редактор блокнот. Наберите структуру приведенной ранее страницы Между элементами <TITLE> и </TITLE> наберите Работа1 Ивановой Светы(ваша фамилия и имя) Между элементами <BODY> </BODY> наберите Меня зовут ___. Мне ___лет. Это моя первая Web- страница. Тут я могу писать любой текст. Я размещу эту страницу в Интернете. 4. Сохраните файл с именем index.htm в папке STRANICA 5. Просмотрите страницу в браузере. 21

Изображение слайда
12

Слайд 12

Задание 1 Создание структуры страницы Откройте текстовый редактор блокнот. Наберите структуру приведенной ранее страницы Между элементами <TITLE> и </TITLE> наберите Название Web- страницы Между элементами <BODY> </BODY> наберите Меня зовут ___. Мне ___лет. Это моя первая Web- страница. Тут я могу писать любой текст. Я размещу эту страницу в Интернете. 4. Сохраните файл с именем index.htm в папке STRANICA 5. Просмотрите страницу в браузере. 21

Изображение слайда
13

Слайд 13

<B> тест </B> выделение шрифта полужирным шрифтом <I> тест </I> выделение шрифта курсивом <U> тест </U> подчеркнутый шрифт x<sup>2</sup> верхний индекс ( х 2 ) x<sub>2</su b > нижний индекс ( х 2 ) Форматирование шрифтов 28

Изображение слайда
14

Слайд 14

форматирование абзацев 36

Изображение слайда
15

Слайд 15: Разбивка на абзацы

<P> текст </P> - новый абзац, можно использовать только начальный тег, т. к. следующий элемент <p> обозначает не только начало следующего абзаца, но и конец предыдущего тест <BR> тест - перенос текста на новую строку без абзацного отступа тест тест тест <HR> тест разделительная линия тест тест 37

Изображение слайда
16

Слайд 16

Пример. Уронили мишку на пол, <BR> Оторвали мишке лапу, <BR> Все равно его не брошу, <BR> Потому, что он хороший На экране браузера увидим разбиение текста на четверостишие 40

Изображение слайда
17

Слайд 17

Выравнивание абзацев Вместе с элементом абзац <p> можно использовать атрибут выравнивания align Значение параметра ALIGN Действие LEFT Выравнивание текста по левой границе окна браузера. CENTER Выравнивание текста по центру окна браузера. RIGHT Выравнивание по правой границе окна браузера. JUSTIFY Выравнивание по двум сторонам. 41

Изображение слайда
18

Слайд 18

Форматирование текста 22

Изображение слайда
19

Слайд 19: Форматирования текста

Форматировать текст можно традиционными способами : выделять курсивом, полужирным, выбирать шрифт, размер, цвет, выравнивать текстовые фрагменты. Все эти характеристики задаются при помощи соответствующих атрибутов в теге управления шрифтом <FONT> текст </FONT> Размер задается атрибутом SIZE, который может принимать значения от 1 до 7. Пример. <FONT SIZE=3> тексту задан размер 3 </FONT> 23

Изображение слайда
20

Слайд 20

COLOR – атрибут для определения цвета, название которого задается числом в шестнадцатеричной системе счисления или название на английском языке color = ”#FF0000” color=”red” Пример. <FONT color=”blue”> это шрифт синего цвета </FONT> R-red 00-FF 0-255 G-green 00-FF 0-255 B - blue 00-FF 0-255 RGB 24

Изображение слайда
21

Слайд 21: Названия цветов и значения RGB

25

Изображение слайда
22

Слайд 22

FACE – позволяет задавать тип шрифта или несколько шрифтов ( через точку с запятой ) Пример. <FONT FACE=”arial”> </ FONT> Все атрибуты могут быть использованы совместно внутри тега < FONT> Пример. <FONT FACE=”arial” size=3 color= ” blue”> Это шрифт arial размером 3 синего цвета </ FONT> 27

Изображение слайда
23

Слайд 23

Примеры со шрифтами Пример действия параметра FA C E < P ALIGN =CENTER> <FONT SIZE=5 FACE=  Arial  > ШРИФТ </FONT> <FONT SIZE=5 FACE=  Times New Romans  > РАЗНОГО </FONT> < FONT SIZE=5 FACE=  Courier New  > НАЧЕРТАНИЯ </FONT> </P> 29

Изображение слайда
24

Слайд 24

Примеры со шрифтами Пример действия параметра COLOR <P ALIGN = ” CENTER ” > <FONT SIZE=5 COLOR=”RED”> ШРИФТ </FONT> <FONT SIZE=5 COLOR=”GREEN”> РАЗНОГО </FONT> < FONT SIZE=5 COLOR=”BLUE”> ЦВЕТА </FONT> </P> ЗАДАНИЕ Написать разными по цвету буквами: КАЖДЫЙ ОХОТНИК ЖЕЛАЕТ ЗНАТЬ ГДЕ СИДИТ ФАЗАН 31

Изображение слайда
25

Слайд 25

Изображение слайда
26

Слайд 26

форматирование заголовков 33

Изображение слайда
27

Слайд 27: Форматирования заголовков

<h1> тест </h1>  тест <h2> тест </h2>  тест <h3> тест </h3>  тест <h4> тест </h4>  тест <h5> тест </h5>  тест <h6> тест </h6>  тест Существует шесть уровней заголовков 34

Изображение слайда
28

Слайд 28

Пример <H1 ALIGN= ” CENTER ” > ОСНОВНОЙ ЗАГОЛОВОК (H1) ПО ЦЕНТРУ</H1> <H2 ALIGN= ” RIGHT ” > ПОДЗАГОЛОВОК (Н2) ПО ПРАВОМУ КРАЮ </H2> <H3 ALIGN= ” CENTER ” > ПОДЗАГОЛОВОК (Н3), ВЫРАВНИВАНИЕИ ПО УМОЛЧАНИЮ </H3> <H4 ALIGN= ” CENTER> ПОДЗАГОЛОВОК (Н4) ПО ЦЕНТРУ</H4> <H5 ALIGN= ” LEFT ” > ПОДЗАГОЛОВОК (Н5) ПО ПРАВОМУ КРАЮ</H5> <H6 ALIGN= ” RIGHT ” > ПОДЗАГОЛОВОК (Н6) ПО ПРАВОМУ КРАЮ</H6> 35

Изображение слайда
29

Слайд 29

<P> По умолчанию выравнивание по левому краю</P> <p ALIGN = ”center”> Центрирование <BR> всех строк абзаца, <BR> в том числе включая принудительные разрывы </p> <p ALIGN =”RIGHT”> Этот абзац выровнен по правому краю </p> <p ALIGN =”LEFT”> Этот абзац выровнен по левому краю, также, как и по умолчанию </p> <p ALIGN =”JUSTIFY”> Этот абзац выровнен одновременно по левому и правому краям, но в старых версиях браузеров воспринимается как выравнивание по левому краю </p> Пример 42

Изображение слайда
30

Слайд 30

Вставка рисунков IMG – тег для создания ссылки на графический файл. С его помощью также можно использовать изображение в гиперссылках, вставлять картинки в таблицы, использовать изображения для фона страницы. Не содержит конечного тега. Необходимым атрибутом является src - указатель пути к графическому файлу, alt – выводит текст, поясняющий загружаемый рисунок. Высоту и ширину рисунка задают с помощью атрибутов height и width. Рамка вокруг объекта задается атрибутом border. Пример. <IMG src = ”boss.gif” border=2 height =121 width=76 alt=” мой портрет ”> <BODY BACKGROUND=“WOOD.JPG”> 62

Изображение слайда
31

Слайд 31

<P align=center> <IMG src ="pic.gif" > </p> рисунок в центре, текст сверху и снизу <P align=justify> <IMG src ="pic.gif" align=left> </p> рисунок слева <P align=justify> <IMG src ="pic.gif" align=right> </p> рисунок справа Примеры обтекания иллюстраций в документе 63

Изображение слайда
32

Слайд 32

Задание 2 Форматирование текста на странице Создайте новую страницу в редакторе блокнот. В элемент <title> укажите « Практическая работа 2» и вашу фамилию. Отформатируйте текст по заданию : Домашние животные ( заголовок H1 ) Собаки ( заголовок H 2, центральное выравнивание } Сторожевые ( выравнивание слева, полужирный шрифт ) Охотничьи ( выравнивание справа, полужирный шрифт ) Дрессировка ( выравнивание по центру, полужирный курсивный шрифт ) Клубы Выставки Площадки ( выравнивание по центру, размер шрифта 14, цвет красный ) Стихотворение ( выравнивание по центру, синий шрифт ) По жизни я скромен Оваций не надо ! Но как же я классно ( Выравнивание по левому краю, размер шрифта 10) Смотрюсь у снаряда ! 43

Изображение слайда
33

Слайд 33: 1. Создайте новую страницу в редакторе блокнот. 2. В элемент <title> укажите « Практическая работа 3» и вашу фамилию. 3. Отформатируйте текст по заданию : <html> <head> <title> Практическая работа 3 Фамилия </title> </head> <body> <font size= 1 color=#ff 00 00 > Каждый </font> <font size= 2 color=#ff 99 00 > охотник </font> <font size= 3 color=#ffff00 > желает </font> <font size= 4 color=#00ff00 > знать, </font> <font size= 5 color=#00ccff > где </font> <font size= 6 color=#0000ff > сидит </font> <font size= 7 color=#ff00ff > фазан </font> </body> </html>

Задание 3 Форматирование текста на странице 44

Изображение слайда
34

Слайд 34: <html> <head> <title> Практическая работа 4 Фамилия </title> </head> <body> < h1> Роман </h1> < h2> Книга </h2> < h3> Том </h3> < h4> Часть </h4> < h5> Глава </h5> < h6> Параграф </h6> </body> </html>

Задание 4 Форматирование заголовков 1. Создайте новую страницу в редакторе блокнот. 2. В элемент <title> укажите « Практическая работа 4» и вашу фамилию. 3. Отформатируйте текст по заданию : 45

Изображение слайда
35

Слайд 35

оформление фона и вставка рисунков 60

Изображение слайда
36

Слайд 36

Задание фона страницы Для задания цвета фона на странице надо внутри начального элемента <BODY> указать атрибут bgcolor =” цвет ”. Цвет задается также как и для шрифта названием или цифровым кодом. Пример <BODY BGCOLOR=“blue”>… </BODY> <BODY BGCOLOR=“00FF00”>… </BODY> <BODY BACKGROUND=“FON.JPG”> 61

Изображение слайда
37

Слайд 37

Задание 7 Размещение графики на Web - страницах Создайте новую страницу в редакторе блокнот. В элемент <title> укажите « Практическая работа 7» и вашу фамилию. В элементе <BODY> задайте атрибут, чтобы цвет фона страницы был черным. Сделайте надпись « Спокойной ночи » голубым цветом, 6 шрифтом, центральным выравниванием. Вставьте горизонтальную линию красного цвета. Сделайте надпись желтого цвета « Приятных сновидений » 8 шрифтом, центральным выравниванием. Вставьте горизонтальную линию синего цвета толщиной 10 пикселей, длиной 50%, выровните по центру. Рисунок 64

Изображение слайда
38

Слайд 38

Задание 8 Размещение графики на Web - страницах Создайте новую страницу в редакторе блокнот. В элемент <title> укажите « Практическая работа 8» и вашу фамилию. Разместите на странице рисунок Сделайте надпись к рисунку Создайте рамку вокруг рисунка шириной 2 пикселя. Над рисунком поместите заголовок ( например «Мир футбола») самого большого размера и выровняйте его по центру. Вставьте горизонтальную линию синего цвета толщиной 8 пикселей, выровняйте по левому краю по центру. 65

Изображение слайда
39

Слайд 39

Задание 9 изменение размеров изображения Создайте новую страницу в редакторе блокнот. В элемент <title> укажите « Практическая работа 9» и вашу фамилию. В элементе <BODY> задайте атрибут, чтобы цвет фона страницы зеленым. Вставьте изображение. Задайте его размеры 100x100 пикселей. Отредактируйте картинку в графическом редакторе так, чтобы рисунок был на прозрачном фоне и добавьте это изображение на вашу страничку. 66

Изображение слайда
40

Слайд 40

гиперссылки 67

Изображение слайда
41

Слайд 41

Гиперссылки Гиперссылки условно можно разделить на следующие виды : Внутренние – связывающие документы внутри одного и того же узла ; Внешние – связывающие Web - страницу с документами, не принадлежащими данному узлу ; Гиперссылка на почтовый адрес ; Метки - якоря – позволяющие переходить посетителю на определенные разделы документа. 68

Изображение слайда
42

Слайд 42

Гиперссылки <A href = “ адрес ссылки ”> текст для щелчка мыши </A > <A href = “ адрес ссылки ”> <IMG src=“ ссылка на рисунок ”> </A > Внутри тега <BODY> используется атрибут, задающий цвет гиперссылок link – задает цвет исходных ссылок vlink – задает цвет посещенных ссылок alink – задает цвет активных ссылок ( цвет при нажатии мыши ) Для указания электронной почты и запуска электронной программы используется ссылка : < A href =“mailto:vvv@mail.ru”> Иванов Иван </A> 69

Изображение слайда
43

Слайд 43

Примеры гиперссылок <A href=“#new” > Новые поступления </A> - переход к строке той же страницы, помеченной тегом <A name=“new”> <A href=“pag2.htm#new1” > примечания </A> - переход на страницу сайта pag2 к строке, помеченной тегом <A name=“new 1 ”> <p> подробности читайте <A href=“pag2.htm” > вторая страница </A></p> - ссылка на другую страницу того же сайта 70

Изображение слайда
44

Слайд 44

<p> <A href=“pag2.htm” > IMG src=log.gif alt=“ о нашей фирме ” </A></p> - ссылка на другую страницу того же сайта, но ссылкой является рисунок <A href=“myfile.exe” title = ” файл 10 мегабайт ”> Скачать программу </A> - ссылка с подсказкой title <A ref=“http://home.ifmo.ru/index.html”> тест </A> - внешняя ссылка Примеры гиперссылок 71

Изображение слайда
45

Слайд 45

Примеры гиперссылок <a href=“proba.htm”> первая страница </a> <a href=“http://www.yandex.ru”> yandex</a> <a href=“mailto:Jakov21@yandex.ru”> Почта </a> 72

Изображение слайда
46

Слайд 46

Задание 10 Создание гиперссылок 1. Создайте две страницы с именами str1.htm str2.htm 2.В элемениеTITLTRE укажите название странички 3. Задайте фон первой страницы зеленого цвета, а второй Синего 4. На первой странице задайте ссылку на вторую страницу <A href=“str2.htm”> На вторую страницу</a> 5. На второй странице задайте ссылку на 1 страницу <A href=“str2.htm”> На вторую страницу</a> 6.Поместите на страницы две разные картинки и проверьте работу гиперссылок 73

Изображение слайда
47

Слайд 47

Задание 11 Создание гиперссылок 1. Создайте к страницам прошлого задания с именами str1.htm str2.htm еще одну страницу str3.htm 2.Добавьте на первых двух страницах ссылку на 3 страницу? А на третьей ссылки на две первые 3. В теге <BODY> определите текст гиперссылок: все гиперссылки -белые активные гиперсылки - красные посещенные гиперссылки -серые 4. На третьей странице задайте ссылки на вторую и первую страницы в виде рисунка кнопки <A href=“str2.htm”> IMG src=“kn.gif”></a> 5. Задайте бордюр для кнопок=2 6. Проверьте работу гиперссылок 74

Изображение слайда
48

Слайд 48

<pre> т е с т </pre> - сохраняет исходный вид отформатированного текста с пробелами, разбивками на строки и т. п. ( т е с т ) Пример <H3 ALIGN=CENTER> ПУТЬ К МУДРОСТИ </H3> <PRE><FONT SIZE=3> К мудрости путь – по ухабам ошибок; Иди же и носа не вешай: Ушибы, ушибы, и снова ушибы Но реже и реже, и реже… </PRE> Форматирование шрифтов 32

Изображение слайда
49

Слайд 49

Примеры со шрифтами Пример действия параметра SIZE <P ALIGN =CENTER> <FONT SIZE=1 > Ш </FONT><FONT SIZE=+1 > Р </FONT> <FONT SIZE=+2 > И </FONT><FONT SIZE=+1 > Ф </FONT> <FONT SIZE=1 > Т </FONT> <FONT SIZE=2 > Р </FONT><FONT SIZE=+1 > А </FONT> <FONT SIZE=+2 > З </FONT><FONT SIZE=+3 > Н </FONT> <FONT SIZE=+2 > О </FONT><FONT SIZE=+1 > Г </FONT> <FONT SIZE=2 > О </FONT> <FONT SIZE=3 > Р </FONT><FONT SIZE=+1 > А </FONT> <FONT SIZE=+2 > З </FONT><FONT SIZE=+3 > М </FONT> <FONT SIZE=+2 > Е </FONT><FONT SIZE=+1 > Р >/FONT> <FONT SIZE=3 > А </FONT> </P> 30

Изображение слайда
50

Слайд 50: Разбивка на абзацы

<P> текст </P> - новый абзац, можно использовать только начальный тег, т. к. следующий элемент <p> обозначает не только начало следующего абзаца, но и конец предыдущего тест <BR> тест - перенос текста на новую строку без абзацного отступа тест тест тест <HR> тест разделительная линия тест тест 37

Изображение слайда
51

Последний слайд презентации: Начальные сведения: Параметры тега HR

Параметр тега HR Назначение ALIGN Выравнивание по краю или по центру. Имеет значение LEFT, CENTER,RIGHT WIDTH Устанавливает длину линии в пикселях или процентах к окну браузера. SIZE Устанавливает толщину линии в пикселях NOSHADE Отменяет рельефность линии COLOR Указывает цвет линии.Использует стандарт RGB или стандартное имя. 38

Изображение слайда