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

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

Скачать:

ВложениеРазмер
Microsoft Office document icon 23_html_2.doc72 КБ

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

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

❶ Шрифт.

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

❷ Пример.

</span><span class="c31">Нижнекуюкская средняя школа</span><span class="c0"> 

  FACE=Impact color=darkviolet>

 

История школы 

  FACE="Courier New"> 

         В 1965 году введена система парового отопления. <BR>

         В 1971 году построено кирпичное здание для начальных классов. 

-  центрирование текста

  – неразрывный пробел

 (от non-breaking space)

❸ Бегущая строка.

 – бегущая строка

  • height="16" - высота строки
  • width="250" - ширина строки
  • bgcolor="#99CCFF" - цвет фона
  • vspace="10" - расстояние от бегущей строки до текста (картинок, др. объектов) по вертикали
  • hspace="20" - расстояние от бегущей строки до текста (картинок, др. объектов) по горизонтали
  • loop="2" - сколько раз прокрутится строка
  • direction="left" (right, up, down) - направление движения строки - влево (вправо, вверх, вниз)
  • behavior="scroll" (s l i d e, a l t e r n a t e) - поведение строки - обычная прокрутка (прокрутка с остановкой, от края к краю)
  • scrollamount="1" - скорость движения строки, может принимать значения от 1 до 10 
                                       (1 - самое медленное движение, 10 - самое быстрое)

❹ Пример.

 height="10" width="550" bgcolor="#99CCFF" direction="right" behavior="alternate"

scrollamount="2">   Нижнекуюкская средняя школа  

⮴    – фиксированный (моноширинный) текст

❺ Списки.

  •  
    •  – списки

     – Нумерованный список

    TYPE – тип нумерации (A; a;  I;  i)

    START – целое число или латинская буква (символ, с которого начинается нумерация )

     – Выделение важного (обычно отображается курсивом)

    ❻ Пример.

    <FONT size=6 color=red > Списки

    Списки

    Нумерованные списки

    1. школа

    2. дом

    3. магазин 

    4. клуб 

    1. школа
    2. дом
    3. магазин
    4. клуб

      TYPE=A>

    1. школа

    2. дом

    3. магазин

    4. клуб

    1. школа
    2. дом
    3. магазин
    4. клуб

    1. школа

    2. дом

    3. магазин

    4. клуб

    1. школа
    2. дом
    3. магазин
    4. клуб

    1. школа

    2. дом

    3. магазин

    4. клуб

    1. школа
    2. дом
    3. магазин
    4. клуб

      START=8>

    1. школа

    2. дом

    3. магазин

    4. клуб

    1. школа
    2. дом
    3. магазин
    4. клуб

    ❼ 

     Маркированные списки

     TYPE=circle>

  • школа  

  • дом  

  • магазин  

  • клуб  

    • школа
    • дом
    • магазин
    • клуб

      disc>

    • школа

    • дом

    • магазин

    • клуб

    • школа
    • дом
    • магазин
    • клуб

      square>

    • школа

    • дом

    • магазин

    • клуб

    • школа
    • дом
    • магазин
    • клуб

     – Маркированный список

    TYPE – тип маркера (circle; disc; square)

    ❽ Таблица.

    Таблица задается тэгом:


    Это далеко не все: таблица состоит из     строк и столбцов (ячеек), поэтому нам надо еще и указать их.
      –  строка таблицы
       –  столбец (ячейка) таблицы

    ❾ Итак, перед вами таблица из двух строк и трех столбцов (ячеек).

    Сначала задаем строки. В нашем примере их две.




    ❿ Теперь в каждой строке зададим по три столбца (ячейки):











    Пример.

    Итак, теперь нам надо заполнить получившийся каркас:












    1-1  1-2  1-3 
    2-1  2-2  2-3 

    1-1

    1-2

    1-3

    2-1

    2-2

    2-3

    ❶❶ Фон задается параметром bgcolor = "цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда).

    ❶❷ Пример.

    Фон задан для таблицы в целом.

    BORDER=2  BGCOLOR=teal   BORDERCOLOR=olive >



    …

    1-1

    BORDER – толщина рамки (целое число, в пикселях)

    BGCOLOR – цвет фона

    BORDERCOLOR – цвет рамки

    ❶❸ Пример.

    Фон задан для каждого столбца.











    bgcolor="#FFCC33"> 1-1 bgcolor="#336699"> 1-2 bgcolor="#FFCC33"> 1-3

    bgcolor="#336699"> 2-1 bgcolor="#FFCC33"> 2-2 bgcolor="#336699"> 2-3

    ❶❹ Пример.

    Для таблицы использован фоновый рисунок.

    Вспомним о параметрах height  (высота) и width (ширина) –  вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Вспомним, что высота и ширина могут задаваться как в пикселях, так и процентах.

    Monotype Corsiva">

    BACKGROUND="fon.gif"  HEIGHT=150  WIDTH=450  BORDER=2   BORDERCOLOR=lime>

    ALIGN=center>

    Ячейка1  Ячейка2  Ячейка3  Ячейка4 

    BACKGROUND – фоновый рисунок.

    HEIGHT – минимальная высота таблицы.

    WIDTH – минимальная ширина таблицы.

    ALIGN – горизонтальное выравнивание содержимого относительно границ ячейки (по центру center, по левому краю left, по правому краю right).

    ❶❺ Пример.

    Эффект «выпуклости».

    BORDERCOLORLIGHT=lime  BORDERCOLORDARK=green>

     

    Информация об учениках

    Название деревни Количество учеников
    Нижний Куюк 49
    Айшияз 22
    Новый Шимбирь 10
    Старый Шимбирь 6
     ВСЕГО    87  

    Информация об учениках 

      Название деревни   

      Количество учеников  

    Нижний Куюк

    49

    Айшияз

    22

    Новый Шимбирь

    10

    Старый Шимбирь

    6

    ВСЕГО 

    87 

    Параметр BORDERCOLORDARK определяет цвет нижнего правого,

    а BORDERCOLORLIGHT – верхнего левого углов рамки.

       – заголовок таблицы.

    стр.

    Нижнекуюкская ООШ, 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 (часть 3)

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