Здесь буду рассуждать о HTML, писать коды страничек и отвечать на ваши вопросы =)
Сижу-сижу....пишу-пишу... HTML-странички =)
Страница: 1
Сообщений 1 страница 25 из 25
Поделиться12010-01-23 06:59:29
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
Поделиться22010-01-23 07:07:51
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
Задача 1. Написать код главной страницы!
Решение: рисую меню...точнее два меню с кнопками...Хочу сделать не отдельные кнопки на фоне, а просто карту сайта...
Теперь делаю три фрейма. В два вставляю менюшки, а в другой - содержание сайта... Теперь решаю проблему с размером меню...перерисовываю начисто, меняю размеры фреймов... Принимаюсь за декор......................................................
Результат:
Код:
<html> <head> <title>Маленький мир Сумрачной воительницы</title> </head> <frameset cols="140,*, 140" border="0"> <frame src="menu.html" noresize marginwidth="0" marginheight="0" scrolling="no"> <frame src="content.html" name="window-1" noresize > <frame src="logo.html" noresize marginwidth="0" marginheight="0" scrolling="no"> </frameset> </html>
Поделиться32010-01-23 13:11:25
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
Задача 2. Написать код двух менюшек!
Решение: рисую...вовремя рисования думаю над содержанием сайта... теперь рисую кнопки и сохраняю...Осталось превратить рисунок в карту... *сидит в ФШ и вычисляет координату каждой кнопочки* создаю кучу страничек с непонятным содержанием... доделываю карту...и по той же схеме делаю второе меню.
Результат:
Меню-1
Код:
<html> <head> <title>menu</title> </head> <body text="#665072" bgcolor="#b697c8"> <div align="center"> <img src="fone.jpg" usemap="#karta1" border="0"> <map name="karta1"> <area href="ya.html" target="window-1" shape="rect" coords="20,25,119,74"> <area href="dimchataya.html" target="window-1" shape="rect" coords="20,85,119,134"> <area href="imya.html" target="window-1" shape="rect" coords="20,325,119,374"> </map> </div> </body> </html>
Меню-2
Код:
<html> <head> <title>menu</title> </head> <body text="#665072" bgcolor="#b697c8" > <div align="center"> <img src="fone_b.jpg" usemap="#karta2" border="0"> <map name="karta2"> <area href="ikonki.html" target="window-1" shape="rect" coords="20,25,119,74"> <area href="plemena.html" target="window-1" shape="rect" coords="20,85,119,134"> <area href="online_offline.html" target="window-1" shape="rect" coords="20,145,119,194"> <area href="http://catwarrior.5bb.ru/ " target="window-1" shape="rect" coords="20,205,119,254"> <area href="v_razrabotke.html" target="window-1" shape="rect" coords="20,265,119, 314"> </map> </div> </body> </html>
Поделиться42010-01-23 17:56:08
- На Марсе классно (c)
- Зарегистрирован: 2009-10-05
- Приглашений: 0
- Сообщений: 976
- Уважение: [+22/-0]
- Позитив: [+4/-0]
- Пол: Женский
- Провел на форуме:
7 дней 16 часов - Последний визит:
2014-06-22 23:16:30
Дымчатая
Офф:научи мну науке о html,а то я Ничего ненаю)
Поделиться52010-01-23 22:29:47
- Мы лишь пешки в злостной игре жизни.....
- Зарегистрирован: 2009-10-30
- Приглашений: 0
- Сообщений: 103
- Уважение: [+3/-0]
- Позитив: [+14/-0]
- Пол: Женский
- Провел на форуме:
1 день 20 часов - Последний визит:
2011-06-06 13:43:19
Дымчатая а ты эти два кода для чего писала они для чего нужны?
Поделиться62010-01-24 09:16:45
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
Огненная Звезда
Пиши мну в личку, научу =)
Ясная Луна
Это нужно для моего HTML-сайта (ну захотела я сайт сделать, подумаешь =))
Поделиться72010-02-10 13:33:46
- На Марсе классно (c)
- Зарегистрирован: 2009-10-05
- Приглашений: 0
- Сообщений: 976
- Уважение: [+22/-0]
- Позитив: [+4/-0]
- Пол: Женский
- Провел на форуме:
7 дней 16 часов - Последний визит:
2014-06-22 23:16:30
Дымчатая
Я написала
Поделиться82010-02-10 14:20:20
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
Огненная Звезда
Отлично)
Тебя где учить - тут или в личке?
Поделиться92010-02-10 14:23:03
- [Холод на земле не так страшен,как холод в сердце]
- Откуда: Г. Обнинск
- Зарегистрирован: 2009-10-21
- Приглашений: 0
- Сообщений: 728
- Уважение: [+11/-0]
- Позитив: [+22/-0]
- Пол: Женский
- Возраст: 28 [1996-04-29]
- Провел на форуме:
6 дней 8 часов - Последний визит:
2013-03-14 17:12:14
Дымчатая
давай тут. И я заодно посмотрю)
Поделиться102010-02-10 14:39:48
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
Ладно)
1 урок.
Начнем с азов)
Для начала где-нибудь создадим папочку, в которой будет рождаться сайт. Создали? Отлично!
Теперь идем в Пуск - Все программы - Стандартные - Блокнот. Открываем блокнот и пихаем туда следующий текст
Код:
<html> <head> <title>Ваш текст </title> </head> <body> Ваш текст </body> </html>
Вставили? Очень хорошо!
На место текста "Ваш текст" можете написать что-нибудь свое =)
Теперь сохраняем следующим образом:
- Файл - Сохранить как
... и вводим имя документа: index.html.
Обратите внимание! Неважно что будет на месте index. В любом случае после точки в названии должна быть приписочка html! Иначе ни какого сайта у нас не получится =(
В последующих сохранениях этого же файла нужно нажимать сохранить.
Сохраняем в папке, которою мы создали в начале урока.
Теперь откроем нашу заветную папку и нажмем на файл index ( у которого уже появился значок Internet Explorer)))
Ну как? Красота! Теперь можно утроить небольшую переменку и позаниматься на практике)))
Поделиться112010-02-10 14:51:12
- [Холод на земле не так страшен,как холод в сердце]
- Откуда: Г. Обнинск
- Зарегистрирован: 2009-10-21
- Приглашений: 0
- Сообщений: 728
- Уважение: [+11/-0]
- Позитив: [+22/-0]
- Пол: Женский
- Возраст: 28 [1996-04-29]
- Провел на форуме:
6 дней 8 часов - Последний визит:
2013-03-14 17:12:14
Дымчатая
хи! получилось!
Поделиться122010-02-10 15:04:05
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
2 урок.
Теперь мы будем разбираться что есть что)
Все, что находится между < и > - это тег (метка). Все что не находится между скобками (< и >) - это просто текст, и он виден при просмотре нашего сайта.
Есть обязательные теги. Они должны присутствовать в документе не смотря на катаклизмы и стихийные бедствия)
Список обязательных тегов:
1) <html></html>
2) <head></head>
3) <body></body>
Возникает вопрос: зачем писать по два одинаковых тега? А затем, что есть открывающие и закрывающие теги! Но так же есть теги, которым не нужен закрывающий тег. Например: <br>
Так же важна последовательность написания тегов. То есть, тег, который мы открыли первым, закрываем последним:
<тег 1><тег 2><тег 3></тег 3></тег 2></тег 1>
Не верна следующая последовательность:
<тег 1><тег 2><тег 3></тег 1></тег 2></тег 3>
Такая последовательность приводит к ошибкам на странице.
Итак, урок теории окончен! *звонок на перемену*
Поделиться132010-02-10 15:15:43
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
3 урок.
Продолжаем обучение.
Вопрос: зачем сайту "голова" и "тело"?
Ответ: а вот зачем!
Между тегами <head> и </head> находится служебная информация. Например, тег <title> - заголовок. Вставляется между тегами <head> и </head>. Зачем он? Вставьте его в свою страничку и напишите между тегами <title> и </title> что-нибудь. Затем откройте страничку и устремите свой взор на заголовок окна... увидели? =)
Теперь о "теле". Здесь уже находится само содержание странички: текст, картинки, фреймы, таблицы, карты и т. д. То есть, то что мы будем изучать на следующих уроках)
Всем все понятно? Отлично!
*звонок на перемену*
Поделиться142010-02-10 15:16:41
- [Холод на земле не так страшен,как холод в сердце]
- Откуда: Г. Обнинск
- Зарегистрирован: 2009-10-21
- Приглашений: 0
- Сообщений: 728
- Уважение: [+11/-0]
- Позитив: [+22/-0]
- Пол: Женский
- Возраст: 28 [1996-04-29]
- Провел на форуме:
6 дней 8 часов - Последний визит:
2013-03-14 17:12:14
Дымчатая
Хи, про звонок эт точно
Поделиться152010-02-10 15:18:44
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
Бух! препод устал....=)
Завтра еще кучу уроков выложу)))
Поделиться162010-02-10 18:32:57
- На Марсе классно (c)
- Зарегистрирован: 2009-10-05
- Приглашений: 0
- Сообщений: 976
- Уважение: [+22/-0]
- Позитив: [+4/-0]
- Пол: Женский
- Провел на форуме:
7 дней 16 часов - Последний визит:
2014-06-22 23:16:30
Дымчатая
А чё надо с сайтом то делать?я ничё не поняла.У меня 1 страница и там написано коты Воители
Поделиться172010-02-11 13:02:30
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
Бывший администратор
Я все объясню! Но всему свое время... там одна страница? Белая и на ней черная надпись? Это уже хорошо =)
4 урок. * я знаю, что у форума проблемы, но меня попросили о хтмл рассказать, вот я и рассказываю*
В этом уроке мы будем учится прописывать цвета для наших страничек) Для начала сохраним у себя на компе вот эту палитру: http://www.artlebedev.ru/tools/colors/. Здесь есть коды всех цветов интернета.
Как вы видите, все цвета в хтмл прописываются именно таким образом: FFFFFF - белый, 000000 - черный и т. д.
Вернемся к наше странице.
Я решила окрасить некоторые слова в красный цвет -
Код:
<html> <head> <title>Бла-бла-бла</title> </head> <body> Этот текст должен быть ЧЕРНЫМ <br> <font color="#CC0000">Этот текст должен быть КРАСНЫМ</font> </body> </html>
Как видите, я использовала тег <font>. У этого тега есть множество параметров (атрибутов). В этом примере был использован атрибут color. Он отвечает за цвет текста, который находится между тегами <font> и </font>.
Теперь попробуем поставить вместо CC0000 другие значения. Так же не забывайте про #!
Теперь займемся тегом <body>. Я хочу, что бы весь текст (кроме красного) был синим.
Вот как я буду действовать -
Код:
<html> <head> <title>Бла-бла-бла</title> </head> <body text="#336699"> Этот текст должен быть СИНИМ <br> <font color="#CC0000">Этот текст должен быть КРАСНЫМ,</font> а этот текст СИНИМ. </body> </html>
В примере видно, что я использовала атрибут text для тега <body>. Если цвет текста в <body> не задавать, то по умолчанию он будет черным.
Урок окончен! *звонок на перемену*
Поделиться182010-02-11 13:11:44
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
5 урок.
В этом уроке мы научимся менять цвет фона.
Мне хочется сделать фон странички черным. Как я поступлю? А вот как -
Код:
<html> <head> <title>Бла-бла-бла</title> </head> <body text="#336699" bgcolor="#000000"> Этот текст должен быть СИНИМ <br> <font color="#CC0000">Этот текст должен быть КРАСНЫМ,</font> а этот текст СИНИМ. <br> Фон здесь должен быть ЧЕРНЫМ! </body> </html>
вы видите, что был использован знакомый нам тег <body> и его атрибут bgcolor. bgcolor отвечает за цвет фона. Если цвет фона в <body> не задавать, то по умолчанию он будет белым.
Многим уже на этом уроке хочется вставить на место фона какую-нибудь картинку. Это возможно, но мы еще не разобрались с тем как просто вставить картинку. Поэтому учитесь и терпите.
Ну а урок закончен =) *звонок*
Поделиться192010-02-11 13:23:46
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
6 урок.
Теперь поговорим о параграфах.
Параграфы вводятся тегом <p></p> .
С помощью параграфов мы можем центрировать текст:
<p align="center">текст</p>
С помощью параграфов мы можем выровнять текст по левому краю:
<p align="left">текст</p>
По правому краю документа:
<p align="right">текст</p>
По обоим краям документа:
<p align="justify">текст</p>
А теперь пример -
Код:
<html> <head> <title>Бла-бла-бла</title> </head> <body text="#336699" bgcolor="#000000"> <p align="center">Этот текст должен быть СИНИМ <br> <font color="#CC0000">Этот текст должен быть КРАСНЫМ,</font> а этот текст СИНИМ. <br> Фон здесь должен быть ЧЕРНЫМ! <br> Текст должен находится в ЦЕНТРЕ страницы!</p> </body> </html>
Попробуйте поставить другие значения параграфа.
*кстати, правильно говорить не выравнивание, а выключка: выключка по левому краю, правому, центру, по обоим краям.*
Еще о параграфах: никогда не вводите просто <p></p>!!!
Пустые элементы <p> без какого-либо содержания (других тэгов или текста) могут игнорироваться броузерами. Не забывайте это. Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что после закрывающего тега </p> автоматически происходит перенос строки. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align="center">:
<center> текст </center>
Заменим прошлую конструкцию -
Код:
<html> <head> <title>Бла-бла-бла</title> </head> <body text="#336699" bgcolor="#000000"> <center>Этот текст должен быть СИНИМ <br> <font color="#CC0000">Этот текст должен быть КРАСНЫМ,</font> а этот текст СИНИМ. <br> Фон здесь должен быть ЧЕРНЫМ! <br> Текст должен находится в ЦЕНТРЕ страницы!</center> </body> </html>
Но так же есть и другая конструкция (она мне нравится больше всех):
<div align="center"> текст </div>
<div align="left"> текст </div>
<div align="right"> текст </div>
<div align="justify"> текст </div>
Вот что у меня теперь получилось -
Код:
<html> <head> <title>Бла-бла-бла</title> </head> <body text="#336699" bgcolor="#000000"> <div align="center">Этот текст должен быть СИНИМ <br> <font color="#CC0000">Этот текст должен быть КРАСНЫМ,</font> а этот текст СИНИМ. <br> Фон здесь должен быть ЧЕРНЫМ! <br> Текст должен находится в ЦЕНТРЕ страницы!</div> </body> </html>
Теперь я выложу неправильные конструкции:
<p align="right">
<p>текст</p>
<p>текст</p>
<p>текст</p>
</p>
и
<p align="right">
<div>текст</div>
<p>текст</p>
<div>текст</div>
</p>
Эти конструкции не должны присутствовать в вашем документе!!!
Однако <div> может содержать в себе параграфы: с помощью него мы можем сгруппировать их, допустим, по правому краю.
<div align="right">
<p>текст первого абзаца</p>
<p>текст второго абзаца</p>
<p>текст третьего абзаца</p>
</div>
Кажется мы увлеклись... звонок-то уже прозвенел =)
Поделиться202010-02-11 13:37:42
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
7 урок.
А сейчас мы увидим еще одну зверюшку и узнаем еще одну возможность тега <font>!
Знакомьтесь - заголовки!
Итак, существует 6 уровней заголовков:
<H1> текст </H1>
<H2> текст </H2>
<H3> текст </H3>
<H4> текст </H4>
<H5> текст </H5>
<H6> текст </H6>
h1 - самый важный, h6 - наименее важный.
Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста.
Как обычно, пример -
Код:
<html> <head> <title>Бла-бла-бла</title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"><H3>Это ЗАГОЛОВОК!!!<H3> <br> Этот текст должен быть СИНИМ <br> <font color="#CC0000">Этот текст должен быть КРАСНЫМ,</font> а этот текст СИНИМ. <br> Фон здесь должен быть ЧЕРНЫМ! <br> Текст должен находится в ЦЕНТРЕ страницы!</div> </body> </html>
Я использовала заголовок третьего уровня. Попробуйте поставить другие значения.
Смотрите, что получилось. Как мы видим, визуально заголовки отображаются не только более крупным шрифтом, но к тому же и полужирным. Здорово, правда? *и выделять нифига не нужно х)*
Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта:
<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>
Пример -
Код:
<html> <head> <title>Бла-бла-бла</title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"><H3>Это ЗАГОЛОВОК!!!<H3> <font size="+2">Добро пожаловать в мир Чертей =)</font> <br> Этот текст должен быть СИНИМ <br> <font color="#CC0000">Этот текст должен быть КРАСНЫМ,</font> а этот текст СИНИМ. <br> Фон здесь должен быть ЧЕРНЫМ! <br> Текст должен находится в ЦЕНТРЕ страницы!</div> </body> </html>
А теперь я расскажу вам страшную сказку о страшной болезни - гигантомании ОО
Ее симптомы: непомерно большие размеры шрифта, гигантские кнопища на пол экрана, вместо маленьких и милых кнопочек, и толстый (жирный) во всех случаях текст. Поэтому напоминаю: стандартный size (по умолчанию) ="+0".
И снова мы забыли про звонок) Урок окончен!
Поделиться212010-02-11 14:12:01
- [Холод на земле не так страшен,как холод в сердце]
- Откуда: Г. Обнинск
- Зарегистрирован: 2009-10-21
- Приглашений: 0
- Сообщений: 728
- Уважение: [+11/-0]
- Позитив: [+22/-0]
- Пол: Женский
- Возраст: 28 [1996-04-29]
- Провел на форуме:
6 дней 8 часов - Последний визит:
2013-03-14 17:12:14
Дымчатая
вауууу.....круто получается)
Поделиться222010-02-11 14:29:03
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
Фух) На сегодня все...)
Поделиться232010-02-12 15:06:13
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
8 урок
Сегодня мы узнаем, как выделить текст курсивом, подчеркнуть, перечеркнуть, сделать полужирным, как задавать моноширинный текст, как делать верхний и нижний индексы – все эти тэги, как правило, рассматриваются вместе, и мы не будем отступать от традиций.
Сначала рассмотрим курсив и полужирный текст:
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
Итак, давайте понатыкаем эти теги в разных местах -
Код:
<html> <head> <title>Бла-бла-бла</title> </head> <body text="#336699" bgcolor="#000000"> <div align="center"><H3>Это ЗАГОЛОВОК!!!<H3> <font size="+2">Добро пожаловать в мир Чертей =)</font> <br> Этот текст должен быть <b>СИНИМ</b> <br> <font color="#CC0000">Этот текст должен быть КРАСНЫМ,</font> а этот текст СИНИМ. <br> Фон здесь должен быть <i>ЧЕРНЫМ</i>! <br> Текст должен находится в ЦЕНТРЕ страницы!</div> </body> </html>
Теперь пара строк о моширинном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:
<tt> моноширинный шрифт </tt>
Также моноширинным шрифтом отображается текст заключенный в тэг <pre></pre>:
<pre>
текст (куча пробелов) текст
текст (куча пробелов) текст
текст (куча пробелов) текст
</pre>
У тэга <pre> есть одна замечательная особенность: текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений.
К одному фрагменту текста может применяться сразу несколько тэгов:
<tt><b><i> текст </i></b></tt>
В нашем примере текст моноширинный, полужирный, и выделен курсивом (вот так-то:). Не бойтесь использовать различные комбинации тэгов, экспериментируйте, но с умом:)
Итак, у нас еще осталось несколько тэгов, которые мы должны освоить на этой ступеньке, прежде чем двинуться дальше.
Подчеркнутый текст вводится при помощи тэга <u>:
<u> Подчеркнутый текст </u>
Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет:
<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>
Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста:
<small> Малый </small>
Нормальный текст
<big> Большой </big>
Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub - нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы - H2O (все, что мы выносим со школьной скамьи:).
Верхний индекс <sup></sup>
Нижний индекс <sub></sub>
Урок окончен! *звонок*
Поделиться242010-02-12 15:11:31
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
9 урок
В этом уроке мы снова будем мучать тег <font>)
Попробуйте ввести следующую конструкцию в наш документ для части текста, чтобы задать шрифт Arial:
<font face="arial"> текст (шрифт Arial)</font>
Какие же типы шрифтов являются стандартными, и по идее должны находиться на компьютере каждого пользователя - это:
-Times;
-Times New Roman;
-Arial;
-Helvetica;
-Courier;
-Verdana;
-Tahoma;
-Cosmic Sans;
-Garamond
Вы можете безбоязненно использовать любой из них.
В атрибуте face можно указать сразу несколько типов шрифтов:
<font face="arial, verdana, courier"> текст (шрифт Arial) </font>
В этом случае если у посетителя не окажется на компьютере шрифта Arial, то текст будет отображен шрифтом Verdana. Если и Verdana нет на компьютере вашего посетителя, то текст будет отображен шрифтом Courier. Т.е. в атрибуте face мы можем задать список разделенных запятыми названий шрифтов, которые броузер вашего посетителя должен попытаться найти у него на компьютере и отобразить в порядке приоритета.
Многие задаются вопросом, а можно ли установить свой тип шрифта, допустим, какой-то экзотический. Можно, но ваш посетитель его не увидит, т.к. на его компьютере этого шрифта, возможно, нет. Конечно, можно предложить вашему посетителю загрузить этот чудесный экзотический шрифт, когда посетитель зайдет на вашу страницу. Но большинство ваших посетителей отклонит такое предложение, т.к. никому не захочется закачивать несколько лишних мегабайт на свой компьютер ради ваших капризов. И в итоге, ваш посетитель увидит вместо вашего экзотического шрифта другой шрифт, который может быть просто ужасным.
Вывод: пользуйтесь стандартным набором шрифтов, их более чем достаточно. Тем более, что красота вашей страницы зависит не от типа шрифта, а от качества оформления (дизайна).
Однако если вам нужно ввести на страницу лишь несколько надписей, выполненных вашим экзотическим шрифтом, то сделайте их картинками (в графическом редакторе вы пишете нужным шрифтом нужную надпись и сохраняете ее как картинку).
*звонок* Урок окончен!
Поделиться252010-02-12 15:19:42
- карась
- Откуда: khabarovsk
- Зарегистрирован: 2009-11-24
- Приглашений: 0
- Сообщений: 282
- Уважение: [+11/-1]
- Позитив: [+3/-0]
- Пол: Женский
- Провел на форуме:
3 дня 10 часов - Последний визит:
2011-07-25 06:33:28
10 урок.
А сейчас я вам поведую, как вставлять картинки в документик наш ОО
Итак, тег вставки картинки:
<img src="ya.jpg">
Вместо ya.jpg мы можем подставить имя любой картинки (i.gif, yaya.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:
<img src="ya/ya.jpg">
Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:
<img src="../ya.jpg">
Если картинка лежит на другом сайте, то путь прописывается полностью:
<img src="http://www.homepage.ru/ya/ya.jpg">
Для вашего удобства кладите картинку в ту же папку, что и документ, тогда путаницы будет меньше:) Также я хочу обратить ваше внимание на то, что YA.jpg, ya.JPG, ya.jpg и YA.JPG – это разные имена файлов. Никогда не забывайте, что регистр нужно учитывать.
Теперь займемся практикой -
<html>
<head>
<title>Бла-бла-бла</title>
</head>
<body text="#336699" bgcolor="#000000">
<div align="center"><H3>Это ЗАГОЛОВОК!!!<H3>
<br>
<img src="your_picture.gif">
<font size="+2">Добро пожаловать в мир Чертей =)</font>
<br>
Этот текст должен быть <b>СИНИМ</b>
<br>
<font color="#CC0000">Этот текст должен быть КРАСНЫМ,</font> а этот текст СИНИМ.
<br>
Фон здесь должен быть <i>ЧЕРНЫМ</i>!
<br>
Текст должен находится в ЦЕНТРЕ страницы!</div>
</body>
</html>
Ну а вот и звонок - ♫♪) Урок окончен))
*сегодня уроков больше не будет!*
Страница: 1
