HTML-код - разметка веб-страницы, выполненная с помощью языка HTML и включающая специальные символы (теги) , используемые браузером для конструирования дизайна на основе текстового кода. Данный язык отвечает за то, как именно будет отражаться гипертекст на страницах сайта.
HTML (HyperText Markup Language) - язык разметки (маркировки) гипертекста. Гипертекст своим развитием обязан интернету, хоть и создавался он совсем не для того. HTML дает возможность производить переход от одной части текста к другой, и, что замечательно, эти части могут храниться на совершенно разных компьютерах.
Html является именно языком разметки, а не программирования . В данном языке нет никаких логических функций и произвести какие-либо математические расчеты на нем невозможно. Страницы HTML имеют расширение.html или.htm и образовываются браузерами-IE, Mozilla, Firefox, Google Chrome, Yandex Chrome, Opera и др.
Структура документа HTML :
1. Первое, что идет в документе HTML-указание версии(первая строка). Для корректной работы следует указывать данную строку при верстке веб-страницы.
3. затем идет область верхней части сайта (шапки). Для этого служит тег
. В шапке мы указываем название нашей страницы, помещая заголовок страницы между тегами4. Мета-тег «description» - краткое содержание страницы, предназначен для поисковых систем. Данный тег является важным для поисковой оптимизации и его необходимо заполнять.
5. Мета-тег «keywords»- ключевые слова, которые могут встречаться на странице. Данный тег также предназначен для поисковиков. В настоящее время этот тег редко используется.
6. Тело страницы открывается тегом
и закрывается, соответственно, тегом . В теле веб-страницы размещается, как правило, основной контент-текст, видео, аудио и другая информация.Что такое CSS-файлы, и зачем они нужны? Как создается CSS-файл?
Cascading Style Sheets (а именно так расшифровывается аббревиатура CSS) или каскадные таблицы стилей – язык внешнего оформления веб-страниц, написанных на языке разметки HTML.
Зачем нужен CSS.
С целью облегчить жизнь веб-мастеру и улучшить дизайн сайтов появились CSS таблицы, отвечающие за оформление веб-страниц. Появление CSS позволило разделить содержание и оформление веб-документов. Это ускорило процесс создания сайтов благодаря наличию единых стилей оформления для большого количества страниц.
Кроме того, каскадные таблицы стилей дают возможность быстро изменять оформление веб-ресурса или вносить в него правки. Так что с помощью одного файла CSS теперь можно быстро управлять оформлением огромного количества веб-страниц.
Важное преимущество таблиц стилей – оформление веб-страницы для разных устройств. Стоит иметь ввиду, что для разных устройств существуют разные таблицы стилей. То есть сразу создается несколько дизайнов (для печати, просмотра на экране компьютера, мобильных устройствах). В зависимости от того, на каких устройствах планируется вывод сайта, CSS пишется для каждого устройства один раз при создании сайта.
Без CSS оформление пришлось бы прописывать для каждой отдельной веб-страницы. Теперь же каждая страница сайта просто ссылается на CSS файл. Чтобы изменить что-либо в оформлении нашего сайта, надо внести изменения в код файла CSS.
Таким образом, CSS обладает огромными возможностями в плане оформления веб-ресурсов. И если вы планируете освоить сайтостроение, без знаний CSS вам не обойтись. Синтаксис CSS таблиц несложный для освоения. Так что смело приступайте к его изучению, чтобы научиться делать не только содержательные, но и красивые сайты.
Как создается CSS-файл:
Файл стилей CSS- это обычный текстовый файл, точно такой же, какой мы можем создать в любом текстовом редакторе «Блокнот», «MS Word» и тд
Единственное, что отличает файл стилей от других текстовых документов - это его расширение, которое имеет вид *.css.
Таким образом, можно создать файл стилей CSS просто изменив расширение текстового файла:
Способ 1. Изменив просто расширение текстового файла.
открыть любой текстовый редактор, например «Блокнот». В главном меню выбираем файл –сохранить как и сохраняем текстовый файл с разрешением.txt. Теперь нужно поменять расширение этого файла с *.txt на *.css . Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css. После этого мы получаем файл стилей CSS.
Способ 2. создание файла стилей с помощью редактора кода Dreamweaver. В ней специальные функции для создания файлов стилей CSS. После открытия программы появится главное меню, в котором можно выбрать создание файла CSS. После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…» Аналогичный процесс создания файлов CSS есть и в других редакторов кода.
Общая структура HTML документа.
Основы HTML (Hypertext Markup Language)
Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы - в данном случае, html-документа. Такая структура описывает очередность следования ряда обязательных блоков, которые содержат непосредственно программный код.
Директивы HTML называются «теги» (от англ, tag - отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как <тег> . Все объекты, не заключенные в угловые скобки , интерпретатор воспринимает как текстовые элементы , отображая их на экране компьютера «как есть».
Структура документа HTML выглядит следующим образом:
Документ HTML
Заголовок
У HTML имеется еще одна значительная особенность, отличающая его от других языков программирования: практически все теги данного языка, за исключением некоторых отдельно оговоренных случаев, - парные. Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/» Все, что расположено между открывающими закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу. В общем виде программная строка HTML с открывающим и закрывающим тегами выглядит так:
<тег> обрабатываемое значение тег>
Данное свойство HTML позволяет использовать принцип вложения одного тега в другой, когда обрабатываемым значением одной команды может служить другая команда. Вот простой пример вложения двух тегов друг в друга:
<тег1> <тег2> обрабатываемое значение тег2>тег1>
При роботе с кодом HTML необходимо запомнить одно простое правило:
если где-то в тексте программы встречается открывающий тег, обязательно должен присутствовать и закрывающий. Несоблюдение этого правила вызовет ошибку при обработке такого документа интерпретатором броузера.
Основной, глобальной конструкцией внутреннего кода Web-страницы является «Документ HTML», для определения которой существует специальная команда, призванная «объяснить» броузеру, что он имеет дело именно с документом HTML, а не с текстовым или, например, графическим файлом. Такая команда называется «тег верхнего уровня» и записывается как:
<НТМL> Содержимое НТМL>
Тег верхнего уровня парный, причем его содержимое как раз и есть весь код HTML, составляющий документ. Открывающий тег записывается самой первой строкой html-документа, а закрывающий - самой последней.
Следующим элементом является «Заголовок документа» . Заголовок Web-страницы содержит исчерпывающую информацию о самом документе, а иногда также специальные директивы транслятора, подсказывающие встроенному в броузер интерпретатору HTML правила, по которым следует обрабатывать составляющий страницу код. Cодержимое заголовка не отображается в броузере и не влияет на внешний вид документа. Это служебная информация, которая необходима для корректной работы броузера. Синтаксис тега заголовка в общем виде выглядит так:
Содержимое
Раздел HEAD следует в html-документе непосредственно за тегом и является второй обязательной командой, которую необходимо включать в код Web-страницы.
«Внешний заголовок» является вложенной командой тега . Мнемоника внешнего заголовка записывается следующим образом:
<ТITLE> Внешний заголовок
Внешний заголовок отображается в верхнем поле броузера в качестве названия страницы при ее открытии
. Значение тега
Последняя структурна составляющая кода web-страницы - «Тело документа» . Тело документа, описываемое тегами , включает в себя весь основной код разметки страницы, который и определяет отображение html-документа на экране монитора. Основной текст, иллюстрации, элементы навигации и все, что вы хотите продемонстрировать посетителям вашего сайта, размещается внутри данного тега.
Таким образом, обязательные элементы кода документа HTML выглядят так:
<ТITLE> Название страницы
Теги и атрибуты.
Как отмечалось выше, тег - это некая команда HTML, указывающая интерпретатору броузера, каким образом он должен обрабатывать соответствующее каждой конкретной директиве значение.
Тег может иметь атрибут
(или не иметь его). Например, тег верхнего уровня не имеет атрибутов, а в строке создания новой таблицы В общем виде синтаксис записи тега HTML в совокупности с его атрибутами выглядит следующим образом: <ТЕГ ИМЯ _ АТРИБУТА-1 = "ЗНАЧЕНИЕ" ИМЯ _ АТРИБУТА-2 = "ЗНАЧЕНИЕ" ...ИМЯ _ АТРИБУТА-n = "ЗНАЧЕНИЕ">
В данном примере первый атрибут тега <ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ-1; "ЗНАЧЕНИЕ-2"; ЗНАЧЕНИЕ-3">
Спецификация языка HTML позволяет опускать кавычки
для следующих видов атрибутов: Атрибуты, записываемые только строчными или заглавными символами латинского алфавита и не включающие иных символов, например, цифр. Атрибуты, состоящие только из цифр от 0 до 9. Атрибуты, обозначающие промежутки времени. Например, запись атрибутов BORDER="1" или ALIGN="CENTER" допустимо представить как BORDER=1 и ALIGN=CENTER. Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы,
которые не меняются от вида и направленности сайта. В примере 4.1 показан
код простого документа, содержащего основные теги. Пример 4.1. Исходный код веб-страницы
Первый абзац. Второй абзац. Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под
именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть
файл (Ctrl+O)
. В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1. Рис. 4.1. Результат выполнения примера
Элемент
предназначен для указания типа текущего документа -
DTD (document type definition, описание типа документа). Это необходимо, чтобы
браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML
существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText
Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но
различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал,
согласно какому стандарту отображать веб-страницу и необходимо в первой строке
кода задавать
. Существует несколько видов
, они различаются в зависимости
от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные
типы документов с их описанием. Разница между строгим и переходным описанием документа состоит в различном
подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения
спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится
к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать
предпочтительнее. Например, в строгом HTML и XHTML непременно требуется наличие тега В дальнейшем будем применять преимущественно строгий
, кроме
случаев, когда это оговаривается особо. Это позволит нам избегать типичных
ошибок и приучит к написанию синтаксически правильного кода. Часто можно встретить код HTML вообще без использования
,
веб-страница в подобном случае все равно будет показана. Тем не менее, может
получиться, что один и тот же документ отображается в браузере по-разному при
использовании
и без него. Кроме того,
браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется»,
т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы
не произошло подобных ситуаций, всегда добавляйте
в начало документа. Тег
определяет начало HTML-файла, внутри него хранится заголовок
( Заголовок документа, как еще называют блок
Тег
является универсальным и добавляет целый класс возможностей,
в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять
кодировку страницы, добавлять ключевые слова, описание документа и многое другое.
Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.
Тег Рис. 4.2. Вид заголовка в браузере Тег Обязательно следует добавлять закрывающий тег
, чтобы показать,
что блок заголовка документа завершен. Тело документа
HTML предлагает шесть текстовых заголовков разного уровня, которые показывают
относительную важность секции, расположенной после заголовка. Так, тег
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием.
Хотя такой текст пользователь не увидит, он все равно будет передаваться
в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки. Как и любой другой язык программирования, HTML подразумевает некую стандартизированную структуру построения программы, в данном случае - html-документа. Такая структура описывает очередность следования ряда обязательных блоков, которые содержат непосредственно программный код. Директивы HTML называются «теги» (от англ. tag - отметка). Теги HTML заключаются в угловые скобки, синтаксис их записи в общем виде выглядит как <тег>
. Все объекты, не заключенные в угловые скобки
, интерпретатор воспринимает как текстовые элементы
, отображая их на экране компьютера «как есть». Структура документа HTML выглядит следующим образом (рис. 13). Рис. 13. Структура HTML документа У HTML имеется еще одна значительная особенность, отличающая его от других языков программирования: практически все теги
данного языка, за исключением некоторых отдельно оговоренных случаев, парные.
Такая пара состоит из «открывающего» и «закрывающего» тега, которые отличаются лишь наличием в последнем символа «/» Все, что расположено между открывающим и закрывающим тегом, обрабатывается интерпретатором согласно алгоритму, присвоенному данному конкретному тегу. В общем виде програм-мная строка HTML с открывающим и закрывающим тегами выглядит так: <тег> обрабатываемое значение тег>
Данное свойство HTML позволяет использовать принцип вложения одного тега в другой, когда обрабатываемым значением одной команды может служить другая команда. Вот простой пример вложения двух тегов друг в друга: <тег1> <тег2> обрабатываемое значение тег2>тег1>
При работе с кодом HTML необходимо запомнить одно простое правило: если где-то в тексте программы встречается открывающий тег, обязательно должен присутствовать и закрывающий.
Несоблюдение этого правила вызовет ошибку при обработке такого документа интерпретатором броузера. Основной, глобальной конструкцией внутреннего кода Web-страницы является «Документ HTML». Для определения этой конструкции существует специальная команда, призванная «объяснить» броузеру, что он имеет дело именно с документом HTML, а не с текстовым или, например, графическим файлом. Такая команда называется «тег верхнего уровня»
и записывается как: <НТМL> Содержимое НТМL>
Тег верхнего уровня парный, причем его содержимое как раз и есть весь код HTML, составляющий документ. Открывающий тег записывается самой первой строкой html-документа, а закрывающий - самой последней. Следующим элементом является «Заголовок документа»
. Заголовок Web-страницы содержит исчерпывающую информацию о самом документе, а иногда также специальные директивы транслятора, подсказывающие встроенному в броузер интерпретатору HTML правила, по которым следует обрабатывать составляющий страницу код. Cодержимое заголовка не отображается в броузере и не влияет на внешний вид документа.
Это служебная информация, которая необходима для корректной работы броузера. Синтаксис тега заголовка в общем виде выглядит так: Содержимое
Раздел HEAD
следует в html-документе непосредственно за тегом
и является второй обязательной командой, которую необходимо включать в код Web-страницы. «Внешний заголовок»
является вложенной командой тега
. Мнемоника внешнего заголовка записывается следующим образом: <ТITLE> Внешний заголовок
Внешний заголовок отображается в верхнем поле броузера в качестве названия страницы при ее открытии
. Значение тега Последняя структурная составляющая кода web-страницы - «Тело документа»
. Тело документа, описываемое тегами
, включает в себя весь основной код разметки страницы, который и определяет отображение html-документа на экране монитора. Основной текст, иллюстрации, элементы навигации и все, что вы хотите продемонстрировать посетителям вашего сайта, размещается внутри данного тега. Таким образом, обязательные элементы кода документа HTML выглядят так:
<ТITLE> Название страницы
выражение «BORDER="1" WIDTH="100"»
является атрибутом тега
.
- это параметр "BORDER"
, второй атрибут - параметр "WIDTH"
, а их значения составляют соответственно "1" и "100". Значения атрибутов заключаются в прямые кавычки, записываемые символом «"»
. Если внутри атрибута какого-либо тега встречается другое значение, заключенное в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве «внутренних» кавычек рекомендуется использовать одинарные, записываемые символом «"»
. В общем случае такое выражение выглядит следующим образом:
Заголовок
Табл. 4.1. Допустимые DTD
DOCTYPE
Описание
HTML 4.01
Строгий синтаксис HTML.
Переходный синтаксис HTML.
В HTML-документе применяются фреймы.
HTML 5
В этой версии HTML только один доктайп.
XHTML 1.0
Строгий синтаксис XHTML.
Переходный синтаксис XHTML.
Документ написан на XHTML и содержит фреймы.
XHTML 1.1
Разработчики XHTML 1.1 предполагают,
что он постепенно вытеснит HTML. Как видите, никакого деления на виды
это определение не имеет, поскольку синтаксис один и подчиняется четким
правилам.
Заголовок
представляет
собой наиболее важный заголовок первого уровня, а тег
служит
для обозначения заголовка шестого уровня и является наименее значительным.
По умолчанию, заголовок первого уровня отображается самым крупным шрифтом
жирного начертания, заголовки последующего уровня по размеру меньше. Теги
...
относятся
к блочным элементам, они всегда начинаются с новой строки, а после них другие
элементы отображаются на следующей строке. Кроме того, перед заголовком и
после него добавляется пустое пространство.