Слайд 1

Основы языка разметки гипертекста

Слайд 2

Оглавление Урок 1 Урок 2 Урок 3 Урок 4 Урок 5 Урок 6 Урок 7 Урок 8

Слайд 3

Урок 1 Введение в HTML, история, работа с текстом

Слайд 4

Понятия : HTML, web- сайта HTML (от англ. Hypertext Markup Language — «язык разметки гипертекста») - это стандартный язык разметки документов во Всемирной паутине. Все web -страницы создаются при помощи языка HTML ( специальных управляющих символов – тегов). Web-сайт состоит из Web-страниц (обычно это файлы с расширением .html или htm ) , объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты. ГЛАВНЫЙ ФАЙЛ НАЗЫВАЕТСЯ index.html или index.htm

Слайд 5

Пример структуры сайта Схема 1 2 урок

Слайд 6

Достоинства HTML Возможность просмотра на любых ПК, под управлением различных операционных систем ( Windows, Linux, Unix, BSD, MacOS, OS/2...) Малый информационный объем

Слайд 7

История 1986 г - Standard Generalized Markup Language (SGML), международная организация по стандартизации (ISO) 1991 г – создан HTML (сотрудники Европейского института физики частиц), для Mosaic (22 тега) 1993 г – HTML версия 1.3 (43 тега) 1995 г - HTML версия 2.0 1996 г - HTML версия 3.0 (таблицы стилей CSS ) 1997 г - HTML версия 4.0 (фреймы, сложные таблицы…) 2005 г – начата разработка версии 5.0 (Консорциумом Всемирной паутины (W3C) )

Слайд 8

Виды тегов Парные (c закрытием, контейнер)

Текс

Не парные ( одинарные)

Слайд 9

Структура HTML

Слайд 10

Мета - теги Помещаются между тегами ... Служат для детального описания страницы ...

Слайд 11

Спецсимволы Иногда возникает необходимость в использовании символа, которого нет на клавиатуре или не воспринемается если мы его напечатаем в документе. Мнемокод Символ Мнемокод Символ   [ ] « « " " ® ® & & ° ° < < ± ± > > µ µ ¤ ¤ ¶ ¶ ¦ ¦ · · § § ¹ ¹ © © € € ª ª

Слайд 12

Форматирование текста Тег Описание Вид

...

Заголовок 1 уровня Заголовок1 ...

...

Заголовок 6 уровня Заголовок6 ... Большой Большой ... Маленький Маленький ^... Верхний индекс Верхний индекс _... Нижний индекс Нижний индекс ... Жирный Жирный ... Курсив Курсив ... Подчеркнутый Подчеркнутый ... Перечеркнутый Перечеркнутый

Слайд 13

Форматирование текста. Пример. HTML - код Пробный текст Вид на экране Пробный текст

Слайд 14

Форматирование текста Размерами и начертаниями шрифта можно управлять также с помощью тега FONT и его атрибутов : . .. Например : Текст Цвет текста можно задать следующим образом : Текст или Текст

Слайд 15

Таблица цветов Название Цвет Hex aqua #00FFFF black #000000 blue #0000FF fuchsia #FF00FF gray #808080 green #008000 lime #00FF00 maroon #800000 navy #000080 olive #808000 purple #800080 red #FF0000 silver #C0C0C0 teal #008080 white #FFFFFF yellow #FFFF00

Слайд 16

Выравнивание текста Тег Описание < P >Текст Добавляет новый параграф, по умолчанию выровненный по левому краю. < BR > Переход на новую строку

Текст

Выравнивание по центру.

Текст

Выравнивание по левому краю.

Текст

Выравнивание по правому краю.

Текст

Выравнивание по ширине.

Слайд 17

Сочетания тегов Теги можно комбинировать друг с другом получая нужный результат. Например, напечатать на экране жирным курсивом текст. Очередность сочений не имеет значения. Код HTML: Текст

Слайд 18

Сочетания тегов Код HTML:

Текст

Слайд 19

Урок 2 Выполните задание №1 , №2 в классе.

Слайд 20

Урок 3 Списки и изображения

Слайд 21

Списки Нумерованные Маркированные Возможно создавать вложенные списки

Слайд 22

Списки Располагается внутри контейнера

...

(нумерованный список) или

...

(маркированный список) А каждый элемент определяется тегами

…

Слайд 23

Маркированный список HTML код :

Прикладное ПО:

• СУБД
• Текстовые редакторы
• Графические редакторы
• Графические редакторы

Вид на экране Прикладное ПО : СУБД Текстовые редакторы Графические редакторы Графические редакторы

Слайд 24

Нумерованный список HTML код :

Прикладное ПО:

1. Системное ПО
2. Прикладное ПО
3. Системы программирование

