Основные теги html для создания сайта: Теги для создания сайта html в блокноте и пример их использования – Html теги для создания сайта: список самых основных

Html теги для создания сайта: список самых основных

html теги для содания сайта

html теги для содания сайтаВсех приветствую в этой статье. Сегодня мы рассмотрим html теги для создания сайта. Именно не все подряд, а те, что наиболее часто используются при создании сайтов и верстке. Потому что есть просто масса тегов, которые нужны 1 раз в год, а есть те, которые вы будете использовать постоянно. Ну что ж, поехали. В конце у нас получится простенькая веб-страничка со всеми основными элементами.

Теги структуры html документа

Это глобальные теги, которые нам в любом случае нужны. На веб-странице они никак не отображаются, но позволяют разметить структуру. Например, тег html. Сегодня его очень часто даже не пишут, в этом действительно нет нужны. В общем-то, он является общий контейнером для всего html-документа. В него вложено все остальное.

Далее идут 2 секции — head и body. В первой располагаются различного рода параметры веб-страницы, подключаются внешние файлы и т.д. Например, тут задается кодировка сайта, прописываются мета теги, title, подключаются css-стили и веб-сценарии. В общем, для работоспособности сайта секция head имеет важнейшую роль.

Ну а body это тело страницы. Здесь уже мы пишем то, что непосредственно выводиться на экран. Далее мы непосредственно рассмотрим теги, которые используются в теле страницы.

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

Обычно о форматировании всегда говорят в первую очередь, когда речь заходит об html. Действительно, что может быть важнее текста на странице и его грамотного оформления? Так вот, о тегах для оформления текста я подробно написал здесь, советую открыть в новом окне и ознакомиться с описанными там тегами.

Например, создадим три абзаца. Один будет простым, во втором текст будет выделен жирным, а в третьем — подчеркнут.

<p>Какой-то текст в абзаце, имитируем наполнение</p>
<p><b>Какой-то текст в абзаце, имитируем наполнение</b></p>
<p><ins>Какой-то текст в абзаце, имитируем наполнение</ins></p>

три абзаца

три абзаца

Вот примерно в таком духе мы оформляем текст, используя теги, о которых говорится в той статье.

Html теги для картинок (изображений)

Для картинок есть всего 1 основной тег — img. И у него, в свою очередь, всего 1 обязательный параметр — src, то есть путь к файлу. Все остальное можно настраивать через css. Собственно, подробно о вставке картинки я писал также здесь, ну и вот пример вставки:

<img src = «walk.jpg»>

Тег, как видите, одинарный, то есть закрывающая часть не нужна. Путь задается исходя из расположения html-странички. У меня картинка лежала в той же папке, что и веб-страница, а значит путь получился максимально коротким.
картинка

картинка

Изменять размер катинки можно с помощью атрибутов width и height, но оптимально все же делать это через css. Но кроме тега img в html5 появились еще теги, которая так или иначе помогают оформить картинку. Это figure и figcaption. То есть фигура и подпись к ней. Вообще область применения этих тегов более широка, но мы рассмотрим пример с картинкой:

<figure>
<img src = «walk.jpg» width = «300»>
<figcaption>Прогулка</figcaption>
</figure>

Ну и пару css-строк:

figure{
width: 300px;
}
figcaption{
text-align: center;
color: grey;
}

Эти теги просто упростили процесс добавления подписей к картинкам:
подпись

подпись

Теги для ссылок

Ссылки — важнейшая часть веб-страницы. Но для их создания вам нужен всего один тег — a. Создается так:

<a href = «url-адрес, куда ссылаемся»>Анкор</a>

То есть тоже есть 1 обязательный атрибут — href. Без него браузер просто не будет понимать, куда ему переходить. Адрес нужно указывать с протоколом

http://. Ну и между открывающим и закрывающим тегом указываем непосредственно сам анкор, то есть текст, который увидим на странице.
ссылка

ссылка

Ссылка также может быть изображением. О том, как так сделать, написано здесь.

