Основные теги для создания сайта html


В этой теме я отпишу самый важные HTML коды для создание сайта для сервера языком программирования HTML.

Html-код самого простого сайта:

Основные теги для создания сайта html Цитата: Основные теги для создания сайта html
Основные теги для создания сайта html

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 3.2 Final//EN»>
<HTML>
<HEAD>
<TITLE>Название страницы</TITLE>
</HEAD>
<BODY>
Текст страницы
</BODY>
</HTML>
Основные теги для создания сайта html Основные теги для создания сайта html

Теги <!DOCTYPE…> и <HTML> служат для того чтобы код опознался как html

<HEAD> -заголовок, Данный тег закрывающийся </HEAD> — Голова страницы закончилась

<TITLE> -Название страницы </TITLE> — название страницы. Написано между этими двумя тегами то и будет отображено в заголовке браузера.

<BODY>Текст страницы</BODY> — Здесь все материалы: текст, картинки,и т.д.

Теги заголовков (<h1>-</h6>) переводят после себя строку («жмут enter»), если иное не прописано в таблицах стилей. Когда вы пишите текст в «голом html» ваши переводы строки учитываться не будут, текст будет идти подряд до заголовков либо специальных тегов.

<br> — переводит строку. Закрывающий тег не нужен. Если вам нужен большой разрыв между строками можете использовать несколько таких тегов, например, <br><br><br><br><br> — пять переводов строки.

<hr> — горизонтальная линия:

В теге <hr> можно указать ее толщину:
<hr size=»1″>:

<p>Текст</p> — Параграф


<div></div> — По умолчанию также параграф, но создан для сложного форматирования места нахождения контента на странице, используется для верстки через таблицы стилей.

<h1>-<h6> — это заголовки.

<b>Текст выделится жирным</b>
<strong>Текст выделится жирным (логическое выделение)<strong> — тег аналог <b>
<em>Наклонный текст</em> — аналог<i></i>
<u>Подчеркнутый текст</u>
<strike>Перечеркнутый текст</strike>
<big>Увеличенный</big> и <small>уменьшенный</small> текст по сравнению с текущим.
<sup>Верхний индекс</sup> — X2
<sub>Нижний индекс</sub> — X2
<tt>Моноширинный текст</tt> — как печатная машинка

<b><i><u>Жирный, наклонный и подчеркнутый текст</u></i></b>

Вставка объектов.

Чтобы вставить ссылку:

<a href=»http://zhyk.ru/«>Перейти на Zhyk.ru</a>

Где http://zhyk.ru/ — сайт, на который ведет ссылка, Перейти на Zhyk.ru — название ссылки.

Чтобы вставить картинку нужно создать код:

<img src=»http://zhyk.ru/image.png«>

Где http://zhyk.ru/image.png адрес картинки.


Списки создаются следующими html- кодами:

<ul>
<li>Первый пункт списка</li>
<li>Второй пункт списка</li>
<li>Третий пункт списка</li>
</ul>

Таблицы более сложный элемент чем эти html-теги, им можно посвятить целый пост, здесь просто покажу пример кода самой простой таблицы:

<table>
<tr>
<td>

Содержание

</td>
</tr>
</table>

Кстати, перевод строки после каждого тега вебмастеры ставят только для удобства редактирования html-кода, этот же код таблицы можно вставить так:

<table><tr><td>Содержание</td></tr></table>

Выравнивание текста по центру: :<center>ваш текст (картинка) </center>

Выравнивание текста по правому краю поста: <div align=right> ваш текст </div>

Выравнивание текста по всей ширине поста: <div align=justify> ваш текст </div>

Отступ (для цитат и определений, текст отделен пустой строкой и отступ слева 8 пробелов): <blockquote> текст </blockquote>

<marquee> ваша бегущая строка</marquee>

Вместо текста можно вставить картинку Основные теги для создания сайта html


<font color="red"> красный текст </font>
<font color="yellow"> желтый текст </font>
<font color="lime"> зеленый текст </font>

<form action="http://zhyk.ru" target="_blank" method="get"><input type="submit" value="Zhyk">

zhyk.ru

Теги для сайта html

От автора: если вы решили заняться сайтостроением, то вам нужно знать хотя бы основные теги html. Это те базовые знания, которое помогут вам создать свой первый простой сайт.

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

html — это глобальный тег-контейнер, в который помещается все содержимое веб-страницы. Он является парным, впрочем, как и большинство описываемых далее тегов. Если и будут попадаться одинарные, то я об этом скажу.


head — содержит разную информацию, которая никак не будет выводиться на странице, но от нее непосредственно зависит внешний вид информации. Например, в head прописывается кодировка, подключается таблица стилей и файлы javascript. То есть здесь указывается все, что нужно для корректной работы странички. Следующие четыре тега прописываются именно в head.

link — с помощью этого одинарного тега подключаются внешние файлы. Например, иконка или таблица стилей.

script — подключает файлы с расширением js (javascript).

title — задает название страницы, ее заголовок, который будет виден в поисковиках и в браузере.

meta — одинарный тег, в котором прописывается служебная информация, такая, как кодировка или ключевые слова.

body — тело страницы. Контейнер для всего содержимого, которое будет непосредственно выведено на веб-страничку.

Теги для текста, списки

p — создает параграф или абзац, который отделяется от других элементов небольшими вертикальными отступами. Основной элемент для хранения текстовой информации.

blockquote — большая цитата, которая можете содержать в себе другие теги для ее оформления. Может состоять, например, из нескольких абзацев.

h1 — h6 — теги для выделения заголовков на веб-странице. H1 – самый главный и далее по убыванию важности.


Основные теги для создания сайта html

Рис. 1. Заголовки в html.

q — маленькая цитата.

b, strong — выделяет текст жирным. Второй тег также придает словам особую важность.

em, i — выделение курсивом.

sub, sup — выводит текст в нижнем/верхнем индексе, заодно уменьшая немного размер шрифта.

ol — в html это тег нумерованного списка, пунктам которого будут присваиваться порядковые номера.

ul — маркированный список. Его пункты просто отмечаются маркером, внешний вид которого можно изменить. Маркированный список делают тогда, когда нет нужно в строгом перечислении каких-то пунктов.

li — парный тег, в который помещается один пункт маркированного или нумерованного списка. То есть ul или ol выступает лишь в роли контейнера.

Основные теги для создания сайта html

Рис.2. Маркированный и немаркированный списки.

Ссылки

Для ссылок в html есть отдельный тег — <a>, который имеет один обязательный атрибут:

Картинки

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


Таблицы

table — тег-контейнер, в который помещается вся таблица.

tr — ряд таблицы, в который вписываются ее ячейки. Сам ряд никак нельзя выделить, он выступает лишь в роли контейнера.

td — ячейка таблицы. Вот к ней как раз и можно применить какие-то стили, размер, в нее можно вписать информацию, вставить картинку или видео.

Пустые блочные и строчные контейнеры

div — пустой блочный контейнер, не выполняющий больше никаких функций. До сих пор с его помощью, например, верстают боковую колонку на сайте.

span — аналогично с дивов это пустой контейнер, но не блочный, а строчный. Чаще всего применяется для выделения отдельных кусков текста и применения к ним каких-то интересных стилей.

Мультимедиа

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

Формы

form — в этот тег помещается вся форма (обычно для регистрации, заказа чего-то). Имеет атрибуты, связывающие ее с PHP, иначе она не будет работать.

input — основной одинарный тег, который позволяет вставить в форму различные поля (для ввода текста, телефона, выбора даты рождения).

textarea — большое текстовое поле. Обычно в него можно вписать отзыв или комментарий.


Основные теги для создания сайта html

Рис. 3. Простая форма, созданная с помощью тегов form и input.

HTML5

Хотелось бы также упомянуть несколько современных тегов, которые появились в HTML5.

header — шапка сайта, статьи или какого-то раздела.

footer — подвал сайта, статьи или какого-то раздела.

aside — второстепенная информация, не имеющая непосредственной связи с главным содержанием. Но в этот тег не советуют вставлять сайдбар (боковую колонку), которую лучше пока делать по-старому с помощью div.

figure — позволяет группировать элементы. Самый распространенный пример – картинка и описание для нее.

section — раздел сайта (обычно со своим заголовком).

article — независимая статья, новость или заметка.

nav — главная навигация сайта.

Конечно, это не все теги, которые появились в HTML5, но практика показывает, что именно перечисленные пригодятся вам больше всего. К сожалению, у всех этих новых элементов нет дружбы со старыми версиями Internet Explorer, поэтому для него нужно реализовывать отдельную поддержку.


В статье были описаны лишь самые распространенные элементы. Полный список тегов html c описанием можно посмотреть в каком-нибудь словаре. Самый популярный в рунете – htmlbook.

Один раз прочитав статью вы не запомните все перечисленные теги. Намного лучше они запоминаются при реальной работе над сайтом. Это были основные теги для создания сайта html. Заходите на наш блог и вы найдете гораздо больше информации по созданию собственного сайта своими руками.

Основные теги для создания сайта html

webformyself.com

Доброго времени суток. Как правило в современном мире сайты создаются либо на CMS либо в бесплатных или платных конструкторах. Но все же, в начале времен 1990-2000 годы сайты создавались преимущественно на HTML, без использования каких-либо обращений к базе данных. Различные программы, позволяющие редактировать HTML + CSS в реальном времени, например, Dreamweaver — появились только в самом конце 20-го века. Поэтому сайты создавались в блокноте и других подобных редакторов. Хоть сейчас и существует множество удобных способов сделать качественный ресурс, создание сайта при помощи блокнота позволяет выучить основы построения страницы и основы HTML в целом.

Итак, для того, чтобы создать сайт через блокнот вам нужно для начала создать HTML файл. Сделать это можно следующим образом:
Заходите в меню Пуск -> Все программы -> Стандартные -> Блокнот

Создание сайта в блокноте
И сразу же сохраним его в HTML формате:  В блокноте нажмите: Файл -> Сохранить как

Сохраняем файл в формате HTML
И напишите название файла, к примеру, index.html

Сохраняем файл в формате HTML

Теперь мы можем приступать непосредственно к созданию HTML верстки в блокноте. Для начала, напишем основную разметку HTML кода, вы можете ее сразу скопировать и вставить, чтобы не тратить время попусту.

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <title>Мой самый прекрасный сайт</title>  </head>  <body>  <h1>Мой первый сайт</h1>  <p>Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.</p>  </body>  </html>

По сути это основные элементы, из которых и состоит любой веб-ресурс. Все, что находится в скобках называется HTML-тегом или просто тегом. Все HTML теги открываются, содержат в себе какую-то информацию и затем закрываются. Есть и другие теги, которым не нужен закрывающий тег, но о них мы поговорим позже. Сейчас нам куда интересней ответ на вопрос «как же создать сайт в блокноте?».

Давайте рассмотрим каждый из них, чтобы мы могли легко научиться создавать сайты в блокноте

nz4.ru

Как создать страничку

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

Основные теги для создания сайта html

Откройте документ.

Основные теги для создания сайта html

Вставьте в него вот этот код.

Теперь нажмите «Сохранить как…». Это очень важный момент.

Основные теги для создания сайта html

Файл нужно назвать index.html. Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.

Основные теги для создания сайта html

Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.

Основные теги для создания сайта html

Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.

Основные теги для создания сайта html

Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center» и вставим строчку, в которой содержится слово «Color». Кстати, как менять цвет html я уже писал. Это очень просто, рекомендую к прочтению.

Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5

Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: </font>.

Основные теги для создания сайта html

Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста.

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

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

Теги

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

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

Основные

Начинается и заканчивается страница с тегов <html></html>. Они показывают браузеру, что это веб-документ, созданный при помощи html.

Основные теги для создания сайта html

Далее идет <head></head> или заголовок. В ней располагается самая важная информация о странице, в нашем случае – Title. Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.

Основные теги для создания сайта html

Именно теги <title></title> отвечают за начало и конец основной информации о страничке.

Основные теги для создания сайта html

Далее идет основная контентная часть. Теги <body></body>. Все видимое на странице: заголовки, текст, картинки и так далее.

Основные теги для создания сайта html

Тег <h1> указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style, как мы это делали в примере. Хотя об этом тоже рановато.

Основные теги для создания сайта html

Кстати, Title и H1 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к сео-оптимизации. Помимо h1, существуют еще и h2, h3,h4.

В этой же строчке есть открывающийся и закрывающийся <center>. Благодаря этому элементу можно выравнивать текст по середине. Если этот тег удалить, то текст встанет по правому краю.

Основные теги для создания сайта html

<br/> — один из немногих единичных тегов. То есть он работает сам по себе. Благодаря этому элементы вы перепрыгиваете с одной строки, на другую. Проще говоря, делаете отступ. Написали его один раз, значит один раз переместились вниз, два, как у меня, и отступ получился чуть больше.

Основные теги для создания сайта html

Картинка

Далее идет тег img, то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это  тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.

Первым делом идет alt, то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title. При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.

Основные теги для создания сайта html

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

В теге src прописывается путь к картинке. Именно он указывает браузеру, что дальше нужно двигаться, чтобы найти нужное изображение, а в каком направлении искать – пишете вы сами.

Основные теги для создания сайта html

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

<font></font> отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.

Основные теги для создания сайта html

<b></b> помогает выделить текст жирным.

Основные теги для создания сайта html

<hr/> рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете <hr/> несколько раз, то получите ровно столько же горизонтальных полос при открытии страницы в браузере.

Ссылки

<a> указывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес”. В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег </а>.

Основные теги для создания сайта html

После того как основная часть страницы написана, вы закрываете тег body, так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html.

Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html». Всего 33 урока помогут вам выйти на новый уровень.

Основы html Евгения Попова

Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup

Основные теги для создания сайта html

Помимо этого заберите Бесплатную книгу по созданию сайтов! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.

Бесплатная книга по созданию сайтов

Сегодня вы сделали много, ведь первый шаг самый сложный.

Подписывайтесь на рассылку и группу ВКонтакте, и узнавайте еще: как и зачем нужен движок сайта, что такое блочная верстка и модульная сетка, как правильно писать сайты и многое другое.

До новых встреч и удачи!

start-luck.ru

Язык HTML и его теги

Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C. Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org. Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.

Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор. Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad) (вообще в дальнейшем для редактирования html-кода я советую использовать бесплатный текстовый редактор Notepead++). Найти его можно: «Пуск->Все программы->Стандартные->Блокнот». Давайте создадим страничку  об автомобилях. Итак, откроем Блокнот и наберем в нем текст:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Пример Web-страницы</title>
</head>
<body>
<h1 align=»center»>Сайт об автомобилях.</h1>
<p>Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об <strong>автомобилях</strong>. На сайте есть описания многих импортных и отечественных автомобилей.</p>
</body>
</html>

Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:

Создание web-страницы в блокноте

Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:

простая web-страница

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

Что такое тег?

Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент: <h1 align=»center»>Сайт об автомобилях</h1>. Здесь мы видим текст, который отображается на странице как заголовок, заключенный в теги <h1> и </h1>. Что же такое тег в html языке?

Тег HTML —  это обычные слова и символы, заключенные в угловые скобки, например <h1>, <p>, <body>. Так тег <h1> является открывающим тегом, тег </h1> закрывающим тегом, а текст между ними называется содержимым тега. Также тег <h1> и тег </h1> называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще  элементы состоящие из одного открывающего тега:

html тег

Так парный тег <h1> определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы <h1> — <h6>.

Элементы бывают блочные и строчные (текстовые). Блочные элементы осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы осуществляют непосредственное форматирование текста или логическое форматирование. Элемент <h1> является блочным элементом.

Далее идет парный тег <p>, который создает на HTML-странице абзац. Содержимое данного тега станет текстом этого абзаца. Элемент <p> также является блочным элементом и как мы видим он начинается с новой строки и между заголовком <h1> и абзацем есть отступ.

Внутри абзаца встречается парный тег <strong>, который выводит свое содержимое полужирным шрифтом. Данный тег <strong> вложен внутрь содержимого тега <p>. Это значит, что содержимое тега <strong> будет отображаться как часть абзаца. Такие вложенные теги называются дочерними, а теги в которые вложены другие теги называются родительскими. Таким образом, тег <strong> является дочерним, а тег <p> — родительским. Такая вложенность тегов встречается в HTML сплошь и рядом.

При вложении тегов следует придерживаться одному правилу, порядок следования закрывающих тегов должен быть обратным порядку следования открывающих тегов. Т.е. теги и их содержимое должны полностью вкладываться в другие теги. Если нарушить это правило, то WEB-страница может отобразиться не правильно.

Кстати, элемент <strong> является строчным элементом. И как мы видим никаких переносов строк, ни отступов при отображении этого элемента не осуществляется. И очень важно упомянуть, по правилам языка html строчные элементы не могут иметь вложенных тегов.

Вы могли заметить, что открывающий тег <h1> кроме названия содержит еще какой-то текст: align=»center». Это атрибут тега, который задает его параметры. Каждый атрибут имеет имя, после которого идет знак =, и далее идет его значение взятое в кавычки:

html тег. атрибут

В наше конкретном случае, атрибут align тега <h1> задает выравнивание текста. Так значение center указывает браузеру, что содержимое тега <h1> необходимо выровнять по центру.

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

Структура WEB — страницы. Основные html теги.

Для корректного отображения страницы в браузере, в html-коде обязательно наличие следующих парных тегов: <html>, <head> и <body>.

Во-первых весь ваш html-код должен быть заключен в теги <html> и </html>. Они сообщают браузеру, что страница содержит html-код.

Кроме этого в коде страницы должны быть разделы заголовка и тела документа. Раздел заголовка, или его еще называют шапка, состоит из парного тега <head> и его содержимого. В этом разделе помещают сведения о параметрах страницы, не отображаемые на экране и нужные только браузеру. В нашем примере раздел заголовка такой:

<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Пример Web-страницы</title>
</head>

 Тело документа выделяется с помощью тегов <body> и </body>. Сюда помещается весь контент страницы, то что будет отображаться в браузере.

Подводя итог вышесказанному, любая html-страница имеет следующую структуру:

<html>
<head>
…служебная информация…
</head>
<body>
…содержимое WEB-страницы…
</body>
</html>

Метаданные html страницы

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

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

и

<title>Пример Web-страницы</title>

Прежде всего, это тег <title>, который задает название WEB-страницы. Это название отображается в заголовке окна WEB-браузера. Кроме того содержимое тега <title> используется поисковиками для указания ссылки на данный документ в результатах поиска по ключевым словам. Поэтому старайтесь задавать интересный заголовок, содержащий ключевые слова, чтобы привлечь больше посетителей.

Следующий метатег <meta> сообщает браузеру кодировку нашего документа. В данном случае мы создали нашу web-страницу в кодировке utf-8. Информацию о кодировке мы передали браузеру с помощью атрибута content тега <meta>. Очень важно задавать кодировку, чтобы браузер корректно отображал содержимое нашей страницы. Если вы заметили, то тег <meta> не имеет закрывающего тега. Это так называемый одиночный тег, или элемент состоящий из одного открывающего тега.  Вообще с помощью тега <meta> можно задавать множество параметров важных как для браузера, так и для поисковиков.

webcodius.ru

Основные команды HTML

Список HTML-команд очень большой. Но основных не так много. Для того чтобы начать писать код, вам нужен редактор. Можно использовать «Блокнот». Рекомендуется использовать Notepad++. Он выглядит вот так.

html команды для создания сайтов

Преимущество в том, что в специальных редакторах теги подсвечиваются определенным цветом, в зависимости от категории. Команды для создания сайта HTML в блокноте или любой другой программе одни и те же. Язык используется везде одинаковый. Среда разработки — это лишь инструмент.

В языке HTML есть закрывающиеся и незакрывающиеся теги. Также в этом языке существует понятие вложенности. Каждый объект в коде — это элемент. У элемента есть открывающий тег, закрывающий и содержимое. Более того, у тега есть свои дополнительные атрибуты со своими значениями.

На рисунке видно два тега <html> и </html>. Запомните, что открывающий и закрывающий пишутся одинаково, но отличаются только «/». Если тег не закрыть, то обработчик будет всё остальное считать продолжением именно этого элемента. Это очень важно. Особенно в ссылках. Их мы рассмотрим немного дальше.

Тег <html> обязательный. Его всегда нужно писать. А вот закрывать не обязательно. По стандартам надо, но если не закрыть, работать всё равно будет.

Есть и другие основные теги: head и body.

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

Эти HTML-команды являются каркасом для страницы. Они обязательны. Они также закрываются.

Название тегов соответствует смыслу. Head — голова. В этом разделе указывается служебная и важная информация, которую не видно. Раздел body — тело документа. Здесь содержимое, которое отображается пользователю. Старайтесь закрывать теги сразу, чтобы потом не было путаницы.

html команды

В служебном разделе указывается:

  • заголовок документа;
  • файлы стилей;
  • файлы скриптов;
  • мета-теги;
  • указания для поисковых систем;
  • указания для роботов;
  • любая другая информация, которая может использоваться программистами, но не пользователям.

Файл стилей подключается вот так:

<link rel = “stylesheet” href = “style.css” type = “text/css”>

Файл скриптов следующим образом:

<script type=»text/javascript» src=’main.js’></script>

У текста обязательно должен быть заголовок. Его указываем вот так:

<title>Заголовок страницы</title>

