View
63
Download
0
Category
Preview:
DESCRIPTION
Разработка веб ‒ сайтов. DNS сервер. Твой компьютер. http://yandex.ru. Как работает интернет?. http://213.180.193.11/. страница. WEB сервер. WEB сервер – обычный компьютер Страница – обычный текстовый файл. Что такое WEB страница?. - PowerPoint PPT Presentation
Citation preview
Разработка веб ‒сайтов
Как работает интернет?
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>
Отступы
Отступы ставить обязательно.
Абзацы
<p>Текст</p>
<p>Строка<br />Другая строка</p>
<p> </p>
<br /> - тэг переноса строки - код неразрывного пробела
Перенос строк вне абзацев использовать нельзя!
Абзацы: пример<!DOCTYPE HTML><html>
<head> <title>Название страницы</title>
</head><body> <p>По дороге летним днем<br />на-на-на на-на-на <br />Шли, обнявшись, под дождем <br />на-на-на на-на-на <br />Ослик, Суслик, Паукан <br />на-на-на на-на-на <br />ииииииии мокренькая кисонька кисонька кисонька.</p>
<p>Ослик с Сусликом вдвоем <br />на-на-на на-на-на <br />Танцевали под дождем. <br />на-на-на на-на-на <br />Помогал им Паукан <br />на-на-на на-на-на <br />иииии мокренькая кисонька кисонька кисонька.</p>
</body>
</html>
Заголовки
<h1>Я самый большой!</h1><h2>Я поменьше…</h2><h3>Я на подхвате!</h3>…<h6>Я самый маленький! =)</h6>
На одной странице не может быть более одного заголовка <h1>
Заголовки: пример<!DOCTYPE HTML><html>
<head> <title>Название страницы</title>
</head><body><h1>Ослик, суслик, паукан!</h1><p>По дороге летним днем<br />на-на-на на-на-на <br />Шли, обнявшись, под дождем <br />на-на-на на-на-на <br />Ослик, Суслик, Паукан <br />на-на-на на-на-на <br />ииииииии мокренькая кисонька кисонька кисонька.</p>
<p>Ослик с Сусликом вдвоем <br />на-на-на на-на-на <br />Танцевали под дождем. <br />на-на-на на-на-на <br />Помогал им Паукан <br />на-на-на на-на-на <br />иииии мокренькая кисонька кисонька кисонька.</p>
</body>
</html>
Задание 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>
<p>Ослик с Сусликом вдвоем <br />на-на-на на-на-на <br />Танцевали под дождем. <br />на-на-на на-на-на <br />Помогал им Паукан <br />на-на-на на-на-на <br />иииии мокренькая кисонька кисонька кисонька.</p><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> <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>
<p>Ослик с Сусликом вдвоем <br />на-на-на на-на-на <br />Танцевали под дождем. <br />на-на-на на-на-на <br />Помогал им Паукан <br />на-на-на на-на-на <br />иииии мокренькая кисонька кисонька кисонька.</p><a href="http://www.youtube.com/watch?v=lXvKHuxpJiE">Посмотреть</a>
</body>
</html>
Картинки: выравнивание
<img src="путь к картинке" align="left"/><p>текст</p>
<img src="путь к картинке" align="right" /><p>текст</p>
текст
текст
Задание 2Текст и фото: http://gymn1576.net/new/category/olympiads
Recommended