HTML редактирование: различия между версиями

Материал из Wiki МИАЦ ВО
Перейти к навигации Перейти к поиску
(→‎Свойства шрифтов)
(→‎Списки)
Строка 23: Строка 23:
 
<pre><A href="../index.html" title="возврат на Домашнюю страничку" ><img src="home.gif"></A></pre>
 
<pre><A href="../index.html" title="возврат на Домашнюю страничку" ><img src="home.gif"></A></pre>
 
==Списки==
 
==Списки==
 +
{| border=1
 +
| width=30% | <center><b>Пояснение</b></center>
 +
| width=40% | <center><b>Код в HTML</b></center>
 +
| width=40% | <center><b>В окне браузера</b></center>
 +
|-
 +
|Для создания нумерованного списка существует дескриптор '''&lt;OL&gt;''' (''Ordered List'' - Нумерованный Список). Он имеет закрывающийся тег '''&lt;/OL&gt;'''
 +
|<pre><OL>
 +
<LI>Козленок
 +
<LI>Теленок
 +
<LI>Корова
 +
<LI>Бык
 +
<LI>Конь
 +
</OL></pre>
 +
|<OL>
 +
<LI>Козленок
 +
<LI>Теленок
 +
<LI>Корова
 +
<LI>Бык
 +
<LI>Конь
 +
</OL>
 +
|-
 +
|Мы можем изменить арабские цифры на римские, и даже на строчные и прописные буквы с помощью атрибута '''&lt;TYPE&gt;''':
 +
TYPE=1 - Числа<br/>
 +
TYPE=A - Прописные буквы<br/>
 +
TYPE=a - Cтрочные буквы<br/>
 +
TYPE=I - Прописные римские буквы<br/>
 +
TYPE=i- Строчные римские буквы
 +
|<pre><OL>
 +
<LI TYPE=1>Козленок
 +
<LI TYPE=1>Теленок
 +
<LI TYPE=A>Корова
 +
<LI TYPE=A>Бык
 +
<LI TYPE=a>Конь
 +
<LI TYPE=a>Свинья
 +
<LI TYPE=I>Кот
 +
<LI TYPE=I>Пес
 +
<LI TYPE=i>Баран
 +
<LI TYPE=i>Петух
 +
</OL></pre>
 +
|<OL>
 +
<LI TYPE=1>Козленок
 +
<LI TYPE=1>Теленок
 +
<LI TYPE=A>Корова
 +
<LI TYPE=A>Бык
 +
<LI TYPE=a>Конь
 +
<LI TYPE=a>Свинья
 +
<LI TYPE=I>Кот
 +
<LI TYPE=I>Пес
 +
<LI TYPE=i>Баран
 +
<LI TYPE=i>Петух
 +
</OL>
 +
|-
 +
|Для создания закрашенных кружочков (<b>маркеров</b>), вместо цифр, нужно заменить <b>&lt;OL&gt;</b> на <b>&lt;UL&gt;</b>
 +
|<pre><UL>
 +
<LI>Козленок
 +
<LI>Теленок
 +
<LI>Корова
 +
<LI>Бык
 +
<LI>Конь
 +
</UL></pre>
 +
|<UL>
 +
<LI>Козленок
 +
<LI>Теленок
 +
<LI>Корова
 +
<LI>Бык
 +
<LI>Конь
 +
</UL>
 +
|-
 +
|Мы можем изменить форму <b>маркера</b> на круг, квадрат или диск с помощью атрибута <b>TYPE</b>:<br>
 +
<b>
 +
TYPE=circle<br>
 +
TYPE=square<br>
 +
TYPE=disc<br>
 +
</b> В wiki почемуто не работает, а в браузере нормально
 +
|<pre><UL>
 +
<LI TYPE=circle >Козленок
 +
<LI TYPE=circle >Теленок
 +
<LI TYPE=square >Корова
 +
<LI TYPE=square >Бык
 +
<LI TYPE=disc >Конь
 +
<LI TYPE=disc >Свинья
 +
</UL></pre>
 +
|<UL>
 +
<LI TYPE=circle >Козленок
 +
<LI TYPE=circle >Теленок
 +
<LI TYPE=square >Корова
 +
<LI TYPE=square >Бык
 +
<LI TYPE=disc >Конь
 +
<LI TYPE=disc >Свинья
 +
</UL>
 +
|-
 +
|<i>Списки</i> могут быть <b>вложенными</b> один в другой по принципу матрешки
 +
|<pre><UL>
 +
<LI>Первый урок
 +
<LI>Второй урок
 +
<LI>Третий урок
 +
<UL>
 +
<LI>Знакомство с графикой
 +
<LI>Обрезка изображения
 +
<LI>Оптимизация для web
 +
</UL>
 +
<LI>Четвертый урок
 +
<LI>Пятый урок
 +
</UL></pre>
 +
|<UL>
 +
<LI>Первый урок
 +
<LI>Второй урок
 +
<LI>Третий урок
 +
<UL>
 +
<LI>Знакомство с графикой
 +
<LI>Обрезка изображения
 +
<LI>Оптимизация для web
 +
</UL>
 +
<LI>Четвертый урок
 +
<LI>Пятый урок
 +
</UL>
 +
|-
 +
|Также, если пустить наших героев "под нож", получится замечательное меню. Этим ножом будет у нас тег <b>&lt;MENU&gt;</b>
 +
|<pre><MENU>
 +
<LH>Меню друзей:
 +
<LI>Козлятина
 +
<LI>Телятина
 +
<LI>Говядина
 +
<LI>Конина
 +
<LI>Свинина
 +
<LI>Кошатина
 +
<LI>Собачатина
 +
<LI>Баранина
 +
<LI>Курятина
 +
</MENU></pre>
 +
|<MENU>
 +
<LH>Меню друзей:
 +
<LI>Козлятина
 +
<LI>Телятина
 +
<LI>Говядина
 +
<LI>Конина
 +
<LI>Свинина
 +
<LI>Кошатина
 +
<LI>Собачатина
 +
<LI>Баранина
 +
<LI>Курятина
 +
</MENU>
 +
|-
 +
|Вместо маркеров можно подставить любое изображение. Помните, в 10 уроке я нарисовала симпатичный домик и назвала его <i>home.gif</i>? . Так вот я могу спокойно пустить его вместо маркера!
 +
|<pre><UL>
 +
<IMG src="home.gif">Козленок<br>
 +
<IMG src="home.gif">Теленок<br>
 +
<IMG src="home.gif">Корова<br>
 +
<IMG src="home.gif">Конь<br>
 +
<IMG src="home.gif">Свинья<br>
 +
</UL></pre>
 +
|<UL>
 +
<IMG src="home.gif">Козленок<br>
 +
<IMG src="home.gif">Теленок<br>
 +
<IMG src="home.gif">Корова<br>
 +
<IMG src="home.gif">Конь<br>
 +
<IMG src="home.gif">Свинья<br>
 +
</UL>
 +
|-
 +
|Ну, и конечно, можно сделать элементы списка - <b>ссылками</b>, если представить, что все эти друзья имеют свои странички в интернете.
 +
|<pre><UL>
 +
<LI><A href="Kozel.html">Козленок</A>
 +
<LI><A href="Telenok.html">Теленок</A>
 +
<LI><A href="Korova.html">Корова</A>
 +
<LI><A href="Byk.html">Бык</A>
 +
<LI><A href="Kon.html">Конь</A>
 +
</UL></pre>
 +
|<UL>
 +
<LI><A href="Kozel.html">Козленок</A>
 +
<LI><A href="Telenok.html">Теленок</A>
 +
<LI><A href="Korova.html">Корова</A>
 +
<LI><A href="Byk.html">Бык</A>
 +
<LI><A href="Kon.html">Конь</A>
 +
</UL>
 +
|}
  
 
==Свойства шрифтов==
 
==Свойства шрифтов==

Версия 13:44, 7 декабря 2007

Информация взята с http://dikarka.ru. Вообще мне эти уроки очень понравились - просто инепринужденно о довольно сложных вещах. Читайте - очень советую, особенно для начинающих.

Статья еще не окончена. Просто решил вытащить оттуда таблички, что бы удобнее было искать потом.

Ссылки

<A href = "fotoalbom/catslide.html">Мои кошки</A>
<A> и </A> Теги ссылки
href = "fotoalbom/catslide.html"

href = http://www.dikarka.ru

Адрес, куда надо перейти по ссылке
Мои кошки Текст, который будет отображаться ссылкой

Cылка на электронный адрес 

<A href = "mailto:your@address.com">Напишите мне письмо!</A>

Если вы хотите, чтобы открытый по ссылке документ не вытеснял собой предыдущий, можете дать указание открыть его в новом окне, добавив в конце ссылки атрибут target=blank, например: 

<A href = "http://www.yandex.com" target=blank>Поисковая система Яндекс</A>

Если мы хотим, что бы ссылкой была картинка (home.gif), то 

<A href="../index.html" title="возврат на Домашнюю страничку" ><img src="home.gif"></A>

Списки

Пояснение
Код в HTML
В окне браузера
Для создания нумерованного списка существует дескриптор <OL> (Ordered List - Нумерованный Список). Он имеет закрывающийся тег </OL> 
<OL> 
<LI>Козленок 
<LI>Теленок 
<LI>Корова 
<LI>Бык 
<LI>Конь 
</OL>
  1. Козленок
  2. Теленок
  3. Корова
  4. Бык
  5. Конь
Мы можем изменить арабские цифры на римские, и даже на строчные и прописные буквы с помощью атрибута <TYPE>:

TYPE=1 - Числа
TYPE=A - Прописные буквы
TYPE=a - Cтрочные буквы
TYPE=I - Прописные римские буквы
TYPE=i- Строчные римские буквы 

<OL> 
<LI TYPE=1>Козленок 
<LI TYPE=1>Теленок 
<LI TYPE=A>Корова 
<LI TYPE=A>Бык 
<LI TYPE=a>Конь 
<LI TYPE=a>Свинья 
<LI TYPE=I>Кот 
<LI TYPE=I>Пес 
<LI TYPE=i>Баран 
<LI TYPE=i>Петух 
</OL>
  1. Козленок
  2. Теленок
  3. Корова
  4. Бык
  5. Конь
  6. Свинья
  7. Кот
  8. Пес
  9. Баран
  10. Петух
Для создания закрашенных кружочков (маркеров), вместо цифр, нужно заменить <OL> на <UL> 
<UL> 
<LI>Козленок 
<LI>Теленок 
<LI>Корова 
<LI>Бык 
<LI>Конь 
</UL>
  • Козленок
  • Теленок
  • Корова
  • Бык
  • Конь
Мы можем изменить форму маркера на круг, квадрат или диск с помощью атрибута TYPE:

TYPE=circle
TYPE=square
TYPE=disc
 В wiki почемуто не работает, а в браузере нормально 

<UL> 
<LI TYPE=circle >Козленок
<LI TYPE=circle >Теленок
<LI TYPE=square >Корова
<LI TYPE=square >Бык
<LI TYPE=disc >Конь
<LI TYPE=disc >Свинья
</UL>
  • Козленок
  • Теленок
  • Корова
  • Бык
  • Конь
  • Свинья
Списки могут быть вложенными один в другой по принципу матрешки 
<UL> 
<LI>Первый урок 
<LI>Второй урок 
<LI>Третий урок 
<UL>
<LI>Знакомство с графикой 
<LI>Обрезка изображения 
<LI>Оптимизация для web 
</UL> 
<LI>Четвертый урок 
<LI>Пятый урок 
</UL>
  • Первый урок
  • Второй урок
  • Третий урок
    • Знакомство с графикой
    • Обрезка изображения
    • Оптимизация для web
  • Четвертый урок
  • Пятый урок
Также, если пустить наших героев "под нож", получится замечательное меню. Этим ножом будет у нас тег <MENU> 
<MENU> 
<LH>Меню друзей: 
<LI>Козлятина 
<LI>Телятина 
<LI>Говядина 
<LI>Конина 
<LI>Свинина 
<LI>Кошатина 
<LI>Собачатина 
<LI>Баранина 
<LI>Курятина 
</MENU>
 <MENU>

<LH>Меню друзей:

  • Козлятина
  • Телятина
  • Говядина
  • Конина
  • Свинина
  • Кошатина
  • Собачатина
  • Баранина
  • Курятина </MENU>
    • Вместо маркеров можно подставить любое изображение. Помните, в 10 уроке я нарисовала симпатичный домик и назвала его home.gif? . Так вот я могу спокойно пустить его вместо маркера! 
    <UL> 
