четверг, 30 мая 2013 г.

Изучаем возможности текста в html


Шаг второй

Изучаем возможности текста в html


В нашем уже созданном html-документе мы создадим свою первую страницу.

В тегах <body></body> напишите любой текст. Например:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">



<html>



<head><title>lessonshtml</title>



</head>



<body>

Всем привет, это моя первая страничка.





</body>



</html>



Сохраним изменения в нашем документе, и при запуске можно будет увидеть результат.























Теперь можем писать все что угодно.
Для того, что бы отредактировать страницу открываем html-документ через блокнот.

Теперь поработаем над текстом.
Основными элементами(тегами) являются:

<p></p> - Используется для деления текста на параграфы.

  <br>    - Используется для переноса строки.(Закрывающий тег не нужен)

<h1></h1>,<h2></h2>... <h6></h6> - Используется для создания заголовков 6 размеров.

<div></div> -Используется как удобный контейнер для блоков html кода страницы.
<span></span> - Используется для выделения части информации и придания ей различных стилей.


Начнем с элемента <p> он используется для разделения текста на параграфы.

У этого тега, как и у многих есть дополнительный атрибут - ALIGN
Align 
- Используется для горизонтального выравнивания параграфа. Имеет значения - left, center, right, justify. По умолчанию стоит значение left т.е. выравнивание по левому краю, center - выравнивание по центру, right - выравнивание по правому краю, justify - по ширине браузера. Писать надо его так <p align="значение"></p> 
Вот более подробный пример:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html>





<head><title>lessonshtml</title>


</head>

<body><p>Этот текст будет по левому краю так как я не указал не какого значения</p>
<p align="center">Этот текст будет по центру так как стоит значение "center"</p>
<p align="right"><p align="right">Этот текст будет выровнен по правому краю так как стоит значение "right"</p>
<p align="left">
<p align="left"><p align="left"> Этот текст будет также по левому краю так как стоит значение "left", так же не забывайте писать атрибут и значение без пробелов, иначе не сработает.</body>


<p align="justify">Этот текст выравнивается по ширине браузера благодаря значению "justify"</p>
<p align="center">Как вы заметили я вписал в предложения тег br <br>благодаря ему мы перенесем текст на новую строчку</p>


</html>




Смотрим, что получилось:





Шаг третий

Элемент <H1></h1> <h2></h2>... <h6></h6> - Используется для создания заголовков 6 размеров.

Атрибуты элемента : Align - значения="left, center, right". 

Вот пример:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">



<html>



<head><title>lessonshtml</title>


</head>

<body>

<h1>Этот текст самый большой</h1>
<h2>
Этот текст немного поменьше </h2>
<h3>
Этот текст среднего размера</h3>
<h4>
Это маленький текст</h4>
<h5>
Этот текст уже совсем маленький</h5>
<h6>
Это совсем мелкий текст</h6>



</body>


</html>








Результат:







Шаг четвертый


Элемент <div></div> -Используется как удобный контейнер для блоков html кода страницы.

Атрибуты такие же как и у элемента <p></p>: Align - Используется для горизонтального выравнивания параграфа. Имеет значения - left, center, right, justify.
Пример:





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">



<html>



<head><title>lessonshtml</title>


</head>

<body>

<div align="center">

Читаем этот текст по центру
</div>И тут начинается вторая строчка
<div align="right">И третья с правой стороны</div>
</body>


</html>



В итоге увидим:

 






Шаг пятый


элемент<span></span> - Используется для выделения части информации и придания ей различных стилей. Например: шрифты, цвет текста, размер текста.

Смотрим пример:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">



<html>


<head><title>lessonshtml</title>


</head>

<body>

<span style="color:green; font-size:30px;">Этот текст будет зеленым и размером в 30 пикселей.</span>



</body>


</html>



Смотрим что получилось:


 



Комментариев нет:

Отправить комментарий