Инструкция браузеру указывающая способ отображения текста
Тег – это инструкция браузеру, указывающая способ отображения текста. Браузер – это программа, служащая для просмотра Web-документов (страниц в Internet).
Слайд 4 из презентации «Язык разметки гипертекста HTML»
«Язык разметки гипертекста HTML» - Типы веб-документов. Встраивание стилей непосредственно в теги страницы. Одиночные теги. Пример начала web-страницы. Санкт-Петербургский торгово-экономический институт. Сведения об авторе сайта. Язык разметки гипертекста HTML. Перечисление описаний стилей. Описание сайта. Способ внедрения таблицы стилей.
«Как вставить гиперссылку» - Что такое гиперссылка? Создание гиперссылок: ?в тексте; ? в презентации Скачивание гиперссылок со страницы в Интернет. Шаг 2. Скачивание гиперссылки. Шаг 1. В выпадающем меню выбрать элемент Копировать ярлык. Определение. План. Еще раз нажмите кнопку ОК. Вставить из буфера скопированную ссылку.(Правка – Вставить или CTRL – V).
«Основы HTML» - Общий вид документа html. <BR>Список определений <DL> <DT>Первый термин <DD>Первое определение <DT>Второй термин <DD>Второе определение </DL>. Кафедра МИОЭС Ст. преподаватель Гончаров Сергей Леонидович. РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ (пояснение). Интенсивность задается в виде двузначного шестнадцатеричного числа (от 00 до FF). атрибут COLOR=”НАЗВАНИЕ ЦВЕТА”.
«Язык разметки гипертекста» - Основы языка разметки гипертекста. Ширина таблицы. Таблица цветов. Строки. Вид на экране. Достоинства HTML. Вложенный список. Изображение. Урок. Таблицы. Ссылки с абсолютным адресом. Язык разметки гипертекста. Самостоятельная работа. Colspan. Виды тегов. PNG. Гипперссылка в виде изображения. Атрибуты.
«HTML страница» - Пример 2: кегль шрифта задается в пунктах <font size="12pt">. 2. Размер шрифта size (продолжение). Язык разметки гипертекста HTML Занятие 2. Пример 3: <h1>Архитектура Санкт-Петербурга</h1>. Заголовок должен быть коротким по тексту, но емким по содержанию. Шрифт. Одновременно теги <b> и <i> использовать не рекомендуется.
Презентация на тему: " Основы языка HTML: тэги, атрибуты тэгов, комментарии." — Транскрипт:
1 Основы языка HTML: тэги, атрибуты тэгов, комментарии
2 HTML-документ – это обычный текстовый документ, содержащий специальные р рр разметочные указатели (тэги). HTML-файл имеет расширение.htm или.html
3 ТЭГИ Тэг Тэг –инструкция браузеру, указывающая способ отображения текста.
4 Например: Тэг всегда начинается со знака «меньше» ( ) Например: ПРАВИЛА ЗАПИСИ ТЭГОВ
5 ТЭГИ ТЕГ одиночный парный(контейнер) открывающий открывающий закрывающий закрывающий
6 СТРУКТУРНЫЕ ТЭГИ …, Всё содержимое файла Интернет-страницы заключается в контейнер …, указывающий браузеру, что данный текст представляет собой HTML-документ и, возможно содержит в себе тэги, которые браузер должен выявить, распознать, интерпретировать. Типичная Интернет-страница (HEAD)(BODY) Типичная Интернет-страница состоит из двух частей: заголовка (HEAD) и тела (BODY).
7 СТРУКТУРНЫЕ ТЭГИ Эту базовую структуру в простейшем виде можно наглядно показать следующим образом: начало контейнера HTML-документа начало контейнера заголовка начало контейнера строки – названия страницы …строка названия страницы конец контейнера строки – названия страницы конец контейнера заголовка начало контейнера тела страницы …тело (всё содержимое) страницы конец контейнера тела страницы конец контейнера HTML-документа
8 Указанная вами строка-название будет выводиться в заголовке окна браузера, когда данная страничка будет в нём просматриваться, а также (уже после размещения страницы в Интернете) в списках, выдаваемых поисковыми серверами. СТРУКТУРНЫЕ ТЭГИ
9 КОММЕНТАРИИ - такой полутэг используется для добавления комментариев на страничке, т. е. для полезных пояснений, которые не показываются в браузере. Пример: Заголовок Подзаголовок
10 ПРИМЕР HTML-ДОКУМЕНТА Моя первая Интернет-страничка! Моя первая Интернет-страничка! Это моя первая проба сил в Web-дизайне. Может быть, страничка пока еще получилась не очень красивой, но ведь она работает.
Тема урока: Язык разметки гипертекстов HTML .
Цели урока:
Ø Познакомить с технологией работы браузера ( в нашем случае, Internet Explorer);
Ø Познакомить с языком разметки гипертекстов HTML ;
Ø Научить создавать Web -страницу.
Тип урока: изучение нового материала.
Вид урока: повторение, лекция.
Форма организации учебно-познавательной деятельности учащихся: фронтальная, индивидуальная.
Методы обучения:
Ø словесные: рассказ, объяснение;
Ø наглядные: методы иллюстрации;
Конспект урока .
Теоретическая часть.
HTML очень популярен, он давно перестал быть просто языком разметки гипертекста. Понятие HTML включает в себя различные способы оформления Web -страниц, дизайн, гипертекстовые редакторы, браузеры и многое другое. Человек, изучивший этот язык, обретает возможным делать сложные вещи простыми способами и, главное, быстро, а это в компьютерном мире значит не так уж мало. HTML является основой в Интеренете. Все, что обсуждается на страницах интернетовских журналов в сети, связано с языком разметки гипертекста.
Документы, хранящиеся на WWW ( World Wide Web ), подготавливаются на специальном языке – HTML (HyperText Markup Language) – язык разметки гипертекстов. В HTML текст может быть создан и отредактирован в любом текстовом редакторе. Мы будем создавать текст в блокноте.
Для просмотра HTML страницы существуют специальные программы браузеры. Они предоставляют нам в удобном, читаемом для нас виде, текст и другие элементы HTML страницы. Браузер преобразует html-код в понятный нам текст и картинки и в зависимости от написанных в коде тегов и стилей предоставляет нам материал в каком-то конкретном виде. Браузеры бывают разные и, т.к. компании, которые создают эти программы имеют некоторые свободы, то документ (сайт) в разных браузерах будет отображаться по-разному.
Одним из браузеров – программ для просмотра документов WWW- серверов – является Internet Explorer (также как Mozilla Firefox, Opera , Google Chrome и т.д.).
После того, как с помощью языка HTML будет создан HTML- файл (документ, созданный в виде гипертекста на основе языка HTML ), с помощью браузера Internet Explorer можно отобразить этот файл в виде web- документа. HTML- файл имеет расширение . HTML( или . HTM ).
Рассмотрим работу с программой Internet Explorer.
1. В Windows запустить приложение Internet Explorer.
2. В раскрывшемся главном окне браузера основную часть рабочей области экрана составляет web - страница.
3. Рассмотрим окно браузера
Ø поле заголовка содержит название загружаемой страницы.
Ø Строка состояния отображает ход загрузки данных или состояние работы браузера. Она располагается в нижней части главного окна.
Ø Строка адрес – содержит полный адрес загружаемого документа. URL (Uniform Recoure Location) – базовый адрес документа в сети (местонахождение документа в сети).
Ø Панель инструментов находится ниже строки основного меню и включает часть используемых команд.
Приступим к изучению языка разметки гипертекста HTML .
Язык HTML состоит из специальных разметочных указателей (флаги разметки) или теги.
Тег - инструкция браузеру, указывающая способ отображения текста. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте web-страницы теги заключаются в угловые скобки. Тег всегда начинается со знака меньше и заканчивается знаком больше. Существуют стартовые и конечные теги. Конечный тег всегда с косой чертой. Пример: стартовый - <>, конечный- </>.
Структура web -страницы.
Простейший правильный документ HTML :
<TITLE> Заголовок документа </TITLE>
Этот текст можно прочитать на экране
Основные элементы HTML (теги).
Ø <HTML> </html>. Принцип языка – многоуровневое вложение документов. HTML является самым внешним, т.к. между его стартовыми и конечными тегами находится web- страница.
Ø <HEAD> </head>. Область заголовка web- страницы, ее первая часть. Служит только для формирования общей структуры документа.
Ø <TITLE> </title>. Определяет название страницы, которое будет выведено в строке заголовка браузера.
Ø <Style> </style>. Описание стиля некоторых элементов web- страницы.
Ø <BODY> </body>. Заключает в себе гипертекст, который определяет собственно web- страницу. Эта та часть документа, которую разрабатывает автор страницы и которая отображается браузером. Внутри BODY можно использовать все документы, предназначенные для дизайна web- страницы.
Ø <H1> </h1>. Элемент заголовка. Существует 6 уровней заголовков.
Ø <HR>. Горизонтальная линия – очень часто используемый элемент. С ее помощью очень удобно делить страницу на части. Элемент не имеет конечного тега.
Ø <BASE>. Элемент для установки базового адреса (URL) для ссылок. Это позволяет опускать их начальную часть.
Ø < P >. Тег параграфа, отделяет абзацы друг от друга, ставится в конце абзаца.
Стартовый, конечный тег и информация, заключенная в этих тегах называются контейнер.
Теперь создадим HTML -файл. (Приложение 1). Откройте Блокнот (ПУСК – Программы – Стандартные - Блокнот). Перепишите в текстовый редактор текст из Приложения 1. Желательно текст html -документа записывать в таком виде, в котором он дан в Приложении 1, так будет удобнее искать ошибки, если мы их допустим. Теперь нужно правильно сохранить нашу страницу: по умолчанию Блокнот сохраняет документ в формате txt , поэтому нам при сохранении нужно «насильственно» задать нужное расширение . html . Набираем название файла с расширением, например, list . html и нажимаем кнопку Сохранить. Теперь наш файл имеет иконку того браузера, который установлен на вашем компьютере. Запускаем сохраненный файл двойным щелчком мыши и видим, что открывается браузер, который содержит текст, находящийся в контейнерах заголовка< H 1> и < H 2>. Текст, заключенный в контейнер < H 1> является самым крупным, < H 2> - поменьше:
Меня зовут ФИО.
Я учусь в № классе
МОУ "Гимназия №140"
Обратите внимание, что текст Моя первая Web -страница находится в строке заголовка браузера.
Инструкция браузеру, указывающая способ отображения текста
-Текст, в котором используются спецсимволы
-Указатель на другой файл или объект
-Фрагмент программы, включённой в состав Web-страницы
2. Какие тэги указывают браузеру, что это HTML документ?
-<body></body>
-<title></title>
-<p></p>
-<html></html>
3. Инструкция браузеру, указывающая способ отображения текста
-Программный код
-Тэг
-Файл
-Кегль
4. Программа для создания Web-страницы с использованием языка HTML:
-MS Word
-Paint
-Калькулятор
-Блокнот
5. Web-страница (документ HTML) представляет собой
-Текстовый файл с расширением txt или doc
-Текстовый файл с расширением htm или html
-Двоичный файл с расширением com или exe
-Графический файл с расширением gif или jpg
6. Программа для просмотра гипертекстовых страниц называется
-Сервер
-Протокол
-HTML
-Браузер
7. Способ организации информации на Web-сервере называется:
-Файлом
-Гиперссылкой
-Web-сайтом
-Мультимедиа
8. Гипертекст - это:
-Текст очень большого размера
-Текст, в котором используется шрифт большого размера
-Структурированный текст, где возможны переходы по выделенным меткам
-Текст, в который вставлены объекты с большим объемом информации
9. Гиперссылки на Web-странице могут обеспечить переход
-только в пределах данной web-страницы
-только на web-страницы данного сервера
-на любую web-страницу данного региона
-на любую web-страницу любого сервера Интернет
10. С помощью какого языка создаются веб страницы
-языка разметки гипертекста HTML
-языка программирования
-Pascal
-Quanta Plus
- язык программирования Basiс
-язык скриптов Java
11. Для создания веб страниц используются:
- простой текстовый редактор Блокнот
-графический редактор
- текстовый редактор
-электронные таблицы
12. Как называются команды языка HTML
- тэги
-операторы
-атрибуты
-слова
13. Какие визуальные веб редакторы вам известны
-Блокнот
-Ms WORD
-Quanta Plus
14. Тэги могут записываться как прописными, так и строчными буквами
-да
-нет
15. Какая пара тэгов называется контейнером?
-парные тэги
-одинаргын теги
16. Какой символ содержит парный тег
-символ слэш /
-символ скобка
- символ !
-символ точка
17. Внутри какого контейнера размещается код страницы
-<HTML> </HTML>
-<BODY> </BODY>
-<HEAD> </HEAD>
-<TITLE> </TITLE>
18. Внутри какого контейнера размещается название страницы
-<HTML> </HTML>
-<BODY> </BODY>
-<HEAD> </HEAD>
-<TITLE> </TITLE>
19. Внутри какого контейнера размещается отображаемое в браузере содержание страницы
-<HTML> </HTML>
-<BODY> </BODY>
-<HEAD> </HEAD>
-<TITLE> </TITLE>
20. Какой тег (контейнер) используется для изменения размера шрифта заголовка
21. Какой тег (контейнер) используется для разделения текста на абзацы
Читайте также: