Перейти к содержанию

Основы HTML #1

ryancoolround

Автор ryancoolround
в HTML

 Поделиться
Перейти к решению Решено ryancoolround,

Рекомендуемые сообщения

  • Администратор
ryancoolround Kleiner Level

ryancoolround

Опубликовано
  • Администратор
Опубликовано

Хорошо, поскольку содержание HTML очень велико, я разделю эту тему на части ❤️

Понимание HTML

Код HTML состоит из ТЕГОВ (или команд), которые используются в начале и в конце текста, на который влияет код. Начальный тег - это, например, тег <b>, который используется для выделения части текста жирным шрифтом. Соответствующий закрывающий тег будет </b>, который будет использоваться в конце текста, который мы хотим отформатировать. Итак, если мы хотим выделить слово «Привет!!» Жирным шрифтом, в предложении ниже HTML-код будет выглядеть так:

Скрытый текст

<b>Привет!</b> Добро пожаловать в IP-Gamers

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

Скрытый текст

Привет! Добро пожаловать в IP-Gamers

Базовая структура HTML-кода документа

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

<html> 
<head> 
<title>Название вашей страницы</title>
<meta name="description" content="Краткое описание вашей страницы">
<meta name="keywords" content="Ключевые слова для вашей страницы">
</head> 
<body>

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

</body> 
</html>

Теги <html> и </html> сообщают браузеру, где начинается и заканчивается HTML код.

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

Тег <meta name = "description" ...> - это информация, которая может быть полезна для поисковых систем. Они могут использовать то, что вы написали в описании вашей страницы, когда она появляется в результатах поиска. Или, иногда, поисковые системы также используют случайную часть того, что находится в <body> вашей страницы.

Тег <meta name = "keywords" ...> также может использоваться поисковыми системами для индексации страницы. Поместите ключевые слова через запятую внутри этого тега. 
Между тегами <body> и </body> помещается содержимое страницы, которое просматривается в браузере.


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

Основные теги для шрифта и текста

Курсив: <i>текст</i>

Подчеркивание: <u>текст</u>

Полужирный шрифт: <b>текст</b>.

Зачеркнутый текст: <s>текст</s>
 

Новый абзац: <p>текст</p> 
Этот тег начинает новый абзац, вводя пустую строку между новым и предыдущим абзацами. 


Разрыв строки: <br>
Этот тег приводит к переходу следующего текста после тега, на следующую строку.


Центр: <center>текст</center>


Выровнять текст по левому краю: <p align="left">текст</p>


Выровнять текст по правому краю: <p align="right">текст</p>


Изменить цвет текста: <font color="red">текст</font>
Вы также можете использовать HEX-коды для определения самых разных цветов. Например, чтобы определить красный цвет вместо красного, я мог бы использовать шестнадцатеричный код для красного, который будет выглядеть как #FF0000.


Измените шрифт: <font face="Arial">текст</font>


Измените размер текста: <font size="2">текст</font>
(В значение font size вставляйте цифры от 1 до 7 на ваше усмотрение )

Вы можете форматировать текст, используя несколько тегов одновременно. Так, например, я могу форматировать текст жирным шрифтом, курсивом и подчеркиванием, размещая все теги одновременно, накапливая эффекты:

Скрытый текст

<b><u><i>RyaN</i></u></b>

Результат:

RyaN

Автор: @Ryancoolround

«Успех – это приятно, но он не должен быть единственной причиной, по которой вы – музыкант». - Честер Беннингтон

Ссылка на комментарий
Поделиться на другие сайты
  • 10 месяцев спустя...
  • Администратор
ryancoolround Kleiner Level

ryancoolround

Опубликовано
  • Автор
  • Администратор
Опубликовано

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

© «IP-Gamers.NET», 2009<script>new Date().getFullYear()>2010&&document.write("-"+new Date().getFullYear());</script>.

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

«Успех – это приятно, но он не должен быть единственной причиной, по которой вы – музыкант». - Честер Беннингтон

Ссылка на комментарий
Поделиться на другие сайты
  • Администратор
ryancoolround Kleiner Level

ryancoolround

Опубликовано
  • Автор
  • Администратор
Опубликовано

Пример таблицы размещенной через HTML.

Текст 1 Текст 2 Пользователь
Был админом Были варны @CHIKI_BRIKI
     
     
     
     
     
     
     
     

 

Для подобной таблицы понадобится следующий html код: 

<table width="500" height="300" border="1">

  <tr>

    <th scope="col">&nbsp;</th>

    <th scope="col">&nbsp;</th>

    <th scope="col">&nbsp;</th>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

</table>

Вместо тега "nbsp" вы соответственно оставляете ваши данные.

«Успех – это приятно, но он не должен быть единственной причиной, по которой вы – музыкант». - Честер Беннингтон

Ссылка на комментарий
Поделиться на другие сайты
  • Администратор
ryancoolround Kleiner Level

ryancoolround

Опубликовано
  • Автор
  • Администратор
Опубликовано

Теперь давайте кратко поговорим о ссылках в html коде. Начинается такая ссылка всегда с <a а заканчивается соответственно на >.

URL ссылка может иметь следующие атрибуты:

  1. href - адрес файла назначения
  2. target - в каком окне откроется целевой файл
  3. title - краткое описание ссылки, отображаемой при наведении на нее указателя мыши.

Ссылка может вести:

  1. page.html, если он находится в той же папке, что и текущая страница
  2. https://ip-gamers.net/ полный адрес веб-страницы.

Целевые атрибуты:

  1. _blank страница будет загружена в новом окне
  2. _parent страница будет загружена в родительском окне.
  3. _top будет загружена в верхнее окно фрейма.
  4. _self будет загружена в том же окне

Пример ссылки: 

<a href="https://ip-gamers.net/" target="_blank" title="Форум для начинающих админов">IP-Gamers</a>

В итоге получаем следующее:

IP-Gamers

«Успех – это приятно, но он не должен быть единственной причиной, по которой вы – музыкант». - Честер Беннингтон

Ссылка на комментарий
Поделиться на другие сайты
  • 4 месяца спустя...
  • Администратор
  • Решение
ryancoolround Kleiner Level

ryancoolround

Опубликовано
  • Автор
  • Администратор
  • Решение
Опубликовано
В 09.01.2021 в 03:18, Райан сказал:

Выровнять текст по левому краю: <p align="left">текст</p>


Выровнять текст по правому краю: <p align="right">текст</p>

Так же в центрировании картинки или текста помогают следующие HTML коды: 

<div align="center">Текст</div>
<p align="center">Текст</p>
<div align="center">Картинка</div>
<p align="center">Картинка</p>

Вышесказанные HTML коды соответственно все содержимое внутри них будут отображать по центру.

«Успех – это приятно, но он не должен быть единственной причиной, по которой вы – музыкант». - Честер Беннингтон

Ссылка на комментарий
Поделиться на другие сайты
Гость

Гость

Опубликовано
Опубликовано

из html знаю только как форматировать текст и делать таблицы... В общем, у меня только базовые знания. @Райан, ты ведь будешь дополнять этот раздел дальше?

 

Ссылка на комментарий
Поделиться на другие сайты
  • Администратор
ryancoolround Kleiner Level

ryancoolround

Опубликовано
  • Автор
  • Администратор
Опубликовано

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

Это совершенно два разных языка, и сравнивать их просто недопустимо.

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

Если еще более проще:

  • Html - сайты
  • Python - Программы с искусственным интеллектом (Я уже вижу, как кто то бросается его изучать, что бы создать Скайнет).

«Успех – это приятно, но он не должен быть единственной причиной, по которой вы – музыкант». - Честер Беннингтон

Ссылка на комментарий
Поделиться на другие сайты
  • 2 года спустя...
  • Администратор
ryancoolround Kleiner Level

ryancoolround

Опубликовано
  • Автор
  • Администратор
Опубликовано
В 27.03.2022 в 22:01, Valsorya сказал:

@Райан, ты ведь будешь дополнять этот раздел дальше?

Для начала скажи что тебе интересно, конкретнее.

«Успех – это приятно, но он не должен быть единственной причиной, по которой вы – музыкант». - Честер Беннингтон

Ссылка на комментарий
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

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

Создать аккаунт

Зарегистрируйте новый аккаунт в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...