5.16M

Category:

internet

HTML (1) (1)

1.

ОСНОВНЫЕ СВЕДЕНИЯ ЯЗЫКА
ПРОГРАММИРОВАНИЯ HTML

Язык HTML
Язык HTML - это основа web-сайтов, с его
помощью создается каркас страницы,
которую вы видите в браузере.
Если сравнивать страницу сайта и обычную
бумажную книгу, то на сайте, как и в книге,
есть абзацы и заголовки. В книге есть
название всей книги (по сути самый главный
заголовок), есть названия глав, параграфов в
этих главах и так далее.
Заголовки, абзацы и другие блоки можно
выделить и на странице сайта. Это делается с
помощью HTML тегов.

3.

НАЗВАНИЕ СТРАНИЦЫ
СОДЕРЖАНИЕ СТРАНИЦЫ

4.

Форматирование текста
<B> … </B> – жирный шрифт;
<I> … </I> – курсив;
<U>… </U> – подчеркнутый текст;
<S> … </S> – перечеркнутый шрифт;
<font size=“5”> … </font> – изменение размера
<font color=“red”> … </font> – изменение цвета
<font face=“arial”> … </font> – изменение
гарнитуры
<p>…</p> - параграф
<br> - строка

5.

<body bgcolor=“red" text=“green">
bgcolor="#код цвета"
bgcolor="цвет"

6.

ЗАДАНИЕ 1
1. Вывести на страницу свою фамилию,
имя, отчество, номер школы. Страница
должна иметь заголовок «Данные обо
мне».
Sublime text 3
Что бы создать файл html нужно нажать
ctrl + s выбрать папку и сохранить туда.
Всегда в конце документа должен быть .html
пример (задание1.html или index.html)

7.

ЗАДАНИЕ 2
2. Используя дополнительные теги разместите
каждое слово на отдельной строке, выполните
форматирование:
Фамилия
Имя
Отчество
Школа №

8.

Задание 3
Создайте веб-страницу, содержащую два
коротких предложения минимум 5 слов,
принадлежащих одному абзацу, но
расположенных на разных строках. Используйте
одиночный тег <br> (перенос строки). Не
забывайте про служебный тег <title>. Добавить
цвет фона, изменить шрифт Arial, цвет отдельных
слов должен быть формата (зеленый, синий,
красный)

9.

Списки
Списки, созданные с помощью тега <ul> (сам
список) - неупорядоченные, внутри которого
обязательно должны идти теги <li> (пункты
списка).
Списки, имеющие вместо тега <ul>, тег <ol> упорядоченные.

10.

Задание 4
Создайте свой список с главным названием “Мой
распорядок дня” в который включите то, чем вы
занимаетесь за день. В списке должно быть минимум 7
элементов, каждый из элементов должен быть разного
цвета
Пример:
Список цветов:
Красный
Желтый
Зеленый
Синий

11.

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

12.

Картинки
Давайте теперь разберемся с тем, как разместить
изображение на странице вашего сайта. Для этого
предназначен тег <img>, имеющий обязательный
атрибут src, в котором хранится путь к файлу
картинки.

13.

Ссылки в виде картинок
Ссылкой может быть не только текст, но и
картинка - для этого достаточно тег <img> вложить
в тег <a>. Нажимая на картинку - Вы переходите
на сайт.

14.

Задание 5
Повторите 3 страницы и свяжите их ссылками
друг с другом: страница 1, страница 2, страница 3.
Переход на 1
Переход на 2 стр
Текст о HTML (искать в
интернете)
Текст о CSS (искать в
интернете)

15.

Задание 6
Создайте сайт с минимум 5 страницами с
картинками ваших любимых
актеров/певцов/групп/аниме/игр и тд.
Например(На каждой странице минимум 3
фильма)
Используйте картинки как ссылки, которые будут
вести на сайт с информацией о ваших кумирах.

16.

СОЗДАНИЕ И ФОРМАТИРОВАНИЕ
ТАБЛИЦ

17.

18.

CELLSPACING – определяет
расстояние между рамками ячеек
таблицы в пикселах
CELLPADDING – определяет
расстояние между текстом и краем
ячейки (внутренний отступ)
<TABLE BORDER=1 CELLSPACING="0"
CELLPADDING =‘5’>

19.

