My first web site slides

My First Web Site
E. N. Morozova
Ural State University
of Railway Transport
(USURT)

Web Site Content
<html>
<head>
<title>My first step </title>
</head>
<body>
Hi! That’s my first web site
 
Welcome! :)
</body>
</html>

Saving Your Page
- Файл -> Сохранить Как (File ->
Save as)
- Then you should enter the name of your
web site: index.html (not just: index; don’t
forget to add: .html).
- Next time when you change your site
content, you should go the following way:
Файл -> Сохранить (File -> Save).
The way to your file:
C:/Your_Surname/index.html

Opening Your Site
1. In the browser, for example
Internet Explorer:
Файл - Открыть - button Обзор -
Your_Surname (index.html)
(File – Open – Browse – index.html)
OR:
2. Follow next way:
C:/Your_Surname/index.html

Changing Content
If you bring the changes
into the site content, don’t
forget to click the button
“Refresh”
Let’s see what we’ve got! :)

Basic Tags
<html> - Opening your page
</html> - Closing your page
<head> - Document title
</head> - End of the document
title
<body> - Document body
(content)
</body> - End of the document
body (content)

Learning how to color
Palette (all Internet colors - http://
www.artlebedev.ru/tools/colors/ )
 - Tag for specifying font
Change in your page:
 Welcome! :)

Or 
click the button “Refresh”

How can we specify the color in
another way?
Specially for this case there is the tag:
<body>:
Change in your page:
<body text="#336699">
click the button “Refresh”

Changing Page Color
<body text="#336699"
bgcolor="#000000">
Bgcolor – page background color
For example:
99FFCC; CCFFFF; CC99FF; FF33CC;
FFFF66; 000000; CCCCCC; 0033FF.

Tags placing’s rules
Обратите внимание:
<Tag1><Tag2><Tag3> ...
</Tag3></Tag2></Tag1>
Только такая очередность
закрывающих тэгов верна: тэг,
который мы открыли первым -
закрываем последним, второй –
предпоследним и т.д.

Size of Font
 - Use for changing size of
font and the type of font (Arial, Verdana,
Tempus Sans ITC)...

 Good day!
 
Where - italic type
 - demibold

Вставка картинки
<img src="primtocodephoto.gif">
<img src=“Your_Surname/primtocodephoto.jpg">
Если картинка лежит на уровень выше, а документ находится
в поддиректории, то ссылка на неё будет такой:
<img src="../primtocodephoto.jpg">
Если картинка лежит на другом сайте, то путь прописывается
полностью:
<img src="http://www.homepage.ru/my/my.jpg">

Расположение картинки
<img src="pr1.png" align="left">
<img src="pr1.png" align="right">

Расположение текста и картинки
Но это не все: текст может располагаться внизу картинки -
(1), посередине - (2), и вверху - (3):
(1) - <img src="pr1.png" align="bottom">
(2) - <img src="pr1.png" align="middle">
(3) - <img src="pr1.png" align="top">
картинку можно сделать фоном документа. Это безобразие
прописывается в открывающем тэге боди:
<body text="#336699" bgcolor="#000000"
background="ваш_фон.jpg">

Здравствуйте, это моя первая страница.
Добро пожаловать! :)
Я совсем недавно начал(а) знакомиться с виртуальной
жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю
страничку для моих новых виртуальных друзей и знакомых, чтобы они могли
посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою
гостевую книгу.
А может и просто случайный посетитель вдруг захочет познакомится со мной, и у
меня появится еще один виртуальный друг? :)
На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению,
поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в
целом заметно, что я вполне ничего:)
Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку
попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем
друзьями:)

Ссылки на другие документы
При помощи ссылок мы связываем документы
Тэг <a></a> делает ссылкой заключенную в него
картинку или фразу (текст). Принципы
прописывания пути мы уже знаем:
(1) - <a href="prf.html">мои фотографии</a>
(2) - <a href="photos/prf.html">мои
фотографии</a>
(3) - <a href="http://www.homepage.ru/prf.html"
>мои фотографии</a>

Сссылка на e-mail
Если вы хотите сделать картинку
ссылкой на ваш почтовый ящик, то
принцип тот же:
<a href="mailto:pochta@mail.ru"><img
src="primtocodephoto.gif"></a>

Успехов вам  Всего доброго ;)
Good luck to you! Thanks for attention.
А теперь все в ваших руках!
У вас есть раздаточный материал с
основными тэгами, так что
пробуйте, дерзайте!

My first web site slides

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (8)

Similar to My first web site slides

Similar to My first web site slides (20)

My first web site slides