КУРС « 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

http://mail.ru/

http://www.site.com/2.html

Что такое веб-сервер?

Что такое веб-сервер?

• Компьютер, подключенный к сети Интернет, на котором работает специальная программа (веб-сервер), отправляющая веб-страницы браузерам пользователей в ответ на их запросы

Что такое HTML?

Что такое HTML?

• Язык разметки веб-страниц!• Что происходит: Когда мы заходим на

сайт http://mail.ru?Веб-сервер mail.ru отправляет нам HTML-страницу в ответ на запрос http://mail.ruНаш браузер читает HTML код и отображает согласно его разметке веб-страницу на экране!

http://mail.ru/

Любая веб-страница на языке HTML представляет собой набор

элементов!

Начало и конец каждого такого элемента обозначается специальными пометками.

Какими?

Какие бывают теги?

Какие бывают теги?

• Одиночные<img src=“”/> 

• Парные (теги-контейнеры) Какой-то текст или др. теги <a href=“http://mail.ru”>mail.ru</a>

Правила написания тега (синтаксис)

Правила написания тега (синтаксис)

• Все теги пишутся внутри скобок < >• Тег br пишется так: или так • Все открытые парные теги должны

быть обязательно закрыты! - открыли тег Pдалее какой-то текст внутри / др. теги - закрыли тег 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>Эта моя первая страница!</body></html>

А здесь?

<html><head><title>Заголовок</title></head><body>Эта моя первая страница!</body></html>

Как вставить ссылку

<a href=“page.html”>здесь текст ссылки</a>

здесь текст ссылки

HTML-код:

В браузере:

Как вставить ссылку на Email?

<a href=“mailto:[email protected]”>Отправить сообщение на адрес [email protected]</a>

Отправить сообщение на адрес [email protected]

HTML-код:


mailto:[email protected]

mailto:[email protected]

Как вставить картинку

<img src=“/images/picture.gif” height=“120px” alt=“фото самолёта” />

HTML-код:

Особенности задания относительных путей к файлам

• Пути к файлам задаются в атрибутах тегов (теги: A и IMG)

<a href=“page.html”>ссылка на страницу</a>

<img src=“/images/pic.jpeg”/>

<img src=“boeing.jpg”/>

Содержимое папки primer1

Код вставки картинки в файле Веб-страница.html:

<img src=“images/boeing.jpg”/>



Файл boeing.jpg находится в папке images

<img src=“../boeing.jpg”/>



Файл Веб-страница.htmlнаходится в папке html

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

Documents

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