- •Лабораторная работа №1 Утилиты для создания web-сайта. Что такое html. Теги. Создаем свой первый сайт.
- •Утилиты для создания web-сайта
- •Это заголовок Это подзаголовок
- •4. Создаем свой первый сайт
- •Лабораторная работа №2 Что мы уже знаем. Ещё немного html-тегов. Атрибуты.
- •1. Что мы уже знаем?
- •2. Ещё немного html-тэгов
- •3. Атрибуты
- •Лабораторная работа №3 Ссылки. Изображения.
- •1. Ссылки
- •2: Изображения
- •Лабораторная работа №4
- •1. Таблицы
- •2. Ещё о таблицах
- •Лабораторная работа №5 Внешний вид (css). Публикация страниц. Web-стандарты и проверка.
- •1. Внешний вид (css)
- •2. Публикация страниц
- •Последние замечания
Лабораторная работа №1 Утилиты для создания web-сайта. Что такое html. Теги. Создаем свой первый сайт.
Утилиты для создания web-сайта
На начальном этапе работы по созданию web-сайта необходимо иметь следующие утилиты:
«браузер/browser» - программу просмотра web-страниц. Можно использовать любой - Microsoft Internet Explorer, Opera или Mozilla Firefox.
текстовый редактор Блокнот.
Возможно, вы слышали, или даже использовали такие программы, как Microsoft FrontPage, Macromedia Dreamweaver или даже Microsoft Word, которые могут - или заявляют что могут - создавать web-сайты для вас. Пока забудем об этих программах. Они не научат вас тому, как кодировать web-сайт.
Блокнот прекрасно подходит для создания кода, поскольку никак не влияет на то, что вы пишете. Это даёт вам полный контроль над текстом. Проблема многих «навороченных» программ в том, что в них много стандартных функций, из которых вы можете выбирать необходимые. Обратной стороной этого является то, что всё подгоняется под эти стандартные функции. Поэтому такие программы часто не в состоянии создать точно такой сайт, какой требуется вам. Или что ещё хуже, они начинают изменять написанный вами код. При использовании Блокнота или иного простого текстового редактора только вы отвечаете за то, что написано.
Браузер и Блокнот (или аналогичный простой редактор) - вот всё, что вам необходимо в начале работы над созданием web-сайтов.
HTML
HTML - это «родной язык» вашего браузера.
HTML был изобретён в 1990 году учёным, Тимом Бёрнсом-Ли, и предназначался для облегчения обмена документами между учёными различных университетов. Проект имел больший успех, чем Тим Бёрнс-Ли мог ожидать. Этим изобретением HTML он заложил основы современной сети Internet.
HTML - это язык, который позволяет представлять информацию (например, научные исследования) в Internet. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы увидеть HTML-коды страницы в Internet, щёлкните "Вид" в строке меню вашего браузера и выберите "Просмотр HTML-кода".
Если вы хотите создавать web-сайты, вы не обойдётесь без HTML. Даже если вы используете для создания web-сайтов такие программы, как Dreamweaver, знание основ HTML значительно упростит вам жизнь, а ваш web-сайт станет намного интересней.
HTML это сокращение от "HyperText Mark-up Language/язык гипертекстовой разметки".
Hyper противоположно linear/построчно. В недавнем прошлом компьютерные программы работали построчно: программа выполняла одну строку, затем переходила к выполнению следующей, и т. д. Но HTML работает по-иному - вы можете перейти куда и когда захотите. Например, не нужно посещать MSN.com до того, как посетить HTML.net.
Text - текст.
Mark-up - это разметка, то, что вы делаете с текстом. Вы размечаете текст так же, как вы делаете это в текстовых редакторах: выставляете заголовки, списки, выделяете текст жирным шрифтом и т. д.
Language - это язык HTML. В нём используется много английских слов.
Мы будем изучать так называемый XHTML (Extensible HyperText Mark-up Language), который является новым и более структурированным вариантом HTML.
Теги
Тэги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.
Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">".
Обычно имеются два тэга - открывающий: <html> и закрывающий: </html>. Различие в том, что в закрывающем тэге имеется знак "/"(слэш).
Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.
Из каждого правила есть исключения, и в HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат текста, а являются метками, например, перенос строки выглядит так: <br>. HTML - это тэги. Для изучения HTML необходимо изучить различные тэги.
Пример 1:
Тэг <b> информирует браузер, что весь текст между <b> и </b> должен быть напечатан жирным шрифтом. ("b" это сокращение для "bold".)
<b>This text must be bold.</b>
будет выглядеть при просмотре в браузере:
This text must be bold.
Пример 2:
Тэги <h1>, <h2>, <h3>, <h4>, <h5> и <h6> указывают браузеру создавать заголовки (h для "heading"), где <h1> это заголовок первого уровня - самый крупный шрифт, <h2> - заголовок второго уровня - шрифт меньшего размера, и <h6> - заголовок шестого уровня - самого низкого в этой иерархии, и самый маленький шрифт.
<h1>Это заголовок</h1>
<h2>Это подзаголовок</h2>
будет выглядеть в браузере: