Основы языка HTML
Тема 5. Сетевые электронные издания и их разработка.
Cетевое электронное издание -электронное издание, доступное потенциально неограниченному кругу пользователей через телекоммуникационные сети.
Сетевые издания – наиболее распространенный вид ЭИ. Они имеют различное целевое назначение – СМИ, учебные, научные, для досуга, рекламные и др.
В основу структуры HTML-документа положен принцип управляющих символов, которые называются тегами, определяют особенности отображения информации, выводимой на экран монитора. Значительная часть таких тегов используется парами: вначале открывающий тег, затем объект управления, а в конце - закрывающий тег. Такая конструкция называется контейнером, так как объект форматирования размещается внутри нее. Некоторые теги принципиально не нуждаются в паре. Примером может служить тег принудительного перевода строки. Тег может включать в себя некоторые параметры (атрибуты), которые размещаются непосредственно после имени тега. Если параметров несколько, то в качестве разделителей используются пробелы.
Если у потребителей малая скорость и они платят за свой счет – лучше отказаться от сложных мультимедийных эффектов, так как они будут терять много времени при загрузке сайта, не оценят его научную ценность и перестанут ходить. Если у потребителя выделенка и халява – ему всегда будут казаться скучными сайты для первой категории. Мультимедиа в сети работает плохо, поэтому лучше остановиться на статичном дизайне при максимуме информации.
Блокнот – главный инструмент дизайнера. Одновременно загрузите блокнот и Браузер (Nes Navigator).
Общие принципы изготовления статичного сайта.
Главная страница всегда называется index.html. Когда обращаются к сайту по умолчанию вызывают именно ее.
На главной странице сайта задается навигация по сайту в целом.
Каждый тег имеет свой атрибут – заданный параметр, значение. Большинство тегов – парные. Это значит, что тег имеет закрывающий тег, означающий конец выполнения данной команды.
Теги приводятся в <>. Для того, чтобы браузер распознал и открыл Ваш файл необходимо указать ему, что это файл HTML . Для этого служит тег
< HTML > - в начале файла
</ HTML > - в конце файла.
Двойные теги называются в литературе «теги-контейнеры». Теги закрываются в зеркальном порядке.
Между этими тегами размещается вся информация.
Информация делится на заголовок и «тело» странички.
Заголовок помещается после открывающего тега
< HTML >.
<HEAD>
«заголовок сайта»
</HEAD>
Заголовок сайта, который воспринимается как имя файла и выносится браузером в название окна помещается после тега <HEAD>
<TITLE>
</TITLE>
Основной текст документа помещается между тегами
<BODY>
текст
</BODY>
Форматирование текста
Можно приступать к форматированию.
Тег абзаца <p> можно не закрывать.
Тег <p> ставится в начале каждого абзаца, но лучше в конце сроки ставить тег конца строки <br>тоже без парного, так как в этом случае сокращается интервал между строками.
Создать красную строку непросто. Зарубежный тег <p> не предусматривает красной строки. Для этого нужно сделать несколько пробелов и поставить тег знак амперсенд, после которого идут специальные символы.
Провести горзизонтальную черту:
<p></p><hr width=”60%”>
По умолчанию текст отцентрован по левому полю. Чтобы красиво расположить текст в центре надо ввести тег
<p> <center>Основной текст </center><br>.
поля сверху и справа
topmargin=”10”
leftmargin=”10”
Теперь следует оформить заголовок и основной текст.
Уровни заголовков определяют теги H1-H7 (H1 - самый крупный).
Задание шрифта определяют теги <font face=”areal” size=”6” color=”red”> текст </font>
<i>курсив </i> (идет отдельным тегом после <font>)
<b> жирный</b>
Атрибуты цветов –
grean
lime
fuchsia
maroon
blue
grey
silver
Тег цвета фона сайта
<body bgcolor=”gray”>
Вместо однотонного цвета можно вставить узор или рисованный фон. Для этого нужно создать в графическом редакторе (например, PHOTOSHOP)файл размером 100 на 100 пикселей cФОТОШОПЕ . Сохранить его с расширением *.gif/ Затем ввести тегом
<body background=”slides/risunok.gif”>,
где slides/risunok.gif – путь к файлу , если он расположен на том же жестком диске. Удобно создать специальный каталог slides или images для графики. При этом тег bgcolor=”gray” лучше из текста не убирать, поскольку у клиента может быть не графический браузер или графика отключена. Чтобы фон не поглощал текст, полезно убрать контрастность до нуля. Цвет шрифта и фон должны быть контрастными.
Текст, написанный через весь экран, воспринимается плохо. Для этого надо использовать таблицу.
Вставить таблицу –
теги
<TABLE>
таблица
</TABLE>
Атрибуты таблицы
<TABLE wigth=”50%”>
Это значит, таблица занимает половину экрана независимо от размера монитора.
Чтобы получилась настоящая таблица нужно ввести теги строк и ячеек.
Теги строк
<tr>
</tr>
Теги ячеек
<td>
</td>
Форматирование текста в каждой ячейке нужно прописать заново между тегами <td> и </td>.
Чтобы отцентровать таблицу написать тег <center> перед <TABLE>
Чтобы обвести текст в рамочку нужно задать атрибуты таблицы.
<TABLE width="100%" border="1"> - ширина рамки указывается в пикселях.
Выравнивание текста в каждой ячейке указывается тегами
<center>, </center>