Лабораторная работа №1

Основы языка HTML и CSS. Практическое применение и использование.

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

Теоретические сведения

1. HTML. Краткие сведения

HTML (Hypertext marker language) – язык разметки гипертекста. Данная технология используется для интерпретации исходного кода, представляющего собой текстовое структурное описание веб-страницы и её элементов браузером. Браузер - программное приложение, предназначенное для просмотра веб-страниц в удобной для пользователя форме. На сегодняшний день наиболее популярными браузерами являются Internet Explorer, Mozilla Firefox, Safari, Google Chrome и Opera. Любая страница, ресурс глобальной сети своей структурой содержат HTML-код. Просмотр страниц в браузере осуществляется по протоколу http (Hypertext Transfer Protocol).

Файл веб-страницы или веб-документа, как правило, имеет расширение .html или .htm .

Для редактирования html-страницы (веб-документ с вышеуказанными расширениями), потребуется следующее:

- наличие браузера (для просмотра результатов редактирования);

- наличие редактора.

Чаще всего в качестве редактора используется MS Notepad (Блокнот). Можно также использовать MS FrontPage, Adobe Dreamweaver, MS Visual Studio. Отличие последних в том, что вы сможете редактировать не только html-код страницы, но также использовать визуальные средства для её построения - при этом код будет генерироваться автоматически.

Синтаксис html

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

Для описания объектов и некоего подобия команд, которые будут применяться к тому или иному объекту используются теги. Они имеют следующий вид:

<тег>содержимое</тег>

Первый элемент пары: <тег> - является открывающим и в нем задаются свойства, которые будут применятся к содержимому. </тег> - является закрывающим, т.е. в том месте, где он находится, свойство перестает действовать. В данном примере, на месте слова «тег» подразумевается название какого-либо свойства с параметрами. К примеру, мы можем задать размер шрифта и его стиль:

<font size=”5” color=”red”>Текст</font>

В открывающемся теге мы описываем основные параметры и свойства, которые будут применяться к элементу между открывающим и закрывающим тегом (в данном случае - тексту). В закрывающем теге мы записываем лишь первое слово, которое стоит первым в открывающем теге. В данном примере, мы применили к тексту 5 –й размер шрифта (font size=”5”) и красный цвет (color=”red”). Обратите внимание, что для задания значений какому-либо параметров в HTML используется схема «свойство параметр=”значение”» и никак иначе.

Формат значений

- Для указания размеров, толщины границ, абсолютного положения используется система чисел;

- Для указания цвета используется формат записи:

1) Название текста на английском языке (blue, red, green и т.д.);

2) Код в шестнадцатеричной системе (#FFFFFF - что соответствует в данном случае белому цвету, и т.д.). Формат записи: color=”#FFFFFF”;

- Для описания гиперссылок (к этой теме обратимся немного позже) в качестве параметра используется абсолютный или относительный адрес;

-Для параметра выравнивания используется относительное название положений на html-странице (left, right, center, bottom, top, baseline и т.д.)

Также к одному объекту можно применять несколько тегов и, как следствие, несколько свойств. Обратите внимание на пример:

<p align=”center”><font size=”3” color=”green”><i>Текст примера</i></font></p>

Незнакомые свойства тегов буду разобраны ниже. Обратите внимание на последовательность тегов: закрывающие теги должны быть в обратной последовательности к открывающим – это поможет избежать ошибок считывания кода браузером.

Важно также соблюдать синтаксис написания html-кода. Необходимо учесть часто допускаемые ошибки:

• Несоблюдение правильности написания команд, опечатки;

• Некорректность в расстановке тегов (открывающий и закрывающий тег распространяются только на содержимое внутри них; в закрывающем теге должен стоять знак «слэш»; должна соблюдаться последовательность в расстановке тегов);

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