ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 18.09.2024
Просмотров: 51
Скачиваний: 0
ВСоздай свою Web- страницу. Пояснительная записка
Человеку начала XXI века сложно наблюдать за развитием информационных технологий со стороны - хотим мы того или нет, но мы находимся внутри этого процесса.
Информационные технологии до неузнаваемости преображают существовавшие веками профессии верстальщика, музыканта, коммерсанта.: Сегодня художник, обладающий определенным набором знаний из области информационных технологий, может заняться дизайном Интернет - сайтов или компьютерной графикой, а завтра эти технологии предложат ему совершенно иной вид деятельности.
В данной программе речь идет о создании Web - страниц, с помощью языка HTML. Вы можете, взяв в руки программу, самостоятельно освоить столь популярный и нужный язык HTML. Сегодня Интернет занимает лидирующее положение в обществе и выбор места работы, учебы, знакомства может осуществляться с помощью Web- страниц, которые вы создаете сами.
Разработка Web-страниц
Интернет поражает своим разнообразием. Страницы каждого из Web-сайтов имеют собственное лицо. Поэтому при создании своей страницы прояви фантазию и твоя страница станет особенной.
Основные элементы HTML
Основу Web составляют документы, называемые Web-страницами. Каждая Web-страница может содержать текстовую информацию, графические элементы, дополнительное оформление, а также гиперссылки, предназначенные для открытия других Web-страниц или прочих ресурсов, содержащихся в Web. Для создания Web-страниц используются специальные языки разметки, позволяющие управлять форматированием, размещением и функциональностью содержащихся на страницах элементов. Наибольшее распространение в Web получил язык HTML (HyperText Markup Language - язык гипертекстовой разметки).
Документы HTML представляют собой текст, в котором содержатся специальные команды (или теги), определяющие форматирование элементов страницы и позволяющие размещать на ней гиперссылки, изображения, специальные элементы оформления и некоторую служебную информацию. Теги HTML заключаются в угловые скобки:
<BR>
Теги HTML могут быть парными или непарными. В первом случае в начале текстового фрагмента, форматирование которого определяется тегом, ставится открывающий тег. Он может содержать дополнительные параметры форматирования, определяющие, например, выравнивание текста в случае тега абзаца:
<Р ALIGN=center>
Значение параметра указывается после символа <=> и может заключаться в двойные (") или одинарные кавычки ('). Использование кавычек является обязательным в том случае, если значение параметра содержит пробелы, например:
<INPUT TYPE=subfnit VALUE="Отпарвить данные">
Закрывающий тег помещается в конце текстового фрагмента, для форматирования которого используется парный тег. Закрывающий тег аналогичен открывающему, но имени тега предшествует символ наклонной черты . Кроме того, закрывающий тег не содержит параметров (согласитесь, было бы нерационально повторять одни и те же параметры в начале и в конце форматируемого фрагмента, и уж вовсе лишено логики пытаться оформить один и тот же фрагмент с использованием параметров взаимоисключающих):
</Р>
Непарные теги, как правило, не относятся к каким-либо определенным фрагментам текста страницы и определяют независимые объекты, например, изображения или горизонтальные разделительные линии, и, соответственно, не имеют закрывающих тегов:
<HR>
Непарный тег также может включать в себя параметры:
<HR WIDTH=75%>
П
риводимое
в этом разделе описание тегов HTML носит
ознакомительный характер. Здесь
представлены лишь наиболее часто
используемые параметры тегов HTML.
Большинство из описываемых тегов
предполагает знакомство с рядом других
параметров, рассмотрение которых выходит
за рамки этой книги.
Шаг1
Теперь приступим к структуре станицы.
Рассмотрим HTML на уровне, который позволит вам создать простейшую страничку и познакомиться с основами HTML. Все теги записываются в угловых скобках <>. Документ должен начинаться тегом <HTML> и заканчиваться закрывающим тегом </HTML>. Эти теги показывают, что дальше будет идти документ в формате HTML. Он должен содержать две части: заголовок (Head) и собственно документ (Body). Т.е. между строчками <HTML> и </HTML> должны находится теги <HEAD></HEAD> и <BODY></BODY>.В заголовке находится название странички (то, которое показывается в заголовке окна) и некоторая другая информация. Для задания названия странички используются теги <TITLE></TITLE>. Между ними текст латинскими буквами. Таким образом страничка имеет вид:
<HTML> <HEAD> <TITLE> Welcome to my home page </TITLE> </HEAD> <BODY> Содержимое странички </BODY> <HTML>
(Кстати, теги можно писать и строчными, и прописными буквами. Для броузера это безразлично).
Рассмотрим основные теги, которые понадобятся вам для создания любой странички. Начнем с текста. Большинство документов имеют заголовок. Для его создания используют теги <hx></hx>, где x - число от 1 до 6. Заключив текст между этими тегами, вы получите заголовок.
|
пример тегов
|
|
|||
|
<h1>Заголовок 1</h1> |
Заголовок 1 |
|||
|
<h2>Заголовок 1</h2> |
Заголовок |
|||
|
<h3>Заголовок 1</h3> |
Заголовок |
|||
|
<h4>Заголовок 1</h4> |
Заголовок |
|||
|
<h5>Заголовок 1</h5> |
Заголовок |
|||
|
<h6>Заголовок 1</h6> |
Заголовок |
Создание нового абзаца - это просто. Тег <br>. Если вы хотите создать большой отступ, то используйте код пропуска строки - <p>. Рассмотрим форматирование символов. Для придания тексту жирного начертания поместите его между тегами <b></b>, курсивного - <i></i>, подчеркнутого - <u></u>.
|
пример тегов
|
|
|||
|
<b>жирный текст</b> |
жирный текст |
|||
|
<i>курсив</i> |
курсив |
|||
|
<u>подчеркнутый</u> |
подчеркнутый |
Для задания размера текста используется атрибут SIZE= тега <FONT>. Он позволяет задавать размер текста по отношению к текущему, принятому по умолчанию равным 3. Поместив текст между тегами <FONT SIZE="x"></FONT>, где x - целое число, вы придадите ему нужный вам размер.
|
пример тегов
|
|
|||
|
<font size="1">Поместив </font><font size="3">текст </font><font size="5">между </font><font size="7">тегами ...</font> |
Поместив текст между тегами ... |
Используя полученные данные составьте программу на языке HTML, используя размер заголовка, размер и конфигурацию текста. Для этого создайте папку с вашим именем, в папке создайте документ блокнот и этом документе пропишите свою программу. Как только программа будет прописана сохраните её с расширением html.
"Пример простой странички"
1. Загрузить программу БЛОКНОТ.
2. Создать новый файл:
<html>
<head>
<title>
Заголовок документа
</title>
</head>
<body>
<h1>ПРИМЕР ПРОСТОЙ СТРАНИ<font size="1">Это </font><font size="3">моя </font><font size="5">первая </font><font size="7">страницка ...</font>ЧКИ</h1>
</body>
</html>
3. Сохранить файл в папке своего класса под именем <fam>_index.htm
Открыть папку своего класса и загрузить созданный файл. При этом откроется программа Internet Explorer и на экране появится следующий текст:
|
ПРИМЕР ПРОСТОЙ СТРАНИЧКИ Это моя первая страничка ... |
Шаг2
Изменим шрифт вашей странички.
Шрифт Для выделения определенных фрагментов текста, например, с целью обратить внимание посетителя на важную информацию или указать текст, являющийся примером программного кода, нередко используются такие параметры шрифта, как полужирное или курсивное начертание, подчеркивание или зачеркивание. Кроме того, может возникнуть необходимость во включении в текст документа подстрочных или надстрочных индексов, характерных, например, для математических или химических формул. Для указания таких параметров форматирования шрифта в HTML предусмотрен ряд тегов. В табл. 10.1 приведены наиболее часто используемые ил этих тегов.
Таблица 10.1. Теги HTML, определяющие параметры шрифта
|
Тег |
Описание |
|
<В>Символы</В> |
Полужирное начертание |
|
<I>Символы</I> |
Курсивное начертание |
|
<и>Символы</и> |
Подчеркнутый текст |
|
<STRIKE>Символы</STRIКЕ> или <S>Символы</S> |
Зачеркнутый текст |
|
<ТТ>Символы</ТТ> |
Моноширинный шрифт |
|
<SUP>Символы</SUР> |
Надстрочный индекс |
|
<SUВ>Символы</SUВ> |
Подстрочный индекс |
|
<FONT>Символы</FONT> |
Параметры шрифта |
Первые семь тегов определяют начертание символов, а также подчеркивание, зачеркивание и положение символов в строке (надстрочные и подстрочные индексы). Все эти теги являются парными и нс предусматривают указания дополнительных параметров. Следует особо отметить, что подчеркивание в HTML-документах, как правило, применяется для обозначения гиперссылок, поэтому во избежание путаницы следует по возможности избегать использования тега <U>...</U>.