Презентация на тему: Основы языка HTML

Основы языка HTML
Что такое HTML?
Из истории развития HTML …
Основные понятия:
Любой документ на языке HTML представляет собой набор элементов причем начало и конец каждого элемента обозначается специальными пометками тегами.
Основные понятия:
C чего начать создавать web -страницу?
C чего начать создавать web -страницу?
C чего начать создавать web -страницу?
C чего начать создавать web -страницу?
C чего начать создавать web -страницу?
C чего начать создавать web -страницу?
Основы языка программирования.
Основные теги HTML.
Структура web -страницы.
Заголовки, атрибуты тэгов
Заголовки, атрибуты тэгов
Основы языка HTML
Форматирование текста
Основы языка HTML
Форматирование текста
1/21
Средняя оценка: 4.4/5 (всего оценок: 73)
Код скопирован в буфер обмена
Скачать (1941 Кб)
1

Первый слайд презентации: Основы языка HTML

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

Слайд 2: Что такое HTML?

HTML  (от англ.  HyperText Markup Language  — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине.

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

Слайд 3: Из истории развития HTML …

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли   приблизительно в 1986-1991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией.

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

Слайд 4: Основные понятия:

Тег, иногда  тэг, (от англ.  T ag)  — элемент языка разметки гипертекста. Инструкция браузеру, указывающая способ отображения текста. Более правильное название — дескриптор.

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

Слайд 5: Любой документ на языке HTML представляет собой набор элементов причем начало и конец каждого элемента обозначается специальными пометками тегами

ТЕГИ Одиночные (или непарные), то есть не содержащими никакого текста и других данных (например, тег перевода строки  < br > ) Парные, то есть нужно указать как открывающий тег (например, <HTML> ), так и закрывающий тег (например, </HTML> )

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

Слайд 6: Основные понятия:

Браузер – программа, которая служит для просмотра текстовых документов, содержащих разметку на языке HTML Google Chrome Mozilla Firefox Opera Internet Explorer

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

Слайд 7: C чего начать создавать web -страницу?

Шаг 1. Создать папку со своим именем на компьютере.

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

Слайд 8: C чего начать создавать web -страницу?

Шаг 2. В папке создать текстовый редактор блокнот.

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

Слайд 9: C чего начать создавать web -страницу?

Шаг 3. Открыть окно текстового редактора БЛОКНОТ. Нажать на вкладку файл- сохранить как…

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

Слайд 10: C чего начать создавать web -страницу?

Шаг 4. Указать имя файла например, index.htm. Установив в поле Тип файла «все файлы». После чего нажать сохранить

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

Слайд 11: C чего начать создавать web -страницу?

Шаг 5. Сохраненный документ отразиться в папке в форме значка браузера. Текстовый документ советую вам удалить

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

Слайд 12: C чего начать создавать web -страницу?

Шаг 6. Для того, чтобы начать работать над web -страницей необходимо сохраненный документ открыть с помощью… блокнота

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

Слайд 13: Основы языка программирования

Вид Web- страницы задается тэгами, которые заключаются в угловые скобки ( <…>). Тэги могут записываться как прописными, так и строчными буквами.

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

Слайд 14: Основные теги HTML

<ht ml > </ht ml > Начало и конец страницы < h ead > </ h ead > Описание страницы < t itle > </ t itle > Имя окна заголовка < body > </ body > Содержание страницы < B R> Переход на новую строку <big> </big> Укрупнение текста

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

Слайд 15: Структура web -страницы

Пусть файл index.htm, содержит такой HTML- код : < ht ml > < h ead > < t itle > Научное общество</ title > </ head > < body > Школьное научное общество учащихся «Альфа» </ body > </ html > При просмотре в браузере файл будет иметь следующий вид

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

Слайд 16: Заголовки, атрибуты тэгов

Заголовок по умолчанию всегда выровнен по левому краю страницы. Однако страница красиво смотрится, если заголовок размещен по центру. Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется придать определенное значение. ALIGN = “right” выравнивание по правому краю ALIGN = “center” выравнивание по центру ALIGN = “left” выравнивание по левому краю

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

Слайд 17: Заголовки, атрибуты тэгов

Задать правильно отцентровку вам помогут парный тег (или контейнер) <P> … </P>. С их помощью можно выделить не только заголовок, но и целый абзац. При этом для каждого абзаца можно задать определенный тип выравнивания. Заголовки, атрибуты тэгов

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

Слайд 18

Внесем изменения в наш текстовый документ: <html> <head> <title> Научное общество</ title> </head> <body> <p ALIGN=CENTER> Школьное научное общество учащихся «Альфа» </ P> </body> </html> При просмотре в браузере файл будет иметь следующий вид

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

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

Изменить начертание шрифта позволяют следующие тэги: <B> … </B> Жирный <I> … </I> Курсив <U> … </U> Подчеркнутый <B> <I> <U> … </U></I></B> Жирный подчеркнутый курсив <TT> … </TT> Равноширинный <EM> … </EM> Выделение <STRONG> … </STRONG> Усиленное выделение

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

Слайд 20

Дополним текстовый документ: <html> <head> <title> Научное общество</ title> </head> <body> <p ALIGN=CENTER> <TT> <B> <I> <U> Школьное научное общество учащихся «Альфа» </U> </I> </B> </TT> </ P> </body> </html>

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

Последний слайд презентации: Основы языка HTML: Форматирование текста

!!! Значение атрибута COLOR можно задать - либо значением цвета (например, “ red ”, “ green ”, “ blue ” и т. д.), - либо шестнадцатеричным его значением (найти таблицу цветов можно в интернете, например синий цвет задает “#0000FF” ) <FONT> </FONT> Задает размер текущего шрифта FACE Задает гарнитуру шрифта (например, FACE=“Arial”) SIZE задает размер шрифта (например, SIZE=4) COLOR задает цвет шрифта (например, COLOR=“blue”)

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