Списки на веб-страницах

Со списками все тоже достаточно просто. Есть 2 типа списков — маркированный и нумерованным. Различия только во внешнем виде нумератора. То есть числа это, или просто маркеры.

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

<ol>
<li>Убрать на столе</li>
<li>Приготовить еду</li>

<li>Сходить на футбол</li>
</ol>

Какой-то пошаговый план у нас получается laugh

laugh По умолчанию список уже отображается с определенными отступами. списоксписок

Маркированный список, соответственно, создается с помощью тега ul, а внутри него все те же li.
марк

марк
О том, как оформлять список с помощью css, вы можете прочитать здесь.

Таблицы

Подробно о тегах для таблицы я написал здесь. Если же говорить кратко, то это:

  1. table — сам контейнер для таблицы;
  2. tr — ряд таблицы, тоже выполняет роль контейнера;
  3. td — одна ячейка, именно сюда помещается содержимое;

Создадим простую таблицу:

<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
</table>

Ну и через css я ее немного оформил:

table{
border-collapse: collapse;
}
td{
border: 1px solid red;
padding: 15px;
}

таблица

таблица
Если вам непонятно, что такое css, то приглашаю прочитать заодно эту статейку, сразу все станет понятно.

Формы

Формы также очень важны при создании сайтов, так как они применяются сплошь и рядом. О формах у меня по-моему толковой статьи на блоге еще нет, значит надо написать. Ну а пока создадим простую форму:

<form>
Логин: <input type = «text»> <br>
Пароль: <input type = «password»> <br>
Я согласен с правилами <input type = «checkbox»><br>
<input type = «submit» value = «Регистрация»>
</form>

форма

форма

Основные элементы формы:

  1. form — непосредственно контейнер формы, в который помещаются все поля. Чтобы форма корректно работала, ей нужно прописывать атрибуты action и method, но это уже работа с языком php.
  2. input — поле формы, каким именно оно будет, зависит от значения в атрибуте type. Например, text — поле для ввода обычного текста, password — поле для ввода пароля, checkbox — галочка, submit — кнопка отправки формы. Конечно, это не все значения, но о других подробнее я напишу в отдельной статье про формы (скоро будет).
  3. Ну и вспомогательные элементы. В нашем случае это текст и переносы строк.

Возможности форм, особенно с приходом html5, стали очень велики. Вы можете делать в них неограниченное количество полей, помечать их как обязательные, задавать паттерны и т.д. Опять же, обо всем этом напишу как-нибудь отдельно.

Блочные и строчные элементы

Вообще все элементы в html грубо можно разделить на две категории: блочные и строчные. К строчным относятся, например, теги: b (выделение жирным), img (картинка), a (ссылка) и т.д. То есть их можно несколько раз употребить на одной строке.

Блочные же — совсем другое дело. Блок может быть только одним в своей строке. Примеры блоков: абзацы, таблицы, списки. То есть на одной строке не может быть 2 абзаца, правильно?

В html есть теги, которые просто обозначают блочный и строчный элемент, не придавая ему более никаких свойств. Это span и div. Первый строчный, а второй блочный. Используются в верстке сплошь и рядом. Чтобы вы понимали разницу, вот пример:

<div>Текст</div>
<div>Текст</div>

<div>Текст</div>
<span>Текст</span>
<span>Текст</span>
<span>Текст</span>


блок и строк

блок и строк
Думаю, ничего больше объяснять не нужно. Что ж друзья, вот пожалуй и все основные html теги для создания сайта, которые действительно применяются сплошь и рядом и которые действительно нужно знать.

Теги html 5 для современной верстки сайтов и блогов

Здравствуйте гости данного блога и мои верные подписчики. С таким скоростным развитием технологий, науки и программирования, как это можно наблюдать сегодня, неудивительно, что запросы потребителей растут. А это значит, что рано или поздно появляются усовершенствованные версии программ, оборудования и главное языков.

Прочтение статьи даст вам четкое понимание границ между html и html 5. К тому же вы сможете оперировать полученными знаниями и верстать все свои сайты уже используя теги html 5.

Я хочу посвятить данную публикацию обсуждению html 5. Мы разберем с вами главные особенности платформы, новые элементы языка и их отличие от старых, а также рассмотрим конкретные примеры кода. А теперь перейдем непосредственно к самому соку!

Главнокомандующий разметкой сайтов, знаменитый html

После прочтения предыдущих моих публикаций, а также других источников айтишной тематики я думаю, что с уверенностью могу назвать вас «гуру-мастерами». Ведь вам не составит никакого труда рассказать, что из себя представляет язык html и для чего он был создан. Вы молодцы!

Новичкам же в данной области знаний не стоит волноваться. Я специально повторю главные определения.

Итак, для начала стоит запомнить, что html – это язык разметки гипертекста, т.е. текста, в котором содержатся связанные между собой элементы текстового, видео- , аудио- и графического форматов. Данный инструмент необходим для оформления структуры сайтов, форматирования внешнего вида страниц и указания расположения объектов на ней.

Для управления контентом сайта используются теги языка. Что же означает «тег» и для чего он нужен?

Тег – это единица языка разметки, которая способствует заданию на странице сайта определенного отображения конкретного объекта, а также указания его вида (ссылка, картинка и другое).

Элементы языка бывают одиночными и контейнерами (их еще обычно называют парными). Они различаются только тем, что парные внутри себя могут содержать другие элементы: теги или текст.

Каждый элемент обсуждаемого веб-языка имеет свой набор атрибутов. «Еще один термин? А он для чего нужен?» – спросите вы. Увы, но без терминологии никак.

Атрибуты нужны для расширения спектра возможностей отдельного тега, а также для более гибкого управления внешним видом контейнеров. Безусловно, элементы языка разметки спокойно могут существовать и без определения атрибутов. Тогда браузер будет задавать им форматирование по умолчанию.

Ниже я прикрепил таблицу с примерами парных и одиночных распространенных тегов html с их наиболее используемыми атрибутами. К сожалению, привести атрибутов полный список сложно, их слишком много. Для этого лучше обращаться к спецификациям языка.
Одиночные теги
<meta charset=»utf-8″ name = «GENERATOR» content = «Microsoft FrontPage 4.0»>В данном примере представлен одиночный тег meta, который содержит в себе неотображаемую в браузере информацию. Charset, name и content – это атрибуты элемента, отвечающие соответственно за кодировку документа, наименование метатега и установку значения, заданного до этого в имени.
<img src=»image/cars.jpeg» alt=»BMW»>Тег отвечает за отображение графических файлов на страницах веб-ресурсов. При помощи атрибута src задается путь к самой картинке, width задает ширину объекта, а height – высоту, alt предназначен для вывода альтернативного текста в случае невозможности загрузить изображение.
Парные теги
<a href= «tip.html» target=»_blank» title=» Нажмите на ссылку и она откроется в новой вкладке»> Как правильно приготовить запеканку?</a>Тег создает анкор (т.е. ссылку). В href указывается адрес файла, на который произойдет переход, target задает, как именно будет загружаться открытая ссылка (в данном примере она откроется в новой вкладке), title отвечает за всплывающую подсказку при наведении на анкор.

Близкий родственник языка html

 

Как уже рассказывалось в предыдущих моих статьях, не стоит путать html и html 5. Html 5 хоть и в каком-то смысле «родственник» html, но это совершенно новая платформа, основная задача которой поддерживать аудио- и видеофайлы, анимации, отображение геолокаций и многое другое.

Данная спецификация оснащает веб-страницы новыми возможностями и сообщает DOM (объектная модель документа) о наличии новых объектов на ней. Это ускоряет работу загрузки страницы и упрощает работу браузеров.

Огромным преимуществом для разработчиков является то, что с появлением html 5 ничего переучивать не нужно. Он поддерживает все теги html 4 и дополняет их современными. Добавлю также к этому еще один положительный факт. С появлением таких элементов, как <video> и <audio>, отпала необходимость использовать устаревшие теги поддержки мультимедиа. К ним относятся: <bgsound>, <dir>, <rb>, <applet> и другие.

А теперь я хочу перечислить основные теги спецификации, к которым относятся article, aside и другие, а также описать для чего они были созданы.

ТегОписание
<article>Задает наименование статьи, объявления, страницы сайта и т.д. Атрибутов не имеет.
<aside>Определяет боковой блок для размещения в нем карты сайта, рекламы, ссылок на ресурсы и т.д. Можно использовать универсальные атрибуты.
<canvas>Полезный элемент для создания при помощи JavaScript анимаций, рисунков, а также редактирования имеющихся картинок. Поддерживает как уникальные атрибуты, так и события.
<figure>  Основная задача тега: группировать разные элементы в единое целое. Это может быть, например, текст и рисунок.

Семантические теги

С появлением платформы html 5 появились и семантические теги. Сейчас простым языком объясню, что это такое.

Ранее при написании веб-сервисов с удобным интерфейсом и выделением шапки сайта, его основной части и «подвала» (место внизу страницы для дополнительной информации или указания авторства) использовалась блочная верстка при помощи div-ов.

Может это и было удобно с одной стороны для девелоперов, однако поисковым системам, а также браузерам приходилось туго. Поэтому было найдено решение в виде семантических тегов.

Эти элементы всего лишь стандартизируют основные единицы сайта едиными для всех ресурсов наименованиями тегов. К ним относятся <header>, <footer> и <nav>. <header> отвечает за определение на сайте его заголовка или заголовка текста, <footer> – за «подвал» внизу интернет-страницы, а <nav> – за навигацию сайта.

Для усвоения материала хочу, чтоб вы опробовали практический пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title>Ваш сайт</title>
</head>
<body>
   <header>
      <h2>Блог для айтишников</h2>
   </header>
   <nav>
      <ul>
         <li>Пункт меню 1</li>
         <li>Пункт меню 2</li>
      </ul>
   </nav>
   <article>
      <header>
         <h3>Заголовок  публикации</h3>
         <p><a href="#">Автор </a>. Всего комментариев:  6 </p>
      </header>
      <p>Текст первой статьи</p>
   </article>
   <footer>
      <p>Copyright любимый блогер</p>
   </footer>
</body>
</html>

<!DOCTYPE HTML> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> <title>Ваш сайт</title> </head> <body> <header> <h2>Блог для айтишников</h2> </header> <nav> <ul> <li>Пункт меню 1</li> <li>Пункт меню 2</li> </ul> </nav> <article> <header> <h3>Заголовок публикации</h3> <p><a href=»#»>Автор </a>. Всего комментариев: 6 </p> </header> <p>Текст первой статьи</p> </article> <footer> <p>Copyright любимый блогер</p> </footer> </body> </html>

Данный пример показывает удобство структурирования кода при помощи html 5. Хочу отметить, что на сегодняшний день уважающие себя разработчики используют в своих веб-ресурсах спецификацию html 5 и css3. Они улучшают взаимодействие браузера с сайтом, а также оптимизируют работу поисковых роботов.

Ну что ж. Я рассказал все, что вам нужно знать на начальных стадиях изучения языка html. Если вы узнали что-то новое для себя, то подписывайтесь на обновления моего блога и делитесь ссылочкой с друзьями. Пока-пока!

С уважением, Роман Чуешов

Загрузка…

Прочитано: 253 раз

HTML Основные теги



В языке HTML всё, что вы напишите в HTML-документе, будет выведено на экран браузера сплошным текстом, то есть браузер игнорирует переводы строк, а также несколько набранных вами подряд пробелов заменяются одним.

Теги — это управляющие команды, которые были придуманы для того, чтобы отформатировать текст, т.е. теги говорят браузеру о том, как именно нужно вывести на экран часть текста, заключенную в теги. Для создания тега между угловыми скобками вводится HTML-код, который предназначен только для браузеров. Посетители сайта не видят теги.

