КУРС «WEB-ДИЗАЙН»

реклама
КУРС «WEB-ДИЗАЙН»
Что такое Web-страница?
Что такое Web-страница?
• То, что мы видим в окне браузера,
когда заходим на какой-либо сайт!
Мы видим веб-страницу сайта – ее
содержимое!
• Веб-страницы обычно создаются на
языке разметки HTML
Какие бывают Web-страницы?
Какие бывают Web-страницы?
• Статические – текстовые файлы с
расширением .html, .htm, т.е.:
index.html
веб-страница.htm
• Динамические – генерируются
программно на сервере (к примеру, с
использованием технологии PHP)
Что такое веб-сайт?
• Совокупность веб-страниц, доступных
под одним адресом (доменным
именем: http://mail.ru) в Интернете
• Все сайты в совокупности составляют
Всемирную паутину (WWW).
• Доступ к сайтам, как правило,
осуществляется по протоколу HTTP
через веб-браузер
Как связаны между собой вебстраницы?
Как связаны между собой вебстраницы?
Ссылками!
Какие бывают ссылки?
Какие бывают ссылки?
• Внешние – ведут на другой сайт
• Внутренние - ведут на страницы
внутри сайта
Какие бывают URL-адреса
ссылок?
• Относительные
web_page2.html
/images/picture.gif
../images/article.jpg
• Абсолютные (начинаются с протокола
http:// и др.)
http://yandex.ru
http://forumsiti.ru/viewtopic.php?id=597
-> http://www.site.com/index.html
http://mail.ru
/main3.html
http://www.site.com/2.html
Что такое веб-сервер?
Что такое веб-сервер?
• Компьютер, подключенный к сети
Интернет, на котором работает
специальная программа (веб-сервер),
отправляющая веб-страницы
браузерам пользователей в ответ на их
запросы
Что такое HTML?
Что такое HTML?
• Язык разметки веб-страниц!
• Что происходит: Когда мы заходим на
сайт http://mail.ru?
Веб-сервер mail.ru отправляет нам
HTML-страницу в ответ на запрос
http://mail.ru
Наш браузер читает HTML код и
отображает согласно его разметке вебстраницу на экране!
Любая веб-страница на языке
HTML представляет собой набор
элементов!
Начало и конец каждого такого элемента
обозначается специальными
пометками.
Какими?
Какие бывают теги?
Какие бывают теги?
• Одиночные
<img src=“”/>
<br/>
• Парные (теги-контейнеры)
<p>Какой-то текст или др. теги</p>
<a href=“http://mail.ru”>mail.ru</a>
Правила написания тега
(синтаксис)
Правила написания тега
(синтаксис)
• Все теги пишутся внутри скобок < >
• Тег br пишется так: <br> или так <br/>
• Все открытые парные теги должны
быть обязательно закрыты!
<p> - открыли тег P
далее какой-то текст внутри / др. теги
</p> - закрыли тег P
Что еще есть у тегов?
Что еще есть у тегов?
Атрибуты – применяются для того, чтобы
расширить возможности отдельных
тегов и более гибко управлять их
содержимым.
Как правильно задавать
атрибуты для тегов?
Как правильно задавать
атрибуты для тегов?
<тег атрибут=“значение”> … </тег>
<p align=“center”>какой-то текст</p>
<img src=“images/pic.gif” align=“left”
height=“200px” hspace=“10px” />
Исключение (атрибут без значения):
<a href=“images/pic.gif” download>скачать
картинку!</a>
Какая основная структура вебстраницы?
Какая основная структура вебстраницы?
<html>
<head>
<title>Тут заголовок страницы</title>
</head>
<body>
А тут содержимое страницы!
</body>
</html>
Основные (обязательные) теги
веб-страницы!
• Тег <html> является контейнером,
который заключает в себе все
содержимое веб-страницы, включая
теги <head> и <body>
Основные теги веб-страницы!
• Тег <head> содержит описательную часть.
• Также внутри
контейнера <head> находятся метатеги,
которые используются для браузеров и
поисковых систем (получение описания
сайта, ключевых слов и других данных.)
• Содержимое тега <head> не
отображается напрямую на веб-странице,
исключение <title> - заголовок окна
(вкладки) веб-страницы.
Основные теги веб-страницы!
• Элемент <body> предназначен для
хранения содержания веб-страницы
(контента), отображаемого в окне
браузера.
• Все, что отображается на странице
должно быть внутри <body>
Все ли здесь правильно?
<html>
<head><title>Моя страница</title></head>
</html>
<body>
Эта моя первая страница!
</body>
Все ли здесь правильно?
<html>
<head><title>Моя страница</title></head>
</html>
<body>
Эта моя первая страница!
</body>
</html>
А здесь?
<html>
<head><title>Заголовок</title></head>
<body>
<p>Эта моя первая страница!<p>
</body>
</html>
А здесь?
<html>
<head><title>Заголовок</title></head>
<body>
<p>Эта моя первая страница!</p>
</body>
</html>
Как вставить ссылку
HTML-код:
<a href=“page.html”>здесь текст
ссылки</a>
В браузере:
здесь текст ссылки
Как вставить ссылку на Email?
HTML-код:
<a href=“mailto:dima@yandex.ru”>Отправить
сообщение на адрес dima@yandex.ru</a>
В браузере:
Отправить сообщение на адрес dima@yandex.ru
Как вставить картинку
HTML-код:
<img src=“/images/picture.gif”
height=“120px” alt=“фото самолёта” />
В браузере:
Особенности задания
относительных путей к файлам
• Пути к файлам задаются в атрибутах
тегов (теги: A и IMG)
<a href=“page.html”>ссылка на
страницу</a>
<img src=“/images/pic.jpeg”/>
Особенности задания
относительных путей к файлам
Содержимое папки primer1
Код вставки картинки в файле Вебстраница.html:
<img src=“boeing.jpg”/>
Особенности задания
относительных путей к файлам
Содержимое папки primer1
Файл boeing.jpg
находится в папке
images
Код вставки картинки в файле Вебстраница.html:
<img src=“images/boeing.jpg”/>
Особенности задания
относительных путей к файлам
Содержимое папки primer1
Файл Веб-страница.html
находится в папке
html
Код вставки картинки в файле Вебстраница.html:
<img src=“../boeing.jpg”/>
Скачать