Цитата сообщения Legionary
Html для начинающих ( часть 5-ая, практикуемся)
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