Этот текст будет отображаться в названии вкладки браузера. Также этот заголовок выводится в результате выдачи поисковой системы.

Теги для оформления текста

Текст нужно размещать в теге абзаца. Он обозначается как <p>Текст</p>. Для текста также можно использовать <span>Строка</span>.

Оформлять текст можно, как и в «Ворде»:

  • <i>курсив</i>
  • <strong>жирный текст</strong>
  • <s>перечеркнутый текст</s>
  • <u>подчеркнутый текст</u>

Текст можно оформлять стилями. Их мы рассмотрим в конце, после обзора других элементов.

Использование заголовков

Есть и другие важные HTML-команды. Для создания сайтов обязательно используют заголовки. Они указываются при помощи тега <h1>Заголовок первого уровня</h1>. Существуют уровни от 1 до 6. Важно понимать, что в заголовках должна быть вложенность.

Пример на рисунке.

основные команды html

Имейте в виду, что рекомендуется использовать только один заголовок h1. При этом он должен совпадать с тегом <title>. Разумеется, вы можете указать 200 заголовков h1, но тогда к вам будут применены санкции со стороны поисковых систем.

Использование изображений

Изображения являются неотъемлемой частью веб-страниц. На примере показано, как можно вставить какую-нибудь фотографию.

html команды для сайта

Как видите, на примере детально показано, что и как называется.

Использование ссылок

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

Ссылка обозначается тегом <a>. Но его обязательно нужно закрывать. Кроме этого, у этого элемента есть обязательный атрибут href, в котором и указывается адрес ссылки.

html команды

В примере, указанном выше, видно, что вместо текста ссылки указана картинка. То есть можно ставить как текст, так и картинку.

Ссылки можно также форматировать при помощи классов стилей или обычных тегов (курсив, жирный, подчеркивание и перечеркивание).

Использование таблиц

Таблицы используются также очень часто. Изначально они предназначались для представления информации в удобном виде. Но затем верстальщики их использовали для размещения различных элементов страницы.

Таблица создается следующим образом:

<table width=»100%» border=»1″>

<tr>

<td>Текст ячейки</td>

<td>Текст ячейки</td>

</tr>

<tr>

<td>Текст ячейки</td>

<td>Текст ячейки</td>

</tr>

</table>

Атрибут width указывает ширину таблицы. Она может быть в процентах или пикселях. Border указывает толщину рамки.

Структура указывается следующим образом. Тег tr является строкой. Тег td ячейкой. А всё вместе — это таблица.

список html команд

Таблицу можно выравнивать. Для этого используется атрибут align, который может принимать три значения: Left, Center, Right. Пример использования указан ниже.

html команды для таблицы

Эти HTML-команды (ширина и выравнивание) подходят и для других элементов. Толщина рамки также указывается у изображений.

Использование списков

Используя HTML-команды, можно создать различные виды списков. Практически точно так же, как и в редакторе Word.

В языке Html существуют упорядоченные и неупорядоченные списки (маркированные). Пример такого списка.

<ul>

<li>Первое</li>

<li>Второе</li>

<li>Третье</li>

</ul>

Результат будет такой:

  • Первое
  • Второе
  • Третье

Тип списка

Код в языке HTML

В виде круга

<ul type=»disc»>
<li>…</li>
</ul>

В виде окружности

<ul type=»circle»>
<li>…</li>
</ul>

С квадратными маркерами

<ul type=»square»>
<li>…</li>
</ul>

Упорядоченные списки создаются точно так же, но только вместо <ul>, используем тег <ol>.

Здесь также можно задать тип вывода списка:

  • «1» – арабские числа 1, 2, 3 …
  • «A» – заглавные буквы A, B, C …
  • «a» – строчные буквы a, b, c …
  • «I» – большие римские числа I, II, III …
  • «i» – маленькие римские числа i, ii, iii …

Стандартно выводятся арабские цифры.

Поскольку это нумерованные списки, у них есть атрибут start, в котором указывается начальное значение списка. Например, можно выводить список начиная с 10-го или 20-го числа.

Использование стилей

HTML-команды для сайта весьма разнообразны, но все они подчиняются стилям. Стили можно указывать в виде файла в разделе head: <link rel = “stylesheet” href = “style.css” type = “text/css”> или прописать сразу готовый стиль.

