Презентация, доклад на тему Урок 1. Вводный. Язык разметки HTML

Содержание

Как браузер получает веб-страницы? Каждый раз, открывая браузер, вы попадаете на веб-сайт, который может состоять из одной или множества веб-страниц с различной информацией. Основной технологией создания таких веб-страниц является язык HTML.HTML (от англ. HyperText Markup Language

Слайд 1Язык разметки HTML
В создании презентации использованы контент сайта puzzleweb.ru

Язык разметки HTMLВ создании презентации использованы контент сайта puzzleweb.ru

Слайд 2Как браузер получает веб-страницы?
Каждый раз, открывая браузер, вы попадаете на веб-сайт,

который может состоять из одной или множества веб-страниц с различной информацией. Основной технологией создания таких веб-страниц является язык HTML.
HTML (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.
Как браузер получает веб-страницы? Каждый раз, открывая браузер, вы попадаете на веб-сайт, который может состоять из одной

Слайд 3Как браузер получает веб-страницы?
Для общего понимания давайте рассмотрим небольшую теорию о

том, как браузер получает веб-страницы и что такое веб-сервер. Чтобы получить веб-страницу, нужно создать файл, написанный на языке HTML, и поместить его на веб-сервер. После того как вы поместили созданный файл на веб-сервер, любой браузер сможет через интернет отыскать вашу веб-страницу.
Веб-сервер - это обычный компьютер с доступом в интернет, который непрерывно работает и ожидает запросов от браузеров. Любой сервер хранит веб-страницы, картинки, аудиофайлы и файлы других типов. Когда сервер получает запрос от браузера на какой-нибудь ресурс (изображения, веб-страницы и др.), он находит этот ресурс (если может определить местоположение ресурса) и отправляет его браузеру.
Как браузер получает веб-страницы? Для общего понимания давайте рассмотрим небольшую теорию о том, как браузер получает веб-страницы

Слайд 5Вы уже знаете, как работает браузер: вы бродите по различным сайтам

в интернете, кликая по ссылкам для перехода на различные страницы. Такой клик служит поводом для того, чтобы ваш браузер сделал запрос на HTML-страницу веб-серверу, получил ответ на свой запрос и отобразил эту страницу в своем окне.
Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начинает работать язык HTML. Он говорит браузеру все о содержании и структуре страницы. Если вы выполните свою работу хорошо (код будет написан корректно и без ошибок), то ваши страницы будут одинаково отображаться во всех браузерах.
Вы уже знаете, как работает браузер: вы бродите по различным сайтам в интернете, кликая по ссылкам для

Слайд 6Примечание:
Браузер (от англ. Web browser - Веб-обозреватель) - программное обеспечение,

используемое для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети - интернета), их обработки, вывода в окне браузера и перехода от одной страницы к другой. К наиболее популярным браузерам относятся: Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera.
Обратите внимание: во время обучения вам не придется выкладывать никакие страницы на веб-сервер, все прекрасно будет работать и на вашем локальном компьютере.
Примечание: Браузер (от англ. Web browser - Веб-обозреватель) - программное обеспечение, используемое для просмотра веб-сайтов, то есть

Слайд 7Язык разметки HTML
HTML - это язык для описания структуры веб-страниц. Страницы,

созданные с его помощью, могут быть просмотрены только при помощи специальных программ (браузеров), установленных на компьютерах пользователей.
Аббревиатура HTML расшифровывается как Hyper Text Markup Language (язык разметки гипертекста).
Запомните, он не является языком программирования, это язык разметки.
HTML использует теги разметки, чтобы описать структуру веб-страницы.
Язык разметки HTMLHTML - это язык для описания структуры веб-страниц. Страницы, созданные с его помощью, могут быть

Слайд 8Теги
HTML теги - это ключевые слова или символы, заключенные в угловые

скобки, например ,

,

и т.д. Теги бывают двух видов: парные и одиночные (их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например:

текст

. Символ "/" после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например:
. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами:

означает то же самое, что и

. Теги определяют, где начинается и где заканчивается, HTML-элемент.

Теги HTML теги - это ключевые слова или символы, заключенные в угловые скобки, например , , и

Слайд 9Теги
С помощью тегов браузер распознает структуру и значение вашего текста, например,

они сообщают браузеру, какая часть текста является заголовком, где начинается новый абзац, что нужно подчеркнуть и где расположить изображение (картинку). Получив эту информацию, браузер использует встроенные в него по умолчанию правила о том, как отображать каждый из этих элементов.
Без использования HTML тегов браузер выведет просто сплошной поток текста, без отступов, заголовков, абзацев и т.д. Чтобы стало понятнее, рассмотрим это подробнее на примерах.
Теги С помощью тегов браузер распознает структуру и значение вашего текста, например, они сообщают браузеру, какая часть

Слайд 10



Летнее меню


Летнее меню

Слайд 11 Напитки в нашем кафе
Мультифрукт - 100р.

Фруктовый напиток, содержащий апельсиновый и ананасовый соки.


Молочный коктейль - 150р.


Сливочное мороженое, перемешанное с мякотью фруктов.




Напитки в нашем кафе   Мультифрукт - 100р.  Фруктовый напиток, содержащий апельсиновый и

Слайд 13Напитки в нашем кафе

Мультифрукт - 100р.
Фруктовый напиток, содержащий апельсиновый и

ананасовый соки.

Молочный коктейль - 150р.
Сливочное мороженое, перемешанное с мякотью фруктов.
Напитки в нашем кафе Мультифрукт - 100р.Фруктовый напиток, содержащий апельсиновый и ананасовый соки. Молочный коктейль - 150р.Сливочное

Слайд 15HTML: Элементы

HTML: Элементы

Слайд 16Синтаксис HTML элементов
Элемент HTML - это основная структурная единица веб-страницы, написанная

на языке HTML.
Синтаксис HTML элементов, состоящих из парных тегов:



Элемент начинается с открывающего тега.
Элемент заканчивается закрывающим тегом.
Содержимым элемента является все, что находится между открывающим и закрывающим тегами.

Синтаксис HTML элементов Элемент HTML - это основная структурная единица веб-страницы, написанная на языке HTML.Синтаксис HTML элементов,

Слайд 17Синтаксис HTML элементов, состоящих из одиночных тегов:
Элемент состоит только из открывающего

тега.
Элементы, состоящие из одиночных тегов называются пустыми. Всего в HTML 10 таких элементов:
Синтаксис HTML элементов, состоящих из одиночных тегов:Элемент состоит только из открывающего тега.Элементы, состоящие из одиночных тегов называются

Слайд 18Вложенные элементы
HTML элементы, состоящие из парных тегов, могут либо содержать в

себе любые другие элементы, либо сами могут быть вложены в другие элементы, при этом глубина вложенности элементов не ограничена.
Следующий пример состоит из трех элементов, два из которых вложенные:


Мой первый абзац




В этом примере элемент

вложен в элемент , который, в свою очередь, вложен в элемент .

Вложенные элементыHTML элементы, состоящие из парных тегов, могут либо содержать в себе любые другие элементы, либо сами

Слайд 19Вложенные элементы
Когда один элемент располагается внутри другого, нужно следить за тем,

чтобы вложенный элемент начинался и заканчивался внутри одного и того же элемента. Так, например, следующий код является неверным:

Это очень

интересно
Здесь элемент выходит за пределы элемента

:

Вложенные элементыКогда один элемент располагается внутри другого, нужно следить за тем, чтобы вложенный элемент начинался и заканчивался

Слайд 20Вложенные элементы
Пример с правильной вложенностью:
Это очень интересно
Здесь элемент правильно вложен

- он находится полностью в элементе

:

Вложенные элементыПример с правильной вложенностью:Это очень интересноЗдесь элемент правильно вложен - он находится полностью в элементе :

Слайд 21Пробельные символы
Браузер игнорирует пробельные символы в HTML-коде, поэтому их можно использовать

с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пример кода, в котором используются пробельные символы:
Пробельные символы Браузер игнорирует пробельные символы в HTML-коде, поэтому их можно использовать с пользой для себя, придавая

Слайд 22Пробельные символы


Заголовок


Мой первый заголовок

Мой первый абзац




Пробельные символы    Заголовок    Мой первый заголовок  Мой первый абзац

Слайд 23Пробельные символы
Код примера можно было бы написать и вовсе без использования

пробельных символов, но такой код будет менее удобен для чтения:
Заголовок

Мой первый заголовок

Мой первый абзац


Поскольку код HTML-документа со временем становится больше и усложняется, становится видно, что использование пробельных символов действительно улучшает читабельность кода.
Пробельные символыКод примера можно было бы написать и вовсе без использования пробельных символов, но такой код будет

Слайд 24HTML: Атрибуты элементов

HTML: Атрибуты элементов

Слайд 25HTML элементы могут иметь атрибуты. Атрибуты предназначены для добавления дополнительной информации

об элементе и/или для изменения его стандартного поведения. Атрибуты всегда указываются внутри открывающего тега. В большинстве случаев атрибуты являются необязательными и указываются только при необходимости. Один элемент никогда не должен содержать в себе два и более атрибутов, имеющих одинаковое имя. Синтаксис элемента с атрибутом:


HTML элементы могут иметь атрибуты. Атрибуты предназначены для добавления дополнительной информации об элементе и/или для изменения его

Слайд 26Атрибуты состоят из пары: имя_атрибута="значение". Имена атрибутов не чувствительны к регистру

символов и могут быть записаны с любым сочетанием строчных и заглавных букв. Значение атрибута может состоять из текста, цифр и других символов (единственным исключением является символ амперсанда (&), его использование запрещено)..
Атрибуты состоят из пары: имя_атрибута=

Слайд 27Дополнительные ограничения на использование различных символов в значении атрибута зависят от

способа записи значения. При указании нескольких атрибутов в одном элементе, они должны быть отделены друг от друга символом пробела. Порядок следования атрибутов не имеет значения
Дополнительные ограничения на использование различных символов в значении атрибута зависят от способа записи значения. При указании нескольких

Слайд 28содержимое

атрибута -->

содержимое


Атрибуты могут быть записаны четырьмя различными способами:
содержимое содержимоеАтрибуты могут быть записаны четырьмя различными способами:

Слайд 29Пустой атрибут
Атрибуты, значения которых совпадают с именем атрибута называют булевыми или

пустыми. Для атрибутов булева типа поддерживается синтаксис, при котором явное указание значения атрибута можно опустить, написав только его имя, в этом случае значением будет являться неявно указанная пустая строка:

Само присутствие в элементе булева атрибута представляет собой значение true (истина), а отсутствие этого атрибута - значение false (ложь). Если таковой атрибут присутствует, его значением может быть либо пустая строка, либо значение должно совпадать с именем атрибута.
Пустой атрибутАтрибуты, значения которых совпадают с именем атрибута называют булевыми или пустыми. Для атрибутов булева типа поддерживается

Слайд 30Пустой атрибут


disabled="">

Пустой атрибут

Слайд 31Атрибут со значением без кавычек
Синтаксис с опущенными кавычками вокруг значения атрибута

подразумевает, что за именем атрибута, после знака "=", будет следовать значение атрибута, которое не должно содержать символов пробела, двойных кавычек ("), апострофов (') и других видов кавычек, символов "=", угловых скобок (< и >), помимо этого, значение не должно являться пустой строкой.

Атрибут со значением без кавычек Синтаксис с опущенными кавычками вокруг значения атрибута подразумевает, что за именем атрибута,

Слайд 32Атрибут со значением в одиночных кавычках (апострофах)
Значение атрибута, взятое в одиночные

кавычки, не должно содержать символы апострофов ('), но допускается содержание двойных кавычек (").

Атрибут со значением в одиночных кавычках (апострофах) Значение атрибута, взятое в одиночные кавычки, не должно содержать символы

Слайд 33Атрибут со значением в двойных кавычках

Значение атрибута, окруженное двойными кавычками, может

содержать любые символы, включая апострофы ('), кроме двойных кавычек (").1

Примечание: один элемент никогда не должен содержать в себе два и более атрибутов, имеющих одинаковое имя.
Атрибут со значением в двойных кавычках Значение атрибута, окруженное двойными кавычками, может содержать любые символы, включая апострофы

Что такое shareslide.ru?

Это сайт презентаций, где можно хранить и обмениваться своими презентациями, докладами, проектами, шаблонами в формате PowerPoint с другими пользователями. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами.


Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть