Самоучитель по HTML, Заглавные буквы и другие хитрости с текстом.

В этом уроке мы будем изучать тэги, применяемые к тексту.

Демонстрировать теги в отдельности не интересно!!! И мы с вами перейдем к небольшой практике:
Создадим первую более-менее полнотекстовую страницу.
Откроем блокнот, и наберем следующий текст:
        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" >

        </body>
        </html>

Любая нормальная страница начинается с заглавия, с него и начнем, для этих целей у нас есть тэг-контейнер <H></H> с цифровым значение от 1 до6, чем цифра больше тем заголовок меньше:

<H1> текст </H1>

<H2> текст </H2>

<H3> текст </H3>

<H4> текст </H4>

<H5> текст </H5>
<H6> текст </H6>
Далее добавим в наш код две строки:
        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" > 
        <H2> Главная страница</H2>
        Содержание 
        </body>
        </html>
Сохраним наш файл как "text1.html" , и посмотрим что у нас получилось:
моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|

Главная страница

Содержание
готово
далее рекомендую самостоятельно поиграться с цифрами...
Все вроде ничего но заглавие должно быть по центру страницы, добавляем для этой цели тэг-контейнер <сenter></center>
        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" > 
        <сenter><H2> Главная страница</H2> </center> 
        Содержание
        </body>
        </html>
Сохраняем и посмотрим что у нас получилось:
моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|

Главная страница

Содержание
готово
Теперь другое дело!
Далее попробуем набрать много текста
        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" >
        <сenter><H2> Главная страница</H2> </center>
        
        Мой сайт я сделал(а) для своих друзей, знакомых и
        просто для случайных посетителей,
        которые возможно  станут моими друзьями!!!
        На нём есть мой фотоальбом.
        Так-же хочу найти единомышленников по своему хобби.
        И многое другое...
        
        </body>
        </html>
Сохраняем и посмотрим что у нас получилось:
моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|

Главная страница

Мой сайт я сделал(а) для своих друзей, знакомых и просто для случайных посетителей, которые возможно станут моими друзьями!!! На нём есть мой фотоальбом. Так-же хочу найти единомышлеников по своему хобби. И многое другое...
готово
Получилась каша!, весь текст слепился в кучу, с этой проблемой у нас борется тэг <br> - принудительный перенос на другую строку.
перепишем наш код:
        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" >
        <сenter><H2> Главная страница</H2> </center>
        Мой сайт я сделал(а) для своих друзей, знакомых и
        просто для случайных  посетителей,
         которые возможно  станут моими друзьями!!!   <br>  
        На нём есть мой фотоальбом.  <br>  
        Так-же хочу найти единомышлеников по своему хобби.  <br>  
        И многое другое...   <br>  
        </body>
        </html>
Сохраняем и посмотрим что у нас получилось:
моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|

Главная страница

Мой сайт я сделал(а) для своих друзей, знакомых и просто для случайных посетителей, которые возможно станут моими друзьями!!!
На нём есть мой фотоальбом.
Так-же хочу найти единомышлеников по своему хобби.
И многое другое...
готово

Так-же для подобной цели существует тэг <Р> - абзац и скорее границы абзаца, так как он парный <Р></Р>
Перепишем наш код:
        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" >
        <сenter><H2> Главная страница</H2> </center>
          <p>  Мой сайт я сделал(а) для своих друзей,
        знакомых и просто для случайных
        посетителей, которые возможно  станут моими друзьями!!!</p>
          <p>  На нём есть мой фотоальбом.  </p>  
          <p>  Так-же хочу найти единомышлеников по своему хобби.
         </p>  
         <p>   И многое другое...   </p>  
        </body>
        </html>
Теперь посмотрим, что получилось:
моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|

Главная страница

Мой сайт я сделал(а) для своих друзей, знакомых и просто для случайных посетителей, которые возможно станут моими друзьями!!!

На нём есть мой фотоальбом.

Так-же хочу найти единомышлеников по своему хобби.

И многое другое...

готово


С помощью абзацев мы можем центрировать текст:
<p align="center">текст</p>
Так-же мы можем выровнять текст по левому краю:
<p align="left">текст</p>
По правому краю документа:
<p align="right">текст</p>
По обоим краям документа:
<p align="justify">текст</p>
Перепишем наш код:
        <html>
        <head>
        <title>моя первая страница</title>
        </head>
        <body  bgcolor="#ffffff" text="#000000" >
        <сenter><H2> Главная страница</H2> </center>
          <p align="center">  Мой сайт я сделал(а)
         для своих друзей, знакомых и просто для случайных посетителей,
         которые возможно  станут моими друзьями!!!  </p>  
          <p align="left">  На нём есть мой фотоальбом.
          </p>  
          <p align="right">  Так-же хочу найти
        единомышлеников по своему хобби.  </p>  
         <p align="justify">  Здесь вы найдёте много
       интересного... И многое другое...
       И так далее ... И туда подбное...   </p>  
        </body>
        </html>

моя первая страница - InternetExplorer
файл|правка|вид|избранное|сервис|справка|

Главная страница

Мой сайт я сделал(а) для своих друзей, знакомых и просто для случайных посетителей, которые возможно станут моими друзьями!!!

На нём есть мой фотоальбом.

Так-же хочу найти единомышлеников по своему хобби.

Здесь вы найдёте много интересного... И многое другое... И так далее ... И туда подбное...

готово

Предлагаю вам немного отдохнуть, что-бы далее грысть гранит науки с свежей головой...
Перейти к выбору следующей страницы