Html для начинающих ( часть 5-ая, практикуемся)
06-02-2010 11:15
к комментариям - к полной версии
- понравилось!
Продолжаем познавать азы 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>
Вполне простенькая страничка:-) Старался использовать только те теги, которые мы уже проходили. Но добавил еще парочку. С них и начнем разбор:
Это тег самостоятельны, закрывать его не требуется. Т.е. просто прописываем его там где нам нужно и сколько нам нужно.
На всякий случай, смотрим на примерах код странички и как она будет выглядеть:
Без тега ( пример)
<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>
Думаю с этим понятно:-) все просто:-)
Дальше:
Пример смотрим в самом первом коде странички:-) Думаю, все понятно.
Далее, параметр 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
вверх^
к полной версии
понравилось!
в evernote
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
Спасибо просто и доступно!!!!
вера_власик
07-02-2010-10:55
удалить
Legionary, Спасибо за очень ценную и полезную информацию! Удачи вам, мой друг!:heart:
Elena_Khokhlova
07-02-2010-11:24
удалить
Спасибо, будем практиковаться 
Ответ на комментарий Ла-Русь #
львица1, в начале поста написал:-))
http://www.liveinternet.ru/showjournal.php?journalid=3236775&keywordid=1270043
http://www.liveinternet.ru/showjournal.php?journalid=3236775&keywordid=1270043
Ответ на комментарий NICKBO #
NICKBO, э... блокнот:-)) ну мы работаем прямо на сервисе "народ", вот тут почитайте:-)
http://www.liveinternet.ru/users/legionary/post113535098
http://www.liveinternet.ru/users/legionary/post113535098
Вроде по-русски, а ничего не понятно. Надо учиться. Спасибо за работу и заботу.
olga_reznikova
07-02-2010-11:54
удалить
Спасибо за науку,для меня все это-просто лес дремучий
Спасибо Лёша, отличный пост, цитирую! 
Дария_Швельниц
07-02-2010-14:56
удалить
Беру в цитатник.Большое спасибо!!!
Николай_Ворончихин
07-02-2010-15:03
удалить
Спасибо! Попробую освоить, вот только одно плохо скопировался только текст без изображений.
Спасибо большое!:)
Взяла!:give_rose
Взяла!:give_rose
Взяла все 5 уроков. Не знаю, хватит ли у меня ума. Но очень хочу научиться. Вам чрезвычайно признательна.
На первый взгляд, кажется не освою, но попробую. Спасибо!
Анджелла_Даник
07-02-2010-17:48
удалить
пока ничего не понимаю,но исправно тащу себе все уроки в надежде научиться..,Так что спасибо за науку.
Людмила_Малюта
07-02-2010-19:50
удалить
Забрала .Для меня это темный лес.
Лидия_Крапивина
07-02-2010-20:22
удалить
Спасибо за полезный урок.
Richmond_BC
07-02-2010-20:56
удалить
Ничего не понял, но раз народ пишет, что дело нужное, возьму себе и попробую.
Антонина_Грозная
07-02-2010-21:17
удалить
А МЕНЯ НАУЧИЛИ ДЕЛАТЬ БЕГУЩУЮ СТРОКУ!!!!!!
ЗАХОДИТЕ И ПОСМОТРИТЕ У МЕНЯ НЕСКОЛЬКО ПОСТОВ - БЕГУЩИЕ!!! СПАСИБО!!!
[432x432]
ЗАХОДИТЕ И ПОСМОТРИТЕ У МЕНЯ НЕСКОЛЬКО ПОСТОВ - БЕГУЩИЕ!!! СПАСИБО!!!
[432x432]
Алиса-лисичка
07-02-2010-23:57
удалить
Спасибо!Ждём продолжения.
Wella_Wella
08-02-2010-13:16
удалить
Спасибо за полезный пост! Удачи и всех благ!
Вы сейчас не можете прокомментировать это сообщение.
Дневник Html для начинающих ( часть 5-ая, практикуемся) | Legionary - Legionblog |
Лента друзей Legionary
/ Полная версия
Добавить в друзья
Страницы:
«позже
раньше»