'

Язык HTML

Понравилась презентация – покажи это...





Слайд 0

Язык HTML


Слайд 1

Web-дизайн Web – World Wide Web (WWW) Всемирная паутина. Design – проектирование, конструирование. Web-дизайн – проектирование в Интернете.


Слайд 2

HTML HyperTextMarkupLanguage(HTML) – язык разметки гипертекста. Гипертекст - структура, связывающая элементы между собой. HTML-документ – документ, выполненный в формате HTML. Гиперссылка - текст-указатель на другой объект.


Слайд 3

URL-адрес http://www.название.домен./имя файла Пример: http://www.rambler.ru/bisness/works.html


Слайд 4

Структура Web-страницы Тег – начальный и конечный маркер элемента. <p> Текст </p> Пример: <p> <fontcolor=“green”> Текст </font></p> Текст


Слайд 5

Атрибут – параметр или свойство элемента. Пример: <p align=“center”> Текст </p> Текст Структура Web-страницы


Слайд 6

<html> <head> <title> Название страницы </title> </head> <body> … </body> </html> Структура Web-страницы Заголовок Тело Программа


Слайд 7

Форматирование текста


Слайд 8


Слайд 9

Градация красного


Слайд 10

Градация зеленого


Слайд 11

Градация синего


Слайд 12

RGB - Red Green Blue #11 FF 00 0 1 2 3 4 5 6 7 8 9 A B C d E F #00 00 00 – черный #FF FF FF – белый #FF 00 00 – красный #00 FF 00 – зеленый #00 00 FF - синий


Слайд 13

Цвет шрифта можно задать с помощью атрибута color в теге <FONT>, например: <FONT color="FF5800"> Это цветной текст 1 </font> <FONT color="blue"> Это цветной текст 2 </font>


Слайд 14

Чтобы задать цвет фона страницы используется атрибут color внутри тега <BODY>, например: <BODY color=" FFFFCC"> <BODY background="wood.jpg">


Слайд 15

Гиперссылки <A> </a> - создание гиперссылки <A href=“адрес ссылки”> Текст </a> Пример: <A href=“page2.html”> Об авторе</a> <A href=“адрес ссылки”> <IMG src=“Ссылка на рисунок”> </a> <A href=“page2.html”> <IMG src=“knopka.gif”> </a>


Слайд 16

Вид гиперссылок Внутри тега <BODY> Link – цвет ссылок Vlink – цвет посещенных ссылок Alink – цвет активных ссылок Пример: <BODY link=“0000FF” vlink=“CC0066” Alink=“FF0000”>


Слайд 17

Графика на Web-странице <IMG> - элемент для создания ссылки на графический файл (image). src - указатель на файл графики src="Ссылка на файл" Пример: <IMG src="bos2.gif>


Слайд 18

Alt – замещающий текст <IMG src="bos2.gif" alt="Портрет" > height - высота width – ширина <IMG src="bos2.gif" width="76" height="121"> border - задает рамку вокруг объекта Графика на Web-странице


Слайд 19

<TABLE> </table> - основной элемент создания таблицы <tr> </tr> - элемент создания строки <td> </td> - элемент создания ячейки Таблицы в HTML


Слайд 20

Таблицы в HTML


Слайд 21

Таблицы в HTML


Слайд 22

Свойства таблицы в HTML Ширина таблицы <TABLE width="500"> <TABLE width="100%"> 2. Цвет таблицы <TABLE bgcolor="#00CC99”> <td bgcolor="#00FFFF"></td> 3. Ширина границы таблицы <TABLE border="3”>


Слайд 23

Свойства таблицы в HTML 4. Выравнивание по горизонтали Align left - выравнивание влево; right - выравнивание вправо; center – центрирование. Пример: align="center"


Слайд 24

Свойства таблицы в HTML 5. Выравнивание по вертикали Valign top - выравнивание по верхнему краю ячейки center - выравнивание по центру baseline - выравнивание по первой строке Пример: valign=“middle"


Слайд 25


Слайд 26

Задание 1. Составьте таблицу для расписания ваших уроков. Пусть эта таблица состоит из 8 столбцов и 9 строк. Ширина таблицы - 100%. 2. В первом столбце укажите время начала и конца ваших уроков. Выравнивание данных в ячейках по левому краю. 3. В остальных столбцах школьные предметы по дням недели. 4. Выравнивание дней недели - по центру ячейки и жирным шрифтом. 5. Выравнивание названий предметов - по левому краю. 6. У всех столбцов фон сделайте разным цветом. 7. Между заголовком и таблицей поместите рисунок.


×

HTML:





Ссылка: