Основы html. Форматирование - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Основы html. Форматирование. Доклад-сообщение содержит 27 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Учимся создавать HTML-документы

Слайд 2

Описание слайда:

Основы HTML Язык HTML (Hyper-Text Markup Language) - язык гипертекстовой разметки - основное средство создания страниц для Internet. Данные в формате HTML похожи на текстовой файл, за исключением того, что некоторые из символов интерпретируются как разметка. Разметка придает документу некую структуру. Достоинства HTML-документов: малый объем, возможность просмотра на компьютерах с различными операционными системами, интерактивность.

Слайд 3

Описание слайда:

Инструменты создания web-документа Текстовый редактор. Браузер для просмотра результатов. Валидатор — это программа для анализа HTML- кода Web страниц на наличие ошибок, согласно существующим стандартам. Графический редактор. Справочник по тегам HTML.

Слайд 4

Описание слайда:

Инструменты создания web-документа HTML-редакторы бывают двух видов: Кодовые редакторы. HTML-документ можно создавать в любом текстовом редакторе, например, в Блокноте. Однако, удобно, чтобы были следующие возможности: подсветка синтаксиса работа с несколькими документами. проверка текущего документа на ошибки. Визуальные редакторы. Наиболее популярным является Macromedia Dreamweaver, занимающий промежуточную позицию между кодовыми и визуальными редакторами. К тому же по нему достаточно много литературы на русском языке. Графический редактор необходим для обработки изображений и их подготовки для публикации на веб-странице. Самый популярный – Photoshop. Но в большинстве случаев мощь Photoshop-а избыточна. Программа Paint.Net позволяет сделать все необходимые манипуляции с изображениями, вдобавок бесплатна для использования. Браузер Браузер - программа, предназначенная для просмотра веб-страниц. Подойдет любой браузер. На сегодняшний день наибольшей популярностью пользуются три браузера: Firefox, Internet Explorer и Opera.

Слайд 5

Описание слайда:

Синтаксис HTML документа В HTML-документе есть две явные составляющие: сам текст, который пользователь видит на экране браузера, теги (англ.: tag-ярлычок, этикетка), которые определяют, как он выводится на экран, но остаются невидимыми для пользователя при просмотре документа. Все это в общем случае выглядит так: текст, к которому применяется этот тег Итак, тег состоит из следующих друг за другом в определенном порядке элементов: левой угловой скобки < (такого же, как "меньше чем" символа) имени тега, например title или pre атрибутов. Тег может быть без атрибутов или сопровождаться одним или несколькими атрибутами, например: align=center правой угловой скобки > (такой же, как символа "больше чем"). если тег является конечным тегом,то после знака < ставится слеш /, такой тег закрывает некоторую структуру. Таким образом Вы можете читать символ / , как конец. Пример: ,

Слайд 6

Описание слайда:

Начало html-документа Браузер загружает страницу и “считывает код” сверху вниз, слева направо. Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML !DOCTYPE, которая обычно выглядит так: : Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, т.к. HTML существует в нескольких версиях, кроме того, есть XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Слайд 7

Описание слайда:

Структура HTML-документа < HTML> ... - тэги показывают начало и окончание HTML документа ... - это тэг заголовка документа, содержит справочную информацию о странице, которая не отображается браузером. Например, здесь располагается контейнер ... - тэг названия страницы, который появится в строке названия в браузере. ... - эта пара тэгов указывает на начало и конец тела HTML-документа. В теле документа содержится ваша информация: текст, графические изображения, бегущие строки, звук и т.д., которая отображается на экране монитора.

Слайд 8

Описание слайда:

Пример простейшего web-документа Откройте Блокнот и запишите код: Изучение html Изучаем html Сохраните файл под именем firstweb.html Имена файлам будем давать строчными латинскими буквами Откройте браузер и загрузите туда ваш файл firstweb.html

Слайд 9

Описание слайда:

Продолжаем создавать страничку Добавим строчку в Блокноте Изучение html Изучаем html Начинаем писать текст Сохраним файл и обновим в браузере

Слайд 10

Описание слайда:

