Гайд Введение в HTML #1

Prince Crown · 31 Авг 2021

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

Ниже приведен пример HTML-кода :-

HTML:

<!DOCTYPE html>
<html>
<head></head>

<body>

Это пример текста... <br/>  Вы начинаете изучать HTML.
<!-- Мы используем этот синтаксис для написания комментариев -->
<!-- Содержимое страницы и остальные теги здесь.... -->
<!-- Это фактическая область, которая отображается в браузере -->


<body>

</html>

Не забудьте сохранить указанный выше файл с расширением". html".
Запустите браузер и откройте файл; он будет выглядеть следующим образом:

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

.

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

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

Теги определяют все элементы документа, т. е. они придают смысл простому тексту HTML.

● HTML - теги окружены двумя символами < и > < и >(они называются угловыми скобками).
● Имя тега может начинаться либо с алфавита, либо с символа подчеркивания(_).
● Текст между начальным и конечным тегами-это содержимое элемента.
● Теги с открытием и закрытием могут содержать любое количество тегов внутри себя.
● HTML-теги не чувствительны к регистру, означает то же самое, что .
● HTML-теги обычно поставляются в парах(теги контейнера), то есть как открывающие, так и закрывающие(это то же самое, только имя тега с символом " / " в начале).
● Например: <html> и <html></html> </html> - это тег, который поставляется в паре.
● Например:   не имеет закрывающего тега.

3.1. Описание тегов, используемых до сих пор

<!DOCTYPE html> сообщает браузеру, что отображаемый файл является страницей HTML
<html> </html> предназначен для содержания всех html-данных и является началом HTML
<head> </head> предоставляет информацию о документе. Не отображается в окно браузера.
<title> </title> содержит название документа
<body> </body> содержит все, что видно на веб-странице.

ПРИМЕЧАНИЕ. Вы можете встретить «самозакрывающиеся» теги, когда тег br, например, будет выглядеть как « », а не просто « ».

Объявление DOCTYPE описывает, в какой версии HTML написана страница. Это самое первое, что вы видите в своем HTML - документе на каждой веб-странице. Это написано в верхней части каждой страницы перед тегом <html>.<html>
Объявление doctype не является тегом HTML. Это тот, который рекомендуется HTML5.

Синтаксис для doctype следующий: <!DOCTYPE html><!DOCTYPE html>.

Элементы - это то, что на самом деле составляет веб-страницу. Теги просто определяют начало и конец элементов. Все, что включает в себя веб-страница, является элементом HTML.

Например: это HTML-элемент: Этот текст выделен жирным шрифтом

HTML - элемент начинается с открывающего тега: 
Содержимое HTML - элемента: Этот текст выделен жирным шрифтом
HTML - элемент заканчивается закрывающим тегом:

Основные элементы, использовавшиеся до сих пор, были кратко описаны ниже

5.1. Абзацы

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

Например: вот пример кода для тега

HTML:

<html>
    <head>
        <title>p tag</title>
      </head>
      <body>
          <p>This is line 1. </p>
          <p>This is line 2. </p>
          <!-- пытаюсь отформатировать текст без использования p-тега -->
          Это строка 1.
          Это строка 2.
          Это строка 3.
      </body>
</html>

ПРИМЕЧАНИЕ. При форматировании без p-тега в текущую строку добавляются новые строки.
Это происходит потому, что интервал между текстами не имеет значения для браузера

5.2. Заголовки

Это теги в HTML для обозначения некоторого контента в качестве заголовков.
На самом деле существует шесть различных уровней заголовков h1, h2, h3, h4, h5 и h6.
Среди них h1 определяет наибольший заголовок, а h6 определяет наименьший заголовок уровня.
Например: вот пример кода для тегов H

HTML:

<html>
     <head>
         <title>Уровни заголовков</title>
     </head>
     <body>
         <h1>Уровень заголовка 1 </h1>
         <h2>Уровень заголовка 2 </h2>
         <h3>Уровень заголовка 3 </h3>
         <h4>Уровень заголовка 4 </h4>
         <h5>Уровень заголовка 5 </h5>
         <h6>Уровень заголовка 6 </h6>
     </body>
</html>

Содержимое выглядит следующим образом:

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

5.3. Бирка BR

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

Например:
<h3>
We are studying in
 
Coding Ninjas
</h3>
Покажет заголовок как:

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

.

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

6.1. Неупорядоченные Списки

Он используется для группировки набора связанных элементов без определенного порядка.
Неупорядоченные списки используются, когда нумерация элементов не требуется.
По умолчанию за элементами следуют маркеры.
Они определяются с помощью тега <ul>.

HTML:

<!DOCTYPE html>
<html>
     <head>
          <title> Unordered Lists </title>
     </head>
     <body>
          <h1> Lists </h1>
          <ul>
              <li> first item </li>
              <li> second item </li>
              <li> third item </li>
          </ul>
      </body>
</html>

Это будет выглядеть так:

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

HTML предоставляет интересную функцию для изменения стиля маркера элемента списка.
В неупорядоченных списках существует 4 типа стилей:

type="disc" - устанавливает маркер элемента списка в маркер (по умолчанию) ●
type="circle" - устанавливает маркер элемента списка в виде круга ○
type="square" - устанавливает маркер элемента списка в квадрат ■
type="none" - элементы списков не будут помечены

ПРИМЕЧАНИЕ: Вышеуказанные стили могут быть созданы с помощью атрибута "тип".
Однако этот атрибут теперь не поддерживается в HTML5, и теперь вам нужно изменить стиль с помощью CSS(об этом мы узнаем позже).

6.2. Упорядоченные списки

Он используется для группировки набора связанных элементов в определенном порядке. Упорядоченные списки используются
, когда требуется нумерация элементов. По умолчанию за элементами следует
числовая нумерация.
Они определяются с помощью тега <ul>.

HTML:

<!DOCTYPE html>
<html>
     <head>
          <title>Unordered Lists</title>
     </head>
     <body>
         <h1>Lists</h1>
         <ol>
             <li> first item </li>
             <li> second item </li>
             <li> third item </li>
         </ol>
     </body>
</html>

Выглядит это следующим образом:

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

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

1. type="1" - Элементы списка будут пронумерованы цифрами (по умолчанию)
A. type="A" - Элементы списка будут пронумерованы прописными буквами
a. type="a" - Элементы списка будут пронумерованы строчными буквами
I. type="I" - Элементы списка будут пронумерованы прописными римскими цифрами
i. type="i" - Элементы списка будут пронумерованы строчными римскими цифрами

6.3. Списки описаний

Список определений-это не список элементов. Это список терминов и разъяснение терминов.
Список определений начинается с тега <dl>.
Каждый термин списка определений начинается с тега <dt>.
Каждое определение списка определений начинается с тега <dd>.

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

Например:

HTML:

<!DOCTYPE html>
<html>
     <head>
         <title>Description Lists</title>
     </head>
     <body>
         <h2>Description List</h2>
         <dl>
            <dt>Coffee</dt>
                <dd>- black hot drink</dd>
            <dt>Milk</dt>
                <dd>- white cold drink</dd>
         </dl>
     </body>
</html>

Результат:

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

.

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

Пример:

HTML:

<ul>
     <li> first item </li>
     <li> second item
          <!-- Look, the closing </li> tag is not placed here! -->
          <ul>
               <li> second item first subitem </li>
               <li> second item second subitem
                    <!-- Same for the second nested unordered list! -->
                    <ul>
                         <li> second item second subitem first sub-subitem </li>
                         <li> second item second subitem second sub-subitem </li>
                            <li> second item second subitem third sub-subitem </li>
                    </ul>
                </li>
                <!-- Closing </li> tag for the list that contains the third unordered list -->
                <li> second item third subitem </li>
                </ul>
           </li> <!-- Here is the closing </li> tag -->
           <li> third item </li>
       </ul>

Результат:

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

ПРИМЕЧАНИЕ: Глубина вложенных списков не ограничивается.
Хотя это верно для всех теги парные/контейнерные, но мы должны быть осторожны при вложении элементов друг в друга и должны делать только что-то значимое.

С помощью HTML вы также можете отображать изображения в документе. В HTML изображения определяются с помощью тега <img>.

Чтобы отобразить изображение на странице, вам нужно использовать атрибут src. Src означает "источник".
Значение атрибута src-это URL-адрес изображения, которое вы хотите отобразить на своей странице.
Синтаксис определения изображения: <img src= "images/logo.png" >

Некоторые моменты, которые вам нужно знать:
● тег <img> является самозакрывающимся тегом <img>, что означает, что он не содержит закрывающего тега.
● Тег src может содержать как относительные, так и абсолютные пути, а также ссылки на изображения в Интернете.

8.1. Атрибут ALT

Атрибут alt или альтернативный текст сообщает читателю, что он или она пропустил на странице, если браузер не может загрузить изображения.
Затем браузер отобразит альтернативный текст вместо изображения.
Теперь мы можем использовать атрибут alt в качестве: <img src="images/logo.png" alt="img image" >

ПРИМЕЧАНИЕ: Рекомендуется включать атрибут "alt" для каждого изображения на странице.

8.2. Высота и ширина

Высоту и ширину изображения можно задать непосредственно с помощью атрибутов высота="значение" и ширина = "значение".
По умолчанию предоставленное значение выражено в пикселях.
<img src= "images/logo.png" alt="Coding Ninjas image" height ="500" width ="500" >

Это исправит высоту и ширину изображения до 500 пикселей(пикселей).
В CSS есть альтернативный атрибут высоты и ширины. Мы можем вернуться к этому позже.

ПРИМЕЧАНИЕ: Указанное значение должно быть в числовой форме. Пиксель-это единица измерения, позволяющая задать размеры изображения.

.Атрибуты могут предоставлять дополнительную информацию об элементах HTML на вашей странице и управлять их поведением.
Пример: <tag_name attribute_name ="value_value" >Content Enclosed </tag_name>

Некоторые моменты, которые следует запомнить:
i. Атрибуты всегда представлены в парах имя/значение следующим образом: имя_атрибута="значение".
ii. Атрибуты всегда добавляются в начальный тег HTML-элемента.
iii. Значения атрибутов всегда должны быть заключены в кавычки. Двойные кавычки в стиле (“ ”) являются наиболее распространенными, но также допускаются одинарные кавычки в стиле ( ‘ ’ ). iv. В некоторых редких ситуациях, например, когда само значение атрибута содержит кавычки, необходимо использовать одинарные кавычки: имя="Джон " Дробовик" Нельсон" и наоборот.

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

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

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

По умолчанию ссылки будут отображаться следующим образом во всех браузерах:
● Не посещенная ссылка подчеркнута синим цветом
● Посещенная ссылка подчеркнута фиолетовым
● Активная ссылка подчеркнута красным цветом

10.1. Атрибут href

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

Например:

HTML:

<h2> A Great place to practice coding </h2>
<p>Take daily challenges at
   <a href ="http://www.yougame.biz"   >Yougame
   Biz</a>.
         <!-- кликабельный контент для ссылки указан здесь -->
         <!-- здесь может быть включен любой html-элемент, например изображение, gif и т.д. -->
< / p>

ПРИМЕЧАНИЕ: Вы должны помнить, что здесь также мы можем указать относительный URL-адрес файла в качестве значения атрибута href. Например:href="/home/myPC/Documents/test.html"

10.2. Относительная и абсолютная связь

Относительная ссылка используется для указания локальных ссылок, т. е. ссылки на файлы внутри корневой папки.
Абсолютная ссылка используется для указания внешних ссылок, т. е. URL веб-страниц.

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

● Файл находится в той же папке - в этом случае указывается имя файла.
<a href ="relativeFile.html" >Click Me </a>

● Файл присутствует во вложенной папке - в этом случае имя предоставленного файла предваряется именами папок в соответствии с иерархией.
<a href = "subfolder/down/relativeFile.html" >Click Me </a>

● Файл присутствует где - то в родительской папке-В этом случае для перемещения одной папки выше используйте "../".
<a href = "../relativeFile.html" >Click Me </a>

Файл находится в другой вложенной папке родительской папки - этот случай охватывает два вышеперечисленных случая.
<a href = "../subfolder/relativeFile.html" >Click Me </a>

Абсолютные ссылки предоставляют полный веб-адрес веб-страницы, на которую вы хотите перейти.
Например: <a href = "https://yougame.biz" >Click Me </a>

10.3. целевой атрибут
С помощью атрибута target вы можете определить, где будет открыт связанный документ.
Целевой атрибут имеет следующие значения:
● _self: загрузите URL-адрес в саму текущую вкладку. Это значение по умолчанию
● _blank: загрузите URL-адрес в новую вкладку или окно браузера.
● _parent: загрузите URL-адрес в контекст просмотра верхнего уровня. Если родителя нет, это ведет себя так же, как _self.
● _top: загрузите URL-адрес в контекст просмотра верхнего уровня. Если родителя нет, это ведет себя так же, как _self.

Строка ниже откроет документ в новом окне браузера:

HTML:

<a href ="http://yougame.biz"
target ="_blank" >Yougame </a>

ПРИМЕЧАНИЕ. По умолчанию связанная страница будет отображаться в текущем окне браузера.

kitsunoff · 31 Авг 2021

Теперь нужен гайд по css стилям

scrux · 31 Авг 2021

kitsunoff написал(а):
Теперь нужен гайд по css стилям

Надо было сказать "Теперь нужен гайд по созданию целого сайта" xD ( шутка )

KROL_LOL · 31 Авг 2021

конечно прикольно это все, нооо уже давным давно есть сайт с этими гайдами

ааабсолютно ни на что не намекаю

Prince Crown · 31 Авг 2021

Saqura написал(а):
конечно прикольно это все, нооо уже давным давно есть сайт с этими гайдами

ааабсолютно ни на что не намекаю
Посмотреть вложение 169654

Я взял гайд с платной презентации, такого гайда у меня ещё 15 ТБ

scrux написал(а):
Надо было сказать "Теперь нужен гайд по созданию целого сайта" xD ( шутка )

Это все лишь первый гайд по HTML, все будет дальше ?

madpeanut · 31 Авг 2021

На лолзе была тема

beb01525 · 31 Авг 2021

трудно читать как то, более простой текст лучше был бы.

Prince Crown · 31 Авг 2021

madpeanut написал(а):
На лолзе была тема

Бездарные форумы меня не интересуют, но ваше мнение я учту. Вы уверены что там именно такая тема?

kitsunoff · 31 Авг 2021

scrux написал(а):
Надо было сказать "Теперь нужен гайд по созданию целого сайта" xD ( шутка )

Не сайта а веб приложения :roflanEbalo:

madpeanut · 31 Авг 2021

!nferno написал(а):
Бездарные форумы меня не интересуют, но ваше мнение я учту. Вы уверены что там именно такая тема?

Основной контекст как-раз да