Презентация на тему "Основы сайтостроения".
презентация к уроку на тему

Слайд 1

«Основы сайтостроения»

Слайд 2

Основные понятия Web-дизайна Web-дизайн представляет собой деятельность по созданию Web-страниц и Web-сайтов. Web-страница – документ, который можно открыть и посмотреть с помощью программы просмотра – браузера. Web-сайт – совокупность Web-страниц, объединенных по смыслу и навигационно. Web-сервер – компьютер, подключенный к сети, на котором хранятся Web-страницы и Web-сайты .

Слайд 3

Веб-сайт (от англ. «место в сети») - место в Интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц , которые воспринимаются как единое целое.

Слайд 4

Программы для просмотра Web - страниц Примеры браузеров: Internet Explorer, Mozilla Firefox Opera Google Chrome. Веб-обозреватель, браузер (от англ. Web browser)

Слайд 5

Этапы создания сайта Определение цели создания сайта Выбор темы сайта Определение содержания сайта Построение структуры сайта Разработка дизайна сайта Регистрация и размещение сайта в Интернете

Слайд 6

Умение создавать Web-сайты со временем становится актуальным навыком на сегодняшний день. Как же создаются web – страницы? Опубликовать сайт в Интернете настолько просто и доступно, что эта возможность привлекает все большее число людей.

Слайд 7

Язык HTML ( от англ. HyperText Markup Language) – это язык гипертекстовой разметки. Язык гипертекстовой разметки HTML HTML-страница – это по сути текстовый файл, который можно создать с помощью обычного Блокнота. Помимо текста, который будет выводиться браузером при просмотре такой странички, этот файл содержит невидимый для программы навигации по Сети и пользователя код. Вот этот код и есть язык гипертекстовой разметки – HTML.

Слайд 8

Пример

Слайд 9

Блокнот ( для создания страницы ) Internet Explorer (для интерпретации файлов) Программы для создания HTML – файлов:

Слайд 10

Структура HTML -файла … … …

Слайд 11

Цвет фона, цвет шрифта < BODY > ... Между ними располагаются команды, следуя которым браузер выводит информацию в окно документа Задает цвет фона и цвет шрифта на протяжении всего документа. Цвет фона задается один раз для всего документа.

Слайд 12

Заголовки < hn > Текст заголовка n - 1…6, заголовок n -го уровня HTML поддерживает заголовки шести уровней при помощи конструкции:

Слайд 13

Линия Простейший графический элемент, который умеет строить браузер. Текст Вставка бегущей стоки с содержанием Текст

---

---

---

горизонтальная линия; size - меняет толщину линии noshade – выводит горизонтальные линии плоскими Бегущая строка

Слайд 14

Абзац <Р>... Браузер выполняет команду Р следующим образом: Перед абзацем выводится пустая строка. Абзац выравнивается по левому краю. Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде. Перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда новая строка начинается в HTML-коде.

Слайд 15

Атрибуты абзаца < Р align=lef t> - выравнивает абзац по левому краю < Р align=right> - выравнивает абзац по правому краю < Р align=center> - выравнивает абзац по центру < Р align=justify> - выравнивает абзац по ширине

Слайд 16

Оформление текста текст Изменение цвета текста внутри документа < BIG>... Укрупнение шрифта по отношению к текущему ... Уменьшение шрифта по отношению к текущему текст Изменение размера шрифта < CODE >…< /CODE > Выделение моноширинным шрифтом < STRONG >... Усиление текста. Браузер отображает это выделение полужирным шрифтом. <С I ТЕ>... Выделение небольших внутристрочных цитат. Большинство браузеров изображает текстовую ссылку курсивом (наклонным шрифтом). < PRE >... браузер выводит текст на экран так, как он записан в программе, — со всеми пробелами и концами строк.

Слайд 17

Специальные символы Некоторые символы, введенные в HTML документ будут интерпретироваться не так, как задумал автор. Это, например, символы "<" и ">" , используемые для указания тегов. В этих случаях можно вводить нужные символы с помощью специальных кодов. Коды начинаются с символа " амперсанд"(&). За ним следует название символа либо его числовой код в десятичной или шестнадцатеричной системе. Завершает код символ "точка с запятой"(;). Имя Код Вид Описание " " " двойная кавычка & & & амперсанд < < < знак 'меньше' > > > знак 'больше'     неразрывный пробел ¡ ¡ ¡ перевернутый восклицательный знак

Слайд 18

Таблица задаётся парой тегов

... . Между этими тегами задаются строки таблицы, тегов ... Внутри строк задаются клетки (ячейки) таблицы, теги ... ). Создание таблиц

Слайд 19

Пример задания таблицы, состоящей из трёх строк и двух столбцов: