Знакомство с языком HTML. Cоздание сайтов - презентация, доклад, проект скачать

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

Знакомство с языком HTML. Cоздание сайтов, слайд №1

Знакомство с языком HTML. Cоздание сайтов, слайд №2

Знакомство с языком HTML. Cоздание сайтов, слайд №3

Знакомство с языком HTML. Cоздание сайтов, слайд №4

Знакомство с языком HTML. Cоздание сайтов, слайд №5

Знакомство с языком HTML. Cоздание сайтов, слайд №6

Знакомство с языком HTML. Cоздание сайтов, слайд №7

Знакомство с языком HTML. Cоздание сайтов, слайд №8

Знакомство с языком HTML. Cоздание сайтов, слайд №9

Знакомство с языком HTML. Cоздание сайтов, слайд №10

Знакомство с языком HTML. Cоздание сайтов, слайд №11

Знакомство с языком HTML. Cоздание сайтов, слайд №12

Знакомство с языком HTML. Cоздание сайтов, слайд №13

Знакомство с языком HTML. Cоздание сайтов, слайд №14

Знакомство с языком HTML. Cоздание сайтов, слайд №15

Знакомство с языком HTML. Cоздание сайтов, слайд №16

Знакомство с языком HTML. Cоздание сайтов, слайд №17

Знакомство с языком HTML. Cоздание сайтов, слайд №18

Знакомство с языком HTML. Cоздание сайтов, слайд №19

Знакомство с языком HTML. Cоздание сайтов, слайд №20

Знакомство с языком HTML. Cоздание сайтов, слайд №21

Знакомство с языком HTML. Cоздание сайтов, слайд №22

Знакомство с языком HTML. Cоздание сайтов, слайд №23

Знакомство с языком HTML. Cоздание сайтов, слайд №24

Знакомство с языком HTML. Cоздание сайтов, слайд №25

Знакомство с языком HTML. Cоздание сайтов, слайд №26

Знакомство с языком HTML. Cоздание сайтов, слайд №27

Знакомство с языком HTML. Cоздание сайтов, слайд №28

Знакомство с языком HTML. Cоздание сайтов, слайд №29

Знакомство с языком HTML. Cоздание сайтов, слайд №30

Знакомство с языком HTML. Cоздание сайтов, слайд №31

Знакомство с языком HTML. Cоздание сайтов, слайд №32

Знакомство с языком HTML. Cоздание сайтов, слайд №33

Знакомство с языком HTML. Cоздание сайтов, слайд №34

Знакомство с языком HTML. Cоздание сайтов, слайд №35

Знакомство с языком HTML. Cоздание сайтов, слайд №36

Знакомство с языком HTML. Cоздание сайтов, слайд №37

Знакомство с языком HTML. Cоздание сайтов, слайд №38

Знакомство с языком HTML. Cоздание сайтов, слайд №39

Знакомство с языком HTML. Cоздание сайтов, слайд №40

Знакомство с языком HTML. Cоздание сайтов, слайд №41

Знакомство с языком HTML. Cоздание сайтов, слайд №42

Знакомство с языком HTML. Cоздание сайтов, слайд №43

Знакомство с языком HTML. Cоздание сайтов, слайд №44

Знакомство с языком HTML. Cоздание сайтов, слайд №45

Знакомство с языком HTML. Cоздание сайтов, слайд №46

Знакомство с языком HTML. Cоздание сайтов, слайд №47

Знакомство с языком HTML. Cоздание сайтов, слайд №48

Знакомство с языком HTML. Cоздание сайтов, слайд №49

Знакомство с языком HTML. Cоздание сайтов, слайд №50

Знакомство с языком HTML. Cоздание сайтов, слайд №51

Знакомство с языком HTML. Cоздание сайтов, слайд №52

Знакомство с языком HTML. Cоздание сайтов, слайд №53

Знакомство с языком HTML. Cоздание сайтов, слайд №54

Содержание ▲

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

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

Слайд 1

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

ОСНОВЫ HTML

Слайд 2

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

Знакомство с языком HTML H -Hyper T -Text M-Markup L -Language HTML– язык гипертекстовой разметки документов.

Слайд 3

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

Знакомство с языком HTML Гипертекст – это электронный документ, который содержит гиперссылки на другие документы. Гипертекстовый документ предназначен для вывода информации на экран компьютера. Гипертекстовая технология – это технология, базирующаяся на использовании гипертекстовых документов. Ее применяют для организации доступа к информации в WWW, т.е. при работе с WEB-документами. WEB-документ – это текст, написанный на языке HTML или другом, который предназначен для просмотра электронной информации на экране компьютера с помощью программы-браузера.

Слайд 4

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

Слайд 5

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

Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах, что обеспечивает возможность пользователю свободно перемещаться по сайту. Такие гиперссылки называют системой навигации сайта.

Слайд 6

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

Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую и видеоинформацию. Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую и видеоинформацию.

Слайд 7

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

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

Слайд 8

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

Основными достоинствами HTML-документов являются: Малый информационный объем; Возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.

Слайд 9

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

Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение БЛОКНОТ.

Слайд 10

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

Создание Web-страницы Открыть окно текстового редактора БЛОКНОТ; Набрать HTML-код страницы; Сохранить под именем index.htm (обязательно титульная страница сайта называется этим именем), установив в поле Тип файла «все файлы»;

Слайд 11

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

Запустить браузер и открыть созданный файл командой [Файл – открыть] (или двойным щелчком левой кнопки мыши непосредственно по значку файла). В заголовке окна браузера высвечивается название Web-страницы (текст, записанный в тэге ) Запустить браузер и открыть созданный файл командой [Файл – открыть] (или двойным щелчком левой кнопки мыши непосредственно по значку файла). В заголовке окна браузера высвечивается название Web-страницы (текст, записанный в тэге ) Для корректной работы сайта все объекты, используемые в нем (файлы, рисунки и т.д.), должны храниться в одной папке с файлом index.htm. Обычно для сайта создают отдельную папку.

Слайд 12

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

Структура Web-страницы Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (такая пара тэгов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением.

Слайд 13

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

Каждая html страница начинается тегом начала страницы Каждая html страница начинается тегом начала страницы и заканчивается тегом её закрытия . HTML страница состоит из двух частей: Невидимой части (… ) – в ней расположены заголовок и другие объекты. Видимая часть (…) – в которой расположены непосредственно элементы веб страницы: абзацы, таблицы, рисунки и т.д.

Слайд 14

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

Структура HTML документа: Структура HTML документа: Невидимая часть Видимая часть

Слайд 15

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

Структура Web-страницы HTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для её правильного отображения. Название Web-страницы содержится в контейнере и отображается в строке заголовка браузера при просмотре страницы. Основное содержание страницы помещается в контейнер и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и т.д.

Слайд 16

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

Любая страница должна иметь следующую структуру: Например: Компьютер Все о компьютере

Слайд 17

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

Структура Web-страницы Пусть файл index.htm, содержит такой HTML-код: Компьютер Все о компьютере

Слайд 18

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

Структура Web-страницы Во время отображения страницы в браузере разработчик не может вносить никакие изменения в существующую страницу. Для редактирования страницы её нужно открыть в приложении БЛОКНОТ, используя контекстное меню (вызывается правой кнопкой мыши)

Слайд 19

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

Заголовки Размер шрифта для имеющихся в тексте заголовков задается тэгами от (самый крупный) до (самый мелкий). Все указанные тэги парные. Заголовок страницы целесообразно выделять самым крупным шрифтом Все о компьютере Заголовок желательно отделять от основного содержания страницы горизонтальной линией с помощью одиночного тэга

Слайд 20

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

Заголовки При просмотре файла в браузере окно примет следующий вид:

Слайд 21

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

Основные теги и их описание в HTML Определяет документ HTML Определяет основную часть или тело документа -- Определяет заголовки с 1 по 6 Определяет параграф Вставляет единичный перенос строки Определяет горизонтальную линейку Определяет комментарий

Слайд 22

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

Заголовки, атрибуты тэгов Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется придать определенное значение. ALIGN=“right” – выравнивание по правому краю ALIGN=“center” – выравнивание по центру ALIGN=“left” – выравнивание по левому краю

Слайд 23

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

Заголовки, атрибуты тэгов Текст кода: Компьютер Все о компьютере

Слайд 24

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

Форматирование текста Изменить начертание шрифта позволяют следующие тэги: Жирный Курсив Подчеркнутый Жирный подчеркнутый курсив Равноширинный Выделение Усиленное выделение

Слайд 25

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

Форматирование текста Текст кода: Компьютер Все о компьютере Жирный Курсив Подчеркнутый Жирный подчеркнутый курсив Равноширинный Выделение Усиленное выделение

Слайд 26

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

Форматирование текста Для выделения фрагментов текста используется тэг Этот тэг имеет следующие атрибуты: FACE – задает гарнитуру шрифта (например, FACE=“Arial”) SIZE – задает размер шрифта (например, SIZE=4) COLOR – задает цвет шрифта (например, COLOR=“blue”). Значение атрибута COLOR можно задать либо значением цвета (например, “red”, “green”, “blue” и тд.), либо шестнадцатеричным его значением, которое использует RGB-формат “#RRGGBB”.

Слайд 27

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

Форматирование текста Текст кода: Компьютер Все о компьютере

Слайд 28

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

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

Слайд 29

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

Форматирование текста Текст кода:

Слайд 30

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

В браузере: В браузере:

Слайд 31

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

Изображения Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG, PNG. Для вставки изображения используется одиночный тэг с атрибутом SRC, который указывает место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:

Слайд 32

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

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

Слайд 33

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

Изображения Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла (включая путь к файлу). Например: Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла. Например:

Слайд 34

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

Изображения Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст. Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:

Слайд 35

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

Списки Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах: Нумерованные списки, когда элементы списка идентифицируются с помощью чисел; Маркированные списки (в HTML их принято называть ненумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров); Списки определений позволяют составлять перечни определений в так называемой словарной форме. Возможно создание и вложенных списков

Слайд 36

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

Списки Нумерованный список создается тэгом , а каждый элемент списка определяется тэгом . Например: Системные программы Прикладные программы Системы программирования

Слайд 37

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

Списки Текст кода: Компьютер Программное обеспечение Системные программы Прикладные программы Системы программирования

Слайд 38

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

Списки Ненумерованный список задается тэгом , а каждый элемент списка определяется также тэгом . С помощью атрибута TYPE тэга можно задать вид маркера списка: “disc” (диск), “square” (квадрат) или “circle” (окружность). Например: текстовые редакторы; графические редакторы; электронные таблицы; системы управления базами данных.

Слайд 39

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

Списки Текст кода: Компьютер Программное обеспечение Системные программы Прикладные программы текстовые редакторы; графические редакторы; электронные таблицы; системы управления базами данных. Системы программирования

Слайд 40

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

Списки Список терминов создается с помощью контейнера определений . Внутри него текст оформляется в виде термина, который определяется непарным тэгом , и определения, которое следует за тэгом . Например: Процессор Центральное устройство компьютера, производящее обработку информации в двоичном коде. Оперативная память Устройство, в котором хранятся программы и данные.

Слайд 41

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

Текст кода: Текст кода: Словарь Компьютерные термины Процессор Центральное устройство компьютера, производящее обработку информации в двоичном коде. Оперативная память Устройство, в котором хранятся программы и данные.

Слайд 42

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

Гиперссылки Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы (создана панель навигации). Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо сначала создать заготовки Web-страниц. Такие «пустые» страницы должны иметь заголовок, а содержание пока можно пропустить. Все создаваемые страницы необходимо сохранить в виде файлов с расширением HTM в папке сайта.

Слайд 43

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

Гиперссылки Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ): [Программы] [Соварь] [Комплектующие] [Анкета]

Слайд 44

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

Гиперссылки Компьютер Все о компьютере На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету. [Программы] [Соварь] [Комплектующие] [Анкета]

Слайд 45

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

Слайд 46

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

Гиперссылки Для каждой гиперссылки определим адрес перехода. Для этого используется тэг гиперссылки с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Тэг должен содержать указатель гиперссылки: указатель гиперссылки В код страницы следует внести изменения (добавить контейнеры для создания гиперссылок на страницы сайта): [ Программы ] [ Словарь ] [ Комплетующие ] [ Анкета ]

Слайд 47

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

Слайд 48

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

Гиперссылки Используя различные значения атрибута HREF, получают различные реакции браузера: Ссылка на Web-страницу локального компьютера: Куранты , где clock.htm – имя Web-страницы, КУРАНТЫ – указатель ссылки Ссылка на Web-страницу, размещенную в Интернете: Cайт о Москве , где – URL-адрес страницы в Интернете, САЙТ О МОСКВЕ – указатель ссылки Вставка изображения: Башня , где spassk.jpg – имя файла, содержащего изображение, БАШНЯ – указатель ссылки Запуск проигрывателя звукового файла Бой часов , где strike.wav – имя звукового файла И другие.

Слайд 49

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

Гиперссылки В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга Обычно на Web-страницах размещают изображения небольших размеров в целях экономии времени загрузки страницы. Предусмотреть получение крупной копии имеющегося изображения можно с помощью тэга: , где width=“30” height=“75” – размеры изображения на Web-странице

Слайд 50

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

Цветовые схемы Цвет на Web-странице задают либо его названием, либо числовым шестиразрядным шестнадцатеричным кодом #RRGGBB, где две первые цифры задают интенсивность красного цвета (red), средние две цифры – интенсивность зеленого (green), и последние две цифры – интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается 16-ричным числом 00, а максимальная – FF. Легко догадаться, что синий цвет задает “#0000FF”. В таблице приведены значения некоторых цветов:

Слайд 51

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

Цветовые схемы Основную цветовую схему Web-страницы можно задать в тэге с помощью атрибутов: Цвет фона : BGCOLOR=“#RRGGBB” Текстура фона : BACKGROUND=“file_name” Цвет текста : TEXT=“#RRGGBB” Цвет текста ссылки : LINK=“#RRGGBB” Цвет текста активной ссылки: ALINK=“#RRGGBB” Цвет текста просмотренной ссылки : VLINK=“#RRGGBB”