Загрузка...Html краткий курс
Основы HTML для начинающих
Данная статья не претендует быть исчерпывающим руководством по языку разметки документов HTML. В ней описываются основы HTML — базовые принципы, понятия и определения данной технологии, освоив которые, можно без труда двигаться дальше в изучении HTML кодинга.
Для изучения урока, скачайте архив с необходимыми файлами.
HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.
Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.
Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.
Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.
HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.
Да, простой набор и форматирование текста в офисных приложениях не имеют ни чего общего с программированием. Но наблюдательный читатель заметит важную деталь — в текстовом процессоре мы набираем, редактируем и форматируем текст и картинки с помощью визуальных кнопочек и меню, но почему же HTML код пишется вручную? Зачем изучать так много технических деталей написания разметки для документа?
На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.
Этакий Word для HTML. Такие визуальные редакторы называются:
WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.
Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.
Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:
- Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
- HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки
- , редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
- Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
- Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
- Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.
Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.
Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.
Структура документа HTML
Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.
Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?
Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:
Обратите внимание, документы HTML имеют расширение .html.
Итак, по порядку из примера.
— тип документа (доктайп)
Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.
Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.
В принципе, углубляться в изучение типов документа нет ни какого смысла, ибо с выходом HTML5 данная конструкция стала стандартом. Просто вставляйте ее в начало документа каждый раз, когда начинаете верстать макет сайта.
— начало документа
Первый тег, который мы встречаем после доктайпа, это .
HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.
Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги — не такая уж и большая нагрузка на мозг.
Итак, разметка документа начинается с тега и заканчивается закрывающим тегом . Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, ,
Тег является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.
Далее, мы видим тег , который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:
Тег предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.
Данный тег обязателен в документе.
Тег — заголовок документа
Заголовок является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег должен находиться в теге . Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.
Метатег
Метатег, содержащий информацию о кодировке документа. Очень желательно указывать данный тег во всех создаваемых документах для правильного отображения. Отсутствие данного тега может привести к тому, что вместо слов, на странице будут отображены неведомые символы и текст перестанет быть разборчивым и человекопонятным.
Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге . Метатеги не являются обязательными в структуре HTML документа.
Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.
Фавиконка (favicon)
Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.
CSS стили документа
Подключает к документу CSS файл со стилями оформления HTML.
CSS — каскадные стили оформления HTML документа. У каждого тега, который находится в теге , имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция
подключает внешние файлы к документу HTML, в том числе и стили CSS.
Основы html для начинающих на понятном языке
Основы html для начинающих, что сейчас должен знать каждый начинающий вебмастер или блогер. Если вы хотите научиться создавать элементарные сайты, понимать сам код, знать, что за чем стоит и должно идти, без знаний основ языка хтмл этого сделать просто невозможно. На своем блоге у меня будет целая цепочка статей, которые я посвящу этой теме от А до Я, опишу каждый тег, который присутствует в документе, что он обозначает и как его правильно использовать.
Если не знать самого элементарного, дальше вам путь закрыт. Я считаю, что каждый человек, который решил заниматься разработкой и созданием сайтов, должен знать и понимать основы, из чего состоит сам сайт, как он работает и что происходит в самом коде.
Языков программирования конечно не мало, все они по-своему сложные, но есть такие, которые нужно знать обязательно. Если вы хотите красиво оформить письмо для отправки по почте, у вас имеется своя группа Вконтакте, группа в других социальных сетях, тот же канал youtube, вам необходимо ковыряться в коде на любом из движков сайта, базовые понятия вы просто должны знать.
Навел только несколько примеров, на самом деле сейчас эти знания все чаще и чаще применяются в интернете. Я больше практик чем теоретик, поэтому в моих статьях в данной рубрике я буду показывать вам свои примеры, как и что я делал, step by step. Буду выкладывать как примеры страниц, так и целые сайты.
Html документ это самый простой текстовый документ, язык тегов, с которым вы сталкиваетесь каждый день на просторах интернета. Теги описывают структуру документа. Оформляются теги угловыми скобками, внутри которых пишется название тега. Браузер просматривает структуру документа, выстраивает ее и отображает уже по своим инструкциям на вашем мониторе, если вы конечно все сделали правильно.
Весь этот процесс начинается перед тем, как вы уже видите готовую картинку. Браузеры обрабатывают документ последовательно, от самого начала и до конца. Включая в себя полностью все, что должно быть на странице. Таблицы, картинки, скрипты и так далее, кроме это включая в себя стили CSS.
Основы для начинающих
Что такое html — если посмотреть, что пишет Википедия — (HyperText Markup Language) язык гипертекстовой разметки документов. Большинство страниц в интернете содержат разметку страницы на этом языке. Данный язык интерпретируется браузерами, полученный в результате форматированный текст отображается на вашем мониторе компьютера или мобильного устройства.
Данный язык по своей сути очень легкий и доступный в обучении. Выучить и понять его основы может каждый желающий человек. Для использования такого языка нужно знать и применять дескрипторы, которые еще называются тегами. Именно с помощью тегов и создается документ.
Из чего должна состоять структура документа, какие теги должны присутствовать. Давайте разберем все на одном маленьком примере. Я написал некоторый текст в MS Office и показал его вот на этом скриншоте.
Чтобы отобразить данный текст в браузере так же само, как он был написан в документе, для этого нужно к нему добавить разметку страницу, которая включает в себя некоторые теги. Для начала посмотрите на них, дальше я опишу каждый, кто за что отвечает.
→ BlogGood.ru ←
Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…
Основы HTML для начинающих. Урок-1
Всем привет. Я очень рад, что вы решили покорить вершины основ HTML и это правильный выбор. Ведь перед созданием первого сайта нужно знать основы HTML. Тем более, вам еще не раз придется сталкиваться с HTML кодировкой на веб-сайте. Очень рекомендую ознакомиться с уроками HTML для начинающих на моем блоге, и я гарантирую, что после прохождения этого курса, вы сами с легкостью сможете создать веб-страницу или даже веб-сайт.
Приступим! Для начала выясним, что такое HTML?
HTML – (от англ. H yper t ext M arkup L anguage ) это язык разметки гипертекста. Он впервые был разработан британским учёным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах. HTML был предназначен только для разметки текста, картинок и таблицы на веб-страницах. Теперь в HTML документ могут вставляться дополнительно каскадные таблицы стилей (CSS) и языки программирования такие, как JavaScript, VBScript.
HTML не является языком программирования, он предназначен только для разметки текстовых документов.
Для изучения HTML вам достаточно иметь на компьютере Браузер и Стандартный Блокнот или бесплатный текстовый редактор Notepad++.
Чтобы открыть Стандартный блокнот, сделайте такие действия на компьютере: «Пуск» => «Программы» => «Стандартные» => «Блокнот» .
Если вы слышали о программах, которые упрощают работу по написанию HTML кода (Microsoft FrontPage, Adobe Dreamweaver), то я не советую пользоваться ими на данном этапе обучения. Набивайте руку в стандартном блокнотике или в текстовом редакторе Notepad++, а когда пройдете этот курс, то сможете пользоваться программами для ускорения. Подписывайтесь на обновления моего блога и читайте, как пользоваться программами Microsoft FrontPage, Adobe Dreamweaver.
Из чего состоит HTML документ?
Для лучшего понимания я подготовил пример. Рассмотрите внимательно рисунок:
1). Любой HTML документ начинается с такой строки:
Этой строчкой мы говорим браузеру, что наш HTML документ соответствует международной спецификации версии 4.01. Благодаря этой строчке ваша страничка будет выглядеть на всех браузерах одинаково.
Запоминать эту строчку не обязательно, HTML документ будет работать и без нее. Это для того, чтобы вы просто были в курсе, что это такое.
2). и – это начало и конец документа.
3). и – голова документа. Здесь часто вставляются дополнительные служебные теги, одним из этих тегов является . Об остальных служебных тегах вы узнаете в дальнейших уроках, на данном этапе обучения этой информации достаточно .
4). и – заголовок документа.
Этот заголовок будет отображаться в браузере:
Краткий курс лекций. Введение в HTML.
При пользовании «Инфоуроком» вам не нужно платить за интернет!
Минкомсвязь РФ: «Инфоурок» включен в перечень социально значимых ресурсов .
Введение в HTML
Основные понятия
Данный язык представляет собой довольно простой набор команд, описывающий структуру документа. Язык HTML позволяет выделить в документе отдельные элементы – заголовки, абзацы, таблицы и т.д. Файлы с текстом кода на языке HTML имеют расширение . html или . htm .
HTML является описательным языком разметки документов, в нем используются указатели разметки ( теги ).
Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта (/) (например, для тега стиля шрифта — курсив закрывающая пара представляет собой , для тега заголовка закрывающей парой будет ТIТLЕ>). Атрибуты прописываются в начальных тегах. Конечные теги никогда не содержат атрибутов. Теги определяют область действия правил интерпретации текстовых документов.
Для краткости и образности мы будем в ряде случаев вместо словосочетания «элемент разметки» применять термин «контейнер».
Общая схема построения контейнера в формате HTML может быть записана в следующем виде: «контейнер»= содержание контейнера «имя тега»>
Структура Web -страницы
Структура HTML-документа позволяет задействовать вложенные друг в друга контейнеры. Собственно, сам документ — это один большой контейнер, который начинается с тега и заканчивается тегом . Он указывает браузеру, что данный текст представляет собой HTML -документ и, содержит в себе теги, которые браузер должен выявить, распознать и правильно интерпретировать.
Типичная Интернет-страница состоит из двух частей: головная часть ( HEAD ) и тела ( BODY ). Эту базовую структуру в простейшем виде можно представить следующим образом:
Элемент является самым внешним, так как между его начальным и конечным тегами должна находится вся страница. Этот элемент можно рассматривать как формальность.
Область заголовка W е b -страницы. Служит для формирования общей структуры документа. Должен включать элемент TITLE и допускает вложение элемента META .
TITLE >
Элемент разметки TITLE служит для именования документа в World Wide Web.
Синтаксис контейнера TITLE в общем виде выглядит следующим образом:
Заголовок не является обязательным контейнером документа. Его можно опустить. Роботы многих поисковых систем используют содержание элемента TITLE для создания поискового образа документа.
Это собственно тело документа. Это та произвольная часть документа, которую разрабатывает автор страницы и которая отображается браузером. Конечный тег этого элемента располагается в конце html -кода. В этом элементе могут использоваться все элементы, предназначенные для дизайна web -страницы.
Создание Web -страницы
Так как все html -документы имеют одинаковую структуру, рекомендуется создать общий шаблон, в котором будут меняться только название (содержимое тега … TITLE >) и содержательная часть документа (содержимое контейнера … BODY >.
Создавать html -код лучше в программе Блокнот:
1. Создать текстовый документ (программа Блокнот).
2. Выбрать Файл/Сохранить как в строке имя файла ввести: имя_документа. htm и нажимает на кнопку Сохранить .
Параметры страницы
Описание тегов тела документа следует начать с тега . В отличие от тега , тег имеет атрибуты. Они задают параметры, распространяющиеся на весь документ, такие, как цвет фона, шрифта, гиперссылок и размеры полей страницы.
В теге можно задать свои цветовые параметры документа, используя атрибуты:
vlink =цвет пройденных гипертекстовых ссылок
link =цвет гипертекстовой ссылки
alink =цвет активной гипертекстовой ссылки
Пример: , то цвет фона будет белым, текст будет синим, ссылки — зелеными, а пройденные ссылки станут красными.
Цвет можно задать просто написав его название на английском языке, или используя RGB -код, который состоит из # и шестизначного кода цвета.
В теге можно задать также поля страницы.
При выводе Web -страницы на экран браузер автоматически оставляет небольшие поля (примерно 10 пикселе) вдоль левого и вдоль верхнего краев рабочего окна.
Если же требуется изменить размеры полей или убрать их совсем, нужно включить в тег атрибуты left; line-height: 150%»> Например, тег Абзац … P >
Элемент абзаца ( paragraph ) применяется для разделения текста на параграфы. Он позволяет использовать только начальный тег, так как следующий элемент Р обозначает не только начало следующего абзаца, но и конец предыдущего.
Браузер использует для отделения одного абзаца от другого пустую строку.
В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тег. В некоторых случаях начальных тег удобно ставить в конце строки: он не только обозначит конец абзаца, но и выполнит функцию разрыва строки.
Текст первого абзаца.
Вместе с элементом абзаца можно использовать атрибут выравнивания align :
align = left – выравнивание по левому краю;
align = right – выравнивание по правому краю;
align = center – выравнивание по центру;
align = justify – выравнивание по ширине.
Например, для форматирования абзаца по ширине следует использовать такую конструкцию:
Текст абзаца выровнен по правому краю
Обрыв строки
Элемент обеспечивает принудительный переход на новую строку. Он имеет только начальный тег. Отличие тега от тега состоит в том, что браузер не создает пустой строки между строками.
Элемент разметки
Тег (Nо Вrеаk, без обрыва) дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в теги , не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки.
Авторское форматирование
Элемент для обозначения текста, отформатированного заранее ( preformatted ). Подразумевается, что текст будет выведен в том виде, в котором он записан в HTML -коде – со всеми пробелами и концами строк. Этот удобно при показе сложных страниц. Пример:
Основные средства форматирования текста
Для форматирования текста HTML – документов предусмотрена целая группа тегов.
Заголовки …Н n >
Заголовки в тексте рекомендуется оформлять стандартными стилями. Для выделения заголовков используются парные тэги от
Страница с кодом будет показана так:
Html краткий курс
Учебник по Html для чайников — Оглавление
Инструментарий. Основные понятия.
