Html для начинающих ( часть 5-ая, практикуемся)

топ 100 блогов Legionary06.02.2010

Html для начинающих ( часть 5-ая, практикуемся)



Продолжаем познавать азы Html :-) Это 5-ая часть нашего обучения, остальные части смотрите ТуТ.
Пора немного попрактиковаться и создать свою первую более менее приличную страничку. Плюс,- узнать еще парочку тегов:-)

Итак, в результате получим примерно такое.

Сначала посмотрим весь "код", а потом разберем его по частям:
<html>
<head>
<title>
Фридрих Ницше. Цитаты</title>
</head>
<body link="red" vlink="red" alink="#ffffff" background="http://legion-blog.narod.ru/yroki/01.jpg" ><center>
<table cellpadding="10" background="http://legion-blog.narod.ru/yroki/1.png" width="800" border="1">
<tr>
<td><center>

<a href="http://legion-blog.narod.ru"><b>
Обо мне</b></a> 
<a href="http://legion-blog.narod.ru"><b>
Альбом</b></a> 
<a href="http://legion-blog.narod.ru"><b>
Контакты</b></a>
</center></td></tr>

<tr>
<td><center><h2>
Фридрих Ницше</h2></center><br>
<p> 
"Я не понимаю, к чему заниматься злословием. Если хочешь насолить кому-либо, достаточно лишь сказать о нем какую-нибудь правду. "</p>

<p> 
"Благодетельное и назидательное влияние какой-нибудь философии... нисколько не доказывает верности ее, точно так же, как счастье, испытываемое сумасшедшим от своей idee-fixe (неотвязной мысли), нисколько не говорит в пользу разумности этой идеи. "</p>

<p> 
"Ни один победитель не верит в случайность. "</p>

<p> 
"В стадах нет ничего привлекательного, даже если они бегут вслед за тобой."</p>

<p> 
"Мы более искренни по отношению к другим, чем по отношению к самим себе."</p>

<p> 
"Между религией и настоящей наукой нет ни родства, ни дружбы, ни вражды: они на разных планетах."</p>

</td></tr>

<tr>
<td>
<center><img src="http://legion-blog.narod.ru/yroki/001.jpg" border="5"/></center>
</td></tr>
</table></center>
</body>
</html>



Вполне простенькая страничка:-) Старался использовать только те теги, которые мы уже проходили. Но добавил еще парочку. С них и начнем разбор:

Тег <br>

- используем его для создания вертикального пробела так сказать. Т.е. для увеличения расстояния между строчками текста ( картинками, таблицами и пр.) сверху вниз. Или же,в принципе, можно использовать его для перехода на новую строку.
Это тег самостоятельны, закрывать его не требуется. Т.е. просто прописываем его там где нам нужно и сколько нам нужно.
На всякий случай, смотрим на примерах код странички и как она будет выглядеть:

Без тега ( пример)
<html>
<head>
<title>Тег br</title>
</head>
<body>
<p>Привет!</p>

<p>Привет!</p>

</body>
</html>




C тегом <br> ( пример)
<html>
<head>
<title>Тег br</title>
</head>
<body>
<p>Привет!</p>
<br><br><br><br>
<p>Привет!</p>

</body>
</html>


Думаю с этим понятно:-) все просто:-)
Дальше:

Тег <center> и </center>

- тег, центрирующий содержимое, будь то текст, картинки пр. Этот тег требует закрытия, так что обрамляем наше содержимое, которое хотим поставить по центру, между <center> и </center>
Пример смотрим в самом первом коде странички:-) Думаю, все понятно.

Тег <h2> и </h2>

- этим тегом обрамляем конкретно текст. Т.е. тег выделяет текста как заголовок ( увеличивается размер и толщина шрифта). Так же есть тег <h1> - более крупный заголовок, но о них поговорим подробнее позже:-)

Далее, параметр cellpadding в таблице. Т.е. вот эта строка:
<table cellpadding="10" background="http://legion-blog.narod.ru/yroki/1.png" width="800" border="1">

Этот параметр отвечает за отступ между содержимым и границами таблицы. У меня стоит 10 пикселей. Естественно можно поставить свое значение. Покажу на примере, смотрим ТуТ

Параметр background в той же таблице,- с его помощью мы прописываем фоновое изображение таблички. Я в качестве фона выбрал полупрозначную картинку в png.

А теперь все вместе, что мы сделали:
1.- Подобрали основной фон нашей страницы.
2.- в качестве основы странички прописали таблицу шириной 800 пикселей ( под минимальное разрешение экрана) и центрировали ее.
3.- подобрали полупрозрачный фон для таблички.
4.- Разделили таблицу на 3 строки- в первой вставили необходимые нам ссылки, во второй написали некий текст, в третью вставили картинку.
Вот все основные действия. Сделать такое очень быстро и просто, но при этом, результат вполне симпатичный:-)
Вроде бы и все, остальное мы все проходили. Удачи:-)


P.S. Этот пост будет доступен также на форуме Legion

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

Архив записей в блогах:
Прошел сильный, но недолгий весенний дождь*. Выглянуло солнышко, облачка разошлись, и лучи солнца пронизали сильно посвежевший после дождя* воздух. * Телеканал "Дождь" признан иностранным ...
Вот мне интересно, о чем думают люди, когда пишут вот такие завистнические посты ? Цитирую: «Года три-четыре назад мне попалась статья, где рассказывалось о том, будто в недрах российской власти разрабатывается план по радикальному территориальному переустройству страны. Согласно ...
Мусульмане, которых не культуризируют принудительно, желают средневековых поятий вместо законов Франции. Именно поэтому когда Китайцы несут бремя белого человека и насильно окультуривают уйгуров, это хорошо, а любые попытки играться в свободу веры и совести с дикарями, кончатся тем что ...
В Ставропольском крае идущая домой учительница начальных классов увидела, что на детской площадке какой-то неадекват кричит на детей, подошла разобраться - и увидела, что он с ножом. Попыталась неадеквата отвлечь и успокоить, он ее схватил, она вывернулась... Кто-то вызвал полицию, ...
Получала по 150 тысяч евро за концерт, налоги не платила. Певица брала гонорары в конверте и вывозила деньги в европейские банки. Светлана Лобода несколько лет назад купила дом в Европе. Какую именно страну она выбрала своей новой родиной, украинская поп-дива не раскрывала. ...