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

Основы HTML #1


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

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

Хорошо, поскольку содержание 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 месяцев спустя...
  • Администратор

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

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

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

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

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

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

Теперь давайте кратко поговорим о ссылках в 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 месяца спустя...
  • Администратор
В 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 с Python. Так вот, это может показаться притягиванием за уши к этой теме, но упомянуть об этом все таки нужно.

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

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

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

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

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

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

Создать учетную запись

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

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

Войти

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

Войти
  • Похожий контент

    • Автор Райан
      Диакритические знаки:
      Ă
      &#258; ă
      &#259; Â
      &Acirc; â
      &acirc; Î
      &Icirc; î
      &icirc; Ş
      &#350; ş
      &#351; Ţ
      &#354; ţ
      &#355; Смешанные символы:

      &euro; £
      &pound «
      &laquo; »
      &raquo; •
      &bull; †
      &dagger; ©
      &copy; ®
      &reg; °
      &deg; µ
      &micro; ·
      &middot; –
      &ndash; №
      &#8470;  
    • Автор Райан
      Рассказываем о языке, благодаря которому интернет стал красивым.
      Основы CSS
      Аббревиатура CSS расшифровывается как Cascading Style Sheets, что в переводе означает «каскадные таблицы стилей». Это язык разметки, используемый для визуального оформления веб-сайтов. 
      Объекты, расположенные на странице, размещаются с помощью HTML. А вот CSS отвечает за то, как эти объекты выглядят. Их размер, цвет, фоновое изображение, степень прозрачности, расположение относительно других элементов, поведение при наведении курсора, визуальное изменение кнопок при нажатии и т.п. 
      Вот сайт, сделанный с помощью одного лишь HTML:

      А вот как выглядит та же страница после добавления CSS-разметки и оформления блоков с помощью каскадных таблиц стилей:

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

      Достаточно ознакомиться с простейшими правилами CSS, и можно легко собрать вполне симпатичный сайт со всем необходимым контентом. «Простота» обеспечивается за счет понятного синтаксиса. 
      Синтаксис CSS в отдельном файле в соответствующем формате (.css) выглядит так:
      селектор { свойство: значение; } Селектор – это ссылка на элемент в HTML, над которым будет вестись работа (оформление). Свойство – определенная характеристика элемента, которую нужно изменить. Например, размер или цвет.  Значение – цифровое или текстовое обозначение для выбранного свойства.  Попробуем поменять цвет текста в блоке section на красный:
      section { color: red; } Как видите, все понятно даже без знания разметки. Даже далекий от программирования человек поймет, что происходит в вышеописанном коде. Это самое лучшее в CSS. Все логично. 
      Медиазапросы и тег <style> 
      Выше был продемонстрирован базовый синтаксис, но он может быть куда более замысловатым. Например, для создания стилей под различные разрешения экранов используются запросы @media. Они выглядят так:
      @media (max-width: 768px) { section: { color: red; } } Такой код изменит цвет текста на красный в разделе section только для экранов с разрешением меньше 768 пикселей.
      А еще CSS-разметку можно использовать прямо в HTML-файлах для тестирования стилей и внесения мелких изменений.
      <html> <body> <section style= "color: red;"></section> </body> </html> Что еще может CSS
      Выше я уже сказал, что CSS используется для всего визуального оформления документов. Но чтобы стало яснее, посмотрим на примеры использования разметки в коде. Так вы поймете, что возможностей у CSS куда больше, чем кажется. 
      Например, с помощью CSS можно задать параметры для SVG-изображения:
      svg { width: 120px; height: 68px; fill: green; }
      Или создать блоки div любых размеров с SVG-изображением в качестве фона:
      .block { width: 220px; height: 192px; background-image: url("../path-to-image/image.svg"); } Или же вовсе добавить в блок информацию, которой изначально нет в HTML-документе:
      .block:after { content: "kakoy-to-text "; }
      Также можно добавлять контент или CSS-разметку на новые объекты, созданные вне HTML. Для этого в CSS есть псевдо селекторы :after и :before (они позволяют разместить новые элементы до или после выбранного объекта).
      И даже это мелочи. С помощью CSS можно рисовать, создавать объекты любых форм, анимировать их и т.п.

      Препроцессоры и другие варианты реализации CSS
      По умолчанию стили прописываются в текстовом файле, но это не единственный вариант. Базовый CSS не обладает преимуществами сложных языков программирования, переменными или вложением свойств. 
      Поэтому разработчики создали препроцессоры наподобие LESS. Это механизм на базе JavaScript, позволяющий внедрить в работу со стилями синтаксис и некоторые примитивные функции из JavaScript. Если вам кажется, что у CSS недостаточно функциональности, то следует ознакомиться с препроцессорами.

      Также CSS часто реализуется внутри фреймворков. Например, технология react-styled-components перенасыщает всю функциональность каскадных стилей напрямую в код на базе React. То есть можно в одном файле прописывать стили, структуру приложения и его логику. 
      Правда, такой стиль взаимодействия со стилями противоречит первоначальной идее CSS. 
      О концепции деления контента и его оформления
      Сама идея разделить контент и его оформление на две части появилась в связи с необходимостью создавать сайты более сложных форматов – с уникальными стилевыми решениями, красивыми шрифтами, анимацией, произвольным порядком блоков и кучей других деталей, вынуждающих верстальщиков искать новые пути взаимодействия с HTML-документами. 
      Постепенно вебмастеры и разработчики отказались от стандартного оформления страниц с помощью таблиц (это встроенный в HTML синтаксис, не требующий дополнительных инструментов для оформления), потому что это усложняло структуру страниц. HTML-файлы сильно раздувались, ими было сложно управлять, а способов оформить хотя бы текст больше не становилось. Но всех спас CSS. 
      Правда, даже CSS может заметно увеличить размеры HTML и сделать его трудночитаемым, если применять каскадные таблицы прямо в основном документе. Поэтому за правило взято оформление CSS-разметки в отдельном файле, который затем подключается к условному index.html, а тот уже подтягивает нужные стили. 

      Т.е. файлы HTML и CSS живут раздельно.
      Основные принципы построения макетов с помощью CSS
      Одна из ключевых задач CSS в современной верстке – создание макетов сайта. HTML уже не играет такой важной роли в том, как будут размещены объекты. HTML-документ отвечает за структуру и вложенность элементов, что упрощает чтение сайтов скринридерами и дальнейшую разметку с использованием каскадных стилей. 

      Для расположения элементов на «полотне» сайта используются две основные методики:
      Flex – позволяет автоматически распределить объекты в блоке за счет создания блоков-оберток со свойством flex.  Grid – позволяет отказаться от оберток и размещать объекты по сетке. Оба метода позволяют создавать сайты, элементы которых всегда занимают корректную позицию и адаптируются под меняющееся разрешение экрана. 
      Как изучить и начать использовать CSS?
      Каскадные таблицы стилей – на удивление интуитивная вещь. Даже новички успешно справляют с самостоятельным изучением разметки без обращения за помощью к профессиональным разработчикам и дизайнерам. Достаточно обращаться в Google за описанием свойств стилей и запоминать их. 
      Но есть загвоздки. В частности, они касаются методик создания макетов. С ходу понять их тяжело, поэтому нужно хорошее руководство. 
      Ну и нельзя забывать про великое множество курсов для веб-разработчиков. Они всегда покрывают углубленное знакомство с HTML, CSS и JavaScript, причем качество изучения стилей почти везде находится на одном уровне. Не нужно отдавать сумасшедшие деньги за дорогие курсы, можно выбрать какой-нибудь бюджетный вариант (если интересует именно CSS). 
      Где и как редактировать разметку?
      Если вы уже сейчас хотите опробовать свои силы, то можно создать стили с помощью любого текстового редактора. Создаем файл в формате .css, а потом вписываем туда свойства и их значения в соответствии с синтаксисом разметки.

      Лучше использовать специализированные редакторы и IDE. Они автоматически дополнят код, подскажут свойства и их значения, сообщат об обнаруженных ошибках, упростят выбор цветов и так далее. Рекомендую использовать редактор VS Code (своего рода стандарт). Он бесплатный и функциональный. Но есть и другие варианты.
      Чтобы внесенные в CSS-файл изменения возымели эффект над HTML-документом, первый нужно подключить ко второму. Для этого в head-тег HTML-файла нужно добавить ссылку в формате:
      <link rel="stylesheet" href="style.css"> На этом все. Как видите, CSS – это мощный инструмент для оформления сайтов, без которого невозможно сделать красивую страницу (даже если использовать какие-либо фреймворки типа React). 
      Глубокое изучение каскадных таблиц поможет сделать ваши сайты более стильными, при этом не перебарщивая с количеством JS-кода, что положительно скажется на производительности ресурса. 
    • Автор Райан
      Речь пойдет о Самой сложной игре в мире. Серьезно, она так и называется, The World's Hardest Game (Я сейчас поиском воспользуюсь, что бы понять, не создавал ли кто подобной темы, секунду).
      В общем, благодаря Flash Player существовала невероятно сложная игра, в принципе благодаря Flash Player существовало много чего яркого, легендарного и незабываемого, но The World's Hardest Game это самый яркий пример, от которого на данный момент осталось только это видео:
      Серьезно, если в самом популярном браузере в мире, Google Chrome, зайти на официальный сайт игры, и попытаться запустить первую или вторую часть, тебе лишь скажут, что Flash Player отныне не поддерживается.
      Интересно, а как обстоят дела у EDGE, тем более мы вчера его обсуждали с @CHIKI_BRIKI, интересно посмотреть... Увы тоже не работает.
      В The World's Hardest Game я никогда не проходил выше 11 уровня, но теперь у меня даже шанс попытаться отобрали... Спасибо!

      Этот пример не последний, далеко ходить не надо. Возьмем ту же самую World Poker Club, которая все эти годы существовала на Flash Player, и в этом году ей срочно пришлось перебираться на HTML... Я неделю назад играл в World Poker Club... Она лагает на HTML так, что ваши 40 FPS в CSS просто фантастика! Скажем так, игра на HTML настолько не оптимизирована, что у меня отпало желание возвращаться в эту игру.

      Прогресс неумолимо несется вперед и его не остановить. Прогресс идет по головам, и само собой жертв не избежать. Один лишь вопрос, почему сразу убивать? Почему не попытаться придумать супер конвертер, который хоть и не, но все же большую часть Flash поделок переведет в HTML, ведь у Crazy Panda получилось перевести WPC в HTML? А в чем тут проблема?
  • Последние посетители   0 пользователей онлайн

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

Объявления



×
×
  • Создать...