Презентация Знакомство с языком HTML. Cоздание сайтов онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Знакомство с языком HTML. Cоздание сайтов абсолютно бесплатно. Урок-презентация на эту тему содержит всего 54 слайда. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Презентации » Устройства и комплектующие » Знакомство с языком HTML. Cоздание сайтов
Оцените!
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:54 слайда
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:939.42 kB
- Просмотров:137
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№3 слайд
![Знакомство с языком HTML](/documents_6/d297954a6fe5344c65d982e27c3b5275/img2.jpg)
Содержание слайда: Знакомство с языком HTML
Гипертекст – это электронный документ, который содержит гиперссылки на другие документы.
Гипертекстовый документ предназначен для вывода информации на экран компьютера.
Гипертекстовая технология – это технология, базирующаяся на использовании гипертекстовых документов. Ее применяют для организации доступа к информации в WWW, т.е. при работе с WEB-документами.
WEB-документ – это текст, написанный на языке HTML или другом, который предназначен для просмотра электронной информации на экране компьютера с помощью программы-браузера.
№5 слайд
![Обычно сайт имеет титульную](/documents_6/d297954a6fe5344c65d982e27c3b5275/img4.jpg)
Содержание слайда: Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы).
Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы).
Гиперссылки также имеются на других Web-страницах, что обеспечивает возможность пользователю свободно перемещаться по сайту.
Такие гиперссылки называют системой навигации сайта.
№7 слайд
![Создание Web-сайтов](/documents_6/d297954a6fe5344c65d982e27c3b5275/img6.jpg)
Содержание слайда: Создание Web-сайтов реализуется
- с использованием языка разметки гипертекстовых документов HTML.
Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу.
Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.
№11 слайд
![Запустить браузер и открыть](/documents_6/d297954a6fe5344c65d982e27c3b5275/img10.jpg)
Содержание слайда: Запустить браузер и открыть созданный файл командой [Файл – открыть] (или двойным щелчком левой кнопки мыши непосредственно по значку файла). В заголовке окна браузера высвечивается название Web-страницы (текст, записанный в тэге <title></title>)
Запустить браузер и открыть созданный файл командой [Файл – открыть] (или двойным щелчком левой кнопки мыши непосредственно по значку файла). В заголовке окна браузера высвечивается название Web-страницы (текст, записанный в тэге <title></title>)
Для корректной работы сайта все объекты, используемые в нем (файлы, рисунки и т.д.), должны храниться в одной папке с файлом index.htm. Обычно для сайта создают отдельную папку.
№12 слайд
![Структура Web-страницы Вид](/documents_6/d297954a6fe5344c65d982e27c3b5275/img11.jpg)
Содержание слайда: Структура Web-страницы
Вид Web-страницы задается тэгами, которые заключаются в угловые скобки.
Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (такая пара тэгов называется контейнером).
Закрывающий тэг содержит прямой слэш (/) перед обозначением.
№13 слайд
![Каждая html страница](/documents_6/d297954a6fe5344c65d982e27c3b5275/img12.jpg)
Содержание слайда: Каждая html страница начинается тегом начала страницы
Каждая html страница начинается тегом начала страницы
<html>
и заканчивается тегом её закрытия
</html>.
HTML страница состоит из двух частей:
Невидимой части (<head>…</head> ) – в ней расположены заголовок и другие объекты.
Видимая часть (<body>…</body>) – в которой расположены непосредственно элементы веб страницы: абзацы, таблицы, рисунки и т.д.
№15 слайд
![Структура Web-страницы](/documents_6/d297954a6fe5344c65d982e27c3b5275/img14.jpg)
Содержание слайда: Структура Web-страницы
HTML-код страницы помещается внутрь контейнера <html> </html>.
Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать.
Заголовок Web-страницы заключается в контейнер <head> </head> и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для её правильного отображения.
Название Web-страницы содержится в контейнере <title> </title> и отображается в строке заголовка браузера при просмотре страницы.
Основное содержание страницы помещается в контейнер <body> </body> и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и т.д.
№19 слайд
![Заголовки Размер шрифта для](/documents_6/d297954a6fe5344c65d982e27c3b5275/img18.jpg)
Содержание слайда: Заголовки
Размер шрифта для имеющихся в тексте заголовков задается тэгами от <H1> (самый крупный) до <H6> (самый мелкий). Все указанные тэги парные.
Заголовок страницы целесообразно выделять самым крупным шрифтом
<H1> Все о компьютере </H1>
Заголовок желательно отделять от основного содержания страницы горизонтальной линией с помощью одиночного тэга <HR>
№21 слайд
![Основные теги и их описание в](/documents_6/d297954a6fe5344c65d982e27c3b5275/img20.jpg)
Содержание слайда: Основные теги и их описание в HTML
<html> Определяет документ HTML
<body> Определяет основную часть или тело документа
<h1> -- <h6> Определяет заголовки с 1 по 6
<p> Определяет параграф
<br> Вставляет единичный перенос строки
<hr> Определяет горизонтальную линейку
<!--> Определяет комментарий
№22 слайд
![Заголовки, атрибуты тэгов](/documents_6/d297954a6fe5344c65d982e27c3b5275/img21.jpg)
Содержание слайда: Заголовки, атрибуты тэгов
Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется придать определенное значение.
ALIGN=“right” – выравнивание по правому краю
ALIGN=“center” – выравнивание по центру
ALIGN=“left” – выравнивание по левому краю
№25 слайд
![Форматирование текста Текст](/documents_6/d297954a6fe5344c65d982e27c3b5275/img24.jpg)
Содержание слайда: Форматирование текста
Текст кода:
<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 слайд
![Форматирование текста Для](/documents_6/d297954a6fe5344c65d982e27c3b5275/img25.jpg)
Содержание слайда: Форматирование текста
Для выделения фрагментов текста используется тэг <FONT> </FONT>
Этот тэг имеет следующие атрибуты:
FACE – задает гарнитуру шрифта (например, FACE=“Arial”)
SIZE – задает размер шрифта (например, SIZE=4)
COLOR – задает цвет шрифта (например, COLOR=“blue”).
Значение атрибута COLOR можно задать либо значением цвета (например, “red”, “green”, “blue” и тд.), либо шестнадцатеричным его значением, которое использует RGB-формат “#RRGGBB”.
№28 слайд
![Форматирование текста](/documents_6/d297954a6fe5344c65d982e27c3b5275/img27.jpg)
Содержание слайда: Форматирование текста
Разделение текста на абзацы производится с помощью тэга <P> </P>.
Например, поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:
<P ALIGN=“left”> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P>
<P ALIGN=“right”> Терминологический словарь познакомит вас с компьютерным терминами, а также вы сможете заполнить анкету. </P>
№31 слайд
![Изображения Для размещения на](/documents_6/d297954a6fe5344c65d982e27c3b5275/img30.jpg)
Содержание слайда: Изображения
Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG, PNG.
Для вставки изображения используется одиночный тэг <IMG> с атрибутом SRC, который указывает место хранения файла на локальном компьютере или в Интернете.
Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:
<IMG SRC=“computer.jpg >
№32 слайд
![Текст кода Текст кода lt Html](/documents_6/d297954a6fe5344c65d982e27c3b5275/img31.jpg)
Содержание слайда: Текст кода:
Текст кода:
<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 слайд
![Изображения Если файл](/documents_6/d297954a6fe5344c65d982e27c3b5275/img32.jpg)
Содержание слайда: Изображения
Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла (включая путь к файлу).
Например: <IMG SRC=“C:\computer\comp.jpg”>
Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла.
Например: <IMG SRC=“http://www.server.ru/comp.jpg”>
№34 слайд
![Изображения Иллюстрации на](/documents_6/d297954a6fe5344c65d982e27c3b5275/img33.jpg)
Содержание слайда: Изображения
Иллюстрации на Web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст.
Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
№35 слайд
![Списки Довольно часто при](/documents_6/d297954a6fe5344c65d982e27c3b5275/img34.jpg)
Содержание слайда: Списки
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
Нумерованные списки, когда элементы списка идентифицируются с помощью чисел;
Маркированные списки (в HTML их принято называть ненумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров);
Списки определений позволяют составлять перечни определений в так называемой словарной форме.
Возможно создание и вложенных списков
№38 слайд
![Списки Ненумерованный список](/documents_6/d297954a6fe5344c65d982e27c3b5275/img37.jpg)
Содержание слайда: Списки
Ненумерованный список задается тэгом <UL> </UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL>можно задать вид маркера списка: “disc” (диск), “square” (квадрат) или “circle” (окружность).
Например:
<UL>
<LI TYPE=“square”> текстовые редакторы;
<LI> графические редакторы;
<LI> электронные таблицы;
<LI> системы управления базами данных.
</UL>
№39 слайд
![Списки Текст кода lt Html gt](/documents_6/d297954a6fe5344c65d982e27c3b5275/img38.jpg)
Содержание слайда: Списки
Текст кода:
<Html>
<Head>
<Title> Компьютер </title>
</head>
<body>
<H1 > Программное обеспечение </H1>
<HR>
<OL>
<LI> Системные программы
<LI> Прикладные программы
<UL>
<LI TYPE=“square”> текстовые редакторы;
<LI> графические редакторы;
<LI> электронные таблицы;
<LI> системы управления базами данных.
</UL>
<LI> Системы программирования
</OL>
</body>
№40 слайд
![Списки Список терминов](/documents_6/d297954a6fe5344c65d982e27c3b5275/img39.jpg)
Содержание слайда: Списки
Список терминов создается с помощью контейнера определений <DL> </DL>. Внутри него текст оформляется в виде термина, который определяется непарным тэгом <DT> , и определения, которое следует за тэгом <DD>.
Например:
<DL>
<DT> Процессор
<DD> Центральное устройство компьютера, производящее обработку информации в двоичном коде.
<DT> Оперативная память
<DD> Устройство, в котором хранятся программы и данные.
</DL>
№41 слайд
![Текст кода Текст кода lt Html](/documents_6/d297954a6fe5344c65d982e27c3b5275/img40.jpg)
Содержание слайда: Текст кода:
Текст кода:
<Html>
<Head>
<Title> Словарь </title>
</head>
<body>
<H1 > Компьютерные термины </H1>
<HR>
<DL>
<DT> Процессор
<DD> Центральное устройство компьютера, производящее обработку информации в двоичном коде.
<DT> Оперативная память
<DD> Устройство, в котором хранятся программы и данные.
</DL>
</body>
</html>
№42 слайд
![Гиперссылки Первая титульная](/documents_6/d297954a6fe5344c65d982e27c3b5275/img41.jpg)
Содержание слайда: Гиперссылки
Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы (создана панель навигации).
Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо сначала создать заготовки Web-страниц. Такие «пустые» страницы должны иметь заголовок, а содержание пока можно пропустить. Все создаваемые страницы необходимо сохранить в виде файлов с расширением HTM в папке сайта.
№44 слайд
![Гиперссылки lt Html gt lt](/documents_6/d297954a6fe5344c65d982e27c3b5275/img43.jpg)
Содержание слайда: Гиперссылки
<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”>
[Программы]   [Соварь]   [Комплектующие]   [Анкета]
</P>
</body>
</html>
№46 слайд
![Гиперссылки Для каждой](/documents_6/d297954a6fe5344c65d982e27c3b5275/img45.jpg)
Содержание слайда: Гиперссылки
Для каждой гиперссылки определим адрес перехода. Для этого используется тэг гиперссылки <A> </A> с атрибутом HREF, значением которого является URL-адрес документа на локальном компьютере или в Интернете.
Тэг должен содержать указатель гиперссылки:
<A HREF=“URL”> указатель гиперссылки </A>
В код страницы следует внести изменения (добавить контейнеры для создания гиперссылок на страницы сайта):
<P ALIGN=“center”>
[<A HREF=“software.htm” > Программы </A>]  
[<A HREF=“glossary.htm” > Словарь </A>]  
[<A HREF=“hrdware.htm” > Комплетующие </A>]  
[<A HREF=“anketa.htm” > Анкета </A>]
</P>
№48 слайд
![Гиперссылки Используя](/documents_6/d297954a6fe5344c65d982e27c3b5275/img47.jpg)
Содержание слайда: Гиперссылки
Используя различные значения атрибута 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 слайд
![Гиперссылки В качестве](/documents_6/d297954a6fe5344c65d982e27c3b5275/img48.jpg)
Содержание слайда: Гиперссылки
В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга <IMG>
Обычно на Web-страницах размещают изображения небольших размеров в целях экономии времени загрузки страницы. Предусмотреть получение крупной копии имеющегося изображения можно с помощью тэга:
<A href=“carsk.jpg”> <IMG src=“carsk.gif” width=“30” height=“75”> </A>,
где width=“30” height=“75” – размеры изображения на Web-странице
№50 слайд
![Цветовые схемы Цвет на](/documents_6/d297954a6fe5344c65d982e27c3b5275/img49.jpg)
Содержание слайда: Цветовые схемы
Цвет на Web-странице задают либо его названием, либо числовым шестиразрядным шестнадцатеричным кодом #RRGGBB, где две первые цифры задают интенсивность красного цвета (red), средние две цифры – интенсивность зеленого (green), и последние две цифры – интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается 16-ричным числом 00, а максимальная – FF. Легко догадаться, что синий цвет задает “#0000FF”. В таблице приведены значения некоторых цветов:
№51 слайд
![Цветовые схемы Основную](/documents_6/d297954a6fe5344c65d982e27c3b5275/img50.jpg)
Содержание слайда: Цветовые схемы
Основную цветовую схему Web-страницы можно задать в тэге <BODY> с помощью атрибутов:
Цвет фона : BGCOLOR=“#RRGGBB”
Текстура фона : BACKGROUND=“file_name”
Цвет текста : TEXT=“#RRGGBB”
Цвет текста ссылки : LINK=“#RRGGBB”
Цвет текста активной ссылки: ALINK=“#RRGGBB”
Цвет текста просмотренной
ссылки : VLINK=“#RRGGBB”
Скачать все slide презентации Знакомство с языком HTML. Cоздание сайтов одним архивом:
Похожие презентации
-
Создание сайтов на HTML 5 и СSS
-
PHP. Базовый уровень. Знакомство с языком
-
Первое знакомство с языком программирования Ассемблер
-
Верстка сайтов HTML5CSS3
-
Основы HTML. Создание сайтов в текстовом редакторе
-
Язык разметки гипертекста HTML. 8 класс
-
Базовые типы данных языков программирования высокого уровня
-
Базовые типы данных языков программирования высокого уровня. Лекция 3
-
Освоение HTML, CSS, JS (09)
-
HTML программирование