Jump to content

Основы HTML #1

Райан

By Райан
in Own website

 Share

Recommended Posts

  • Администратор
Райан Курометчик

Райан

Posted
  • Администратор
Posted

Хорошо, поскольку содержание 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

0

Ненавижу загружать новые файлы, но обожаю обновлять версии.

Link to comment
Share on other sites
  • 10 months later...
  • Администратор
Райан Курометчик

Райан

Posted
  • Author
  • Администратор
Posted

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

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

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

0

Ненавижу загружать новые файлы, но обожаю обновлять версии.

Link to comment
Share on other sites
  • Администратор
Райан Курометчик

Райан

Posted
  • Author
  • Администратор
Posted

Пример таблицы размещенной через 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" вы соответственно оставляете ваши данные.

0

Ненавижу загружать новые файлы, но обожаю обновлять версии.

Link to comment
Share on other sites
  • Администратор
Райан Курометчик

Райан

Posted
  • Author
  • Администратор
Posted

Теперь давайте кратко поговорим о ссылках в 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

0

Ненавижу загружать новые файлы, но обожаю обновлять версии.

Link to comment
Share on other sites
  • 4 months later...
  • Администратор
Райан Курометчик

Райан

Posted
  • Author
  • Администратор
Posted
В 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 коды соответственно все содержимое внутри них будут отображать по центру.

0

Ненавижу загружать новые файлы, но обожаю обновлять версии.

Link to comment
Share on other sites
  • Ветеран
Valsorya Lvl 18

Valsorya

Posted
  • Ветеран
Posted

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

 

1
Link to comment
Share on other sites
  • Администратор
Райан Курометчик

Райан

Posted
  • Author
  • Администратор
Posted

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

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

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

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

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

Ненавижу загружать новые файлы, но обожаю обновлять версии.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing

Архив

×
×
  • Create New...