История создания и развития HTML. Основы языка HTML Что за язык html

💖 Нравится? Поделись с друзьями ссылкой

В этой статье мы рассмотрим вопрос, что такое html, рассмотрим историю его развития. Поговорим о том, как создавать сайт и вообще сложно ли это. Итак, начнем

1. HTML код - что это такое простыми словами

HTML (англ. "hyper text markup language" - язык гипертекстовой разметки) - это специальный язык разметки, который применяется при создании сайтов в интернете.

Браузеры прекрасно понимают html и могут интерпретировать его в понятном виде. Вообще любая страница сайта - это html-код, который браузер переводит в дружественный вид для пользователя. Кстати, код любой страницы является доступным для всех. Для его просмотра щелкните правой кнопкой мыши и выберите посмотреть исходных код или нажмите на клавиатуре CTRL+U:

Язык разметки html получил широкую популярность. На данный момент - это единственный язык, с помощью которого создается разметка сайта. Я хочу подчеркнуть тот факт, что именно разметка. Так называемый "движок" создается на другом языке программирования (чаще всего php), который позволяет создавать интерактивные страницы (html этого не позволяет).

Примечание

Внимательный читатель обратит внимание, что далеко не у всех страниц на конце в интернете расширение.html. К примеру есть страницы /catalog/list (вообще без расширения). Это неправильно, но браузер сможет понять что это веб-документ и корректно его отобразить.

2. Пример и структура html кода

Ниже приведен пример со структурой типичной html страницы. Обратите внимание, что html код делится на две области: заголовок и тело страницы.

Название страницы ... Заголовочные теги (подключение стилей, скриптов) ... ... Шапка сайта ... Левая колонка ... ... Основная часть сайта... ... Правая колонка ... Низ страницы ...

Этот код можно редактировать в любом текстовом редакторе. Чаще всего для разработки html сайта используют notepad++ (продвинутый редактор, который выделяет теги и показывает ошибки). Но лучше использовать более продвинутые редакторы для работы с HTML-разметкой .

Разметка состоит из html тегов (иногда пишут "тэг").

3. Что такое HTML тег

HTML тег - это один из элементов верстки html , который нужен для структуры. Теги имеют открывающий знак < и закрывающий > .

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

Запрещено закрывать теги не по порядку их открытия. Например

Более подробно про создание html страницы читайте в статье.

Начну, пожалуй, с начала..

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

Теперь о командах - их называют дескрипторами, но чаще - тегами.

Вернемся к нашей первой страничке.. итак мы написали:



Моя первая страничка


Привет мир!!!


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

Так что же мы написали? и как это читает браузер?

Мысли браузера:

- начало документа.. опять работы привалило..
- смотрим словарик английского переводим "голова" …в голове моей опилки не беда!! ... здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят?
- "название" значит.. это в шапке окна нужно написать его название:
Моя первая страничка - опять чайник тренируется..
- все название закончилось.. можно идти дальше..
- ага и в голове кроме названия больше никаких вздорных мыслей не держим..
- "тело" документа всё что написано ниже выставляем на всеобщее обозрение
Привет мир!!! - как мило! Достали уже!!!

- переносим текст на следующую строчку.. я даже догадываюсь что в ней будет...
Меня зовут (здесь Ваше имя), это моя первая страничка! - ну да так и есть.. ничего пооригинальнее придумать не могут..
- что всё что ли? Больше ничего не отображать?
- ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!!

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

1) Необходимо раз и навсегда запомнить что если есть открывающий тег то обязательно должен быть и закрывающий

Хотя есть и исключения как например у нас тег
- он закрытия не требует потому что говорит лишь о том, что следует писать с новой строки. Кстати попробуйте добавить еще пару тройку таких же перед строчкой "Меня зовут.." и Вы увидите, что в результате она заметно опустилась вниз.. (Ну естественно в блокноте сохраните изменения, а в браузере нажмите кнопку "обновить")

2) Все документы должны иметь вот такой шаблон кода:

- начало документа
- начало головы
- закрытие головы
- начало тела
- закрытие тела
- конец документа

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

3) О порядке:

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




содержание


Если писать, например, так:




содержание



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

Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать..

    При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего!

    При написании кода советую придерживаться "хорошей манере письма", то есть писать теги "лесенкой" по мере вложенности одного тега в другой. Со временем Вы поймёте что читать код написанный вот так:



    Моя первая страничка


    Привет мир!!!

    Меня зовут Карлсон, это моя первая страничка!

    Значительно легче, чем так:



    Моя первая страничка


    Привет мир!!!

    Меня зовут Карлсон, это моя первая страничка!

    И уж тем более чем вот так:

    Моя первая страничкаПривет мир!!!
    Меня зовут Карлсон, это моя первая страничка!

    Хоть это и дело привычки.. всё же лучше привыкнуть писать "разборчиво".

С появлением компьютерных сетей и тем более «всемирной паутины», появилась необходимость передачи информации для разных платформ. Ведь необходимо, чтобы все элементы документа на всех компьютерах, не зависимо от используемой системы, отображались одинаково. Для этого используется специальный язык – HTML. Впервые применение этого языка описания страниц было применено для отображения научной информации в Европейском центре ядерных исследования (Женева), и применялся для возможности отображения информации для всех компьютеров локальной сети. Сегодня HTML служит неотъемлемой частью большинства программ, и прежде всего – для отображения интернет страниц. Фактически любой пользователь глобальной сети посещая любой сайт использует HTML. Вся информация, которую пользователь может лицезреть в окне браузера описывается через HTML, а сами браузеры представляют собой специализированные программы для работы с HTML языком.

Что такое HTML ?

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

Особое развитие HTML получил вместе с развитием WWW (World Wide Web), поскольку разрабатывался как универсальный язык для всех устройств, независимо от имеющегося на них оборудования. Использование языка дает возможность структурного отображения информации и упрощает ее восприятие. Если сравнивать с печатной продукцией, то это будет соответствовать колонкам и полосам газеты. Заголовки, положение картинок, таблицы – это все необходимо для структурной подачи, поскольку сплошной массив текста читать весьма затруднительно.

Первые версии HTML были разрознены и не имели определенного единства. В результате пришлось выработать определенный единый стандарт. Это было сделано в 1995 году, и стандарт оформлен был в виде официальной версии HTML 2.0. Через 2 года (в 1997) к нему были добавлены некоторые возможности. Новый формат получил название HTML 3.0, и предложен был W3C (World Wide Web Consortium) . Теоретически он включал в себя все функции 2.0, но в те времена возможности браузеров были весьма ограничены, поэтому полной совместимости не получилось. К концу 1997 года после апробирования версии языка 3.2, был принят новый стандарт 4.0. В нем старые дескрипторы были упразднены, и появились новые, в частности, использование каскадных таблиц стилей (CSS ).

Базовая структура документов

Большая часть современных программ для верстки страниц, такие как Dreamweaver и Microsoft SharePoint Designer , автоматически создают базовую структуру документов, но для того, чтобы правильно читать и создавать ее самостоятельно, необходимо познакомиться с простыми правилами.

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

Документ HTML начинается и заканчивается тегами формата документа.

Тут код страницы

Перед тегом документа может указываться стандарт, с использованием которого будет отображаться содержимое (тег DOCTYPE ).

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

Заголовок определяется тегами и , и содержит данные, предназначенные для форматирования документа. В заголовке прописываются также загружаемые скрипты, которые требуются для отображения данных. В тегах < title> и прописывается заголовок страницы который отображается в заголовке окна или вкладки.

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

Структуру HTML документа можно представить следующим образом.

< title> Заголовок страницы (отражается в окне!)

Заголовок документа. Не отображается на экране

Тело документа. Отображается на экране

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

Основы хтмл

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

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

Навел только несколько примеров, на самом деле сейчас эти знания все чаще и чаще применяются в интернете. Я больше практик чем теоретик, поэтому в моих статьях в данной рубрике я буду показывать вам свои примеры, как и что я делал, step by step. Буду выкладывать как примеры страниц, так и целые сайты.

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

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

Основы для начинающих

Что такое html — если посмотреть, что пишет Википедия - (HyperText Markup Language)язык гипертекстовой разметки документов. Большинство страниц в интернете содержат разметку страницы на этом языке. Данный язык интерпретируется браузерами, полученный в результате форматированный текст отображается на вашем мониторе компьютера или мобильного устройства.

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

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

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

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

Блог Евгения Несмелова! сайт Основы html и css для начинающих

Из каких тегов состоит любой html документ, что в него входит и где все это нужно прописать.

< html >

< body >

< h2 >< / h2 >

< p > Добропожаловатьнамойблог, сейчасвыпроходитеурокпоОсновамHTML . Есливампонравиласьданнаястатья, можетеподписатьсянаданныйблог, чтобполучатьновыестатьинасвойэлектронныйящик. < / p >

< h2 > БлогЕвгенияНесмелова! Nesmelov . ru Основыhtml иcss дляначинающих< / h2 >

< / body >

< / html >

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

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

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

Текст

< strong > < i > Текст< / strong > < / i >

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

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

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

Атрибут — изменяет тег. Например можно абзац выровнять по центру или по правому краю, задать так же расположение изображения на странице и так далее.

ВСЕГДА закрывайте теги, если вы его отрыли, обязательно нужно его закрыть. В противном случае будет ошибка и ваш документ будет некорректно отображаться на странице. Так же существуют исключения, про них не следует забывать.

Четко нужно понимать, что существует заголовок документа и его тело. Заголовок это все, что состоит в теге . Тело документа (), в теле документа состоит все содержимое страницы. Если возникает необходимость оставить участок кода для себя, тем самым заключить данные теги в комментарии, для этого используется тег . Все, что находится внутри такого тега, служит в роли комментария и не воспринимается браузерами.

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

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

Содержание

< head > Содержание< / head >

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

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

После обязательного тега title, идет необязательный, но так же не мало важный тег meta. Данный тег является одинарным. С помощью данного тега задается описание для страницы (description) и ее ключевые слова (keywords).

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

< meta name = "robots" content = "index, follow" >

< meta http - equiv = "refresh" content = "20" >

< meta http - equiv = "refresh" content = "5; url=http://сайт/" >

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

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

.base { width: 100px; background-color: #000; height: 150px; color: #fff; }

< style type = "text/css" >

Base {

width : 100px ;

background - color : #000;

height : 150px ;

color : #fff;

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

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

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

< link href = "css/style-lg.css" rel = "stylesheet" >

< link href = "css/style-md.css" rel = "stylesheet" >

< link href = "css/style-sm.css" rel = "stylesheet" >

С помощью тега script к документу можно подключить разные сценарии (скрипты). Присутствие закрывающего тега обязательно. Сам скрипт может располагаться в начале документа, внутри и в конце.

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

Заголовки страницы h1 h2 h3

Поехали дальше, мы видим тег , который так же открывается и закрывается. Данный тег обозначает основной заголовок текста, в большинстве случаев под заголовком H1 идет название страницы. На самом деле данных заголовком всего шесть. . Их так же используют в SEO, но это уже немного другая тема. Я обязательно выделю для этого одну статью и дам подробное описание для них, подписывайтесь на обновления блога, чтоб ничего не пропустить.

Наличие таких заголовком в статье сыграет важную роль при продвижении страницы. Кроме этого, ихнее использование дает вам четкую структуру страницы, ее заголовок, подзаголовки, выделения, подпункты и так далее. Всегда пользуйтесь ними и применяйте на практике. На многих CMS, например таких как WordPress, при написании текста, можно заметить «заголовок 1», "заголовок 2", "заголовок 3" и так далее. Именно они и отвечают за h1, h2 и h3.

Если вы пишите основной текст с нового абзаца, вы пишите тег

В начале и закрываете его в конце

. Обозначение абзаца в html равносильно создание нового абзаца в документе MS Word. Больше ничего нового в документ я не добавлял. Но, это еще далеко не все, что должно присутствовать в html документе. Посмотрим на еще один пример, описание будет немного позже.

HTML документ

Этот текст будет полужирным, а этот - ещё и курсивным

< ! DOCTYPE html >

< html >

< head >

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

< title > HTML документ< / title >

< / head >

< body >

< p >

< b >

< / b >

< / p >

< / body >

< / html >

Основные элементы Head и Title

В каждом документе присутствует элемент head и Title. Первый из них , который идет сразу после первого тега . В данном теге идет вся информация о странице, в нем так же заключается элемент . Title –информация о заголовке странице, другими словами название страницы, ее имя. Именно в тайтл вы указываете правильное название страницы, по которому пользователь будет искать вас через поисковую систему, очень важный момент. Оба элемента должны быть открыты и так же закрыты. Закрывается каждый элемент знаком «/». В итоге получается вот такая картинка.

Заголовок& \Содержание страницы

< / html >

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

Редактор Notepad++

Для работы с кодом используйте программку Notepad++. Она бесплатная, найти ее в интернете не составит труда. Очень удобная для восприятия любого кода, так же удобно показывается открывающийся тег и закрывающийся. Поддерживаем синтаксис более 40 языков программирования. Как раз то, что нужно для изучения основ html.

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

Элемент DOCTYPE

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

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

Коротко на понятном языке про основы html: Данная строчка говорит браузеру о том, что данный документ является XHTML версия 1.0, используется английский язык и вся эта каша расположена по данному адресу. Далее в теге meta указываем кодировку, которая используется. Чаще всего используется виндовс 1251.

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

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

Что необходимо запомнить с данного урока про основы html:

  • Почти все теги открываются и закрываются;
  • Начинается документ с тега ;
  • Наличие тега ;
  • Наличие тега ;
  • Четкая структура html документа.
  • Все главные страницы всегда должны называться словом index . Так принято и так все привыкли, без разницы какое будет расширение у файла, это может быть и html и php. Называется он всегда только так.

    Посмотрите видео про основы html от компании Webformyself.

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

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

    Печатный документ имеет строго заданные размеры страницы и полей. В нем точно заданы параметры шрифтов. Электронные документы, Web-страницы предназначены не для печати на принтере, а для просмотра на экране. Заранее неизвестно, на каком компьютере документ будут просматривать. Неизвестен размер окна обозревателя и неизвестно, какие имеются шрифты.

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

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

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

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

    Документы, созданные в формате HTML сохраняют в файлах с расширением html или htm.

    Теги html

    Управляющие конструкции языка HTML называются тегами. Теги – это наборы символов, с помощью которых выполняется разметка текста. Все теги записываются в угловых скобках, которые формируются символами «меньше» (). После открывающей скобки идёт ключевое слово, определяющее тег.

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

    Теги бывают парные и непарные . Для воздействия на часть документа (например, на абзац) используют парные теги: открывающий и закрывающий . Открывающий тег создаёт эффект, а закрывающий прекращает его действие. Закрывающие теги начинаются с символа косой черты (/).

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

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

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

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

    Язык HTML позволяет вводить в документ

    Рассказать друзьям