1 / 41

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

КУРС « WEB -ДИЗАЙН». Что такое Web- страница ?. Что такое Web- страница ?. То, что мы видим в окне браузера, когда заходим на какой-либо сайт! Мы видим веб-страницу сайта – ее содержимое! Веб-страницы обычно создаются на языке разметки HTML. Какие бывают Web- страницы?.

gitano
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Что такое Web-страница?

  3. Что такое Web-страница? • То, что мы видим в окне браузера, когда заходим на какой-либо сайт!Мы видим веб-страницу сайта – ее содержимое! • Веб-страницы обычно создаются на языке разметки HTML

  4. Какие бывают Web-страницы?

  5. Какие бывают Web-страницы? • Статические – текстовые файлы с расширением .html, .htm, т.е.: index.htmlвеб-страница.htm • Динамические – генерируются программно на сервере (к примеру, с использованием технологии PHP)

  6. Что такое веб-сайт? • Совокупность веб-страниц, доступных под одним адресом (доменным именем: http://mail.ru) в Интернете • Все сайты в совокупности составляют Всемирную паутину (WWW). • Доступ к сайтам, как правило, осуществляется по протоколу HTTPчерез веб-браузер

  7. Как связаны между собой веб-страницы?

  8. Как связаны между собой веб-страницы? Ссылками!

  9. Какие бывают ссылки?

  10. Какие бывают ссылки? • Внешние – ведут на другой сайт • Внутренние - ведут на страницы внутри сайта

  11. Какие бывают URL-адреса ссылок? • Относительныеweb_page2.html/images/picture.gif../images/article.jpg • Абсолютные(начинаются с протокола http://и др.) http://yandex.ru http://forumsiti.ru/viewtopic.php?id=597

  12. -> http://www.site.com/index.html http://mail.ru /main3.html http://www.site.com/2.html

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

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

  15. Что такое HTML?

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

  17. Любая веб-страница на языке HTML представляет собой набор элементов! Начало и конец каждого такого элемента обозначается специальными пометками. Какими?

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

  19. Какие бывают теги? • Одиночные<imgsrc=“”/><br/> • Парные (теги-контейнеры) <p>Какой-то текст или др. теги</p><a href=“http://mail.ru”>mail.ru</a>

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

  21. Правила написания тега (синтаксис) • Все теги пишутся внутри скобок <> • Тег brпишется так: <br>или так <br/> • Все открытые парные теги должны быть обязательно закрыты! <p> - открыли тег Pдалее какой-то текст внутри / др. теги</p> - закрыли тег P

  22. Что еще есть у тегов?

  23. Что еще есть у тегов? Атрибуты – применяются для того, чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым.

  24. Как правильно задавать атрибуты для тегов?

  25. Как правильно задавать атрибуты для тегов? <тег атрибут=“значение”>… </тег> <p align=“center”>какой-то текст</p> <imgsrc=“images/pic.gif” align=“left” height=“200px” hspace=“10px” /> Исключение (атрибут без значения): <a href=“images/pic.gif” download>скачать картинку!</a>

  26. Какая основная структура веб-страницы?

  27. Какая основная структура веб-страницы? <html> <head> <title>Тут заголовок страницы</title> </head> <body> А тут содержимое страницы! </body> </html>

  28. Основные (обязательные) теги веб-страницы! • Тег <html> является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>

  29. Основные теги веб-страницы! • Тег <head>содержит описательную часть. • Также внутри контейнера <head> находятся метатеги, которыеиспользуются для браузеров и поисковых систем (получение описания сайта, ключевых слов и других данных.) • Содержимое тега <head> не отображается напрямую на веб-странице, исключение <title> - заголовок окна (вкладки) веб-страницы.

  30. Основные теги веб-страницы! • Элемент <body> предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. • Все, что отображается на странице должно быть внутри <body>

  31. Все ли здесь правильно? <html> <head><title>Моя страница</title></head> </html> <body> Эта моя первая страница! </body>

  32. Все ли здесь правильно? <html> <head><title>Моя страница</title></head> </html> <body> Эта моя первая страница! </body> </html>

  33. А здесь? <html> <head><title>Заголовок</title></head> <body> <p>Эта моя первая страница!<p> </body> </html>

  34. А здесь? <html> <head><title>Заголовок</title></head> <body> <p>Эта моя первая страница!</p> </body> </html>

  35. Как вставить ссылку HTML-код: <a href=“page.html”>здесь текст ссылки</a> В браузере: здесь текст ссылки

  36. Как вставить ссылку на Email? HTML-код: <a href=“mailto:dima@yandex.ru”>Отправить сообщение на адрес dima@yandex.ru</a> В браузере: Отправить сообщение на адрес dima@yandex.ru

  37. Как вставить картинку HTML-код: <imgsrc=“/images/picture.gif” height=“120px” alt=“фото самолёта” /> В браузере:

  38. Особенности задания относительных путей к файлам • Пути к файлам задаются в атрибутах тегов (теги: A и IMG)<a href=“page.html”>ссылка на страницу</a><imgsrc=“/images/pic.jpeg”/>

  39. Особенности задания относительных путей к файлам Содержимое папки primer1 Код вставки картинки в файле Веб-страница.html: <imgsrc=“boeing.jpg”/>

  40. Особенности задания относительных путей к файлам Содержимое папки primer1 Файл boeing.jpg находится в папке images Код вставки картинки в файле Веб-страница.html: <imgsrc=“images/boeing.jpg”/>

  41. Особенности задания относительных путей к файлам Содержимое папки primer1 ФайлВеб-страница.html находится в папке html Код вставки картинки в файле Веб-страница.html: <imgsrc=“../boeing.jpg”/>

More Related