1
2
3
А теперь вставим картинку на вашу страничку. Скопируйте в туже папку любую
картинку или фото (небольшого размера), пусть картинка лежит в той же папке,
что и ваш документ. Тогда введём <img src="указываем где лежит картинка">
Например ваша картинка называется kartina.gif и лежит у вас в той же папке, что
и документ list.html Значит пишем: <img src=" Первая страничка\kartina.gif ">
Если картинка лежит на другом сайте пишем:
<img src=" http://astchen2006.narod.ru/Anim5.gif ">
Пример:
<html>
<head>
<title>Первая страничка</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<center>
<h2> Всем привет!!!</h2>
</center>
<br>
<pre>
Хорошая погода. Пойду я погуляю.
Вернусь не поздно и досмотрю
любимое кино.
</pre>
<br>
Здесь будет находится вся красота вашей странички (тэги), текст, фон, картинки…
<br>
<img src=" http://astchen2006.narod.ru/stroisait/kartinka.gif ">
<br>
<font color="#ff3333"><i>тут текст у которого меняем цвет</i></font>
</body>
</html>
Посмотрим?
Загляните в тэги и посмотрите какие атрибуты подходят к img, выровнять
картинку , или например с помощью width="" можно задать другую ширину
картинки, пример:
<html>
<head>
<title>Первая страничка</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<center>
<h2> Всем привет!!!</h2>
</center>
<br>
<pre>
Хорошая погода. Пойду я погуляю.
Вернусь не поздно и досмотрю
любимое кино.
</pre>
<br>
Здесь будет находится вся красота вашей странички (тэги), текст, фон, картинки…
<br>
<img src=" http://astchen2006.narod.ru/stroisait/kartinka.gif " width="300">
<br>
<font color="#ff3333"><i>тут текст у которого меняем цвет</i></font>
</body>
</html>
Посмотрим?
Увеличилась высота и ширина. Но не пытайтесь растянуть её до фонового
рисунка. Чтоб картинку сделать фоном пишем в открывающем <body>:
<body bgcolor="#ccffcc" text="#330099" background=" Первая страничка\kartina.gif ">
Если фоновый рисунок грузится долго, можно изменить у него формат и уменьшить
цветà. Это можно сделать в Adobe Photoshop (Файл → Сохранить для WEB),
в открывшемся окне выбрать формат и уменьшить цветà. В нижнем левом углу
будет показан вес фонового рисунка.
У меня на примере это будет так:
<html>
<head>
<title>Первая страничка</title>
</head>
<body bgcolor="#ccffcc" text="#330099" background="stroisait/kartinka.gif">
<center>
<h2> Всем привет!!!</h2>
</center>
<br>
<pre>
Хорошая погода. Пойду я погуляю.
Вернусь не поздно и досмотрю
любимое кино.
</pre>
<br>
Здесь будет находится вся красота вашей странички (тэги), текст, фон, картинки…
<br>
<img src=" http://astchen2006.narod.ru/stroisait/kartinka.gif " width="300">
<br>
<font color="#ff3333"><i>тут текст у которого меняем цвет</i></font>
</body>
</html>
Посмотрим?
Теперь вставим ссылку на страничку.
Пишем:
<a href="http://astchen2006.narod.ru/stroisait/risunki.html">Рисунки</a>(пример1).
Если вам надо, чтобы ссылка на ваши рисунки открывалась в отдельном окне пишем:
target="_blank" (пример 2)
Пример 1:
<html>
<head>
<title>Первая страничка</title>
</head>
<body bgcolor="#ccffcc" text="#330099" >
<center>
<h2> Всем привет!!!</h2>
</center>
<br>
<pre>
Хорошая погода. Пойду я погуляю.
Вернусь не поздно и досмотрю
любимое кино.
</pre>
<br>
Здесь будет находится вся красота вашей странички (тэги), текст, фон, картинки…
<br>
<a href="http://astchen2006.narod.ru/stroisait/risunki.html">Рисунки</a>
<br>
<img src=" http://astchen2006.narod.ru/stroisait/kartinka.gif " width="300">
<br>
<font color="#ff3333"><i>тут текст у которого меняем цвет</i></font>
</body>
</html>
Посмотрим?
Пример 2:
<html>
<head>
<title>Первая страничка</title>
</head>
<body bgcolor="#ccffcc" text="#330099" >
<center>
<h2> Всем привет!!!</h2>
</center>
<br>
<pre>
Хорошая погода. Пойду я погуляю.
Вернусь не поздно и досмотрю
любимое кино.
</pre>
<br>
Здесь будет находится вся красота вашей странички (тэги), текст, фон, картинки…
<br>
<a href=http://astchen2006.narod.ru/stroisait/risunki.html target="_blank">Рисунки </a>
<br>
<img src=" http://astchen2006.narod.ru/stroisait/kartinka.gif " width="300">
<br>
<font color="#ff3333"><i>тут текст у которого меняем цвет</i></font>
</body>
</html>
Посмотрим?
Фон я убрала, чтоб не отвлекал.
Сделаем теперь так, чтобы ссылка была картинкой.
Пишем: <a href="prf.html"><img src="primtocodephoto.gif"></a>
Пример:
<html>
<head>
<title>Первая страничка</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<center>
<h2> Всем привет!!!</h2>
</center>
<br>
<pre>
Хорошая погода. Пойду я погуляю.
Вернусь не поздно и досмотрю
любимое кино.
</pre>
<br>
<a href=" http://astchen2006.narod.ru/stroisait/risunki.html"><img
src="stroisait/kartinka.gif "></a>
<br>
Здесь будет находится вся красота вашей странички (тэги), текст, фон, картинки…
<br>
<font color="#ff3333"><i>тут текст у которого меняем цвет</i></font>
</body>
</html>
Посмотрим?
А теперь сделаем ссылку на вашу почту.
Пишем между <body></body>:
<a href="mailto:здесь адрес "> здесь название </a>
Вот, что получилось у меня:
<a href="mailto:Nasta13-93@mail.ru"> почтовый ящик </a>
Пример можете посмотреть у меня в разделе ссылки.
Бегущая строка:
<marquee height="10" width="270" bgcolor="#ff6666" scrollamount="8"
loop="3">Бегущая строка</marquee>
Разберём – height, width вам уже знакомы (высота, ширина); bgcolor – цвет;
Loop – сколько кругов пробежит ваша строчка, у нас три, так что пробежит 3 круга и
остановится; scrollamount – скорость, задаём значения от 1 до 10.
Пример:
<html>
<head>
<title>Народ.Ру: Новая страница</title>
</head>
<body>
<marquee height="30" width="400" bgcolor="#ff6666" scrollamount="8"
loop="3">Бегущая строка</marquee>
</body>
</html>
Посмотрим?
Посмотрите в тэгах, что можно ещё изменить в бегущей строке, с помощью других
атрибутов для тега marquee.
Чтоб выровнять объект, текст воспользуйтесь тегом <dif></dif>, посмотрите
в тэгах, какие атрибуты применимы для него.
Пример:
<html>
<head>
<title>Первая страничка</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<center>
<h2> Всем привет!!!</h2>
</center>
<br>
<pre>
Хорошая погода. Пойду я погуляю.
Вернусь не поздно и досмотрю
любимое кино.
</pre>
<br>
<div align="center">
<a href="http://astchen2006.narod.ru/stroisait/risunki.html"><img
src="http://astchen2006.narod.ru/stroisait/kartinka.gif"></a>
</dif>
<br>
Здесь будет находится вся красота вашей странички (тэги), текст, фон, картинки…
<br>
<font color="#ff3333"><i>тут текст у которого меняем цвет</i></font>
</body>
</html>
Посмотрим?
Ещё для выравнивания текста можно воспользоваться тегом параграф <p></p>.
Текст заключённый в него можно выровнять, как вам надо с помощью атрибута align,
на следующей странице, я буду об этом обязательно говорить. И ещё этот тег имеет
свойство блока, т.е, с верху и с низу добавляется пустая строка.
Пример:
<html>
<head>
<title>Первая страничка</title>
</head>
<body bgcolor="#ccffcc" text="#330099">
<center>
<h2> Всем привет!!!</h2>
</center>
Здесь будет находиться вся красота вашей странички (тэги), текст, фон, картинки…
<p>
Учимся работать с параграфами, с помощью них можно выровнять текст. Текст заключённый
в данный тег становится блоком.
</p>
До и после блока всегда будет добавляться пустая строка.
Чтоб вы не запутались, я всё лишнее убрала.
</body>
</html>
Посмотрим?
Продолжение следует... Смотрите в "Обновлениях" на Главной.
1
2
3
Copyright © 2006-2007 Astchen2006_ http://astchen2006.narod.ru
All rights reserved. Все права защищены. Всё, материалы этой статьи запрещенно копировать
и распространять (без разрешения администратора) они предназначены для ознакомительных целей.
|
|