Описание презентации по отдельным слайдам:
-
1 слайд
Основы HTML. Разработка Web-сайта
Основные тэги языка HTML -
2 слайд
Что такое сайт?
Сайт (веб-сайт, ресурс) – это место в интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц, которые воспринимаются как единое целое. -
3 слайд
Методы создания и сопровождения сайтов
вручную на языке HTML (в Блокноте);
c помощью редакторов сайтов (Notepad);
c помощью Конструктора сайтов на основе готового шаблона (Vix, Tilda)
с помощью систем управления сайтов (WordPress,
1С Битрикс и др.). -
4 слайд
Методы создания сайтов
Конструкторы веб-сайтов
Преимущества:
Низкая цена. Почти все конструкторы изначально бесплатны, а стоимость подключаемых модулей очень низкая;
Простота использования. Для того, чтобы создать свой сайт, достаточно уметь пользоваться браузером компьютера и иметь чувство вкуса;
Недостатки:
параметры настройки, кол-во страниц ограничены;
много лишней рекламы;
однотипные шаблоны;
Тяжеловесность сайта (долго грузится, т.к большой программный код)
Вывод: Веб-страницы лучше всего подходят для начинающих разработчиков, которые хотят создавать небольшие личные веб-сайты. Конструкторы веб-сайтов также могут работать для малого бизнеса на основе их потребностей. -
5 слайд
Системы управления контентом (CMS)
Система управления контентом (CMS) – это тип программного обеспечения, которое позволяет создавать и управлять цифровым контентом. Они более универсальны, чем конструкторы веб-сайтов.
Преимущества
Более широкие возможности
Огромный выбор шаблонов, нет лимитов на трафик и кол-во страниц
В долгосрочной перспективе обслуживание обойдется дешевле конструктора
Недостатки:
Уязвимость сайта. Самый важный минус любой широко распространенной CMS.
Требования к знаниям. Разработка сайта уже требует базовых знаний по верстке и программированию, что уже добавляет сложностей при создании сайта. -
6 слайд
Создание сайта с помощью
языка разметки HTML
HTML-язык гипертекстовой разметки
CSS- таблицы стилей.
С помощью языка HTML строится каркас сайта, а CSS позволяет произвести настройки его внешнего вида.
Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. -
7 слайд
Вид Web-страницы задается тэгами, которые заключаются в угловые скобки <> </>.
Тэги могут быть одиночными <> или парными <> </>, для которых обязательно наличие открывающего и закрывающего тегов (такая пара тэгов называется контейнером).
Закрывающий тэг содержит прямой слэш (/) перед обозначением. -
8 слайд
HTML-код страницы помещается внутрь контейнера <HTML></HTML>
Заголовок Web-страницы заключается в контейнер <HEAD></HEAD>
Название Web-страницы содержится в контейнере < TITLE ></TITLE><HTML>
<HEAD>
<ТIТLЕ>Компьютер</ТIТLЕ>
</HEAD>
</HTML> -
9 слайд
Основное содержание страницы помещается в контейнер <BODY></BODY>
<HTML>
<HEAD>
<ТIТLЕ>Компьютер</ТIТLЕ>
</HEAD>
<BODY>
Все о компьютере
</BODY>
</HTML>Сохранить файл под именем index.htm в папке сайта.
-
10 слайд
Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н1> (самый крупный) до <Н6> (самый мелкий)
<Н1>Все о компьютере</Н1>
Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN
Выравнивание по правой границе окна реализуется с помощью записи ALIGN=right, а по центру — ALIGN=center“<Н1 ALIGN=center>Bce о компьютере</Н1>
-
11 слайд
С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=Arial), атрибут SIZE — размер шрифта (например, SIZE=4), атрибут COLOR — цвет шрифта (например, COLOR=blue)
<FONT COLOR=blue>
<Н1 ALIGN=center>Bce о компьютере</Н1>
</FONT>Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга <HR>
РАБОТА С ЗАГОЛОВКОМ
ЗАКОНЧЕНА! -
12 слайд
Разделение текста на абзацы производится с помощью контейнера <Р></Р>
Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:
-
13 слайд
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
<FONT COLOR=blue>
<H1 ALIGN=center>Bce о компьютере</H1>
</FONT>
<HR> (горизонтальная линия)
<P ALIGN=left>Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</P>
<P ALIGN=right>Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</P>
<BODY>
</HTML> -
14 слайд
Вставка изображений
Для вставки изображения используется тэг <IMG> с атрибутом SRC<IMG SRC=COMP6.gif>
Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
<IMG SRC=COMP6.gif ALT “Компьютер”>
-
15 слайд
Гиперссылки
Первая титульная страница должна предоставлять посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта. -
16 слайд
Ссылка на сайт ПСК
<a href= http://www.psk.perm.ru> перейти на сайт ПСК </a>
-
17 слайд
ДОМАШНЕЕ ЗАДАНИЕ
выучить условные обозначения и значения тэгов (контейнеров)