Правила применения тегов Атрибуты тегов и кавычки Согласно спецификации HTML все значения атрибутов тегов следует указывать в двойных ("пример") или одинарных кавычках ('пример'). Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы Теги можно писать как прописными, так и строчными символами Любые теги, а также их атрибуты нечувствительны к регистру, поэтому форму записи вы вольны выбирать сами, как писать — , или . В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. Переносы строк Внутри тега между его атрибутами допустимо ставить перенос строк. Однако рекомендуется писать теги в одну строку, иначе ухудшается восприятие кода и его становится сложнее править. Закрывающие теги Существует три состояния закрывающего тега: обязателен, не требуется или не обязателен. Обязательный закрывающий тег должен присутствовать всегда, иначе это приведет к ошибке при отображении документа. Для некоторых тегов (например ) закрывающего тега нет в принципе. Необязательный закрывающий тег говорит о том, что разработчик может его как добавить, так и опустить, к ошибке это не приведет. Однако рекомендуется закрывать все подобные теги, включая необязательные, это дисциплинирует, создает более стройный и строгий код, который легко модифицировать.

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

Комментарии Используется для создания комментариев в любой части документа. Все, что находится внутри – будь то элемент или текст – будет проигнорировано браузером (не будет обрабатываться и выводиться на экран). Пример: Заголовок документа Текст документа

Слайд 13

Описание слайда:

Теги абзаца и перевода строки Абзацы в html отделяются друг от друга пустой строкой (paragraf)– тег нового абзаца (парный) Атрибут ALIGN – позволяет изменить выравнивание абзаца. , где ?=left, right, center, justify -одиночный тэг образования новой строки без образования нового абзаца

Слайд 14

Описание слайда:

Использование заголовков В HTML есть шесть уровней заголовков …. - теги заголовков с заранее заданным форматированием - инструмент для структуризации документа. h1 - самый главный, h6 - самый мелкий. Для того, чтобы оформить текст заголовком следует поместить тэг перед и после текста, например: Заголовок самый главный В тело данного тега также можно добавить атрибут align: где ?=left, right, center, justify

Слайд 15

Описание слайда:

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

Слайд 16

Описание слайда:

Другие тэги разбиения текста на блоки CITE – цитата по тексту Используется для цитат, названий книг. Обычно наклонный текст Атрибуты: TITLE - всплывающая подсказка Пример: Это обычный текст А это уже текст с использованием тэга CITE BLOCKQUOTE – оформление цитаты Оформляет находящийся между начальным и конечным тегами текст как цитату. Используется для длинных цитат. Цитируемый текст отображается отдельным абзацем с увеличенным отступом. Пример: Все знают чудесные строки сонета Шекспира: Кто под звездой счастливою рожден, Гордится славой, титулом и властью. А я судьбой скромнее награжден, И для меня любовь – источник счастья. ... ADDRESS – оформление текста как почтового адреса Находящийся между начальным и конечным тегами текст оформляется как почтовый адрес. Чаще всего оформление выражается в выделении строки адреса курсивом. Пример: Пишите по следующему адресу: Харьков, ул. Лермонтовская, 27 ХГУ «НУА»

Слайд 17

Описание слайда:

Цветовое оформление странички Цветовая гамма HTML-документа определяется атрибутами, размещенными внутри тэга : bgcolor - (BackGround Color, фоновый цвет) - атрибут, который отвечает за цвет фона вашей странички. По умолчанию - белый. text - отвечает за основной цвет текста. По умолчанию - черный. Пример для задания желтого фона и синего текста: О задании цветов см. ссылку

Слайд 18

Описание слайда:

Основной шрифт текста на странице basefont – основной шрифт страницы Определяет основной шрифт, которым должен отображаться текст документа. Не имеет конечного тега. Впоследствии вы можете легко изменить шрифт в любой части документа (тэг ). Атрибуты тэга basefont: size – обязательный атрибут. Определяет базовый размер шрифта. Возможные значения: целые числа от 1 до 7 включительно. face – определяет используемый тип шрифта (гарнитуру).

Слайд 19

Описание слайда:

