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

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

DNS сервер Твой компьютер http://yandex.ru Как работает интернет? http://213.180.193.11/ страница WEB сервер WEB сервер – обычный компьютер Страница – обычный текстовый файл

Что такое WEB страница? Страница интернет сайта – текстовый файл, с описанием того, что на ней находится. Для описания используется особый язык разметки – HTML (HyperText Markup Language). Гипертекст – текст со ссылками. Также страница может включать в себя описание стилей CSS и скрипты на JavaScript.

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

Технологии, используемые в интернете • Каскадные таблицы стилей • Описание внешнего вида • Отступы, цвета, фоновые изображения… • Применяется к элементам, описанным с помощью html

GOOGLE без CSS

Нормальный GOOGLE

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

Откуда берется страница? http://site.ru/page.html • Сервер отправляет клиенту файл page.html из корневой директории сайта http://site.ru/page.php • Запускается интерпретатор языка phpи выполняет код, написанный в файле page.php. • Все, что выводится программой в стандартный вывод отправляется пользователю

Зачем нужен PHP? • Проверка логина и пароля • Работа с базами данных • Обработка данных • Принцип тот же, что в любом языке программирования,на вывод подается 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> <title>Название страницы</title> </head> <body> По дороге летним днем на-на-на на-на-на Шли, обнявшись, под дождем на-на-на на-на-на Ослик, Суслик, Паукан на-на-на на-на-на иииииииимокренькая кисонька кисонькакисонька. Ослик с Сусликом вдвоем на-на-на на-на-на Танцевали под дождем. на-на-на на-на-на Помогал им Паукан на-на-на на-на-на иииии мокренькая кисонька кисонькакисонька. </body> </html>

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

Заголовки: пример <!DOCTYPE HTML> <html> <head> <title>Название страницы</title> </head> <body> <h1>Ослик, суслик, паукан!</h1> По дороге летним днем на-на-на на-на-на Шли, обнявшись, под дождем на-на-на на-на-на Ослик, Суслик, Паукан на-на-на на-на-на иииииииимокренькая кисонька кисонькакисонька. Ослик с Сусликом вдвоем на-на-на на-на-на Танцевали под дождем. на-на-на на-на-на Помогал им Паукан на-на-на на-на-на иииии мокренькая кисонька кисонькакисонька. </body> </html>

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

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

Ссылки <a href="Адрес">Текст ссылки</a> Адрес (путь): • Абсолютный: http://site.ru/folder/data.html • Относительный: folder/data.html (если файл находится рядом)

Ссылки: пример <!DOCTYPE HTML> <html> <head> <title>Название страницы</title> </head> <body> <h1>Ослик, суслик, паукан!</h1> По дороге летним днем на-на-на на-на-на Шли, обнявшись, под дождем на-на-на на-на-на Ослик, Суслик, Паукан на-на-на на-на-на иииииииимокренькая кисонька кисонькакисонька. Ослик с Сусликом вдвоем на-на-на на-на-на Танцевали под дождем. на-на-на на-на-на Помогал им Паукан на-на-на на-на-на иииии мокренькая кисонька кисонькакисонька. <a href="http://www.youtube.com/watch?v=lXvKHuxpJiE">Посмотреть</a> </body> </html>

Картинки: выравнивание <imgsrc="путь к картинке" /> <imgsrc="путь к картинке" width="100px" /> <imgsrc="путь к картинке" height="100px" /> <imgsrc="путь к картинке" height="150px" width="100px" />

Картинки: пример <!DOCTYPE HTML> <html> <head> <title>Название страницы</title> </head> <body> <h1>Ослик, суслик, паукан!</h1> <imgsrc="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>

Картинки: выравнивание <imgsrc="путь к картинке" align="left"/>текст <imgsrc="путь к картинке" align="right" />текст текст текст

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

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