Основы работы с html и css. Основы для начинающих. Заголовки страницы h1 h2 h3

Язык HTML по определению не может являться языком программирования, как ошибочно полагают многие неопытные в программировании люди. Язык HTML – это в принципе изначально неправильная формулировка. Называть его нужно языком разметки гипертекста, ведь HTML так и расшифровывается – HyperText Markup Language . А если выражаться тривиально, то HTML – это ряд тегов. Тег, в свою очередь, – управляющее слово, основное. Теги обеспечивают возможность придавать стандартным по виду текстам форматированный облик, то есть выделить курсивом, жирным шрифтом, подчеркнуть или сделать какое-либо другое действие. Однако сделать разные действия над текстами Вы сможете лишь в специализированных программах- браузерах, благодаря которым Вы собственно и путешествуете по глобальной сети World Wide Web. Эти программы показывают единый уже изменённый текст, а теги HTML, используемые для видоизменения, они прячут. Чтобы лучше со всем этим разобраться и скорее понять, о чём идёт речь, прямо на этой страничке нажмите на правую клавишу мыши и выберите в раскрывшемся меню точку «Исходный код» или нечто похожее по смыслу. Та же самая страница появится перед Вами в своём истинном облике.

Чтобы создать HTML-код можно применить стандартные текстовые редакторы, а также можно воспользоваться зрительными редакторами, их чаще называют визуальными. Главное различие этих видов редакторов в том, что визуальные специально созданы для набора HTML – кода, кодов JavaScript , CSS и PHP , а также и некоторых других, а именно для web-программирования. К тому же, такие редакторы дают Вам возможность немедля увидеть то, что Вами было сделано в программе и выявляют (показывают) совершённые помарки в напечатанном коде. Советуем набирать код непосредственно своими руками, а зрительные редакторы упростят Вашу работу. Вы можете пользоваться браузером Macromedia Dreamweaver 8 . Хоть эта программа и не из последних, однако её функциональности Вам будет вполне достаточно, и даже с излишком. Лучше всего сделать следующим образом: напечатайте код в программу Dreamweaver , далее сохраните и кликните клавишу «Просмотр в браузере», где комплект браузеров Вы сможете поменять самостоятельно. Вслед за этим перейдите обратно в Dreamweaver и возобновите процесс редактирования. В этом месте Вы увидите русификатор для Macromedia Dreamweaver 8. Итак, мы рассказали Вам про средства. Далее приступаем прямо к HTML – тегам.

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

Неизменные теги страницы в коде HTML:

, , , , ,

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

Наверняка Вы сразу заметили, что все теги парны относительно друг друга. Один тег вскрывающий, а другой затворяющий его. В коде HTML практически все теги парные. Различие между ними в том, что перед затворяющим тегом располагается косая линия /. Эти теги также именуются контейнерными по той причине, что возможно установить ещё и иные теги между данными, как бы определить в контейнер. Вы, возможно, уже видите сами, как среди тегов и располагаются и другие. Печатать названия тегов разрешено и заглавным, и прописным шрифтом, отличий здесь не будет. Такие записи, как и для программы никакой разницы иметь не будут, и истолковываются ею идентично.

Так что же такое неизменные теги для страницы в коде HTML? Рассмотрим этот вопрос более детально.

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

Теги и заключают заглавие гипертекстового материала. Он содержит сведения о странице в html-коде. В принципе эти теги не обязательны, даже если их не будет, браузеры отлично интерпретируют Ваш html-материал. Однако решив и не писать заглавие в документе, всё-таки наберите . Такой ход необходим для сочетаемости в разных вариациях браузеров. Абсолютно каждый знак, располагающийся в данных тегах, никоим образом не расшифруется браузером. Сюда не относятся только лишь сведения в тегах , заключающих само название html-материала (название выносится в верхнюю область панели браузера). Однако это может воздействовать на общий облик html-документа, то, как она будет существовать в сети и классифицироваться по иерархии в поисковых системах. Детальнее о тегах, размещающихся в заглавии гипертекстового материала, будет изложено позднее.

Вся суть материала в коде html размещается в тегах и . На этом месте располагается совершенно всё, из чего состоит наш html-документ и что мы созерцаем при его разворачивании (графические образы, текстовые данные, кнопки и прочие элементы). Это и есть главный «корпус» страницы, или основа.

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

