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

Начальные сведения
Язык HTML
Начальные сведения
Начальные сведения
Начальные сведения
HTML - теги
Назначение HTML- тегов
<HTML>
Начальные сведения
Пример Web - страницы
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Разбивка на абзацы
Начальные сведения
Начальные сведения
Начальные сведения
Форматирования текста
Начальные сведения
Названия цветов и значения RGB
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
Форматирования заголовков
Начальные сведения
Начальные сведения
Начальные сведения
Начальные сведения
1/31
Средняя оценка: 4.0/5 (всего оценок: 36)
Код скопирован в буфер обмена
Скачать (1443 Кб)
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

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

<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

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