Html основа – Как писать на HTML5 и какие у него возможности — руководства на Skillbox

Основы HTML. Язык разметки гипертекста HTML. Основные понятия

Web-страница — это обычный текстовый документ HTML, который может быть написан в любом текстовом редакторе начиная от простейшего блокнота (встроенного в любые ОС), так и в более профессиональных редакторах (SublimeText, Notepad++ и др.), которые могут подсвечивать код и дополнять его.

Любой HTML — документ имеет расширение .html

Для создания и редактирования HTML документов создано огромное количество редакторов кода, как платных так и бесплатных. Редакторы специализированные на HTML документах имеют много преимуществ перед обычными текстовыми редакторами, они позволяют автодополнять код, указывать на ошибки кода, подсвечивать синтаксис не только языка HTML но так же других языков используемых при создании сайтов например JavaScript или CSS.

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

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

Этапы создания сайта:

  1. Определение тематики ресурса
  2. Проработка структуры сайта и связей между страницами
  3. Подготовка макета сайта (макета страницы или нескольких страниц)
  4. Верстка сайта по готовому макету
  5. Заполнение сайта контентом
  6. Добавление визуальных эффектов и анимации на сайт
  7. Разработка серверной части сайта
  8. Публикация сайта в сети
  9. Продвижение сайта

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

  1. Физическая структура сайта
  2. Логическая структура сайта

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

Images, а все подключаемые стили CSS в папке style.

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

Основы html

Язык HTML (от англ. HyperText Markup Language – «язык разметки гипертекста») служит для создания веб-страниц. Большинство сайтов созданы именно с помощью HTML.

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

форматирование текста, а также размещать в документе мультимедийные файлы (изображения, звук, Flash-анимацию), гипертекстовые ссылки на другие документы, табличные данные, формы ввода данных. HTML-документы имеют расширение имени файла htm или html. Редактирование HTML кода производят в текстовом редакторе (например, в обычном блокноте), а просмотр – в браузере.

Структура тега:

<имя тега атрибут1 атрибут2=»значение2″ …>

Тег состоит из имени тега, за которым может следовать список атрибутов, помещаемых между открывающей и закрывающей угловыми скобками (< и >). Атрибуты позволяют управлять поведением тега. Они могут иметь конкретные значения, задаваемые после знака равенства. Значения атрибутов заключаются в одиночные или двойные кавычки («). Атрибуты отделяются друг от друга пробелом, порядок следования атрибутов значения не имеет. Имена тэгов и атрибутов нечувствительны к регистру.

Пример: <FONT colorred» faceArial«>

Тег FONTпредназначен для управления внешним видом текста. В примере он задает начертание текста шрифтом Arial, красным цветом. Теги подразделяются на парные и непарные. Парные теги имеют закрывающий тег, непарные – не имеют. Закрывающий тег содержит косую черту перед именем и не имеет атрибутов. Между открывающим и закрывающим тегами помещается текст и другие теги. Атрибуты указываются только в открывающем теге.

Для выделения текста жирным используется тег <b>. Пример:

HTML-код: текст <b>жирный текст</b> текст

В браузере: текст жирный текст

текст

Примером непарного тега является тег <br>– перевод строки. Обычный перевод строки клавишей {Enter} браузер игнорирует (как и несколько поставленных подряд пробелов или знаков табуляции).

Цвет в HTML может быть задан ключевыми словами – названиями цветов на

английском языке:

Стандартные цвета HTML

Название в HTML

Название на русском

Код в RGB

blue

синий

#0000ff

green

зеленый

#008000

navy

темно-синий

#000080

red

красный

#ff0000

white

белый

#ffffff

olive

оливковый

#808000

silver

серебряный

#c0c0c0

yellow

желтый

#ffff00

fuchsia

фуксия

#ff00ff

lime

ярко-зеленый

#00ff00

aqua

морская волна

#00ffff

purple

пурпурный

#800080

teal

бирюзовый

#00808

grey

серый

#808080

maroon

темно-бордовый

#800000

black

черный

#000000

Основные теги, работа с текстом, списки

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

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

<html>…</html>– включает в себя все содержимое веб-страницы, в том числе теги <head> и <body>

<head>…</head>– содержит теги со служебной информацией о странице, например название в теге <title>.

<title>…</title>– задает название документа. Это название обычно отображается в заголовке окна браузера.

<body>…</body> – хранит содержимое документа.

Атрибуты:

bgcolor=»цвет» – назначает цвет фона документа text=»цвет» – указывает цвет обычного текста в документе.

Для включения изображения в качестве фона необходимо добавить в тэг <body>

атрибут background, задав в качестве его значения путь файла, содержащего требуемое изображение: <body background=”gif/back.gif”>.

простейший HTML-документ

<html>

<head>

<title>Заголовок</title>

</head>

<body>

Мой первый <i>HTML-документ!</i><br>

(это пример)

</body>

</html>

Теги для работы с текстом

HTML позволяет управлять отображением текста на странице.

<b>…</b>– выделение текста жирным

<i>…</i>– выделение текста курсивом

<u>…</u>– подчеркивание текста

<sub>…</sub>– форматировать текст как подстрочный индекс

<sup>…</sup>– форматировать текст как надстрочный индекс

<center>…</center>– выравнивание текста по центру

<font>…</font>– устанавливает размер, цвет и гарнитуру текста

Атрибуты:

color=»цвет» – задает цвет текста

face=»шрифт» – определяет гарнитуру текста; значением атрибута может быть список шрифтов, перечисленных через запятую – в этом случае выбирается первый доступный шрифт.

<p>…</p>– задает начало и конец параграфа

Атрибут:

align=»…» – определяет режим выравнивания текста

left – по левому краю (по умолчанию)

center – по центру

right – по правому краю

justify – по ширине

<hN>…</hN>– вложенный текст, является заголовком документа уровня N, N принимает значения от 1 до 6. Наибольшим заголовком является <h2>, наименьшим <h6>.

<br>– перенос строки

<hr>– выводит горизонтальную разделительную линию

Атрибуты:

align=»…» – определяет режим выравнивания линии

left – по левому краю

center – по центру (по умолчанию)

right – по правому краю

noshade – использовать сплошную линию вместо объемной

size=»N» – толщина линии в пикселах

width=»N» – ширина линии в пикселах или процентах по отношению к ширине экрана.

Основы HTML (XHTML) — Site on!

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

28.03.2013

Предисловие. У меня от вас секретов нет, так что сразу вас предупрежу: язык HTML настолько прост и лёгок, что вам НЕ нужны никакие курсы и блоги для того, чтобы начать с ним работать. Всё что вам нужно это просмотреть код данной страницы (Ctrl + U), а лучше воспользоваться просмотром элементов страницы с помощью веб-инспектора, как пример, затем открыть любой справочник HTML и просто ознакомиться со всеми тегами, почитать их описание, да хотя бы просто посмотреть на их список, и конечно эксперементировать самим! Вот и всё, а дальше, когда вам понадобиться что-либо сделать, просто заходим в справочник, ищем нужный нам тег, читаем (на всякий случай) как и с чем его применяют и всё – вы готовы к работе. Из личного опыта я вам порекомендую 2 справочника для HTML и CSS: http://htmlbook.ru — русскоязычный сайт, где всё довольно удобно написано, и XHTML + HTML + CSS — официальные страницы языков разметки и каскадных таблиц стилей CSS. И конечно, советую прочитать мою статью о том, как создать веб-страницу. А для тех, кто всё-таки не против провести время за лёгким чтивом, я и написал эту статью.

Основы HTML (XHTML) доступным языком

Здравствуйте, дорогие читатели, Site on! Сегодня мы поговорим об основах основ языка гипертекстовой разметки – HTML. HTML расшифровывается как HyperText Markup Language, и это действительно язык именно разметки, а не программирования. Так что если вдруг кто-то узнает, что вы называете себя программистом HTML или CSS, то непременно получите порцию острот в ваш адрес 🙂 Поэтому наши коллеги и придумали такое модное словечко как «верстальщик». Но прежде чем начать верстать макеты сайтов, давайте быстренько, но при этом, не пренебрегая подробностями, изучим основы.

А основы у нас таковы: вся разметка осуществляется по средствам тегов. Понятия тега можно условно сравнить с деталью конструктора при создании определённой фигуры. Деталь одной формы может нам понадобиться при построении одного участка, другой формы – при построении другого и все они соединяются и взаимодействуют между собой.

Понятие и обозначение тега в HTML (XHTML)

Так вот наши детали – теги, обозначают угловыми скобками БЕЗ пробелов с обеих сторон слова, например,

<body>
. Если вы хотя бы немного владеете английским языком, то могли уже догадаться, что данный тег обозначает тело страницы, то есть её основную часть. При этом стоит помнить, что почти всегда нужно обозначать, в какой момент тег должен закрыться. Это делается с помощью повторного написания этого же тега, но со слешем (опять же, никаких пробелов) перед его названием:
</body>

Важно! Приучайте себя с первых же секунд: если вы открыли тег, то сразу же его и закройте, и только после этого начинайте писать что-то внутри него. Потому как написали мы, например, тег выделения полужирным <strong> и понеслись там что-то писать, писать… а потом смотрим, а весь текст на странице стал полужирным, и думаем, вот это да, а я столько этих «стронгов» открыл, а какой же из них я забыл закрыть? И начинаем перечитывать весь текст заново. Это, конечно же, безобидный пример, но если вы на каждую мелочь будете тратить своё время, то это быстро вам надоест, не говоря уже о выражении: время – деньги. А когда будем изучать с вами PHP, так это вообще – золотое правило.

Так что зарубите себе на носу, открыли тег и сразу же его и закрыли:

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

Атрибуты тегов в XHTML и HTML

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

Пример: возьмём тег, обозначающий параграф

<p>текст</p>
, если мы его таким и оставим, то он выведет нам текст, выравненный по левому краю – такой стандарт (так как пишем мы слева направо). Теперь напишем так:
<p align="center">текст</p>
, где align – это атрибут (обозначает горизонтальное выравнивание), а center – его значение. Это всё равно, что написать в характеристики детали – материал: алюминий. Так вот теперь содержимое нашего параграфа будет ровно посередине… «Посередине чего?» – спросите вы: «Экрана? Окна браузера? Тела документа?».

Так вот это я и подразумевал, когда сравнивал наш язык HTML с конструктором – всё зависит от того, как складывается (как вложен) наш тег параграфа с другими тегами. Если он внутри какого-то блока (тег <div>), пусть даже этот блок прижат к левой границе браузера, то содержимое параграфа (это может быть не только текст) будет выравнено посередине этого блока, так как по умолчанию, ширина параграфа равна 100% от ширины элемента, в который этот параграф вложен. А если же тег нашего параграфа находится перед или после других тегов (никуда не вложен), то содержимое параграфа будет подстраиваться под середину окна браузера.

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

<div align="right">любой текст</div>
— тег div, обозначает блок, его атрибут align имеет значение right. Это значит, что содержимое внутри этого блока будет выравниваться по правой границе этого блока.
<a title="На главную" href="http://site-on.net">на главную!</a>
— тег гиперссылки (обычно называют просто «ссылка»), в нашем примере имеет 2 атрибута: title и href. В атрибут title записывается всплывающая подсказка, которая появляется при наведении курсора на ссылку. В атрибут href записывают адрес, на который пользователь перейдёт по нажатию на данную ссылку.

Теперь ещё пару слов о тегах и их закрытии. Теги могут требовать обязательного закрытия, не требовать закрытия (очень редко!) и быть самозакрывающимися. Примеры:

<!DOCTYPE>
— никогда не закрывается
<br /> , <img />
— самозакрывающиеся (selfclose). Синтаксис таков: название тега и атрибутов (если есть), пробел, слеш.
<ul></ul>
— обязателен к закрытию

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

Всем спасибо, как всегда жду ваших комментариев ниже, удачи!

Заметки:

1) Не зацикливайтесь на изучении атрибутов, мы всё равно не будем ими пользоваться (большей половиной).

2) Использование атрибутов отвечающих за стиль типа align и т.д. давным-давно УСТАРЕЛО, вместо них используется CSS, но об этом немного позже.

3) Статья называется основы HTML – это скорее маркетинговый ход, но на самом деле в этой статье и в повседневной жизни я придерживаюсь синтаксиса XHTML, разницы в них почти нет, но синтаксис XHTML более строгий, и лучше подходит для обучения и приучения к правильному стилю написания.

Пожалуйста, оцените эту статью
Средняя оценка: 4.79 из 5 (проголосовало: 106)

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:
Спасибо!

Основы HTML

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    </head>
    <body>...</body>
</html>

line 2 – основной язык страницы — английский

line 4 – кодировка

line 5 – Мета тег для улучшенной отрисовки в старых IE. IE=edge означает, что IE должен использовать последнюю версию движка для отрисовки, а chrome=1 означает, что IE должен использовать Google Chrome Frame, если он установлен. Google Chrome Frame — это плагин для IE на основе Chromium, работает в IE 6 — 9. Позволяет отображать страницы, используя WebKit layout engine и V8 JavaScript engine.

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
    </head>
    <body>...</body>
</html>

line 6 – Мета тег viewport сообщает мобильному браузеру, как должна выглядеть страница.1
width=device-width — ширина root элемента (тег html) равна ширине устройства (если не указано, то страница будет отображаться значительно шире, чем нужно)
*-scale — правила масштабирования. initial-scale — дефолтные пропорции, minimum-scale — минимальный зум, maximum-scale — максимальный. Т.е. по умолчанию страница отобразится 1 к 1, но пользователь сможет уменьшить масштаб до масштаба 0.5 к 1 и увеличить до размеров, больше стандартных в 2 раза.

line 7 – Мета тег, позволяющий в Chrome на Android «установить» страницу на домашний экран и запускать в полноэкранном режиме («app mode»).2

line 8 – Если значение = yes, то веб-приложение отображается в полноэкранном режиме на мобильных устройствах Apple.3 4

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">

        <meta name="apple-mobile-web-app-title" content="HTML5">
        <title>HTML5 Noveo Software University</title>
    </head>
    <body>...</body>
</html>

line 10 – Заголовок страницы на мобильном iOS. Если мета тег apple-mobile-web-app-title не указан, то по умолчанию используется заголовок из тега <title> .

line 11 – Заголовок страницы. Отображается на вкладке.

Body. Семантика верхнего уровня. Блочные теги.

<body>
	<header>
        ...
        <nav>
            <ul>...</ul>
        </nav>
        ...
    </header>
	<main>...</main>
	<footer>...</footer>
</body>

<main> может быть использован только 1 раз на странице. Означает основной контент.

<nav> — обертка для основной навигации на странице (как правило, встречается 1-2 раза).

Цитаты

<blockquote>
        <p>...</p>
        <p>...</p>
        <footer>
            <cite>
                <a href="...">
                    Autor
                </a>
            </cite>
        </footer>
</blockquote>

ИЛИ

<p>
    ...
    <q> ... <cite> Autor </cite> </q>
    ...
</p>

<blockquote> — тег для блочной цитаты. Обычно имеет футер, в котором указан автор.

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

<cite> — тег для указания автора и/или названия произведения. Может содержать ссылку на источник.

Sectioning Content и заголовки

Некоторые теги могут иметь хедер и футер: <body> , <article> , <section> , <blockquote>

Хедер используется для группировки заголовков, изображений (например, логотипов), навигации, поиска и т.п. Если в хедере только заголовок, то хедер не нужен, достаточно тега заголовка.

Согласно спецификации HTML5.1, на странице должен быть один заголовок h2. Это заголовок верхнего уровня, он используется для названия страницы.

Заголовки h3-h6 могут встречаться несколько раз.

Браузерная поддержка и полифилы

HTML5 semantic elements - Can I useHTML5 semantic elements — Can I use 10

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

main, section, article, aside, footer, header, nav {
    display: block;
}

HTML

Вы здесь: Главная — HTML

HTML

HTML — это гипертекстовый язык разметки, на котором создаётся абсолютное большинство страниц в Интернете. Его знание необходимо абсолютно любому Web-мастеру, причём совершенно не важно, как Вы создаёте сайты: абсолютно с нуля или же с помощью какой-нибудь CMS. И в первом, и во втором случае Вы будете использовать язык HTML.

Поэтому данный раздел сайта является обязательным к изучению абсолютно для всех Web-мастеров.

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

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

Так же не так давно появился HTML 5. Это расширенный стандарт языка гипертекстовой разметки, который ждали почти 10 лет. В него вошло множество новых элементов, расширяющих возможности Web-мастеров при вёрстке сайтов, в частности. Данному стандарту на сайте отведена специальная категория, которая так и называется HTML 5. В этой категории я познакомлю Вас с новыми элементами и их назначением. Конечно, будет множество примеров HTML-кода.

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

Бесплатный курс по основам HTML: http://srs.myrusakov.ru/html

Свежие материалы по созданию сайта на HTML

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

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