Меню заработка

Здравствуйте уважаемые читатели блога о заработке в интернете и создании сайтов NewDohod.ru.

html

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

Содержание:
  1. Вступление. Что такое HTML?
  2. Зачем изучать тонкости HTML-верстки.
  3. Структура языка HTML.
  4. Что входит в тег <head>.
  5. Элементы в теге <body>.
  6. Заключение.

 

 

Что такое HTML?

Многие из Вас не редко встречали эту аббревиатуру в интернете. Особенно если речь шла о создании и верстке сайта.

Итак, HTML (HyperText Markup Language) – это язык гипертекстовой разметки документов для браузеров. На этом языке написана каждая страница сайта в интернете. Произносится, как ЭйчТиЭмЭль.

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

 

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

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

В данном случае в роли ворда, у нас выступает браузер, а вместо текстового документа мы имеем страницу формата «.html».

 

 

Зачем изучать тонкости HTML?

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

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

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

 

 

Структура языка HTML.

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

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

Поэтому советую скачать бесплатный редактор Sublime Text с официального сайта разработчика. С помощью этого редактора будет гораздо проще визуально воспринимать процесс верстки и работать с кодом.

 

Для начала создадим фаил index.html

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <title>Заголовок</title>
  5.     <meta charset="UTF-8">
  6.     <link rel="icon" href="/favicon.ico">
  7.     <link rel="stylesheet" href="/template.css">
  8.     <script src="/slider.js" type="text/javascript"></script>
  9.   </head>
  10.   <body>
  11.     Тело документа
  12.   </body>
  13. </html>

 

В первой строке <!doctype html> у нас указывается тип документа, эта конструкция позволяет понять браузерам какая версия HTML используется на странице Вашего сайта.

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

 

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

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

 

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

html kod

 

 

Тег <head> - метаинформация нашего сайта.

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

 

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

 

snippet

 

 

Метатег <meta charset=”UTF-8”> - в нем содержится информация в какой кодировке будет представлена страница для пользователя. Отсутствие обозначения кодировки может привести к неприятным последствиям, и Ваша страница может отображаться не совсем корректно. Так сказать, вместо текста можно будет увидеть «иероглифы» или другие не воспринимаемые для человека символы.

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

 

Favicon (фавикон) – это иконка-логотип нашего сайта, размером 16х16 или 32х32 пикселя (в данный момент можно использовать и другие размеры фавиконок для качественного и корректного отображения на разных устройствах (на платформах IOS, Android, Windows), показывается на вкладке браузера, рядом с заголовком страницы.

Элемент <link rel="icon" href="favicon.ico"> вызывает наш файл с иконкой формата *.ico из корневого каталога сайта и выводит ее на вкладку.

 

Следующей строкой подключаем CSS стили (Cascading Style Sheets) к нашей html-странице. Делаем это при помощи <link rel="stylesheet" href="template.css">.

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

В случае с тегом <link> для подключения с Каскадных Таблиц Стилей (CSS) или фавиконки, мы не используем закрывающий тег </link>!

 

<script> - в этом теге прописывается код JavaScript, либо ссылка на файл с нужным нам скриптом. В нашем случае <script src="slider.js" type="text/javascript"></script> подключает ява-скрипт из файла “slider.js”, находящегося в корневом каталоге (там же где и index.html). Естественно, перед тем как использовать эту конструкуцию на нашем сайте – его нужно создать и поместить в нужную папку (также касается файлов template.css и favicon.ico).

 

Оптимизатор скорости загрузки сайта от Google настоятельно рекомендует выносить этот тег перед закрытием тела документа </body>. Таким образом улучшив скорость загрузки страницы сайта. Но чаще всего его можно встретить именно в теге <head>…</head>.

 

После всех этих строк не забываем прописать закрывающий тег </head>.

 

 

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

 

Итак, перейдем к самому интересному и визуально ощутимому процессу создания страницы сайта – заполнение тега <body>.

 

 

Тег <body> - то, что мы видим на нашем сайте.

tag body

<body>…</body> - все что находится внутри данного тега мы видим с Вами в браузере. Здесь содержатся любые элементы сайта и их последовательность (таблицы, текст, ссылки, блоки, картинки и прочее).

 

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

 

Тег:

Описание: 

<p>

 Абзац. С помощью этого тега мы разделяем наш текст на абзацы.

Пример:

<p>Здравствуйте уважаемые читатели NewDohod.ru.</p>
<p>В данной статье мы рассмотрим основы языка HTML.</p> 

 

<h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<h6>.

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

Пример:

<h1>Заголовок первого уровня</h1> - только один раз.
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
и так далее...

 

<strong>
<em>

 С помощью этих тегов мы можем выделить текст жирным или курсивом.

Пример: 

<strong>Этот текст будет выделен жирным</strong>
<em>А этот будет написан курсивом</em>

 

<a>

Ссылка. С помощью этого тега можно проставить ссылки в тексте.

Пример:

<a href="/kak-sdelat-sait.html">как сделать свой первый сайт</a>

 

<ul>,
<ol>

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

Примеры:

<ul>
  <li>Маркированный список 1</li>
  <li>Маркированный список 2</li>
</ul>

 

<ol>
  <li>Нумерованный список 1</li>
  <li>Нумерованный список 2</li>
</ol>

 

 <span>

 Позволяет сделать подстроку в строке, применив к ней стили CSS. Без заданных стилей, никак себя не показывает. Часто применяется в верстке.

Пример:

собственный сайт - <span style="color: #ff0000;">самый лучший</span> способ заработка в интернете.

 

<img>

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

Пример:

<img src="/gallery/myphoto.jpg" alt="моя_фотография" />

 

 <div>

 Самый важный тег при верстке. Позволяет создавать блочные элементы. Все свойства задаются в CSS-файле. Может заключать в себе еще теги <div>.

Пример:

<div>
  <div>Блок внутри блока с текстом</div>
  <div>Второй блок в нем</div>
</div>

 

<form>,
<input>,
+<textarea>

 

 Формы ввода и заполнения данных. Позволяют отправить данные пользователя в базу данных Вашего сайта. Используются для обратной связи.

Пример:

<form action="ссылка_на_скрипт_обработки_формы.php">
     <input type="text" name="name">
     <input type="text" name="email">
   <textarea name="text"> Текст сообщения <textarea>
     <input type="submit" value="Отправить">
 </form>

 

<audio>,
<video>

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

Пример:

<video src="/serial.mp4" controls="controls" type="video/mp4"></video> 
<audio src="/track.mp3" controls="controls" type="audio/mpeg"></audio>

 

<iframe>

Этот тег может загрузить другую страницу в ваш html-документ.

Пример:

<iframe src="https://newdohod.ru"></iframe>

 

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

 

 

Заключение.

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

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

 

Видео на тему: HTML для начинающих (от 10лет +мотивация).

 

Рекомендуемые статьи:

 

Комментарии (0)

Рейтинг 0 из 5 на основе 0 голосов
Здесь ещё нет оставленных комментариев.

Оставьте свой комментарий

  1. Добавление комментария от гостя.
Оцените сообщение:
Вложения (0 / 3)
Share Your Location