Всем привет!. Второй урок мы посвятим вопросу – что такое HTML и как с ним работать. В нем вы узнаете об особенностях самого популярного языка веб-программирования и наглядно поймете его главную суть.
От того как вы его усвоите вам будет легче двигаться вперед и тогда вы сможете без труда (хотя нет, потрудиться все таки придется) взяться за покорение более сложных языков создания сайтов, например того же PHP. Итак давайте приступим к делу.
Что такое Html
HTML (hypertext markup language) – в обычной жизни язык гипертекстовой разметки. Язык стандартной разметки интернет документов во Всемирной паутине. Это один из самых популярных языков создания сайтов. Он же считается самым легким в плане загрузки в браузерах.
В нем нет никаких сложных «замутов» как у PHP, который прежде чем вывести страницу в браузере, сначала делает запрос в базу данных MySql, а потом только выводит содержимое пользователю. Долгие словесные прелюдии о том, как он создавался рассказывать не буду, потому как долго и не интересно.
По всем этим моментам — великая Википедиа вам в помощь. Мы же хотим научиться быстро создавать сайты, ведь так? Отлично! Тогда давайте двигаться дальше и постигать все тонкости этой веб науки.
Основы языка HTML. Понятие тега
Без знания твердой базы никуда не денешься, «мат.часть» («фундамент» любого предмета) еще никто не отменял. И мы не будет отступать от традиций и правил.
Основы языка HTML составляют теги, а если быть более точным то набор тегов. Они обозначаются вот таким образом <тег>. Теги всегда парные и изображаются вот так
<тег>.
< тег> < / тег> . |
Каждый из них выполняет строго определенную функцию для отображения в браузерах.
Одни выводят на экран картинку, другие ссылку, третьи отвечают за абзацы, четвертые делают таблицу и так далее. Внутри них мы можем писать любой текст. Я люблю их называть контейнерами, для наглядности, так сказать. Но существуют также и одинарные, их мы изучим в следующих уроках.
И еще уясните для себя один важный момент. В данном языке действует принцип Парето, т.е как и в любой сфере жизни, деятельности, да где бы то ни было, существует правило 80/20.
О чем это говорит? Это говорит нам, что 20% (в нашем случае это html) языка делают 80% основной работы. Логика в том, что все теги учить не обязательно, поскольку многие из них просто не используются или применяются очень редко. Так что в наших уроках мы делаем упор на самых частых и важных. И с этим вы справились прекрасно!
Структура HTML документа
Структура любого html документа выглядит следующим образом
< ! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" > < title > Документбезназвания< / title > < / head > < body > < / body > < / html > |
Теперь давайте подробнее распишем каждый пункт:
Что такое Doctype и его значения
Элемент doctype используется для указания типа нашей веб страницы. Это так называемое «объявление типа документа» или Document Type Declaration.
Этот тег должен всегда находиться на первом месте на каждой странице. Он - ключевой компонент web-страниц, претендующих на соответствие стандартам: без него ваш код и не пройдут проверку валидатором.
Валидатор веб документов – это компьютерная программа, которая проверяет соответствие какого-либо документа, потока данных, или фрагмента кода определённому формату, проверяет синтаксическую корректность документа или файла (по данным Википедии).
Выделяют несколько значений Doctype:
- Strict (строгий)
- Transitional (переходный)
- Frameset (с фреймами)
Я использую второй вариант. С ним удобнее всего работать, поскольку не ограничивает разработчика. У читателя возникает путаница, так в чем их разница и какой лучше всего использовать?
Объясню в чем их разница. У transitional версии нет строгого соответствия стандартам W3C валидации (или по-русски, проверки), т.е браузер одинаково будет отображать содержимое веб документа, даже если в нем присутствуют устаревшие, не рекомендуемые и другие нестандартные вариации кода. А вот Strict версия точно придерживается всем стандартам, т.е на практике если вы где-то в коде забыли поставить соответствующий символ (например слэш /), то при проверке вам будет дано предупреждение.
Вот как выглядит веб документ, использующий strict версию:
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < title > Строгоесоответствиестандартамязыка< / title > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < / head > < body > < p > . . . < / p > < / body > < / html > |
Я же советую использовать второй вариант и не париться, так как он самый удобный. Теперь мы рассмотрим другие составляющие нашей страницы.
— или «головной» тег, в нем располагаются самые важные теги, которые объясняют браузеру, что нужно проводить на странице и какие механизмы запускать. Он определяет веб документ и его содержимое. В него часто выносят различные скрипты, которые запускают различные фишки на странице и там же находится важный «контейнер» для SEO раскрутки – тег
HTML (Hyper Text Markup Language)-это специальный язык разметки документов. Важно отметить, что здесь речь идет об электронных, а не о печатных документах.
Печатный документ имеет строго заданные размеры страницы и полей. В нем точно заданы параметры шрифтов. Электронные документы, Web-страницы предназначены не для печати на принтере, а для просмотра на экране. Заранее неизвестно, на каком компьютере документ будут просматривать. Неизвестен размер окна обозревателя и неизвестно, какие имеются шрифты.
Язык HTML специально создан, чтобы оформлять экранные документы, которые будут воспроизводиться неизвестными средствами. Изначально язык HTML предназначался не для форматирования документа, а для его функциональной разметки . Например, «заголовок» - это характеристика содержания, а не оформления. Программа для просмотра документа на экране (браузер, броузер, обозреватель), выбирает свой способ отображения части документа, описанной как заголовок.
Создание документа на языке HTML аналогично программированию. Автор документа берет обычный текст и вставляет в него специальные коды (их называют тегами). Когда документ просматривается, теги выполняют роль команд. Например, если в начале абзаца стоит тег
Теги HTML позволяют выполнять выравнивание строк документа, управлять фоном и цветом шрифта, вставлять иллюстрации и обтекать их текстом, включать в документ мультимедийные объекты и многое другое. В результате получаются содержательные и эффектно оформленные Web-документы.
Среди многочисленных тегов HTML есть специальная группа тегов, предназначенных для создания гипертекстовых ссылок. Гипертекстовая ссылка - это выделенный фрагмент текста или иллюстрация, с которыми связан адрес другого документа. Обычно гипертекстовые ссылки выделены подчеркиванием или другим цветом. Если на гипертекстовую ссылку навести указатель мыши, то он изменит форму. Если на гипертекстовой ссылке щелкнуть левой кнопкой мыши, произойдет переход к другой Web-странице, возможно, находящейся на другом сервере, может быть даже на другом континенте.
Документы, созданные в формате HTML сохраняют в файлах с расширением html или htm.
Теги html
Управляющие конструкции языка HTML называются тегами. Теги – это наборы символов, с помощью которых выполняется разметка текста. Все теги записываются в угловых скобках, которые формируются символами «меньше» (<) и «больше» (>). После открывающей скобки идёт ключевое слово, определяющее тег.
Регистр букв в названиях тегов не имеет значения. Однако принято записывать теги прописными буквами, чтобы они отличались от основного текста.
Теги бывают парные и непарные . Для воздействия на часть документа (например, на абзац) используют парные теги: открывающий и закрывающий . Открывающий тег создаёт эффект, а закрывающий прекращает его действие. Закрывающие теги начинаются с символа косой черты (/).
Непарные теги воздействуют на весь документ или дают разовый эффект в месте своего появления. В этом случае закрывающий тег не употребляется.
Если по ошибке в теге записано ключевое слово, отсутствующее в языке, то тег полностью игнорируется.
При просмотре документа в браузере сами теги не отображаются, но влияют на способ отображения документа.
На эффект, создаваемый тегом, могут влиять атрибуты. Атрибуты – это служебные слова, отделённые от ключевого слова тега и друг от друга пробелами. Если требуется указать значение атрибута, то оно записывается после знака равенства и заключается в кавычки. В парных тегах атрибуты добавляются только к открывающему тегу. Закрывающие теги никогда не содержат атрибутов .
Язык HTML позволяет вводить в документ
На каждом сайте разный внешний вид и функционал, но с чем это связано и на каком языке прописывается страничка? Для всего этого используются каскадные таблицы стилей и язык 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
В этой статье о HTML дан небольшой обзор языку, его структуре, характеристике, истории. Данная статья о языке HTML предназначена к прочтению для общего развития и на начальном этапе изучения HTML вы можете её пропустить, а вернуться к ней позже, после прочтения .
HTML (HyperText Markup Language) — язык разметки гипертекста. Сайты создаются с помощью языка HTML .
Создателем языка HTML, является выдающийся британский учёный — Тим Бернерс-Ли .
Версии HTML
До 1995 года официального стандарта языка HTML не существовало, но было несколько не стандартизированных версий языка HTML. 22 сентября 1995 года, создали первый официальный стандарт языка HTML, он сразу получил номер 2.0 (HTML 2.0).
14 января 1997 года появилась версия HTML 3.2,
18 декабря 1997 года HTML 4.0,
24 декабря 1999 года HTML 4.01
В 00-х годах, также существовал язык разметки XHTML (то же самое что и HTML, но с более строгим синтаксисом). XHTML предназначался для того, чтобы подготовить вебмастеров, к строгим правилам разметки языка XML . Благодаря строгой разметке, различные программы и сервисы понимающие XML, могут эффективно обрабатывать данные на сайтах написанные на XHTML, также в этом языке появилась возможность внедрять SVG, MathML, CML и другие производные языка XML.
XHTML существовал в трёх версиях в строгой, переходной и frameset, в переходной можно было использовать устаревшие теги такие как center или font . На данный момент, разработку языка XHTML закрыли.
Современной версией языка HTML, является HTML5 , именно эту версию мы и будем изучать в данном учебнике. HTML5 более удобен чем предыдущие языки и вобрал в себя все их преимущества, также в нём уделено большое значение семантике.
Язык CSS и HTML
Начиная с 4 версии языка HTML, изменять внешний вид HTML тегов рекомендуется только с помощью языка CSS. Поэтому языки HTML и CSS желательно изучать параллельно. В учебнике по HTML для начинающих мы также ознакомимся с начальными аспектами языка CSS, ну а для продолжения изучения вы можете почитать и сам
История HTML
Язык HTML был создан в 1991 году, британским учёным Тимом Бернерсом-Ли. Тогда Тим работал в CERN (Европейская организация по ядерным исследованиям) и сайтов еще не существовало. Ученые работавшие в данном центре нуждались в надежном и эффективном способе обмена информацией.
Выбор пал на язык SGML , но он был слишком сложен и тогда Тим на основе SGML, создал упрощенную его вариацию — HTML , благодаря чему любой ученый мог создать простой документ с информацией, обрамив её различными тегами: абзацами, заголовками, ссылками и разместить его в интернете, а другие ученые в то же время могли читать данную информацию.
Изначально в HTML-документах (на страницах сайтов), можно было размещать только текстовую информацию, возможность добавления медиафайлов: изображений, видео и аудио появилась чуть позже.
На данный момент, поддержкой и развитием языка HTML занимается W3C (World Wide Web Consortium) — консорциум всемирной паутины. W3C состоит из различных рабочих групп, которые внедряют и развивают интернет стандарты и технологии.
Таблица распространения браузеров
Файлы HTML, обычно имеют расширения .html или .htm . Эти файлы можно просматривать с помощью интернет-браузеров.
Таблица имён браузеров и количество их распространения в мире, на январь 2016 года, в порядке уменьшения.
В этой статье мы рассмотрим вопрос, что такое html, рассмотрим историю его развития. Поговорим о том, как создавать сайт и вообще сложно ли это. Итак, начнем
1. HTML код - что это такое простыми словами
HTML (англ. "hyper text markup language" - язык гипертекстовой разметки) - это специальный язык разметки, который применяется при создании сайтов в интернете.
Браузеры прекрасно понимают html и могут интерпретировать его в понятном виде. Вообще любая страница сайта - это html-код, который браузер переводит в дружественный вид для пользователя. Кстати, код любой страницы является доступным для всех. Для его просмотра щелкните правой кнопкой мыши и выберите посмотреть исходных код или нажмите на клавиатуре CTRL+U:
Язык разметки html получил широкую популярность. На данный момент - это единственный язык, с помощью которого создается разметка сайта. Я хочу подчеркнуть тот факт, что именно разметка. Так называемый "движок" создается на другом языке программирования (чаще всего php), который позволяет создавать интерактивные страницы (html этого не позволяет).
Внимательный читатель обратит внимание, что далеко не у всех страниц на конце в интернете расширение.html. К примеру есть страницы /catalog/list (вообще без расширения). Это неправильно, но браузер сможет понять что это веб-документ и корректно его отобразить.
2. Пример и структура html кода
Ниже приведен пример со структурой типичной html страницы. Обратите внимание, что html код делится на две области: заголовок и тело страницы.
<span>Название страницы </span> ... Заголовочные теги (подключение стилей, скриптов) ... ...Шапка сайта......... Основная часть сайта...... ... ...
Этот код можно редактировать в любом текстовом редакторе. Чаще всего для разработки html сайта используют notepad++ (продвинутый редактор, который выделяет теги и показывает ошибки). Но лучше использовать более продвинутые редакторы для работы с HTML-разметкой .
Разметка состоит из html тегов (иногда пишут "тэг").
3. Что такое HTML тег
HTML тег - это один из элементов верстки html , который нужен для структуры. Теги имеют открывающий знак < и закрывающий > .
Например,
Запрещено закрывать теги не по порядку их открытия. Например
Более подробно про создание html страницы читайте в статье.