где – непосредственно сам тег, bgcolor – атрибут тега, «#FF0000» – смысл данного атрибута. Атрибутов у тега бывает некоторое количество.

И, таким образом, тон полностью всей страницы станет красным.

Обратите внимание здесь на тот факт, что атрибуты тега (все до единого) и их смысл ставятся во вскрывающем теге (он без косой черты), и никогда – в затворяющем.

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

Используя полученный багаж знаний, вычитанный из всевозможных пособий по азам языка HTML для начинающих, в практической деятельности мы выявили главную и очень серьёзную помарку, которую совершили многие авторы данной литературы. Предназначенные исключительно для начинающих, все эти учебные пособия и руководства обучают азам HTML последовательно, начиная с тегов заглавия гипертекстового материала ( ) и продолжая ознакомлением с тегами основания документа ( ). По существу всё это разумеется очень правильно. Однако, как показывает наш практический опыт, для новичков этот путь изучения основ HTML нецелесообразен. Исследуя бесчисленное множество совершенно неясных для себя тегов заглавия, новичок не сможет увидеть плоды своего обучения, так как браузер не интерпретирует эти теги, а также многие из них он не сможет применить в работе над своим творением никоим образом (в самом начале обучения точно). Так любой новичок лишь потратит свои силы и время, а самое главное – хотение что-либо делать в дальнейшем, и изучать ли вообще HTML. К тому же мысль о том, что работа по разработке ресурса под силу только бывалым web-мастерам за немалые деньги, прочно укоренится в неопытных головах новичков. Поэтому советуем Вам оставить на время всё непонятное и двигаться дальше. Потом, разобравшись с всем понятным, Вы сможете усвоить и остальное.

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

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

Html — основа верстки и базовый компонент в организации элементов сайта

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

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

Internet Explorer
Google Chrome;
Opera;
Mozilla Firefox.

При этом создатели браузеров могут самостоятельно формировать новые наборы элементов для html. В конце 90-х годов именно по причине такого активного творчества конкурирующих разработчиков браузеров и сформировалось явление «браузерная война». Его суть сводилась к тому, что некоторые html-страницы отображаются корректно в одном интернет-обозревателе, а в другом пользователь видит их с ошибками. Единственным выходом из ситуации браузерного конфликта является использование кросс-браузерной верстки.

Редакторы для создания страниц html

Создать или отредактировать html-страницу можно с использованием редакторов html. Самым простым и известным является текстовый редактор Notepad, который не написан специально для работы с разметкой html, но поддерживает эту функцию. Более функциональными и разработанными именно для работы с html являются редакторы:

Notepad++ — работает с исходным кодом и распространяется свободно.
Macromedia Dreamweaver — отличается набором расширенных функций по редактированию и просмотру создаваемой разметки, а так же имеет возможность показывать готовую страницу.
Adobe Dreamweaver — подобно предыдущему редактору обладает функцией показа готовой страницы, то есть позволяет пользователю просматривать редактируемый вариант в том виде, в котором она будет отображена в браузере. Эта программа является более поздней версией, которая появилась вследствие усовершенствования специалистами Adobe выкупленной у компании Macromedia их редактора. Ввиду этого обстоятельства программы Macromedia Dreamweaver и Adobe Dreamweaver очень похожи.
Microsoft Front Page — входит в пакет приложений Office и имеет достаточный объем возможностей для обработки и создания html-разметки.

Основные теги

Документ, в котором использована html-разметка, является простым набором компонентов, которые сегментированы с помощью специальных знаков, называемых тегами. Теги заключают элемент, тем самым придавая ему определенный вид и определяя его место. Есть и случаи, когда тег ничего не заключает: это касается сочетания
, которое отбивает строку.

Тег, который находится перед заключаемым элементом, называется открывающим и выглядит так < тег >. Тег, который находится после заключаемого элемента, называется закрывающим и выглядит так . Наличие слеша (/) для закрытия тэга обязательно, иначе компонент не сработает. Это правило относится к большинству тегов, за исключением упомянутого выше
и некоторых других. К основным тегам html относятся:

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

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

Для создания html страницы необходимо последовательное выполнение описанных ниже действий. Использовать можно обычный блокнот.

1) Создаём документ. В него вставляем следующий код:

Содержимое этого элемента будет отображается в браузере

Примечание: обязательно в «» указываем кодировку документа как показано выше.

2) Далее: файл - сохранить как. В поле «тип файла» вместо «txt» выбираем «All files» (все файлы), в поле codepage (кодировка страницы) - выбираем 65001 (UTF-8), в поле «имя файла» после названия документа ставим точку и расширение html (.html), далее нажимаем сохранить. У нас в той же папке появился второй документ, но уже в html. Это и есть наша веб страница, которую теперь можно открыть в любом браузере.

Примеры html кода

Текст разбитый на параграфы

Параграф 1

Параграф 2

Параграф 3

Заголовки и абзацы с выравниванием по центру

Это заголовок выровнен по центру.

Заголовок второго уровня выровнен по центру.

Текст абзаца выровнен по центру.

Мета-теги, название страницы (title), описание страницы (description) и ключевые слова (keywords)

Название страницы

Абзац с ключевыми словами указанные в «keywords»

CSS — дополнение механизмов html

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

Параметры CSS могут быть размещены в самом веб-документе путем использования:

тегов , которые находятся между тегами и ;
атрибута style, располагающегося внутри любого другого тега.

Также указания CSS могут быть присоединены к веб-документу с помощью:

тега , размещаемого между и ;
директивы @import, располагаемой между тегами и .

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

Способы подключения таблиц CSS стилей

Существует несколько способов подключения CSS к html:

встроенные таблицы, при котором в заголовок страницы встраивается таблица стилей с использованием тега ;

Страница со встроенной таблицей стилей

Ztx {

font-size: 12px;
color: #4A4A4A;
}

Ztx_2 {
font-family:Verdana, Geneva, sans-serif;
font-size: 18px;
color:#F00;
background-color:#3FF;
}

Отформатированный текст

К этому тексту уже применён второй стиль

Примечанеие: «font-family» — это название шрифта, «font-size» — размер шрифта, «color» — цвет шрифта, «background-color» — цвет фона.

внутренние таблицы CSS, когда таблица помещается внутри элемента html;

Страница со стилями внутри элемента

Отформатированный текст

К этому тексту уже применёт второй стиль

внешние таблицы CSS, при использовании этого способа подключения таблицы стилей создаются отдельным файлом.
Такой способ является наиболее удобным и поэтому часто используемым. Подключение в данном случае производится с использованием тега и будет выглядеть следующим образом:

Подключение CSS к HTML

Это заголовок первого уровня

Здесь просто текст

Это заголовок второго уровня

Здесь просто текст

А вот содержимое CSS файла «style.css» таким образом для текста, которому присвоен класс «form» применяются стили, в данном случае: название шрифта, размер шрифта и цвет фона.

Form {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-color:#3FF;
}

Информационный материал подготовлен сотрудниками студии веб-дизайна «БЕЛЫЙ ПАРУС»

Мы искренне надеемся, что он будет полезен всем, кто решил овладеть основами html и css.

This entry was posted on Воскресенье, Март 17th, 2013 at 08:47 and is filed under . You can follow any responses to this entry through the feed. Responses are currently closed, but you can from your own site.

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

Для изучения урока, скачайте архив с необходимыми файлами .

HTML - это язык разметки документов . Правильное произношение - Эйч Ти Эм Эль .

Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

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

HTML - это язык разметки документов для браузера . Word"ом здесь выступает браузер, а документом - HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя - с помощью HTML мы размечаем , где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.

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

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

Этакий Word для HTML. Такие визуальные редакторы называются:

WYSIWYG редакторы - W hat Y ou S ee I s W hat Y ou G et. То есть, если перевести на русский: что видим, то и получаем.

Я их называю "вузивуги". Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно - не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее - у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

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

HTML код, сгенерированный 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 документа.

Фавиконка (favicon)

Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) - миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка - это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки - это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

CSS стили документа

Подключает к документу CSS файл со стилями оформления HTML.

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

Примечание: свойство href конструкции указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico , находятся в той-же папке, что и файл index.html . не имеет закрывающего тега.

Тег

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

В нашем примере подключается внешний файл script.js , который находится в той-же папке, что и основной файл index.html.

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

Тело aka body

Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

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

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

