Занятие 2. "Технология верстки веб-страницы: изучениеHtml"
На этом занятии мы познакомимся с технологиями HTML и CSS: -изучим основные HTML-теги; -рассмотрим предназначение CSS; -познакомимся со справочниками по HTML и CSS.
Предназначение html иCss
На прошлом занятии мы познакомились с языком PHP. Прежде чем продолжить изучать PHP–вспомним HTMLиCSS1, которые также используются при веб-разработке. Их предназначение –верстка веб-страницы, формирование ее внешнего вида.
Рис. 2.1
Искусство верстки веб-страницы заключается в правильном использовании HTMLи CSS для качественного отображения веб-страницы различными браузерами. Верстка –это отдельная профессия, на освоение которой нужно время.В крупных веб-студиях версткой, как правило, занимаются отдельные сотрудники,но при разработке веб-проекта в одиночку эта работа возлагается на плечи программиста.
Примечание!!!В рамках данного курса мы будем использовать простые приемы верстки, которые помогут нам корректно отображать информацию в большинстве браузеров.
В процессе верстки веб-страницы желательно иметь под рукой вспомогательные справочники по HTMLи CSS. Такие справочники можно найти и скачать в интернете или получить у преподавателя. Это файлы css.chm иhtml.chm
В каждом файле,соответственно, находятся справочник поCSSи HTML. Формат файла chm – это формат справочного файла от Microsoft, поэтому при запуске файла он должен автоматически открываться в операционной системе Windows. Этот формат файла открывается утилитой hh.exe, которая находится в папке Windows. При открытии справочников Вы должны увидеть следующие окна (см. рис.2.2):
Рис. 2.2
Эти справочники будут полезны при изучении данного курса и при создании собственных веб-проектов!
Вспомним основные тегиHtml
Важно!!!Перед запуском Eclipse для PHP не забывайте запускать Денвер!!! Путь к проектам в Eclipse для PHP указан с использованием виртуального диска. Если Денвер не запущен, то открыть ранее созданные проекты не получится!!!
Продолжим работу с проектом test_php,созданным на прошлом занятии (см. рис. 2.3):
Рис. 2.3
Прежде чем запускатьEclipse для PHP –запустим Денвер при помощи ярлыка Start Denwer. В нашем проекте пока находится всего один файл с программным кодом – файл index.php.
Иногда PHP-файл может содержать только HTML-теги без программного кода PHP - в этом случае он равносилен файлу с расширением html.
Еще раз напомним, что язык HTML –это язык разметки, представляющий из себя набор тегов. Его нельзя назвать языком программирования. В изучении он проще, чемJava или PHP. Для овладения HTML нужна некоторая практика использования его тегов и справочник по HTML. Мы будем использовать справочник html.chm, который был загружен ранее. HTML имеет много различных тегов, но специально заучивать их не нужно.Необходимые теги будут запоминаться автоматически в процессе верстки, а что нужно вспомнить –всегда можно посмотреть в справочнике или в интернете через поисковую строку, или на соответствующем сайте. Часть HTML-тегов используются редко, а некоторые не используются вообще. Но есть теги HTML, которые используются практически на любом сайте –именно такие теги мы начнем изучать в первую очередь.
Запускаем Денвер, если он еще не запущен. Открываем проект test_php (проект прошлого занятия) и файл index.php. Из файла index.php удаляем вставку с PHP-кодом, при этом останутся только теги htmlи body (см. рис. 2.4):
Рис. 2.4
Не забываем сохранить изменения в проекте при помощи кнопки"Сохранить все".
Сворачиваем среду разработки и открываем браузер. В адресной строке вводим: http://test_php, нажимаем клавишу Enter, откроется пустая страница
Итак, мы запустили нашу страницу в браузере. Далее мы будем сворачивать окно браузера, вносить изменения в файл index.php, сохранять эти изменения. Потом, развернув окно браузера,нажмем клавишу F5 для обновления страницы.
Такую схему работы мы будем использовать и далее!!!
Примечание!!!Среда Eclipse для PHP позволяет выполнить запуск проекта без браузера при нажатии клавиш . В этом случае веб-страница будет отображаться в отдельном окне среды разработки.Но мы будем выполнять проверку в реальном браузере!
Рекомендуется!!!В данном методическом материале используется браузер Google Chrome. Рекомендуется установить его для большего удобства обучения.
Приступим к рассмотрению HTML-тегов. Для этого откроемHTML-справочник html.chm
Первый тег: span. Найдем этот тег в справочнике и посмотрим его описание. В левой части окна справочника имеется закладка "Содержание",где представлены теги по алфавиту (см.рис. 2.5):
Рис. 2.5
Откроем раздел "S" (т.к. тег spanначинается на эту букву), в списке находим: SPAN.Выделив тег, справа в этом же окне мы увидим его описание.
В самом верху находится таблица поддержки тега SPANразличными версиями браузеров. Ниже идет описание тега SPAN –его предназначение,характеристики и примеры использования вHTML-коде.
Таким же образом Вы можете посмотреть описания других HTML-тегов. По мере увеличения Вашего опыта в создании веб-страниц и использования данного справочника –скорость поиска нужной информации в справочнике возрастет, а понимание описания тегов станет более глубоким.
Существуют теги, которые не поддерживаются некоторыми версиями браузеров!!!
Вспомним, что тег spanпредназначен для выделения части информации и задания своего стиля. Он имеет открывающий и закрывающий тег и записывается виде:<span> </span>. Добавим следующий код внутрь теговbody:
<html>
<body>
Hello <span style="color:red;">HTML</span>
</body>
</html>
Сохраним проект,перейдем в браузер и обновим страницу - мы увидим, что на странице появилось слово"HTML", выделенное красным. Слово "HTML"находится внутри открывающего и закрывающего тега span –тем самым мы выделяем его в отдельный фрагмент, а при помощи атрибутаstyle задаем красный цвет. При помощи тега span можно в тексте выделять любые фрагменты и отображать их по-разному, задавая отдельный цвет, размер шрифта и т.д.
В данном примере мы столкнулись с понятием "атрибут тега".Вспомним, что атрибут –это дополнительная настройка для тега. Атрибуты записываются внутри открывающего тега после его названия в виде: style="color:red;", где style –это имя атрибута, а внутри двойных кавычек –значение атрибута: color:red; - красный цвет,которым мы выделим часть нашего текста.
Свои атрибуты могут быть у любого тега. Атрибуты любого тега можно посмотреть в том же справочнике по HTML. Атрибут style – это подключение CSS-стиля. В данном случае подключаетсяCSS-стиль для указания цвета. Изменим наш программный код: слово "Hello"выделим тегом span и при помощи атрибута style укажем для него зеленый цвет:
<html>
<body>
<span style="color:green;">Hello</span> <span style="color:red;">HTML</span>
</body>
</html>
Сохраним проект,перейдем в браузер и обновим страницу -слово "Hello"отобразилось зеленым цветом.
Далее вставим на нашу страницу картинку, в этом нам поможет тегimg.Попробуйте самостоятельно найти тег imgв HTMLсправочнике, найдите пример использования этого тега в HTML-коде. Этот тег является одновременно открывающим и закрывающим, он не имеет отдельного закрывающего тега. Записывается в виде:<img />.Вспомним: у таких тегов наклонная черта записывается перед последней угловой скобкой!
Основной атрибут тегаimg –атрибут src, при помощи которого указывается путь к файлу изображения. Еще два важных атрибута для тега img –атрибуты width (ширина), height (высота). Эти атрибуты нужны для указания размеров изображения.
Проверим на практике работу тега img.Возьмем любой графический файл, напримерp.jpeg и поместим в папку с нашим проектом. Для этого скопируем файл p.jpeg в буфер обмена (Ctrl+C). Перейдем в среду разработки,выделим заголовок проекта и вставим из буфера обмена изображение (см. рис. 2.6).
Рис. 2.6
После этих действий файл с изображением p.jpeg попадет в папку с проектом (см. рис. 2.7).
Рис. 2.7
Эта операция копирования равносильна копированию в папку home\test_php\www,которая находится на виртуальном диске и содержит наш основной файл index.php. Теперь давайте вместо тега span добавим тег img, получится следующее:
<html>
<body>
<img src="p.jpeg" width="259" height="194" border="0" />
</body>
</html>
Для данного тега указаны четыре атрибута:
src–путь к картинке,width– ширина картинки, height – высота картинки, border –толщина рамки вокруг картинки.
Важно!!!Если не указать атрибуты ширины и высоты, то браузер вычислит размеры самостоятельно. Но такая картинка будет загружаться немного дольше! Размеры должны в точности соответствовать размерам картинки, иначе пропорции картинки нарушатся! Рекомендуется указывать ширину и высоту картинки явно! Некоторые браузеры могут отображать рамку вокруг картинки, поэтому лучше явно указывать толщину рамки ="0".
Значение атрибута указывается внутри двойных кавычек после знака равенства. Атрибуты отделяются друг от друга пробелом. Путь к картинке указывается в виде точного имени файла с расширением. Ширина и высота указаны в пикселях. Толщина рамки указывается нулевая, чтобы браузер случайно не отобразил рамку вокруг картинки.
Сохраним изменения в проекте, перейдем в браузер, обновим страницу - изображение из файла p.jpeg появилось на нашей странице в браузере (см. рис.2.8)
Рис. 2.8
Изображения,используемые на веб-странице, готовятся заранее в графическом редакторе, например,в Photoshop.Изображение рекомендуется сохранять в одном из распространенных форматов,воспринимаемых большинством браузеров:GIF, JPG(JPEG), PNG.
Формат JPG (JPEG) хорошо подходитдля загрузки фотографий, прямоугольных изображений. Для загрузки изображений с эффектом прозрачности используют GIFили PNGформаты. GIF-изображения загружаются браузером быстрее, так как размер файла меньше, чем у PNG. Формат PNGпозволяет использовать изображения с более высоким количеством цветов, что делает изображение более качественным. Можно использовать только один формат PNG, который поддерживает прозрачность и высокое качество изображения. Перевод любого изображения в формат PNG можно выполнить с помощью графического редактора или конвертора.
Важно!!!Если Вы забудете поставить закрывающий тег или перепутаете положение тегов, то браузер в любом случае отобразит Вашу страницу. В данном случае браузер "постарается" отобразить страницу корректно с учетом Ваших ошибок, но вид страницы может быть не таким, каким Вы ожидали. Старайтесь быть внимательнее при вводе кода веб-страницы!!!
Тег input.Данный тег позволяет добавить сразу несколько различных элементов на веб-страницу. Он не имеет отдельного закрывающего тега и является одновременно открывающим и закрывающим.
Давайте удалим тегimg внутри теговbodyи начнем вводить тег input:вводим открывающую угловую скобку: "<". При вводе этого тегаоткрывается окно подсветки (см. рис. 2.9):
Рис. 2.9
Продолжаем ввод и вводим еще две первые буквы от имени тега input (in). После того, как мы введем их, в списке остаются теги с началом названия in. Выбираем input, нажимаем клавишуEnter- тег автоматически вставляется в наш код программы.
Если окно подсветки закрылось, то вернуть его можно с помощью комбинации клавиш <Ctrl+Пробел>.
Внутри тега <body>вводим следующую строку:
<html>
<body>
<input type="text" value="0123456789" maxlength="10" />
</body>
</html>
Посмотрим на результат в браузере (см. рис. 2.10):
Рис. 2.10
Это текстовое поле для ввода. Для тега указаны три атрибута:
type –тип тега, если "text",то это текстовое поле;
value –значение, которые будет изначально вставлено в текстовое поле, если строка пустая, то и поле будет пустым;
maxlength- максимальное количество символов, которое сможет ввести пользователь.
Добавим еще два тегаinput, но уже другого вида:
<html>
<body>
<input type="text" value="0123456789" maxlength="10" />
<input type="password" value="" maxlength="10" />
<input type="button" value="Кнопка" />
</body>
</html>
Посмотрим на полученный результат в браузере - добавилось еще одно текстовое поле для ввода пароля и кнопка(см. рис. 2.11).
Рис. 2.11
Таким образом, если атрибут type="password", то введенные символы отображаются в режиме ввода пароля. Если атрибут type="button", то на страницу добавляется кнопка. Атрибут value задает название кнопки. Рассмотрим еще один вариант тегаinput - c атрибутомtype="checkbox", для этого добавим еще одну строку:
<html>
<body>
<input type="text" value="" maxlength="10" />
<input type="password" value="" maxlength="10" />
<input type="button" value="Кнопка" />
<input type="checkbox" />
</body>
</html>
В браузере мы увидим поле для установки флажка ("галочки") (см. рис. 2.12):
Рис. 2.12
Мы рассмотрели четыре варианта тега input. Обратите внимание, что при выборе значения атрибута также можно использовать окно подсветки и выбирать из него значение. Введем следующую строку:
<input type= />
Теперь установим курсор после знака равенства и нажмем комбинацию клавиш <Ctrl+Пробел>- откроется окно подсветки со списком возможных значений данного атрибута, выбираем из списка значение"checkbox" и нажимаем клавишу Enter.
Следующий тег: div. Он имеет отдельный закрывающий тег и используется в виде:<div> </div>.Данный тег используется в "блочной верстке" или как ее еще называют "div-верстка". С его помощью можно выделить прямоугольный фрагмент страницы в виде блока. Чтобы понять, как он используется,удалим теги input и вместо них впишем:
<html>
<body>
<div style="background-color:red; width: 200px; height: 100px;">Блок</div>
</body>
</html>
В браузере после обновления увидим блок красного цвета(см. рис. 2.13):
Рис. 2.13
Внутри блока мы поместили надпись "Блок".Ширина самого блока 200 пикселей, высота - 100 пикселей.Текст, записанный между открывающим и закрывающим тегами div, выводится внутри блока. У тегаdiv присутствует тег style, который подключает CSS-стили. Цвет фона, ширина и высота задаются при помощи CSS. Таким образом, background-color, width, height –это три CSS-стиля. Данный атрибут style мы уже использовали для тега span. Это пример того, как технология CSS подключается к HTML.
Тег a. Он тоже имеет отдельный закрывающий тег и записывается в виде: <a> </a>. Тег служит для создания ссылки.Вместо тега div добавим две строки с тегом a:
<html>
<body>
<a href="http://yandex.ru" target="_blank">Yandex</a>
<a href="http://google.ru" target="_self">Google</a>
</body>
</html>
Посмотрим в браузере,что у нас получилось. Если код набран без ошибок, то мы должны увидеть следующее(см. рис. 2.14):
Рис. 2.14
Появились две ссылки.При нажатии на ссылку выполнится переход на сайты поисковых систем: либо yandex.ru, либо google.ru. Адрес перехода на нужную веб-страницу указывается в атрибуте href.Текст внутри тегов<a> </a>выводится на страницу в качестве названия ссылки. Атрибут target имеет следующее предназначение: при значении "_blank" будет открываться новое окно в браузере, при значении "_self" веб-страница будет открываться в этом же окне. Например,поисковая служба Yandex откроется в новом окне, т.к. мы указали значение атрибутаtarget - "_blank". Googleоткроется в этом же окне (т.к. указывается значение "_self").
В качестве адреса перехода в атрибуте href можно указать адрес любой существующей страницы, т.е. любую ссылку.
Три тега table, tr, tdимеют открывающий и закрывающий теги и записываются в виде: <table> </table> , <tr> < /tr> , <td> </td>. Их можно объединить в одну группу, т.к. все вместе они отвечают за формирование таблицы. Тег table –это таблица, tr –это строка таблицы, td –это ячейка строки таблицы.
Представим, что перед нами стоит следующая задача: создать таблицу из трех строк, в каждой строке по две ячейки. В каждой строке стоит целое число от 1 до 6. (см. рис.2.15)
Рис. 2.15
Удалим наши ссылки из тега body и начнем формировать таблицу. Добавляем открывающий и закрывающий теги table –все, что находится внутри,будет таблицей:
<html>
<body>
<table>
</table>
</body>
</html>
Добавим первую строку при помощи открывающего и закрывающего тега tr –все, что находится внутри, будет строкой таблицы:
<html>
<body>
<table>
<tr>
</tr>
</table>
</body>
</html>
Добавим две ячейки в строку при помощи открывающих и закрывающих тегов td –все внутри будет содержимым ячейки таблицы. В первую ячейку вставим цифру 1, а во вторую ячейку цифру 2. Обратите внимание на вложенность тегов: строка вложена в таблицу, а ячейки в строку:
<html>
<body>
<table>
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
</table>
</body>
</html>
К тегу tableдобавим атрибутborder со значением 1- это толщина рамки таблицы:
<html>
<body>
<table border="1">
<tr>
<td>
1
</td>
<td>
2
</td>
</tr>
</table>
</body>
</html>
Обновим страницу браузера и посмотрим на результат –появилась одна строка таблицы, состоящая из двух ячеек(см. рис. 2.16)
Рис. 2.16
Осталось добавить еще две строки. У нас уже есть одна строка с двумя ячейками, поэтому копируем блок от открывающего до закрывающего тега tr (вместе с тегомtr). Вставляем скопированный участок кода дважды перед закрывающим тегом table.Получаются две новых строки с двумя ячейками в каждой (см. рис.2.17):
Рис. 2.17
Попробуйте самостоятельно во второй строке таблицы вставить цифры 3и 4, а в третьей строке цифры 5 и6.