Разработка веб‒сайтов
advertisement
Разработка веб‒сайтов Как работает интернет? Твой компьютер DNS сервер http://yandex.ru WEB сервер WEB сервер – обычный компьютер Страница – обычный текстовый файл Что такое WEB страница? Страница интернет сайта – текстовый файл, с описанием того, что на ней находится. Для описания используется особый язык разметки – HTML (HyperText Markup Language). Гипертекст – текст со ссылками. Также страница может включать в себя описание стилей CSS и скрипты на JavaScript. Технологии, используемые в интернете • Описание каркаса страницы • Теги со свойствами • Абзацы, заголовки, таблицы, блоки, ключевые слова… Технологии, используемые в интернете • Каскадные таблицы стилей • Описание внешнего вида • Отступы, цвета, фоновые изображения… • Применяется к элементам, описанным с помощью html GOOGLE без CSS Нормальный GOOGLE Технологии, используемые в интернете • Язык программирования • Движения, проверка форм, игры • Изменение страницы в зависимости от поведения пользователя Откуда берется страница? http://site.ru/page.html 1. Сервер отправляет клиенту файл page.html из корневой директории сайта http://site.ru/page.php 1. Запускается интерпретатор языка 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> Отступы Отступы ставить обязательно. Абзацы <p>Текст</p> <p>Строка<br />Другая строка</p> <p>&nbsp;</p> <br /> - тэг переноса строки &nbsp; - код неразрывного пробела Перенос строк вне абзацев использовать нельзя! Абзацы: пример <!DOCTYPE HTML> <html> <head> <title>Название страницы</title> </head> <body> <p>По дороге летним днем<br /> на-на-на на-на-на <br /> Шли, обнявшись, под дождем <br /> на-на-на на-на-на <br /> Ослик, Суслик, Паукан <br /> на-на-на на-на-на <br /> ииииииии мокренькая кисонька кисонька кисонька.</p> </body> </html> <p>Ослик с Сусликом вдвоем <br /> на-на-на на-на-на <br /> Танцевали под дождем. <br /> на-на-на на-на-на <br /> Помогал им Паукан <br /> на-на-на на-на-на <br /> иииии мокренькая кисонька кисонька кисонька.</p> Заголовки <h1>Я <h2>Я <h3>Я … <h6>Я самый большой!</h1> поменьше…</h2> на подхвате!</h3> самый маленький! =)</h6> На одной странице не может быть более одного заголовка <h1> Заголовки: пример <!DOCTYPE HTML> <html> <head> <title>Название страницы</title> </head> <body> <h1>Ослик, суслик, паукан!</h1> <p>По дороге летним днем<br /> на-на-на на-на-на <br /> Шли, обнявшись, под дождем <br /> на-на-на на-на-на <br /> Ослик, Суслик, Паукан <br /> на-на-на на-на-на <br /> ииииииии мокренькая кисонька кисонька кисонька.</p> </body> </html> <p>Ослик с Сусликом вдвоем <br /> на-на-на на-на-на <br /> Танцевали под дождем. <br /> на-на-на на-на-на <br /> Помогал им Паукан <br /> на-на-на на-на-на <br /> иииии мокренькая кисонька кисонька кисонька.</p> Задание 1 В google: “в каждом маленьком ребенке текст” Форматирование текста <strong>Жирный</strong> <i>Курсивный</i> <u>Подчеркнутый</u> С точки зрения дизайна не рекомендуется использовать в тексте более одного типа выделения. Ссылки <a href="Адрес">Текст ссылки</a> Адрес (путь): • Абсолютный: http://site.ru/folder/data.html • Относительный: folder/data.html (если файл находится рядом) Ссылки: пример <!DOCTYPE HTML> <html> <head> <title>Название страницы</title> </head> <body> <h1>Ослик, суслик, паукан!</h1> <p>По дороге летним днем<br /> на-на-на на-на-на <br /> Шли, обнявшись, под дождем <br /> на-на-на на-на-на <br /> Ослик, Суслик, Паукан <br /> на-на-на на-на-на <br /> ииииииии мокренькая кисонька кисонька кисонька.</p> </body> </html> <p>Ослик с Сусликом вдвоем <br /> на-на-на на-на-на <br /> Танцевали под дождем. <br /> на-на-на на-на-на <br /> Помогал им Паукан <br /> на-на-на на-на-на <br /> иииии мокренькая кисонька кисонька кисонька.</p> <a href="http://www.youtube.com/watch?v=lXvKHuxpJiE">Посмотреть</a> Картинки: выравнивание <img src="путь к картинке" /> <img src="путь к картинке" width="100px" /> <img src="путь к картинке" height="100px" /> <img src="путь к картинке" height="150px" width="100px" /> Картинки: пример <!DOCTYPE HTML> <html> <head> <title>Название страницы</title> </head> <body> <h1>Ослик, суслик, паукан!</h1> <img src="http://www.netlore.ru/upload/files/19/large_1_250.jpg" width="120px" height="80px" /> <p>По дороге летним днем<br /> на-на-на на-на-на <br /> Шли, обнявшись, под дождем <br /> на-на-на на-на-на <br /> Ослик, Суслик, Паукан <br /> на-на-на на-на-на <br /> ииииииии мокренькая кисонька кисонька кисонька.</p> </body> </html> <p>Ослик с Сусликом вдвоем <br /> на-на-на на-на-на <br /> Танцевали под дождем. <br /> на-на-на на-на-на <br /> Помогал им Паукан <br /> на-на-на на-на-на <br /> иииии мокренькая кисонька кисонька кисонька.</p> <a href="http://www.youtube.com/watch?v=lXvKHuxpJiE">Посмотреть</a> Картинки: выравнивание <img src="путь к картинке" align="left"/><p>текст</p> текст <img src="путь к картинке" align="right" /><p>текст</p> текст Задание 2 Текст и фото: http://gymn1576.net/new/category/olympiads
