Обучение созданию сайта.


Примеры к этому курсу Вы можете скачать по этой ссылке.

Содержание.


Простая страница.
Изображение.
Текст.
Список.
Таблица.
Ссылка.
Размещение сайта в сети Интернет.

Простая страница.


Сайт состоит из страниц. Страницы записываются на языке HTML. Для начала запишем простую страницу test.html в программе Блокнот (Пуск\Все программы\Стандартные\Блокнот):
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Заголовок</title>
</head>
<body>
Привет, мир!
</body>
</html>
Сохраним страницу в файле test.html в кодировке UTF-8 и откроем её в веб-браузере:

Между <html> и </html> располагаются конструкции страницы. Между <head> и </head> располагаются конструкции шапки страницы. Между <body> и </body> располагаются конструкции тела страницы, в нашем примере текст "Привет, мир!", который отображается в веб-браузере. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> указывает, что на странице содержится текст в формате HTML и кодировке UTF-8, которая используется для отображения русского текста. Между <title> и </title> располагается текст заголовка страницы "Заголовок", который отображается в верхней строке веб-браузера. Страницы сохраняются с расширением htm или html. Файл, с которого начинается загрузка сайта в Интернет, обычно имеет имя index.html.
Наверх

Изображение.


Код страницы image.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Изображение</title>
</head>
<body>
<img src="images/pic.jpg" width="50%" height="50%" border="10">
</body>
</html>
Просмотр в веб-браузере:

Конструкция img описывает изображение. В src располагается адрес файла изображения, width (необязательная конструкция) содержит ширину изображения в процентах от размера страницы или без знака процента в пикселях, height (необязательная конструкция) содержит высоту изображения в таком же формате как width, border (необязательная конструкция) содержит ширину рамки изображения в пикселях.
Наверх

Текст.


Код страницы text.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Текст</title>
</head>
<body>
<h1 align="center">Первый заголовок.</h1>
<br>
<h2 align="center">Второй заголовок.</h2>
<br>
<p align="left">
Абзац.
<br>
<font face="Times New Roman" size="6" color="red">Текст</font>
<br>
&amp;&nbsp;&lt;&gt;&copy; </p>
</body>
</html>
Просмотр в веб-браузере:

Внутри конструкции h1 располагается самый крупный заголовок, внутри h2 - более мелкий. Всего может быть 6 заголовков - от h1 до h6 (от самого крупного до самого мелкого). align (необязательная конструкция) обозначает выравнивание относительно страницы. Если align равно left, то выравнивание происходит по левому краю, если равно center - значит по центру, если right - значит по правому краю. Конструкция br означает перенос строки. p содержит абзац. font выделяет содержимый в ней текст особым шрифтом. face содержит название шрифта (такое как Arial или Times New Roman). size содержит размер шрифта от 1 - самого мелкого до 6 - самого крупного. color содержит цвет шрифта. Цвет может быть задан ввиде названия (black - чёрный, red - красный, green - зелёный, blue - синий, white - белый, lime - светло-зелёный, yellow - жёлтый, aqua - голубой) или шестнадцатиричного значения. Шестнадцатиричные цифры: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F соответствуют десятичным числам: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15. Из шестнадцатиричных цифр составляются шестнадцатиричные числа. Шестнадцатиричные числа состоящие из 2 шестнадцатиричных цифр обозначают красную, зелёную и синюю компоненты цвета. Перед значением цвета ставится знак #. Например, #F367AD: F3 - красная компонента, 67 - зелёная, AD - синяя. В конструкции font должна использоваться хотя бы одна из конструкций face, size или color. &amp; выводит знак &, &nbsp; выводит пробел, &lt; выводит знак <, &gt; выводит знак >, &copy; выводит знак ©.
Наверх

Список.


Код страницы list.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Список</title>
</head>
<body>
<ul type="disk">
<li>Первый пункт.
<li>Второй пункт.
<li>Третий пункт.
</ul>
<br>
<ol type="1" start="1">
<li>Первый пункт.
<li>Второй пункт.
<li>Третий пункт.
</ol>
</body>
</html>
Просмотр в веб-браузере:

Конструкция ul содержит маркированный список. type (необязательная конструкция) содержит тип маркера. Если type равно square, то маркер - квадрат, если равно circle - то окружность, если равно disk - то круг. Конструкция ol содержит нумерованный список. type (необязательная конструкция) содержит тип нумерации. Если type равно 1, то нумерация арабскими числами, если равно i - то малыми римскими числами, если равно I - то большими римскими числами, если равно a - то малыми латинскими буквами, если равно A - то большими латинскими буквами. start (необязательная конструкция) содержит номер, с которого начинается нумерация.
Наверх

Таблица.


Код страницы table.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Таблица</title>
</head>
<body>
<table align="center" width="50%" bgcolor="lime" border="10">
<tr><td>Заголовок 1</td><td>Заголовок 2</td><td>Заголовок 3</td></tr>
<tr><td bgcolor="yellow">1</td><td bgcolor="aqua">2</td><td bgcolor="yellow">3</td></tr>
<tr><td bgcolor="aqua">4</td><td bgcolor="yellow">5</td><td bgcolor="aqua">6</td></tr>
<tr><td bgcolor="yellow">7</td><td bgcolor="aqua">8</td><td bgcolor="yellow">9</td></tr>
</table>
</body>
</html>
Просмотр в веб-браузере:

Конструкция table содержит таблицу. align, width и border описывались ранее. bgcolor содержит цвет фона. Значение цвета описывалось ранее. tr содержит строку таблицы. td содержит ячейку таблицы.
Наверх

Ссылка.


Код страницы link1.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Страница 1</title>
</head>
<body>
<a href="#favorite">Ссылка на закладку на этой странице</a>
<br>
<a href="link2.html">Ссылка на другую страницу</a>
<br>
<a name="favorite">Закладка</a>
</body>
</html>
Просмотр в веб-браузере:

Код страницы link2.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Страница 2</title>
</head>
<body>
<a href="link1.html#favorite" target="_blank">Ссылка на закладку на другой странице. Открывает в новом окне.</a>
</body>
</html>
Просмотр в веб-браузере:

Конструкция a содержит ссылку или закладку. Если в ней есть конструкция name, то она содержит закладку, если есть конструкция href - то содержит ссылку. Используется или name, или href. name содержит имя закладки. href содержит адрес страницы, или имя закладки со знаком # впереди, или адрес страницы и закладку через знак #. target (необязательная конструкция) может содержать значение _blank. В таком случае страница или закладка из href открывается в новом окне. Без target страница или закладка открывается в том же окне, где ссылка.
Наверх

Размещение сайта в сети Интернет.


Разместить сайт в Интернет можно через хостинг. Одним из лучших хостингов является хостинг "ТаймВеб". Чтобы разместить сайт через него, нужно проделать следующее:
  1. Нажмите на эту картинку: .
  2. Откроется страница хостинга "ТаймВеб".
  3. Нажмите вверху на слово "Хостинг".
  4. Вам будет предложен выбор тарифов на хостинге.
  5. Вы можете выбрать самый дешёвый тариф Year+ и оплату помесячно.
  6. Нажмите "Разместить сайт".
  7. Введите фамилию, имя, отчество и адрес электронной почты.
  8. Отметьте "Я согласен с условиями оферты".
  9. Нажмите "Заказать".
  10. На адрес электронной почты Вы получите письмо с адресом панели управления сайтом, логином и паролем для входа в неё.
  11. Также ссылку на оплату хостинга в течении 10 дней.
  12. В панели управления слева выберите ссылку "Файловый менеджер".
  13. Войдите в папку public_html.
  14. Выберите файл index.htm.
  15. Выберите "Файл\Удалить".
  16. На вопрос "Вы действительно хотите удалить?" нажмите кнопку "Да".
  17. Выберите "Файл\Загрузить на сервер".
  18. Нажмите "Прикрепить файл".
  19. Выберите файлы, которые Вы хотите загрузить в Интернет, в том числе index.html.
  20. Нажмите кнопку "Загрузить".
  21. Слева нажмите "Сайты".
  22. Справа будет имя Вашего сайта (домен).
  23. При переходе по нему будет загружаться Ваш файл index.html.

Наверх
Рейтинг@Mail.ru Каталог сайтов Всего.RU
Каталог сайтов Всего.ру

©2017 Сергей Шигорин