HTML

tweetn
Как добавить горизонтальную линию.
Нам поможет тег < hr > (непарный).
Атрибут size задает толщину линнии (в пикселях).
Width  задает длину линии (в пикселях или % от ширины страницы).
Расположение линии на странице - align со значениями left, center, right.
Color раскрасит линию в нужный цвет.
 Пример: <hr align="left" site="4" width="600" color="#C25100">



Бегущая строка:
<marquee>A ROZA UPALA NA LAPU AZORA</marquee>
<marquee bgcolor="orange" direction="right">A ROZA UPALA NA LAPU AZORA</marquee>

A ROZA UPALA NA LAPU AZORA
A ROZA UPALA NA LAPU AZORA

Или вот так прикольно с картинкой:
<marquee><img src="https://lh5.googleusercontent.com/-fU9tMFouEac/TW6ueQGRp-I/AAAAAAAAAaY/dnI6nQNPKf8/s1600/zwartehondrent.gif"</marquee>



Можно с помощью шрифта и цвета вот так оформить текст:
<a style="font-family:Monotype Corsiva;color:orange;font-size:25px" href="http://uwblogger.blogspot.com/">Блог о блоггер и не только </a>
Блог о блоггер и не только

Выделяем текст:

<div align="center">
<div style="background-color: #e9e0db; border: 1px solid black; font-family: sans-serif; font-weight: bold; padding: 10px; text-align: center; text-transform: capitalize; width: 400px;">
<i>Не спеши, а то успеешь. Блог домохозяйки</i></div>
</div>

Не спеши, а то успеешь. Блог домохозяйки


Полоса прокрутки:
Код полосы прокрутки можно добавить как в текст сообщения, так и в гаджет.
height - длина полосы прокрутки,     width - ширина cообщения или длина до полосы прокрутки    :

<div class="widget-content">
<ul style="height:70px;width:170px; overflow:auto; ">
<li><a href="http://uwblogger.blogspot.com/2012/01/ping-blogger.html"><b>О пользе пинга</b></a></li>
<li><a href="http://uwblogger.blogspot.com/2012/01/blog-pagetitle-blogger.html"><b>Оптимизация блогспот</b></a></li>
</ul></div>


или так:

Где можно изменить ширину 15 и количество строк текста, которые будут на виду rows="3":
 <div align="center">
<textarea cols="15" name="code" rows="3"> Не спеши а то успеешь. Не откладывй ев завтра то что можно сделать послезавтра. Блог домохозяйки Uwblogger.blogspot.com</textarea></div> 


Чтобы иметь возможность просто выделить&скопировать текст добавим кнопку. Вот как будет выглядеть область текста с прокруткой и с кнопкой(красным выделено то что можно менять, настраивать).
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Выделить всё" /> </div>
<div align="center">
<textarea cols="20" name="txt" rows="3" style="height: 40px; width: 140px;" wrap="VIRTUAL">Блог домохозяйки: мой любимый blogger. Seo оптимизация и не только. В общем это шпаргалка для меня и возможно для любого кто найдет себе здесь что то интерессное о блоггер</textarea></div>
</form>
</div>

или так:
<p style="overflow:scroll; width:100px; height:100px; border:solid 1px">
Не спеши а то успеешь. Не откладывай на завтра то, что можешь сделать послезавтра. Блог домохозяйки: мой любимый blogger</p>

Не спеши а то успеешь. Не откладывай на завтра то, что можешь сделать послезавтра. Блогдомохозяйки: мой любимый blogger

Можно картинку, cкрипт, страницу оформить как iframe с полосой прокрутки:
<iframe border="0" frameborder="0" height="300" marginheight="0" marginwidth="0" scrolling="yes" src="http://uwblogger.blogspot.com/" width="450"></iframe>

Кнопка "Наверх"

(код который стоит у меня на блоге в боковом виджете):
<a style="display:scroll;position:fixed;bottom:110px;left:50px" href="#"><button><b>Наверх</b></button></a>
Чтобы кнопка выглядела привлекательнее надо поработать над ее шаблоном.

Оформление текста HTML,CSS:


<div class="reflect_1" style="border-bottom: 6px solid rgb(249, 245, 237); border-top: 1px solid rgb(249, 245, 237); color: #c9a798; font-size: 40px; line-height: 0.2em; margin: 0pt; padding: 0pt 0pt 0pt 10px;">
Блог домохозяйки</div>
<div class="reflect_2" style="border-top: 1px solid rgb(255, 255, 255); color: #f9f6f4; font-size: 40px; line-height: 0.7em; margin: 1pt; padding: 0pt 0pt 0pt 10px;">
Блог домохозяйки</div>


Блог домохозяйки
Блог домохозяйки
<div style="font-size: 4em; position: absolute;">
<div style="color: #F9F6F4; left: -2px; position: absolute; top: -1px;">
Blogger</div>
<div style="color: #E9E0DB; left: 2px; position: absolute; top: 2px;">
Blogger</div>
<div style="color: #C9A798; left: 0px; position: absolute; top: 0px;">
Blogger</div>
</div>
<div style="clear: both;">
</div>
Blogger
Blogger
Blogger




Текст на картинке "Uwblogger":

<div style="position: relative;">
<img alt="Мой blogger" border="0" height="311" src="http://1.bp.blogspot.com/-ZWSWbPRzj94/Txw6hVXDLDI/AAAAAAAAAv8/k8bS0QBGwQQ/s200/mijnkatpotloodkleur.png" width="465" />
<div style="font-family: Courier; font-size: 80%; left: 50px; position: absolute; text-indent: 0px; top: 30px; width: 150px;">
<b>Мой любимый blogger</b></div>
<div style="font-family: Courier; font-size: 80%; left: 340px; position: absolute; top: 290px; width: 150px;">
<i>Uwblogger</i></div>
</div>
Мой blogger
Мой любимый blogger
Uwblogger

Скрываем текст, картинку, код:


<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Cкрытая картинка и надпись</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Закрыть'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Открыть'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Open/Close" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Мы коты.
<img border="0" height="250" src="http://3.bp.blogspot.com/-2FckcPjjzkQ/TymkIdftokI/AAAAAAAAA08/2RtUiWecCdY/s400/katfon.png" width="400" />
<br>
</div>
</div>
</div> 




Cкрытая картинка и надпись:
Мы коты!!!




Можно изменять размер надписи, размер кнопки, сами надписи...

Красивый фон для кода в Blogger.

При создании статьи нам  приходиться вставлять разные коды HTML,CSS ....   Внешний вид всегда задается с помощью CSS стилей.

Пример:
.code1 {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #ffffff url(http://2.bp.blogspot.com/-pHHYkveP46M/T0F6rfGfrHI/AAAAAAAAA5U/tTYGrsOsJtY/s1600/katenhoekklein.png) no-repeat right bottom;
border : 4px solid #dddddd;
color : #7D7D7D;
}
Если мы заменим no-repeat right bottom;  на  no-repeat left top;  то картинка переместиться в верхний левый угол, разумеется должна быть соответствущая картинка.
Этот код мы вставляем в таблицу стилей.
Помещаем ввиде приведенный код перед ]]></b:skin>
При написании поста заключаем в
<div class="code1">
  Здесь Ваш текст
</div>


Пример.Добро пожаловать на блог домохозяйки: все о платформе блоггер. Все об оптимизации, оформление и раздичных полезностях для blogger(blogspot). Оптимизация заголовков, создание карты блога, оптимизация tite и многое другое на блоге uwblogger.blogspot.com


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