Как уже отмечалось выше, все теги начинаются с угловой скобки < и заканчиваются угловой скобкой > . После открывающей угловой скобки следует имя тега (команды).

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

Рассмотрим пример:

Этот текст обычный. <em> Этот текст курсивный. 

Тег <em> называют начальным или открывающим тегом, что означает включение браузером определенной команды (в данном случае написание курсивным шрифтом). У большинства тегов есть пара в виде закрывающего тега, который отключает команду.

Закрывающий тег выглядит так же, как начальный, но начинается с слэша. Итак, конечный тег для выделения курсивным шрифтом — </em>.

Рассмотрим пример:

Этот текст обычный. <em> Внимание! Курсив.  </em> Это снова обычный шрифт.  

Как вы успели заметить, браузер последовательно анализирует HTML – документ в поисках команд (тегов) и применяет или отключает разные параметры форматирования текста. Браузер отформатированный текст (все, что не является тегом) отображает в своем окне.

Процесс вставки тегов в обычный неформатированный текст называется разметкой HTML-документа, а теги — знаками разметки. При написании тегов не учитывается регистр букв, тег может быть прописан как строчными, так и прописными буквами, но всё же рекомендуется применение прописных букв.

Ниже приведены примеры основных тегов HTML, с объяснением их использования, а также примеры их применения в HTML-документе.

Заголовки

Существует специальный тег для указания заголовков в HTML. Есть 6 уровней заголовков в HTML, начиная от <h2> для наиболее важных объявлений, до <h6> для наименее важных.

Вот они:

Пример HTML:

Попробуй сам
<h2>Заголовок 1</h2>
<h3>Заголовок 2</h3>
<h4>Заголовок 3</h4>
<h5>Заголовок 4</h5>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

HTML абзацы

С помощью HTML тэга <p> Вы можете определить абзац.

Абзацы используются для логической группировки текста. Перед и после текста абзаца браузер автоматически отступает одну строчку.

Пример HTML:

Попробуй сам
<p>Это абзац</p>
<p>Это другой абзац</p>
<p>Это третий абзац</p>

HTML ссылки

С помощью HTML тэга <a> создаются ссылки.

Ссылки используются для связывания HTML документов друг с другом. Нажав на ссылку пользователь будет перемещен на другой HTML документ, url которого указан в атрибуте href.

Атрибут href задает адрес документа, на который следует перейти.

Атрибуты используются для предоставления дополнительной информации о HTML-элементах.

Вставка изображений

С помощью HTML тэга <img> Вы можете вставить в HTML документ произвольное изображение.

Ширина и высота картинки может задаваться с помощью атрибутов width и height.

Пример HTML:

Попробуй сам

<img src="images/orange.jpg" alt="Апельсин">
Обратите внимание: HTML-атрибуты будут подробно рассмотрены далее в данном учебнике.




Созданиe Web-страницы «Основные тэги HTML». — КиберПедия

Созданиe Web-страницы «Основные тэги HTML».

УЭ №1.

Создание Web – страницы «Оформления заголовка документа».

Задачи УЭ: закрепить знания по основные теги по созданию Web-страницы: HTML, тег форматирования шрифта, выравнивания абзаца.

Что сделать?

Создать документ, состоящий из 6 строк оформленных в виде заголовка 1- 6 уровня и каждая строка выполнена шрифтом: жирным, курсивом, подчеркнутым, равноширинным, выделенным и с усиленным выделением.

Как сделать.

1. Запустить текстовый редактор Блокнот командой [Пуск — Программы — Стандартные — Блокнот].

2. Ввести HTML-код, задающий структуру Web-страницы:

<HTML>

<HEAD>

<TITLE>Zagolovok</TITLE>

</HEAD>

<BODY >

<center> <h2> <b> Заголовок первого уровня – жирный </b></h2></center>

<center> <h3> <i>Заголовок второго уровня — курсив </i></h3></center>