Вид на экране : Прикладное ПО: Системное ПО Прикладное ПО Системы программирование

Слайд 25

Нумерованный список По умолчанию элементы списка нумеруются по порядку 1, 2, 3… При помощи атрибута TYPE можно изменить стиль нумерации. Значение TYPE Нумерация A A, B, C.. a a, b, c.. I I, II, III.. i i, ii, iii.. 1 1. 2. 3..

Слайд 26

Нумерованный список HTML-код:

1. элемент 1
2. элемент 2
3. элемент 3

1. элемент 1
2. элемент 2
3. элемент 3

Отображение в браузере: элемент 1 элемент 2 элемент 3 элемент 1 элемент 2 элемент 3

Слайд 27

Нумерованный список* При помощи атрибутов START VALUE можно изменить порядок нумерации списка. START - служит для задания начального номера списка, отличного от 1. VALUE - дает возможность назначить произвольный номер любому элементу списка. Пример: HTML-код:

5. элемент 1
9. элемент 2
10. элемент 3

Отображение в браузере: 5. элемент 1 9. элемент 2 10. элемент 3

Слайд 28

Вложенный список

ПО:

1. Системное ПО
2. Прикладное ПО
• СУБД
• Текстовые редакторы
• Графические редакторы
• Графические редакторы
3. Системы программирование

HTML код : Вид на экране

Слайд 29

Вставка изображений Для встраивания изображения в документ используется тег , имеющий обязательный параметр src, который определяет адрес файла с картинкой и alt, определяющий альтернативный текст.

Слайд 30

Вставка изображений . Форматы. Формат Расширение Количество оттенков GIF *.gif 256 JPEG *.jpg 16 млн. PNG *.png 281 трлн.

Слайд 31

Вставка изображений. Gif * 256 цветов поддерживает загрузку файла с чередованием строк возможен прозрачный фон осуществляет анимацию изображения Используют для рисунков и gif-анимации

Слайд 32

Вставка изображений. JPEG * 16 млн. цветов фотографическое качество изображений позволяет задать еще более высокую степень сжатия за счет потери качества Используют для фотографий

Слайд 33

Вставка изображений. PNG * 281 трлн. цветов поддерживает загрузку файла с чередованием строк возможен прозрачный фон (с различной степенью прозрачности) помехоустойчивый, осуществляет проверку на ошибки при передаче файлов Используют для фотографий

Слайд 34

Вставка изображений . Примеры Изображение risunok.gif находится в той же папке что и html файл Изображение risunok.gif находится в папке katalog по отношению к html файлу Находится на компьютере в папке c:\site\risunok.gif Находится на сайте http://test.ru/

Слайд 35

Самостоятельная работа Выполните задания №3, №4

Слайд 36

Урок 4 Гиперссылки, графическое оформление

Слайд 37

Гиперссылка Гиперссылка — это связь между веб-страницами или файлами. Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web-страницу, указанную в адресной части ссылки. Часто гиперссылка указывает на другую веб-страницу, но может также указывать на рисунок, мультимедийный файл, адрес электронной почты или программу. См. схема 1.

Слайд 38

Гиперссылки. Формат.

Слайд 39

Гиперссылки . Примеры. Ссылки с абсолютным адресом Персональная страничка Сылка на файл Ссылки с относительным адресом Персональная страничка Сылка на файл Ссылка на страничку Ссылки на e-mail E-mail для связи

Слайд 40

Гипперссылка в виде изображения Вокруг изображения-ссылки автоматически добавляется рамка толщиной один пиксел и цветом, совпадающим с цветом текстовых ссылок. Чтобы убрать рамку, следует у тега установить параметр border="0"

Слайд 41

Гиперссылка в пределах страницы* Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга . Имя должно содержать только буквы и цифры. Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта. HTML - код Наверх страницы В то место, куда надо сделать переход надо вставить:

Слайд 42

Графическое оформление Цвет фона веб-страницы задается с использованием параметра bgcolor тега . HTML - код : ...

...

Цвет можно указывать в шестнадцатеричном значении или по его имени.

Слайд 43

Графическое оформление В качестве фона можно использовать любое подходящее для этого изображение. Фон не должен отвлекать внимание от текста, при этом должен хорошо сочетаться с цветовой гаммой веб-страницы и быть маленьким по размеру . Цвет фона веб-страницы задается с использованием атрибута (параметра) background тега . HTML – код : ...

...

Internet Explorer позволяет сделать фон неподвижным с помощью параметра bgproperties="fixed" тега .

Слайд 44

Урок 5 Выполните задание №5, 6

Слайд 45

Урок 6 Таблицы

Слайд 46

Таблицы Для создания таблицы служит тэг

. Как известно таблица состоит из строк, а строки, в свою очередь состоят из ячеек. Для определения строк служит тэг , для создания ячеек -

. По умолчанию браузер располагает заголовок таблицы по центру над ней. При помощи атрибута ALIGN со значением bottom можно разместить заголовок под таблицей. HTML- код :

Заголовок таблицы

1

2

Вид на экране :

Слайд 49

Таблицы Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN. Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево. Атрибут VALIGN выравнивает данные по вертикали. HTML- код :

1111 2222	22222
Нижняя ячейка	Нижняя ячейка

Вид на экране :

Слайд 50

Таблицы Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). HTML- код :

Ширина 200 пикселей

Ширина 60%

Вид на экране :

Слайд 51

Таблицы При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку. Атрибут COLSPAN тэгов

,

. Слайд 47 Таблицы HTML- код : 1 2 3 4 5 6 Вид на экране : Слайд 48 Таблицы Для создания заголовка таблицы служит тэг

,

позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки. Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца. Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию. Слайд 52 Таблицы HTML- код : 1111 22222 33333 44444 55555 66666 77777 88888 99999 Вид на экране : Слайд 53 Урок 7 Выполните задание № 7 Слайд 54 Урок 8 - зачет Выполните тест Предварительный просмотр: Подписи к слайдам: Слайд 1 ПРОГРАММИРОВАНИЕ ЦИКЛИЧЕСКИХ АЛГОРИТМОВ НАЧАЛА ПРОГРАММИРОВАНИЯ Слайд 2 Ключевые слова while ( цикл-ПОКА) repeat (цикл-ДО) for (цикл с параметрами) Слайд 3 Программирование циклов с заданным условием продолжения работы Общий вид оператора: while < условие > do < оператор > Здесь: < условие > - логическое выражение; пока оно истинно, выполняется тело цикла; < оператор > - простой или составной оператор, с помощью которого записано тело цикла. Тело цикла Условие да нет Слайд 4 да нет Начало Список данных x, y, r, q - цел x, y r:=x q:=0 r >= у r:= r - y q:= q +1 Конец q, r program n_14; var x, y, q, r: integer; begin writeln ('Частное и остаток'); write ('Введите делимое x >>'); readln (x); write ('Введите делитель y >>'); read (y); r:=x; q:=0; while r>= y do begin r:=r-y; q:=q+1 end; writeln ('Частное q=', q ); writeln ('Остаток r=', r ) end. Слайд 5 Программирование циклов с заданным условием окончания работы Общий вид оператора: repeat < оператор1; оператор2; …; > until < условие > Здесь: < оператор1 >; < оператор2 >; … - операторы, образующие тело цикла; < условие > - логическое выражение; если оно ложно, то выполняется тело цикла. Тело цикла Условие да нет Слайд 6 program n_15; var i: integer; x: real; begin writeln ('График тренировок'); i:=1; x:=10; repeat i:=i+1; x:=x+0.1*x; until x >=25; writeln ('Начиная с ', i , '-го дня спортсмен будет пробегать 25 км') end. Конец да нет Начало Список данных i – цел x - вещ i := 1 x := 10 x >= 25 i := i +1 x := x +0 . 1 * x i Слайд 7 Программирование циклов с заданным числом повторений Общий вид оператора: for < параметр >:=< начальное_значение > to < конечное_значение > do < оператор > Здесь: < параметр > - переменная целого типа; < начальное_значение > и < конечное_значение > - выражения того же типа, что и параметр; < оператор > - простой или составной оператор - тело цикла. После каждого выполнения тела цикла происходит увеличение на единицу параметра цикла; условие выхода из цикла - превышение параметром конечного значения. Тело цикла i = i 1 , i 2 Слайд 8 program n_16; var i,n:integer;a,y:real; begin writeln ('Возведение в степень'); write ('Введите основание a >>'); readln (a); write ('Введите показатель n >>'); readln (n); y:=1; for i:=1 to n do y:=y*a; writeln ('y=', y) end. Конец Начало Список данных i, n – цел a, y – вещ y := 1 y := y * a y a, n i = 1 , n Слайд 9 Различные варианты программирования циклического алгоритма Для решения одной и той же задачи могут быть созданы разные программы. Организуем ввод целых чисел и подсчёт количества введённых положительных и отрицательных чисел. Ввод должен осуществляться до тех пор, пока не будет введён ноль. В задаче в явном виде задано условие окончания работы. Воспользуемся оператором repeat . Слайд 10 program n_17; var n, k1, k2: integer; begin k1:=0; k2:=0; repeat write ('Введите целое число>>'); readln (n); if n>0 then k1:=k1+1; if n<0 then k2:=k2+1; until n=0; writeln ('Введено:'); writeln ('положительных чисел – ', k1 ); writeln ('отрицательных чисел – ', k2 ) end. да нет n n > 0 Начало Список данных n, k1, k2 - цел n < 0 n = 0 k1, k2 Конец k1:=0 k2:=0 k1:=k1+1 k2:=k2+1 да да нет нет Слайд 11 Ввод осуществляется до тех пор, пока не будет введён ноль. Работа продолжается, пока n 0. Воспользуемся оператором while : program n_18; var n, k1, k2: integer; begin k1:=0; k2:=0; n:=1; while n<>0 do begin writeln ('Введите целое число>>'); read (n); if n>0 then k1:=k1+1; if n<0 then k2:=k2+1; end; writeln ('Введено:'); writeln ('положительных – ', k 1 ); writeln ('отрицательных – ', k2 ) end. да n > 0 да нет Начало Список данных n, k1, k2 - цел n <> 0 k1, k2 Конец k1:=0 k2:=0 n:=1 k1:=k1+1 k2:=k2+1 нет n Слайд 12 Самое главное В языке Паскаль имеются три вида операторов цикла: while цикл-ПОКА) repeat (цикл-ДО) for ( цикл с параметром). Если число повторений тела цикла известно, то лучше воспользоваться оператором for ; в остальных случаях используются операторы whil e и repeat . Слайд 13 Вопросы и задания Дана последовательность операторов: a:=1; b:=2; while a+b<8 do b egin a:=a+1; b:=b+2; end; s:=a+b Сколько раз будет повторен цикл и какими будут значения переменных a, b, s после исполнения этой последовательности операторов? Пример входных данных Пример выходных данных Введите n> 5 5! = 120 Введите n> 6 6! = 720 Требовалось написать программу вычисления факториала числа n (факториал числа n есть произведение всех целых чисел от 1до n ). Программист торопился и написал программу неправильно. Ниже приведён фрагмент его программы, в котором содержится пять ошибок: k:=1; f:=0; while k8; s:=a+b Сколько раз будет повторён цикл и какими будут значения переменных a, b, s после исполнения этой последовательности операторов? Напишите программу, в которой осуществляется ввод целых чисел (ввод осуществляется до тех пор, пока не будет введён ноль) и подсчёт суммы и среднего арифметического введённых положительных чисел. Используйте оператор repeat . Напишите программу, в которой осуществляется ввод целых чисел (ввод осуществляется до тех пор, пока не будет введён ноль) и определение максимального (наибольшего) из введённых чисел. Используйте оператор repeat. Напишите программу вычисления наибольшего общего делителя двух целых чисел: а) используйте оператор repeat ; б) используйте оператор while . Сколько раз будет выполнен цикл? а) for i:=0 to 15 do s:=s+1; б) for i:=10 to 15 do s:=s+1; в) for i:=-1 to 1 do s:=s+1; г) for i:=10 to 10 do s:=s+1; д) k:=5; for i:=k-1 to k+1 do s:=s+1; Напишите программу, которая 10 раз выводит на экран ваши имя и фамилию. Напишите программу, выводящую на экран изображение шахматной доски, где чёрные клетки изображаются звёздочками, а белые - пробелами. Рекомендуемый вид экрана после выполнения программы представлен ниже: * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Напишите программу, которая вычисляет сумму: а) первых n натуральных чисел; б) квадратов первых n натуральных чисел; в) всех чётных чисел в диапазоне от 1 до n ; г) всех двузначных чисел. Напишите программу, которая генерирует 10 случайных чисел в диапазоне от 1 до 20, выводит эти числа на экран и вычисляет их среднее арифметическое. Напишите программу, которая выводит на экран таблицу степеней двойки (от нулевой до десятой). Рекомендуемый вид экрана после выполнения программы представлен ниже: Таблица степеней двойки: 0 1 1 2 2 4 3 8 4 16 5 3 2 6 64 7 128 8 256 9 512 10 1024 Пример входных данных Пример выходных данных Введите n> 5 5 * 2 = 10 5 * 3 = 15 5 * 4 = 20 5 * 5 = 25 5 * 6 = 30 5 * 7 = 35 5 * 8 = 40 5 * 9 = 45 5 * 10 = 50 Напишите программу, которая выводит на экран таблицу умножения на n ( n - целое число в диапазоне от 2 до 10, вводимое с клавиатуры). Какой из трёх рассмотренных операторов цикла является, по вашему мнению, основным, т. е. таким, что им можно заменить два других? Обоснуйте свою точку зрения. Слайд 14 Опорный конспект w hile ( цикл-ПОК A) repeat (цикл-ДО) for ( цикл с параметром) Число повторений цикла известно В языке Паскаль имеются три вида операторов цикла: Число повторений цикла неизвестно