'

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

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

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


Слайд 12

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


Слайд 13

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


Слайд 14

Что такое HTML?


Слайд 15

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


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

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


Слайд 20

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


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

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


Слайд 28

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


Слайд 29

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


Слайд 30

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


Слайд 31

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


Слайд 32

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


Слайд 33

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


Слайд 34

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


Слайд 35

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


Слайд 36

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


Слайд 37

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


Слайд 38

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


Слайд 39

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


Слайд 40

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


×

HTML:





Ссылка: