HTML последовательности
Наконец-то поняла проблему с освоением написания страниц в блокноте. Коды запомнить — это не проблема. Но не могу разобраться с HTML-последовательностями. Как бы так понять эти последовательности?
Джазбас Сквайер Мастер (1899) — указывает тип документа и его кодировки. В России в основном windows-1251; — что здесь укажешь, то и будет отражаться поисковиками; — слова, которые набирает пользователь при поиске информации в поисковике. — ещё один тег с ключевыми словами. — отвечает за управление поисковыми роботами. — указывает адрес электронной почты автора. — в него можно писать своё имя, название студии или e-mail.Формат произвольный. вот — зазубрите?нет ничего зазорного в поглядывании в «шпаргалку» =) и это только основа шаблона страницы
Дельгир Мастер (1131) -теперь можешь писать все что хочешь ( название сайта) затем все это со слешами водишь и в конце ставишь картинки надписи все что хочешь сохраняешь и в инет впускаешь,будут вопросы пиши
Сколько с сайтами маюсь, ни разу не слышал о последовательностях.
Вы про что именно?
Если вы про то, как страницы строить то:
Для начала нужно указать что это документ html текгами
< html>
< /html>
Потом в эти теги вбивается head для описания страницы и body для контекста
< html>
< head>
здесь писать заголовки, мета теги, указывать стиль. .
< /head>
Всё что будет отображаться на странице нужно поместить в body
Вы написали простейший вариант. А я имею ввиду, когда всякие дивы, хрефы, и тд, и всё вперемешку, и этого много, не понятно куда картинку вставить. Вот например: Это код шаблона юкозовского сайта, шаблон подвала. (Я просто с юкоза начала, там у меня не бесплатный сайт.) Так вот, как понять куда именно вставить ссылку картинки в этот код?
$POWERED_BY$ |
$COUNTER$
И таких вопросов бесконечно много. О такой последовательности я говорю.
Используй Notepad++. Там есть возможность подсветки синтаксиса, на порядок удобней и не запутаешься где начало тэга, где конец.
HTML (XHTML) — это язык логической разметки. Он не получает, не обрабатывает и не возвращает данные. Потому, что он НЕ ЯЗЫК ПРОГРАММИРОВАНИЯ! Соответственно, в нём нет последовательностей.
И весь он состоит из т. н. тегов — это такие фиговинки, заключённые в угловые скобочки. Каждый из которых обозначает ЭЛЕМЕНТ разметки. Одни имеют содержимое (например абзац — P), другие нет (например разрыв строки — BR). По стандарту в любом случае они должны быть закрыты (для «пустых» перед закрывающей скобкой ставится слэш — /). Один элемент может быть вложен в не пустой другой.
Элемент может иметь атрибуты, атрибуты могут иметь параметры, параметры могут иметь значения. Например, элемент «таблица» может иметь атрибут «граница», который имеет параметр «ширина», который может иметь значение «2 пиксела».
Картинка вставляется пустым тегом IMG (образ) с атрибутом SRC (источник) с единственным возможным параметром URI (расположение) и его значением (относительным либо абсолютным) — расположение картинки:
Примерно понятен вопрос (примерно)
если он состоит в том, как открывать и закрывать теги, то вначале нужно их изучить, и знать, что теги бывают парными (открывающий тег и закрывающий) а бывают и непарные, пример непарного тега это перенос строки: br
К нему не нужен закрывающий тег с атрибутом прямого слэша /br Правда при разных видах документа HTML бывают разные теги, по сути означающие одно и то же. просто правила требуют использовать тот или иной тег именно в таком типе документов. Пример, тип документа HTML4.0 в нём тег переноса пишется как br в угловых скобках. А в типе документов XHTML1.0 он уже пишется как br / то есть тот же br, но с пробелом и прямым слэшем в конце . Всё это в угловых скобках. В общем нужно вложенность понимать. Надо лишь запомнить что у страницы всего две основные части — хедер, и тело документа (то что в тегах body. )
В парных тегах всё просто — принцип «матрёшки» — открыл одну, в ней вторую и так далее. Но если ты открыл одну, вторую, третью, то и закрывать их надо друг в друге. К первой не подойдёт часть той, которая была в ней)).. . ко второй не подойдёт первая или скажем третья.
Скелет HTML-документа
HTML-документ состоит из «дерева» тегов. Далее приведён минимально необходимый набор тегов, который служит основой любого HTML-документа, как фундамент для дома.
DOCTYPE html> html lang="ru"> head> head> body> body> html>
Объявление типа документа
— это не тег, а обязательная инструкция объявления типа документа. Она нужна для того, чтобы сообщить браузеру в какой версии HTML написан документ.
По доктайпу браузер определяет версию HTML и правильно отображает страницу. Объявление типа документа должно быть самым первым что видит браузер во время обработки HTML-документа.
Раньше у HTML были версии, последняя это HTML5. Сейчас HTML Living Standard это единая спецификация языка HTML, в которой отказались от версий, она просто обновляется. Если говорят о HTML5, то это тоже самое что «современный HTML» или HTML Living Standard, только короче.
Элементы верхнего уровня
Предназначены для формирования основной структуры веб-страницы и определяют разделы заголовка и тела документа.
Тег
Корневой элемент документа как контейнер, который заключает в себе всё содержимое страницы. Все, что находится за его пределами, не воспринимается браузером как HTML-код и не обрабатывается.
DOCTYPE html> html lang="ru">html>
Атрибут lang указывает на каком языке написан текст страницы. Это необходимо для ассистивных технологий, таких как скринридеры и т. п.
Тег
Предназначен для хранения служебной информации о странице: заголовок, описание, кодировку и т. д. Вся эта информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру как следует обрабатывать страницу.
DOCTYPE html> html lang="ru"> head> head> html>
Тег
Содержит контент будущей веб-страницы. Контент, который должен отображаться на странице, следует располагать именно внутри этого тега.
DOCTYPE html> html lang="ru"> head> head> body> body> html>
Теги заголовка документа
Группа служебных тегов, которые располагаются в шапке документа. Большинство из них напрямую не отображаются в окне браузера.
Заголовок страницы
Текст, размещенный внутри тега , отображается во вкладке браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать краткое описание содержимого веб-страницы.
DOCTYPE html> html lang="ru"> head> title>HTML5 это просто!title> head> body> body> html>
Метаданные
Тег используется для хранения информации предназначенной для браузера и поисковых систем: установка кодировки документа, передача информации поисковым системам и многое другое. Мета-тегов может быть несколько, потому что в зависимости от используемых атрибутов они несут различную информацию.
Кодировку страницы необходимо указать для того, чтобы браузер корректно отобразил текст. Если этого не сделать или задать неверную кодировку, вместо символов браузер может отобразить иероглифы.
DOCTYPE html> html lang="ru"> head> meta charset="utf-8" /> title>HTML5 это просто!title> head> body> body> html>
Краткое описание содержания помогает поисковым системам лучше проиндексировать страницу.
DOCTYPE html> html lang="ru"> head> meta charset="utf-8" /> meta name="description" content="Изучение основ HTML5 для новичков" /> title>HTML5 это просто!title> head> body> body> html>
Поток документа
Поток это вертикальный и горизонтальный порядок отображения элементов на странице. Вертикально поток идёт сверху вниз, и, по умолчанию, элементы отображаются на странице в том порядке, в котором они указаны в HTML-документе. Горизонтально поток идёт слева направо (или справа налево для восточных стран).
Все элементы, без исключения, это прямоугольные области, занимающие определённое место в так называемых «строках», как слова предложения на листе в линейку. Есть два основных типа элементов — блочные и строчные.
p>Блочный элемент 1p> p>Блочный элемент 2p> p>Блочный элемент 3p> a href="">Строчный элемент 1a> a href="">Строчный элемент 2a> a href="">Строчный элемент 3a>
Блочный элемент (block-level element) — занимает всю строку целиком вне зависимости от объёма его контента, поэтому несколько блочных элементов визуально идут друг за другом сверху вниз.
Строчный элемент (inline element) — занимает место по своему содержимому, поэтому несколько строчных элементов могут располагаться на одной строке. Когда в строке не хватает места для вмещения строчного элемента, он переносится на новую.
С потоком документа, блочными, строчными, блочно-строчными, а также флекс-элементами мы детально познакомимся в следующих занятиях.
Иерархия в HTML
HTML-документ — это как большое семейное древо, с родителями, братьями, детьми, предками и потомками.
Всё это происходит из возможности вкладывать одни элементы HTML внутрь других.
Вложения
Давайте напишем простой абзац и улучшим его путём разделения частей текста, вставив два строчных элемента:
Сэр Алекс Фергюсон однажды сказал о Филиппо Индзаги: Этот парень должен был родиться в положении вне игры
.
- элемент задаёт слова «Алекс Фергюсон» более важными;
- отмечает его цитату об Индзаги.
Тот факт, что отображается жирным шрифтом, является только поведением браузера по умолчанию. Помните, что вы должны выбирать элементы HTML в соответствии с их значением, а не как они выглядят.
Порядок
Как работает вложение, зависит от расположения открывающего и закрывающего тегов.
Поскольку элемент HTML содержит открывающий тег, закрывающий тег и всё между ними, дочерний элемент должен быть закрыт до закрытия родительского элемента.
Этот код HTML не будет работать, потому что тег strong я открыл здесь, но закрыл его только после абзаца.
Поскольку был открыт после <р>(и, таким образом, считается потомком <р>), элемент должен быть закрыт перед родительскимр> .
Этот код HTML будет работать, потому что тег strong я открыл и закрыл правильно.
Глубина
Поскольку дочерние элементы сами по себе могут содержать другие дочерние элементы, то можно написать более глубокую иерархию внутри HTML-документа.
Наш абзац выше может быть частью статьи блога:
Известные футбольные цитаты
Сэр Алекс Фергюсон однажды сказал о Филиппо Индзаги: Этот парень должен был родиться в положении вне игры
.
При критике со стороны Джона Карью, Златан Ибрагимович ответил: То, что делает Карью с мячом, я могу сделать с апельсином.
Джордж Бест сказал: Я потратил много денег на выпивку, девчонок и быстрые автомобили. Остальное я просто промотал
, — когда его спросили о его образе жизни.
- является предком для любого другого элемента;
- является родителем для и трёх ;
- и три являются братскими друг для друга;
- каждый является родителем для и , которые в них содержатся;
- каждый ,
, и — это всё потомки.
Аналогия с семейным древом также применяется при прохождении нескольких слоёв вложений в HTML:
- потомок элемента X — это любой элемент внутри X;
- ребёнок — это просто прямой потомок;
- предком элемента Y является любой элемент;
- родитель — это лишь первый прямой предок.
Вложения блоков и строк
Блочные элементы могут содержать блочные или строчные элементы.
Однако, строчные элементы могут содержать только другие строчные элементы (за исключением элемента ).
Вы не можете поместить абзац внутрь тега strong.
Просто запомните — предок/потомок, родитель/ребёнок, братья. Эта иерархия будет полезна в CSS.