Разработка веб ‒ сайтов

Разработка веб ‒сайтов

Как работает интернет?

http://yandex.ru

Твой компьютер DNS сервер

http://213.180.193.11/

WEB сервер

страница

WEB сервер – обычный компьютер

Страница – обычный текстовый файл

Страница интернет сайта – текстовый файл, с описанием того, что на ней находится.

Для описания используется особый язык разметки – HTML (HyperText Markup Language).

Гипертекст – текст со ссылками.

Также страница может включать в себя описание стилей CSS и скрипты на JavaScript.

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

Технологии, используемые в интернете

• Описание каркаса страницы• Теги со свойствами• Абзацы, заголовки, таблицы,

блоки, ключевые слова…


• Каскадные таблицы стилей• Описание внешнего вида• Отступы, цвета, фоновые

изображения…• Применяется к элементам,

описанным с помощью html

GOOGLE без CSS

Нормальный GOOGLE


• Язык программирования• Движения, проверка форм, игры• Изменение страницы в

зависимости от поведения пользователя

Откуда берется страница?

http://site.ru/page.html1. Сервер отправляет

клиенту файл page.html из корневой директории сайта

http://site.ru/page.php1. Запускается

интерпретатор языка php и выполняет код, написанный в файле page.php.

2. Все, что выводится программой в стандартный вывод отправляется пользователю

Зачем нужен PHP?

1. Проверка логина и пароля

2. Работа с базами данных

3. Обработка данных4. Принцип тот же, что

в любом языке программирования,на вывод подается html код

Я уже умею делать сайты!Я могу сделать сайт на другом сайте (в системе управления)

Я немного знаю HTML и могу изменять готовые шаблоны

Я верстальщик, я могу сделать любую страницупо ее изображению

Я немного знаю программирование, могу решатьпростые задачи, адаптировать свои шаблоны подсистемы управления контентом

Я настоящий веб–мастер! Я самый крутой! Я знаюкак верстать страницы и программировать, могунаписать все, что захочу!

Чем мы будем заниматься?

Структура страницы, тэги, заголовки, абзацы, ссылки,

картинки

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

• Обычный текстовый файл• Можно редактировать в блокноте или

любом другом редакторе• Существуют специальные программы, в

которых печатать удобнее (Adobe Dreamweaver, Free HTML Editor)

• Мы будем использовать Notepad++

Структура страницы<!DOCTYPE HTML><html>

<head>

</head>

<body>

</body>

</html>

Описание страницы

Содержимое страницы

Синтаксис тэгов

Разметка осуществляется с помощью тэгов.

Полный синтаксис:<имя свойство1="значение" свойство2="значение">

текст</имя>

Неполный синтаксис:

<имя свойство1="значение" свойство2="значение" />

Наша первая страница

<!DOCTYPE HTML><html>

<head> <title>Название страницы</title>

</head>

<body>Привет, мир!</body>

</html>

Отступы

Отступы ставить обязательно.

Абзацы

Текст

Строка Другая строка

 

 - тэг переноса строки - код неразрывного пробела

Перенос строк вне абзацев использовать нельзя!

Абзацы: пример<!DOCTYPE HTML><html>


</head><body> По дороге летним днем на-на-на на-на-на Шли, обнявшись, под дождем на-на-на на-на-на Ослик, Суслик, Паукан на-на-на на-на-на ииииииии мокренькая кисонька кисонька кисонька.

Ослик с Сусликом вдвоем на-на-на на-на-на Танцевали под дождем. на-на-на на-на-на Помогал им Паукан на-на-на на-на-на иииии мокренькая кисонька кисонька кисонька.

</body>

</html>

Заголовки

<h1>Я самый большой!</h1><h2>Я поменьше…</h2><h3>Я на подхвате!</h3>…<h6>Я самый маленький! =)</h6>

На одной странице не может быть более одного заголовка <h1>

Заголовки: пример<!DOCTYPE HTML><html>


</head><body><h1>Ослик, суслик, паукан!</h1>По дороге летним днем на-на-на на-на-на Шли, обнявшись, под дождем на-на-на на-на-на Ослик, Суслик, Паукан на-на-на на-на-на ииииииии мокренькая кисонька кисонька кисонька.

Ослик с Сусликом вдвоем на-на-на на-на-на Танцевали под дождем. на-на-на на-на-на Помогал им Паукан на-на-на на-на-на иииии мокренькая кисонька кисонька кисонька.

</body>

</html>

Задание 1В google: “в каждом маленьком ребенке текст”

Форматирование текста

ЖирныйКурсивныйПодчеркнутый

С точки зрения дизайна не рекомендуется использовать в тексте более одного типа выделения.

Ссылки

<a href="Адрес">Текст ссылки</a>

Адрес (путь):• Абсолютный: http://site.ru/folder/data.html• Относительный: folder/data.html (если файл

находится рядом)

Ссылки: пример<!DOCTYPE HTML><html>


</head><body><h1>Ослик, суслик, паукан!</h1>По дороге летним днем на-на-на на-на-на Шли, обнявшись, под дождем на-на-на на-на-на Ослик, Суслик, Паукан на-на-на на-на-на ииииииии мокренькая кисонька кисонька кисонька.

Ослик с Сусликом вдвоем на-на-на на-на-на Танцевали под дождем. на-на-на на-на-на Помогал им Паукан на-на-на на-на-на иииии мокренькая кисонька кисонька кисонька.<a href="http://www.youtube.com/watch?v=lXvKHuxpJiE">Посмотреть</a>

</body>

</html>

Картинки: выравнивание

<img src="путь к картинке" />

<img src="путь к картинке" width="100px" />

<img src="путь к картинке" height="100px" />

<img src="путь к картинке" height="150px" width="100px" />

Картинки: пример<!DOCTYPE HTML><html>


</head><body><h1>Ослик, суслик, паукан!</h1><img src="http://www.netlore.ru/upload/files/19/large_1_250.jpg" width="120px" height="80px" />По дороге летним днем на-на-на на-на-на Шли, обнявшись, под дождем на-на-на на-на-на Ослик, Суслик, Паукан на-на-на на-на-на ииииииии мокренькая кисонька кисонька кисонька.

Ослик с Сусликом вдвоем на-на-на на-на-на Танцевали под дождем. на-на-на на-на-на Помогал им Паукан на-на-на на-на-на иииии мокренькая кисонька кисонька кисонька.<a href="http://www.youtube.com/watch?v=lXvKHuxpJiE">Посмотреть</a>

</body>

</html>

Картинки: выравнивание

<img src="путь к картинке" align="left"/>текст

<img src="путь к картинке" align="right" />текст

текст

текст

Задание 2Текст и фото: http://gymn1576.net/new/category/olympiads

Documents

Разработка веб ‒ сайтов