My first web site slides

My First Web Site

E. N. MorozovaUral 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:[email protected]"><img src="primtocodephoto.gif"></a>

Успехов вам Всего доброго ;) Good luck to you! Thanks for attention.

А теперь все в ваших руках!У вас есть раздаточный материал с

основными тэгами, так что пробуйте, дерзайте!

Education

My first web site slides