Разработка уроков по теме "Сайтостроение"
план-конспект урока по информатике и икт (11 класс) на тему

Слайд 1

Теги

Слайд 2

Фон страницы. < body > - тэг тела сайта. bgcolor - цвет фона html- документа.

Слайд 3

Фон страницы. < body > - тэг тела сайта. background - задать картинку фоном всей страницы. Например, есть картинка fon.gif , которая лежит по адресу http://www.1seo.by/images/fon.gif.

Слайд 4

Фон страницы. < body > - тэг тела сайта. background - задать картинку фоном всей страницы. Если файл лежит просто в корне сайта, то можно написать вот так:

Слайд 5

Фон страницы. < body > - тэг тела сайта. background - задать картинку фоном всей страницы. Если fon.gif расположен в подкаталоге foto каталога страницы , то можно написать так:

Слайд 6

Вставка картинок. < img > - тэг вставки картинок. src - указание адреса к картинке < img src =“135.jpg "> < img src =" pop/135.jpg "> < img src =" http://www.debotaniki.ru/wp-content/uploads/2013/03/Maslenitsa.jpg ">

Слайд 7

Вставка картинок. < img > - тэг вставки картинок. width — ширина картинки ( можно указывать пиксели или проценты ) height — высота картинки ( можно указывать пиксели или проценты). < img src ="image.jpg" width="30" height="40"> < img src ="image.jpg" width="35%" height="10%“>

Слайд 8

Вставка картинок. < img > - тэг вставки картинок. align – выравнивание картинки относительно текста < img src ="image.jpg" align="left"> Текст, радом с картинкой. < img src ="image.jpg" align=“left">

Слайд 9

Вставка картинок. < img > - тэг вставки картинок. border – рамка картинки < img src ="image.jpg" border="4">

Слайд 1

Гиперссылки

Слайд 2

Ссылкой может быть любое слово, фраза или даже большой текстовый фрагмент, изображение , кнопка , а также большинство других элементов нашей страницы. Ссылаться можно на любой другой документ , картинку , файл , сайт или любой объект, находящийся внутри в пределах того же документа.

Слайд 3

< a >… с атрибутом href , который указывает на место, куда мы ссылаемся < a href =” laws / law 1. html ”> посмотрите на сам закон

Слайд 4

Если мы хотим сослаться на какой-либо сайт, мы должны записать: < a href = “ http :// www . informlic . ru ” > перейти на сайт informlic . ru

Слайд 5

Если нам нужно сделать всплывающую подсказку к какой-либо ссылке, мы должны использовать атрибут title < a href =” laws / law 1. html” title =” Перейти к странице с законом”> посмотрите на сам закон

Слайд 6

Если же нам нужно сделать картинку ссылкой, вместо текста мы должны указать тэг, описывающий данную картинку: < a h ref =”giperspeed.html ”> < img src =” picture151.jpg”>

Слайд 7

Если нам нужно разместить ссылку на какое либо место в документе, то сначала мы должны назначить идентификатор места какому-либо тэгу, сделав его уникальным :

< aname =”place1”> Когда ночь сгустилась над морем… …… а затем создать ссылку на этот идентификатор, которую часто размещают выше самого места, куда она ссылается , поставив перед идентификатором знак # : < a href =”# place 1”> Стихотворение о море

Слайд 1

Списки Список – это перечисление чего-либо, как правило, имеющее смысловую связь между своими высказываниями.

Слайд 2

Списки бывают: упорядоченные , в которых элементы списка перечислены в определённом последовательном порядке , неупорядоченные , в которых наблюдается обычное перечисление. Идём купаться Отдыхаем Выходим играть в футбол Смотрим фильм (это алгоритм) Упорядоченные списки создаются также тогда, когда нужно подсчитать количество пунктов или впоследствии использовать их номер. капот генератор ремень генератора лампа салона зимняя резина (перечисление)

Слайд 3

< ol >… определяет тип списка (упорядоченный список ) c атрибутом type , который задает вид списка

Слайд 4

Значение атрибута type Описание типа нумерации Вид нумерации 1 арабские цифры 1, 2, 3, ... a буквы нижнего регистра a , b , c , ... A буквы верхнего регистра A, B, C, ... i римские цифры в нижнем регистре i , ii , iii , ... I римские цифры в верхнем регистре I, II, III, ...

Слайд 5

Для того, чтобы задавать каждый элемент списка, необходимо использовать тег < li > , который не имеет закрывающего тега. Идём купаться Отдыхаем Идём играть в футбол Смотрим фильм < ol type=”A”> < li > Идёмкупаться < li > Отдыхаем < li > Идём играть в футбол < li > Смотрим фильм

Слайд 6

< ul >… определяет тип списка (неупорядоченный список ) c атрибутом type , который задает вид символов: чёрным кружком ( “ disk ”) полым кружком (“ circle ”) чёрным квадратиком (“ square ”)

Слайд 7

Для того, чтобы задавать каждый элемент списка, необходимо использовать тег < li > , который не имеет закрывающего тега. Огурцы Лук Чеснок Баклажаны < ul type = “square” > < li > Огурцы < li > Лук < li > Чеснок < li > Баклажаны

Слайд 8

Атрибут type можно использовать и в теге < li > Огурцы Лук Чеснок Баклажаны Кабачки Капуста < ul type = “disc” > < li > Огурцы < li > Лук < li type=“circle” > Чеснок < li > Баклажаны < li > Кабачки < li > Капуста

Слайд 9

Многоуровневый I. Овощи: Баклажан Кабачок II. Фрукты: Яблоко: Ранет Антоновка Груша < ol type =”I”> < li > Овощи < ol type=“a”> < li > Баклажан < li > Кабачок < li > Фрукты < ol type =“1”> < li > Яблоко < ul type=“disk”> < li > Ранет < li > Антоновка < li > Груша

Слайд 1

Таблицы

Слайд 2

Теги:

… - создание таблицы < tr > … - строка … - ячейка строки Таблицы оформляются тегами и Между ними теги и , а между тегами TR теги и . Между тегами и , помещается текст, вставляются картинки и все что будет видно на странице сайта.

Слайд 3

Строка из одной ячейки 1- ячейка 2- ячейка 3- ячейка 4- ячейка

Слайд 4

Внутри тега < TABLE> прописываются атрибуты (параметры): BORDER – граница CELLSPACING – расстояние между ячейками CELLPADDING – отступ внутри ячейки WIDTH , HEIGHT – ширина и высота BGCOLOR – цвет Colspan - ?