🗊Презентация Знакомство с языком 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
Описание слайда:
ОСНОВЫ HTML

Слайд 2


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

Слайд 3


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

Слайд 4


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

Слайд 5


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

Слайд 6


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

Слайд 7


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

Слайд 8


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

Слайд 9


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

Слайд 10


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

Слайд 11


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

Слайд 12


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

Слайд 13


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

Слайд 14


Структура HTML документа: Структура HTML документа: <html> <head> Невидимая часть </head> <body> Видимая часть </body> </html>
Описание слайда:
Структура HTML документа: Структура HTML документа: <html> <head> Невидимая часть </head> <body> Видимая часть </body> </html>

Слайд 15


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

Слайд 16


Любая страница должна иметь следующую структуру: Например: <html> <head> <title> Компьютер </title> </head> <body> Все о компьютере </body> </html>
Описание слайда:
Любая страница должна иметь следующую структуру: Например: <html> <head> <title> Компьютер </title> </head> <body> Все о компьютере </body> </html>

Слайд 17


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

Слайд 18


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

Слайд 19


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

Слайд 20


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

Слайд 21


Основные теги и их описание в HTML <html> Определяет документ HTML <body> Определяет основную часть или тело документа <h1> -- <h6> Определяет заголовки с 1 по 6 <p> Определяет параграф <br> Вставляет единичный перенос строки <hr> Определяет горизонтальную линейку <!--> Определяет комментарий
Описание слайда:
Основные теги и их описание в HTML <html> Определяет документ HTML <body> Определяет основную часть или тело документа <h1> -- <h6> Определяет заголовки с 1 по 6 <p> Определяет параграф <br> Вставляет единичный перенос строки <hr> Определяет горизонтальную линейку <!--> Определяет комментарий

Слайд 22


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

Слайд 23


Заголовки, атрибуты тэгов Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <H1 ALIGN="center"> Все о компьютере </H1> </body> </html>
Описание слайда:
Заголовки, атрибуты тэгов Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <H1 ALIGN="center"> Все о компьютере </H1> </body> </html>

Слайд 24


Форматирование текста Изменить начертание шрифта позволяют следующие тэги: <B> Жирный </B> <I> Курсив </I> <U> Подчеркнутый </U> <B> <I> <U> Жирный подчеркнутый курсив </U></I></B> <TT> Равноширинный </TT> <EM> Выделение </EM> <STRONG> Усиленное выделение </STRONG>
Описание слайда:
Форматирование текста Изменить начертание шрифта позволяют следующие тэги: <B> Жирный </B> <I> Курсив </I> <U> Подчеркнутый </U> <B> <I> <U> Жирный подчеркнутый курсив </U></I></B> <TT> Равноширинный </TT> <EM> Выделение </EM> <STRONG> Усиленное выделение </STRONG>

Слайд 25


Форматирование текста Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <H1 ALIGN="center"> Все о компьютере </H1> <B> Жирный </B> <I> Курсив </I> <U> Подчеркнутый </U> <B> <I> <U> Жирный подчеркнутый курсив </U></I></B> <TT> Равноширинный </TT> <EM> Выделение </EM> <STRONG> Усиленное выделение </STRONG> </body> </html>
Описание слайда:
Форматирование текста Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <H1 ALIGN="center"> Все о компьютере </H1> <B> Жирный </B> <I> Курсив </I> <U> Подчеркнутый </U> <B> <I> <U> Жирный подчеркнутый курсив </U></I></B> <TT> Равноширинный </TT> <EM> Выделение </EM> <STRONG> Усиленное выделение </STRONG> </body> </html>

Слайд 26


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

Слайд 27


Форматирование текста Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <FONT COLOR="blue"> <H1 ALIGN="center"> Все о компьютере </H1> </FONT> <HR> </body> </html>
Описание слайда:
Форматирование текста Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <FONT COLOR="blue"> <H1 ALIGN="center"> Все о компьютере </H1> </FONT> <HR> </body> </html>

Слайд 28


Форматирование текста Разделение текста на абзацы производится с помощью тэга <P> </P>. Например, поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием: <P ALIGN=“left”> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P> <P ALIGN=“right”> Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету. </P>
Описание слайда:
Форматирование текста Разделение текста на абзацы производится с помощью тэга <P> </P>. Например, поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием: <P ALIGN=“left”> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P> <P ALIGN=“right”> Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету. </P>

Слайд 29


Форматирование текста Текст кода:
Описание слайда:
Форматирование текста Текст кода:

Слайд 30


В браузере: В браузере:
Описание слайда:
В браузере: В браузере:

Слайд 31


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

Слайд 32


Текст кода: Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <FONT COLOR="blue"> <H1 ALIGN="center"> Все о компьютере </H1> </FONT> <HR> <IMG SRC="comp.jpg" > <P ALIGN="left"> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </p> <p ALIGN="right"> Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету. </p> </body> </html>
Описание слайда:
Текст кода: Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <FONT COLOR="blue"> <H1 ALIGN="center"> Все о компьютере </H1> </FONT> <HR> <IMG SRC="comp.jpg" > <P ALIGN="left"> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </p> <p ALIGN="right"> Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету. </p> </body> </html>

Слайд 33


Изображения Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла (включая путь к файлу). Например: <IMG SRC=“C:\computer\comp.jpg”> Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла. Например: <IMG SRC=“http://www.server.ru/comp.jpg”>
Описание слайда:
Изображения Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла (включая путь к файлу). Например: <IMG SRC=“C:\computer\comp.jpg”> Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла. Например: <IMG SRC=“http://www.server.ru/comp.jpg”>

Слайд 34


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

Слайд 35


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

Слайд 36


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

Слайд 37


Списки Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <H1 > Программное обеспечение </H1> <HR> <OL> <LI> Системные программы <LI> Прикладные программы <LI> Системы программирования </OL> </body> </html>
Описание слайда:
Списки Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <H1 > Программное обеспечение </H1> <HR> <OL> <LI> Системные программы <LI> Прикладные программы <LI> Системы программирования </OL> </body> </html>

Слайд 38


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

Слайд 39


Списки Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <H1 > Программное обеспечение </H1> <HR> <OL> <LI> Системные программы <LI> Прикладные программы <UL> <LI TYPE=“square”> текстовые редакторы; <LI> графические редакторы; <LI> электронные таблицы; <LI> системы управления базами данных. </UL> <LI> Системы программирования </OL> </body>
Описание слайда:
Списки Текст кода: <Html> <Head> <Title> Компьютер </title> </head> <body> <H1 > Программное обеспечение </H1> <HR> <OL> <LI> Системные программы <LI> Прикладные программы <UL> <LI TYPE=“square”> текстовые редакторы; <LI> графические редакторы; <LI> электронные таблицы; <LI> системы управления базами данных. </UL> <LI> Системы программирования </OL> </body>

Слайд 40


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

Слайд 41


Текст кода: Текст кода: <Html> <Head> <Title> Словарь </title> </head> <body> <H1 > Компьютерные термины </H1> <HR> <DL> <DT> Процессор <DD> Центральное устройство компьютера, производящее обработку информации в двоичном коде. <DT> Оперативная память <DD> Устройство, в котором хранятся программы и данные. </DL> </body> </html>
Описание слайда:
Текст кода: Текст кода: <Html> <Head> <Title> Словарь </title> </head> <body> <H1 > Компьютерные термины </H1> <HR> <DL> <DT> Процессор <DD> Центральное устройство компьютера, производящее обработку информации в двоичном коде. <DT> Оперативная память <DD> Устройство, в котором хранятся программы и данные. </DL> </body> </html>

Слайд 42


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

Слайд 43


Гиперссылки Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами (&nbsp): <P ALIGN=“center”> [Программы] &nbsp [Соварь] &nbsp [Комплектующие] &nbsp [Анкета] </P>
Описание слайда:
Гиперссылки Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами (&nbsp): <P ALIGN=“center”> [Программы] &nbsp [Соварь] &nbsp [Комплектующие] &nbsp [Анкета] </P>

Слайд 44


Гиперссылки <Html> <Head> <Title> Компьютер </title> </head> <body> <FONT COLOR="blue"> <H1 ALIGN="center"> Все о компьютере </H1> </FONT> <HR> <IMG SRC="comp.jpg" > <P ALIGN="left"> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </p> <p ALIGN="right"> Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету. </p> <P ALIGN=“center”> [Программы] &nbsp [Соварь] &nbsp [Комплектующие] &nbsp [Анкета] </P> </body> </html>
Описание слайда:
Гиперссылки <Html> <Head> <Title> Компьютер </title> </head> <body> <FONT COLOR="blue"> <H1 ALIGN="center"> Все о компьютере </H1> </FONT> <HR> <IMG SRC="comp.jpg" > <P ALIGN="left"> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </p> <p ALIGN="right"> Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету. </p> <P ALIGN=“center”> [Программы] &nbsp [Соварь] &nbsp [Комплектующие] &nbsp [Анкета] </P> </body> </html>

Слайд 45


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

Слайд 46


Гиперссылки Для каждой гиперссылки определим адрес перехода. Для этого используется тэг гиперссылки <A> </A> с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Тэг должен содержать указатель гиперссылки: <A HREF=“URL”> указатель гиперссылки </A> В код страницы следует внести изменения (добавить контейнеры для создания гиперссылок на страницы сайта): <P ALIGN=“center”> [<A HREF=“software.htm” > Программы </A>] &nbsp [<A HREF=“glossary.htm” > Словарь </A>] &nbsp [<A HREF=“hrdware.htm” > Комплетующие </A>] &nbsp [<A HREF=“anketa.htm” > Анкета </A>] </P>
Описание слайда:
Гиперссылки Для каждой гиперссылки определим адрес перехода. Для этого используется тэг гиперссылки <A> </A> с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете. Тэг должен содержать указатель гиперссылки: <A HREF=“URL”> указатель гиперссылки </A> В код страницы следует внести изменения (добавить контейнеры для создания гиперссылок на страницы сайта): <P ALIGN=“center”> [<A HREF=“software.htm” > Программы </A>] &nbsp [<A HREF=“glossary.htm” > Словарь </A>] &nbsp [<A HREF=“hrdware.htm” > Комплетующие </A>] &nbsp [<A HREF=“anketa.htm” > Анкета </A>] </P>

Слайд 47


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

Слайд 48


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

Слайд 49


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

Слайд 50


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

Слайд 51


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

Слайд 52


Цветовые схемы Например: Для оформления страницы о программном обеспечении можно использовать следующую цветовую схему: <BODY BGCOLOR=“#FFFFCC” BACKGROUND=“fon.png” TEXT=“#993300” LINK=“#00FF00” ALINK=“FF0000” VLINK=“#00FF00”>
Описание слайда:
Цветовые схемы Например: Для оформления страницы о программном обеспечении можно использовать следующую цветовую схему: <BODY BGCOLOR=“#FFFFCC” BACKGROUND=“fon.png” TEXT=“#993300” LINK=“#00FF00” ALINK=“FF0000” VLINK=“#00FF00”>

Слайд 53


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

Слайд 54


Цветовые схемы
Описание слайда:
Цветовые схемы

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию