- •Основы создания html и css документов в программе Aptana Studio 3.
- •Введение
- •Основы создания html и css документов
- •Структура html документа
- •Создание html-документа
- •Просмотр документа в окне браузера
- •Разметка текста с помощью html
- •Атрибуты тегов
- •Заголовки
- •Неупорядоченный список
- •Упорядоченный список
- •Многоуровневый список
- •Список определений
- •Теги strong и b
- •Теги em и I
- •Теги br и hr
- •Абсолютные адреса
- •Относительные адреса
- •Ссылка с якорем
- •Всплывающая подсказка
- •Вставка изображения
- •Размеры изображения
- •Альтернативный текст
- •Изображение-ссылка
- •Выравнивание содержимого ячеек
- •Объединение ячеек в таблице
- •Заголовок таблицы
- •Расстояние между ячейками
- •Селекторы
- •Краткий перечень css-команд
- •Задания на лабораторные работы
- •Форматирование текста
- •Варианты заданий на форматирование текста
- •Варианты заданий на списки
- •1 Вариант
- •2 Вариант
- •3 Вариант
- •4 Вариант
- •5 Вариант
- •6 Вариант
- •7 Вариант
- •8 Вариант
- •9 Вариант
- •10 Вариант
- •11 Вариант
- •12 Вариант
- •Варианты заданий на таблицы
- •Список литературы
Министерство транспорта Российской Федерации
Сибирский государственный университет водного транспорта
А.А. Каравка, О.Н. Иванова
Основы создания html и css документов в программе Aptana Studio 3.
Новосибирск 2015
УДК 681.3.06
Я 434
Каравка А.А. Основы создания HTML и CSS документов в программе Aptana Studio 3.: Учебное пособие для студентов технических и инженерных специальностей. [Текст] / А.А. Каравка, О.Н. Иванова,– Новосибирск: Сиб. гос. унив. вод. трансп., 2015.
Учебное пособие представляет собой теоретическую часть по созданию HTML и CSS документов, а также руководство к выполнению лабораторных работ для студентов технических и инженерных специальностей. Материал разбит на две части, в первой изложена теоретическая часть, во второй варианты лабораторных работ с пошаговой инструкцией их выполнения в виде разобранного примера.
© Каравка А.А., Иванова О.Н., 2015
© Сибирский государственный университет водного транспорта, 2015
Введение
На сегодняшний день многие знают, что содержимое Web-страниц создается с помощью языка HTML, а внешний вид их элементов определяется стилями, которые описываются на языке CSS.
Данные языки и технологии были созданы более десяти лет тому назад, и за последнее время в языке HTML произошли большие изменения. Также произошли эволюционные изменения в языке CSS. Для верстальщика Web-страниц самым необходимым являются именно эти два языка, т.к. они применяются везде, как на начальной стадии разработки сайта, так и при использовании Content Management System (система управления содержимым) — информационной системы или компьютерной программы для обеспечения и организации совместного процесса создания, редактирования и управления контентом. В данном методическом пособии рассмотрены основные команды (теги) создания HTML-страниц и их наполнение, а также оформление web-страниц с использованием языка CSS.
Основы создания html и css документов
В данном учебном пособии приведены примеры работы в программе Aptana Studio 3, в которой можно использовать комбинацию клавиш Сtrl+E для ускорения работы над созданием документов. Т.е. чтобы написать тег в программе, достаточно ввести его название (без угловых скобок) и нажать Сtrl+E.
Структура html документа
HTML состоит из элементов, которые также называют тегами (Tag - от англ. "команда"), которые заключаются в угловые скобки. Тег, заключенный в угловые скобки, открывает код, а заключенный в угловые скобки со слешем "/", закрывает код.
Каждый HTML-документ должен начинаться с декларации типа документа или «доктайпа». Тип документа нужен, чтобы браузер мог определить версию HTML и правильно отобразить страницу.
Например, для старой версии HTML 4.01 доктайп выглядит так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
А для последней версии HTML:
<!DOCTYPE html>
Последнюю версию HTML ещё называют HTML 5 (поэтому в программе Aptana Studio 3 используется команда html:5 с последующим нажатием сочетания клавиш ctrl+E). Но так как эта версия уже принята как стандарт и распространена почти везде, мы будем называть её просто HTML.
Простейшая HTML-страница состоит как минимум из трёх тегов.
Тег <html>— это контейнер, в котором находится всё содержимое страницы, включая теги<head> и <body>. Как правило, тег <html> идёт вдокументе вторым после доктайпа.
Тег <head> предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Содержимое этого тега не отображается напрямую.
Тег <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.
Заголовок страницы — это тот текст, который отображается в левом верхнем углу браузера, а также во вкладках.
Чтобы задать заголовок страницы, нужно использовать тег <title> внутри тега <head>. Например, вот так:
<head>
<title>Основы HTML и CSS</title>
</head>
Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если кодировка не будет указана, то вместо текста будут отображаться иероглифы.
Чтобы сообщить браузеру кодировку HTML-страницы, необходимо внутри тега <head>использовать тег:
<meta charset="имя кодировки">
Самая распространённая современная кодировка — utf-8.
Особую роль играют комментарии. Комментарий - это текст или область, игнорируемые браузером. Комментарий в HTML-коде задаётся так:
<!-- любой текст -->
Комментарии обычно используются для комментирования кода, для временного отключения кода. Удалять код неудобно, так как его надо будет восстанавливать, а закомментировать и потом раскомментировать — самое лучшее решение.
Комментарии можно использовать в любом месте страницы, кроме тега <title> — внутри него они не работают.
Чтобы быстро закомментировать или раскомментировать строку кода в HTML или CSS редакторе, можно использовать сочетание клавиш ctrl + / .