<center> <h4><U> Заголовок третьего уровня- подчеркнутый </U></h4></center>

<center> <h5> <B><I><U>Заголовок четвертого уровня — жирный подчеркнутый курсив </B></I></U></h5></center>

<center> <h5><TT> Заголовок пятого уровня- равноширинный </TT></h5></center>

<center> <h6><STRONG> Заголовок шестого уровня — усиленное выделение </STRONG></h6></center>

</BODY>

</HTML>

3. Сохранить данный документ, предварительно создав на диске С свою папку (имя папки – инициалы записанные латинскими буквами – IPC). Имя документа – IPC11b1.htm

4. Запустить браузер и открыть созданный файл командой [Файл — Открыть]. В заголовке окна браузера высвечивается название Web-страницы Zagolovok с тэгами HTML.

УЭ №2. Контроль знаний

Задачи: научится создавать простую Web- страницу, применяя, теги форматирования шрифта, выравнивания абзаца.

Что сделать Как сделать
Использовать порядок создания первой Web – страницы описанный в УЭ 1

УЭ 3

Создание Web – страницы «Списки».

Задачи : изучить и закрепить теги по созданию списков и разделительной линии.

Что делать?

Создать документ, в котором присутствуют списки и разделительная линия.

Как сделать.

1. Запустить текстовый редактор Блокнот командой [Пуск — Программы — Стандартные — Блокнот].

2. Ввести HTML-код, задающий структуру Web-страницы:

<HTML>

<HEAD>

<TITLE>Spisok</TITLE>

</HEAD>

<BODY >

<center> <h2> <b> Списки </b></h2></center>

<HR>

<center> <h3> <i>Нумерованный список: </i></h3></center>

OL>

<LI>Первый элемент списка</LI>

<LI>Второй элемент списка</LI>

<LI>Третий элемент списка</LI>



</OL>

<HR>

<center> <h4><U> Ненумерованный список: </U></h4></center>

<UL>

<LI>Первый элемент списка</LI>

<LI>Второй элемент списка</LI>

<LI>Третий элемент списка</LI>

</UL>

<HR>

<center> <h5> <B><I><U> Список определений: </B></I></U></h5></center>

<DL>

<DT>ТЕРМИН 1</DT>

<DD>Пояснение к термину 1</DD>

<DT>ТЕРМИН 2</DT>

<DD>Пояснение к термину 2</DD>

<DT>ТЕРМИН 3</DT>

<DD>Пояснение к термину 3</DD>

</DL>

3 .Ввести команду [Файл — Сохранить]. Файлу Web-страницы присвоить имя IPC11b2.htm

4.Запустить браузер и открыть созданный файл командой [Файл — Открыть]. В заголовке окна браузера высвечивается название Web-страницы Первое знакомство с тэгами HTML.

УЭ4 Создание документа «Устройства ввода вывода вида» .

УЭ 5Создание Web – страницы «Таблица погоды».

Задачи УЭ5: изучить и закрепить теги по созданию таблицы, строки, столбца.

Что делать?

УЭ 7Создание Web – страницы «Атрибуты».

Задачи УЭ7: изучить и закрепить служебные слова –атрибуты, теги форматирования текста, создания фона документа, цвета текста, гиперссылки..

Что делать?

По аналогии создания Web – страницы «Вставка изображения».

Создание Web – страницы «Вставка гиперссылки».

Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга <A>, и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.

<A HREF=»file_name»>Указатель ссылки</A>

Задание.

Сохраните документ

Сохраните документ.

Созданиe Web-страницы «Основные тэги HTML».

УЭ №1.

Создание Web – страницы «Оформления заголовка документа».

HTML

Иногда лучше остаться спать дома в понедельник,
чем провести всю неделю отлаживая написанный в понедельник код.
Christopher Thompson


Изучение языка HTML нужно начать с того, что необходимо понять, что это за язык. HTML — это Hyper Text Markup Language — язык гипертекстовой разметки.

HTML — компьютерный язык, а следовательно он имеет свои собственные правила (синтаксис), которые необходимо соблюдать.

HTML — это язык разметки, значит он берет определенные части документа и придает им особый вид.

HTML — это язык гипертекстовой разметки. Гипертекстом можно назвать текст в любом формате, некоторые части текста которого, могут ссылаться на другие части этого текста, что позволяет быстро переходить от одной части текста к другой.

Содержание:

 

На сегодняшний день язык HTML существенно усовершенствован. Его прекрасно дополняют технологии JavaScript, DHTML, CSS, PHP и др., что позволяет использовать новые возможности, но основой всего этого остаются все те же стандартные теги, которые и задают внешний вид web-страницы. Сейчас уже никого не удивишь таким замудреным словом, как браузер, и каждый первоклашка скорей всего знает, что это такое и для чего он предназначен. Так вот браузер, считывая информацию со страниц размещенных в Интернете, отображает ее на экране монитора в том виде, в котором четко указывают ему эти самые теги. Все существующие теги заключены в угловые скобки (< тег >), это и указывает браузеру на то, что перед ним тег, который ориентирует на определенное отображение страницы, причем сами теги на экране не отображаются.

Многие теги имеют свои атрибуты (свойства, параметры), которые прописываются в теге и придают обозначенному этим тегом объекту (изображению, тексту, ссылке, слову и т.д.), определенное значение. Регистр букв в наименовании тега значения не имеет. Почти все теги являются парными, то есть существует открывающий «зону действия» тег (< тег >), и соответственно закрывающий (< /тег >). Покажу это на примере:

Так выглядит HTML — код*.

 

< p >...чтобы < a href="http://www.smartincom.ru/" >создать свой сайт< /a >,< br > необходимо освоить основы < strong >HTML< /strong >... < p >< blink >Все достаточно просто!< /blink > < p >...о назначении каждого < em >тега< /em > можно попробовать догадаться < u >самостоятельно< /u >,< br > проследив соответствие содержания < big >web-страницы< /big > и ее < small >исходного кода< /small >...

А вот так отобразит браузер.

 

…чтобы создать свой сайт,
необходимо освоить основы HTML

Все достаточно просто!

…о назначении каждого тега можно попробовать догадаться самостоятельно,
проследив соответствие содержания web-страницы и ее исходного кода

Как же создать HTML-документ? Проще всего это сделать в текстовом редакторе. Для начала подойдет обычный Блокнот от Windows. А когда ты освоишь основу написания HTML-кода, можно будет начать пользоваться HTML-редактором, чтобы упростить свою работу. Мы еще рассмотрим HTML-редакторы и их возможности, а пока остановимся на простом Блокноте.

На жестком диске своего компьютера создаем папку, назовем ее www, затем открываем Блокнот и создаем файл (в этой папке www) с расширением .html ( пуск — все программы — стандартные — блокнот — файл — сохранить как). Назовем его index.html, сразу предупрежу, что названия файлам нужно давать на латинице.

Что же получилось? А получилась у тебя главная страница (вернее только заготовка) будущего сайта. По ходу обучения в нее будем добавлять информацию, что в конечном итоге приведет к созданию полноценного HTML-документа. Просматривать результаты своей работы можно в браузере (Mozilla, Opera и т.д., кто чем пользуется). Ну хватит слов, ближе к делу.

Основные теги HTML

 

 

Создаем HTML-страницу

 

 

Добавляем текст и связываем документ

 

 

Добавляем изображения и мультимедиа

 

 

Формы в HTML

 

 

Создание таблиц

 

 

Приложения

 

Самый лучший способ изучить HTML заключается в самостоятельном повторении описанных мной примеров и создании собственных веб-страниц. Так, что повторяй материал самостоятельно, в созданном тобой файле. Знакомство с языком, для удобства, я разделил на разделы, изучив которые, ты сможешь самостоятельно создать свою первую, полноценную веб-страницу, а в дальнейшем и свой первый качественный, и надеюсь популярный сайт.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *