Основы хтмл: Основы HTML и CSS — Тренажёр «Знакомство с веб-разработкой» — HTML Academy — Программирование на Python и Objective-C в Mac OS

Содержание

5. Основы HTML — Информационные технологии

Краткие теоретические сведения

Лекция

HTML (Hypertext Markup Language) – язык гипертекстовой разметки. Изначально был разработан для отображения веб-страниц, которые могли бы ссылаться друг на друга, но в дальнейшем нашел более широкое применение.

Теги HTML задаются следующим образом:

<tag property> text </tag>

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

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

Например, следующий текст будет отформатирован курсивом:

будет отформатирован <i>курсивом</i>:

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

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

<html>
<head>
    метаданные
</head>
<body>
    текст документа
</body>
</html>

Задание к работе

Откройте markdown файл из второй лабораторной работы. С помощью команды «Markdown: Print current document to HTML» расширения «Markdown All in One» преобразуйте его в формат HTML. Откройте полученный в результате выполнения этой команды файл формата «html».
Просмотрите метаданные файла. Выпишите в отчет теги, задающие кодировку документа и подключающие стилевые файлы (stylesheet).
Сравните markdown и тело (текст внутри тега body) html документа. Найдите соответствие и впишите в отчет в виде таблицы изученные во второй лабораторной работе markdown теги и их html аналоги.
Откройте markdown файл из третьей лабораторной работы и проделайте с ним такие же действия.

HTML5 — Основы — ИТ Шеф

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

Структура HTML-документа

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

Контент, находящийся между открывающим и закрывающим тегом некоторого элемента (1), кроме текста может также содержать другой HTML-элемент (2) или другие HTML-элементы (3). В этом случае этот элемент (2) или эти элементы (3) будут вложены в элемент(1). Т.е. между ними образуется связь родитель (1)-ребёнок (2) или родитель (1)-дети (3).

В свою очередь элемент (2) или каждый из HTML-элементов (3) могут в качестве контента тоже содержать HTML-элементы и т.д.

Таким образом получается древовидная (иерархическая) конструкция, структура которой определяется в зависимости от того в каком элементе находится тот или иной элемент.

Иерархические отношения между HTML-элементами

Родитель (parent). Каждый HTML-элемент имеет родителя. Для некоторого HTML-элемента родительским является тот элемент, в который он вложен.

Ребёнок (child). В каждый HTML-элемент (1) может быть вложен другой HTML-элемент (2) или несколько HTML-элементов (3). Каждый из этих элементов (2, 3) являются для элемента (1) ребёнком.

Предок (ancestor). HTML-элемент (1) считается предком некоторого другого HTML-элемента (2), если он является родителем его родителя или имеет ещё более дальнюю родительскую связь.

Потомок (descendant). HTML-элемент (1) считается потомком некоторого другого HTML-элемента (2), если он (1) является ребёнком его ребёнка (2) или ребёнком ещё более дальнего прародителя.

Сиблинг (брат, сестра, сосед, sibling). HTML-элемент (1) считается сиблингом по отношению к другому HTML-элементу (2), если оба элемента имеют одного и того же родителя.

Как правильно писать HTML-код

Создавать HTML-код, чтобы потом в него было просто вносить изменения, необходимо с учётом вложенности одних элементов в другие. Чтобы это выполнить необходимо HTML-код (1), который вложен в некоторый HTML-элемент (2), сдвигать относительно него (2) на 2 пробела.


<div>
  <h2>Заголовок</h2>
  <div>
    <h3>Название раздела</h3>
    <p>Текст статьи...</p>
  <div>
  <div>
    <p>Текст комментариев...</div>
  </div>
</div>

Что такое веб-браузер (web-browsers)

Веб-браузер — это программное обеспечение для просмотра веб-страниц. Основные виды браузеров: Internet Explorer (Microsoft), Firefox (Mozilla), Chrome (Google), Safari (Apple), Opera (Opera).

Что такое user agent

User agent — это любое программное обеспечение, которое используется для доступа к веб-страницам от имени пользователей.

User agent-ами являются не только браузеры, но и программы-роботы поисковых систем Яндекс и Google.

Инструменты для создания HTML

Для создания HTML-документов использовать какие-то специализированные инструменты необязательно. Писать код HTML можно используя простые текстовые редакторы, такие как Notepad в Windows, TextEdit в MacOS, gedit в Ubuntu Linux и т.д.

Однако при выборе текстового редактора, необходимо проверить то, что он позволяет сохранять содержимое файла (веб-страницы) в кодировке UTF-8.

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

Создание HTML-документа

Создание HTML-документа начинается с указания типа документа. Т.е. первое что необходимо указать при создании документа — это то, что документ является HTML 5.


<!DOCTYPE html>

После этого пишется элемент html. Данный элемент состоит из открывающего тега (<html>), контента и закрывающего тега (</html>).

Контент данного элемента — это содержимое HTML-документа (веб-страницы).

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

Например, lang="en" — означает, что текстовое содержимое элемента html будет соответствовать английскому языку. А например, указание атрибуту lang значения "ru" означает, что текст контента элемента html будет на русском языке.


<!DOCTYPE html>
<html lang="ru">

</html>

Если рассматривать HTML-документ как древовидную структуру, то в ней, элемент html является корнем.

Элемент html содержит в качестве контента всегда два элемента. Первый элемент — это head, а второй элемент — это body. Элемент body всегда располагается после элемента head.

Элемент head также как и элемент html состоит из открывающего тега (<head>), контента и закрывающего тега (</head>). Он используется как контейнер для того чтобы содержать другие элементы, которые предназначены для того чтобы предоставить данные о странице (коллекцию метаданных HTML-документа). Т.е. он содержит HTML-элементы, которые предоставляют user agent информацию о заголовке страницы (title), кодировке символов, подключенных стилях CSS и многое другое.

Содержимое элемента head не отображается в окне или вкладки веб-браузера.

Элемент head при открытии некоторой веб-страницы в браузере всегда загружается первым, т.е. до загрузки контента body (видимой части HTML-документа). Т.е. он (элемент head и его контент) в основном предназначен для сообщения браузеру (user agent) всей дополнительной (служебной) информации, которая необходима для правильного отображения содержимого элемента body.


<!DOCTYPE html>
<html lang="ru">
 <head>

 </head>
</html>

Элемент body состоит из открывающего тега (<body>), контента и закрывающего тега (</body>). Он является контейнером для контента HTML-страницы, который отображается в рабочей области окна или вкладки браузера. Т.е. он содержит всё то, что видит пользователь в окне или вкладке браузера.


<!DOCTYPE html>
<html lang="ru">
 <head>

 </head>
 <body>

 </body>
</html>

Добавим в элемент head информацию о заголовке веб-страницы. Заголовок веб-страницы создаётся с помощью элемента title. Элемент title, состоит из открывающего тега (<title>), контента (заголовка страницы) и закрывающего тега (</title>).


<!DOCTYPE html>
<html lang="ru">
 <head>
   <title>Заголовок страницы</title>
 </head>
 <body>

 </body>
</html>

Добавим в элемент head информацию о кодировке символов, используемых в документе. Кодировка символов указывается с помощью элемента meta и атрибута charset. Элемент meta, состоит только из открывающего тега (<meta>) и предназначен для сообщения различной информации о странице посредством различных атрибутов.


<!DOCTYPE html>
<html lang="ru">
 <head>
   <title>Заголовок страницы</title>
   <meta charset="utf-8">
 </head>
 <body>

 </body>
</html>

Основной каркас HTML 5 страницы готов. Теперь добавим текстовое содержимое в элемент body, которое увидет пользователь при открытии данной страницы в браузере.


<!DOCTYPE html>
<html lang="ru">
  <head>
    <title>Заголовок страницы</title>
    <meta charset="utf-8">
  </head>
  <body>
    Я люблю HTML5.
  </body>
</html>

Основы CSS: блочная модель

Один из лучших способов внести изменения во внешний вид своего сайта — похимичить с CSS, с помощью которого можно поменять всё: от цветов сайта до шрифтов и фоновых изображений.

В этой статье для начинающих мы разбёремся, что такое блочная модель и как она работает. Сначала мы пройдёмся по теоретической части, а затем применим её на практике.

Блоки — они повсюду!

Первое, что нужно понять для эффективного использования CSS, — всё, что вы видите на странице, состоит из прямоугольников. Каждый сайт представляет собой ничего более, чем набор прямоугольных блоков, расположенных рядом, сверху, снизу и внутри друг друга.

Заголовок? Прямоугольник. Боковая панель? Прямоугольник. Изображение? Тоже прямоугольник. Само собой, обычно мы называем их не прямоугольниками, а HTML-элементами, которые бывают разных типов.

Строчные и блочные элементы

Есть два типа HTML-элементов: строчные и блочные. Между ними есть разительные отличия, которые также влияют на использование блочной модели CSS.

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

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

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

Если вы пользуетесь WordPress, то вы, скорее всего, очень хорошо знакомы со строчными элементами, даже если вы об этом не знаете. Когда вы при написании текста выделяете его жирным или курсивом, WordPress добавляет <strong>...</strong> и <em>...</em> вокруг него, чтобы добиться нужного эффекта.

Просто откройте вкладку Текст в режиме редактора для просмотра кода содержимого и вы всё увидите:

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

Так или иначе, из-за такого поведения большая часть блочной модели CSS применима только к блочным элементам. Скоро вы поймёте, почему.

Так что это за блочная модель?

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

Вот из чего состоят слои:

Ширина — ширина площади содержимого элемента. Для блочных элементов значение по умолчанию равно 100%. У строчных элементов ширина зависит от содержимого.
Высота — определяет высоту элемента. Как правило, она зависит от внутреннего содержимого, но при желании можно указать конкретную высоту. Опять же, это работает только с блочными элементами.
Границы — границы есть у каждого элемента, даже если вы их не видите. У них может быть разный размер, цвет и оформление.
Отступы — они определяют расстояние между границей элемента и его содержимым. Их можно использовать, например, для того, чтобы текст внутри элемента оставался читаемым.
Поля — они определяют расстояние между границей элемента и тем, что его окружает.

Вот вам, собственно, и блочная модель CSS. Она становится ещё понятнее, если взглянуть на эту диаграмму:

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

Примеры использования блочной модели

Создадим простую страницу с блочным элементом:

<!DOCTYPE html>
 
<html>
 
  <head>
    <title>Example Site for CSS Box Model</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
 
  <body>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  </body>
 
</html>

Это просто HTML-документ с текстом внутри контейнера div. В браузере он выглядит так:

Для блока мы определили цвета фона, чтобы вы могли видеть, как он растягивается по экрану. Это позволит лучше понять то, что будет происходить дальше. Вот соответствующий CSS:

.example-element {
	background-color: deepskyblue;
}

Давайте внесём несколько изменений.

Изменяем ширину

Первое, что мы сделаем, — определим ширину. Как было упомянуто ранее, сейчас её значение равно 100%. Чтобы изменить его, нам нужно взаимодействовать со свойством width.

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

Добавляем новое свойство в стили:

.example-element {
	background-color: deepskyblue;
	width: 300px;
}

После перезагрузки страницы вы должны увидеть следующее:

Вы сразу заметите, как теперь ограничено растягивание div вправо. Также, как видите, его высота автоматически изменяется, чтобы уместить внутренний текст. Давайте ещё увеличим её.

Увеличиваем высоту элемента через CSS

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

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

.example-element {
	background-color: deepskyblue;
	height: 300px;
	width: 300px;
}

В итоге страница выглядит так:

Как видите, элемент принял нужную нам форму, так как мы установили одинаковые значения для высоты и ширины.

Знакомимся с границами

Теперь изменим границы. Как упоминалось, границы уже есть, просто мы их не видим. Изменим это с помощью свойства border.

Важно знать, что это свойство принимает три значения: width, style и color. Width отвечает за толщину границы (обычно в пикселях), style может принимать значения solid, dahsed, dotted и т.д., а в color можно прописать цвет как словом вроде «red», так и hex-значением цвета.

В принципе, достаточно просто определить толщину границ. Тем не менее, в большинстве случаев результат будет лучше при определении всех трёх значений. Меняем CSS:

.example-element {
	background-color: deepskyblue;
	border: 15px solid blue;
	height: 300px;
	width: 300px;
}

И получаем результат:

Выглядит здорово, не так ли 🙂

Также обратите внимание, что для разных сторон можно установить разные типы границ с помощью свойств border-top, border-right, border-bottom и border-left.

Добавляем отступы

Одна из проблем, которая выделяется при взгляде на наш пример, заключается в том, что текст начинается прямо с границы элемента. Из-за этого его сложно читать, да и выглядит не очень приятно. К счастью, свойство padding позволяет это исправить:

.example-element {
	background-color: deepskyblue;
	border: 15px solid blue;
	height: 300px;
	padding: 16px;
	width: 300px;
}

Вот как это отразится на результате:

Так же, как и с границами, можно настроить отступы отдельно для каждой стороны элемента. Для этого используются свойства padding-top, padding-right, padding-bottom и padding-left.

Можно не прописывать отдельно все эти свойства, а описать все отступы одной строкой вроде padding: 10px 5px 15px 10px;. Здесь значения соответствуют отступам сверху, справа, снизу и слева соответственно.

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

Добавляем поля

Вот мы и добрались до полей, которые определяют расстояние между элементами.

Добавим margin в стили:

.example-element {
	background-color: deepskyblue;
	border: 15px solid blue;
	height: 300px;
	margin: 25px;
	padding: 16px;
	width: 300px;
}

Выглядит это так:

Как видите, в результате элементы отодвинулись от краёв страницы. Однако поля для элемента определены со всех сторон, а не только сбоку и сверху. Скопируем div, чтобы это можно было увидеть:

Сейчас у нас одинаковые поля со всех сторон. Однако для разных сторон можно установить свои значения. Это работает так же, как и с отступами: margin-top, margin-left и т. д или однострочное сокращение.

Поля частично применимы к строчным элементам, но только к боковым сторонам.

Немного о размерах элементов

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

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

Есть способы обхода такого поведения вроде установки свойства элемента box-sizing равным border-box. В этом случае ширина будет включать в себя границы и всё содержимое подстроит свои размеры, чтобы уместиться в этих рамках.

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

Подводим итог

Вот вы и изучили основы блочной модели CSS. Эти знания помогут вам лучше понять, как работают сайты. С блочной моделью проще изменить внешний вид страницы и её структуру как душе угодно.

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

Смотрите также: 5 способов выровнять HTML-элемент горизонтально и вертикально

Хинт для программистов: если зарегистрируетесь на соревнования Huawei Cup, то бесплатно получите доступ к онлайн-школе для участников. Можно прокачаться по разным навыкам и выиграть призы в самом соревновании.
Перейти к регистрации

Перевод статьи «CSS FOR BEGINNERS: THE CSS BOX MODEL AND HOW TO USE IT CORRECTLY»

Что такое HTML+CSS

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

К примеру, зададим особый стиль для тега <b>. Этот тег выделяет текст жирным. А мы сделаем такой текст ещё и красным. Для этого используем следующий CSS код:

b {
   color: red;
}

Строчка «color: red;» называется свойством и его значением. Нетрудно догадаться из названия, что это свойство отвечает за цвет. А значение, которое пишется через двоеточие, делает его красным. В итоге, на странице браузера текст, выделенный тегом , будет автоматически становиться красным:

Часть текста выделена жирным шрифтом

Есть возможностьзадавать сразу несколько свойств для одного селектора. Тогда надо разделять из через точку с запятой «;«. Об этом читайте далее в статье.

В CSS коде выше, в примере, b называется «селектором». Этот селектор соответствует тегу <b>. По аналогии вы можете использовать другие теги в качестве селекторов: «table«, «tr«, «i» и т.д.

Где хранится CSS код?

Стили для элементов страницы задаются несколькими способами. Самый простой — это внутри тега в любом месте страницы. В таком случае HTML код выглядит так:

<!DOCTYPE html>
<html>
<head>
<title>Про мышей</title>
</head>
<body>
Тише, <b>мыши</b>, кот на крыше,<br>
а котята ещё выше.<br>
<i>Кот</i> пошёл за молоком,<br>
а котята кувырком.<br>
<i>Кот</i> пришёл без молока,<br>
а котята ха-ха-ха.
<style>
b { 
color: green;
font-size: 120%;
}
i { 
color: red;
font-size: 80%;
}
</style>
</body>
</html>

Свойство «font-size: 120%;» задаёт размер шрифта относительно общего размера шрифта. При значении больше 100% оно увеличивает шрифт. Получится такой результат:

Тише, мыши, кот на крыше,

а котята ещё выше.
Кот пошёл за молоком,

а котята кувырком.
Кот пришёл без молока,

а котята ха-ха-ха.

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

Тег <style>, внутри которого пишется CSS код, может быть где угодно на странице. Часто этот тег ставят в раздел <head>.

CSS правила могут переопределять друг-друга. Если несколько раз написать один и тот же селектор с одним и тем же свойством, то применится только последний:

b {
   color: red;
}
b {
   color: green;
}

— в таком случае текст внутри тега <b> будет зелёным, а не красным, потому что значение свойства будет переопределено последним совпадением.

Можно задать сколько угодно свойств. В том числе те свойства, которые будут переопределить родные свойства тегов. К примеру, тегу <b> можно задать свойство, при котором он перестанет выделять текст жирным.

При таком способе записи CSS и HTML перемешиваются, что сильно усложняет работу программисту. Логичным выходом является сбор всех стилей в одно место. А точнее — в один отдельный файл, который загружается при загрузке страницы. Такой файл можно подключить к HTML с помощью тега <link> внутри блока <head>:

<!DOCTYPE html>
<html>
<head>
<title>Про мышей</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Тише, <b>мыши</b>, кот на крыше,<br>
а котята ещё выше.<br>
<i>Кот</i> пошёл за молоком,<br>
а котята кувырком.<br>
<i>Кот</i> пришёл без молока,<br>
а котята ха-ха-ха.
</body>
</html>

На пятой строчке примера видно, что в блоке <head> появился подключаемый файл со стилями:

<link rel="stylesheet" href="style.css">

По аналогии со ссылками в href=»…» можно писать как относитльный путь к файлу стилей, так и абсолютный.

Подключаемый файл стилей «style.css» будет содержать всё, что было внутри тега <style>…</style> из предыдущего примера. То есть:

b { 
color: green;
font-size: 120%;
}
i { 
color: red;
font-size: 80%;
}

CSS файл «style.css» — это точно такой же текстовый файл, что и HTML. Для изменения этого файла вам понадобится любой текстовый редактор. Нет необходимости применять специальные программы.

Последний способ указать CSS свойство — это непосредственно внутри тега, в атрибуте style=»…». В таком случае свойством будет обладать только один тег, а не все теги на странице. Применять это можно так:

Часть текста <b>выделена</b> жирным шрифтом

Можно указать сразу несколько свойств через «;«. Результат на странице будет таким:

Часть текста выделена жирным шрифтом

Помните о том, что свойства перезаписываются. Самым важным является CSS, указанный непосредственно внутри атрибута тега style=»…». Эти свойства будут применены в любом случае. А CSS в подключенном файле в секции <head>…</head> будет перезаписываться свойствами, которые находятся на странице ниже, внутри <style>…</style>.

Основы HTML (XHTML) — Site on!

Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!

28.03.2013

Предисловие. У меня от вас секретов нет, так что сразу вас предупрежу: язык HTML настолько прост и лёгок, что вам НЕ нужны никакие курсы и блоги для того, чтобы начать с ним работать. Всё что вам нужно это просмотреть код данной страницы (Ctrl + U), а лучше воспользоваться просмотром элементов страницы с помощью веб-инспектора, как пример, затем открыть любой справочник HTML и просто ознакомиться со всеми тегами, почитать их описание, да хотя бы просто посмотреть на их список, и конечно эксперементировать самим! Вот и всё, а дальше, когда вам понадобиться что-либо сделать, просто заходим в справочник, ищем нужный нам тег, читаем (на всякий случай) как и с чем его применяют и всё – вы готовы к работе. Из личного опыта я вам порекомендую 2 справочника для HTML и CSS: http://htmlbook.ru — русскоязычный сайт, где всё довольно удобно написано, и XHTML + HTML + CSS — официальные страницы языков разметки и каскадных таблиц стилей CSS. И конечно, советую прочитать мою статью о том, как создать веб-страницу. А для тех, кто всё-таки не против провести время за лёгким чтивом, я и написал эту статью.

Основы HTML (XHTML) доступным языком

Здравствуйте, дорогие читатели, Site on! Сегодня мы поговорим об основах основ языка гипертекстовой разметки – HTML. HTML расшифровывается как HyperText Markup Language, и это действительно язык именно разметки, а не программирования. Так что если вдруг кто-то узнает, что вы называете себя программистом HTML или CSS, то непременно получите порцию острот в ваш адрес 🙂 Поэтому наши коллеги и придумали такое модное словечко как «верстальщик». Но прежде чем начать верстать макеты сайтов, давайте быстренько, но при этом, не пренебрегая подробностями, изучим основы.

А основы у нас таковы: вся разметка осуществляется по средствам тегов. Понятия тега можно условно сравнить с деталью конструктора при создании определённой фигуры. Деталь одной формы может нам понадобиться при построении одного участка, другой формы – при построении другого и все они соединяются и взаимодействуют между собой.

Понятие и обозначение тега в HTML (XHTML)

Так вот наши детали – теги, обозначают угловыми скобками БЕЗ пробелов с обеих сторон слова, например,

<body>

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

</body>

Важно! Приучайте себя с первых же секунд: если вы открыли тег, то сразу же его и закройте, и только после этого начинайте писать что-то внутри него. Потому как написали мы, например, тег выделения полужирным <strong> и понеслись там что-то писать, писать… а потом смотрим, а весь текст на странице стал полужирным, и думаем, вот это да, а я столько этих «стронгов» открыл, а какой же из них я забыл закрыть? И начинаем перечитывать весь текст заново. Это, конечно же, безобидный пример, но если вы на каждую мелочь будете тратить своё время, то это быстро вам надоест, не говоря уже о выражении: время – деньги. А когда будем изучать с вами PHP, так это вообще – золотое правило.

Так что зарубите себе на носу, открыли тег и сразу же его и закрыли:

<strong></strong>

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

Атрибуты тегов в XHTML и HTML

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

Пример: возьмём тег, обозначающий параграф

<p>текст</p>

, если мы его таким и оставим, то он выведет нам текст, выравненный по левому краю – такой стандарт (так как пишем мы слева направо). Теперь напишем так:

<p align="center">текст</p>

, где align – это атрибут (обозначает горизонтальное выравнивание), а center – его значение. Это всё равно, что написать в характеристики детали – материал: алюминий. Так вот теперь содержимое нашего параграфа будет ровно посередине… «Посередине чего?» – спросите вы: «Экрана? Окна браузера? Тела документа?».

Так вот это я и подразумевал, когда сравнивал наш язык HTML с конструктором – всё зависит от того, как складывается (как вложен) наш тег параграфа с другими тегами. Если он внутри какого-то блока (тег <div>), пусть даже этот блок прижат к левой границе браузера, то содержимое параграфа (это может быть не только текст) будет выравнено посередине этого блока, так как по умолчанию, ширина параграфа равна 100% от ширины элемента, в который этот параграф вложен. А если же тег нашего параграфа находится перед или после других тегов (никуда не вложен), то содержимое параграфа будет подстраиваться под середину окна браузера.

Для закрепления, напишу парочку часто используемых тегов с их атрибутами:

<div align="right">любой текст</div>

— тег div, обозначает блок, его атрибут align имеет значение right. Это значит, что содержимое внутри этого блока будет выравниваться по правой границе этого блока.

<a title="На главную" href="http://site-on.net">на главную!</a>

— тег гиперссылки (обычно называют просто «ссылка»), в нашем примере имеет 2 атрибута: title и href. В атрибут title записывается всплывающая подсказка, которая появляется при наведении курсора на ссылку. В атрибут href записывают адрес, на который пользователь перейдёт по нажатию на данную ссылку.

Теперь ещё пару слов о тегах и их закрытии. Теги могут требовать обязательного закрытия, не требовать закрытия (очень редко!) и быть самозакрывающимися. Примеры:

<!DOCTYPE>

— никогда не закрывается

<br /> , <img />

— самозакрывающиеся (selfclose). Синтаксис таков: название тега и атрибутов (если есть), пробел, слеш.

<ul></ul>

— обязателен к закрытию

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

Всем спасибо, как всегда жду ваших комментариев ниже, удачи!

Заметки:

1) Не зацикливайтесь на изучении атрибутов, мы всё равно не будем ими пользоваться (большей половиной).

2) Использование атрибутов отвечающих за стиль типа align и т.д. давным-давно УСТАРЕЛО, вместо них используется CSS, но об этом немного позже.

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

Пожалуйста, оцените эту статью

Средняя оценка: 4.82 из 5 (проголосовало: 119)

Статья оказалась вам полезной? Подпишитесь, чтобы не пропустить новые!

Вы можете помочь развитию проекта, сделав всего 1 клик:

Спасибо!

Основы HTML | KV.by

HTML (произносится как «Эйч Ти Эм Эль») представляет собой язык разметки документов, предназначенных для просмотра в браузере. Посредством этого языка мы указываем (размечаем), как будет выглядеть страница, где станет располагаться текстовое поле, изображение или иной элемент.

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

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

Написание кода HTML носит название «верстки». Для написания можно открыть любой текстовый редактор (например, простейший Блокнот, Word или более продвинутый – Sublime Text). Рассмотрим, из каких тегов формируется данный код.

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

Первый тег – <html>, является парным. Он ставится в самом начале и дает понять компьютеру, что это html-страница. Самый последний тег на странице – </html>.

Далее идут парные теги <head> </head> и <body> </body>. Знающие английский смогут провести аналогию страницы с человеком: head – голова, body – тело.

Между открывающим и закрывающим тегами <head> ставятся <title> </title>. Если вы напишете между тегами тайтл текст, он станет показываться в названии страницы браузера. Также между <head> </head> прописывается тег <META>, указывающий особенности страницы (ключевые слова, язык и т. д.).

Теги <body> </body> заключают в себе само содержание (контент) страницы – текст, изображения, музыка, видео, ссылки и прочее.

Теперь создадим интернет-страницу. Откройте текстовый редактор и скопируйте в него нижеприведенный код:

<html>

<head>

<title> Основы HTML </title>

</head>

<body>

Текст (можете написать все, что угодно).

</body>

</html>

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

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

Заголовки указываются тегами от <h2> Заголовок первого уровня </h2> до <h5> заголовок пятого уровня </h5>.
Абзацы оформляются тегами <p> </p> (закрывающий можно не использовать).
Для разрыва строк применяется <br> (одиночный тег).
Для выделения текстом полужирным имеются парные теги <strong> или <b>, курсивом — <em> или <i>. Можно сделать текст одновременно полужирным и курсивом, однако соблюдайте принцип вложенности: <b> <i> </i> </b>.
Для составления маркированного списка используются парные теги <ul>, нумерованного — <ol>. Каждый пункт списка должен заключаться в парные теги <li>.
Для вставки изображения используется одиночный тег <img>. В него прописываются два атрибута: src представляет собой путь до изображения, alt – его название. Выглядит это так: <img src=»(путь и название картинки).jpg» alt=»Название, отображаемое при наведении на картинку мышкой»>.

Итак, мы рассмотрели основные теги HTML. А чтобы делать страницы профессиональными и красочными, необходимо изучить основы CSS.

Что такое HTML? Понятие тега. Основы HTML

Что такое HTML и для чего он предназначен
— 3.7
out of
5

based on
3
votes

Прежде чем приступить к изучению , предлагаю рассмотреть, что такое html и для чего он предназначен.

HTML расшифровывается как, Hyper Text Markup Language, что можно перевести как язык гипертекстовой разметки. При помощи данного языка создаются интернет страницы.

HTML не является языком программирования. Он предназначен для разметки текстовых документов. Т. е. по большому счету с помощью его мы осуществляем форматирование текста.

И так каким же образом при помощи языка HTML мы можем редактировать текст? Дело в том, что язык ХТМЛ состоит из тэгов (tags). Каждый тэг определяет, каким образом будет выглядеть текст на вашей страничке.

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

Поэтому сам код вы не видите, браузер на экран вашего монитора выводит уже готовый отформатированный текст и графику. Если же вы хотите увидеть сам html код и теги, с помощью которых происходит форматирование текста, который Вы сейчас читаете, то пройдите в вашем браузере Internet Explorer в пункт меню > вид и из раскрывающегося списка выберите пункт > источник. Смотрите на рисунок.

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

Но на самом деле ХТМЛ теги могут не только форматировать текст, с помощью них вы можете вставлять изображение на страницу, создавать таблицы, создавать ссылки и многое другое.

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

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

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

Например тег — открывающий, а — закрывающий. Как вы видите, они отличаются наличием в закрывающем символа слеш /. Если между ними поместить любое слово, к примеру, привет то, оно будет отображаться жирным шрифтом. Все что заключено в угловые скобки, в данном случает не выводится на экран, а является своеобразной командой для браузера, что слово, которое заключено между этими тегами нужно выводить жирным шрифтом.

Тэгов естественно много и каждый из них выполняет свои определенные функции. Примерно по такому принципу работают и все остальные теги и весь ХТМЛ в целом. Когда вы запрашиваете какой – либо документ из интернета ваш браузер загружает html код интерпретирует его должным образом и выводит вам на экран уже готовый отформатированный текст, графику, таблицы и т. д.

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

Для создания ХТМЛ страниц можно использовать специальные программы, такие как , а можно создавать страницы при помощи простого текстового редактора, который имеется в любой версии Windows.

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

От того как вы его усвоите вам будет легче двигаться вперед и тогда вы сможете без труда (хотя нет, потрудиться все таки придется) взяться за покорение более сложных языков создания сайтов, например того же PHP. Итак давайте приступим к делу.

Что такое Html

HTML (hypertext markup language) – в обычной жизни язык гипертекстовой разметки. Язык стандартной разметки интернет документов во Всемирной паутине. Это один из самых популярных языков создания сайтов. Он же считается самым легким в плане загрузки в браузерах.

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

По всем этим моментам — великая Википедиа вам в помощь. Мы же хотим научиться быстро создавать сайты, ведь так? Отлично! Тогда давайте двигаться дальше и постигать все тонкости этой веб науки.

Основы языка HTML. Понятие тега

Без знания твердой базы никуда не денешься, «мат.часть» («фундамент» любого предмета) еще никто не отменял. И мы не будет отступать от традиций и правил.

Основы языка HTML составляют теги, а если быть более точным то набор тегов. Они обозначаются вот таким образом . Теги всегда парные и изображаются вот так

тег>.

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

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

И еще уясните для себя один важный момент. В данном языке действует принцип Парето, т.е как и в любой сфере жизни, деятельности, да где бы то ни было, существует правило 80/20.

О чем это говорит? Это говорит нам, что 20% (в нашем случае это html) языка делают 80% основной работы. Логика в том, что все теги учить не обязательно, поскольку многие из них просто не используются или применяются очень редко. Так что в наших уроках мы делаем упор на самых частых и важных. И с этим вы справились прекрасно!

Структура HTML документа

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

Документ без названия

«-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd»
>

Документбезназвания

Теперь давайте подробнее распишем каждый пункт:

Что такое Doctype и его значения

Элемент doctype используется для указания типа нашей веб страницы. Это так называемое «объявление типа документа» или Document Type Declaration.

Этот тег должен всегда находиться на первом месте на каждой странице. Он — ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и не пройдут проверку валидатором.

Валидатор веб документов – это компьютерная программа, которая проверяет соответствие какого-либо документа, потока данных, или фрагмента кода определённому формату, проверяет синтаксическую корректность документа или файла (по данным Википедии).

Выделяют несколько значений Doctype:

Strict (строгий)
Transitional (переходный)
Frameset (с фреймами)

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

Объясню в чем их разница. У transitional версии нет строгого соответствия стандартам W3C валидации (или по-русски, проверки), т.е браузер одинаково будет отображать содержимое веб документа, даже если в нем присутствуют устаревшие, не рекомендуемые и другие нестандартные вариации кода. А вот Strict версия точно придерживается всем стандартам, т.е на практике если вы где-то в коде забыли поставить соответствующий символ (например слэш /), то при проверке вам будет дано предупреждение.

Вот как выглядит веб документ, использующий strict версию:

Строгое соответствие стандартам языка

«-//W3C//DTD XHTML 1.0 Strict//EN»

«http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»
>

«http://www.w3.org/1999/xhtml»
>

Строгоесоответствиестандартамязыка

.
.
.

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

— или «головной» тег, в нем располагаются самые важные теги, которые объясняют браузеру, что нужно проводить на странице и какие механизмы запускать. Он определяет веб документ и его содержимое. В него часто выносят различные скрипты, которые запускают различные фишки на странице и там же находится важный «контейнер» для SEO раскрутки – тег

На каждом сайте разный внешний вид и функционал, но с чем это связано и на каком языке прописывается страничка? Для всего этого используются каскадные таблицы стилей и язык HTML. Вы можете сами взглянуть на код данного языка, если проинспектируете объекты в браузере. Конкретно о том, что такое язык HTML мы поговорим в этой статье.

Наша статья ориентирована в основном на новичков, поэтому надеемся на понимание постоянных читателей блога!

Пост будет разбит на такие пункты:

Что такое HTML страница

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

Каждый документ WWW имеет форматированный и красиво оформленный текст, а также гиперссылки и изображения, которые подбирает владелец сайта. Для того чтобы проводить работу с данными элементами, программисты создали язык под названием HTML (Hyper Text Markup Language), что в переводе означает – язык разметки гипертекста. Каждый браузер по-своему работает и отображает язык HTML, поэтому в разных браузерах он отображается по-разному, особенно в старых версиях Internet Explorer.

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

Разумеется, у стандартного HTML кода есть свои недочеты и минусы. Придется сильно постараться, чтобы расположить абзацы с текстом на странице, ведь для проведения разметки и всего остального нужно прописывать те или иные свойства для всего текста, причем для каждого отдельно взятого абзаца. Если на вашем сайте 50 страниц и на каждой по 10-20 абзацев – придется очень долго оформлять текст, причем каждый раз вставлять одни и те же теги. Это не только утомляет владельца сайта, но и негативно сказывается на весе страниц сайта. Именно по этой причине в дальнейшем создали каскадные таблицы стилей, их коротко называют CSS, что означает Cascading Style Sheets, благодаря ним можно быстро оформить текст. Можно назначить один тег и задать ему определенные характеристики, например, цвет текста, размер, шрифт и так далее, а потом применить к абзацам. При этом файл с таблицей стилей хранится отдельно, его можно загрузить на один сайт или сразу на несколько. Далее прописываются основные элементы страницы на HTML, и вставляется текст, а потом подключается CSS и весь текст приобретает нужное вам оформление. Также благодаря этому снижается вес страниц, что очень важно.

Использование CSS целесообразно, если на сайте очень много страниц, которые будут иметь одинаковое оформление. Вы можете задать определенное форматирование текста для всех абзацев, если пропишете несколько строчек в документе с CSS кодом. Во время создания сайта верстальщики создают основной макет на языке HTML, ориентируясь на макет, созданный в Photoshop. Но после этого сайт выглядит незаконченно, нужно создать привлекательный внешний вид, и достигается это каскадными таблицами стилей. Научиться этому несложно, если у вас много свободного времени, так как общий внешний вид у всех сайтов примерно одинаковый, вы можете иметь один макет с несколькими блоками и «подгонять» под него остальные сайты. Как правило, каскадные таблицы стилей значительно сложнее CSS, еще сложнее верстать сайт на блоках, а не на таблицах. К тому же на начальных этапах вы можете столкнуться с такой проблемой, как разное отображение сайта в браузерах. Именно для того, чтобы не терять время и зарабатывать на сайтах, созданы CMS – готовые макеты сайтов, которые могут быть бесплатными или платными и иметь определенную систему управления.

Что такое HTML5. Отличия и преимущества

Новый стандарт HTML5 помогает владельцам сайтов и снимает с них обязанность использования формата Adobe Flash, а также других программ. Благодаря данному стандарту можно изменить отображение текста на страничках и упростить введение информации во время заполнения электронных формуляров. Если поделить все новшества данного языка, то можно выделить следующие пункты:

После захода на сайт люди смогут смотреть видео и прослушивать аудио через браузер, для этого создается отдельная кнопка для воспроизведения.
Выкладывать новые фотографии через данный язык гораздо проще, можно даже создавать галереи изображений. Вам даже не придется скачивать дополнительное программное обеспечение.
Можно определить местонахождение текста и отметить текстовые блоки. Также можно прекрасно отформатировать текст, чтобы он был удобен для чтения.
Если раньше в HTML4 человек замечал ошибку после ввода данных лишь тогда, когда отправлял формуляр – сейчас браузер сразу сообщает об ошибке, если человек неправильно заполняет форму. Это очень удобно для пользователей, потому что не придется несколько раз заполнять одни и те же разделы с данными.
Ненужно использовать программные модули, так как с помощью HTML5 можно воплотить в жизнь любые задумки относительно сайта. Только если сайт уникальный и нужно придумать что-то особенное, устанавливают дополнительные программные модули.
Раньше люди не могли нормально просматривать сайт через планшет или смартфон, так как стандарт HTML4 не имеет совместимости с браузерами для мобильных устройств и другими операционными системами. С помощью языка HTML5 создаются страницы, которые идеально считываются со всех устройств на высокой скорости.

Если остались вопросы – пишите их в комментариях, мы с удовольствием на них ответим!

Всем-всем привет!

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

. Будем учиться редактировать код сайта с помощью данных редакторов;
. Поможем поисковому роботу понять структуру страницы;
. Узнаем насколько правильно составлен код сайта и найдем ошибки;

Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога Context-UP и получайте все уроки себе на почту, если Вы еще не подписаны.

Основы HTML

HTML (Hyper Text Markup Language) — это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта — документ, а браузер — средство просмотра подобных документов.

Задача HTML — показать браузеру где находиться тот или иной элемент документа. C помощью данного языка, элементы размечаются на странице и занимают определенное место, которые затем отображаются на мониторе посетителя сайта.

Язык разметки состоит из специальных тегов, которые помогают браузеру определить:

Структуру документа;
Место нахождения того или иного элемента;
Предназначение элемента;
Подключаемые сторонние файлы;
И много-много другого.

Это понимают и поисковые роботы, поэтому нужно уделить особенное внимание тому, насколько правильно составлен документ с точки зрения SEO и какую структуру имеет.

Структура HTML

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

!
DOCTYPE

html>

html

head

Basic HTML Elements, Tags — Free, Online Tutorial

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

HTML-документы¶

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

HTML-документ начинается с и заканчивается.

Основная часть HTML-документа расположена между и .

Пример HTML-документа: ¶

  

  
     Название документа 
  
  
     Это заголовок 1 
     Это заголовок 2 
     Вот абзац.

Попробуйте сами »

HTML-заголовки¶

Элементы заголовка используются для структурирования заголовков.Есть шесть типов заголовков HTML, начиная с

и заканчивая

.

Пример заголовков HTML: ¶

  

  
     Название документа 
  
  
     Это заголовок 1 
     Это заголовок 2 
     Это заголовок 3 
     Это заголовок 4 
     Это заголовок 5 
     Это заголовок 6

Попробуйте сами »

Результат¶

HTML-абзацы¶

Элемент

используется для разделения абзацев HTML.

Пример абзацев HTML: ¶

  

  
     Название документа 
  
  
     Пример элементов 
     Это какой-то абзац. 
     Это еще один абзац 
 с разрывом строки.

Попробуйте сами »

Результат¶

HTML-изображения¶

Атрибуты этого тега:

исходный файл (src),
альтернативный текст (alt),
ширина,
высота.

Тег используется для вставки изображений HTML.

Пример изображений HTML: ¶

  

  
     Название документа 
  
  
     Это пример изображения

Попробуйте сами »

Результат¶

HTML-ссылки¶

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

Пример HTML-ссылок: ¶

  

  
     Название документа 
  
  
     W3docs.com

Попробуйте сами »

Результат¶

Кнопки HTML¶

Кнопки HTML можно указать с помощью тега

Попробуйте сами »

списков HTML

списков HTML указываются с помощью тега

Пример списков HTML: ¶

  

  
     Название документа 
  
  
     Неупорядоченный список 
    
       Ручка 
       Карандаш 
       Линейка 
       Книга 
    
     Упорядоченный список 
    
       Ручка 
       Карандаш 
       Линейка 
       Книга

Попробуйте сами »

Горизонтальные строки HTML¶

Тег HTML

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

Пример HTML-тега

: ¶

  

  
     Название документа 
  
  
     Добро пожаловать в W3Docs 
    
    
      Научитесь разрабатывать и создавать профессиональные веб-сайты 

      Научитесь разрабатывать и создавать профессиональные веб-сайты
    
     Научитесь разрабатывать и создавать профессиональный веб-сайт 
    
     Научитесь разрабатывать и создавать профессиональные веб-сайты 
     Научитесь разрабатывать и создавать профессиональные веб-сайты 
     Научитесь разрабатывать и создавать профессиональные веб-сайты

Попробуйте сами »

Dev.Opera — Основы HTML

Введение

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

Что такое HTML

Большинство настольных приложений, которые читают и записывают файлы, используют специальный формат файла. Например, Microsoft Word понимает “.doc », а Microsoft Excel понимает« .xls ». Эти файлы содержат инструкции о том, как перестроить документ в следующий раз, когда вы его откроете, каково содержимое этого документа, а также «метаданные» о статье, такие как автор, дата последнего изменения документа и даже такие вещи, как список внесенных изменений, чтобы вы могли переходить от одной версии к другой.

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

Здесь используется технический термин «пользовательские агенты», а не «веб-браузеры». Пользовательский агент — это любое программное обеспечение, которое используется для доступа к веб-страницам от имени пользователей. Здесь необходимо сделать важное различие — все типы программного обеспечения для настольных браузеров (Internet Explorer, Opera, Firefox, Safari, Chrome и т. Д.) И альтернативные браузеры для других устройств (например, Интернет-канал Wii и браузеры мобильных телефонов, такие как Opera Mini и WebKit на iPhone) являются пользовательскими агентами, но не все пользовательские агенты являются программным обеспечением браузера.Автоматизированные программы Google и Yahoo! используют для индексации Интернета для использования в своих поисковых системах, также являются пользовательскими агентами, но ни один человек не контролирует их напрямую.

Как выглядит HTML

HTML — это просто текстовое представление содержимого и его общего значения. Например, приведенный выше код заголовка «Цель HTML» выглядит так:

   Как выглядит HTML

Часть

— это маркер (который мы называем «тегом»), означающий, что «то, что следует далее, следует рассматривать как заголовок второго уровня».

— это тег, указывающий, где находится конец заголовка второго уровня (который мы называем «закрывающим тегом»). Открывающий тег, закрывающий тег и все, что между ними, называется «элементом». Однако многие люди используют термины «элемент» и «тег» как синонимы, что не совсем правильно. id = "htmllooks" — это атрибут; Вы узнаете об этом позже.

В большинстве браузеров есть опция «Источник» или «Просмотр источника», обычно в меню «Просмотр».Если у вас есть возможность, выберите ее сейчас и потратьте некоторое время на просмотр исходного кода HTML для этой страницы.

История HTML

Из статьи История Интернета и Интернета вы узнали немного о том, как возник современный Интернет. Когда Тим Бернерс-Ли изобрел всемирную паутину, он создал первый веб-сервер и веб-браузер, а также первую версию HTML.

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

По мере того, как все больше людей начинало писать веб-страницы и альтернативы исходному программному обеспечению браузера, в HTML добавлялось больше функций. Многие из них были приняты повсеместно (например, элемент img , используемый для вставки изображения в документ, впервые реализованный в NCSA Mosaic). Некоторые из них были более проприетарными и действительно использовались только в одном или двух браузерах. Возникла растущая потребность в стандартизации — так что у авторов другого программного обеспечения для просмотра веб-страниц был документ (называемый «спецификацией»), который окончательно описывал им, как выглядит HTML, чтобы они могли судить, упускают ли они реализацию некоторых частей. HTML.

IETF (Internet Engineering Task Force — организация по стандартизации, занимающаяся совместимостью через Интернет) опубликовала проект предложения HTML в 1993 году. Срок его действия истек, но в 1994 году он не стал стандартом, но побудил IETF создать рабочую группу для посмотрите на стандартизацию HTML.

В 1995 году был написан «HTML 2.0», основанный на идеях первоначального черновика HTML. Альтернативное предложение под названием HTML + было также написано Дэйвом Раггеттом, которое использовалось в качестве основы для многих новых элементов, реализованных браузерами (таких как метод вставки изображений в документы, впервые примененный NCSA Mosaic).

Черновик HTML 3.0 последовал позже в том же году, но работа над этой версией была прекращена из-за отсутствия поддержки указаний со стороны производителей браузеров. HTML 3.2 отказался от многих новых функций 3.0 и вместо этого принял многие из творений популярных тогда браузеров Mosaic и Netscape Navigator.

В 1997 году W3C опубликовал HTML 4.0 как рекомендацию, в которой было принято больше расширений для браузера, но также была предпринята попытка рационализировать и очистить HTML. Это было сделано путем пометки различных элементов как устаревших, что означает, что элементы устарели и, хотя они все еще существуют в этой версии, они будут удалены в более поздней версии.Это было сделано для поощрения лучшего и более семантического использования HTML в документах (более подробно описано в статье о модели веб-стандартов).

HTML 4.01 был опубликован в 1999 году с некоторыми ошибками, отмеченными в 2001 году. Это последняя версия HTML, хотя HTML 5 в настоящее время разрабатывается.

В 2000 году W3C также опубликовал спецификацию XHTML 1.0, в которой HTML был реструктурирован, чтобы быть допустимым XML-документом.

Структура HTML-документа

Наименьший допустимый HTML-документ будет примерно таким:

  


 Пример страницы 


 Привет, мир

Сначала документ начинается с элемента типа документа, или типа документа (более подробно описанного в разделе Выбор правильного типа документа…). Он описывает, какой тип HTML используется, чтобы браузеры могли определить, как интерпретировать документ, и выяснить, следует ли он правилам, которым, по его словам, он будет следовать.

После этого вы можете увидеть открывающий тег элемента html . Это оболочка всего документа. Закрывающий тег html — это последнее, что есть в любом HTML-документе.

Внутри элемента html находится элемент head . Это оболочка, содержащая информацию о документе (метаданные). Более подробно об этом рассказывается в следующей статье. Внутри заголовка находится элемент title , который определяет заголовок «Пример страницы» в строке меню.

После элемента идет элемент , который является оболочкой, содержащей фактическое содержимое страницы — в данном случае только заголовок первого уровня (

) элемент, содержащий текст «Hello world». И это наш документ полностью.

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

Синтаксис элементов HTML

Как вы уже видели, базовый элемент в HTML состоит из двух маркеров вокруг блока текста. Есть некоторые элементы, которые не обтекают текст, и почти в каждом случае элементы могут содержать подэлементы (например, html , содержащий head и body в приведенном выше примере).

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

  
 Основы

HTML

В этом примере к элементу

(разделение страниц, способ разбиения документов на логические блоки) добавлен атрибут id , и ему было присвоено значение masthead .

содержит элемент

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

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

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

Элемент в другом элементе называется «потомком» этого элемента. Итак, в приведенном выше примере является дочерним элементом

, который сам является дочерним элементом

. И наоборот,

будет называться «родительским» для

.Эта концепция родитель / потомок важна, поскольку она составляет основу CSS и широко используется в JavaScript.

Уровень блока и встроенные элементы

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

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

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

Ссылки на символы

Последний пункт, который следует упомянуть в документе HTML, — это включение специальных символов. В HTML символы <, > и и являются специальными. Они начинают и заканчивают части HTML-документа, а не представляют символы «меньше», «больше» и амперсанд.

Одна из самых ранних ошибок, которые может сделать веб-автор, - это использовать в документе амперсанд, а затем появляется что-то неожиданное. Например, запись «Имперские единицы измеряют вес в камнях и фунтах» в некоторых браузерах может отображаться как «… камни £ s».

Это потому, что буквальная строка & pound; на самом деле является ссылкой на символ в HTML. Ссылка на символ - это способ включения символа в документ, который трудно или невозможно ввести с клавиатуры или в определенной кодировке документа.

Амперсанд ( и ) вводит ссылку, а точка с запятой (; ) заканчивает ее. Однако многие пользовательские агенты могут прощать ошибки HTML, такие как пропуск точки с запятой и обработка & pound; в качестве ссылки на символ.Ссылки могут быть либо числами (числовые ссылки), либо сокращенными словами (ссылки на сущности).

Фактический амперсанд должен быть введен в документ как & amp; , который является ссылкой на символьный объект, или как & # 38; - это числовая ссылка. Полную таблицу ссылок на персонажей можно найти на сайте evolt.org.

Резюме

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

Базовый список тегов HTML с примером

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

Тег абзаца HTML

Определяет абзац в веб-документе.HTML-абзац определяется с помощью тега

  <тело>
   Это первые абзацы 
   Это второй абзац

Запустить его... "

Тег комментария HTML

Определяет тег Комментарии .

  
       Файл изображения  ->

Запустить его... "

Тег изображений HTML

Для отображения изображений в веб-документе. HTML-изображения определяются внутри тега .

Запустить его... »

Тег ссылки HTML

Определяет ссылку во внутреннем или внешнем документе. HTML-ссылки определены внутри тега .

  
     Руководство по веб-разработке

Запустить его... "

Теги заголовков HTML

Определяет теги заголовков от

до

.

  <тело>
     Заголовок h2 
     Заголовок h3 
     Заголовок h4 
     Заголовок h5 
     Заголовок h5 
     Заголовок h6

Запустить его... "

HTML базовых тегов

«Предыдущее руководство
Следующее руководство »

Здесь вы узнаете об основных тегах, используемых в документе HTML.В этом руководстве вы узнаете следующие основные теги:

Пример базовых тегов HTML

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

 


    Пример базовых тегов HTML 



    Базовые теги HTML 
    Это учебное пособие по основам HTML-тегов.
    Здесь 
 Вы узнаете все об основных тегах HTML. 
   <час />
    Чтобы узнать о полных тегах HTML, см.
   Руководство по  HTML All Tags .

Вот результат, полученный с помощью приведенного выше примера кода базового тега HTML:

Тег форматирования сохранения HTML

Вы можете написать «как есть текст», используя HTML-тег

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


    Пример базового тега HTML 



    Без тега PRE.
      Это пример базового тега HTML
         понять о
            Сохранение форматирования HTML
               ярлык.
               
    
 С тегом PRE.
      Это пример базового тега HTML
         понять о
            Сохранение форматирования HTML
               тег. 

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


    Пример тегов HTML Basics 



 
 Это
   HTML базовый
пример тега.Вы можете
         использовать предварительный тег
   создать "как есть текст". 

 Ниже приведен образец вывода, полученный с помощью приведенного выше примера кода тега HTML Basic:
 HTML-тест онлайн
 «Предыдущее руководство
 Следующее руководство »
 Начальный HTML - WordPress.com Поддержка 
 Базовое понимание HTML может помочь вам получить больше от вашего WordPress.com сайт. В этой статье объясняется, как это сделать.
 Содержание 
 Что такое HTML? 
 Добавление и редактирование HTML 
 Некоторые основы HTML 
 Форматирование текста 
 Этот блок содержит неожиданное или недопустимое содержимое. 
 Редактирование HTML в классическом редакторе
 WordPress.com предоставляет вам несколько вариантов редактирования HTML-кода вашей страницы или публикации. Доступные вам параметры зависят от того, какой редактор вы используете. Вы можете щелкнуть здесь для получения инструкций, относящихся к классическому редактору.
 Что такое HTML? 
 HTML, или язык разметки гипертекста, является основным языком, используемым для создания веб-страниц. В HTML вы можете использовать специальные теги, такие как    для добавления ссылок и    для добавления изображений.
 Существует много типов HTML-тегов, но не все теги поддерживаются здесь, на WordPress.com. Вы можете узнать больше о том, какие теги разрешены в нашем документе поддержки кода
 ↑ Содержание ↑
 Добавление и редактирование HTML 
  В редакторе 
 Самый простой способ добавить HTML на страницу или сообщение - использовать пользовательский блок HTML  .Вы можете узнать больше о блоке Custom HTML здесь.
 В качестве альтернативы, почти все блоки имеют возможность редактировать их как HTML.
 Щелкните конкретный блок в редакторе.
 Нажмите на эллипсы (три точки) в верхней части блока.
 Выберите  Изменить как HTML .
 Чтобы вернуться к визуальному редактору блока, снова щелкните многоточие и щелкните  Редактировать визуально .
 Третий вариант, для особо смелых, - просмотреть всю страницу или публикацию в редакторе кода  .Редактор кода загрузит HTML всей страницы или сообщения.
 Отредактируйте страницу или сообщение.
 В правом верхнем углу редактора щелкните меню с многоточием (три точки).
 Выберите  Редактор кода .
 Чтобы вернуться в Визуальный редактор, снова щелкните многоточие и выберите опцию  Визуальный редактор .
  В виджете 
 Вы можете добавить пользовательский виджет HTML в любую область виджетов, поддерживаемую вашей темой.Кликните сюда, чтобы узнать больше.
 ↑ Содержание ↑
 Некоторые основы HTML 
 В редакторе HTML все  текст  - ссылка - это текст, цитата - это текст, даже изображение - это текст. Но здесь есть два вида текста. Часть текста - это фактическое содержание написанного вами сообщения, а часть - это HTML-код.
 Их легко отличить друг от друга: код HTML всегда начинается и заканчивается угловыми скобками,  < и > . Все, что находится внутри пары угловых скобок, является тегом HTML.Теги - это предопределенные команды HTML, которые определяют, как ваше сообщение будет выглядеть и вести себя.
   Это заголовок 
 Это абзац. 
 Это связанный текст   
 Например, чтобы выделить слово курсивом, мы используем тег   , который является сокращением для выделения.
 Чтобы открыть новый тег, введите тег, который вы хотите использовать, непосредственно перед текстом, который вы хотите каким-либо образом изменить:   .Когда вы хотите прекратить этот эффект, вы вставляете закрывающий тег, который является тем же тегом, но с косой чертой:   .
 ↑ Содержание ↑
 Форматирование текста 
 С помощью HTML легко сделать текст  полужирным,   курсивным,  подчеркнутым или зачеркнутым. Вот примеры того, как внести эти изменения в ваш текст:
 Для выделения текста  жирным шрифтом: 
   здесь выделен жирным шрифтом   
 Для  курсивом :
   курсив здесь   
 Для подчеркивания:
   подчеркнутый текст   
 Для зачеркивания:
   зачеркнутый   
 Проблемы с форматированием? Обратитесь за помощью к HTML-руководству по устранению неполадок.
  Страницы:  1 2 Посмотреть все
 Основы радиации | NRC.gov 
 Радиация - это энергия, выделяемая веществом в форме лучей или высокоскоростных частиц. Вся материя состоит из атомов. Атомы состоят из различных частей; ядро содержит мельчайшие частицы, называемые протонами и нейтронами, а внешняя оболочка атома содержит другие частицы, называемые электронами. Ядро несет положительный электрический заряд, а электроны несут отрицательный электрический заряд.Эти силы внутри атома работают в направлении прочного, стабильного баланса, избавляясь от избыточной атомной энергии (радиоактивности). В этом процессе нестабильные ядра могут излучать определенное количество энергии, и это спонтанное излучение мы называем излучением.
 Для получения дополнительной информации см. Следующие разделы на этой странице:
 Физические формы излучения 
 Как указывалось ранее, материя испускает энергию (излучение) в двух основных физических формах. Одна из форм излучения - это чистая энергия без веса.Эта форма излучения, известная как электромагнитное излучение, похожа на вибрирующие или пульсирующие лучи или «волны» электрической и магнитной энергии. К знакомым типам электромагнитного излучения относятся солнечный свет (космическое излучение), рентгеновские лучи, радар и радиоволны.
 Другая форма излучения, известная как излучение частиц, - это крошечные быстро движущиеся частицы, которые обладают как энергией, так и массой (массой). Эта менее известная форма излучения включает альфа-частицы, бета-частицы и нейтроны, как объясняется ниже.
 Радиоактивный распад 
 Как указывалось ранее, большие нестабильные атомы становятся более стабильными, испуская излучение, чтобы избавиться от избыточной атомной энергии (радиоактивности). Это излучение может испускаться в форме положительно заряженных альфа-частиц, отрицательно заряженных бета-частиц, гамма-лучей или рентгеновских лучей, как объясняется ниже.
 В результате этого процесса, называемого радиоактивным распадом, радиоизотопы со временем теряют свою радиоактивность. Эта постепенная потеря радиоактивности измеряется периодами полураспада.По сути, период полураспада радиоактивного материала - это время, за которое половина атомов радиоизотопа распадается с испусканием излучения. Это время может составлять от долей секунды (для радона-220) до миллионов лет (для тория-232). Когда радиоизотопы используются в медицине или промышленности, жизненно важно знать, как быстро они теряют свою радиоактивность, чтобы знать точное количество радиоизотопа, которое доступно для медицинских процедур или промышленного использования.
 Ядерное деление 
 В некоторых элементах ядро может расщепляться в результате поглощения дополнительного нейтрона в результате процесса, называемого ядерным делением.Такие элементы называются делящимися материалами. Одним из наиболее заметных расщепляющихся материалов является уран-235. Это изотоп, который используется в качестве топлива на коммерческих атомных электростанциях.
 Когда ядро делится, оно вызывает три важных события, которые приводят к высвобождению энергии. В частности, это выброс излучения, выброс нейтронов (обычно двух или трех) и образование двух новых ядер (продуктов деления).
 Ионизирующее излучение 
 Излучение может быть ионизирующим или неионизирующим, в зависимости от того, как оно влияет на материю.Неионизирующее излучение включает видимый свет, тепло, радар, микроволны и радиоволны. Этот тип излучения накапливает энергию в материалах, через которые проходит, но у него недостаточно энергии для разрыва молекулярных связей или удаления электронов с атомов.
 Напротив, ионизирующее излучение (например, рентгеновское и космическое излучение) более энергично, чем неионизирующее излучение. Следовательно, когда ионизирующее излучение проходит через материал, оно выделяет достаточно энергии для разрыва молекулярных связей и смещения (или удаления) электронов из атомов.Это смещение электронов создает две электрически заряженные частицы (ионы), которые могут вызывать изменения в живых клетках растений, животных и людей.
 Ионизирующее излучение имеет ряд полезных применений. Например, мы используем ионизирующее излучение в детекторах дыма, а также для лечения рака или стерилизации медицинского оборудования. Тем не менее ионизирующее излучение потенциально опасно при неправильном использовании. Следовательно, Комиссия по ядерному регулированию США (NRC) строго регулирует коммерческое и институциональное использование ядерных материалов, включая следующие пять основных типов ионизирующего излучения:
 Альфа-частицы 
 Альфа-частицы - это заряженные частицы, которые испускаются естественными материалами (такими как уран, торий и радий) и антропогенными элементами (такими как плутоний и америций).Эти альфа-излучатели в основном используются (в очень небольших количествах) в таких устройствах, как детекторы дыма.
 В общем, альфа-частицы имеют очень ограниченную способность проникать в другие материалы. Другими словами, эти частицы ионизирующего излучения могут быть заблокированы листом бумаги, кожей или даже несколькими дюймами воздуха. Тем не менее, материалы, излучающие альфа-частицы, потенциально опасны при их вдыхании или проглатывании, но внешнее воздействие обычно не представляет опасности.
 Бета-частицы 
 Бета-частицы, похожие на электроны, испускаются естественными материалами (такими как стронций-90).Такие бета-излучатели используются в медицине, например, при лечении глазных болезней.
 Как правило, бета-частицы легче альфа-частиц и обычно обладают большей способностью проникать в другие материалы. В результате эти частицы могут перемещаться по воздуху на несколько футов и проникать через кожу. Тем не менее тонкий лист металла или пластика или кусок дерева могут задерживать бета-частицы.
 Гамма и рентгеновские лучи 
 Гамма-лучи и рентгеновские лучи состоят из волн высокой энергии, которые могут преодолевать большие расстояния со скоростью света и, как правило, обладают большой способностью проникать в другие материалы.По этой причине гамма-лучи (например, от кобальта-60) часто используются в медицинских целях для лечения рака и стерилизации медицинских инструментов. Точно так же рентгеновские лучи обычно используются для получения статических изображений частей тела (например, зубов и костей), а также в промышленности для поиска дефектов сварных швов.
 Несмотря на их способность проникать сквозь другие материалы, в целом ни гамма-лучи, ни рентгеновские лучи не способны сделать что-либо радиоактивным. Несколько футов бетона или несколько дюймов плотного материала (например, свинца) способны блокировать эти типы излучения.
 Нейтроны 
 Нейтроны - это высокоскоростные ядерные частицы, обладающие исключительной способностью проникать в другие материалы. Из пяти типов ионизирующего излучения, обсуждаемых здесь, нейтроны - единственные, которые могут сделать объекты радиоактивными. Этот процесс, называемый активацией нейтронов, дает множество радиоактивных источников, которые используются в медицинских, академических и промышленных приложениях (включая разведку нефти).
 Благодаря своей исключительной способности проникать в другие материалы, нейтроны могут перемещаться в воздухе на большие расстояния, и для их блокировки требуются очень толстые водородсодержащие материалы (например, бетон или вода).К счастью, нейтронное излучение в основном происходит внутри ядерного реактора, где много футов воды обеспечивают эффективную защиту.
 Страница Последняя редакция / обновление 20 марта 2020 г.
 Центр данных по альтернативным видам топлива: основы этанольного топлива 
 Этанол - это возобновляемое топливо, которое производится из различных растительных материалов, известных под общим названием «биомасса». Более 98% бензина в США содержит этанол, обычно E10 (10% этанола, 90% бензина), для насыщения топлива кислородом, что снижает загрязнение воздуха.
 Этанол также доступен в виде E85 (или гибкого топлива), который можно использовать в транспортных средствах с гибким топливом, предназначенных для работы на любой смеси бензина и этанола до 83%. Другая смесь, E15, одобрена для использования в легковых автомобилях 2001 модельного года и более новых.
 Сделать этанол доступным в качестве автомобильного топлива необходимо в несколько этапов:
 Сырье для биомассы выращивается, собирается и транспортируется на предприятие по производству этанола.
 Сырье превращается в этанол на производственном предприятии, а затем транспортируется на топливный терминал или конечному потребителю по железной дороге, грузовиком или баржей.
 Этанол смешивается с бензином на топливном терминале для получения E10, E15 или E85, а затем доставляется грузовиком на заправочные станции. E15 поступает либо непосредственно с терминала, либо через насос-блендер из резервуаров E10 и E85 на станции.
 Свойства топлива 
 Этанол (CH ₃ CH ₂ OH) - прозрачная бесцветная жидкость. Он также известен как этиловый спирт, зерновой спирт и EtOH (см. Поиск по свойствам топлива). Этанол имеет одну и ту же химическую формулу независимо от того, произведен ли он из сырья на основе крахмала или сахара, такого как кукурузное зерно (поскольку это в первую очередь в Соединенных Штатах), сахарный тростник (как в основном в Бразилии) или из целлюлозного сырья (например, древесной щепы или растительных остатков).
 У этанола более высокое октановое число, чем у бензина, что обеспечивает превосходные свойства смешивания. Требования к минимальному октановому числу бензина предотвращают детонацию двигателя и обеспечивают управляемость. Бензин с более низким октановым числом смешивают с 10% этанолом, чтобы получить стандартное октановое число 87.
 Этанол содержит меньше энергии на галлон, чем бензин, в разной степени, в зависимости от процентного содержания этанола в смеси. Денатурированный этанол (98% этанола) содержит примерно на 30% меньше энергии, чем бензин на галлон.Влияние этанола на экономию топлива зависит от содержания этанола в топливе и от того, оптимизирован ли двигатель для работы на бензине или этаноле.
 Энергетический баланс этанола 
 В США 94% этанола производится из крахмала кукурузного зерна. Для превращения любого исходного сырья в этанол требуется энергия. Этанол, произведенный из кукурузы, демонстрирует положительный энергетический баланс, а это означает, что процесс производства этанольного топлива не требует больше энергии, чем количество энергии, содержащееся в самом топливе.
 Целлюлозный этанол улучшает энергетический баланс этанола, поскольку исходное сырье является либо отходами, побочными продуктами другой отрасли (древесина, растительные остатки), либо специальными культурами, такими как просо и мискантус, с меньшими потребностями в воде и удобрениях по сравнению с кукурузой. Когда биомасса используется в процессе преобразования непищевого сырья в целлюлозный этанол, количество энергии ископаемого топлива, используемой в производстве, сокращается еще больше. Еще одно преимущество целлюлозного этанола заключается в том, что он приводит к более низким уровням выбросов парниковых газов в течение жизненного цикла.