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

Мастер-класс "Основы сайтостроения"

Скачать:

ВложениеРазмер
Файл master-klass_osnovy_saytostroeniya.ppsx1.48 МБ

Предварительный просмотр:


Подписи к слайдам:

Слайд 1

Мастер-класс «Основы сайтостроения» Центр Ювента 2017г.

Слайд 2

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

Слайд 3

Программы для просмотра Web - страниц Microsoft Internet Explorer Netscape Communicator The Bat! Opera и т.д.

Слайд 4

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

Слайд 5

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

Слайд 6

Пример

Слайд 7

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

Слайд 8

Структура HTML -файла заголовок окна … … …

Слайд 9

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

Слайд 10

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

Слайд 11

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




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

Слайд 12

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

Слайд 13

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

Слайд 14

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

Слайд 15

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

Слайд 16

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

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

Слайд 17

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