Язык разметки гипертекста HTML

Содержание

Слайд 2

Язык разметки гипертекста HTML С его помощью создают Web – страницу.

Язык разметки гипертекста HTML
С его помощью создают Web – страницу.
HTML (аббревиатура

английских слов HyperText Markup Language).
HTML был разработан для того, чтобы подготавливая Web – страницу не надо было думать о различии в программном и аппаратном обеспечении компьютеров, на которых эта страница будет просматриваться.
[‘ma:k’∆p]
Слайд 3

Сэр Тимоти Джон Бернерс-Ли; род. 8 июня 1955) — британский) —

Сэр Тимоти Джон Бернерс-Ли; род. 8 июня 1955) — британский) — британский учёный,

изобретатель URI) — британский учёный, изобретатель URI, URL) — британский учёный, изобретатель URI, URL, HTTP) — британский учёный, изобретатель URI, URL, HTTP, HTML) — британский учёный, изобретатель URI, URL, HTTP, HTML, изобретатель Всемирной паутины) — британский учёный, изобретатель URI, URL, HTTP, HTML, изобретатель Всемирной паутины (совместно с Робертом Кайо) и действующий глава Консорциума Всемирной паутины.
Автор множества других разработок в области информационных технологий.
Слайд 4

В 1978 году проработал в Европейской лаборатории по ядерным исследованиям ЦЕРНВ

В 1978 году проработал в Европейской лаборатории по ядерным исследованиям ЦЕРНВ

1978 году проработал в Европейской лаборатории по ядерным исследованиям ЦЕРН (ЖеневаВ 1978 году проработал в Европейской лаборатории по ядерным исследованиям ЦЕРН (Женева, Швейцария) консультантом по программному обеспечению.
Именно там он для собственных нужд написал программу «Энквайр» (англ. «Enquire», можно вольно перевести как «Дознаватель»), и заложил концептуальную основу для Всемирной паутины.
В 1989 году, работая в CERN над внутренней системой обмена документов ENQUIRE, Бернерс-Ли предложил глобальный гипертекстовый проект, ныне известный как Всемирная паутина. Проект был утверждён и реализован.
Слайд 5

Web – страницы, написанные на HTML, просматриваются с помощью специальных программ,

Web – страницы, написанные на HTML, просматриваются с помощью специальных программ,

которые наз браузерами.
Основная задача браузера – по запросу пользователя найти требуемый документ в интернете и без искажений отобразить его.
Internet Explorer – браузер, встроенный в операционную систему Windows.
Браузер Netscape Navigator – в начале в www захватил лидерство.
Слайд 6

Браузерные войны В середине 1990-х годов основные производители браузеров – компании

Браузерные войны
В середине 1990-х годов основные производители браузеров – компании Netscape

и Microsoft начали внедрять собственные наборы элементов в HTML разметку.
Создалась путаница из различных конструкций для работы во всемирной паутине, доступных для просмотра то в одном, то в другом браузере.
Благодаря усилиям производителей других браузеров, которые следовали стандартамW3Cможно констатировать рост популярности браузеров Mozilla Firefox, Google Chrome, Opera и другие.
При этом Internet Explorer сохраняет свои позиции.
Слайд 7

Тэг обозначает начало действия какой-либо инструкции отображения. Большинство тэгов парные, и

Тэг обозначает начало действия какой-либо инструкции отображения. Большинство тэгов парные, и

второй тег отменяет действие первого.
Если эта инструкция применяется ко всему документу, то такой тэг не имеет своего закрывающего двойника.
Некоторые теги обладают параметрами, которые уточняют правила отображения содержимого. Параметры могут указываться только в открывающем тэге.
Слайд 8

Основные тэги (теги) HTML, которые должны присутствовать в тексте любой Вэб-страницы:

Основные тэги (теги) HTML, которые должны присутствовать в тексте любой Вэб-страницы:
,

располагаемый в самом начале.
Этот тэг (тег) описывает ваш документ как Вэб-страницу, выполненную в формате HTML.
За ним следует тэг (тег) , который указывает на наличие текста, содержащего наименование страницы и дополнительные сведения о ней.
В раздел HEAD обычно вложен тэг (тег) , служащий для обозначения наименования страницы. Наименования страниц обычно отображаются в строке заголовка окна браузера. <br>Затем следует тэг (тег) <BODY>, который указывает на начало собственно "тела" Веб-страницы. <br>В этом разделе размещаются все элементы содержимого страницы.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide9" class="slides-item"><!--[--><div class="text-center"><span class="slides-headingUnit">Слайд 9</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1366139/slide-8.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Пример: Online обучение: HTML Текст сайта http://on-line-teaching.com/html/lsn002.html зеленый цвет фона картинка" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1366139/slide-8.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1366139/slide-8.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1366139/slide-8.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1366139/slide-8.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Пример:<br><html> <br><head><br> <title>Online обучение: HTML

Текст сайта


http://on-line-teaching.com/html/lsn002.html

bgcolor=bleak> зеленый цвет фона
картинка фон, текст страницы красный

background=’’Путь к файлу фона’’
Текст Текст будет двигаться поперек экрана
Слайд 10

Тэги символов: задает полужирное начертание символов - курсивные символы - заставляет

Тэги символов:

задает полужирное начертание символов
- курсивные символы

- заставляет браузер подчеркивать текст, расположенный между ними
перечеркнутый текст
Слайд 11

Шрифтовое оформление текста. Атрибуты тега font В любом месте текста можно

Шрифтовое оформление текста.
Атрибуты тега font

В любом месте текста можно

использовать тэг с набором параметров, которые и будут определять внешний вид шрифта, находящегося после этого тэга. Прекращение действия тэга задается тэгом .
Параметры тэга :
size – размер применяемого шрифта
color – цвет символов шрифта
face – гарнитура (рисунок шрифта)
Слайд 12

пятый размер Для установки зеленого цвета символов шрифта используется конструкция: или Пример: оливковый Пример:

пятый размер


Для установки зеленого цвета символов шрифта используется конструкция:

color="green"> или

Пример:
оливковый
Пример:

Слайд 13

Оформление текста Чтобы разбить текст на абзацы, в начале каждого абзаца

Оформление текста

Чтобы разбить текст на абзацы, в начале каждого абзаца ставится

тэг

, а в конце – закрывающий тэг

.
Параметр выравнивания align, который может прижимать абзац к левому или правому краю окна просмотра браузера, центровать его или растягивать слова равномерно по ширине. Для этого исп значения – left, right, center, justify
Слайд 14

Пример 1 Горизонтальное выравнивание абзаца Абзац, прижатый к левому краю Абзац

Пример 1


Горизонтальное выравнивание абзаца


Абзац, прижатый

к левому краю


Абзац прижатый к парвому краю


Центрированный абзац




Слайд 15

Слайд 16

Линия вставляется в текст HTML – документа с помощью тэга .

Линия вставляется в текст HTML – документа с помощью тэга

.


Параметр align задает горизонтальное выравнивание линии.
Он может принимать значения – left, right и center,
которые прижимают горизонтальную линию к левому или правому краю окна просмотра, или центрируют ее, соответственно.
Параметр width устанавливает длину горизонтальной линии. По умолчанию используется 100%. Высота линии в пикселах задается с помощью параметра size.
Слайд 17

ЛИНИИ Это обычная линия, отображаемая по умолчанию Это укороченная линия, прижатая



ЛИНИИ


Это обычная линия, отображаемая по умолчанию


Это укороченная линия, прижатая

влево


Это укороченная линия, по центру


Это укороченная линия, прижатая вправо




Пример 2.

Слайд 18

Графика Браузеры в состоянии отображать только три вида графических файлов: файлы

Графика

Браузеры в состоянии отображать только три вида графических файлов: файлы форматов

GIF, JPEG и PNG.
Для внедрения графического файла в состав Web – страницы исп тэг
Этот тэг не имеет закрывающего двойника.
Основным и обязательным атрибутом тэга является параметр src.
В качестве значения этого атрибута используется адрес вставляемого графического файла и его наименование.
Слайд 19

На сегодняшний день формат GIF (Graphics Interchange Format) – самый основной

На сегодняшний день формат GIF (Graphics Interchange Format) – самый основной

в Internet.
Обусловлено это тем, что файлы картинок, сохраненные в формате GIF очень компактны. GIF плотно сжимает графический файл. При этом на качестве самой картинки подобное сжатие практически не отражается.
Этот формат позволяет определять в исходной картинке прозрачные цвета, т.е. части картинки при ее просмотре в обозревателе становятся невидимыми.
GIF позволяет сохранять анимированные изображения.
У конкурента GIF – формата JPEG имеется только одно очевидное преимущество: JPEG способен работать не только с 256 цветами, а с полноцветными картинками с 16 миллионами цветов.
Количество цветов GIF от 2 до 256.
Итак GIF – рисунки, JPEG – фотографии.
Слайд 20

Рисунки в тексте Это текст, который обтекает рисунок. Другой текст и



Рисунки в тексте


Это текст, который обтекает рисунок.

src="ris/animat/J0189207.gif">
Другой текст и он тоже обтекает этот рисунок.




Пример 3

Слайд 21

Слайд 22

Размеры рисунка задают при помощи параметров height и width. Тэг для

Размеры рисунка задают при помощи параметров height и width.
Тэг для

размещения рис 30% от родительского:

Для выравнивания графического объекта относительно обтекающего его текста используется параметр align.
Значения bottom, middle и top применяют для позиционирования первой строки текста, обтекающего рисунок по вертикали.
Значение top смещает ее вверх, bottom – вниз, middle – центрует строку по вертикали.
Слайд 23

Пример 3. Рисунки в тексте Это рояль. Старинный клавишный нструмент. Если

Пример 3.

Рисунки в тексте

Это рояль.


Старинный

клавишный нструмент.


Если поднять крышку рояля,

то звук станет громче,

колоритнее, богаче обертонами.



Слайд 24

Задание 1. Вставка графики, списки.

Задание 1. Вставка графики, списки.

Слайд 25

Примеры тэгов 1. 2. Основной текст 4.

Примеры тэгов
1.
2.

Основной текст



4.
Слайд 26

Таблицы – важнейшая форма организации информации, располагающейся на Web – страницах.

Таблицы – важнейшая форма организации информации, располагающейся на Web – страницах.
Это

единственное средство некоей верстки страниц.
В HTML не встроены средства точного позиционирования элементов оформления Web – страниц, поэтому таблицы пришлись как нельзя кстати.
Их можно распространить на всю страницу, и уже в ячейках таблиц размещать элементы оформления Web – страниц.
В HTML таблица разбивается на строки, а те, в свою очередь, на ячейки.
Явного объекта, обозначающего столбец таблицы нет. Количество столбцов рассчитывается браузером на основе анализа строк таблицы, а затем уже отображается вся таблица целиком.
Слайд 27

Таблица находится между тэгами и . Тэг имеет много параметров. задает

Таблица находится между тэгами

и
.
Тэг имеет много параметров.
задает строку таблицы
ограничивает столбец
указывает ширину границы таблицы.
Параметр cellspacing определяет размер в пикселах между отдельными ячейками страницы,
cellpadding – размер отступа содержимого ячейки от ее границы,
align задает горизонтальное выравнивание таблицы (left, center, right).
Слайд 28

это обычный текст. 1 2 3 4 5 6



это обычный текст.










Слайд 29

Параметры табличных тэгов: bgcolor = gray закрасить ячейку в заданный (серый)цвет

Параметры табличных тэгов:
bgcolor = gray закрасить ячейку в заданный (серый)цвет silver

(серебристый)
colspan (= 2 количество ячеек, объединяемых по горизонтали)
rowspan (= 2 сколько строк по вертикали объединены)

Чтобы объединить 2 строки:


Чтобы объединить 2 столбца:


Слайд 30

- Предыдущая
Графика в Java, создание анимации. Основы алгоритмизации. (Урок 5) Виды алгоритмов
Следующая -
Начало работы с C#. (Модуль 1)

Похожие презентации

Полное построение алгоритма. Часть 1. Задача коммивояжера
Домашников Борис Федорович 1924 - 2003
Электропитание устройств и систем телекоммуникации. Инверторы
Боги Древнего Египта
Принтеры
ВИЧ-инфекция. Парэнтеральные гепатиты
Trade
Особенности поражения АОХВ с преимущественного цитотоксическим действием
Орифлэйм - построй жизнь, которой ты будешь гордиться
Пятиклассник. Первые шаги. Школы начальной ты выпускник! В тайны наук самых первых проник. Много трудов у тебя позади - Больше их б
Общаться с ребенком. Как?
Состояние вещества, типы связи
Электротехника в школе
Декоративно-прикладное творчество. Хохломская роспись
СЛОВО 9 КЛ
Правовое регулирование инновационной деятельности в РК
Строки. Пример использования С и С++
Физическое воспитание
День конституции РФ
Презентация "Энергетика одна из важнейших отраслей экономики" - скачать презентации по Экономике
ТОКСИКОЛОГИЯ
Рождество и введение во храм Пресвятой Богородицы
ОСНОВНЫЕ КОНЦЕПЦИИ СОВРЕМЕННОЙ НАУКИ Подготовили: Доценко Юлия Тс01/1301 Опутина Анна Тс01/1301
БАЗЫ ДАННЫХ. ACCESS 2007 Запросы
Этапы развития квантовой механики.
Глава 2. Экономика домохозяйства 12. Рынок труда
Создай свою Игру и получи поток ВИП-Клиентов
Русская культура VI-XIII
Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть
123
456
КоличествоИтого