SlideShare a Scribd company logo
1 of 31
Публикация во Всемирной паутине
реализуется в форме WEB – сайтов.
Сайт является интерактивным средством
представления информации.
WEB - сайт состоит из WEB – страниц,
объединенных гиперссылками. WEB –
страницы могут быть интерактивными и
могут содержать мультимедийные и
динамические объекты.
•Название сайта должно отражать не
только общую тематическую
направленность, но и конкретные
отличительные особенности вашего
сайта.
Какова цель создания вашего сайта?
Какие новые возможности предоставляет ваш
сайт?
Кто будет основной (и вторичной) аудиторией
вашего сайта?
Какого они возраста?
Чем они занимаются?
Сколько времени они предположительно проведут
на вашем сайте?
Что может привлечь их повторно посетить ваш
сайт?
Общая характеристика данных, включаемых в
сайт.
Предположительный объем и предполагаемое
содержание текстовой части.
Фотографии, рисунки, диаграммы, анимации и
звуки, которые вы предполагаете включить в
сайт.
Какая часть данных, включенных в сайт будет
обновляться.
Периодичность обновления данных сайта.
Логическая структура сайта показывает, каким
образом информация распределяется по
страницам сайта и как она может быть
получена пользователем.
Логическая структура сайта должна
естественным образом отображать логическую
структуру информации.
Для представления логической структуры
сайта можно воспользоваться древовидными
организационными диаграммами.
ВСЕ О КОМПЬЮТЕРЕ
ПРОГРАММЫ СЛОВАРЬ КОМПЛЕКТУЮЩИЕ
Устройства ввода
Устройства вывода
Память
Процессор
Где предполагается разместить сайт?
Какие страницы будут обновляться, как
часто и кем?
Предполагается ли получение
информации от посетителей сайта?
Предполагается ли регистрация
посетителей сайта
заголовок
текст рис.
навигация
анима-
ция
E-MALE:
Вид WEB – страницы задается тэгами, которые
заключаются в угловые скобки. Тэги могут быть
одиночными или парными, для которых обязательно
наличие открывающего и закрывающего тэгов (контейнер).
HTML – код страницы помещается внутрь контейнера
Заголовок WEB – страницы заключается в контейнер
Название WEB – страницы содержится в контейнере
Основное содержание страницы помещается в контейнер
<HTML> </HTML>
<HEAD> </HEAD>
<TITLE> </TITLE>
<BODY> </BODY>
Создание WEB сайта
1. На диске D создайте папку Компьютер
2. Откройте окно текстового редактора Блокнот
3. В окне приложения введите HTML – код WEB – страницы.
4. Сохраните файл под именем index.html
5. Загрузите этот файл в окно браузера для просмотра.
<HTML>
<HEAD>
<TITLE> КОМПЬЮТЕР </TITLE>
</HEAD>
<BODY> ВСЕ О КОМПЬЮТЕРЕ </BODY>
</HTML>
Форматирование текста
Размер шрифта задается тэгами от <H1> (самый крупный)
до <H6> (самый мелкий).
Некоторые тэги имеют атрибуты, которые являются
именами свойств и принимают определенные значения.
 ALIGN =“ center” – тип выравнивания заголовка
С помощью тега FONT можно задать параметры
форматирования шрифта.
 FASE=“arial”- гарнитура шрифта
 SIZE=4 – размер шрифта
 COLOR=“blue” – цвет шрифта
Заголовок целесообразно отделить от остального
содержания страницы горизонтальной линией – тэг <HR>
Разделение текста на абзацы производится с помощью
контейнера <P> </P>

