Студопедия

КАТЕГОРИИ:


Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)

Заголовки




Название домашней страницы

СОЗДАНИЕ WEB-СТРАНИЦ

(методические рекомендации по созданию Web-страниц)

 

Екатеринбург


Урок 1. Основные теги

Независимо от того, как выглядит ваша Web-страница и какую информацию вы хотите отобразить, существует три тега, которые в соответствии со стандартами HTML и WWW должны присутствовать в каждой Web-странице.

1. <HTML> и </HTML>

Эти теги необходимы Web-броузеру для определения различных частей HTML-документа, но они не оказывают прямого влияния на внешний вид Web-страницы. Эти теги сообщают браузерам, что текст между ними следует интерпретировать как текст HTML. Поскольку документы HTML чисто текстовые, тег <HTML> говорит о том, что файл написан на языке гипертекстовых ссылок.

Для этого наберите <HTML> в самом начале файла. Это будет первое слово, которое появится на вашем экране. Затем наберите его напарника </HTML>. Теперь весь текст, который появится между этими тегами, будет отмечен как текст формата HTML.

2. <HEAD> и </HEAD>

Теги <HEAD> и </HEAD> отмечают ту информацию в вашем HTML-документе, которая будет служить названием.

Наберите <HEAD> на экране между тегами <html>, затем на следующей строке наберите его напарника — тег </head>.

3. <BODY> и </BODY>

Теги <BODY> и </BODY>, как и <HEAD>, предназначены для обозначения отдельной части HTML-документа. Текст, охваченный тегами <BODY>, является основной частью документа.

Когда основные теги введены, можно приступить к вводу текста. Это делается с помощью тегов <title> и </TITLE>. Название домашней страницы выводится браузером на строке заголовка. Кроме того, когда вы устанавливаете закладку на определенную страницу, выводится и ее название.

Название Web-страницы помещается в заголовочной части, обозначенной тегами <HEAD> и </HEAD>. Каждый HTML-документ может иметь только одно название.

Введите название Web-страницы, используя пары тегов <HTML>, <HEAD>, <BODY>, <TITLE>. Сохраните файл и откройте вашу Web-страницу в браузере.

Например:

<HTML>

<HEAD>

<TITLE> Моя страница </TITLE>

</HEAD>

<BODY>

</BODY>

<HTML>

Урок 2-3. Ввод текста и иной информации

Web-страничка должна содержать информацию, рассказывающую посетителям о Вас. Ввод текста – это, возможно, самый простой этап в процессе создания домашней страницы, поскольку Вы можете набрать текст непосредственно в HTML – файле, и он будет отображён браузером как обычный текст.

После введения названия настало время для создания заголовка, который будет отображен на вашей Web-странице. Подобно названию, заголовки должны быть краткими и полезными. Существует шесть размеров шрифта заголовков (они пронумерованы от одного до шести Н1 - Н6, причём первый номер соответствует самому крупному шрифту). Теги заголовков отличаются от тегов <HEAD> и </HEAD>. Они определяют не раздел документа, а вид текста на экране.

Чтобы воспользоваться заголовком с размером букв первого номера, нужно обо­значить выделяемый текст тегами <Н1> и </Н1>.

Попробуйте ввести примеры заголовков различного размера с указанием последнего. Этот текст должен располагаться в части, отделённой тегами <BODY> и </BODY>.

Так выглядит HTML-код после вставки тегов:

<BODY>

<H1> Пример заголовка – размер 1 </H1>

</BODY>

2. Ввод текста

Наберите следующий текст, сохраните файл, а затем откройте его в Web – браузере.

«Я рад приветствовать Вас на моей Web-странице. Я непрерывно работаю над этой страницей, и она постоянно обновляется. Я стараюсь, чтобы новая информация появлялась здесь приблизительно каждые два месяца. Я люблю изучать компьютеры, читать книги и смотреть телевизор».

3. Как разбить текст на смысловые группы

Когда вы начнете вводить текст, вы увидите, что Web-броузеры игнорируют пробелы, табуляции и переводы строки, если только они не определены соответствующими тегами разметки. Это происходит потому что браузеры форматируют текстовую информацию только в соответствии с тегами разметки. HTML – это язык форматирования. Поскольку браузеры игнорируют промежутки между абзацами, вы увидите только громадный блок текста! Чтобы сообщить браузеру, как разделить текст на абзацы и где нужны абзацные отступы, придется ввести в HTML-файл специальные теги.

Рассмотрим несколько тегов разметки текста.

3.1. Тег нового абзаца

Тег нового абзаца (<Р>) предписывает браузеру разделить два фрагмента текста пустой строкой. Это полезно, когда вам надо отобразить большой объем текста, например, книгу или подробную личную информацию, которая состоит более чем из одного длинного абзаца.

Ввести тег нового абзаца просто. Подведите указатель к тому месту, где вы хотите вставить тег, и наберите <Р>. Web-броузеры поймут, что означает этот тег, и правильно отобразят новый абзац на экране.

3.2. Тег перевода строки

Тег перевода строки <BR> аналогичен тегу нового абзаца, но он не вводит пустую строку после отделяемого им текста. После этого тега текст продолжает отображаться с начала следующей строки.

Отформатируйте текст.

Урок 4- 5. Использование горизонтальных линий

Тег горизонтальной линии может быть средством организации текста и дизайна. Он помогает посетителям страницы понять, какие части информации соотносятся друг с другом, а также разделяет страницу на несколько частей.

1. Задание линий

Тег <HR> применяется непосредственно для задания линии. Тег <HR> можно использовать в любом месте основной части HTML - документа. Чтобы ввести этот тег, просто наберите <HR>. Как и в случае с тегом <Р>, Web-браузеры автоматически выполняют возврат каретки после горизонтальной линии.

Создайте новый файл, в котором будете рисовать различные линии. Присвойте ему имя – LINE.HTM

2. Различные виды линий

HTML позволяет использовать линии различной ширины, длины и типа, а также позволяет их выравнивать.

2.1. SHADE и NOSHADE

Это расширение тега <HR> позволяет вам задать, будет горизонтальная линия просто черной сплошной линией или она будет контурной (по умолчанию).

Чтобы использовать опцию NOSHADE, просто добавьте ключевое слово NOSHADE в тег <HR>:

<HR NOSHADE>

Нарисуйте две линии: сплошную и контурную, используя, эти теги.

2.2. Ширина линии

Есть расширение, которое позволяет управлять шириной линии (ее длиной по ширине страницы). При использовании стандартного тега <HR> браузером отображается линия шириной во весь экран. Часто, в зависимости от дизайна страницы, нужно, чтобы линия пересекала только половину или четверть экрана.

Это можно сделать с помощью ключевого слова WIDTH и значения ширины линии в процентах. Например, если вы хотите задать простую линию длиной в половину экрана (50 процентов), используйте следующий тег:

<HR WIDTH=50%>

Нарисуйте три линии длиной 1/3 ширины страницы, ½ ширины страницы и 70% ширины страницы.

2.3. Выравнивание

С помощью ключевого слова ALIGN, используемого в сочетании со словом WIDTH, вы можете задать выравнивание горизонтальной линии. Существует три вида выравнивания: по левому краю (LEFT), по центру (задается по умолчанию) и по правому краю (RIGHT).

Тег, выравнивающий горизонтальную линию по левому краю страницы, выглядит так (линия занимает 50 процентов ширины):

<HR WIDTH=50% ALIGN=LEFT>

Выровняйте три линии (1-ую, по левому краю; 2-ую по правому; 3-ью, по центру).

2.4. Толщина линии

Вы можете задавать не только ширину, но и толщину линии. Это позволяет создавать горизонтальные линии, которые действительно отделяют и организуют различные разделы Web-страницы без применения графики или дополнительных возможностей HTML, например таблиц.

С помощью ключевого слова SIZE тега <HR> вы задаете толщину горизонтальной линии в пикселях. Толщина по умолчанию составляет 2 пикселя (SIZE=2). Задать можно любую толщину линии в пределах от 1 до 175 пикселов. Чтобы толстые линии отображались сплошными (темными), используйте вместе со словом SIZE опцию NOSHADE.

Например, для отображения на экране горизонтальной линии толщиной 5 пиксель необходим следующий тег:

<HR NOSHADE SIZE=5>

Нарисуйте три линии, толщиной: 1, 10, 100 пиксель.

Урок 6-7. Стилевое оформление текста

Существует много способов управления внешним видом текста на Web-странице. Как и в текстовом редакторе, текст на Web-странице может быть выделен полужирным шрифтом, курсивом или подчеркнут. Вы можете задать вид шрифта, а также размер шрифта. Кроме того, HTML позволяет полностью управлять цветом текста на экране.

На этом уроке Вы узнаете несколько новых тегов и научитесь сочетать различные стили, что поможет сделать Вашу страничку действительно великолепной.

Создайте файл в котором будете задавать стилевое оформление текста.




Поделиться с друзьями:


Дата добавления: 2015-05-29; Просмотров: 512; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.03 сек.