Окончательное руководство для начинающих для HTML

Последнее обновление: 15 May 2018

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

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

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

Вот некоторые наши версии HTML-руководства для блоггеров и владельцев интернет-бизнеса, не связанных с технологией.

HTML является основой современного Интернета. Миллионы сайтов вместе сформировали интернет. Где HTML является строительным блоком всех этих сайтов.

Q & A для начинающих

1- Что такое HTML?

HTML - это аббревиатура HYper TExt MArkupe Language. Это стандартный язык для тегов содержимого веб-браузеров.

HTML представлен «Элементами». Элементы также известны как «Теги».

2- Почему HTML нужен?

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

Вот почему вам нужен HTML.

3- Является ли HTML-регистр чувствительным?

HTML не чувствителен к регистру. Но лучше всего написать HTML с правильными случаями.

Шаги для создания первого файла HTML

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

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

Я использую и рекомендую Notepad ++ (бесплатно и с открытым исходным кодом) для написания веб-языков. Существуют и другие редакторы, которые вы можете использовать как Sublime Text, атом и так далее

Вот что вам нужно сделать:

  1. Установка редактора кода
  2. Откройте его
  3. Создать новый файл
  4. Сохраните его как .html-файл

Вы готовы к работе!


Go Top

1- Hello World!

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

Код:

<! DOCTYPE html> <html> <head> <title> Моя первая веб-страница </ title> </ head> <body> <p> Hello World! </ P> </ body> </ html>

Вывод:

Congrats! Вы создали свой самый первый HTML-файл. Вам не нужно понимать это в данный момент. Мы расскажем об этом в ближайшее время.

Понимание структуры HTML

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

Итак, давайте попробуем понять это из кода «Hello World!». Следующие элементы являются обязательными частями для каждого файла HTML.

  • <! DOCTYPE HTML> = Это объявление для браузера, что это HTML-файл. Вы должны указать его перед тегом <html>.
  • <html> </ html> = Это корневой элемент HTML-файла. Все, что вы пишете, находится между <html> и </ html>.
  • <head> </ head> = Это метаинформационная часть для браузера. Коды внутри этого тега не имеют визуального вывода.
  • <body> </ body> = Это та часть, которую делает веб-браузер. То, что вы точно видите на веб-сайте, - это рендеринг кодов между <body> и </ body>.


Go Top

2- HTML-теги

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

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

(2a) Основные теги

Все теги заголовка находятся между <head> и </ head>. Они содержат метаинформацию для веб-браузера и поисковых систем. У них нет визуального вывода.

<title> </ title>

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

Код:

<title> Моя первая веб-страница </ title>
Тэг заголовка отображается поверх вашего браузера.

<Ссылка>

Ссылка тега связывает вашу HTML-страницу с внешними ресурсами. Его основное назначение - связывать HTML-страницу с таблицами стилей CSS. Это самозакрывающийся тег и не нуждается в завершении </ link>. Здесь rel означает отношение к файлу, а src означает источник.

Код:

<link rel = "stylesheet" type = "text / css" src = "style.css">

<META>

Meta - это еще один самозакрывающийся тег, который предоставляет метаинформацию html-файла. Эти поисковые системы используют поисковые системы и другие веб-службы. Мета-теги являются обязательными, если вы хотите оптимизировать свою страницу для поисковых систем.

Код:

<meta name = "description" content = "Это краткое описание, которое поисковые системы показывают"

<script> </ script>

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

Код:

<script type = "text / javascript" src = "scripts.js"> </ script>

<noscript> </ noscript>

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

Код:

<NoScript> <p> Увы! Сценарии отключены. </ P> </ noscript>

(2b) Теги тела

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

<h1> </ h1> до <h6> </ h6>

Это теги заголовков. Самый важный заголовок отмечен <h1> и наименее важным с <h6>. Вы должны использовать их в правильной иерархии.

Код:

<h1> Это заголовок h1 </ h1> <h2> Это заголовок h2 </ h2> <h3> Это заголовок h3 </ h3> <h4> Это заголовок h4 </ hXXUM </ hXXUM > Это заголовок h4 </ h5> <h5> Это заголовок h5 </ h6>

Вывод:

Форматирование тегов

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

Код:

<p> Вы можете выделить свой текст разными способами. </ p> <p> Вы можете <strong> жирным шрифтом </ strong>, <u> подчеркнуть </ u>, <em> курсив </ em>, <mark > mark </ mark>, <sub> subscript </ sub>, <sup> superscript </ sup> и другие! </ p>

Вывод:

<! - ->

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

Пример:

<! - <p> Вы можете прокомментировать любой код, окружив их таким образом. </ p> ->

(2c) Другие важные HTML-теги

<a> </a>

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

Структура такая же. У этого есть открытие <a> и заключительная часть </a>. Текст, который вы хотите привязать, находится между <a> и </a>.

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

  • ahref = "" = Он определяет целевую ссылку. Ссылка идет между двойными кавычками.
  • target = "" = Он определяет, будет ли URL-адрес открываться на новой вкладке браузера или на той же вкладке. target = "_ blank" для новой вкладки, а target = "_ self" - для открытия на той же вкладке.
  • rel = "" = Определяет отношение текущей страницы к связанной странице. Если вы не доверяете связанной странице, вы можете определить rel = ”nofollow”.

Код:

<p> <a target="_blank" href="https://www.google.com/"> Нажмите здесь </a>, чтобы перейти в Google. Он откроется в новой вкладке. </ P> <p> <a target="_self" href="https://www.google.com/"> Нажмите здесь </a>. Он также приведет вас в Google, но откроется на текущей вкладке. </ P>

Вывод:

<img />

Идентификатор изображения - еще один важный тег, без которого вы не можете представить много сайтов на основе изображений.

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

  • src = "" = Это для определения исходной ссылки изображения. Поместите ссылку прямо между двойными кавычками.
  • alt = "" = Это означает альтернативный текст. Когда ваш образ не загружается, этот текст даст пользователям представление о недостающем изображении.
  • width = "" = Он определяет ширину изображения в пикселях.
  • Высота = "" = Определяет высоту изображения в пикселях.

Пример:

<p> Это Googleplex в августе 2014. </ p> <p> Это изображение имеет ширину 500 пикселей и высоту 375 пикселей. </ p> <img src = "https: //upload.wikimedia. org / wikipedia / commons / 0 / 0e / Googleplex-Patio-Aug-2014.JPG "alt =" Штаб-квартира Google в августе 2014 "width =" 500 "height =" 375 "/>

Вывод:

Советы: Хотите вставить кликабельное изображение? Оберните код изображения тегом <a>. Посмотрите, как это происходит.

<ol> </ ol> или <ul> </ ul>

Тег списка предназначен для создания списка элементов. <ol> обозначает упорядоченные списки (нумерованный список), а <ul> обозначает неупорядоченные списки (точки маркера).

Элементы списка внутри <ol> или <ul> помечены тегом <li> </ li>. li означает список. Вы можете иметь столько <li>, сколько хотите внутри родительского тега <ol> или <ul>.

Код:

<p> Это упорядоченный список: </ p> <ol> <li> Item 1 </ li> <li> Item 2 </ li> <li> Item 3 </ li> </ ol> <p> Это неупорядоченный список: </ p> <ul> <li> Item 1 </ li> <li> Item 2 </ li> <li> Item 3 </ li> </ ul>

Вывод:

<таблица> </ table>

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

<table> </ table> - это внешний родительский код. В этом теге <tr> обозначает строку таблицы, <td> обозначает столбец таблицы, а <th> обозначает заголовок таблицы.

Код:

<таблица> <tr> <th> имя </ th> <th> возраст </ th> <th> профессия </ th> </ tr> <tr> <td> Jo <td> 27 </ td> < td> Бизнесмен </ td> </ tr> <tr> <td> Кэрол </ td> <td> 26 </ td> <td> Медсестра </ td> </ tr> <tr> <td> Симона < / td> <td> 39 </ td> <td> Профессор </ td> </ tr> </ table>

Вывод:

Примечание. Значения внутри первого <tr> являются заголовками. Таким образом, мы использовали <th>, который применяет полужирный текстовый эффект к тексту.

Группирование групп

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

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

Тегами группировки таблиц являются:

  • <thead> </ thead> = Для обертывания заголовков таблицы. Он печатает каждую разбитую страницу таблицы.
  • <tbody> </ tbody> = Для обертывания основных данных таблицы. У вас может быть столько <tbody>, сколько вам нужно. Тег <tbody> означает отдельную группу данных.
  • <tfoot> </ tfoot> = Для обертывания нижнего колонтитула таблицы. Он печатает каждую разбитую страницу таблицы.

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

Вот как мы можем сгруппировать нашу иллюстрированную таблицу в <thead>, <tbody> и <tfoot>:

Код:

<таблица> <thead> <tr> <th> имя </ th> <th> возраст </ th> <th> профессия </ th> </ tr> </ thead> <tbody> <tr> <td> Джон </ td> <td> 27 </ td> <td> Бизнесмен </ td> </ tr> <tr> <td> Кэрол </ td> <td> 26 </ td> <td> Медсестра </ td td> </ tr> <tr> <td> Simone </ td> <td> 39 </ td> <td> Professor </ td> </ tr> </ tbody> <tfoot> <tr> <td> Всего человек: </ td> <td> 3 </ td> </ tr> </ tfoot> </ table>

Вывод:

<form> </ form>

Элемент формы используется для создания интерактивных форм для веб-страниц. Форма HTML содержит несколько последовательных элементов. Например: <label>, <input>, <textarea> и т. Д.

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

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

Существует множество типов ввода для форм. Самый основной тип ввода - текст. Он записывается как <input type = "text">. Типы также могут быть радио, флажок, электронная почта и т. Д. Для создания кнопки отправки должен быть введен тип ввода внизу.

Тег <label> используется для создания меток и связывания их с входами. Правило сопоставления меток со входами имеет то же значение в атрибуте for = "" метки и id = "" атрибута ввода.

Код:

<form action = "#"> <label for = "firstname"> Имя: </ label> <input type = "text" id = "firstname"> <br> <label for = "lastname"> Фамилия: </ label> <input type = "text" id = "lastname"> <br> <label for = "bio"> Краткая биография: </ label> <textarea id = "bio" строки = "10" cols = " 30 "placeholder =" Введите свою биографию здесь ... "> </ textarea> <br> <label> Пол: </ label> <br> <label for =" male "> Male </ label> <input type = "радио" имя = "пол" id = "мужчина"> <br> <метка для = "женщина"> женщина </ label> <input type = "radio" name = "пол" id = "женщина"> <br > <input type = "submit" value = "Submit"> <form>

Вывод:

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


Go Top

3-HTML-атрибуты

Атрибуты - это один тип модификаторов для HTML-тегов. Они добавляют новые конфигурации в теги HTML.

Атрибут выглядит как attributename = "" и находится в открывшемся теге HTML. Значение атрибута находится между двойными кавычками.

id = "" и class = ""

id и class являются идентификаторами тэгов HTML. Различные имена назначаются различным HTML-элементам с использованием идентификаторов. Вы можете использовать один идентификатор класса для нескольких элементов. Но вы не можете использовать один идентификатор идентификатора для нескольких элементов.

Код:

<h1 class = "heading"> Это основное название </ h1>

HREF =»»

href означает гипертекстовую ссылку. Они указывают пользователям ссылки на ссылки. Якорный тег <a> использует href для отправки пользователям целевого URL.

Код:

<a href="https://www.google.com/"> Google </a>

SRC =»»

src обозначает источник. Он определяет источник носителя или ресурса, который вы используете в файле HTML. Источником может быть локальный или сторонний URL.

Код:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />

альт =»»

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

Код:

<img src = "https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt = "Головной офис Google" />

стиль =»»

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

Код:

<h2 style = "color: red"> Это еще один заголовок </ h2>


Go Top

4- Отображение кода: Блок против Inline

Некоторые элементы всегда начинаются с новой строки и имеют полную доступную ширину. Это элементы «Block».

Пример: <div>, <p>, <h1> - <h6>, форма и т. Д.

Некоторые элементы занимают только необходимое пространство и не начинаются с новой строки. Это «встроенные» элементы.

Пример: <a>, <span>, <br>, <strong>, <img> и т. Д.

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

Код:

<! DOCTYPE html> <html> <head> <title> Моя первая веб-страница </ title> </ head> <body> <h2> Это заголовок H2. Он имеет отображение блока. </ H2> <h2> Это <u> другой </ u> заголовок H2. Здесь тег подчеркивания имеет встроенное отображение. </ H2> </ body> </ html>

Вывод:


Go Top

5- Двойная цитата против одной кавычки в HTML

Этот вопрос очень очевиден. Что вы должны использовать в HTML? Одинарная кавычка или двойная кавычка Люди, похоже, используют оба варианта, но какой из них правильный?

В HTML одинарные и двойные кавычки одинаковы. Они не имеют никакого значения в выводе.

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


Go Top

6- Семантический HTML против не-семантического HTML

Семантический HTML - это последняя версия HTML, которая также называется HTML5. Это разработанная версия не семантического HTML и XHTML.

Почему HTML5 лучше? В предыдущих версиях элементы HTML были идентифицированы именами id / class. Например: <div id = "article"> </ div> считается статьей.

В HTML5 тег <article> </ article> представляет себя как статью без необходимости идентификатора id / class.

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

Вот список некоторых популярных тегов HTML5:

  • <главная> </ main> = Это для упаковки основного контента, который вы хотите показать своим зрителям.
  • <header> </ header> = Это предназначено для маркировки части заголовка содержимого, например, метаданных заголовка или автора.
  • <статья> </ article> = Определяет пользовательский или независимый контент для ваших зрителей.
  • <раздел> </ section> = Он может группировать любой код, такой как верхний, нижний колонтитул или боковая панель. Вы можете сказать, что это семантическая форма div.
  • <footer> </ footer> = Здесь находится контент нижнего колонтитула, отказ от ответственности или авторский текст.
  • <audio> </ audio> = Он позволяет вставлять аудиофайлы без каких-либо проблем с плагинами.
  • <video> </ video> = Like <audio>, вы можете вставлять видео с помощью этого тега без проблем с плагинами.

Простая структура HTML5 будет выглядеть так:

<! DOCTYPE html> <html> <head> <meta charset = "utf-8" /> <title> Моя первая веб-страница </ title> </ head> <body> <header> <nav> <ul> < li> Меню 1 </ li> <li> Меню 2 </ li> </ ul> </ nav> </ header> <main> <article> <header> <h2> Это заголовок статьи </ h2> <p> Автор John Doe </ p> </ header> <p> Содержание статьи можно найти здесь </ p> </ article> </ main> <footer> <p> Авторские права 2017 John Doe </ p> </ footer> </ body> </ html>


Go Top

7- HTML Validation

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

Существуют две возможные причины для проверки ваших кодов:

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

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


Go Top

8- Другие полезные ресурсы

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

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