![Мастер-класс «Основы сайтостроения» Центр Ювента 2017г.](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_0.jpg)
Мастер-класс «Основы сайтостроения»
Центр Ювента
2017г.
![Основные понятия Web-дизайна Web-дизайн представляет собой деятельность по созданию Web-страниц и Web-сайтов. Web-страница – документ, который можно открыть и посмотреть с помощью программы просмотра – браузера. Web-сайт – совокупность Web-страниц, объединенных по смыслу и навигационно. Web-сервер – компьютер, подключенный к сети, на котором хранятся Web-страницы и Web-сайты .](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_1.jpg)
Основные понятия Web-дизайна
Web-дизайн представляет собой деятельность по созданию Web-страниц и Web-сайтов.
Web-страница – документ, который можно открыть и посмотреть с помощью программы просмотра – браузера.
Web-сайт – совокупность Web-страниц, объединенных по смыслу и навигационно.
Web-сервер – компьютер, подключенный к сети, на котором хранятся Web-страницы и Web-сайты .
![Веб-сайт (от англ. «место в сети») - место в Интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц , которые воспринимаются как единое целое.](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_2.jpg)
Веб-сайт (от англ. «место в сети») - место в Интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц , которые воспринимаются как единое целое.
![Программы для просмотра Web - страниц Веб-обозреватель, браузер (от англ. Web browser) Примеры браузеров: Internet Explorer, Mozilla Firefox Opera Google Chrome.](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_3.jpg)
Программы для просмотра Web - страниц
Веб-обозреватель, браузер (от англ. Web browser)
Примеры браузеров:
Internet Explorer,
Mozilla Firefox
Opera
Google Chrome.
![Этапы создания сайта Определение цели создания сайта Выбор темы сайта Определение содержания сайта Построение структуры сайта Разработка дизайна сайта Регистрация и размещение сайта в Интернете](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_4.jpg)
Этапы создания сайта
Определение цели создания сайта
Выбор темы сайта
Определение содержания сайта
Построение структуры сайта
Разработка дизайна сайта
Регистрация и размещение сайта в Интернете
![Как же создаются web – страницы? Умение создавать Web-сайты со временем становится актуальным навыком на сегодняшний день. Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей.](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_5.jpg)
Как же создаются web – страницы?
Умение создавать Web-сайты со временем становится актуальным навыком на сегодняшний день.
Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей.
![Язык гипертекстовой разметки HTML Язык HTML ( от англ. HyperText Markup Language) – это язык гипертекстовой разметки. HTML-страница – это по сути текстовый файл, который можно создать с помощью обычного Блокнота. Помимо текста, который будет выводиться браузером при просмотре такой странички, этот файл содержит невидимый для программы навигации по Сети и пользователя код. Вот этот код и есть язык гипертекстовой разметки – HTML.](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_6.jpg)
Язык гипертекстовой разметки HTML
Язык HTML ( от англ. HyperText Markup Language) – это язык гипертекстовой разметки.
HTML-страница – это по сути текстовый файл, который можно создать с помощью обычного Блокнота.
Помимо текста, который будет выводиться браузером при просмотре такой странички, этот файл содержит невидимый для программы навигации по Сети и пользователя код. Вот этот код и есть язык гипертекстовой разметки – HTML.
![Пример](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_7.jpg)
Пример
![Программы для создания HTML – файлов: Блокнот ( для создания страницы ) Internet Explorer (для интерпретации файлов)](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_8.jpg)
Программы для создания HTML – файлов:
Блокнот
( для создания страницы )
Internet Explorer
(для интерпретации файлов)
![Структура HTML -файла заголовок окна … … …](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_9.jpg)
Структура HTML -файла
заголовок окна
…
…
…
![](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_10.jpg)
Цвет фона, цвет шрифта
BODY ... BODY
Между ними располагаются команды, следуя которым браузер выводит информацию в окно документа
Задает цвет фона и цвет шрифта на протяжении всего документа.
Цвет фона задается один раз для всего документа.
![](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_11.jpg)
Заголовки
HTML поддерживает заголовки шести уровней при помощи конструкции:
hn Текст заголовка hn
n - 1…6, заголовок n -го уровня
![Линия Простейший графический элемент, который умеет строить браузер. горизонтальная линия; size - меняет толщину линии noshade – выводит горизонтальные линии плоскими Бегущая строка Текст Вставка бегущей стоки с содержанием Текст](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_12.jpg)
Линия Простейший графический элемент, который умеет строить браузер.
горизонтальная линия;
size - меняет толщину линии
noshade – выводит горизонтальные линии плоскими
Бегущая строка
Текст
Вставка бегущей стоки с содержанием Текст
![Абзац ... Браузер выполняет команду Р следующим образом:](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_13.jpg)
Абзац
...
Браузер выполняет команду Р следующим образом:
- Перед абзацем выводится пустая строка.
- Абзац выравнивается по левому краю.
- Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде.
- Перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда новая строка начинается в HTML-коде.
![Атрибуты абзаца](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_14.jpg)
Атрибуты абзаца
- Р align=lef t - выравнивает абзац по левому краю
- Р align=right - выравнивает абзац по правому краю
- Р align=center - выравнивает абзац по центру
- Р align=justify - выравнивает абзац по ширине
![](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_15.jpg)
Оформление текста
текст
Изменение цвета текста внутри документа
BIG...
Укрупнение шрифта по отношению к текущему
...
Уменьшение шрифта по отношению к текущему
текст
Изменение размера шрифта
CODE … /CODE
Выделение моноширинным шрифтом
STRONG ... STRONG
Усиление текста. Браузер отображает это выделение полужирным шрифтом.
I ТЕ... I ТЕ
Выделение небольших внутристрочных цитат. Большинство браузеров изображает текстовую ссылку курсивом (наклонным шрифтом).
PRE ... PRE
браузер выводит текст на экран так, как он записан в программе, — со всеми пробелами и концами строк.
![Специальные символы Некоторые символы, введенные в HTML документ будут интерпретироваться не так, как задумал автор. Это, например, символы](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_16.jpg)
Специальные символы
Некоторые символы, введенные в HTML документ будут интерпретироваться не так, как задумал автор. Это, например, символы " и "" , используемые для указания тегов.
В этих случаях можно вводить нужные символы с помощью специальных кодов.
Коды начинаются с символа " амперсанд"(&). За ним следует название символа либо его числовой код в десятичной или шестнадцатеричной системе. Завершает код символ "точка с запятой"(;).
Имя
Код
"
"
Вид
&
<
Описание
"
&
<
двойная кавычка
>
&
амперсанд
>
знак 'меньше'
¡
¡
знак 'больше'
неразрывный пробел
¡
перевернутый восклицательный знак
![Создание таблиц Таблица задаётся парой тегов ... . Между этими тегами задаются строки таблицы, тегов ... ... Внутри строк задаются клетки (ячейки) таблицы, теги ... ).](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_17.jpg)
Создание таблиц
Таблица задаётся парой тегов
...
.
Между этими тегами задаются строки таблицы, тегов
...
...
Внутри строк задаются клетки (ячейки) таблицы, теги
![](http://fsd.intolimp.org/html/2019/12/29/i_5e08e38ee8a2a/img_php557SZ0_Osnovy-sajtostroeniya_18.jpg)
Пример
задания таблицы, состоящей из трёх строк и двух столбцов:
Получите бесплатно свидетельство о публикации сразу после добавления разработки Бесплатное участие и возможность получить свидетельство об участии в вебинаре. border=1
Получите свидетельство о публикации сразу после загрузки работы
Вебинары для учителей
Подробнее