Скачать презентацию
Идет загрузка презентации. Пожалуйста, подождите
Презентация была опубликована 8 лет назад пользователемРоман Щербов
1 «Язык разметки гипертекста HTML» Учитель информатики Репях Галина Николаевна БОУ г. Омска «СОШ 30»
2 Что понадобится нам для обучения? Браузер и Блокнот(или аналогичный простой редактор) - вот всё, что вам необходимо для работы
3 3 термина используемые по ходу обучения Тег – оформленная единица HTML-кода или попросту команда. Например,,,, и так далее. Все тэги имеют одинаковый формат: они начинаются знаком " ". Обычно имеются два тэга – открывающий и закрывающий. Различие в том, что в закрывающем имеется слэш "/".
4 3 термина используемые по ходу обучения Атрибут –это своего рода дополнительная информация. Атрибуты всегда записываются внутри тега, затем следует знак равенства и детали атрибута, заключённые в двойные кавычки.
5 3 термина используемые по ходу обучения Элемент – понятие, введенное чисто для удобства объяснения. Например, элемент HEAD состоит из двух тегов – открывающего и закрывающего. Таким образом. Элемент – более общее понятие, обозначающее пару тегов и участок документа между тегами, на который распространяется их влияние.
6 Структура web- документа. Вставка комментария.
7 Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML, которая обычно выглядит примерно так: В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии Не пытайтесь запомнить эту строчку наизусть, главное - вы должны знать, что она необходима. Ведь именно она помогает сделать сайт, который будет одинаково смотреться во всех браузерах(обычно это три основных Internet Explorer,Opera, Firefox).
8 Далее обозначается начало и конец документа тегами и соответственно. Внутри этих тегов должны находиться теги головы ( ) и тела документа( ). Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п. А основное содержимое: текст,таблицы,картинки, - находится в теле документа.
9 и начало и конец документа и теги головы и теги тела
10 Структура веб-документа
11 Как вы видите голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот). Сначала закрываем голову документа, и лишь затем открываем тело. И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.
12 Пару слов про голову документа Ну во-первых это название документа - элемент TITLE. У этого элемента обязательный закрывающий тег. Это очень важный элемент. Информация из элемента TITLE показывается в окне браузера(вверху слева), и поэтому это очень важный и информативный элемент для посетителей сайта. Во-вторых это описание страницы сайта META NAME. Первые символов видны при поиске в гугле поэтому оно тоже очень важно
13 Голова сайта школы 30 сайт школы 30
14 Вставка комментария: Очень полезным при создании сайтов является вставка комментария. Почему? да потому, что через месяц после создания, вам будет трудновато разобраться что к чему, ведь кода будет очень много. А если вы будете комментировать свои действия - тогда разобраться будет значительно легче! Примеры
15 Создаем свою первую страничку
16 ШАГ 1:Создайте на своем компьютере папку с названием вашего будущего сайта ШАГ 2:Зайдите в созданную на предыдущем шаге папку и создайте внутри нее текстовый документ. ШАГ 3:Теперь напишите в Блокноте текст простейшей странички
17 Текст простейшей странички Это моя первая страничка! Ура!!!! Я создал свою первую страницу на html!!!
18 ШАГ 4: Теперь сохраните ваш документ как "index.html" (расширение ".html" указывает, что это HTML-документ. ".htm" даст тот же результат. Это не имеет значения). Для этого в меню Файл выберите Сохранить Как
19 ШАГ 5: Теперь если вы запустите получившийся файл index.htm увидите примерно следующее:
20 Это моя первая страничка! Ура!!!! Я создал свою первую страницу на html!!!
21 Для того, чтобы внести изменения в страничку, Вам нужно открыть данный файл через обычный блокнот, внести в него изменения, сохранить их и после этого обновить вашу страничку в браузере.
22 Работаем с текстом
23 На этом уроке мы подробнее остановимся на свойствах текста, научимся выделять абзацы, заголовки и т.д.
24 Основными элементами форматирования текста в html являются: P Используется для разбивания текста на параграфы P - H1,H2,...H6 Применяются для создания заголовков 1,2...6 уровнейH1,H2,...H6 - BR Используетcя для переноса строкиBR - DIV, SPAN Используются для выделения части документа определенным способом.DIVSPAN
25 Атрибуты: ALIGN - определяет способ горизонтального выравнивания параграфа. Возможные значения: Left по левому краю Center по центру Right по правому краю Justify по ширине. По умолчанию имеет значение left.
26 P - используется для разметки параграфов в html документах. Этот параграф по центру Этот по левому краю Этот тоже по левому (т.к. по умолчанию) Этот по правому краю В этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю
27 Примечание: следите чтобы содержимое в кавычках было написано без пробелов, т.е. а не иначе не будет работать!
28 H1,H2,...H6 - Применяются для разбивания текста на смысловые уровни - разделы и подразделы. Существует шесть уровней заголовков, различающихся по величине шрифта. Атрибуты: ALIGN - определяет способ горизонтального выравнивания заголовков. Возможные значения: left, center, right.По умолчанию - left.
29 Большой заголовок Заголовок поменьше Еще меньше Совсем маленький Малюсенький заголовочек Ну просто лилипутский заголовочек
30 BR - данный элемент осуществляет перенос строки. Не имеет закрывающего тега. Начинается первая строка теперь идет вторая а вот уже и третья А это параграф и внутри него тоже можно использовать тег переноса строки.Его надо использовать всегда, когда надо перенести строку:)
31 Чтобы придать тексту ту или иную гарнитуру в html используются такие элементы: - STRONG Используется для выделения текста жирнымSTRONG - EM Используется для выделения текста курсивомEM - U Выделение текста подчеркиваниемU - S Перечеркивание текстаS - SUP Создание верхнего индексаSUP - SUB Создание нижнего индексаSUB - FONT Изменение цвета, типа, размера шрифта - FONT - HR Вставляет в текст горизонтальную разделительную линиюHR
32 Пример Вниманиe акция! новая цена рублей!
33 Пример 2 2 = 4 ; 2 3 = 8 ; 2 4 = 16 ;
34 FONT - Позволяет изменять цвет, размер и тип шрифта текста, находящегося между открывающим и закрывающим тегами.
35 Атрибуты: SIZE - Определяет размер шрифта. Возможные значение - 1, 2, 3, 4, 5, 6, 7. COLOR - Определяет цвет текста. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. FACE - определяет используемый шрифт. Используйте Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Иначе гарантий нет!
36 Пример Это обычный текст Увеличенный красный шрифт Моноширинный фиолетовый текст 3 размера Если написано SIZE="+2" то это означает увеличить на 2 единицы шрифт по сравнению со стандартным. Обычно стандартный размер шрифта равен 3.
37 HR- служит для вставки в текст горизонтальной линии. Закрывающего тега нет! Атрибуты: WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE – толщина линии в пикселах. ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left – выравнивание по левому краю документа. right – выравнивание по правому краю документа. center – выравнивание по центру документа (используется по умолчанию). NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной. COLOR – задает цвет линии. Можно использовать либо RGB-значение в шестнадцатеричной системе, либо один из 16 базовых цветов. Атрибут работает только в Internet Explorer.
38 Пример Текст до линии После линии А вот пример линии толщиной 2px и без флага noshade
39 Списки - UL Создает неупорядоченный списокUL - OL Создает упорядоченный список OL - LI Создает пункты списка внутри элементов OL или ULLI
40 UL (Unsorted List) - Создает неупорядоченный список. Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.LI
41 Пример Первый пункт списка Второй пункт списка Третий пункт списка Четвертый пункт списка
42 OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.LI
43 Атрибуты: START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа). Если не указывать, начинается с начала. TYPE – определяет стиль нумерации пунктов списка. Возможные значения: "A" – заглавные буквы A, B, C... "a" – строчные буквы a, b, c... "I" – большие римские числа I, II, III... "i" – маленькие римские числа i, ii, iii... "1" – арабские числа 1, 2, 3...
44 Пример !-- пример списка с арабскими числами --> Чтобы создать сайт на домашнем компьютере необходимо: Выучить html Выучить css Ознакомиться с php Чтобы создавать сайты быстро желательно: знания программы Adobe Dreamweaver знания программы TOpStylePro Знания Photoshop Чтобы зарабатывать на сайте желательно: наличие хорошей посещаемости наличие цифрового продукта для продажи наличие блоков рекламы Чтобы стать успешным в интернете: писать информацию полезную для людей постоянно пополнять сайт новым содержимым первый пункт придумай сам
45 LI (List Item) - Создает пункт в списке. Располагается внутри элементов OL или UL.OLUL. Атрибуты: VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
46 Пример Чтобы создать сайт на домашнем компьютере необходимо: Выучить html Выучить css Ознакомиться с php
47 html ссылки
48 Создать html ссылку очень просто. Для этого используется простенький элемент с одним атрибутом. текст, при нажатии на который осуществляется переход
49 Пример Это ссылка на сайт zvirec.com будет выглядеть в браузере: Это ссылка на сайт zvirec.com
50 Пример Новости, объявления Правила поведения учащихся в школе     План общешкольных дел и мероприятий     Расписание звонков     Здесь Вам помогут!       Куда сообщить о случившемся?
51 А можно сделать ссылку на почту? Написать письмо в школу 30 В браузере будет выглядеть: Написать письмо в школу 30
52 Работа с изображениями
53 Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся что к чему. Есть три типа файлов изображений, которые можно вставить на ваши страницы
54 Три типа файлов изображений, которые можно вставить на веб-страницы GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)
55 Тег для вставки изображения
56 Пример Поздравляем!!!
57 Цвет фона и текста
58 BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. BGCOLOR – определяет цвет фона документа. TEXT – определяет цвет текста в документе. Все они прописываются для элемента BODY. Значения цветов задаются либо RGB- значением в шестнадцатеричной системе, либо одним из 16 базовых цветов.
59 Кодирование цвета в HTML
60 Пример Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный В этом абзаце текст будет зеленый, потому что мы заключили его в теги font и придали соответсвующий цвет Теперь текст снова будет красный
61 Пример 2 Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный Теперь тут тоже красное и только эти слова зеленые Тут как вы поняли текст тоже красный
62 Таблицы в html
63 Html таблицы - полезная штука. Обычно их используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом.
64 Классический пример табличной структуры страницы
66 Элементы таблицы TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Здесь есть атрибут BORDER который задает толщину рамки таблицы в пикселах. TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен. TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.
67 Пример ряд 1 ячейка 1 ряд 1 ячейка 2 ряд 2 ячейка 1 ряд 2 ячейка 2
68 Как можно объединить ячейки COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1. ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
69 Пример 1
70 Пример 2
71 Атрибуты CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом. CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек таблицы html. WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.
72 Атрибуты ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию – left. VALIGN – должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы.Возможные значения: top, bottom, middle.(прижать к верху, прижать к низу,и установить посередине). BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатеричной системе, либо одним из 16 базовых цветов. BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
73 Пример Если картинка меньше чем ячейка, то она будет дублироваться, как показано в примере. Если больше - то будет отображаться та часть которая влезет :).
74 Средняя общеобразовательная школа 30 города Омска. Добро пожаловать!!!
Еще похожие презентации в нашем архиве:
© 2024 MyShared Inc.
All rights reserved.