<IMG src="home.gif">Козленок<br> 
<IMG src="home.gif">Теленок<br> 
<IMG src="home.gif">Корова<br> 
<IMG src="home.gif">Конь<br> 
<IMG src="home.gif">Свинья<br> 
</UL>

      <IMG src="home.gif">Козленок
      <IMG src="home.gif">Теленок
      <IMG src="home.gif">Корова
      <IMG src="home.gif">Конь
      <IMG src="home.gif">Свинья

    Ну, и конечно, можно сделать элементы списка - ссылками, если представить, что все эти друзья имеют свои странички в интернете. 
    <UL> 
<LI><A href="Kozel.html">Козленок</A> 
<LI><A href="Telenok.html">Теленок</A> 
<LI><A href="Korova.html">Корова</A> 
<LI><A href="Byk.html">Бык</A> 
<LI><A href="Kon.html">Конь</A> 
</UL>
    • <A href="Kozel.html">Козленок</A>
    • <A href="Telenok.html">Теленок</A>
    • <A href="Korova.html">Корова</A>
    • <A href="Byk.html">Бык</A>
    • <A href="Kon.html">Конь</A>

    Свойства шрифтов

    Сводная таблица свойств текста

    НАЗВАНИЕ
    ПРИМЕР
    ЧТО ПОЛУЧИЛОСЬ
    без изменений - ДИКАЯ ПРАВДА
    letter-spacing

    Устанавливает расстояние (дополнительные промежутки) между буквами. Можно указывать расстояние в любых абсолютных единицах (in, cm, mm, pt, pc, px). Может задавать и отрицательные значения. Только смотрите, чтобы буквы не слиплись, и вместо одного слова не получилось бы одна буква.

    		letter-spacing:10pt ДИКАЯ ПРАВДА
    letter-spacing:"-2pt" ДИКАЯ ПРАВДА
    word-spacing

    А это просто расстояние между словами. Указывается также в любых размерностях

    		word-spacing:7pt ДИКАЯ ПРАВДА
    word-spacing:10mm ДИКАЯ ПРАВДА
    text-decoration

    Очень хорошая штука. Например, может использоваться для убирания (none) подчеркивания ссылок или, наоборот, для подчеркивания текста (underline), перечеркивания (line-through) или надчеркивания (overline) текста. А еще для вывода мерцающего текста (blink).

    		text-decoration:overline ДИКАЯ ПРАВДА
    text-decoration:line-through ДИКАЯ ПРАВДА
    text-indent

    С его помощью можно установить "красную строку" (отступ). Указывается как в абсолютных единицах, так и в процентах от абзаца. Если дать отрицательное значение - получится выступ (висячая строка).

    		text-indent:"10mm" ДИКАЯ ПРАВДА
    text-align

    Здесь нам знакомые left, center и right, то есть выравнивание текста по левому, правому краю, либо по центру. Есть еще justify, которое выравнивает текст по ширине.

    		text-align:right ДИКАЯ ПРАВДА
    vertical-align

    Устанавливает расположение текста по базовой линии (по умолчанию), либо по верхнему (super), либо по нижнему (sub) индексу относительно родительского элемента. Незаменим, например, при формулах.

    		vertical-align:super

    (для "ДИКАЯ" - без изменений)

    		ДИКАЯПРАВДА
    line-height

    Определяет расстояние между строчками. Задается как в абсолютных единицах, так и в относительных. А можно и просто указывать число строк, не обязательно в целых числах.

    		line-height:2.5

    дикая правда на www.dikarka.ru дикая правда на www.dikarka.ru дикая правда на www.dikarka.ru

    Вставка изображений

    <img src="ris.01.gif" height=300 width=400 alt="это я в новом пиджаке" align=right hspace=20 vspace=20>
    img src="ris.01.gif" Название файла картинки, которую мы хотим вставить
    height=300 Размер по вертикали в px (очень желательно указывать его, что говорит об уважении читателя)
    width=400 Размер по горизонтали в px (очень желательно указывать его, что говорит об уважении читателя)
    alt="это я в новом пиджаке" Текст, который будет в прямоугольнике, вместо рисунка, если его не загружать.
    align=right Выравнивание картинки, мб left, right и center
    hspace=20 Расстояние от картинки до текста по горизонтали (px)
    vspace=20 Расстояние от картинки до текста по вертикали (px)
    Источник — https://miac.volmed.org.ru/wiki/index.php?title=HTML_редактирование&oldid=227