WIDTH – определяет ширину
таблицы в пикселах или процентах
<table width=560 px border="5"
<tr><td> Ячейка 1 </td> <td>
Ячейка 2 </td> </tr> </table>
<table width=100% border="5"
<tr><td> Ячейка 1 </td> <td>
Ячейка 2 </td> </tr> </table>

20.

HEIGHT – определяет высоту
таблицы в пикселах или процентах
<table height="560 px"
border="5" <tr><td> Ячейка 1
</td> <td> Ячейка 2 </td> </tr>
</table>

21.

COLSPAN - указывает, какое количество ячеек
будет объединено по горизонтали для указанной
ячейки. COLSPAN=3
ROWSPAN - указывает, какое количество ячеек
будет объединено по вертикали для указанной
ячейки. ROWSPAN=2

22.

ЗАДАНИЕ 4.1

23.

ЗАДАНИЕ 4
Высота – 600 px
Ширина – 600 px

24.

ЗАДАНИЕ 5
3.1 Создать таблицу, общий размер
таблицы:
Высота – 780 px
Ширина – 640 px
3.2 Объединить
нужные ячейки
3.3 Выполнить
заливку ячеек
цветом.

25.

ЗАДАНИЕ 6
Высота – 500 px
Ширина – 500 px

26.

ЗАДАНИЕ 7

27.

ЗАДАНИЕ 8

28.

ВСТАВКА ИЗОБРАЖЕНИЙ

29.

Если изображение расположено в одной папке с
HTML-документом
В этом случае вставка изображения в web-страницу
будет выглядеть следующим образом.
<img src="название.расширение"/>
Если изображение расположено в разных папках с
HTML-документом
В этом случае вставка изображения в web-страницу
будет выглядеть следующим образом.
<img src="полный адрес файла/
название.расширение "/>

30.

<img src="название.расширение"
width = " 560px " height= " 450px " />
.png
.jpeg
.jpg
.webp
.gif

31.

ЗАДАНИЕ 9
1.1 Создать таблицу, общий размер таблицы:
Высота – 960 px
Ширина – 1024 px
1.2 Вставить
изображения,
рассчитав
необходимый
размер.

32.

ОРГАНИЗАЦИЯ ССЫЛОК

33.

<a href="адрес страницы">
Ваш текст </a>
<a> </a> начало/конец ссылки
href="адрес страницы« атрибут,
куда переходим
Ваш текст – текст, на который
нажимаем для перехода по ссылке

34.

<a href="адрес страницы"> <img
src="название.расширение"/></a>
<a> </a> начало/конец ссылки
href="адрес страницы« атрибут,
куда переходим
<img src>– картинка, на которую
нажимаем для перехода по ссылке

35.

target="_blank" атрибут <a>
_blank
Загружает страницу в новое окно
браузера.
title="Пояснительный текст">
атрибут <a>

36.

Задание 10
2.1 Доработайте таблицу, добавив внешние ссылки на
описание достопримечательностей.
Ссылки размещаются
на изображение.
При наведении курсора
на изображение,
должна появляться
пояснительная
надпись с названием
достопримечательности.

37.

ПРОЕКТНАЯ РАБОТА №1

38.

АТЛАС БУДУЩИХ ПРОФЕССИЙ
ИНФОСТИЛИСТ
РАЗРАБОТЧИК
МЕДИАПРОГРАММ
РАЗРАБОТЧИК
ИТ-ИНТЕРФЕЙСОВ
ДИЗАЙНЕР
ИНТЕРФЕЙСОВ
МОДЕРАТОР СООБЩЕСТВ
ПОЛЬЗОВАТЕЛЕЙ
СЕТЕВОЙ ЮРИСТ

39.

Вариант внутренней страницы
Специалист, занимающийся
формированием нормативноправового взаимодействия в
Сети (в том числе в
виртуальных мирах),
разрабатывающий системы
правовой защиты человека и
собственности в Интернете
(включая виртуальную
собственность).
ИНФОСТИЛИСТ
к Атласу профессий

40.

Алгоритм работы над проектом
1. Познакомиться с проектом «Атлас новых
профессий» на сайте atlas100.ru
2. Выбрать 6 наиболее перспективных по вашему
мнению профессий будущего.
3. Разработать табличные прототипы главной и
внутренней страницы.
4. Подобрать цветовую гамму для проекта.
Подобрать текстовый и графический контент.
5. Выполнить табличную верстку сайта.
6. Выполнить тестирование проекта.

41.

Биотехнологии
IT
Об атласе
профессий
Безопасность
Наши партнеры

English Русский Rules