ktomolodec.ru Блог "Кто Молодец?" HTML and CSS

Уроки HTML и CSS — Элементы Body, Head, Title. Часть 2

ЭЛЕМЕНТЫ BODY, HEAD  И  TITLE


ktomolodec.ru Блог "Кто Молодец?" HTML and CSS
Уроки HTML и CSS.

«body» — Все, помещаемое внутрь этого элемента, отображается в основном окне браузера.

«head» — вам часто придется видеть элемент «head», предшествующий элементу «body». Он содержит информацию о самой странице, а не ту, которая будет выведена в основную часть окна браузера . В элемент «head» также часто включается элемент «title».

«title» — содержимое элемента «title» выводится либо в заголовке окна браузера (выше текстового поля, в которое вы обычно вводите адрес сайта), либо в качестве названия вкладки страницы (если ваш браузер использует вкладки).

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

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

СОЗДАНИЕ ВЕБ-СТРАНИЦЫ В ОПЕРАЦИОННОЙ СИСТЕМЕ  WINDOWS

[Block1]

Чтобы создать вашу первую веб-страницу на компьютере под управлением операционной системы Windows, запустите программу Блокнот (Notepad). Это можно сделать следующим образом: на экране Пуск (Start) в операционной системе Windows 8 щелкните правой кнопкой мыши и выберите пункт Все приложения (All Programs) в правом нижнем углу экрана. В списке приложений в группе Стандартные – Windows  (Accessories – Windows) щелкните мышью по ярлыку приложения Блокнот (Notepad).

В предыдущих версиях операционной системы Windows, выберите команду меню Пуск > Все программы > Стандартные > Блокнот (Start > All Programs > Accessories > Notepad).

Notepad++ Блог "Кто Молодец?" Уроки HTML и CSS

Вы также можете загрузить бесплатный текстовой редактор Notepad++ . Если вы пользуетесь более ранней версией Windows, выполните команду меню Пуск > Введите в окне программы код. В меню Файл (File) выберите команду Сохранить как (Save As). Сохраните файл и запомните, где он находится. При желании вы можете создать отдельную папку для всех примеров.

 

Сохраните этот файл под именем first-test.html. Не забудьте выбрать пункт Все файлы (All Files) в раскрывающемся списке Тип файла (Save as type), чтобы сохранить документ как веб-страницу, а не как простой текст.

Для веб-страниц с кириллическими буквами обязательно выберите пункт UTF-8 в раскрывающемся списке Кодировка (Encoding). Это необходимо для правильного отображения русского текста в окне браузера.

Запустите браузер. В меню Файл (File) выберите команду Открыть (Open). Перейдите в папку, содержащую только что созданный файл, выделите его и щелкните по кнопке Открыть (Open). Убедитесь, что  созданный файл имеет расширение .html (если у файла расширение .txt, то вам придется вернуться в программу Блокнот (Notepad) и заново сохранить его, поместив имя файла «firstfest. Html» в кавычки).

СОЗДАНИЕ ВЕБ-СТРАНИЦЫ В ОПЕРАЦИОННОЙ СИСТЕМЕ OS X

Чтобы создать страницу на компьютере под управлением операционной системы OS X, запустите программу TextEdit, расположенную в папке Программы (Applications)

Программа TextEdit по умолчанию создает не простые текстовые, а RTF – документы. Для работы с HTML – кодом, выберите команду меню Формат > Конвертировать в простой текст (Format > Make Plain Text).

Теперь перейдите в меню Файл (File) и выберите команду Сохранить (Save). Сохраните файл и запомните его местоположение. Сохраните данный файл под именем first-test. Html.  Если на экране появится диалоговое окно с запросом, какое расширение использовать для файла, нажмите кнопку Оставить.html (Use.html).  Далее запустите браузер. В меню Файл (Open file).

Перейдите в папку, содержащую только что созданный вами файл, выделите его и щелкните по кнопке Открыть (Open). Если на открытой вами странице кириллический текст отображается неправильно, вам следует выбрать кодировку вручную ( как указывать ее в коде, вы узнаете позже). В меню браузера Safari выберите команду Вид>  Кодировка текста > Unicode ( UTF-8) (View > Encoding > Uni-code (UTF-8).

КОД В СИСТЕМЕ УПРАВЛЕНИЯ КОНТЕНТОМ

[Block2]

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

Инструменты, предоставляемые в таких разделах, как правило, позволяют редактировать отдельные участки страниц, но не страницу целиком, поэтому при работе с ними вы редко будете встречать такие элементы, как «html», « head» или « body».

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

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

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

HTML 5 Уроки HTML и CSS

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

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

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

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

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

Однако закадровая работа таких текстовых редакторов заключается в добавлении необходимого HTML – кода к вводимому вами тексту, наподобие того, что вы уже встречали ранее. Многие из таких редакторов также позволяют просмотреть (и отредактировать) созданный ими код. Узнав, как читать и редактировать этот код, вы сможете получить больше контроля над подобными разделами вашего сайта.

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

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

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

КАК СОЗДАЮТСЯ ДРУГИЕ САЙТЫ

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

Сегодня существует огромное количество книг и онлайн-руководств по языку HTML, но вы все же можете при желании просматривать исходный код посещаемых страниц. Чтобы увидеть код, перейдите на желаемую страницу. Открыв ее, выберите команду меню Разработка > Показать источник страницы (Develop> Show Page Source).

(В вашем браузере это может оказаться команда типа Вид >  Исходный код (View >Source), название данного пункта меню будет зависеть от используемого браузера). После этого на экране появится новое окно, содержащее исходный код, с помощью которого была создана страница. Поначалу код может показаться сложным, но не стоит отчаиваться: к окончанию чтения следующей главы вы уже станете понимать его.

<Предыдущая статья

Следующая статья>


Автор книги : Джон Дакетт

Блог «Кто Молодец?»©

[Block3]

Добавить комментарий

1 × пять =