КУРС «WEB-ДИЗАЙН»
advertisement
КУРС «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”/>