Задание размера, цвета и гарнитуры шрифта для отдельного фрагмента текста Изменить цвет, размер и тип шрифта отдельного фрагмента текста позволяет тэг …… Атрибуты этого тэга: size: определяет размер шрифта, целое число от 1 до 7; Принято считать, что размер "нормального" шрифта соответствует значению 3. Размер шрифта указывает как абсолютной величиной (SIZE=2), так и относительной (SIZE=+1). face: определяет гарнитуру шрифта. Можно указать как один, так и несколько названий шрифтов, разделяя их запятыми. Список шрифтов просматривается слева направо. Если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт и т.д. Если такого шрифта не будет найдено, то данное указание будет проигнорировано и будет использован шрифт, установленный по умолчанию. Совет: число различных шрифтов, используемых в одном документе, не должно превышать трех. color: определяет цвет текста. Задается либо RGB-значением в шестнадцатеричной системе, либо названием цвета (подробнее).

Слайд 20

Описание слайда:

Определение цветов Для задания цветов в соответствующих атрибутах различных тэгов, например, используются следующие два приема: Цвет задается просто названием на английском языке: - шрифт синего цвета; Цвет задается кодом, состоящим из шести знаков шестнадцатиричной системы исчисления: - шрифт красного цвета. При задании цвета с помощью шестнадцатиричного кода (т.е. с использованием цифр 0..9 и символов A,B,C,D,E,F) используется цветовая схема RGB, принцип которой состоит в представлении цветов с помощью трех составляющих – red (красный), green (зеленый), blue(синий). Для каждой составляющей отводится пара знаков, таким образом FF – означает наибольшее насыщение данного цвета, а 00 – наименьшее. Например, #FFFFFF - шестнадцатиричный код БЕЛОГО цвета, а #000000 - ЧЕРНОГО Для задания цветов используйте таблицу цветов или цветовую палитру

Слайд 21

Описание слайда:

Особенности расположения текста Любое количество пробелов идущих подряд, в браузере отображается как один Исключением из этого правила является тег , внутри которого любое число пробелов отображается именно так, как оно указано в коде. Нет расстановки переносов в тексте HTML не поддерживает расстановку переносов в словах как это делают текстовые редакторы Текст занимает ширину окна браузера Если вы просто напишите одну длинную строку в коде HTML, то в браузере она будет отформатирована, чтобы текст поместился по ширине в окно. Переносы текста будут добавлены автоматически в местах пробела или дефиса.

Слайд 22

Описание слайда:

Тэги начертания Жирное начертание применяется два тега: и . Жирное начертание шрифта Сильное выделение текста Курсивное начертание определяют два тега: и . Курсивное начертание шрифта Выделение текста

Слайд 23

Описание слайда:

Верхний и нижний индексы — верхний индекс и —нижний индекс. Текст, помещенный в один из этих контейнеров, обозначается меньшим размером, чем базовый текст и смещается относительно горизонтали.

Слайд 24

Описание слайда:

Специальные символы Браузер видит символы < или > как начало или конец тега и не показывает их. Встает вопрос как показать эти символы на экране? Для этих символов предусмотрено специальное кодирование. Код строится из символа "&" (амперсанд), фиксированного имени и завершающего символа ";". В общем это выглядит так: &имя; Например, для задания двух пробелов напишем & nbsp; & nbsp; Вот фиксированные имена некоторых символов:

Слайд 25

Описание слайда:

Нумерованный список Для создания нумерованного списка используется тег OL (Ordered List ) с необязательными атрибутами: Каждый новый элемент списка следует начинать с метки (List Item). Атрибут type задает тип списка: A устанавливает маркер в виде прописных букв (A, B, C ...) а устанавливает маркер в виде строчных букв (a, b, c ...) I устанавливает маркер в виде больших римских цифр (I, II, III ...) i устанавливает маркер в виде маленьких римских цифр (i, ii, iii ...) 1 устанавливает маркер в виде арабских цифр (1, 2, 3 ...) . Атрибут start устанавливает начальный маркер в текущем списке.

Слайд 26

Описание слайда:

Маркированный список Для создания маркированного списка используется тег UL (Unordered List ) с необязательным атрибутом: Атрибут type задает символ маркера circle - кружок (устанавливаемый по умолчанию), square - квадрат disk - закрашенный круг

Слайд 27

Описание слайда:

Список определений (терминологический список) Список определений начинается с тэга (Definition List) и завершается тэгом . Каждый термин начинается тэгом (Definition Term ), а описание - тэгом (Definition Description ). Например,