Основы html для начинающих на понятном языке. Работа с html


Работа с основными HTML тегами и атрибутами для новичков

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

Блок . Структура простейшей страницы

Страница сайта - это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head> для служебного содержимого страницы и тег <body> - для основного текста, который и виден на экране браузера.

В служебное содержимое, которое располагается внутри тега <head>, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8, подробнее об этом в видео, которое будет ниже на пару абзацев).

Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так - <!DOCTYPE html>.

Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере - скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим - посмотрите видео под примером):

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> Это основное содержимое страницы. </body> </html>

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

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

Тут скоро будет видео как начать: как сохранить с расширением .html, структура страницы, кодировки.

Ну, а теперь, научившись создавать простейшие страницы, мы перейдем к изучению полезных тегов, которые следует использовать внутри тега <body>. Это будут теги для абзацев, заголовков, списков, ссылок и других полезных вещей. Итак, приступим.

Блок . Абзацы

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

Абзац создается с помощью тега <p> таким образом:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p> Это абзац. </p> <p> Это еще один абзац. </p> <p> И еще один абзац. </p> </body> </html>

Так код будет выглядеть в браузере:

Это абзац.

Это еще один абзац.

И еще один абзац.

Блок . Заголовки h2, h3, h4, h5, h5, h6

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

Заголовки создаются с помощью тегов <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Они имеют разную степень важности. В заголовке h2 следует располагать название всей HTML страницы, в h3 - название блоков страницы, в h4 - название подблоков и так далее.

Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Смотрите пример:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <h2>Заголовок h2</h2> <h3>Заголовок h3</h3> <h4>Заголовок h4</h4> <h5>Заголовок h5</h5> <h5>Заголовок h5</h5> <h6>Заголовок h6</h6> <p>Это первый абзац.</p> <p>Это второй абзац.</p> <p>Это третий абзац.</p> </body> </html>

Так код будет выглядеть в браузере:

Заголовок h3

Заголовок h4

Заголовок h5
Заголовок h5
Заголовок h6

Это первый абзац.

Это второй абзац.

Это третий абзац.

Блок . Жирный

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p> Это обычный текст, а это <b>жирный</b> текст. </p> </body> </html>

Так код будет выглядеть в браузере:

Это обычный текст, а это жирный текст.

Обратите внимание на то, что тег <b> следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b делает жирным отдельные кусочки текста.

Блок . Курсив

Кроме жирного можно сделать также и курсив с помощью тега <i>:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p> Это обычный текст, а это <i>курсивный</i> текст. </p> </body> </html>

Так код будет выглядеть в браузере:

Это обычный текст, а это курсивный текст.

Блок . Списки

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

Списки создаются с помощью тега <ul>, внутри которого обязательно должны идти теги <li>. Тег ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя. Смотрите пример:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <ul> <li>Первый пункт списка.</li> <li>Второй пункт списка.</li> <li>Третий пункт списка.</li> </ul> </body> </html>

Так код будет выглядеть в браузере:

  • Первый пункт списка.
  • Второй пункт списка.
  • Третий пункт списка.

Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег <ol>, а пункты таких списков также создаются через теги li.

Давайте сделаем упорядоченный список, используя тег ol:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <ol> <li>Первый пункт списка.</li> <li>Второй пункт списка.</li> <li>Третий пункт списка.</li> </ol> </body> </html>

Так код будет выглядеть в браузере:

  1. Первый пункт списка.
  2. Второй пункт списка.
  3. Третий пункт списка.

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

Блок . Ссылки

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <a href="http://phphtml.net">Ссылка на сайт phphtml.net.</a> </body> </html>

Так код будет выглядеть в браузере:

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

Тут скоро будет видео про ссылки абсолютные и относительные

Блок . Картинки

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

Как это работает, посмотрим на следующем примере:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <img src="smile.png"> </body> </html>

Так код будет выглядеть в браузере:

Обратите внимание на то, что тег <img> не требует закрывающего тега.

Блок . Ссылки в виде картинок

Ссылкой может быть не только текст, но и картинка - для этого достаточно тег <img> вложить в тег <a>, как это сделано в следующем примере. Нажмите на картинку - и вы перейдете по ссылке на сайт phphtml.net (чтобы потом вернуться назад на книжку - нажмите кнопку "назад" в браузере):

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <a href="http://phphtml.net"><img src="smile.png"></a> </body> </html>

Так код будет выглядеть в браузере:

Блок . Разрыв строки

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

Давайте убедимся в этом на следующем примере:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p>Это первый абзац.</p> <p>Это второй абзац.</p> </body> </html>

Так код будет выглядеть в браузере:

Это первый абзац.

Это второй абзац.

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

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

Давайте посмотрим на его работу на следующем примере:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p>Это первая строка текста, <br> а это вторая.</p> </body> </html>

Так код будет выглядеть в браузере:

Это первая строка текста, а это вторая.

Блок . Комментарии HTML

Практически во всех языках программирования есть такое понятие как "комментарии". Комментарии - это такой текст, который будет проигнорирован браузером - на экране он будет не виден, но останется в исходном коде страницы.

Для чего нужны комментарии? Во-первых, для того, чтобы оставлять в исходном коде пометки себе или тому человеку, который будет править ваш код после вас. Во-вторых, с помощью комментариев можно убирать некоторые вещи, которые вы бы сейчас хотели удалить, но потом, может быть, захотите вернуть. Их можно просто временно закомментировать, а потом откомментировать при необходимости.

Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса - <!--, потом текст комментария, а потом два дефиса и уголок - -->. Смотрите пример:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <!-- Это комментарий HTML - на странице сайта он не отображается. --> Это основное содержимое страницы. </body> </html>

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите - переходите к изучению новой темы.

code.mu

Работа с HTML таблицами для новичков

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

Блок . Структура простейшей таблицы

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

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

Сама таблица имеет жесткую структуру: главным является тег <table>, внутри которого должны лежать теги <tr>, которые создают ряды (строки) таблицы, а внутри них - теги <td>, которые создают ячейки.

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

Изучите внимательно следующий пример с таблицей (тегу table добавлен атрибут border, который задает границу таблице и ее ячейкам):

<table border="1"> <!--Это будет первый ряд таблицы:--> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> <td>Ячейка 3</td> </tr> <!--Это будет второй ряд таблицы:--> <tr> <td>Ячейка 4</td> <td>Ячейка 5</td> <td>Ячейка 6</td> </tr> <!--Это будет третий ряд таблицы:--> <tr> <td>Ячейка 7</td> <td>Ячейка 8</td> <td>Ячейка 9</td> </tr> </table>

Так код будет выглядеть в браузере:

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Блок . Ячейки-заголовки

Кроме тегов td существуют также теги <th>, которые также создают ячейки. Но это уже будут не обычные ячейки, а ячейки-заголовки, которые указывают, что находится в данном столбце (или строке) таблицы.

В следующем примере ячейки "Иван" и "Николай" должны быть обычными ячейками td, а ячейка "Имя" по логике должна быть ячейкой-заголовком th, так как "Имя" - это общее название содержимого этого столбца:

<table border="1"> <tr> <th>Имя</th> <th>Фамилия</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>Иванов</td> <td>200$</td> </tr> <tr> <td>Николай</td> <td>Сидоров</td> <td>1000$</td> </tr> </table>

Так код будет выглядеть в браузере:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

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

Блок . Атрибут cellspacing

Вы обратили внимание на то, что между ячейками есть некоторое расстояние, из-за которого видно то, что каждая ячейка имеет свою границу? Это расстояние регулируется атрибутом cellspacing. При этом, если мы не напишем этот атрибут, то его значение будет совсем не ноль (в этом случае все ячейки слиплись бы друг с другом). То есть, атрибут cellspacing по умолчанию имеет некоторое ненулевое значение, из-за которого ячейки не слипаются (это расстояние равно нескольким пикселям).

Давайте посмотрим на примере. Сейчас я увеличу отступ между ячейками до 10 пикселей:

<table border="1" cellspacing="10"> <tr> <th>Имя</th> <th>Фамилия</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>Иванов</td> <td>200$</td> </tr> <tr> <td>Николай</td> <td>Сидоров</td> <td>1000$</td> </tr> </table>

Так код будет выглядеть в браузере:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

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

В HTML5 этот атрибут считается устаревшим (но он по-прежнему придает отступ по умолчанию). Вместо него следует использовать специальное CSS свойство, о котором мы поговорим попозже.

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

Блок . Атрибут cellpadding

Атрибут cellpadding задает отступ между текстом и границей ячейки. В следующем примере я поставлю значение этого атрибута в 20px и теперь текст отойдет от границы ячеек:

<table border="1" cellpadding="20"> <tr> <th>Имя</th> <th>Фамилия</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>Иванов</td> <td>200$</td> </tr> <tr> <td>Николай</td> <td>Сидоров</td> <td>1000$</td> </tr> </table>

Так код будет выглядеть в браузере:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

Для сравнения привожу то, как таблица будет выглядеть по умолчанию:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

Атрибут cellpadding также имеет некоторое значение по умолчанию. Если оно вам мешает - обнулите его.

Этот атрибут, так же, как и cellspacing, считается устаревшим в HTML5.

Блок . Обнуляем cellpadding и cellspacing

Давайте обнулим cellpadding и cellspacing и посмотрим, что станет с таблицей в этом случае:

<table border="1" cellpadding="0" cellspacing="0"> <tr> <th>Имя</th> <th>Фамилия</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>Иванов</td> <td>200$</td> </tr> <tr> <td>Николай</td> <td>Сидоров</td> <td>1000$</td> </tr> </table>

Так код будет выглядеть в браузере:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

Как вы видите, в данном случае ячейки таблицы слиплись, однако все равно заметно, что каждая ячейка имеет свою границу (то есть границы сейчас двойные). Вы сможете поправить это, когда изучите язык CSS.

Блок . Добавляем ширину и высоту

Существуют также атрибуты width и height, которые позволяют задать таблице ширину и высоту таблицы соответственно (без этих атрибутов ширина и высота таблицы регулируются ее содержимым: много текста - ширина большая, мало текста - ширина маленькая).

Посмотрите на пример их применения:

<table border="1" cellpadding="0" cellspacing="0"> <tr> <th>Имя</th> <th>Фамилия</th> <th>Зарплата</th> </tr> <tr> <td>Иван</td> <td>Иванов</td> <td>200$</td> </tr> <tr> <td>Николай</td> <td>Сидоров</td> <td>1000$</td> </tr> </table>

Так код будет выглядеть в браузере:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

Значениями атрибутов могут выступать пиксели или проценты. Значения в процентах задаются таким образом: - в этом случае таблица займет 30% ширины родителя.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите - переходите к изучению новой темы.

code.mu

Основы работы с языком CSS для новичков

Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.

Блок . Как работать с CSS

Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.

CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство - это цвет, а "красный" - это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.

Давайте покрасим все абзацы в красный цвет:

Это HTML код:

<p> Абзац с текстом. </p>

Это CSS код:

p { color: red; }

Так код будет выглядеть в браузере:

Абзац с текстом.

А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:

<p> Абзац с текстом. </p> p { color: red; font-size: 25px; }

Так код будет выглядеть в браузере:

Абзац с текстом.

Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.

Блок . Способы подключения CSS к HTML коду

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

Первый способ заключается в том, что CSSбудет написан в отдельном файле и специальным образом подключен к нашей HTML странице.

Еще два способа заключаются в том, что CSS код будет написан прямо на HTML странице.

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

Давайте разберемся с этими способами более подробно.

Способ 1. Отдельный CSS файл

Самый распространенный способ подключения CSS - это когда он хранится в отдельном файле и этот файл подключается ко всем страницам нашего сайта.

Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, и эти изменения применятся на всей 1000 HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.

Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: <link rel="stylesheet" href="путь к CSS файлу">.

Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css.

В следующем примере к нашему HTML файлу подключается CSS файл style.css:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> <link rel="stylesheet" href="style.css"> </head> <body> <p> Это абзац с текстом. </p> </body> </html>

Можно подключать не один файл, а несколько. Давайте подключим файлы style1.css, style2.css и style3.css:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> <link rel="stylesheet" href="style1.css"> <link rel="stylesheet" href="style2.css"> <link rel="stylesheet" href="style3.css"> </head> <body> <p> Это абзац с текстом. </p> </body> </html>

Способ 2. CSS внутри тега style

Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head> (чаще всего), так и внутри <body>.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл </title> <style> p { color: red; } </style> </head> <body> <p> Это абзац с текстом. </p> </body> </html>

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

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

Способ 3. CSS внутри атрибута style

Третий способ заключается в том, что можно добавить атрибут style любому тегу на странице и прямо там написать для него HTML код. Обратите внимание на то, что при этом никаких селекторов писать не нужно, так как CSS код применится только к тому тегу, для которого он написан:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p> Это абзац с текстом. </p> </body> </html>

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

Впрочем, иногда без второго и третьего способа не обойтись.

Блок . Комментарии CSS

Так же, как и в HTML, в CSS можно ставить комментарии. Они оформляются следующим образом: слеш и звездочка /*, потом текст комментария, потом звездочка и слеш */. Смотрите пример:

p { /* Тут находится комментарий CSS. */ color: red; font-size: 27px; }

Видео про CSS

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

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите - переходите к изучению новой темы.

code.mu

Какие программы нужны для работы с HTML.

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

Для тех, кто любит видео:

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

HTML - это фундамент, который необходим для изучения других технологий CSS, PHP и др., которые позволят создать качественный и уникальный Интернет-проект.

По минимуму, нужны программы двух классов:

1) Браузер.

Браузер – это программа для просмотра веб-страниц. Если вы читаете эту веб-страницу, то объяснять, что это за программа и зачем она нужна, думаю, особого смысла нет.

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

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

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

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

Internet Explorer

http://windows.microsoft.com/ru-RU/internet-explorer/products/ie/home

Opera

http://www.opera.com/ru/

Mozilla Firefox

http://mozilla.org

Google Chrome

http://www.google.ru/chrome

Яндекс.Браузер

http://browser.yandex.kz/

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

2) Программа для создания и редактирования кода.

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

Здесь вариантов, на которых можно остановиться тоже очень много.

Если вы помните из прошлой заметки, HTML-документ – это обычный текстовый файл, поэтому работать с ним можно в любом текстовом редакторе. Это можно делать даже в стандартном приложении «Блокнот», который входит в стандартный пакет программ от Windows. Позже посмотрим, как это можно сделать.

Есть и другие продвинутые текстовые редакторы, которые более адаптированы к работе с кодом.

Например,

Notepad++

http://notepad-plus-plus.org/

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

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

Dreamweaver

http://www.adobe.com/products/dreamweaver.html

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

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

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

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

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

Лично я пользуюсь именно этой программой для разработки своих веб-страниц.

В целом, этих двух программ (браузера и программы для создания и редактирования кода) вам будет вполне достаточно, чтобы создавать свои первые веб-страницы.

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

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

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

HTML - это фундамент, который необходим для изучения других технологий CSS, PHP и др., которые позволят создать качественный и уникальный Интернет-проект.

webgyry.info

Изучаем HTML теги и атрибуты. Учимся работать с текстом, списками и изображениями в HTML

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

Итак, первым делом, прежде чем приступить к дальнейшему изучению основ HTML, давайте узнаем, что такое теги и атрибуты в HTML. Тема тегов уже затрагивалась в статье «Основы HTML. Как создать HTML страницу», поэтому начнем сразу с атрибутов.

Атрибуты в HTML — это так называемые свойства, которые сообщают браузеру дополнительную информацию о том, как нужно отображать тот или иной элемент на странице. При помощи атрибутов, например, можно задать выравнивание тексту, шрифт, цвет и т.д. Одним словом атрибуты являются неотъемлемыми элементами языка гипертекстовой разметки HTML.

Работа с текстом в HTML — Абзацы, ссылки и атрибуты в HTML

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

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

<p>Текст или другой код внутри абзацев</p>

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

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

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

Для того, чтобы использовать эти свойства вам достаточно перечислить их в кавычках через точку с запятой, не забывая указать нужные значения возле каждого свойства, а также точку с запятой в конце списка свойств. Например, нам нужно задать размер шрифта 12 пикселей и выровнять его по центру. Из статей выше вы моги узнать, что за размер шрифта отвечает свойство font-size, а за его выравнивание – text-align. В  результате у нас получится следующий HTML код.

<p>Произвольный текст</p>

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

<p>Произвольный текст</p>

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

<strong>Слово выделенное жирным шрифтом</strong> <em>Слово выделенное курсивом</em>

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

Заголовки в HTML. Заголовки h2 – H6

Во всех статьях независимо от их объема существует необходимость создания заголовков. Заголовки играют важную роль в оптимизации страниц под поисковые системы, поэтому их использование обязательно на каждом сайте. В HTML для создания заголовков существуют специальные теги. Всего их шесть. Для заголовков первого уровня – h2, для второго – h3, для третьего – h4 и т.д. до заголовка шестого уровня H6. При этом желательно чтобы заголовок каждого уровня встречался не более одного раза на странице. Особенно это касается заголовка первого уровня h2.

Итак, для создания заголовка на странице достаточно просто выделить нужный участок текста тегами заголовков H и поставить нужный уровень.

<h2>Заголовок первого уровня</h2>

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

<h3>Заголовок второго уровня</h3> <h4>Заголовок третьего уровня</h4>

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

Работа со списками в HTML

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

Маркированные списки в HTML

Для создания маркированных списков в HTML применяются специальные теги <UL> и <LI>. Тег <UL> используется для создания всего списка, а тег <LI> для создания отдельного элемента списка. По умолчанию элементы списка маркируются обычным черным кружочком, который можно изменить при помощи атрибута TYPE. В пределах одного списка можно использовать различную маркировку элементов списка.

<ul type="circle"> <!--Задаем по умолчанию маркировку в виде пустых кружочков--> <li>элемент 1</li> <li>элемент 2</li> <li type="disc">элемент 3</li> <!--Задаем для данного элемента маркировку в виде черного кружочка--> <li type="square">элемент 4</li> <!--Задаем для данного элемента маркировку в виде черного квадратика--> </ul>

Результатом работы вышеприведенного кода будет список.

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

Нумерованные списки в HTML создаются аналогичным образом с единственным отличием, что в них вместо тега <UL> применяется тег <OL>, который сообщает браузеру, что данный список является нумерованным. В качестве нумерации данного вида списков HTML могут использоваться как цифры, так и буквы.

Нумерованные списки могут иметь следующие атрибуты.

  • TYPE – используется для указания стиля нумерации.
  • START — служит для задания начального номера списка, отличного от 1.
  • VALUE — дает возможность назначить произвольный номер любому элементу списка.

Пример списка с обычной числовой нумерацией.

<ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol>

Пример списка с буквенной нумерацией.

<ol type="A"> <!--Если указать в качестве значения маленькую букву а, то список будет пронумерован маленькими буквами--> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol>

Пример списка с произвольной числовой нумерацией.

<ol start="5"> <!--Указываем номер первого элемента нумерованного списка--> <li>элемент 1</li> <li value="9">элемент 2</li> <!--Присваиваем данному элементу номер 9--> <li>элемент 3</li> </ol>

Вышеприведенные списки будут выглядеть в браузере следующим образом.

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

Работа с изображениями в HTML

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

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

<img title="Основы HTML" alt="Основы HTML" src="http://dmitriydenisov.com/wp-content/uploads/2011/05/social-voting-logo.jpg">

Где

  • Height – высота изображения.
  • Width – ширина изображения.
  • Class – класс CSS задающий свойства для изображения.
  • Title – заголовок, который отображается при наведении курсора на изображение.
  • Alt – описание для изображения. Используется поисковыми системами при поиске картинок.
  • Src – путь к изображению.

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

<a href="http://dmitriydenisov.com/"><img title="Основы HTML" alt="Основы HTML" src="http://dmitriydenisov.com/wp-content/uploads/2011/05/social-voting-logo.jpg"></a>

Теперь наше изображение стало ссылкой и при нажатии на него пользователь перейдет на сайт http://dmitriydenisov.com.

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

Вы также можете подписаться на новостную рассылку любым удобным для вас способом в пункте «Подписка» либо воспользоваться формой ниже.

На этом все. Удачи вам и до скорых встреч на страницах блога dmitriydenisov.com

Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter

dmitriydenisov.com

Основы html для начинающих на понятном языке

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

к оглавлению ↑

Основы хтмл

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

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

Навел только несколько примеров, на самом деле сейчас эти знания все чаще и чаще применяются в интернете. Я больше практик чем теоретик, поэтому в моих статьях в данной рубрике я буду показывать вам свои примеры, как и что я делал, step by step. Буду выкладывать как примеры страниц, так и целые сайты.

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

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

к оглавлению ↑

Основы для начинающих

Что такое html — если посмотреть, что пишет Википедия - (HyperText Markup Language) язык гипертекстовой разметки документов. Большинство страниц в интернете содержат разметку страницы на этом языке. Данный язык интерпретируется браузерами, полученный в результате форматированный текст отображается на вашем мониторе компьютера или мобильного устройства.

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

Из чего должна состоять структура документа, какие теги должны присутствовать. Давайте разберем все на одном маленьком примере. Я написал некоторый текст в MS Office и показал его вот на этом скриншоте.

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

<html> <body> <h3>Блог Евгения Несмелова ! Nesmelov.ru Основы html и css для начинающих</h3> <p>Добро пожаловать на мой блог, сейчас вы проходите урок по Основам HTML. Если вам понравилась данная статья, можете подписаться на данный блог, чтоб получать новые статьи на свой электронный ящик.</p> <h3>Блог Евгения Несмелова ! Nesmelov.ru Основы html и css для начинающих</h3> <p>Из каких тегов состоит любой html документ, что в него входит и где все это нужно прописать.</p> </body> </html>

<html>

<body>

<h3>Блог Евгения Несмелова ! Nesmelov.ru Основы html и css для начинающих</h3>

<p>Добро пожаловать на мой блог, сейчас вы проходите урок по Основам HTML. Если вам понравилась данная статья, можете подписаться на данный блог, чтоб получать новые статьи на свой электронный ящик.</p>

<h3>Блог Евгения Несмелова ! Nesmelov.ru Основы html и css для начинающих</h3>

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

</body>

</html>

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

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

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

<strong><i>Текст</strong></i>

<strong><i>Текст</strong></i>

к оглавлению ↑

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

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

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

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

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

Четко нужно понимать, что существует заголовок документа и его тело. Заголовок это все, что состоит в теге <head>. Тело документа (<body>), в теле документа состоит все содержимое страницы. Если возникает необходимость оставить участок кода для себя, тем самым заключить данные теги в комментарии, для этого используется тег <!>. Все, что находится внутри такого тега, служит в роли комментария и не воспринимается браузерами.

к оглавлению ↑

<html>

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

к оглавлению ↑

<head>

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

<head> Содержание </head>

<head> Содержание </head>

к оглавлению ↑

<Title>

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

Если вы написали в заголовке "Привет Мир", именно эта информация должна отображаться на странице и никакой другой. Не стоит обманывать людей и поисковые машины, они этого не любят, тем самым вы делаете хуже себе. Информация, которая содержится в этом теге, должна соответствовать содержанию вашей страницы.

к оглавлению ↑

<meta>

После обязательного тега title, идет необязательный, но так же не мало важный тег meta. Данный тег является одинарным. С помощью данного тега задается описание для страницы (description) и ее ключевые слова (keywords).

<meta name="keywords" content="Ключевые слова задаются через запятую"> <meta name="description" content="Описание страницы не больше двух предложений">

<meta name="keywords" content="Ключевые слова задаются через запятую">

<meta name="description" content="Описание страницы не больше двух предложений">

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

<meta name="robots" content="index, follow"> <meta http-equiv="refresh" content="20"> <meta http-equiv="refresh" content="5; url=http://nesmelov.ru/">

<meta name="robots" content="index, follow">

<meta http-equiv="refresh" content="20">

<meta http-equiv="refresh" content="5; url=http://nesmelov.ru/">

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

к оглавлению ↑

<style>

Тег style так же можно использовать для задания стилей на странице. Если вы используете много разных стилей css, в таком случае желательно задавать их в отдельном файле. Если нужно указать несколько из них, все это можно задать прямо в html документе.

<style type="text/css"> .base { width: 100px; background-color: #000; height: 150px; color: #fff; }

<style type="text/css">

.base {

width: 100px;

background-color: #000;

height: 150px;

color: #fff;

}

Или добавить стили конкретно к одному тегу, для этого внутри самого тега нужно добавить элемент style. Данный тег нужно использовать внутри контейнера <head>, который задает стили для страницы. Можно использовать несколько таких тегов, ошибкой это не будет.

<h4>

<h4>

к оглавлению ↑

<link>

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

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

<link href="css/style-lg.css" rel="stylesheet"> <link href="css/style-md.css" rel="stylesheet"> <link href="css/style-sm.css" rel="stylesheet">

<link href="css/style-lg.css" rel="stylesheet">

<link href="css/style-md.css" rel="stylesheet">

<link href="css/style-sm.css" rel="stylesheet">

к оглавлению ↑

<script>

С помощью тега script к документу можно подключить разные сценарии (скрипты). Присутствие закрывающего тега обязательно. Сам скрипт может располагаться в начале документа, внутри и в конце.

<script type="text/javascript" href="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<script type="text/javascript" href="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

к оглавлению ↑

<body>

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

к оглавлению ↑

Заголовки страницы h2 h3 h4

Поехали дальше, мы видим тег <h2>, который так же открывается и закрывается. Данный тег обозначает основной заголовок текста, в большинстве случаев под заголовком h2 идет название страницы. На самом деле данных заголовком всего шесть. <h2> <h3> <h4> <h5> <h5> <h6>. Их так же используют в SEO, но это уже немного другая тема. Я обязательно выделю для этого одну статью и дам подробное описание для них, подписывайтесь на обновления блога, чтоб ничего не пропустить.

Наличие таких заголовком в статье сыграет важную роль при продвижении страницы. Кроме этого, ихнее использование дает вам четкую структуру страницы, ее заголовок, подзаголовки, выделения, подпункты и так далее. Всегда пользуйтесь ними и применяйте на практике. На многих CMS, например таких как WordPress, при написании текста, можно заметить «заголовок 1», "заголовок 2", "заголовок 3" и так далее. Именно они и отвечают за h2, h3 и h4.

к оглавлению ↑

<p>

Если вы пишите основной текст с нового абзаца, вы пишите тег <p> в начале и закрываете его в конце </p>. Обозначение абзаца в html равносильно создание нового абзаца в документе MS Word. Больше ничего нового в документ я не добавлял. Но, это еще далеко не все, что должно присутствовать в html документе. Посмотрим на еще один пример, описание будет немного позже.

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML документ</title> </head> <body> <p> <b> Этот текст будет полужирным, <i>а этот - ещё и курсивным</i> </b> </p> </body> </html>

<!DOCTYPE html>

<html>

   <head>

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

      <title>HTML документ</title>

   </head>

   <body>

      <p>

         <b>

            Этот текст будет полужирным,

            <i>а этот - ещё и курсивным</i>

         </b>

      </p>

   </body>

</html>

к оглавлению ↑

Основные элементы Head и Title

В каждом документе присутствует элемент head и Title. Первый из них <head>, который идет сразу после первого тега <html>. В данном теге идет вся информация о странице, в нем так же заключается элемент <title>. Title –информация о заголовке странице, другими словами название страницы, ее имя. Именно в тайтл вы указываете правильное название страницы, по которому пользователь будет искать вас через поисковую систему, очень важный момент. Оба элемента должны быть открыты и так же закрыты. Закрывается каждый элемент знаком «/». В итоге получается вот такая картинка.

<html> <head> <title>Заголовок&amp</title> </head> <body>\Содержание страницы</body> </head> </html>

<html>

<head>

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

</head>

<body>\Содержание страницы</body>

</head>

</html>

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

к оглавлению ↑

Редактор Notepad++

Для работы с кодом используйте программку Notepad++. Она бесплатная, найти ее в интернете не составит труда. Очень удобная для восприятия любого кода, так же удобно показывается открывающийся тег и закрывающийся. Поддерживаем синтаксис более 40 языков программирования. Как раз то, что нужно для изучения основ html.

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

к оглавлению ↑

Элемент DOCTYPE

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

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

<!DOCTYPE html "-//w3c//dtd XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=windows-1251" /> <meta name="Nesmelov.ru" content="Nesmelov Evgeniy" /> <meta name="description" content="полное описание данной страницы, о чем идет речь. 1-2 предложения" /> <meta name="keywords" content="джинсы, купить джинсы, зауженные джинсы, крутые джинсы, мужские крутые джинсы" /> <title>Заголовок данной страницы</title> </head> <body> </body> </html>

<!DOCTYPE html "-//w3c//dtd XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=windows-1251" />

<meta name="Nesmelov.ru" content="Nesmelov Evgeniy" />

<meta name="description" content="полное описание данной страницы, о чем идет речь. 1-2 предложения" />

<meta name="keywords" content="джинсы, купить джинсы, зауженные джинсы, крутые джинсы, мужские крутые джинсы" />

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

</head>

<body>

</body>

</html>

к оглавлению ↑

Информация для чайников

Коротко на понятном языке про основы html: Данная строчка говорит браузеру о том, что данный документ является XHTML версия 1.0, используется английский язык и вся эта каша расположена по данному адресу. Далее в теге meta указываем кодировку, которая используется. Чаще всего используется виндовс 1251.

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

Description — затрагивается тема по SEO, один из трех главных тегов, который должен присутствовать абсолютно в каждом документе, данный тег указывает описание страницы. Что написано на этой странице, короткое описание, не больше двух предложений. Тег keywords, так же затрагивается тема по SEO, данный тег является обязательным. В нем пишутся ключевые слова, по которым пользователи интернета будут находить вас через поисковые системы.

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

Что необходимо запомнить с данного урока про основы html:

  1. Почти все теги открываются и закрываются;
  2. Начинается документ с тега <html>;
  3. Наличие тега <head>;
  4. Наличие тега <body>;
  5. Четкая структура html документа.

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

Посмотрите видео про основы html от компании Webformyself.

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

Евгений Несмелов

nesmelov.ru

3. Приступаем к работе с HTML

Нанести разметку на содержание. Использовать HTML элемент. 1, 2, 3, 4, 5
Настроить браузерную обработку HTML элементов. Добавить один или несколько атрибутов к элементу. 6, 7, 8, 9, 10
Объявить, что документ содержит HTML. Использовать элементы DOCTYPE и html. 11
Описать HTML документ. Использовать элемент head, содержащий один или несколько элементов метаданных (которые описаны в главе 7). 12
Добавить содержание в HTML документ. Использовать элемент body, содержащий текст и другие HTML элементы. 13
Добавить ярлык для выбора элемента. Использовать глобальный атрибут accesskey. 14
Классифицировать элементы так, чтобы либо к ним мог быть применен один стиль, либо чтобы они могли быть расположены по своим местам программным образом. Использовать глобальный атрибут class. 15, 16, 17
Позволить пользователю редактировать содержание элемента. Использовать глобальный атрибут contenteditable. 18
Добавить контекстное меню элементу. Использовать глобальный атрибут contextmenu. (Отмечу, что этот атрибут не имеет в данный момент поддержки браузера). -
Указать направление верстки содержания элемента. Использовать глобальный атрибут dir. 19
Указать, что элемент можно перетаскивать. Использовать глобальный атрибут draggable (Информацию о "drag and drop" в HTML5 вы можете найти в главе 37). -
Указать, что элемент может быть использован в качестве цели, куда могут быть вставлены другие элементы. Использовать глобальный атрибут dropzone (Информацию о "drag and drop" в HTML5 вы можете найти в главе 37). -
Указать, что элемент и его содержимое неактуальны. Использовать глобальный атрибут hidden. 20
Назначить элементу уникальный идентификатор, так чтобы можно было применить к нему стиль, и так чтобы элемент можно было выбрать программно. Использовать глобальный атрибут id. 21
Указать язык, на котором выражается содержимое элемента. Использовать глобальный атрибут lang. 22
Указать, должно ли содержимое элемента быть проверено на наличие орфографических ошибок. Использовать глобальный атрибут spellcheck. 23
Определить стиль для элемента напрямую. Использовать глобальный атрибут style. 24
Указать порядок, в котором клавиша Tab передвигается между элементами в HTML документе. Использовать глобальный атрибут tabindex. 25
Предоставить дополнительную информацию об элементе (которая обычно используется в подсказке). Использовать глобальный атрибут title. 26

smarly.net