Обратите внимание, что между этими определениями стилей есть разница. Файл стилей можно указывать во всех страницах сайта. Как только вы внесете в него изменения, то это обновление коснется всего сайта в целом. Если вы укажете стили на конкретной странице, то изменения и использование этих классов будет только внутри этого файла. За пределы него ваши настройки не выйдут.

Представьте, что у вас 20 страниц HTML и вы решили сделать заголовок на 2 пикселя больше. Если у вас всё в файле стилей, то правку внести нужно только там. Если везде индивидуально, то обновлять придется все 20 страниц.

Указывать только для одной страницы можно следующим образом.

html команды для стилей

Данный способ использовать не рекомендуется.

fb.ru

Основные теги для создания сайта

основные html теги
Основные теги для создания шаблона и ведения сайта

Многие ошибочно думают что чтобы самому создать шаблон и писать сайт в блокноте, нужно знать html, php и прочее, но на самом деле это не так. Знать html конечно желательно, но совсем не обязательно, достаточно запомнить десяток тегов и общие принципы строения сайта. В большинстве случаев для создания и ведения обычного сайта или блога достаточно знать лишь основные теги, которые постоянно используются, а все другое можно всегда найти в интернете и применить. Так же можно скачать справочник html, CSS, чтобы если что, то он был всегда в быстрой доступности.

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

<head> в этом теге на html странице заключается основная информация о странице. Краткое описание description, ключевые слова keywords, а также заголовок в теге title. Указывается кодировка страницы и др.

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

<header> этот тег используется для обозначения «шапки» сайта, в некоторых случаях в этот тег можно поместить заголовок статьи, если он состоит из нескольких заголовков, или имеет свое сложное оформление.

<hgroup> этот тег служит для группировки заголовков h1…h6, обычно применяется в шапке сайта, когда в тегах h1 и h2 заключен заголовок сайта и подзаголовок с кратким описанием содержимого сайта.

<nav> внутрь этого тега обычно помещается навигация по сайту. Ссылки на другие разделы, которые группируются тегами <ul> и <li>.

<menu> используется для меню боковой колонки, или для дополнительной навигации под тегом <nav> или внутри него, когда например нужно сделать ссылки на подразделы, или дополнительные разделы и страницы.

<main> используется для основного содержимого страницы, то есть контента (статьи, боковой колонки и др.)

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

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

<article> указывает поисковым роботам что здесь текстовая информация, статья, текст новости, поста, или записи блога. Обычно в этот тег заключается содержание статьи.

<figure> этот тег предназначен для обозначения изображений на странице.

<figcaption> в этом теге пишется заголовок к изображению, он должен быть первым или последним внутри тега <figure>

<vodeo> указывает и используется для вставки видеороликов и кодов видеоплееров на странице

<footer> этот тег обозначает подвал сайта

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

Основные теги для разметки текста

<h1><h6> эти теги для выделения заголовков в тексте.

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

<br> служит для переноса строки, можно использовать подряд <br><br><br> для переноса текста на несколько строк ниже

<strong> этот тег выделяет слова жирным шрифтом, обычно используется для выделения нескольких слов или предложений в тексте. СЕОшники советуют выделять им некоторые фразы в тексте, которые несут ключевые слова или синонимы, поисковые роботы обращают внимание на содержание в этом теге, старый аналог тег <b>

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

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

Кроме вышеописанных тегов можно создавать и свои контейнеры и присваивать им классы в таблице стилей. Например когда для кода рекламы нужен блок, то код рекламы заключаем в <div class="reklama"> код рекламы </div>, помещаем это все в нужный контейнер на сайте, в шапку , в подвал, или в боковую колонку. А в таблице стилей задаем стили для .reklama { стили, фон, отступы и пр.}

При всей кажущейся сложности, для тех кто первый раз столкнулся с самостоятельным созданием своего сайта, вести и создать сайт совсем не сложно, для этого достаточно знать ~20 тегов, и знать как задавать для них стили в таблице stile.css. Создавать страницы самописного сайта очень быстро, достаточно скопировать шаблонную страницу, вставить текст статьи, вставить картинки и разметить заголовок и абзацы, и все, вписываем ключевые слова и загружаем страницу на сайт.

htmlsait.e-veterok.ru

Теги структуры 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 По умолчанию список уже отображается с определенными отступами. список

Маркированный список, соответственно, создается с помощью тега 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 теги для создания сайта, которые действительно применяются сплошь и рядом и которые действительно нужно знать.

dolinacoda.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.