Очень хороший сайт-учебник по html -
http://postroika.ru/html/index.html
Первые Шаги - Учебник по Html для чайников
Сообщений 1 страница 30 из 32
Поделиться12006-04-20 18:28:15
Поделиться22006-05-08 00:29:07
Самые простейшие примеры
______________________________
Работаем с текстом -
______________________________
1)<br> (перенос текста на другую строку)
Пример применения -
Здравствуйте, это моя первая страница.<br>
Добро пожаловать!
______________________________
2)Итак, на этой ступеньке мы будем учиться раскрашивать. Для начала нам будет нужна палитра (все цвета интернета - http://www.artlebedev.ru/tools/colors/
Зачем все это? А затем, что все обозначения цвета в Html прописываются именно таким способом. Например, белый цвет – ffffff. Но вернемся к нашей страничке. Давайте окрасим слова Добро Пожаловать в красный.
<font color="#CC0000"> Добро пожаловать! </font>
Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста. Атрибут color, как и другие атрибуты, не принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам.
Попробуйте вместо СС0000 подставить другие значения цветов для атрибута color. Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» - #.
_______________________________
Поделиться32006-05-08 00:37:29
3) <p align="center">текст</p>Расположить текст по середине
можем выровнять текст по левому краю:
<p align="left">текст</p>
По правому краю документа:
<p align="right">текст</p>
По обоим краям документа:
<p align="justify">текст</p>
Также запомните, что после закрывающего тега </p> автоматически происходит перенос строки. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align="center">:
<center> текст </center>
Поделиться42006-05-08 00:44:45
Сейчас мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тэга <font></font>
Начнем с заголовков. Существуют шесть уровней заголовков:
<H1> текст </H1>
<H2> текст </H2>
<H3> текст </H3>
<H4> текст </H4>
<H5> текст </H5>
<H6> текст </H6>
Итак, h1 – самый важный, h6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице. Заголовками вы определяете структуру внутри текста
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> </div>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг?
</p>
</body>
посмотреть!
-------------------------------------------------------------
Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут 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>
пример -
<body text="#336699" bgcolor="#000000">
<div align="center">
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> </div>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <font size="+1"> еще один виртуальный друг? </font>
</p>
</body>
посмотреть!
---------------------------------------------------------------
Поделиться52006-05-08 00:57:47
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
<u> Подчеркнутый текст </u>
Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста:
<small> Малый </small>
Нормальный текст
<big> Большой </big>
<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
Поделиться62006-05-08 01:04:22
Вставляем картинку на свой сайт -
<img src="http://img397.imageshack.us/img397/1739/107510861090108610741099108110.jpg">
Не забудте поменять адрес моей картинки( http://img397.imageshack.us/img397/1739 … 108110.jpg), на свой
___________________________________________________________________
картинка может быть ссылкой.
<a href="https://mymink.5bb.ru/viewtopic.php?id=2211&p=34"><img src=" http://i002.radikal.ru/0810/13/cd50220d29e0.jpg" alt="Приглашаю на БАЛ"></a>
Поделиться72006-05-10 18:29:36
смена курсора на один из стандартных
Вставляем в body:
<a href="http://fantasyflash.ru" style="cursor:crosshair">ваша ссылка</a>
можно поменять стандартный курсор на другие виды курсоров:
пример-1 (crosshair)
пример-2 (e-resize)
пример-3 (ne-resize)
пример-4 (nw-resize)
пример-5 (n-resize)
пример-6 (move)
пример-7 (hand)
пример-8 (text)
пример-9 (wait)
пример-10 (Нelp)
Поделиться82006-05-10 18:35:16
Еще можно поменять курсор на картинку
http://fantasyflash.ru/cursor/indexs.ph … p;n=1#null
мне понравилось малюсенькое красное сердечко...
Поделиться92006-05-11 23:07:02
Да курсорчик сваломом нарисовать можно!!! Главное сделать фон прозрачным, иформат нужный подобрать!!! Вот и все =)
Поделиться102006-05-27 10:18:05
это конечно интерестно но существуют программы для более удобного создания сайтов Например: namo WebEditir 5. Отличная программа
Поделиться112006-05-29 15:51:21
Существует море всяких полезных программ, но я пишу только о том, что знаю. Если вы знаете больше, то открывайте тему и делитесь своими знаниями, я буду очень рада поучиться!
Поделиться122006-09-17 13:47:28
А как поставить на страничке музыкальное сопровождение? знаю, что -то с bgsound но точно не знаю как прописать.
Отредактировано Juga (2006-09-17 14:55:18)
Поделиться132006-09-17 14:46:40
Несколько вариантов -
<BGSOUND SRC="URL-звукового файла" LOOP="Количество воспроизведений">
LOOP может принимать следующие значения:
TRUE-бесконечное повторение,пока страница на экране
FALSE-воспроизведение звукового файла один раз.
Вот пример готового тега:
<BGSOUND SRC="Melody.midi" LOOP="5">
Лучше всего чтобы звуковой файл был в формате midi,не у всех ведь быстрый интернет.
<P>
<P><EMBED SRC="адрес звукового файла" height="15 " width="200">Соответственно height=высота плеера в пикселях и width=ширина плеера в пикселях
Вместо "адрес звукового файла" пишешь путь к музону, и тебе играет хоть миди, хоть МР3!
<center><embed src='http://www.wallpaper.f-1.ru/ollenkka/midi/midi27.mid' width=77 height=27 loop=-1 autostart=true border=0></center>
вставь вот это в объявления
<center><embed src='http://fantasyflash.ru/music/midi/midi1.mid' width=77 height=27 loop=-1 autostart=true border=0></center> вот
<center><embed src='http://fantasyflash.ru/music/midi/midi3.mid' width=77 height=27 loop=-1 autostart=true border=0></center> вот есчё!
Поделиться142006-09-25 00:55:50
Лиль,а как ты сдвинула название лого Mybb?
Поделиться152006-09-25 10:03:28
Рит, я это дело на форуме поддержки нашла. Вот в этой теме - http://forum.mybb.ru/viewtopic.php?id=768
Только там страниц много и на какой именно я не помню, конечно. Поищешь?
Поделиться162006-09-25 10:09:33
Разумеется да,ты просто кладезь сокровищ #
Поделиться172007-09-12 22:04:52
Fantom, программ много, но после генерации исходный код страницы получается объёмным. Иногда в несколько раз больше. А если пишешь ручками, то пишется только то, что нужно. Без мусора.
Поделиться182008-02-24 00:55:27
Таблица веб цветов (типа #FF0000)
http://www.artlebedev.ru/tools/colors/
Основные теги
<html></html> Указывает программе просмотра страниц что это HTML документ.
<head></head> Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь располагается тег названия документа и теги для поисковых машин.
<body></body> Определяет видимую часть документа
Теги оглавления
<title></title> Помещает название документа в оглавление программы просмотра страниц
Атрибуты тела документа
<body bgcolor=?> Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.
<body text=?> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.
<body link=?> Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.
<body vlink=?> Устанавливает цвет гиперссылок на котох вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.
<body alink=?> Устанавливает цвет гиперссылок при нажатии.
Теги для форматирования текста
<pre></pre> Обрамляет предварительно отформатированный текст.
<h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок
<h6></h6> Создает самый маленький заголовок
<b></b> Создает жирый текст
<i></i> Создает наклонный текст
<tt></tt> Создает текст - имитирующий стиль печатной машинки.
<cite></cite> Используется для цитат, обычно наклонный текст.
<em></em> Используется для выделения из текста слова (наклонный или жирный текст)
<strong></strong> Используется для выделения наиболее выжных частей текста (наклонный или жирный текст)
<font size=?></font> Устанавливает размер текста в пределах от 1 до 7.
<font color=?></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB.
Гиперссылки
<a href="URL"></a> Создает гиперссылку на другие документы или часть текущего документа.
<a href="mailto:EMAIL">
</a> Создает гиперссылку вызова почтовой программы для написания письма автору документа.
<a name="NAME"></a> Отмечает часть текста как цель для гипперссылок в документе.
<a href="#NAME"></a> Создает гиперссылку на часть текущего документа.
Форматирование
<p> Создает новый параграф
<p align=?> Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
<br> Вставляет перевод строки.
<blockquote>
</blockquote> Создает отступы с обеих сторон текста.
<dl></dl> Создает список определений.
<dt> Определяет каждый из терминов списка
<dd> Описывает каждое определение
<ol></ol> Создает нумерованный список
<li> Определяет каждый элемент списка и присваивает номер
<ul></ul> Создает ненумерованный список
<li> Предваряет каждый элемент списка и добавляет кружок или квадратик.
<div align=?> Важный тег используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей
Графические элементы
<img src="name"> Добавляет изображение в HTML документ
<img src="name" align=?> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center; bottom, top, middle
<img src="name" border=?> Устанавливает толщину рамки вокруг изображения
<hr> Добавляет в HTML документ горизонтальную линию.
<hr size=?> Устанавливает высоту(толщину) линии
<hr width=?> Устанавливает ширину линии, можно указать ширину в пикселах или процентах.
<hr noshade> Создает линию без тени.
<hr color=?> Задает линии определенный цвет. Значение RRGGBB.
Таблицы
<table></table> Создает таблицу.
<tr></tr> Определяет строку в таблице.
<td></td> Определяет отдельную ячейку в таблице.
<th></th> Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
Атрибуты таблицы
<table border=#> Задает толщину рамки таблицы.
<table cellspacing=#> Задает расстояние между ячейками таблицы.
<table cellpadding=#> Задает расстояние между содержимым ячейки и ее рамкой.
<table width=#> Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<tr align=?> или <td align=?> Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
<tr valign=?> или <td valign=?> Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
<td colspan=#> Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1)
<td rowspan=#> Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)
<td nowrap> Не позволяет программе просмотра делать перевод строки в ячейке таблицы.
Кадры
<frameset></frameset> Предваряет тег <body> в документе, содержащем кадры;
<frameset rows="value,value"> Определяет строки в таблице кадров, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров.
<frameset cols="value,value"> Определяет столбцы в таблице кадров, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы кадров.
<frame> Определяет единичный кадр или область в таблице кадров.
<noframes></noframes> Определяет, что будет показано в окне браузера если он не поддерживает кадры.
Атрибуты кадров
<frame src="URL"> Определяет какой из HTML документов будет показан в кадре.
<frame name="name"> Указывает Имя кадра или области, что позволяет перенаправлять информацию в этот кадр или область из других кадров.
<frame marginwidth=#> Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1.
<frame marginheight=#> Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1.
<frame scrolling=VALUE> Указывает будет-ли выводится линейка прокрутки в кадре; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - auto.
<frame noresize> Препятствует изменению размеров кадра.
Формы
Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы.
<form></form> Создает формы
<select multiple name="NAME" size=?></select> Создает скролируемое меню. Size устанавливает кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при использовании прокрутки.
<option> Указывает каждый отдельный элемент меню
<select name="NAME"></select> Создает ниспадающее меню
<option> Указывает каждый отдельный элемент меню
<textarea name="NAME" cols=40 rows=8></textarea> Создает окно для ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type="checkbox" name="NAME"> Создает checkbox. За тегом следует текст.
<input type="radio" name="NAME" value="x"> Создает radio кнопку. За тегом следует текст.
<input type=text name="foo" size=20> Создает строку для ввода текста. Параметром Size указывается длина в символах.
<input type="submit" value="NAME"> Создает кнопку "Принять"
<input type="image" border=0 name="NAME" src="name.gif"> Создает кнопку "Принять" - для этого используется изображение
<input type="reset"> Создает кнопку "Отмена"
Поделиться192008-03-17 21:09:18
Лиля, спасибо вам, очень полезная тема.
Поделиться202008-03-17 21:36:44
а не за что! Моя любимая тема....
Поделиться212008-04-08 08:22:44
Лиля - спасибо!
Очень пригодилось!
Поделиться222008-04-09 16:55:10
Ни-На, скажи - очень интересно изучать Html, да? Смотришь на огромные коды и когда начинаешь что-то в них понимать, так приятно на душе
Поделиться232008-04-24 22:08:14
Побродила,почитала...И так и не поняла с чего все таки начинать создавать сайт?Можно поподробнее?
Поделиться242008-04-24 23:01:02
как интереснооо, но так все трудно...как бы в это все въехать?)))
Поделиться252008-04-25 00:25:13
pilulka, смотря какой ты хочешь делать сайт. Мой первый сайт я делала по шаблону и знание Html мне тогда было не нужно. А вот когда мне захтелось сделать что-нибудь более индивидуальное и интересне, я стала изучать Html. Сложно, конечно, но самое главно понять азы. Какие теги должны быть обязательно закрытыми, какие открытыми, самое простое форматирование текста, вставление картинок, картинки как ссылки, рамки, таблички и т.д. Помню как мне приспичило сделать на общей картинке зоны, заданные их координатами, на котоые нажимаешь и попадаешь на другую страничку ох и помучала я народ.... почему-то, ни кто не знал как это сделать. Потом я уже сама разобралась и поняла, что это скорее всего лишнее, по этому, ни кто и не мог мне ответить...
ириска, ты собалась делать сайт или форум? Могу я тебе чем-нибудь помочь?
Поделиться262008-04-25 08:36:28
Лиль,Я наверно пока по шаблону бы попробовала...Но с чего начать?
Поделиться272008-04-25 09:27:29
Ни-На, скажи - очень интересно изучать Html, да? Смотришь на огромные коды и когда начинаешь что-то в них понимать, так приятно на душе
Это точно Лиля!Так здорово!Меня уж так затянуло!!!
Поделиться282008-04-28 02:32:25
pilulka, по шаблону? Зайди вот СЮДА
Там все на русском языке и очень доступно. Достоинство - сайт не умрет, если ты не будешь какое-то время заходить, даже на первоначальном этапе. Я сделала так два сайта - очень легко и довольно быстро. Без всяких проблем. Они до сих пор работают, хоть я и не захожу совсем... надо бы зайти и удалить неработающие картинки, но нет времени... но очень радует, что сайты не удаляются и мало того, на них постоянно заходят люди
Ни-На, очень тебя понимаю! Я вот нырнула с головой и уже несколько лет это мое главное увлечение
Поделиться292009-03-04 01:37:47
Лиля, большое спасибо!!!!! Очень нужная информация.
Поделиться302009-03-04 14:31:38
Рада, что смогла быть полезной! Если что, спрашивай, постараюсь помочь!