Создание Web-страниц с помощью HTML (часть 3)
материал по информатике и икт (9 класс)

Создание Web-страниц с помощью HTML (часть 3)
 
Использованная литература:
1) Алленова Наталья "HTML - Первые шаги". Учебник (руководство) по HTML.
2) Е.Н.Новоселова "Создание Web-страниц с помощью HTML". Журнал "Информатика и образование" №11, 12 - 2004 г., №1-3, 5 - 2005 г.

Скачать:

ВложениеРазмер
Microsoft Office document icon 24_html_3.doc76 КБ

Предварительный просмотр:

Информатика                                           3                                                   HTML (продолжение) 

 Горизонтальная линия.

Отдельный тег


 – это сокращение от английского «Horizontal Rule». С его помощью можно делить страницу на части или отделять фрагменты текста друг от друга, чтобы web–страница выглядела более привлекательно.  

Длину, ширину, цвет и расположение горизонтальной линии можно задавать с помощью дополнительных атрибутов.

 

Атрибут выравнивания (ALIGN):

ALIGN=LEFT – выравнивание по левому краю;

ALIGN =CENTER – выравнивание по центру;

ALIGN=RIGHT – выравнивание по правому краю;

Атрибут размера (SIZE):

SIZE=число – задает высоту линии в пикселях (от 1 до 100);

WIDTH=число – задает длину линии в пикселях.

Атрибут цвета (COLOR):

COLOR=цвет (английское название цвета или числовой код оттенка).

Пример:


=CENTER SIZE=5 WIDTH=600 COLOR=RED>

Горизонтальную линию можно превратить в вертикальную, квадрат или прямоугольник. Для этого необходимо соответствующим образом задавать значения ширины и высоты линии.

Примеры:


  • 100 WIDTH=650 COLOR=GREEN> (прямоугольник)

  • 80 WIDTH=80 COLOR=”#00FFFF”> (квадрат)

  • (создает линию без тени)

 Объединение ячеек таблицы.

Для этого служат атрибуты тега :

🙢  COLSPAN=n – объединение n соседних ячеек в одной и той же строке.

🙢  ROWSPAN=n – объединение n соседних ячеек одного и того же столбца.

Пример:

1-1 1-2 1-3
2-1 COLSPAN=2> 2-2

1-1

1-2

1-3

2-1

2-2

 Совместная верстка рисунка и текста с помощью таблицы.

Рамку таблицы в этом случае необходимо задать нулевой толщины (BORDER=0).

Пример:

ЦВЕТЫ

   

BORDER=0 BGCOLOR=yellow   BORDERCOLOR=red>

n64-64.gif"> ЦВЕТЫ r64-64.gif">

 Гиперссылки.

Гиперссылка – это фрагмент текста или рисунок, который является указателем на другой файл или объект.

Для создания ссылки используют парный тег  с обязательным параметром HREF. В нем после знака равенства необходимо указать адрес (URL) документа.  

Пример:

="a1.html"> Урок2.Список.Таблица.  

Атрибут TITLE предназначен для задания текста всплывающей подсказки при наведении на ссылку курсора мыши.

 TITLE="Создание Web-страниц"> Урок2.Список.Таблица.

 Задание цвета для всех ссылок на странице.

Цвета всех ссылок на странице задаются в качестве параметров тега . Эти параметры являются необязательными.

  • – задает цвет ссылки
  • – задает цвет активной (нажатой) ссылки
  • – задает цвет посещенной ссылки

Пример:

  Использование изображений в качестве гиперссылок.

Кроме текста в качестве ссылок можно использовать рисунки. При этом соответствующий тег  надо поместить между тегами  и .

Пример:

 SRC="n64-64.gif"  WIDTH=64 HEIGHT=64 > 

Вокруг изображения-ссылки автоматически добавляется рамка толщиной в 1 пиксель с цветом, совпадающим с заданным цветом для текстовых ссылок. Чтобы убрать рамку, следует задать параметр BORDER=0.

Пример:

n64-64.gif"  WIDTH=64 HEIGHT=64 BORDER=0>

 Ссылки в фреймах.

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

 

TARGET=имя фрейма>  Ссылка 

   При работе с фреймами удобно использовать зарезервированные имена окон, применяемые в качестве значений параметра target: _top и _parent позволяют загрузить страницу в том же окне, на месте всей фреймовой структуры; _self – в том же фрейме, _blank – в новом окне.

Примеры:

window> Творчество учащихся школы 

_parent> Казань 

 Создание фреймов.

Для создания фреймовой структуры применяется контейнер , который заменяет контейнер  и используется для разделения экрана на области. Внутри него находятся теги , которые указывают на HTML–документы, предназначенные для изначальной загрузки в созданные фреймы.  

Фреймы бывают вертикальными и горизонтальными.

 Атрибуты тега

Атрибут

Способ задания размеров

Описание

Примеры

COLS

%, %

Вертикальное разделение окна

Окно разделится вертикально на две равные части.

число, %, *

Под первый вертикальный фрейм отводится 150 пикселей, под второй – 30% доступного пространства, а для третьего – вся оставшаяся область окна.

ROWS

число, число

Горизонтальное разделение окна

Задание горизонтальных фреймов с точным указанием из высоты: верхний – 30 пикселей, нижний – 70.

%, *

Задание горизонтальных фреймов, когда первый фрейм будет занимать 30% от высоты окна, а второй – все остальное пространство.

 

 Пример:

Создание двух вертикальных фреймов    (имя файла fr1.html).

</span><span class="c28">Создание фреймов</span><span class="c0"> 

COLS="50%, 50%">

NORESIZE>

   NORESIZE – запрет изменения размеров фрейма. По умолчанию размеры фреймов можно менять с помощью мыши, перетаскивая границу между фреймами.  

①① Пример:

Создание двух горизонтальных фреймов    (имя файла fr2.html).

</span><span class="c28">Создание фреймов</span><span class="c0"> 

ROWS="40%, *">

①② Фильтры, применяемые к тексту.

 

filter:Glow(Strength='26', Color='red'); width:350; height:60; font-size:18pt; font-weight: bold; text-align: center; color: snow"> Нижнекуюкская основная школа 

 

filter:Shadow(Color='red', Direction='130'); width:400; height:60; font-size:30pt; font-weight: bold; text-align: center; color: lime"> Дирекция школы 

 

filter:Wave(Freq='8', Add='0',LightStrength='5', Phase='5', Strength='2'); width:400; height:60; font-size:30pt; font-weight: bold; text-align: center; color: teal"> Фактлар 

стр.

Нижнекуюкская ООШ, 2022/2023 учебный год.


По теме: методические разработки, презентации и конспекты

Создание Web-страниц средствами языка HTML

Методическая разработка к уроку "Создание Web-страниц средствами языка HTML"...

Методическая разработка открытого урока по дисциплине «Интернет-технологии» Тема: Создание простой Web-страницы на языке HTML.

Актуальность выбранной темы открытого урока заключается в необходимости  владения навыками создания web-документов, учитывая, что в настоящее время очень развиты Интернет коммуникации. Необходимо...

Сценарий 2 уроков по созданию web-странички с помощью HTML

Сценарий 2 уроков по созданию web-странички с помощью HTML для 8 класса и раздаточные материалы....

Создание Web-страницы с помощью языка HTML

Конспект урока для 8 класса по теме "Создание Web-страницы с помощью языка HTML"...

Создание Web-страницы с помощью языка HTML. Практическое задание

Практическое задание для 8 класса по теме "Создание Web-страницы с помощью языка HTML"...

Создание Web-страниц с помощью HTML (часть 1)

Создание Web-страниц с помощью HTML (часть 1) Использованная литература:1) Алленова Наталья "HTML - Первые шаги". Учебник (руководство) по HTML.2) Е.Н.Новоселова "Создание Web-стра...

Создание Web-страниц с помощью HTML (часть 2)

Создание Web-страниц с помощью HTML (часть 2) Использованная литература:1) Алленова Наталья "HTML - Первые шаги". Учебник (руководство) по HTML.2) Е.Н.Новоселова "Создание Web-стра...