Upload
gitano
View
99
Download
0
Embed Size (px)
DESCRIPTION
КУРС « WEB -ДИЗАЙН». Что такое Web- страница ?. Что такое Web- страница ?. То, что мы видим в окне браузера, когда заходим на какой-либо сайт! Мы видим веб-страницу сайта – ее содержимое! Веб-страницы обычно создаются на языке разметки HTML. Какие бывают Web- страницы?. - PowerPoint PPT Presentation
Citation preview
Что такое Web-страница?
• То, что мы видим в окне браузера, когда заходим на какой-либо сайт!Мы видим веб-страницу сайта – ее содержимое!
• Веб-страницы обычно создаются на языке разметки HTML
Какие бывают 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?
• Язык разметки веб-страниц!• Что происходит: Когда мы заходим на
сайт 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>
Как вставить ссылку
<a href=“page.html”>здесь текст ссылки</a>
здесь текст ссылки
HTML-код:
В браузере:
Как вставить ссылку на Email?
<a href=“mailto:[email protected]”>Отправить сообщение на адрес [email protected]</a>
Отправить сообщение на адрес [email protected]
HTML-код:
В браузере:
Как вставить картинку
<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”/>
Содержимое папки primer1
Код вставки картинки в файле Веб-страница.html:
Файл boeing.jpg находится в папке images