Тег	Описание
	Тег для создания ссылок в документе. Пример: текст ссылки Атрибут href указывает документ, на который будет вести данная ссылка.
,	Делает текст курсивом или жирным (акцентируемым). Пример: текст курсивом жирный (акцентируемый) текст
, , , , ,	Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h1 до h4. В документе должен быть только один заголовок, выделенный тегом h1, как главный заголовок документа. Примеры: Заголовок первого уровня Заголовок второго уровня Заголовок третьего уровня ... и т. д.
,	Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег Примеры: Элемент маркированного списка 1 Элемент маркированного списка 2 Элемент нумерованного списка 1 Элемент нумерованного списка 2
	Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно. Пример: Внешний вид HTML разметки во многом определяется CSS стилями. Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.
	Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст - атрибут "alt". Данный тег "самозакрывающийся". Пример:
+ +	Формы и элементы ввода. Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача - отправка данных на сервер. Пример - простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст: Текст сообщения
	Определяет подстроку в строке. Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере. Пример: Изучение HTML, в большинстве случаев, не вызывает ни каких сложностей у новичков.
,	Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег. Примеры: Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.
	Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие "дивной" верстки - это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги . Пример: Текст во вложенном блоке Все элементы , в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег .
	Данный тег загружает внешнюю страницу в документ. Пример:

Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное - понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

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

Например, не:

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

Итак, теперь мы знаем некоторые основы HTML : какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному - а именно, печенькам.

Практическое задание по HTML верстке

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

Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
Создайте первоначальную структуру документа с доктайпом, тегом , содержащим и и перейдите к редактированию содержимого тега ;
Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

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

До новых встреч, друзья!

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

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

Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:

— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.

Мой первый сайт Привет всем!
А это мой первый сайт.

Результат можно посмотреть .

— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:

align — Определяет выравнивание линии. Может принимать значение left, center, right.
color — Задаёт цвет линии.
noshade — Рисует линию без трехмерных эффектов.
size — Задаёт толщину линии.
width — Задаёт ширину линии.

Код с использованием тега :

Мой первый сайт Привет всем!А это мой первый сайт.

Визуальный пример находится .

Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:

Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:

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

Теперь давайте поговорим о «закрывающихся» тегах. Само название «закрывающийся тег», говорит о том, что тег требует обязательного закрытия. Это сделано для того, чтобы чётко ограничить часть текста, на которую действует тег.

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

Мой первый сайт Привет всем! А это мой первый сайт.
Привет всем! А это мой первый сайт.

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

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

— устанавливает жирное начертание шрифта.

— устанавливает курсивное начертание шрифта.

— добавляет подчеркивание к тексту.

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

— перечёркивает текст. Данный тег исключён из HTML5 вместо него рекомендуется использовать

— отображает текст моноширинным текстом. Исключён из HTML5.

— отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.

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

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

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

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

— используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.

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

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

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

.... — HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег представляет собой наиболее важный заголовок первого уровня, а тег служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги ,…, относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align , который определяет выравнивание заголовка, может принимать значения left — выравнивание заголовка по левому краю, center — выравнивание по центру, right — выравнивание по правому краю, justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.

— представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color — устанавливает цвет текста, face — определяет гарнитуру шрифта, size — задает размер шрифта в условных единицах.

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

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

По умолчанию, текст заключенный в контейнере подчеркивается пунктирной линией.

Ниже приведу код, в котором я использовал все эти теги:

Мой первый сайт

HTML and CSS are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about:

“paragraph,” “list,” “table,” and so on

XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).

CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup язык language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.

have not

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

При написании данной статьи описание некоторых тегов было взято отсюда

Этот раздел сайта полностью посвящен двум языкам создания сайта, а именно HTML и CSS. Здесь вы сможете поэтапно изучить языки, узнать все от основ до самых сложных моментов.

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

В данном разделе размещены уроки по стандартам языка HTML5 и CSS3, соответственно, если же будут какие либо более новые версии данных языков, они так же будут отражены в новых уроках этого раздела, и вы обязательно узнаете .

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

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

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

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

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

После того как вы узнали все html теги для работы с текстом, теперь пора перейти непосредственно к CSS работе с текстом, которая уже значительно расширит ваши познания и возможности.

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

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

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