<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Спецсимволы в HTML

Спецсимволы в HTML

Очень часто при написании кода HTML приходится выводить спецсимволы. Например, при написании статей для этого сайта, мне часто приходится писать, например, "<html>". Как вывести данный тег? Разумеется, если Вы в HTML-коде просто напишите "<html>", то браузер будет его интерпретировать как системный. Как поступить в данной ситуации? Ответ на этот вопрос находится в этой статье.

Я Вам покажу далеко не все спецсимволы в HTML, так как их достаточно много, а вот самые основные в таблице ниже:

Вид символаИмя символа
©copy
®reg
trade
infin
>gt
<lt
&amp
euro
§sect

А теперь разберём один простой пример на использование спецсимволов в HTML. Например, выведем вот такой код:

<p>
  <span>Текст</span>
</p>

HTML-код, необходимый для того, чтобы вывести текст выше:

&lt;p&gt;<br>&nbsp;&nbsp; &lt;span&gt;Текст&lt;/span&gt;<br>&lt;/p&gt;

Если вдруг, кто забыл или не знает, то "&nbsp;" - это обычный пробел (тоже спецсимвол). Просто ввиду того, что все теги, кроме (<pre>) вырезают лишние пробелы, то для вывода 2-х и более подряд идущих пробелов необходимо использовать эту сущность. Как можно понять из примера, для вывода спецсимвола необходимо соблюдать следующий синтаксис:

&имя_символа;

Если Вам потребуются ещё какие-нибудь символы, то можете поискать в Интернете, а самые основные я Вам уже дал.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (33):

XAXATyH2007 XAXATyH2007 16.03.2011 01:41:42

Я не понял куда &lt;p&gt;<br>&nbsp;&nbsp; &lt;span&gt;Текст&lt;/span&gt;<br>&lt;/p&gt; вставлять?

Ответить

XAXATyH2007 XAXATyH2007 16.03.2011 01:42:28

HTML-код который куда его

Ответить

Admin Admin 16.03.2011 01:44:04

В исходник HTML, в результате отображения данного кода в браузере появится все теги, но они уже будут выводиться как текст, а не восприниматься, как разметка документа.

Ответить

XAXATyH2007 XAXATyH2007 16.03.2011 01:46:23

Да не получается ,вот что получается <p> <span>Текст</span> </p> Текст

Ответить

Admin Admin 16.03.2011 01:51:02

Так это и должно было появиться. Смысл всех этих спецсимволов, чтобы выводить HTML-текст в браузере. По-другому, Вы бы не вывели данный текст на страницу.

Ответить

XAXATyH2007 XAXATyH2007 16.03.2011 01:46:41

не понял

Ответить

XAXATyH2007 XAXATyH2007 16.03.2011 01:55:38

Миша Смотри что получается это мой домен http://mywork.hdd1.ru/

Ответить

Admin Admin 16.03.2011 01:58:23

Совершенно верно! Это и должно было получиться. Вы вывели HTML-теги в виде текста на страницу. Это нужно, например, мне, чтобы выводить статьи с HTML-тегами. Если я их просто начну писать в коде, то они не выведутся, а воспримутся, как системные.

Ответить

Alim_(I) Alim_(I) 28.04.2011 14:37:59

А Вы знаете в хоть один язык кроме HTML который действует в "txt"?

Ответить

XAXATyH2007 XAXATyH2007 16.03.2011 01:57:09

Посмотри исходный код подскажи что мне исправить?

Ответить

XAXATyH2007 XAXATyH2007 16.03.2011 02:00:00

Всё понял елки палки, а я туплю сижу:)

Ответить

Alim_(I) Alim_(I) 28.04.2011 14:41:02

А кстате, в html можно делать картинки прозрачными? Мне для моего сайта нужно.

Ответить

Alim_(I) Alim_(I) 28.04.2011 17:30:51

