Презентация - "Создание сайтов на языке html"
- Презентации / Другие презентации
- 0
- 27.12.23
Просмотреть и скачать презентацию на тему "Создание сайтов на языке html"
Создание сайтов на языке html
9 класс
Общие сведения о языке html
Публикации во Всемирной паутине (World Wide Web) реализуются в форме Web-сайтов
Web-сайт состоит из Web-страниц, объединенных гиперссылками
Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты
Создание Web-сайтов можно осуществлять с помощью языка HTML
HTML – Hyper Text Markup Language
язык разметки гипертекста
не является языком программирования, отвечает только за расположение элементов (текста, рисунков) в окне браузера
состоит из простых команд – тегов
Теги
управляют представлением информации на экране
заключаются в угловые скобки <>…</>
бывают парные и непарные.
Структура HTML-документа
HTML-документ - текстовый файл с расширением .html или .htm, содержащий набор тегов
<html>
<head>
заголовок
</head>
<body>
сама страница
</body>
</html>
Заголовок страницы
<head>
<title>Заголовок, который отображается на ярлыке вкладки</title>
</head>
Форматирование символов
Символы, заключенные между следующими тегами отображают:
<b>полужирный шрифт</b>
<i>курсивный шрифт</i>
<u>подчеркнутый шрифт</u>
текст<sub>нижний индекс</sub>
текст<sup>верхний индекс</sup>
полужирный шрифт
курсивный шрифт
подчеркнутый шрифт
текстнижний индекс
текстверхний индекс
Текст, заключенный между тегами <FONT….> ……..</FONT> имеет заданный размер, цвет и гарнитуру.
Для этого используются атрибуты:
SIZE = значение от 1 до 7
COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), или шестнадцатеричный код от 000000 до FFFFFF
<font size = 5 color = maroon face=Arial>
Любой текст
</font>
Любой текст
Если в тексте имеется несколько пробелов между словами или символы табуляции, то браузер на экран выводит всего один пробел.
Если необходимы дополнительные пробелы то между словами надо добавить - символьный примитив.
Одиночный тег <BR> разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.
Текст 4 пробела2 табуляции
Символьный примитив
Без тега br новой строки не будет
Текст 4 пробела 2 табуляции
Символьный примитив Без тега br новой строки не будет
Форматирование текста по абзацам
Тег <p> …</p> - начинает абзац с новой строки
Новый абзац отделяется от предыдущего двойным межстрочным интервалом
<p align=center>по центру</p>
<p align=justify>по ширине</p>
<p align=left>по левому краю</p>
<p align=right>по правому краю</p>
по центру
по ширине
по левому краю
по правому краю
Задание цвета всего текста и фона документа
<html>
<head>
Заголовок
</head>
<body bgcolor = silver text=maroon>
Текст страницы
</body>
</html>
Заголовок Текст страницы
Описываются в начальном теге тела документа <body>
<body bgcolor=цвет фона документа text=цвет текста>
Заголовки разных уровней
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6 align=center>Заголовок 6</h6>
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6
Тегами <hn>….</hn> оформляют заключенный в них текст
Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому
Теги <hn>….</hn> могут иметь атрибуты align=center, left, right.
Простые списки
Вставка изображений
Всеми браузерами поддерживаются форматы .gif, .jpg.
<img src=’имя графического файла’>
Необязательные атрибуты тега <img>:
alt = альтернативный текст
border = толщина обрамляющей рамки в пикселах, 0 нет рамки
height = высота изображения в пикселах или %
width = ширина изображения в пикселах или %
hspace = свободное пространство слева и справа от изображения в пикселах или %
vspace = свободное пространство сверху и снизу от изображения в пикселах или %
align = left, right, middle выравнивание изображения
Гиперссылки
Связь с другими документами организуется тегами <a>…</a>
<a href=”имя файла на который надо перейти”> текст гиперссылки </a>
Рисунок также можно сделать, как гиперссылку, написав:
<a href ='имя файла на который переходим'><img src = ’имя графического файла’></a>
Таблицы
<table border = 2 width=400 height=100>
<tr> <td bgcolor=silver> 1</td> <td> 2</td> </tr>
<tr bgcolor=pink> <td> 3</td> <td> 4</td> </tr>
</table>
Создание сайта
header
footer
sidebar
sidebar
main
<table border="0">
<tr>
<td colspan="3"><h1><img src='logo.png'>Заголовок</h1></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Контакты</td>
</tr>
</table>
Создаем таблицу без границ (border="0").
Для этого используем парный тег <table>
<table border="0">
<tr>
<td colspan="3"><h1><img src='logo.png'>Заголовок</h1></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Контакты</td>
</tr>
</table>
Добавляем в таблицу строку для заголовка с помощью парного тега <tr>
<table border="0">
<tr>
<td colspan="3"><h1><img src='logo.png'>Заголовок</h1></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Контакты</td>
</tr>
</table>
Добавляем ячейку с помощью парного тега <td>.
Так как всего в таблице 3 столбца, первая строка должна быть растянута на 3 ячейки с помощью атрибута colspan="3"
<table border="0">
<tr>
<td colspan="3"><h1><img src='logo.png'>Заголовок</h1></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Контакты</td>
</tr>
</table>
В этой ячейке будет заголовок страницы
(можете написать любое название своей страницы)
<table border="0">
<tr>
<td colspan="3"><h1><img src='logo.png'>Заголовок</h1></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Контакты</td>
</tr>
</table>
Добавляем в таблицу вторую строку - для основного содержания страницы
<table border="0">
<tr>
<td colspan="3"><h1><img src='logo.png'>Заголовок</h1></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Контакты</td>
</tr>
</table>
Добавляем в таблицу вторую строку - для основного содержания страницы
<table border="0">
<tr>
<td colspan="3"><h1><img src='logo.png'>Заголовок</h1></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Контакты</td>
</tr>
</table>
В этой строке будет три столбца.
Мы их временно заполним пустыми символами
Можете заполнить их разными словами, чтобы увидеть, где они расположены
для меню
для основного текста
для блока справа
<table border="0">
<tr>
<td colspan="3"><h1><img src='logo.png'>Заголовок</h1></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Контакты</td>
</tr>
</table>
Аналогично первой строке добавляем третью строку, растянутую на три ячейки.
Это будет “подвал” для контактной информации
Стили
<head>
<title>Заголовок</title>
<style>
table {
width: 100%;
border: 0;
}
</style>
</head>
Задаем стиль таблицы, в которой будет размещена вся информация страницы.
Стили описываются в блоке <head> внутри парного тега <style>.
Задаем ширину таблицы 100%, она будет меняться в зависимости размера окна, и толщину границ 0.
Стили
td.header {
background-color: #ffb700;
}
Задаем стиль верхней части - задаем цвет фона
(можно выбрать любой)
<tr>
<td colspan="3" class = "header">Заголовок</td>
</tr>
Чтобы стиль применился, необходимо дописать в ячейке class = “header”
td.footer {
background-color: #ffb700;
text-align: center;
font-family: Arial;
padding: 10px;
}
Задаем стиль подвала - задаем цвет фона
(можно выбрать любой),
выравнивание текста (по центру), шрифт (Arial) и отступы вокруг текста
<tr>
<td colspan="3" class="footer">Контакты</td>
</tr>
Применяем стиль к нужной ячейке
td.sidebar {
background-color: #FFEFDB;
width: 15%;
vertical-align: top;
font-family: Arial;
padding: 10px;
font-size: 24px;
}
Задаем стиль бокового меню:
устанавливаем фоновый цвет, ширину в процентах, выравнивание, шрифт, отступы вокруг текста и размер текста.
<tr>
<td class="sidebar">Меню</td>
<td>Основной текст</td>
<td class="sidebar">Пустой блок справа</td>
</tr>
Применяем этот стиль к ячейке таблицы, в которой расположено МЕНЮ и к ПУСТОМУ БЛОКУ СПРАВА
td.sidebar {
background-color: #FFEFDB;
width: 15%;
vertical-align: top;
font-family: Arial;
padding: 10px;
font-size: 24px;
}
Задаем стиль бокового меню:
устанавливаем фоновый цвет, ширину в процентах, выравнивание, шрифт, отступы вокруг текста и размер текста.
таблицы
стили
атрибуты
Заполнение страницы. Задание
определите тему страницы
найдите небольшую информацию в интернете по теме
выберите изображение и сохраните его в папке с файлом страницы
<tr>
<td class="sidebar">Меню</td>
<td>Основной текст</td>
<td class="sidebar">Пустой блок справа</td>
</tr>
Будем оформлять основной текст в виде таблицы
<tr>
<td class="sidebar">Меню</td>
<td>
</td>
<td class="sidebar">Пустой блок справа</td>
</tr>
Удалите лишние слова и приготовьте место для тегов
<tr>
<td class="sidebar">Меню</td>
<td>
<table></table>
</td>
<td class="sidebar">Пустой блок справа</td>
</tr>
Вставьте теги таблицы
<tr>
<td class="sidebar">Меню</td>
<td>
<table><tr></tr></table>
</td>
<td class="sidebar">Пустой блок справа</td>
</tr>
Добавьте в таблицу одну строку
<tr>
<td class="sidebar">Меню</td>
<td>
<table>
<tr><td></td><td></td></tr>
</table>
</td>
<td class="sidebar">Пустой блок справа</td>
</tr>
В эту строку добавьте две ячейки
<tr>
<td class="sidebar">Меню</td>
<td>
<table>
<tr><td>Текст по теме</td><td></td></tr>
</table>
</td>
<td class="sidebar">Пустой блок справа</td>
</tr>
В первую ячейку вставьте найденный текст
<tr>
<td class="sidebar">Меню</td>
<td>
<table>
<tr><td>Текст по теме</td><td><img src='3.png'></td></tr>
</table>
</td>
<td class="sidebar">Пустой блок справа</td>
</tr>
Во вторую ячейку вставьте найденное изображение
Изображение слишком большое.
Чтобы все изображения были одинакового размера, добавим стиль для объектов img в блок style
img{
height: 250px;
width: auto;
}
Задание
добавьте еще одну строку
заполните ее по примеру первой строки
<table>
<tr><td>Текст по теме</td><td><img src='3.png'></td></tr>
<tr><td>Текст по теме 2</td><td><img src='4.png'></td></tr>
</table>
<td class="sidebar">Меню сайта
<ul>
<li>Главная</li>
<li>Вторая страница</li>
</ul>
</td>
Добавим пункты меню: Главная и Вторая страница (название страницы можете изменить).
Оформим меню в виде ненумерованного списка
td.sidebar>ul {
list-style: none;
padding-left: 0;
}
Изменим внешний вид списка меню.
Для этого добавим стиль в блок style
<table border="0">
<tr>
<td colspan="3"><h1><img src='logo.png'>Заголовок</h1></td>
</tr>
<tr>
<td>Меню</td>
<td>Основной текст</td>
<td>Пустой блок справа</td>
</tr>
<tr>
<td colspan="3">Контакты</td>
</tr>
</table>
Окружим слово Заголовок тегами h1.
Так заголовок страницы будет выделен относительно другого текста.
h1{
font-weight: 100;
text-transform: uppercase;
color: white;
font-family: Arial;
font-size: 67px;
line-height: 54px;
text-shadow: 2px 5px 0 rgba(0,0,0,0.2);
}
Изменим стиль заголовка h1:
толщину букв, регистр, цвет, шрифт, размер, высоту, тень.
Этот стиль описываем в блоке style
Задание
выберите изображения для логотипа вашей страницы
добавьте этот рисунок между тегами h1
<td colspan="3"><h1><img src='logo.png'>Заголовок</h1></td>
Логотип слишком большой.
Мы сами задали стиль для изображений.
Чтобы логотип был подходящего размера, создадим класс .logo в блоке style
.logo{
height: 100px;
width: auto;
vertical-align: middle;
padding: 10px;
}
Чтобы стиль применился к логотипу, необходимо указать класс изображения в атрибутах
<td colspan="3"><h1><img src='logo.png' class="logo"> Заголовок </h1></td>
td.article {
height: 200px;
width: 70%;
vertical-align: top;
font-family: Arial;
padding: 10px;
font-size: 20px;
}
Опишем стиль ячейки основного текста:
зададим высоту, ширину, выравнивание, шрифт, отступы и размер шрифта
<tr>
<td class="sidebar">Меню</td>
<td class="article">
<table>
<tr><td>Текст по теме</td><td><img src='3.png'></td></tr>
<tr><td>Текст по теме 2</td><td><img src='4.png'></td></tr>
</table>
</td>
<td class="sidebar">Пустой блок справа</td>
</tr>
Применим новый стиль к тексту
Задание
создайте копию файла с кодом страницы, измените его название
Рекомендация: главную страницу назовите Main.html, вторую страницу назовите 2.html
Измените на второй странице текст и изображения так, чтобы они не совпадали с текстом и изображениями на первой странице
(можете изменить количество строк в таблице для основного текста)
Как видите, все стили уже применились к этой странице
<td class="sidebar">Меню сайта
<ul>
<li><a href="Main.html">Главная</a></li>
<li><a href="2.html">Вторая страница</a></li>
</ul>
</td>
В кодах обеих страниц добавьте в меню ссылки на страницы с помощью парных тегов </a> и атрибутом href
<table>
<tr><td><h2>Обычный куб 3х3</h2>
<p>Механическая головоломка, изобретённая в 1974 году венгерским скульптором и преподавателем архитектуры Эрнё Рубиком.</p>
<h3>Сложность: 3/5</h3>
</td><td><img src='3.png'></td></tr>
<tr><td><h2>Куб 4х4</h2>
<p>Вариант куба 3х3. Решается по тем же формулам за исключением нюансов с возникающими паритетами.</p>
<h3>Сложность: 4/5</h3>
</td><td><img src='4.png'></td></tr>
</table>
изображения
списки
ссылки
заголовки
классы
абзацы
Задание
Доработайте свои страницы.
удалите лишний текст из правого блока
оформите основной текст, используя теги <p></p>, <h2></h2>, <h3></h3> и другие (пример на следующем слайде)
<table>
<tr><td><h2>Обычный куб 3х3</h2>
<p>Механическая головоломка, изобретённая в 1974 году венгерским скульптором и преподавателем архитектуры Эрнё Рубиком.</p>
<h3>Сложность: 3/5</h3>
</td><td><img src='3.png'></td></tr>
<tr><td><h2>Куб 4х4</h2>
<p>Вариант куба 3х3. Решается по тем же формулам за исключением нюансов с возникающими паритетами.</p>
<h3>Сложность: 4/5</h3>
</td><td><img src='4.png'></td></tr>
</table>
