Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АрхитектураБиологияГеографияДругоеИностранные языки
ИнформатикаИсторияКультураЛитератураМатематика
МедицинаМеханикаОбразованиеОхрана трудаПедагогика
ПолитикаПравоПрограммированиеПсихологияРелигия
СоциологияСпортСтроительствоФизикаФилософия
ФинансыХимияЭкологияЭкономикаЭлектроника

И так, предлагаю немного научиться делать сайты.

И так, предлагаю немного научиться делать сайты.

Для начала небольшая информация о странице в интернете. Внутри (если открыть в блокноте) она выглядит так:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Заголовок страницы</title>

</head>

<body>

Содержание страницы

</body>

</html>

Это представлена самая простая страница. Как пример, можете открыть блокнот, вставить этот текст и выбрав «сохранить как..» в типе файла указать «Все файлы», а в имени файла написать «2.html». Примечание: запомните куда сохранили.

Если найти этот файл через Мой компьютер, и открыть его (просто кликнув 2 раза – как с обычным файлом). То должен открыться браузер с примерно следующим содержанием:

Следующий важный элемент это ссылка:

<a href=”адрес ссылки”>Текст ссылки</a>

Т.е. если вы хотите сделать ссылку вы просто пишите. К примеру:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Заголовок страницы</title>

</head>

<body>

Содержание страницы

<a href=”куда хотим перейти”>А что видит пользователь</a>

</body>

</html>

 

Второй важный элемент – картинка.

<img src="путь до картинки" alt="если не будет картинки, какой текст появится" />

Пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Заголовок страницы</title>

</head>

<body>

Страница очень классная

<a href=”http://lmso-dvzh.ru”>Перейдем на наш сайт</a>

<img src="http://liteboss.ru/wp-content/uploads/2011/08/4409a72915143954ee8b9ac0793.jpg" alt="если не будет картинки, какой текст появится" />

</body>

</html>

 

И третий элемент на сегодня – список (как в Worde)

<ul>

<li>первый элемент</li>

<li>второй элемент</li>

<li>третий элемент</li>

</ul>

 

Пример использования:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Заголовок страницы</title>

</head>

<body>

Страница очень классная

<a href=”http://lmso-dvzh.ru”>Перейдем на наш сайт</a>

<img src="http://liteboss.ru/wp-content/uploads/2011/08/4409a72915143954ee8b9ac0793.jpg" alt="если не будет картинки, какой текст появится" />

Изучение сайтов поможет вам:

<ul>

<li>получить опыт работы в команде</li>

<li>создавать собственные сайты</li>

<li>зарабатывать деньги (если продавать знания и умения)</li>

</ul>

</body>

</html>

 

Как итоговое задание предлагаю следующее.

Вот текст. Он показывает, как все это можно совместить:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Заголовок страницы</title>

</head>

<body>

Страница очень классная

<ul>

<li><a href=”http://lmso-dvzh.ru”><img src="http://liteboss.ru/wp-content/uploads/2011/08/4409a72915143954ee8b9ac0793.jpg" alt="если не будет картинки, какой текст появится" /></a></li>

<li>создавать собственные сайты</li>

<li>зарабатывать деньги (если продавать знания и умения)</li>

</ul>

</body>

</html>

 

Пример страницы на нашем сайте (просмотр фоток)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Заголовок страницы</title>

</head>

<body>

<ul id="lightBox">

<li><a rel="lightbox-group" href="/Images/Galery/max/1.jpg"><img src="/Images/Galery/mini/1.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/2.jpg"><img src="/Images/Galery/mini/2.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/3.jpg"><img src="/Images/Galery/mini/3.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/4.jpg"><img src="/Images/Galery/mini/4.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/5.jpg"><img src="/Images/Galery/mini/5.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/6.jpg"><img src="/Images/Galery/mini/6.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/7.jpg"><img src="/Images/Galery/mini/7.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/8.jpg"><img src="/Images/Galery/mini/8.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/9.jpg"><img src="/Images/Galery/mini/9.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/10.jpg"><img src="/Images/Galery/mini/10.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/11.jpg"><img src="/Images/Galery/mini/11.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/12.jpg"><img src="/Images/Galery/mini/12.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/13.jpg"><img src="/Images/Galery/mini/13.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/14.jpg"><img src="/Images/Galery/mini/14.jpg" alt="" /></a></li>

<li><a rel="lightbox-group" href="/Images/Galery/max/15.jpg"><img src="/Images/Galery/mini/15.jpg" alt="" /></a></li>

</ul>

</body>

</html>

На id="lightBox" и rel="lightbox-group" можете пока не обращать внимания.

Попробуйте выбрать несколько картинок и сделать из них список. При нажатии на картинку переходить на разные сайты (вконтакте, фейсбуки, мейлы, гуглы и т.д.).

 

Все вопросы можете задавать в аське, вконтакте, по телефону =)

УДАЧИ!

Дата добавления: 2015-11-04; просмотров: 23 | Нарушение авторских прав


<== предыдущая лекция | следующая лекция ==>
Қазақстан Республикасының Білім және ғылым министрінің 2013 жылғы 3 сәуірде №115 бұйрығының бекітілген, Қазақстан | Aeo ”nazarbayev intellectual schools”
mybiblioteka.su - 2015-2024 год. (0.011 сек.)