Как удалить мое сообщение? Там нету внизу "Удалить" "Редактировать" и "Ответить". Я этот комментарий даже отправить не могу =((

Ответить

Admin Admin 28.04.2011 20:20:07

Как это нет? Возможно, Вы просто не были авторизованы, либо Ваш сеанс был завершён после 15-ти минут бездействия на сайте.

Ответить

Admin Admin 28.04.2011 20:22:06

В старых браузерах никак, а в новых с помощью свойства opacity: .img {opacity: 0.5;}

Ответить

Alim_(I) Alim_(I) 28.04.2011 17:20:14

Михаил Русаков, а если я наберу вот такой вот код, то тогда куда мне комментарий на сайт отправится? Если чесно я с одного сайта скопировал вот это <script type='text/javascript'> var JOSC_postCSS=1;</script></div> <div id='JOSC_formpos'> <form name='joomlacommentform' method='post' action='index.php'> <a name='CommentForm'></a> <input type='hidden' name='content_id' value='36' /><input type='hidden' name='component' value='' /><input type='hidden' name='joscsectionid' value='0' /> <table align='center' cellpadding='0' cellspacing='0' class='form'> <tr> <td colspan='2'><div class='sectiontableheader'> <div id='CommentFormTitle' align='center'>Оставить комментарий</div> </div></td> </tr> <tr class='sectiontableentry1'> <td><div class='item'>Имя:</div></td> <td><div class='item'> <input name='tname' type='text' class='inputbox' size='40' value='' /> </div></td> </tr> <tr class='sectiontableentry1'> <td><div class='item'>Email:</div></td> <td><div class='item'> <input name='temail' type='text' class='inputbox' size='30' value='' /> &nbsp; </div></td> </tr> <tr class='sectiontableentry1'> <td><div class='item'>Тема:</div></td> <td><div class='item'> <input name='ttitle' type='text' class='inputbox' size='40'/> </div></td> </tr> <tr id='CommentToolbar' class='sectiontableentry2'> <td><div class='item'>UBB-Код:</div></td> <td><div class='buttoncontainer'> <div style='float: left;'> <a href='javascript:JOSC_insertUBBTag("b")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/images/ubb_bold.gif' class='buttonBB' name='bb' alt='[b]' /></a>&nbsp;<a href='javascript:JOSC_insertUBBTag("i")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/images/ubb_italicize.gif' class='buttonBB' name='bi' alt='[i]' /></a>&nbsp;<a href='javascript:JOSC_insertUBBTag("u")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/images/ubb_underline.gif' class='buttonBB' name='bu' alt='[u]' /></a>&nbsp;<a href='javascript:JOSC_insertUBBTag("url")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/images/ubb_url.gif' class='buttonBB' name='burl' alt='[url]' /></a>&nbsp;<a href='javascript:JOSC_insertUBBTag("quote")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/images/ubb_quote.gif' class='buttonBB' name='bquote' alt='[quote]' /></a>&nbsp;<a href='javascript:JOSC_insertUBBTag("code")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/images/ubb_code.gif' class='buttonBB' name='bcode' alt='[code]' /></a>&nbsp;<a href='javascript:JOSC_insertUBBTag("img")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/images/ubb_image.gif' class='buttonBB' name='bimg' alt='[img]' /></a>&nbsp; </div> <div style='float: left;'> <select name='menuColor' class='select' onchange='JOSC_fontColor()'><option>-цвет-</option><option>aqua</option><option>black</option><option>blue</option><option>fuchsia</option><option>gray</option><option>green</option><option>lime</option><option>maroon</option><option>navy</option><option>olive</option><option>purple</option><option>red</option><option>silver</option><option>teal</option><option>white</option><option>yellow</option></select>&nbsp;<select name='menuSize' class='select' onchange='JOSC_fontSize()'><option>-размер-</option><option>крошечный</option><option>маленький</option><option>средний</option><option>большой</option><option>огромный</option></select> </div> </div></td> </tr> <tr class='sectiontableentry1'> <td>&nbsp;</td> <td valign='middle'><div><div class='emoticoncontainer'><div class='emoticonseparator'></div><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":angry:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/angry.png' border='0' alt=':angry:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":0")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/blink.png' border='0' alt=':0' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":confused:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/blush.png' border='0' alt=':confused:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":cheer:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/cheerful.png' border='0' alt=':cheer:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon("B)")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/cool.png' border='0' alt='B)' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":evil:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/devil.png' border='0' alt=':evil:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":silly:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/silly.png' border='0' alt=':silly:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":dry:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/ermm.png' border='0' alt=':dry:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":lol:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/grin.png' border='0' alt=':lol:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":kiss:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/kissing.png' border='0' alt=':kiss:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":D")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/laughing.png' border='0' alt=':D' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":pinch:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/pinch.png' border='0' alt=':pinch:' /></a></span></span><div class='emoticonseparator'></div><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":(")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/sad.png' border='0' alt=':(' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":shock:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/shocked.png' border='0' alt=':shock:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":X")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/sick.png' border='0' alt=':X' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":side:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/sideways.png' border='0' alt=':side:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":)")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/smile.png' border='0' alt=':)' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":P")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/tongue.png' border='0' alt=':P' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":unsure:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/unsure.png' border='0' alt=':unsure:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":woohoo:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/w00t.png' border='0' alt=':woohoo:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":huh:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/wassat.png' border='0' alt=':huh:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":whistle:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/whistling.png' border='0' alt=':whistle:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(";)")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/wink.png' border='0' alt=';)' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":s")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/dizzy.png' border='0' alt=':s' /></a></span></span><div class='emoticonseparator'></div><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":!:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/icon_exclaim.gif' border='0' alt=':!:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":?:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/icon_question.gif' border='0' alt=':?:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":idea:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/icon_idea.gif' border='0' alt=':idea:' /></a></span></span><span class='emoticonseparator'><span class='emoticon'><a href='javascript:JOSC_emoticon(":arrow:")'><img src='http://softvt.jet-host.ru/components/com_comment/joscomment/emoticons/funny/images/icon_arrow.gif' border='0' alt=':arrow:' /></a></span></span></div></div></td> </tr> <tr class='sectiontableentry1'> <td>&nbsp;</td> <td><div class='item'> <textarea name='tcomment' class='inputbox' cols='40' rows='10'></textarea> </div></td> </tr> <tr> <td class='sectiontableentry2'> <table class='buttoncontainer' cellpadding='0' cellspacing='0'> <tr> <td><input type='button' class='button' name='bsend' value='Отправить' onclick='JOSC_editPost(-1,-1)' /></td> <td id='JOSC_busy'></td> </tr> </table> </td> <td class='sectiontableentry2'> </td> </tr> </table> </form> </div>

Ответить

Admin Admin 28.04.2011 20:24:06

Зависит от того, что написано в index.php (<form action = "index.php"), который если это не Ваш сайт Вы никак посмотреть не сможете.

Ответить

Alim_(I) Alim_(I) 29.04.2011 14:37:41

А куда надо ставить <form action =index.php>? И Internet Explorer Opera или Mozila Firefox не старые браузеры?

Ответить

Admin Admin 29.04.2011 21:03:01

Это никуда вставлять не надо. Эту строку я взял из кода, который Вы скопировали. IE, Opera и Firefox имеют много версий. Среди этих версий есть как самые свежие, так и очень старые.

Ответить

Alim_(I) Alim_(I) 30.04.2011 12:34:39

A Opera 9.25 старая или новая?

Ответить

Admin Admin 30.04.2011 14:38:04

Достаточно старая, но opacity поддерживает.

Ответить

Alim_(I) Alim_(I) 30.04.2011 12:41:32

Что делает тег <style type="text/css" media="all">? И можете сказать, как зделать меню, чтобы если зашел в него, то например на какой-нить http://goodprograms.info/brauzery/25-skachat-besplatno-internet-explorer-bez-registracii-i-sms.html ну в какой-нибудь документ внутри своего же сайта, например было www.mail.ru а куда-то зашел стало http://e.mail.ru/cgi-bin/login

Ответить

Admin Admin 30.04.2011 14:41:56

Тег <style type='text/css' media='all'> означает начало CSS-стиля. То есть далее идёт CSS. Чтобы реализовать второе, необходимо добавить ссылки, например, так: <a href='http://e.mail.ru'>e.mail.ru</a>, если, конечно, я правильно понял вопрос.

Ответить

Alim_(I) Alim_(I) 30.04.2011 12:52:41

И что делает тег <script type="text/javascript" src="/engine/classes/js/jquery.js"></script>?

Ответить

Admin Admin 30.04.2011 14:39:24

Данный тег подключает библиотеку jquery.js. Таким образом, подключается набор JS-функций, которые Вы далее можете использовать.

Ответить

sasha0309 sasha0309 10.12.2012 10:56:58

Получился такой код <head> </head> <body> <p> <span>Текст</span> &lt;p&gt;<br>&nbsp;&nbsp; &lt;span&gt;Текст&lt;/span&gt;<br>&lt;/p&gt;&имя_символа; </p> </body> </html> </html> Правильно или нет я написал?

Ответить

Admin Admin 10.12.2012 19:52:15

В общем-то правильно, но тут надо понимать, что Вы хотели вообще получить. И ещё неясно, что за &имя_символа;

Ответить

Руфусдор Руфусдор 12.05.2014 15:26:07

Михаил, подскажите где можно найти список кодов спецсимволов

Ответить

alexandrdante alexandrdante 12.05.2014 22:48:08

Первые две выдачи Яши по запросу Таблица кодов спецсимволов)

Ответить

Руфусдор Руфусдор 13.05.2014 22:13:57

Спасибо, нашёл!!! Всё-таки мощный Зверь этот Яндекс

Ответить

Руфусдор Руфусдор 12.05.2014 16:57:47

Как установить соц кнопки

Ответить

alexandrdante alexandrdante 12.05.2014 22:47:05

Соцкнопки сервисом я ставлю обычно. share.pluso.ru

Ответить

Дмитрий Тормосин Дмитрий Тормосин 03.12.2014 18:58:47

Всем доброго времени суток ! У меня может быть глупый вопрос но всё же... Как спецсимволы можно отображать 2 способами например пробел можно отобразить как &nbsp; и &#160;. Вопрос какой код будет более корректным

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.