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