6. В контейнер <BODY> вставить последовательность. Просмотреть
результат в браузере.
<BODY>
<FONT COLOR = "BLUE">
<H1 ALIGN="CENTER"> ВСЕ О КОМПЬЮТЕРЕ </H1>
</FONT>
</BODY>
<HR>
<BODY>
<FONT COLOR= "green">
<H2> <P ALIGN="LEFT"> На этом сайте вы можете получить
информацию о компьютере, его программном обеспечении и ценах на
компьютерные комплектующие. </P>
<P ALIGN="RIGHT"> Терминологический словарь познакомит вас с
компьютерными терминами. </P>
</BODY>
Вставка изображений
На WEB – страницы обычно помещают изображения
трех форматах – GIF, JPG, PNG. Если рисунок сохранен в
другом формате, то его преобразовывают в графическом
редакторе (PHOTO EDITOR).
Для вставки изображения используется тэг <IMG> с
атрибутами:
 SRC=“computer.gif”, который указывает место хранения
файла.
 ALT=“компьютер” – поясняющий текст
 Расположить рисунок относительно текста позволяет
атрибут ALIGN=“ritght”

6. В контейнер <BODY> вставить перед абзацами
текста тэг вставки изображения, просмотреть
результат в браузере.
<IMG SRC="computer.gif" ALT="Компьютер" ALIGN="RIGHT">
Гиперссылки на WEB–страницах
Первая страница должна предоставить посетителю WEB – сайта
возможность начать путешествие по сайту. Для этого на титульную
страницу должны быть помещены гиперссылки на другие страницы.
Для создания гиперсвязей необходимо, прежде всего, создать
заголовки WEB – страниц. Такие страницы пока могут быть пустыми
(без содержания). Все созданные страницы необходимо сохранить в
виде файлов в папке сайта.
Каждая страница будет содержать следующий HTML- код:
<HTML>
<HEAD>
<TITLE> ЗАГОЛОВОК СТРАНИЦЫ</TITLE>
</HEAD>
<BODY> ПРОГРАММЫ </BODY>
</HTML>
Создать пустые страницы
Создайте пустые страницы «Программы», «Словарь»,
«Комплектующие» и сохраните их в файлах
SOFTWARE.HTML - ПРОГРАММЫ
GLOSSARY.HTML – СЛОВАРЬ
HARDWARE.HTML - КОМПЛЕКТУЮЩИЕ
Контейнер гиперссылок <A> </A> .
Атрибут HREF=“адрес документа”
&nbsp – разделяет гиперссылки пробелами.
 Вставьте в титульную страницу код, создающий панель
гиперссылки.
<P ALIGN="CENTER">
[<A HREF="SOFTWARE.HTML"> ПРОГРАММЫ</A>] &nbsp
[<A HREF="GLOSSARY.HTML"> СЛОВАРЬ</A>] &nbsp
[<A HREF="HARDWARE.HTML"> КОМПЛЕКТУЮЩИЕ</A>] &nbsp
</P>
Полезно на титульной странице создать ссылку на адрес
электронной почты, по которому посетители могут связаться с
администрацией сайта.
Контейнер адреса <ADRESS> </ADRESS>
Атрибут HREF=“адрес электронной почты”
 Вставьте в титульную страницу код, создающий ссылку на
адрес электронной почты.
<ADRESS>
<A HREF="MAILTO:NIZHNEUDINSK48@YNDEX.RU">
E-MAIL: NIZHNEUDINSK48@YNDEX.RU</A>
</ADRESS>
тпцми пр№ 10  создание сайта
тпцми пр№ 10  создание сайта

More Related Content

Similar to тпцми пр№ 10 создание сайта

Php intro rus
Php intro rusPhp intro rus
Php intro rusaDDDitive
 
2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-Amberita
 
2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-Amberita
 
Trening modul2-webinar11
Trening modul2-webinar11Trening modul2-webinar11
Trening modul2-webinar11olgaoov
 
Create a site in a preschool educational
Create a site in a preschool educationalCreate a site in a preschool educational
Create a site in a preschool educationalVictor Filimonov
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdfmmmitioglo
 
Trening modul2-webinar12
Trening modul2-webinar12Trening modul2-webinar12
Trening modul2-webinar12olgaoov
 
Создание сайта на PHP
Создание сайта на PHPСоздание сайта на PHP
Создание сайта на PHPVasya Petrov
 
Создание простого сайта
Создание простого сайтаСоздание простого сайта
Создание простого сайтаLena Frum
 
Создание Web-сайта
Создание Web-сайтаСоздание Web-сайта
Создание Web-сайтаAndrey Dolinin
 
Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)Oleksii Prohonnyi
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTMLDenis Latushkin
 

Similar to тпцми пр№ 10 создание сайта (20)

6.4
6.46.4
6.4
 
Php intro rus
Php intro rusPhp intro rus
Php intro rus
 
2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-
 
Welcome
WelcomeWelcome
Welcome
 
2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-2 prezent 8kl_30_inf-
2 prezent 8kl_30_inf-
 
Trening modul2-webinar11
Trening modul2-webinar11Trening modul2-webinar11
Trening modul2-webinar11
 
пр 12.docx
пр 12.docxпр 12.docx
пр 12.docx
 
Create a site in a preschool educational
Create a site in a preschool educationalCreate a site in a preschool educational
Create a site in a preschool educational
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdf
 
Trening modul2-webinar12
Trening modul2-webinar12Trening modul2-webinar12
Trening modul2-webinar12
 
Создание сайта на PHP
Создание сайта на PHPСоздание сайта на PHP
Создание сайта на PHP
 
Создание простого сайта
Создание простого сайтаСоздание простого сайта
Создание простого сайта
 
Как правильно продвигать «молодые» сайты: секреты успеха в SEO. Вебинар WebPr...
Как правильно продвигать «молодые» сайты: секреты успеха в SEO. Вебинар WebPr...Как правильно продвигать «молодые» сайты: секреты успеха в SEO. Вебинар WebPr...
Как правильно продвигать «молодые» сайты: секреты успеха в SEO. Вебинар WebPr...
 
Создание Web-сайта
Создание Web-сайтаСоздание Web-сайта
Создание Web-сайта
 
WEB
WEBWEB
WEB
 
Html
HtmlHtml
Html
 
Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)Как создать сайт за 2 часа? (Wordpress)
Как создать сайт за 2 часа? (Wordpress)
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTML
 
Dev
DevDev
Dev
 
Курсовая работа. Презентация
Курсовая работа. ПрезентацияКурсовая работа. Презентация
Курсовая работа. Презентация
 

More from annuta123

тпцми пр№ 9 файлообменники
тпцми пр№ 9  файлообменникитпцми пр№ 9  файлообменники
тпцми пр№ 9 файлообменникиannuta123
 
тпцми пр№ 7 видеохостинги
тпцми пр№ 7 видеохостингитпцми пр№ 7 видеохостинги
тпцми пр№ 7 видеохостингиannuta123
 
тпцми пр№ 6 фотохостинги
тпцми пр№ 6 фотохостингитпцми пр№ 6 фотохостинги
тпцми пр№ 6 фотохостингиannuta123
 
тпцми пр№ 3 publisher
тпцми пр№ 3 publisherтпцми пр№ 3 publisher
тпцми пр№ 3 publisherannuta123
 
тпцми пр№ 2 браузеры
тпцми пр№ 2 браузерытпцми пр№ 2 браузеры
тпцми пр№ 2 браузерыannuta123
 
тпцми пр№ 6 фотохостинги
тпцми пр№ 6 фотохостингитпцми пр№ 6 фотохостинги
тпцми пр№ 6 фотохостингиannuta123
 
тпцми пр№ 5 создание онлайн дневника
тпцми пр№ 5 создание онлайн дневникатпцми пр№ 5 создание онлайн дневника
тпцми пр№ 5 создание онлайн дневникаannuta123
 
тпцми пр№ 4 создание почты
тпцми пр№ 4 создание почтытпцми пр№ 4 создание почты
тпцми пр№ 4 создание почтыannuta123
 
тпцми пр№ 2 браузеры
тпцми пр№ 2 браузерытпцми пр№ 2 браузеры
тпцми пр№ 2 браузерыannuta123
 
