Мастер-класс «Основы сайтостроения»
Центр Ювента
2017г.
Основные понятия Web-дизайна
Web-дизайн представляет собой деятельность по созданию Web-страниц и Web-сайтов.
Web-страница – документ, который можно открыть и посмотреть с помощью программы просмотра – браузера.
Web-сайт – совокупность Web-страниц, объединенных по смыслу и навигационно.
Web-сервер – компьютер, подключенный к сети, на котором хранятся Web-страницы и Web-сайты .
Веб-сайт (от англ. «место в сети») - место в Интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц , которые воспринимаются как единое целое.
Программы для просмотра Web - страниц
Веб-обозреватель, браузер (от англ. Web browser)
Примеры браузеров:
Internet Explorer,
Mozilla Firefox
Opera
Google Chrome.
Этапы создания сайта
Определение цели создания сайта
Выбор темы сайта
Определение содержания сайта
Построение структуры сайта
Разработка дизайна сайта
Регистрация и размещение сайта в Интернете
Как же создаются web – страницы?
Умение создавать Web-сайты со временем становится актуальным навыком на сегодняшний день.
Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей.
Язык гипертекстовой разметки HTML
Язык HTML ( от англ. HyperText Markup Language) – это язык гипертекстовой разметки.
HTML-страница – это по сути текстовый файл, который можно создать с помощью обычного Блокнота.
Помимо текста, который будет выводиться браузером при просмотре такой странички, этот файл содержит невидимый для программы навигации по Сети и пользователя код. Вот этот код и есть язык гипертекстовой разметки – HTML.
Пример
Программы для создания HTML – файлов:
Блокнот
( для создания страницы )
Internet Explorer
(для интерпретации файлов)
Структура HTML -файла
заголовок окна
…
…
…
... BODY Между ними располагаются команды, следуя которым браузер выводит информацию в окно документа Задает цвет фона и цвет шрифта на протяжении всего документа. Цвет фона задается один раз для всего документа." width="640"
Цвет фона, цвет шрифта
BODY ... BODY
Между ними располагаются команды, следуя которым браузер выводит информацию в окно документа
Задает цвет фона и цвет шрифта на протяжении всего документа.
Цвет фона задается один раз для всего документа.
Текст заголовка hn n - 1…6, заголовок n -го уровня" width="640"
Заголовки
HTML поддерживает заголовки шести уровней при помощи конструкции:
hn Текст заголовка hn
n - 1…6, заголовок n -го уровня
Линия Простейший графический элемент, который умеет строить браузер.
горизонтальная линия;
size - меняет толщину линии
noshade – выводит горизонтальные линии плоскими
Бегущая строка
Текст
Вставка бегущей стоки с содержанием Текст
Абзац
...
Браузер выполняет команду Р следующим образом:
- Перед абзацем выводится пустая строка.
- Абзац выравнивается по левому краю.
- Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде.
- Перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда новая строка начинается в HTML-коде.
Атрибуты абзаца
- Р align=lef t - выравнивает абзац по левому краю
- Р align=right - выравнивает абзац по правому краю
- Р align=center - выравнивает абзац по центру
- Р align=justify - выравнивает абзац по ширине
... Укрупнение шрифта по отношению к текущему ... Уменьшение шрифта по отношению к текущему текст Изменение размера шрифта CODE … /CODE Выделение моноширинным шрифтом STRONG ... STRONG Усиление текста. Браузер отображает это выделение полужирным шрифтом. I ТЕ... I ТЕ Выделение небольших внутристрочных цитат. Большинство браузеров изображает текстовую ссылку курсивом (наклонным шрифтом). PRE ... PRE браузер выводит текст на экран так, как он записан в программе, — со всеми пробелами и концами строк." width="640"
Оформление текста
текст
Изменение цвета текста внутри документа
BIG...
Укрупнение шрифта по отношению к текущему
...
Уменьшение шрифта по отношению к текущему
текст
Изменение размера шрифта
CODE … /CODE
Выделение моноширинным шрифтом
STRONG ... STRONG
Усиление текста. Браузер отображает это выделение полужирным шрифтом.
I ТЕ... I ТЕ
Выделение небольших внутристрочных цитат. Большинство браузеров изображает текстовую ссылку курсивом (наклонным шрифтом).
PRE ... PRE
браузер выводит текст на экран так, как он записан в программе, — со всеми пробелами и концами строк.
" , используемые для указания тегов. В этих случаях можно вводить нужные символы с помощью специальных кодов. Коды начинаются с символа " амперсанд"(&). За ним следует название символа либо его числовой код в десятичной или шестнадцатеричной системе. Завершает код символ "точка с запятой"(;). Имя Код " " Вид & < Описание " & < двойная кавычка > & амперсанд > знак 'меньше' ¡ ¡ знак 'больше' неразрывный пробел ¡ перевернутый восклицательный знак" width="640"
Специальные символы
Некоторые символы, введенные в HTML документ будут интерпретироваться не так, как задумал автор. Это, например, символы " и "" , используемые для указания тегов.
В этих случаях можно вводить нужные символы с помощью специальных кодов.
Коды начинаются с символа " амперсанд"(&). За ним следует название символа либо его числовой код в десятичной или шестнадцатеричной системе. Завершает код символ "точка с запятой"(;).
Имя
Код
"
"
Вид
&
<
Описание
"
&
<
двойная кавычка
>
&
амперсанд
>
знак 'меньше'
¡
¡
знак 'больше'
неразрывный пробел
¡
перевернутый восклицательный знак
Создание таблиц
Таблица задаётся парой тегов
...
.
Между этими тегами задаются строки таблицы, тегов
...
...
Внутри строк задаются клетки (ячейки) таблицы, теги
Первая строка -- (1,1) / TD Первая ячейка -- (1,2) / TD Вторая ячейка -- / TR Вторая строка -- (2,1) / TD Первая ячейка -- (2,2) / TD Вторая ячейка -- / TR Третья строка -- (3,1) / TD Первая ячейка -- (3,2) / TD Вторая ячейка -- / TR / TABLE (1,1) (2,1) (1,2) (3,1) (2,2) (3,2) На экране эта таблица отображается так :" width="640"
Пример
задания таблицы, состоящей из трёх строк и двух столбцов:
Получите бесплатно свидетельство о публикации сразу после добавления разработки Бесплатное участие и возможность получить свидетельство об участии в вебинаре. border=1
Получите свидетельство о публикации сразу после загрузки работы
Вебинары для учителей
Подробнее
