Frontpage шаблоны. Использование шаблонов и мастеров Microsoft FrontPage. Коротко о программе Microsoft FrontPage

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

Как использовался HTML до появления CSS

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

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

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

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

Для чего нужен HTML сейчас

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

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

Вот некоторые HTML-теги, которые можно (и нужно) смело заменять стилями CSS:

  • «украшающие», выравнивающие атрибуты к тегам (color , bgcolor , align и т. д.);
  • тег
(при использовании для макетирования веб-страницы);
  • тег .
  • HTML-теги для структурирования

    Для структурирования страниц используйте следующие теги:

    H1-H6 (heading) Теги h1-h6 предназначены для обозначения заголовков. С помощью этих тегов очень удобно разделять текст. Для лучшего понимания представьте себе книгу, в которой есть главы и подглавы. Название главы книги – это h1 , подглавы – h2 , части подглав – h3 и т. д. Расставлять теги заголовков лучше последовательно. P (paragraph) Тег

    Служит для обозначения абзацев текста. OL, UL (ordered list, unordered list) Теги

      ,
        удобный инструмент для обозначения перечней (навигационные ссылки, пункты в тексте, последовательный список и т. д.). DL (definition list) Тег
        в связке с тегами
        ,
        используется при создании списка определений, где
        – название определения (definition term),
        – описание определения (definition description). DIV (division) DIV – блочный элемент, который может использоваться для выделения фрагмента документа, а также для логического объединения нескольких элементов. С помощью CSS можно придать блоку
        необходимый вид и позиционирование, но сам по себе
        никак не меняет внешний вид документа. SPAN (span) Тег по своей роли похож на
        . Но
        – это блочный элемент, а – строчный. Например, если вам нужно поменять стиль одного слова внутри тега

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

        ? На помощь приходят такие теги HTML5, как
        ,
    для макетирования документа.

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

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

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

    И начнём мы их изучать с html.

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

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

    Изучение языка программирования, и изучение иностранного языка — это далеко не одно и тоже, и оно гораздо легче. Более того, это не страшно, а очень увлекательно.

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

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

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

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

    НТМL (HyperText Markup Language) дословно — язык разметки гипертекста. С помощью его создаются веб-страницы.

    И если, совокупность просто страниц, объединённых одной тематикой, в нашем понимании — книга, или даже, лучше сказать, толстый журнал, то совокупность веб-страниц объединённых одним доменным именем — это и есть сайт.

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

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

    Код html состоит из следующих элементов:

    2. Атрибуты тегов.

    3. Значения атрибутов.

    Давайте рассмотрим их по порядку.

    Тег html — это основной элемент кода. Пишется он так:

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

    Между этими двумя частями, пишется весь остальной код страницы, которая будет отображаться на экране.

    Тег сообщает браузеру, что это html-документ, и является основным (родительским) тегом для всех остальных элементов.

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

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

    Здравствуйте

    То есть шрифт слова «Здравствуйте», будет крупнее и жирнее остального текста.

    Если в угловые скобки поставить букву p , то текст заключённый в тег, будет выведен в виде абзаца.

    Здравствуйте

    То есть, шрифт будет обычный, но всё, что написано после этого тега, будет начинаться с новой строки.

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

    Более подробно, каждый из них, мы рассмотрим по ходу

    Следующие — это атрибуты тегов. Часто используемых, тоже не более десятка. А в последнее время и того меньше, так как все функции атрибутов перенесены в css.

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

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

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

    Это указание и будет значением атрибута. Выглядит оно так:

    Это красный цвет.

    Точно так же, но при помощи других атрибутов, можно задавать размер текста, отступы, выравнивания, и много чего ещё.

    Хотя, оформление всё больше переходит к CSS, а атрибуты оформления постепенно устаревают и выходят из практики.

    А сейчас делаем вывод из всего вышесказанного:

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

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

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

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

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

    Ну, и всё, пожалуй. Мало? А больше пока и не надо. Остальное будем узнавать в процессе обучения на конкретных примерах.

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

    Перемена

    Только сядешь за учёбу — так обязательно какая-то падла разбудит!!!

    В школе учитель говорит ученикам:
    — Кто из вас окончательно считает себя тупицей? Встаньте.
    После долгой паузы поднимается один ученик:
    — Так ты считаешь себя тупицей?
    — Ну не совсем, но как — то неловко, что вы стоите один.