Alekod

  • 1) Выделение строк курсивом, жирным цветом и подчеркиванием.
  • 2) Создание ссылки и добавление к ней комментария.
  • 3) Создание цветного текста
  • 4) Создания промежутков строк текста.
  • 5) Изменение размера текста.
  • 6) Добавление рисунков в страницу.
  • 7) Переход вниз страницы
  • 8)Выделение ссылок цветом при наведении
  • 9) Переход к предыдущей странице
  • 10) Цвет фона
  • 11) Создание таблиц
  • 12) Вывод даты на странице.
  • 13) Цветной скролл бар на странице
  • 14) Музыка на странице.
  • 15) Определение браузера и сообщение посетителю об этом.
  • 16) Бегущая строка
  • 17) Вывод даты последнего обновления страницы
  • 18) Создание "закладок" и их использование
  • 19)Создание горизонтальной линии
  • 20) Интерактивное удаление элементов при нажатии на них.
  • 21) Сообщение пользователю о том что страница загрузилась.
  • 22) Смена background.
  • 23) Создание знака изображенного слева
  • 24) Позиция на странице
  • 25) Текстовое поле
  • 26) Создание rool-over рисунков.
  • 27) Дополнительные параметры таблиц.

Перед тем как выполнять уроки - поймите что общий вид html страницы всегда такой:
<html>
<head>
<title>Заголовок верхней строки</title>
</head>
<body>
Здесь размещают текст
 </body>
</html>

Также запомните следующие обозначение знаков: &nbsp пробел, &lt <, &gt >

1) Выделение строк курсивом, жирным цветом и подчеркивание.

Это может пригодится например в гостевых книгах, форумах, и на своих страничках. Для того чтобы выделить текст курсивом нужно добавить теги <i>ваш текст</i>.Для выделения жирным цветом следует добавить теги <b>ваш текст</b>, для подчеркивания - теги <u>ваш текст</u>

Итак мы узнали как выделить текст курсивом, жирным, подчеркнуть его. Попробуйте сделать это самостоятельно - создайте тестовый документ и напишите там такую строку: курсив жирный подчеркнутый затем переименуйте текстовый документ в 1.htm

2) Создание ссылки и добавление к ней комментария.

Это выглядит так: <a href="ваша страница, или скрипт например: javascript:history.back()"title="комментарий">название ссылки</a>. Сначала мы открываем тег <a href= затем пишем параметр в данном случае "ваша страница", потом добавляем всплывающую подсказку title= "комментарий" а потом закрываем теги</a>.
на примере это выглядит так: название ссылки - эта ссылка ведет на эту же страницу.
попробуйте создать сами свою ссылку на первом уроке мы назвали страницу 1.htm так сделаем же на нее ссылку!
Создайте тестовый документ напишите там строку <a href="1.htm"title="первый урок по html ">cсылка на первый урок.</a> затем переименуйте его в 2.htm.Получилось? Если нет попробуйте сделать все заново. Пример: Ссылка

3) создание цветного текста

Для этого нужно вставить вот такой текст <font color="Нужный вам цвет">ваш текст<font> Вместо надписи "Нужный вам цвет" можно написать желаемый цвет - red,green,yeloo,black,blue и другие.

Создайте текстовый документ напишите там строку <font color="red">красный текст <font> затем переименуйте файл в 3.htm. Здесь в этом примере вы также можете поэкспериментировать с разными цветами.

 4) Создания промежутков строк текста.

Для этого нужно написать теги <p> ваш текст </p> теперь ваш текст будет располагаться на одном параграфе, если дальше написать <p> ваш следующий текст </p> то между ними будет промежуток в одну строку. Пояснение: p - это параграф командой <p> мы создаем параграф.

Также есть команда <br> переносящая строку текста на другую строку не делая между ними промежутков .Например вот так: <br> текст <br> текст <br> текст </br> в этом случае получится что на трех разных строках написано слово текст.

Теперь выполним задание на это упражнение, напишем отрывок из стихотворения Лермонтова.

Любил и я в былые годы,
В невинности душе моей,
И бури шумные природы,
И бури тайные страстей.

Но красоты их безобразной
Я скоро таинство постиг,
И мне наскучил их несвязный
И оглушающий язык.

Если никак не получается сообразить как это сделать прочитайте заново упражнение, в крайнем случае напишите мне по почте.

5) Изменение размера текста.Для этого нужно вставить теги <font size="11">ваш текст<font>

В параметре "11" нужно указать нужный вам размер. А в параметре ваш текст - ваш текст соответственно...

Попробуйте сами написать такую строку:

размер1размер2 размер3

6) Добавление рисунков в страницу.

Для этого нужны такие теги: <img src="имя вашего рисунка">
Попробуйте создать рисунок с именем 1.bmp (например в pait), и попробовать вставить в вашу страничку такой текст: <img src="1.bmp">

Примечание: если нужно вставлять несколько рисунков то следует использовать выражения вида: <img src1="1.bmp">
<img src2="2.bmp"> и.т.д

7) Переход вниз страницы

Для того чтобы с помощью нажатия кнопки переместить посетителя вниз напишите такой скрипт:<a href="javascript:window.scrollTo(0,9999)"><font color=red>Перейти вниз</A>

8) Цветные ссылки
Добавьте этот скрипт в параметр <head> для выделения ссылок при наведении цветным. фоном

<style type="text/css">
<!--
a:hover { background-color: green}
a:active { background-color: white}
-->
</style>

Для простого выделения текста цветом при наведении:

<style fprolloverstyle>A:hover {color: 'green'}</style>

В принципе цвет можно брать любой - не только green,white.

 9) Переход к предыдушей странице

Нужно добавить скрипт javascript:history.back() в параметр ссылки например:<a href="javascript:history.back()">название ссылки</a>

 10) Цвет фона

В раздел <body> добавить bgcolor="нужный вам цвет(например red" background="цвет фоновой картинки (например 1.bmp)"

 11) Создание таблиц
теги <table>Пишете то что вам нужно в таблице</table> (Конечно есть параметры но мы их рассмотрим позже.)

 12) Вывод даты на странице.

Нужно вставить скрипт в параметр <head> после <style>

<SCRIPT LANGUAGE="JavaScript">
<!--
function initArray() {
for(i=0;i<initArray.arguments.length; i++)
this[i] = initArray.arguments[i];
}
var isnMonths=new initArray("января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря");
today=new Date();
// End Hiding -->
</SCRIPT>

<div align="right"><font color="orange" size=2><b class="date"><SCRIPT LANGUAGE="JavaScript">
<!--
function getFullYear(d) {
yr = d.getYear();
if (yr < 1000)
yr+=1900;
return yr;
}
document.write( "&nbsp;Сегодня&nbsp;"+today.getDate()+"&nbsp;"+isnMonths[today.getMonth()]+"&nbsp;"+getFullYear(today)+"&nbsp;года&nbsp;" );
-->
</SCRIPT></b></font></div>

 13) Цветной скролл бар на странице

Этот текст нужно вставить в параметр <head>

<style type="text/css">
<!--
body {
scrollbar-face-color: orange;
scrollbar-shadow-color: Ligthgrey;
scrollbar-highlight-color: darkgrey;
scrollbar-3dlight-color: #7b68ee;
scrollbar-darkshadow-color: thistle;
scrollbar-track-color: LightSlateGray;
scrollbar-arrow-color: red
}
-->
</style>

Из предыдущих уроков вы уже должны были усвоить что все параметры изменяемы.

14) Музыка на странице.

В параметр <head> Нужно вставить параметр: <bgsound src="Имя музыки(например 1.mid)" loop="сколько раз повторять(-1-бесконечно)">

пример: <bgsound src="myzik.mid" loop="-1">
 Т.е. вечно проигрывать музыку с именем myzik.mid

15) Определение браузера и сообщение посетителю об этом.

<SCRIPT LANGUAGE="JavaScript">
<!--
if(document.layers){
document.write('<font color=white>У вас браузер Netscape,поддерживающий DNTML<p>');
}
else if (document.all){
document.write('<font color=bisque>У вас скорее всего ie поддерживающий dhtml<p>');
}
-->
</SCRIPT>
<noscript>
<font color=yellow>Ваш браузер вообще не умеет выполнять сценарии javascript<p> <font color=orange>Возможно, что страницы будут отображены неправильно.</font><p>
<p>
</noscript>

16) Бегущая строка

<marquee direction="right">Текст бегущей строки</marquee>

Возможные значения параметра: rigth т.е строка справа или left т.е. движение строки слева соответственно.

17) Вывод даты последнего обновления страницы

<font color="green">Последнее обновление
страницы:  <!--webbot bot="Timestamp"
S-Type="EDITED"
S-Format="%d %B %Y г." -->

18) Создание "закладок" и их использование

Там где вы хотите создать закладку вставьте скрипт <a name="имя закладки">, переход к закладке - вставка в ссылку имени закладки например: <a href="#закладка">переход к закладке</a>

19)Создание горизонтальной линии

Там где она нужна нужно вставить текст <hr id=название(идентификатор) width=ширина(например 500) color=ваш цвет>

20) Интерактивное удаление элементов при нажатии на них.

<span onclick="this.style.display='none'"> текст</span>
Пример -щелкни, и я исчезну.

21) Сообщение пользователю о том что страница загрузилась.

В параметр <body> нужно вставить текст onload="window.status='Страница загрузилась'" Пример:<body onload="window.status='Страница загрузилась'">

Попробуйте написать это в странице вашего 1 урока заместо просто <body> и увидите в статусной строке браузера свой текст(в данном случае:"страница загрузилась).

22) Смена background

<span onclick="this.style.backgroundColor='red'">Ваш текст</span>

23) <li>

Этот тег позволит вам создавать такой знак:

Перед ним напишите <ui style="color='ваш цвет'">

24) Позиция на странице

Например начав новый параграф вы можете задать позицию его отображения <p align="center>

Возможные значения параметрa: center rigth left

25) Тестовое поле.

<textarea>текст</textarea>

26) Создание rool-over рисунков.
Пример:
Чтобы получить такую реакцию рисунка на мышь нужно вставить следующие теги: -

<IMG src="начальная позиция рисунка" onmouseover="this.src='при наведении'" onmouseout="this.src='После наведения" onclick="this.src='при нажатии'">

P.S. нужно писать названия файлов рисунков в параметрах (например заместо текста:"начальное положение" - 1.jpg и.т.д.)

27) Дополнительные параметры таблиц
В теге <table> есть спец. параметры например border=1 т.е. толщина границ равна 1px можно задать цвет границам bordercolor="нужный вам цвет".Для тех кто забыл фон задается параметром bgcolor .Также мы можем разделить таблицу на части тегом следующим после тега начала таблицы <tr> указать положение границы width="ширина" height="высота".