Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

Пояснительная записка. ВСоздай свою Web- страницу.

Читайте также:
  1. V. Пояснительная записка
  2. Докладная записка руководителя группы
  3. ЗАПИСКА
  4. Пояснительная записка
  5. Пояснительная записка
  6. Пояснительная записка

ВСоздай свою 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


Дата добавления: 2015-09-06; просмотров: 137 | Нарушение авторских прав


Читайте в этой же книге: Коды цветов | Горизонтальные линии | Нумерованный список | Таблицы | Поля списков |
<== предыдущая страница | следующая страница ==>
Создаем первое приложение под iOS для iPhone и iPod touth| Изменим шрифт вашей странички.

mybiblioteka.su - 2015-2024 год. (0.021 сек.)