тпцми лекция 10 файлообменники
тпцми лекция 10 файлообменникитпцми лекция 10 файлообменники
тпцми лекция 10 файлообменникиannuta123
 
тпцми лекция 9 вики хостинг
тпцми лекция 9 вики хостингтпцми лекция 9 вики хостинг
тпцми лекция 9 вики хостингannuta123
 
тпцми лекция 8 видеохостинг
тпцми лекция 8 видеохостингтпцми лекция 8 видеохостинг
тпцми лекция 8 видеохостингannuta123
 
тпцми лекция 7 фотохостинг
тпцми лекция 7 фотохостингтпцми лекция 7 фотохостинг
тпцми лекция 7 фотохостингannuta123
 
тпцми лекция 6 хостинг
тпцми лекция 6 хостингтпцми лекция 6 хостинг
тпцми лекция 6 хостингannuta123
 
тпцми лекция 4 сервис интернет
тпцми лекция 4 сервис интернеттпцми лекция 4 сервис интернет
тпцми лекция 4 сервис интернетannuta123
 
тпцми лекция 3 браузеры
тпцми лекция 3 браузерытпцми лекция 3 браузеры
тпцми лекция 3 браузерыannuta123
 
тпцми лекция 2 интернет
тпцми лекция 2 интернеттпцми лекция 2 интернет
тпцми лекция 2 интернетannuta123
 
тпцми лекция 8 видеохостинг
тпцми лекция 8 видеохостингтпцми лекция 8 видеохостинг
тпцми лекция 8 видеохостингannuta123
 
тпцми лекция 6 хостинг
тпцми лекция 6 хостингтпцми лекция 6 хостинг
тпцми лекция 6 хостингannuta123
 
тпцми лекция 4 сервис интернет
тпцми лекция 4 сервис интернеттпцми лекция 4 сервис интернет
тпцми лекция 4 сервис интернетannuta123
 

More from annuta123 (20)

тпцми пр№ 9 файлообменники
тпцми пр№ 9  файлообменникитпцми пр№ 9  файлообменники
тпцми пр№ 9 файлообменники
 
тпцми пр№ 7 видеохостинги
тпцми пр№ 7 видеохостингитпцми пр№ 7 видеохостинги
тпцми пр№ 7 видеохостинги
 
тпцми пр№ 6 фотохостинги
тпцми пр№ 6 фотохостингитпцми пр№ 6 фотохостинги
тпцми пр№ 6 фотохостинги
 
тпцми пр№ 3 publisher
тпцми пр№ 3 publisherтпцми пр№ 3 publisher
тпцми пр№ 3 publisher
 
тпцми пр№ 2 браузеры
тпцми пр№ 2 браузерытпцми пр№ 2 браузеры
тпцми пр№ 2 браузеры
 
тпцми пр№ 6 фотохостинги
тпцми пр№ 6 фотохостингитпцми пр№ 6 фотохостинги
тпцми пр№ 6 фотохостинги
 
тпцми пр№ 5 создание онлайн дневника
тпцми пр№ 5 создание онлайн дневникатпцми пр№ 5 создание онлайн дневника
тпцми пр№ 5 создание онлайн дневника
 
тпцми пр№ 4 создание почты
тпцми пр№ 4 создание почтытпцми пр№ 4 создание почты
тпцми пр№ 4 создание почты
 
тпцми пр№ 2 браузеры
тпцми пр№ 2 браузерытпцми пр№ 2 браузеры
тпцми пр№ 2 браузеры
 
тпцми лекция 10 файлообменники
тпцми лекция 10 файлообменникитпцми лекция 10 файлообменники
тпцми лекция 10 файлообменники
 
тпцми лекция 9 вики хостинг
тпцми лекция 9 вики хостингтпцми лекция 9 вики хостинг
тпцми лекция 9 вики хостинг
 
тпцми лекция 8 видеохостинг
тпцми лекция 8 видеохостингтпцми лекция 8 видеохостинг
тпцми лекция 8 видеохостинг
 
тпцми лекция 7 фотохостинг
тпцми лекция 7 фотохостингтпцми лекция 7 фотохостинг
тпцми лекция 7 фотохостинг
 
тпцми лекция 6 хостинг
тпцми лекция 6 хостингтпцми лекция 6 хостинг
тпцми лекция 6 хостинг
 
тпцми лекция 4 сервис интернет
тпцми лекция 4 сервис интернеттпцми лекция 4 сервис интернет
тпцми лекция 4 сервис интернет
 
тпцми лекция 3 браузеры
тпцми лекция 3 браузерытпцми лекция 3 браузеры
тпцми лекция 3 браузеры
 
тпцми лекция 2 интернет
тпцми лекция 2 интернеттпцми лекция 2 интернет
тпцми лекция 2 интернет
 
тпцми лекция 8 видеохостинг
тпцми лекция 8 видеохостингтпцми лекция 8 видеохостинг
тпцми лекция 8 видеохостинг
 
тпцми лекция 6 хостинг
тпцми лекция 6 хостингтпцми лекция 6 хостинг
тпцми лекция 6 хостинг
 
тпцми лекция 4 сервис интернет
тпцми лекция 4 сервис интернеттпцми лекция 4 сервис интернет
тпцми лекция 4 сервис интернет
 

тпцми пр№ 10 создание сайта

  • 1.
  • 2. Публикация во Всемирной паутине реализуется в форме WEB – сайтов. Сайт является интерактивным средством представления информации. WEB - сайт состоит из WEB – страниц, объединенных гиперссылками. WEB – страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты.
  • 3. •Название сайта должно отражать не только общую тематическую направленность, но и конкретные отличительные особенности вашего сайта.
  • 4. Какова цель создания вашего сайта? Какие новые возможности предоставляет ваш сайт? Кто будет основной (и вторичной) аудиторией вашего сайта? Какого они возраста? Чем они занимаются? Сколько времени они предположительно проведут на вашем сайте? Что может привлечь их повторно посетить ваш сайт?
  • 5. Общая характеристика данных, включаемых в сайт. Предположительный объем и предполагаемое содержание текстовой части. Фотографии, рисунки, диаграммы, анимации и звуки, которые вы предполагаете включить в сайт. Какая часть данных, включенных в сайт будет обновляться. Периодичность обновления данных сайта.
  • 6. Логическая структура сайта показывает, каким образом информация распределяется по страницам сайта и как она может быть получена пользователем. Логическая структура сайта должна естественным образом отображать логическую структуру информации. Для представления логической структуры сайта можно воспользоваться древовидными организационными диаграммами.
  • 7. ВСЕ О КОМПЬЮТЕРЕ ПРОГРАММЫ СЛОВАРЬ КОМПЛЕКТУЮЩИЕ Устройства ввода Устройства вывода Память Процессор
  • 8. Где предполагается разместить сайт? Какие страницы будут обновляться, как часто и кем? Предполагается ли получение информации от посетителей сайта? Предполагается ли регистрация посетителей сайта
  • 9.
  • 11. Вид WEB – страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (контейнер). HTML – код страницы помещается внутрь контейнера Заголовок WEB – страницы заключается в контейнер Название WEB – страницы содержится в контейнере Основное содержание страницы помещается в контейнер <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY>
  • 12. Создание WEB сайта 1. На диске D создайте папку Компьютер 2. Откройте окно текстового редактора Блокнот 3. В окне приложения введите HTML – код WEB – страницы. 4. Сохраните файл под именем index.html 5. Загрузите этот файл в окно браузера для просмотра. <HTML> <HEAD> <TITLE> КОМПЬЮТЕР </TITLE> </HEAD> <BODY> ВСЕ О КОМПЬЮТЕРЕ </BODY> </HTML>
  • 13.
  • 14.
  • 15. Форматирование текста Размер шрифта задается тэгами от <H1> (самый крупный) до <H6> (самый мелкий). Некоторые тэги имеют атрибуты, которые являются именами свойств и принимают определенные значения.  ALIGN =“ center” – тип выравнивания заголовка С помощью тега FONT можно задать параметры форматирования шрифта.  FASE=“arial”- гарнитура шрифта  SIZE=4 – размер шрифта  COLOR=“blue” – цвет шрифта
  • 16. Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией – тэг <HR> Разделение текста на абзацы производится с помощью контейнера <P> </P>
  • 17.  6. В контейнер <BODY> вставить последовательность. Просмотреть результат в браузере. <BODY> <FONT COLOR = "BLUE"> <H1 ALIGN="CENTER"> ВСЕ О КОМПЬЮТЕРЕ </H1> </FONT> </BODY> <HR> <BODY> <FONT COLOR= "green"> <H2> <P ALIGN="LEFT"> На этом сайте вы можете получить информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </P> <P ALIGN="RIGHT"> Терминологический словарь познакомит вас с компьютерными терминами. </P> </BODY>
  • 18.
  • 19.
  • 20. Вставка изображений На WEB – страницы обычно помещают изображения трех форматах – GIF, JPG, PNG. Если рисунок сохранен в другом формате, то его преобразовывают в графическом редакторе (PHOTO EDITOR). Для вставки изображения используется тэг <IMG> с атрибутами:  SRC=“computer.gif”, который указывает место хранения файла.  ALT=“компьютер” – поясняющий текст  Расположить рисунок относительно текста позволяет атрибут ALIGN=“ritght”
  • 21.  6. В контейнер <BODY> вставить перед абзацами текста тэг вставки изображения, просмотреть результат в браузере. <IMG SRC="computer.gif" ALT="Компьютер" ALIGN="RIGHT">
  • 22.
  • 23.
  • 24. Гиперссылки на WEB–страницах Первая страница должна предоставить посетителю WEB – сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы. Для создания гиперсвязей необходимо, прежде всего, создать заголовки WEB – страниц. Такие страницы пока могут быть пустыми (без содержания). Все созданные страницы необходимо сохранить в виде файлов в папке сайта. Каждая страница будет содержать следующий HTML- код: <HTML> <HEAD> <TITLE> ЗАГОЛОВОК СТРАНИЦЫ</TITLE> </HEAD> <BODY> ПРОГРАММЫ </BODY> </HTML>
  • 25. Создать пустые страницы Создайте пустые страницы «Программы», «Словарь», «Комплектующие» и сохраните их в файлах SOFTWARE.HTML - ПРОГРАММЫ GLOSSARY.HTML – СЛОВАРЬ HARDWARE.HTML - КОМПЛЕКТУЮЩИЕ
  • 26. Контейнер гиперссылок <A> </A> . Атрибут HREF=“адрес документа” &nbsp – разделяет гиперссылки пробелами.  Вставьте в титульную страницу код, создающий панель гиперссылки. <P ALIGN="CENTER"> [<A HREF="SOFTWARE.HTML"> ПРОГРАММЫ</A>] &nbsp [<A HREF="GLOSSARY.HTML"> СЛОВАРЬ</A>] &nbsp [<A HREF="HARDWARE.HTML"> КОМПЛЕКТУЮЩИЕ</A>] &nbsp </P>
  • 27.
  • 28.
  • 29. Полезно на титульной странице создать ссылку на адрес электронной почты, по которому посетители могут связаться с администрацией сайта. Контейнер адреса <ADRESS> </ADRESS> Атрибут HREF=“адрес электронной почты”  Вставьте в титульную страницу код, создающий ссылку на адрес электронной почты. <ADRESS> <A HREF="MAILTO:NIZHNEUDINSK48@YNDEX.RU"> E-MAIL: NIZHNEUDINSK48@YNDEX.RU</A> </ADRESS>