ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Пишем веб-страницу с нуля при помощи HTML

.

Пишем веб-страницу с нуля при помощи HTML
verstkaПриветствую друзья!
Я позиционирую SAYTOSTROI.RU, как блог для начинающих веб-мастеров, каковым являюсь по сути и сам , но совсем недавно заметил страшную оплошность в своей работе — у меня до сих пор нет статьи, которая бы ввела в курс дела: «как все-таки создаются сайты при помощи HTML», и сейчас наведу порядок.

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

Итак, начинаем! И сразу — экшен!

  • Сверните браузер, выйдете на свой рабочий стол.
  • Создайте на рабочем столе «Новый текстовый документ.txt».
  • Откройте его блокнотом и вставьте туда следующее:

Теперь, сохраните документ, но уже не в «.txt», а в «.html», и откроете его в вашем браузере!

Поздравляю! Вы только что создали сайт, практически, из ничего! На этом урок закончен, до свидания!

А теперь подробнее

Конечно, еще не все, у нас много работы. Давайте для начала разберемся, что значил тот код.

Парные и не парные теги

Чуть теории, чтобы потом было легче. Существуют такие понятия как «парные теги» и «не парные теги». Парные — это которые открываются, могут принимать «в себя»(во внутрь) другие теги и закрываются. Возможные примеры:

Что мы имеем тут: парный тег «тег1» принял в себя не парный тег «тег10».

Еще пример:

Тут тоже самое, только вместо «тега10» встал парный тег «тег2», такая вложенность может быть практически бесконечной! Порядок написания в одну строчку или в несколько совсем не имеет разницы, как будет удобнее так и пишите.

Чаще всего используются парные теги, такие как:

<p></p> — абзац;

<h1></h1> — заголовки h1-самый большой, h2 — меньше и так далее до h6, h6-самый маленький;

<a></a> — тег ссылки.

А не парные могут быть такие:

<b> — тег переноса строки в тексте;

<img> — тег добавления картинки.

То есть не парные теги остаются «без брата со слэшем».

Разбираем созданный сайт

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

Эта структура говорит браузеру: «Эй, %browsername%, ты грузишь html сайт». Она является обязательной! Раньше писали не , а целый абзац данных, но с приходом HTML5, все упростилось.

Это не шапка сайта, как вы могли подумать, парный тег «head» — это вся невидимая часть веб-страницы: заголовки, ключевые слова, стили CSS, описание сайта... Все это на самом сайте пользователь не видит, это нужно для поисковых систем и прочих технических штук, но нужно обязательно!

А тут мы встречаемся с еще одним очень важным понятием — это атрибуты тегов.

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

Чтобы сразу стало понятно что это, покажу шаблон их написания:

Что нам следует знать о атрибутах:

  • Наличие знака «равно» и кавычек обязательно!
  • Атрибуты пишутся в самом, так скажем, теле тега, то есть: <h1 color="#ccc">Заголовок</h1> или <img border="2px">.
  • У каждого тега существуют свои собственные атрибуты, но существуют похожие атрибуты их достаточно много.

А теперь вернемся к <meta>. Тег «Meta» говорит браузеру о многих вещах, в основном все эти вещи заключены в атрибуты. Например, тут у нас говорится о типе контента «content=»text/html"« и о кодировке страницы „charset=“utf-8»".

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

Ну, а теперь самое главное:

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

Я проявил свой «скилл», прописав в <body></body> парный тег <h1></h1> с содержанием «Да! Это тот самый супер крутой сайт, который я сделал сам!», как я уже сказал, H1 — это тег самого большого заголовка, поэтому вы увидели такую огромную надпись!

А где брать все эти теги и атрибуты? Придумавать что-ли? -Нет, не стоит этим заниматься.

Существует очень хороший русскоязычный ресурс, содержащий все данные по HTML и CSS, имя его — Htmlbook.

База по HTML и CSS

Итак, мы не много получили знаний о html, о том как прописывать теги, как видите ничего страшного и, уж тем более, сложного тут нет совсем! На этом первая часть знакомства с html закончена, жду вас в следующей части, там мы будем знакомится подробнее с версткой сайтов и затронем CSS. До встречи!
БЕРЕГИТЕ СЕБЯ!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

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

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