Выравнивание по вертикалиB
>TD
> valign=top
> По верхнему краю TD
> | По центру TD
> | По нижнему краю TD
> TR
> TABLE
> В результате мы получим следующую таблицу: Выравнивание по горизонтали
По центру По левому краю По правому краю Выравнивание по вертикали
По верхнему краю По центру По нижнему краю <
table
width
=500
border
=3>
Успеваемость
N п
/
п
Фамилия
Школа
Класс
Практическая работа № 9 «Создание и форматирование таблицы»
Цель:
научиться создавать и форматировать простые таблицы в текстовом редакторе Блокнот. Указания к выполнению:
Создайте новую Web-страницу, которая в броузере должна выглядеть следующим образом:
Фамилия
Номер телефона
Петрова А.И.
31-74-16
Смирнов В.П.
46-29-89
Цвет фона таблицы - серебристый, ширина рамки таблицы – 1.
В элементе укажите название странички «П/р №14».
Просмотрите созданную Web-страницу в окне броузера.
Вернитесь к сохраненному в Блокноте файлу. Внесите в него изменения так, чтобы Web-страница в броузере выглядела следующим образом:
Телефонный справочник
Фамилия
Номер телефона
Петрова А.И.
31-74-16
Смирнов В.П.
46-29-89
Цвет фона ячеек первой строки – светло-зеленый, цвет фона ячеек остальных строк – серебристый, ширина рамки таблицы – 5.
Просмотрите Web-страницу в окне броузера.
Сохраните изменения.
Объединение строк или столбцов в ячейке
.
При построении сложных таблиц бывает необходимо объединить (слить) в одной ячейке несколько строк или столбцов. Для этого существуют атрибуты: colspan - у
казывает количество столбцов, объединенных в одной ячейке (по умолчанию=1), rowspan - у
казывает количество строк, объединенных в одной ячейке (по умолчанию=1). Примеры:
1
1
Все отличие такого построения таблиц заключается в появлении параметра rowspan="2",
цифра в которой, соответствует количеству "подстрок", т.е. буквально то, сколько строк слилось в ячейке. Если в симметричной таблице мы читаем слева-направо, то тут происходит то же самое, только почему же в коде впереди ячейки с двойкой стоит ячейка с цифрой три? Все очень просто - буквально
код для первой строки расшифровывается как "ячейка, содержащая данное 1", "ячейка, содержащая данное 3, состоящая из ДВУХ подстрок", код для второй строки расшифровывается как "ячейка, содержащая данное 2". Как видим, физически ячейка 3 принадлежит к ПЕРВОЙ строке!
Если же у нас существуют ячейки, совмещенные по горизонтали, то вместо тега rowspan
используется тег colspan
, естетсвенно, в той ячейке, которая занимает площадь нескольких столбцов). Например:
Практическая работа № 10 «Объединение строк или столбцов в ячейках таблицы»
Цель:
научиться создавать сложные таблицы в текстовом редакторе Блокнот. Указания к выполнению:
Откройте текстовый редактор Блокнот.
Создайте новую Web-страницу, которая в браузере должна выглядеть следующим образом:
Успеваемость
п/п
Фамилия
Школа
Класс
Оценки по химии
1 п/г
2 п/г
Иванов
Петров
Сидоров
Цвет фона первой строки таблицы - аквамарин, ширина таблицы – 500, ширина рамки таблицы – 3.
В элементе укажите название странички «П/р №10».
Просмотрите созданную Web-страницу в окне браузера.
Вернитесь к сохраненному в Блокноте файлу.
Разметка Web-страницы при помощи таблицы.
Разметку Web-страницы удобно производить с использованием таблицы. Возможны различные варианты разметки. Рассмотрим некоторые из них. Первый вариант.
Разметка страницы производится с использованием страницы шириной на весь экран, независимо от того, каково разрешение экрана (width
=”1000%”). В данном случае удобно создать таблицу, состоящую из двух строк и двух столбцов. Верхняя строка будет отведена под заголовок странички, левый столбец будет отведен под меню Web-сайта. При такой разметке страничка всегда будет занимать весь экран, не зависимо от того, какое разрешение экрана стоит у посетителя (рис. 4.12). ![](https://i1.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m775cb074.png) Рис. 4.12.
Пример разметки
Web
-страницы. Первый вариант
К недостаткам такой разметки можно отнести "плавучесть" содержимого страницы, т. е. при уменьшении разрешения экрана содержимое должно поместиться в более узкие рамки, следовательно текст "сползает" вниз. Чтобы этого не происходило, нужно выбрать фиксированный размер таблицы, тогда при любом разрешении экрана таблица будет выглядеть неизменной. Второй вариант.
Разметка страницы производится с использованием таблицы шириной 760 пикселов, выровненной по центру экрана. При этом посетитель, у которого разрешение экрана равно 800x600 пикселов, будет видеть страничку шириной практически во весь экран, а посетитель, у которого разрешение монитора равно 1024x768 и выше, будет видеть таблицу шириной 760 пикселов по центру экрана и белые поля по бокам от нее. В данном случае удобно создать таблицу, состоящую из трех строк и одного столбца. Верхняя строка будет отведена под заголовок странички, вторая строка будет отведена под меню Web-сайта, а третья строка непосредственно под содержание сайта (рис. 4.13). ![](https://i1.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_20004b1a.png) Рис. 4.13.
Пример разметки
Web
-страницы. Второй вариант
Если необходимо разместить внутри текста странички какие-либо иллюстрации, фотографии и пр., то в этом случае также используются таблицы. В приведенном ниже примере во вторую ячейку второй строки вставлена таблица, состоящая из двух строк и трех столбцов. В первую и в третью ячейки первой строки вставлены рисунки, а во вторую ячейку первой строки -название страницы. Во все ячейки второй строки введен текст (рис. 4.14). Рис. 4.14.
Пример разметки
Web
-страницы. Третий вариант
![](https://i2.wp.com/ds03.infourok.ru/uploads/ex/08a8/00002fb7-1e40425c/hello_html_m32b43cfb.png) Тема 5
. Итоговая работа «Создание Web-сайта на заданную тему в ТР «Блокнот» Учащиеся дома разрабатывают и оформляют на бумаге в виде творческой работы проект Web-сайта, а затем на уроке реализовывают его средствами языка HTML
. _____________________________________________________________________________ Курс разработан на основе книги И. Смирновой "Начала Web-дизайна".
Санкт-Петербургский Государственный
Политехнический Университет
Факультет Экономики и Менеджмента
Кафедра: Экономика и менеджмент в
электроэнергетике и природопользовании
Курсовая работа
Информационные технологии в
энергетике
«Создание
web
-страниц
при помощи языка
HTML
».
Руководитель: Васильева Вероника
Игоревна
Выполнила студентка группы 2073/2: Марьина
Виктория.
г. Санкт-Петербург
Введение
……………………………………………………………………3
1.
Основные понятия языка HTML………………………………………..4
1.1 История появления языка
HTML………………………………….4
1.2.Структура
файла в формате HTML……………………………....6
1.3. Списки базовых
тэгов HTML……………………………………..9
1.4. Создание таблиц
в HTML………………………………………..10
1.5 Создание гипертекстовых
ссылок………………………………..12
2.
Описание создание сайта «Стрельба из
лука»…..……………………..14
Заключение………………………………………………………………….22
Список
литературы………………………………………………………....23
Введение.
Тема моей курсовой работы
«Создание web-страниц
при помощи языка HTML
» очень актуальна в настоящее время,
так как мы живем в век компьютерных
технологий и Интернет занимает огромное
место в жизни работающих и учащихся
людей. Интернет, который не мыслим без
языка HTML
при помощи которого и создаются
web-страницы,
проникает во все самые важные части
человеческой жизни и является безграничным
источником информации.
Мой курсовой проект разработан
на примере сайта, который я создавала
и который является самим же предметом
работы. Поэтому в дальнейшем все
использованные материалы будут взяты
из него.
Целью моей работы было научиться
создавать сайт и использовать для этого
необходимые алгоритмы, которые будут
описаны в моей работе.
Для написания своего курсового
проекта я буду использовать лекции, в
которых подробно и ясно изложены основные
понятия, которые понадобятся в дальнейшем
изучении. Помимо этого я буду включать
информацию, взятую из Интернета.
1.1
История появления языка
HTML
.
англ. Hyper
Text
Markup
Language
- «язык разметкигипертекста»)
- стандартныйязык
разметки документов
воВсемирной
паутине.
Большинствоweb-страниц создаются
при помощи языка HTML (илиXHTML).
Язык HTML интерпретируетсябраузером и
отображается в виде документа, в удобной
для человека форме.
HTML является приложением («частным
случаем»)SGML (стандартного
обобщённого языка разметки) и соответствует
международному стандартуISOXHTML же
является приложениемXML.
британскимТимом
Бернерсом-Ли приблизительно
в19911992
годах в
стенахЕвропейского
совета по ядерным исследованиямЖеневеШвейцария).
HTML создавался как язык для обмена научной
и технической документацией, пригодный
для использования людьми, не являющимися
специалистами в области вёрстки.
HTML успешно справлялся с проблемой
сложности SGML путём определения небольшого
набора структурных
исемантическихдескрипторов.
Дескрипторы также часто называют
«тегами».
С помощью HTML можно легко создать
относительно простой, но красиво
оформленный документ. Помимо упрощения
структуры документа, в HTML внесена
поддержка гипертекста.Мультимедийные возможности
были добавлены позже. Изначально язык
HTML был задуман и создан как средство
структурирования и форматирования
документов без их привязки к средствам
воспроизведения (отображения). В идеале,
текст с разметкой HTML должен был без
стилистических и структурных искажений
воспроизводиться на оборудовании с
различной технической оснащённостью
(цветной экран современного компьютера,
монохромный экран органайзера,
ограниченный по размерам экран мобильного
телефона или устройства и программы
голосового воспроизведения текстов).
Однако современное применение HTML очень
далеко от его изначальной задачи.
С течением времени, основная
идея платформонезависимости языка HTML
была отдана в своеобразную жертву
современным потребностям в мультимедийном
и графическом оформлении.
Текстовые
документы, содержащие код на языке HTML
(такие документы традиционно
имеютрасширение
.html
или.htm
),
обрабатываются специальнымиприложениями
,
которые отображают документ в его
форматированном виде. Такие приложения,
называемые «браузерами» или
«интернет-обозревателями», обычно
предоставляют пользователю
удобныйинтерфейс
для
запросаweb
-страниц
,
их просмотра (и вывода на иные внешние
устройства) и, при необходимости, отправки
введённых пользователем данных на
сервер. Наиболее популярными на
сегодняшний день браузерами
являютсяInternet
Explorer
Mozilla
Firefox
Safari
Google
Chrome
Opera
.
1.2
Структура файла в формате HTML
Для создания web-страницы
в первую очередь нам потребуется создать
файл с расширением "htm" или "html"
и открыть его для редактирования в
текстовом редакторе (работая в Windows,
можно использовать стандартную программу
"Блокнот").
Текст для HTML-документа набирается
в том виде, в котором его должен показать
браузер, а при выделения фрагментов,
которые предназначены для разметки
документа (тегов), используются угловые
скобки (знаки "").
Любой документ HTML начинается с
открывающего тега и заканчивается
соответствующим ему закрывающим тегом.
Закрывающий тег отличается от открывающего
наличием косой черты перед названием
тега. В языке HTML нет различий между
большими и малыми буквами при записи
тегов, однако принято записывать
открывающий тег большими буквами, а
закрывающий - малыми. Часть документа,
которая находится в пределах от
открывающего до соответствующего ему
закрывающего тега, называется контейнером
(to contain - содержать что-либо). Теги, у
которых есть закрывающий и открывающий
варианты записи называются парными, а
те, которые используются только в одном
виде (например, тег ), называются непарными. Весь файл
web-страницы - это по сути дела один большой
контейнер HTML.
Внутри контейнера HTML последовательно
записываются два контейнера:
1.Заголовок документа
().
Внутри этого контейнера записываются
параметры, общие для всей страницы. Для
примера можно поместить сюда контейнер, позволяющий поместить текст для
отображения в заголовке окна браузера.
2.Тело документа
(). Этот контейнер
содержит всё то, что должен показать
браузер внутри своего окна при открытии
документа. Если документ содержит только
текст, то этот текст нужно записывать
именно здесь, если есть другие элементы
(графика, таблицы, ссылки и т. д.). Элемент
BODY
должен встречаться в документе не более
одного раза.
Если сравнить исходные тексты
различных Web-страниц, можно легко увидеть
сходство их структур. Это объясняется
тем, что документы создаются по
определенным правилам. В основу синтаксиса
языка HTML лег стандарт ISO 8879:1986 «Information
processing. Text and Office systems. Standard Generalized Markup
Language (SGML)». Правда, существует большое
различие между стандартом официальным
и стандартом фактическим.
Ниже приведен шаблон типичного
Web-документа. На его примере мы рассмотрим
общие принципы построения HTML-страниц.
Для того чтобы понять структуру
Web-страницы, нам необходимо подробно
рассмотреть все элементы, входящие в
приведенный ниже пример.
исходная
тело документа
Если приведенный выше пример
пояснить схематически, получится
следующее:
Из схемы видно, что документ
состоит из двух основных блоков –
"заголовка" и "тела документа".
Заголовок определяется с помощью
элемента HEAD,
а тело – элементом BODY.
Заголовок содержит "техническую"
информацию о документе, хотя чаще всего
используется только для обозначения
его названия (см. элемент
TITLE).
Тело документа – самая важная
составляющая. Именно в нем находится
все то, что отображается на странице:
текст, картинки, таблицы.
Заголовок создается с помощью
элемента HEAD,
между тегами которого размещаются
элементы, содержащие техническую
информацию о документе. Заголовок обычно
располагается до тела документа.
Элементы, относящиеся к заголовку
документа:
HEAD -
определяет начало и конец заголовка
документа. Является контейнером для
элементов, содержащих техническую
информацию о документе.
TITLE -
определяет имя всего документа, которое
отображается в заголовке окна браузера.
Имя, как правило, отображается в заголовке
окна браузера. Данный элемент обязателен
для любого HTML-документа и может быть
указан не более одного раза.
BASE
- Указывает базовый адрес текущего
документа (URL), который станет отправной
точкой для расчета относительных адресов
внутри документа. Элемент не имеет
конечного тега. Обязательно присутствие
хотя бы одного из атрибутов.
1.3. Списки
базовых тэгов HTML
Список
базовых тэгов HTML необходимых для
формирования текста web-страницы.
Стартовый
|
Завершающий
|
Описание
|
|
|
Обозначение
HTML-документа
|
|
|
Заголовочная
часть документа
|
|
|
Заголовок
документа
|
|
|
Тело документа
|
|
|
Заголовок
абзаца первого уровня
|
|
|
Заголовок
абзаца второго уровня
|
|
|
Заголовок
абзаца третьего уровня
|
|
|
Заголовок
абзаца четвертого уровня
|
|
|
Заголовок
абзаца пятого уровня
|
|
|
Заголовок
абзаца шестого уровня
|
|
|
|
|
|
Форматированный
текст
|
|
|
Перевод
строки без конца абзаца
|
|
|
|
Можно
так же комбинировать различные виды
стилей, например жирный и наклонный.
Дополнительные
стили:
1.4.
Создание таблиц в
HTML.
Таблицы в HTML организуются как
набор столбцов и строк. Ячейки таблицы
могут содержать любые HTML-элементы,
такие, как заголовки, списки, абзацы,
фигуры, графику, а также элементы форм.
Основные
тэги таблицы
Это основноые тэги, описывающие
таблицу. Все элементы таблицы должны
находиться внутри этих двух тэгов. По
умолчанию таблица не имеет обрамления
и разделителей. Обрамление добавляется
атрибутом BORDER.
Строка таблицы: |
Описывает стандартную ячейку
таблицы. Ячейка таблицы может быть
описана только внутри строки таблицы.
Каждая ячейка должна быть пронумерована
номером колонки, для которой она
описывается. Если в строке отстутствует
одна или несколько ячеек для некоторых
колонок, то броузер отображает пустую
ячейку. Расположение данных в ячейке
по умолчанию определяется атрибутами
ALIGN=left и VALIGN=middle. Данное расположение
может быть исправлено как на уровне
описания строки, так и на уровне описания
ячейки.
Ячейка заголовка таблицы имеет
ширину всей таблицы; текст в данной
ячейке имеет атрибут BOLD и ALIGN=center.
Подпись:
...
Данный тэг описывает название
таблицы. Тэг должен присутствовать
внутри
BORDER - Данный атрибут
используется в тэге TABLE. Если данный
атрибут присутствует, граница таблицы
прорисовывается для всех ячеек и для
таблицы вцелом. BORDER может принимать
числовое значение, определяющее ширину
границы, например BORDER=3.
ALIGN - Если атрибут
ALIGN присутствует внутри тэгов
и, то он определяет положение
подписи для таблицы (сверху или снизу).
По умолчанию ALIGN=top.
Если атрибут ALIGN
встречается внутри
,
и
| . Он определяет вертикальное
размещение данных в ячейках. Может
принимать значения top (вверху), bottom
(внизу), middle (по середине) и baseline (все
ячейки строки прижаты кверху).
NOWRAP - Данный атрибут
говорит о том, что данные в ячейке не
могут логически разбиваться на несколько
строк и должны быть представлены одной
строкой.
COLSPAN - Указывает, какое
количество ячеек будет объединено по
горизонтали для указанной ячейки. По
умолчании - 1.
ROWSPAN - Указывает, какое
количество ячеек будет объединено по
вертикали для указанной ячейки. По
умолчании - 1.
COLSPEC - Данный параметр
позволяет задавать фиксированную ширину
колонок либо в символах, либо в процентах,
например COLSPEC="20%".
1.5.
Гипертекстовые ссылки.
Гипертекстовые ссылки
являются ключевым компонентом, делающим
web
привлекательным для пользователей.
Добавляя гипертекстовые ссылки можно
сделать набор документов связанным и
структурированным, что позволяет
пользователю получать необходимую ему
информацию максимально быстро и удобно.
Так же можно использовать
ссылки как для перемещения по документу,
так и для перемещения от одного документа
к другому. Однако, HTML не поддерживает
возврат на предыдущую ссылку, если
перемещение происходило внутри документа.
Если вы используете ссылки внутри
документа, а затем нажимаете на клавишу
Back, то вы не перейдете на предыдущую
ссылку, а вернетесь на ту часть документа,
которую вы просматривали до этого.
Для
создания гиперссылок используются
следующие теги
2.
Описание создание сайта «Стрельба из
лука»
На рисунке 1 показан блокнот в
котором выполнялось изготовление моего
сайта «Стрельба из лука»,а именно
исходной страницы или главной страницы
сайта.
Были заданы цвет фона (серый),
цвет шрифта (черный, красный и т.д.), рис.
1; размер шрифта, также были сделаны
гиперссылки на другие страницы в верхней
части в виде таблицы:
|
В
личном и
командном зачете, женские и
мужские команды, с 1972 года....
(рис.
3)
![](https://i0.wp.com/works.doklad.ru/images/7ZTA_feCTOM/m1e48ba06.png)
![](https://i1.wp.com/works.doklad.ru/images/7ZTA_feCTOM/35f068bb.png)
На рис.4 показан блокнот в котором
выполнялось изготовление 2 страницы, а
именно «Исток происхождения» , также
были заданы цвет фона, цвет шрифта,
размер шрифт (рис4)
, были сделаны неизменные
гиперссылки в виде таблицы на другие
страницы:
|
(рис
5)
а
также на нужные участки текста:
(рис. 6)
![](https://i1.wp.com/works.doklad.ru/images/7ZTA_feCTOM/m3ca9e5d3.png)
![](https://i0.wp.com/works.doklad.ru/images/7ZTA_feCTOM/3e694fb0.png)
![](https://i0.wp.com/works.doklad.ru/images/7ZTA_feCTOM/3485de23.png)
Блокнот в котором выполнялось
изготовление 3 страницы, а именно
«Крупнейшие соревнования»
Использовались
все те же настройки цветов и размеров
шрифта что и на предыдущих страницах,
также осталась неизменной верхняя
таблица с гиперссылками на другие
страницы.
На
рис.7 показан блокнот в котором выполнялось
изготовление 4 страницы, а именно
«Инвентарь»
Все
настройки остались такими же как и на
предыдущих страницах, добавились
гиперссылки с названиями тем абзацев,
при нажатии на которые попадаешь
непосредственно на нужный участок
страницы (рис 7)
![](https://i1.wp.com/works.doklad.ru/images/7ZTA_feCTOM/m38a1faa0.png)
На
рис.8 показан блокнот в котором выполнялось
изготовление 5 страницы, а именно
«Правила»; настройки неизменны, добавились
гиперссылки того же типа что и на
предыдущей странице
ж
На
рис.9 показан блокнот в котором выполнялось
изготовление 6 страницы, а именно
«Победители Олимпийских игр» , где
сохранились все прежни настройки, но
добавились таблицы с данными.
![](https://i1.wp.com/works.doklad.ru/images/7ZTA_feCTOM/m3f5b09bf.png)
Заключение.
В ходе выполнения данной работы
я научилась создавать сайт при помощи
языка HTML
и использовала для этого необходимые
алгоритмы, которые описаны в моей работе.
Для написания своего курсового
проекта я использовала материалы из
Интернета и лекции, благодаря им задачи
которые я ставила перед написанием
работы выполнены.
Список
используемой литературы:
1.http://html.find-info.ru/html/
2.http://scriptic.narod.ru/html/
3.
http://html.manual.ru/book/html/
Развитие IT-сферы, а именно рост спроса на услуги по созданию и поисковому продвижению веб сайтов , привел к тому, что появилось множество, так называемых, веб-мастеров, готовых выполнить все работы по сайту и его дальнейшую поддержку. Стоит ли говорить, что большая часть подобных проектов создавалась с помощью бесплатных конструкторов, в сами «мастера» имеют лишь теоретическое представление о технической составляющей качественного веб-ресурса. Веб-дизайн сайта, заполнение, продуманность юзабилити - все это, безусловно, важно. Но технически неисправный сайт, с ошибками в коде просто обречен на неудачу.
Коротко о распространенных языках программирования
PHP
. В основе лежит язык разметки HTML. PHP - это язык сценариев общего назначения, исходный код - открытый. Синтаксис достаточно легко поддается освоению, имеет немало общих черт с C, Java и Perl. Главное преимущество PHP заключается в том, что с его помощью разработчики могут оперативно создавать динамически генерируемые веб-страницы. При профессиональном владении языком, его можно использовать и для выполнения других задач.
Python.
В русском языке распространено как "питон". Высокоуровневый язык программирования общего назначения, ориентированный на повышение производительности разработчика и читаемости кода. Синтаксис ядра Python минималистичен. В то же время стандартная библиотека включает большой объём полезных функций.
Ruby
. В русском языке распространено как "руби". Динамический, рефлективный, интерпретируемый высокоуровневый язык программирования для быстрого и удобного объектно-ориентированного программирования. Язык обладает независимой от операционной системы реализацией многопоточности, строгой динамической типизацией, сборщиком мусора и многими другими возможностями. По особенностям синтаксиса он близок к языкам Perl и Eiffel, по объектно-ориентированному подходу — к Smalltalk. Также некоторые черты языка взяты из Python.
ASP
. Разработчиком данного языка является Microsoft. Технология позволяет разрабатывать приложения для WWW. ASP легко и быстро. Платформы для работы ASP: Windows NT и IIS (Internet Information Server). Не совсем корректно называть ASP языком, скорее, это именно технология для подключения программы к Web-страницам. Простой скриптовый язык и возможность использования внешних COM-компонентов - вот и весь секрет успеха ASP.
JavaScript
. Принцип работы JavaScript несколько отличается от других языков программирование. Главное отличие состоит в том, что он подключается напрямую в HTML-файл. Сценарий, написанный на JavaScript, проходит обработку интерпретатором, встроенным в браузер.
Области использования языка весьма обширны:
- Создание веб-страниц, которые могут изменяться после загрузки документа
- Решение локальных задач
- Проверка грамотности заполнения форм пользователем до их пересылки на сервер
Многообразие возможностей javascript обуславливает популярность языка. С его помощью можно:
- Вносить изменения на страницу: работать с тегами, менять стили, писать текст
- Реагировать на события (например, клик мыши) и выполнять определенную функцию
- Выводить сообщения, проверять корректность данных, устанавливать и считывать cookie
- Загружать данные без перезагрузки страницы и т.д.
Perl
. Изначально этот язык был средством для соединения программок, выполняющих различные функции, в единый сценарий, позволяющий решить комплекс задач: обработка текста, администрирование и т.д. Сегодня Perl - это основное средство для создания приложений CGI. С его помощью выполняется администрирование веб-серверов и других систем. Простота и оперативность написания сценариев на данном языке привели к его адаптации на такие платформы, как Windows, Mac и т.д. Perl - открыт и доступен, исходные тексты интерпретатора можно получить совершенно бесплатно.
Полезен ли большой багаж знаний?
Основам программированию учат на школьных уроках информатики. С Делфи и Паскаль сталкивался практически каждый. Более сложные языки требуют куда более серьезного подхода к изучению. Определенный склад ума - математически-логический и, конечно, желание стать специалистом в своем деле помогут начинающему программисту добиться успеха. Не стоит стараться освоить все языки сразу. Лучше отлично знать один, чем обладать обрывочными знаниями о пяти. В каждом языке программирования есть общие принципы, все они построены на логике действий, поэтому с опытом, осваивать новые технологии станет быстрее и проще. Изменять и копировать готовые коды могут многие, но стать настоящим «художником», а не подражателям могут далеко не все программисты.
Разработка Web-сайтов с использованием языка разметки гипертекста HTML
Web-страницы и Web-сайты
Web-страницы.
Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере.
Основными достоинствами Web-страниц являются:
- малый информационный объем;
- возможность просмотра в различных операционных системах.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").
Web-сайты.
Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д.
Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.
Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.
Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).
Контрольные вопросы
1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?
2. Каким образом Web-страницы объединяются в Web-сайты?
Структура Web-страницы
HTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.
Заголовок Web-страницы заключается в контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.
Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером
).
Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.
Название страницы помещается в контейнер и при просмотре отображается в верхней строке окна браузера.
Отображаемое в браузере содержание страницы помещается в контейнер (рис. 6.26):
<ТITLE>КомпьютерТITLE>
Компьютер и ПО
![](https://i2.wp.com/5byte.ru/9/images/inet26.gif) |
Рис. 6.26. Заготовка Web-страницы "Компьютер"
|
Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.
Контрольные вопросы
1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы?
6.10. Практическое задание. Создать заготовку Web-страницы "Компьютер" и просмотреть ее в браузере.
Форматирование текста на Web-странице
Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста.
Заголовки.
Размеры шрифтов заголовков задаются парами тэгов от <Н1>Н1> (самый крупный) до <Н6>Н6> (самый мелкий).
Шрифт.
Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE - размер шрифта (например, SIZE=4).
Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением.
Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие - интенсивность зеленого (green) и две последние - интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная - FF. Например, синий цвет задается значением "#0000FF".
Выравнивание текста.
Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN="left", выравнивание по правой границе: ALIGN="right", выравнивание по центру: ALIGN= "center".
Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:
<Н1 ALIGN="center">Компьютер и ПОН1>
Горизонтальная линия.
Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга .
Абзацы.
Разделение текста на абзацы производится с помощью контейнера <Р>Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.
Домашняя страница сайта.
На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта "Компьютер" текст, разбитый на абзацы с различным выравниванием:
<Р ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.Р>
<Р ALIGN= "right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.Р>
Таким образом, домашняя страница сайта "Компьютер" будет содержать отцентрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев (рис. 6.27):
<Н1 ALIGN="center">
Компьютер и ПО
Н1>
<Р ALIGN="left">Ha этом сайте...Р>
<Р ALIGN ="right"> Терминологический словарь
...Р>
![](https://i2.wp.com/5byte.ru/9/images/inet27.gif) |
Рис. 6.27. Web-страница "Компьютер" с отформатированным текстом
|
Контрольные вопросы
1. Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Ввода абзацев?
Задания для самостоятельного выполнения
6.11. Практическое задание. Создать Web-страницу "Компьютер" с отформатированным текстом и просмотреть ее в браузере.
Вставка изображений в Web-страницы
На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG.
Вставка изображений.
Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:
![](/life-hacks-for-pc/yazyk-dlya-napisaniya-web-stranic-sozdanie-web-stranic-s-pomoshchyu-yazyka-html-zadaniya-dlya.html)
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
![](/life-hacks-for-pc/yazyk-dlya-napisaniya-web-stranic-sozdanie-web-stranic-s-pomoshchyu-yazyka-html-zadaniya-dlya.html)
Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например:
![](/life-hacks-for-pc/yazyk-dlya-napisaniya-web-stranic-sozdanie-web-stranic-s-pomoshchyu-yazyka-html-zadaniya-dlya.html)
Положение рисунка относительно текста.
Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
На домашней странице сайта "Компьютер" логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28):
![](/life-hacks-for-pc/yazyk-dlya-napisaniya-web-stranic-sozdanie-web-stranic-s-pomoshchyu-yazyka-html-zadaniya-dlya.html)
![](https://i1.wp.com/5byte.ru/9/images/inet28.gif) |
Рис. 6.28. Вставка изображения в Web-страницу "Компьютер"
|
Вставка альтернативного текста.
Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.
Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
![](/life-hacks-for-pc/yazyk-dlya-napisaniya-web-stranic-sozdanie-web-stranic-s-pomoshchyu-yazyka-html-zadaniya-dlya.html)
Контрольные вопросы
1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?
Задания для самостоятельного выполнения
6.12. Практическое задание. Вставить в Web-страницу "Компьютер" изображение и просмотреть ее в браузере.
Гиперссылки на Web-страницах
Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:
Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:
<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Указатель ссылкиА>
Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок "рука". Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.
- к просмотру изображения в браузере:
<А HREF="picture.jpg">Изображение - к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла:
<А HREF="sound.wav">Звук - к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов:
<А HREF="Apxив.ziр">Скачать файлА>
Панель навигации по сайту.
Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь", "Комплектующие" и "Анкета". Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие "пустые" страницы должны иметь заголовки, но могут пока не иметь содержания:
<ТITLЕ>Заголовок страницыТITLЕ>
На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации.
Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:
<Р ALIGN="center">
[<А HREF="software . htm">Программы]  
[Словарь]  
[КомплектующиеА>] 
[Aнкетa]
Гиперссылка на адрес электронной почты.
Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер , который задает стиль абзаца, принятый для указания адреса:
<А HREF="mailto:[email protected]">E-mail:
[email protected]
Теперь по щелчку по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке Кому
будет указан заданный в ссылке адрес.
Итак, созданная домашняя страница Web-сайта "Компьютер" содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты (рис. 6.29).
![](https://i0.wp.com/5byte.ru/9/images/inet29.gif) |
Рис. 6.29. Готовая домашняя страница сайта "Компьютер"
|
Контрольные вопросы
1. Какой тэг и его атрибуты используются для создания гиперссылок?
Задания для самостоятельного выполнения
6.13. Практическое задание. Создать Web-страницу "Компьютер", содержащую панель гиперссылок на другие страницы сайта, и просмотреть ее в браузере.
Списки на Web-страницах
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
- нумерованные списки, когда элементы списка идентифицируются с помощью чисел;
- маркированные списки, когда элементы списка идентифицируются с помощью специальных символов (маркеров);
- списки определений, позволяющие составлять перечни определений в так называемой словарной форме.
Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.
Нумерованные списки.
Нумерованный список располагается внутри контейнера можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и ДР.:
< LI >Системные программы
< LI >Прикладные программы
< LI >Системы программирования
Маркированные списки.
Маркированный список располагается внутри контейнера , а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность):
< LI >текстовые редакторы;
< LI >графические редакторы;
< LI >электронные таблицы;
< LI >системы управления базами- данных.
На Web-страницу "Программы" поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера.
Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).
Список определений.
Список определений располагается внутри контейнера /. Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами - и определений, которые следуют за одинарными тэгами
- .
Web-страницу "Словарь" мы представим в виде словаря компьютерных терминов (рис. 6.31):
Процессор
- Центральное устройство компьютера, производящее обработку информации в двоичном коде.
Оперативная память
- Устройство, в котором хранятся программы и данные.
Контрольные вопросы
1. Какие тэги используются для создания нумерованных списков? Маркированных списков?
Задания для самостоятельного выполнения
6.14. Практическое задание. Создать Web-страницу "Программы" с нумерованным списком и вложенным маркированным списком.
6.15. Практическое задание. Создать Web-страницу "Словарь" со списком терминов.
|