- •Основы html для начинающих
- •Элементы контейнера head.
- •Использование комментариев.
- •Meta теги html
- •Основные мета теги в html.
- •Форматирование текста в html
- •Теги форматирования текста в html.
- •Использование тега pre.
- •Заголовки.
- •Выравнивание элементов.
- •Форматирование шрифта.
- •Гиперссылки в html
- •Правила использования гипертекстовых ссылок.
- •Графика в html
- •Использование графики на html страницах.
- •Как создать страницу html
- •Добавление изображений к html странице.
- •Форматирование изображений.
- •Использование фона в html.
- •Из примеров хорошо видно, как браузер тиражирует изображение. Горизонтальная линия.
- •Html списки
- •Html формы
- •Создание html форм.
- •Основные элементы форм.
- •Текстовые поля.
- •Поле пароля.
- •Переключатели (радиокнопки).
- •Флажки (checkbox).
- •Командные кнопки.
- •Поле выбора файла.
- •Раскрывающийся список выбора.
- •Развернутый список выбора.
- •Фреймы в html
- •Подключение и выполнение javascript
Учебное пособие по языку программирования HTML
Введение в HTML» – первый урок учебника HTML. Здесь мы с вами поговорим об основных правилах синтаксиса языка, узнаем, что такое теги и какими они бывают. Также мы с вами разберем структуру html документов. Введение в HTML станет для вас самым первым шагом на пути к созданию собственного сайта.
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986—1991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов — дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.
Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, которую вы на данный момент читаете, предназначен для создания в документах самых обычных таблиц, но, как можно убедиться, здесь нет ни одной таблицы. С течением времени основная идея платформонезависимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.
Элементы разметки HTML.
HTML, являясь языком разметки состоит из так называемых тегов (элементов разметки), которые ,в свою очередь, могут быть:
полные
неполные
символьные
Полный элемент разметки, также называемый контейнером, имеет открывающий и закрывающий теги, неполный – только открывающий, а символьные элементы разметки представляются в виде символьных кодов и вы можете видеть их в таблице ниже:
Код символа |
Именное значение |
Символ |
" |
" |
" |
& |
& |
& |
< |
< |
< |
> |
> |
> |
  |
  |
пробел |
¡ |
¡ |
¡ |
¢ |
¢ |
¢ |
£ |
£ |
£ |
¤ |
¤ |
¤ |
¥ |
¥ |
¥ |
¨ |
¨ |
¨ |
© |
© |
© |
« |
« |
« |
® |
® |
® |
± |
± |
± |
» |
» |
» |
Основным назначением HTML тегов является указание области действия тех или иных правил разметки документов. Большая часть HTML тегов состоит из двух частей: открывающий тег <...> и закрывающий тег </...>.
Например:
<strong>текст</strong>
<div> ........ </div>
Также в HTML существуют теги, не требующие закрывающего элемента. Это как правило элементы вставки чего–либо или служебные элементы:
<img> – тег вставки изображения
<br> – тег вставки разрыва строки
<hr> – тег вставки горизонтальной линии
Стоит принимать во внимание, что отсутствие закрывающих тегов не будет являться критическим с точки зрения отображения документа интернет–браузерами, т.к. многие браузеры не обращают особого внимания на правильность HTML кода. Но если неправильный код может и не помешать браузерам отобразить ваш документ, то поисковым машинам это уж точно помешает, причем очень сильно.
Так что изначально учитесь писать грамотный HTML код, закрывая все теги, требующие закрытия.
Структура HTML документа.
Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере, из следующих контейнеров:
<HTML> <HEAD> </HEAD> <BODY> </BODY> <HTML>
Внутри контейнера <HTML></HTML> расположен весь документ HTML, включая все служебные комманды и основной контент, поэтому выход за границы этого тега очень нежелателен.
Внутри контейнера <HEAD></HEAD> располагаются служебные комманды, которые не выводятся на экран, зато дают браузеру и поисковым машинам служебную информацию о документе, которая помогает правильно отобразить и индексировать его.
Внутри контейнера <BODY></BODY> расположенна вся информация, которую необходимо вывести на экран.
В какой программе удобно писать HTML.
И в заключение я хотела бы обсудить тему написания WEB документов. В принципе веб-документ является простой последовательностью символов, поэтому его можно написать абсолютно в любом редакторе текста, затем сохранив с расширением .htm (.html, .xhtml, .xml и т.д.) и вывести его на экран браузером.
Так то оно так, но удобно ли это?
Сама я, как и большинство веб-мастеров, пользуюсь редактором кода Dreamweaver. На мой взгляд, почти идеальный редактор кода: имеет отличную подсветку синтаксиса, приятный графический интерфейс и вообще множество полезного и удобного дополнительного функционала. Но не буду навязывать вам своего мнения, основная идея, которую я хотел бы до вас донести заключается в том, что существует множество профессиональных редакторов кода (как платных, так и абсолютно бесплатных), которые позволяют в разы, если не в десятки раз увеличить скорость создания качественных веб-страниц и автоматизировать рутинные процессы.
Основы html для начинающих
Основы HTML для начинающих» – второй урок учебника HTML. Речь здесь пойдет об основных особенностях отображения и разметки текста. В данном уроке мы вплотную начнем работать с элементами разметки, предоставляемыми этим языком и вы на себе поймете, что язык действительно прост.
Основы отображения текста.
Разметка текста, принятая во могих популярных текстовых редакторах, таких как Microsoft Word или БЛОКНОТ, не может быть правильно интерпретированна в рамках спецификации HTML.
Вызванно это значительными различиями внутренней архитектуры вывода этих языков.
Основными элементами разметки языка HTML можно считать тег параграфа <p></p>, тег разрыва строки <br> и теги заголовков <h1></h1>,<h2></h2> и т.д. Количество пробелов между символами не может превышать 1-го. Если очень необходимо установить более одного пробела необходимо использовать символьный элемент -  . Рассмотрим сказанное на примере:
<p>Это простое предложение, которое является параграфом.</p>
<h1>Это заголовок уровня H1</h1>
<p>Выводим несколько пробелов</p>. |
Это простое предложение, которое является параграфом. Это заголовок уровня H1 Выводим несколько пробелов . |
Элементы контейнера head.
Контейнер HEAD - очень важный элемент любого web-документа. В нем задаются параметры, которые позволяют браузеру и серверу правильно определить кодировку документа. Также в этом контейнере размещается множество дополнительных параметров, которые необходимы для установки связи с внешними файлами, для работы с поисковыми системами, для подтверждения прав собственности на сайт и т.д.
Внутри контейнера <HEAD> могут располагаться:
TITLE (заголовок страницы);
BASE (каталог для сайта по умолчанию);
META (служебные теги);
LINK (ссылки страницы);
STYLE (внутренний лист стилей);
SCRIPT (скрипты).
Изучая основы html для начинающих первым делом необходимо разобраться с элементами контейнера <head>. Должен сказать, что большинство учебников, посвященных изучению HTML начинается с описания именно этого контейнера, в то время, как читатель еще не достаточно подготовлен. Сегодня мы бросим беглый взгляд на элементы этого контейнера, не останавливаясь на них подробно. Все станет для вас намного понятней по мере изучения этого учебника.
Title.
Title – САМЫЙ ВАЖНЫЙ ЭЛЕМЕНТ РАЗМЕТКИ. Переоценить значимость этого тега практически невозможно. Заголовок страницы играет огромную роль в индексировании страницы поисковыми машинами. Именно заголовок страницы используется в качестве ссылки в строке выдачи результата ПМ. Оптимизация title является наиболее важным фактором внутренней оптимизации сайта.
Title играет немаловажную роль при программировании на JavaScript, определяя зону видимости переменных.
Перечислять достоинства этого элемента разметки можно до бесконечности. В общем никогда не забывайте придумывать для каждой страницы уникальный тег заголовка.
Base.
При создании web-страниц вам постоянно придется ставить ссылки между страницами разных уровней вложенности. Далеко не всегда удобно каждый раз писать абсолютные адреса вида:
<a HREF="http://www.eltisbook.ru/something.html">
когда их можно заменить относительными:
<a HREF="../something.html">
,что дословно означает – «НА УРОВЕНЬ ВЫШЕ ОТ БАЗОВОГО РАСПОЛОЖЕН ФАЙЛ something.html»
Так вот базовым, по умолчанию, всегда принимается корневой каталог сайта, но вы без труда сможете это изменить посредствам тега <BASE>:
<BASE HREF="http://www.eltisbook.ru/html">
Данная запись означает, что в качестве базового каталога мы выбрали html, который расположен на уровень выше от корневого.
Link.
Служит для построения дополнительных, постоянных внешних связей документа:
<LINK REL="stylesheet" href="style.css" TYPE="text/css">
REL определяет тип связи между документами, а TYPE определяет тип подключаемого документа. Для разных типов документов существуют разние методы интерпретации, поэтому следите за правильностью ввода.
Style.
Тег <style> позволяет задать внутреннюю таблицу стилей внутри тела html документа. Этот метод уже мало где используется ввиду дополнительного загромождения кода и тем самым, увеличения веса и времени загрузки документа. Но если вам где-нибудь понадобится этот метод, знайте:
<STYLE TYPE=text/css> ..описание стилей.. </STYLE>
Script.
Этот элемент разметки служит для использования и загрузки скриптов:
<SCRIPT LANGUAGE="JavaScript" SRC=jvscript.js> ..код.. </SCRIPT>
Meta.
Мета-теги содержат служебную информацию о документе.
Использование Мета–тегов – достаточно обширная тема, требующая отдельного урока, поэтому об использовании META–тегов мы поговори в следующий раз.