Суббота, 04.04.2020, 14:39

ХОЧУ ВСЁ ЗНАТЬ!!!

 
Календарь
«  Апрель 2020  »
ПнВтСрЧтПтСбВс
  12345
6789101112
13141516171819
20212223242526
27282930
Поиск
Друзья сайта
Вход на сайт

Меню сайта

Основы языка HTML

Что такое HTML?

HTML (HyperText Markup Language) - язык гипертекстовой разметки документов. Назначение HTML в том, чтобы сделать документы пригодными для чтения с экрана монитора.

Как создать HTML?

Для создания HTML документов используют текстовые редакторы (например Блокнот), текстовые процессоры (Word), редакторы тегов HTML и визуальные HTML-редакторы. Вы можете создать HTML документ в простом Блокноте. Придерживаясь определённого стандарта и записав в текстовом файле HTML код, сохранив на жёстком диске и изменив расширение на .html или .htm вы получите полноценную web страничку.

Структура HTML документа

Что такое теги в HTML?

Теги - это инструменты разметки текста. Теги могут прописываться как строчными, так и прописными буквами, разницы никакой нет. Теги бывают парными и не парными. В качестве примера парного тега можно привести тег <html></html>, этот тег начинает и заканчивает любой HTML документ. Вторая часть парного тега отличается от первой только наличием символа "/", однако первая часть тега может содержать и дополнительные параметры. Например в теге <font size="4"></font>, параметр size="4" определяет размер текста. Примером непарного тега является <hr> - тег вставки в HTML документ горизонтальной линии, такой как в конце этого абзаца.

 

Обязательные теги языка HTML

Любой HTML документ должен содержать следующие теги <html></html>, <head></head>,  <body></body>, <title></title>. Порядок расположения тегов в HTML документе представлен ниже

<html>

<head>

<title>Название вашей страницы</title>

</head>

<body>

 Тело вашего документа

</body>

</html>

Внутри тега <head></head> располагается название вашего HTML документа (чаще всего именно его вы видите в качестве ссылки в результатах поиска поисковыми машинами), помимо этого тега внутри конструкции <head></head> могут располагаться так называемые Мета Теги. Их назначение и описание смотри в справочнике по Мета Тегам.

Тело HTML документа

Заголовки

Заголовки в языке HTML выделяются тегами <h1></h1>, <h2></h2>, ... , <h6></h6>. Таким образом существует 6 уровней заголовков. Можете поэкспериментировать - Вставьте вместо "Тело документа" предыдущем примере <h1>HTML - это просто</h1>, сохраните в текстовом формате, измените расширение документа с .txt на .html и откройте его в браузере. Ну как? По моему приятно когда начинает получаться, можете попробовать то же самое с заголовками других уровней.

Абзацы в языке HTML

Абзац в HTML документе заключается в тег <P></P>. Таким образом конструкция <p> - Как настроение?</p><p> - Не плохо.</p> будет выглядеть следующим образом

- Как настроение?

- Не плохо.

Выделение текста в HTML

Для выделения текста, или области текста в HTML используют теги <b></b>, <i></i>, <u></u>, таким образом строка

<b>жирный</b> <i>курсив</i> <u>подчёркнутый</u> <u><i><b>жирный подчёркнутый курсив</b></i></u>

будет выглядеть

жирный курсив подчёркнутый жирный подчёркнутый курсив

Ненумерованные списки в HTML

Ненумерованные списки прописывают в HTML коде следующим образом <UL><LI>пункт 1<LI>пункт 2<LI>пункт 3</UL>, что даст нам список вида

  • пункт 1
  • пункт 2
  • пункт 3

Нумерованные списки в HTML

Нумерованные списки прописывают следующими тегами <OL><LI>пункт 1<LI>пункт 2<LI>пункт 3</OL>, смотрим, что получится

  1. пункт 1
  2. пункт 2
  3. пункт 3

Вложенные списки списки в HTML

Посмотрите пример вложенного списка

<ul>
<li>Глава 1
<ul><li>Раздел 1<li>Раздел 2</ul>
<li>Глава 2
<ul><li>Раздел 1<li>Раздел 2</ul>
</ul>

такая запись в HTML коде даёт нам следующий результат

  • Глава 1
    • Раздел 1
    • Раздел 2
  • Глава 2
    • Раздел 1
    • Раздел 2

Специальные символы в тексте документа

Специальные символы в тексте документа прописываются следующим образом

&lt; - левая скобка (<)
&gt; - правая скобка (>)
&amp; - (&)
&quot; - кавычки (")

Так строка вида &lt; &quot;Язык HTML&quot; &gt; будет выглядеть

< "Язык HTML" >

Прерывание строки в тексте HTML документа

Прерывание строки осуществляется тегом <BR>. Например строка текста Автор<BR>Год издания<BR>Тираж даст следующий результат

Автор
Год издания
Тираж

Гиперссылки

Гиперссылка в языке HTML прописывается тегом <a></a>. Например запись вида

<a href="html.rar">Скачать учебник языка HTML</a>

будет выглядеть так

Параметр href определяет место документа на который ссылается ссылка, в нашем примере ссылка относительная она ссылается на документ html.rar расположенный в той же директории что и страница HTML. Абсолютная ссылка прописывается следующим образом

<a href="http://webdesign.net-soft.ru/html.rar">Скачать учебник языка HTML</a>

Выглядит она аналогично предыдущей ссылке, но определяет точное местоположение документа.

Правила расстановки относительных ссылок в языке HTML

Если документ на который ссылается ссылка расположен в директории (папке) на уровень ниже, скажем dir, то ссылка параметр href будет иметь вид href="dir/html.rar" , а если документ расположен в директории на уровень выше, то нам необходимо будет записать href="../html.rar".

Вставка рисунков в HTML страницу

Рисунок в HTML документ вставляется следующим образом <img src="ris.jpg" width="100" height="140" alt="Учебник по языку HTML">. Разберем, каково значение параметров тега <img>. Как видите, это одиночный тег. Параметр src задаёт путь к изображению (абсолютный или относительный). Правила указания относительного пути, такие же как и для ссылки. Параметры width и height определяют ширину и высоту рисунка в пикселях в HTML документе. Параметр alt задаёт альтернативный текст - тот текст который отображается в браузере если отключена загрузка графики.

Фреймы в HTML документе

Фрейм - это рамка, в которую загружается другой HTML документ. Многие сайты имеют фреймовую структуру, наш не исключение. Меню нашего сайта загружается во фрейм. Как это делается? Смотрите

<iframe name="I2" src="menu.htm" width="200" scrolling="no" height="500" marginwidth="2" marginheight="2">Ваш браузер не поддерживает фреймы</iframe>

Параметр name - имя фрейма, src - путь к загружаемой во фрейм странице width, height соответственно ширина и высота рамки. Параметр scrolling определяет отображаются ли полосы прокрутки во фрейме, если этот параметр не прописан в HTML коде, то полосы прокрутки отображаются при необходимости, если он равен "no", то полосы прокрутки не отображаются, если - "yes", то - отображаются в любом случае. Параметр name используется для задания конечной рамки по умолчанию - рамки в которую будут загружаться страницы при переходе по гиперссылкам HTML документа. Это осуществляется добавлением в HTML код тега <base> между тегами <head></head>. Для нашей рамки <base target="I2">.

Таблицы в языке HTML

Таблицы в HTML документ вставляются следующим образом

<table border="1" style="border-collapse: collapse" bordercolor="#111111">

<tr><td>Ячейка11<td>Ячейка12</tr>

<tr><td>Ячейка21<td>Ячейка22</tr>

</table>

Таблицу открывает и закрывает тег <table></table>, тег <tr></tr> - определяет столбец, одиночный тег <td> определяет ячейку в столбце, таким образом представленный код прописывает таблицу размером 2х2, которая в HTML документе будет выглядеть следующим образом

Ячейка11

Ячейка12

Ячейка21

Ячейка22

Теги style и bordercolor определяют соответственно стиль отображения таблицы и цвет границы. Более подробно смотрите в учебнике по HTML.

Теперь вы знакомы с основами языка HTML, более подробно изучит этот язык вам поможет учебник по HTML. Вы также можете поэкспериментировать в визуальных HTML редакторах. Начинайте создавать простые HTML документы, меняйте свойства их элементов и смотрите, что изменяется в HTML коде.

 
 

Запрещено копирование материалов с сайта без гиперссылки на sheiko28.narod.ru. Нарушение исключительных прав преследуется законом.

© 2009-2016 sheiko28.narod.ruВсе права защищены.

 
Protected by Copyscape DMCA Copyright Detector

Яндекс цитирования