Информатика и выч. техника \ Информатика

План проведения курсов по созданию Web-страниц

Страницы работы

6 страниц (Word-файл)

Скачать файл

Содержание работы

План проведения курсов по созданию Web-страниц.

1. Общая информация о создании сайтов

1.1. Основные правила создания и работы с сайтами

1.2. Правильное построение графики сайта

1.3. Основные расширения изучаемые в данном курсе

1.4. Первая реализация Web-страницы

1.5. Лабораторная работа №0

2. Основные теги для минимального наполнения сайта

2.1. Структура заголовков на сайте

2.2. Написание текста разным размером

2.3. Знакомство с цветовой палитрой. Тег color

2.4. Лабораторная работа №1

3. Основные теги для минимального наполнения сайта II

3.1. Погрузка изображения

3.2. Ссылка. Ссылка + изображение

3.3. Области перемещения

3.4. Лабораторная работа №2

4. Таблица

4.1. Лабораторная работа №3

5. Дополнительные теги

5.1. Итоговая работа по HTML

6. Введение в CSS

6.1. Основные теги

6.2. Совместимость с HTML

6.3. Графические возможности CSS

6.4. Дополнительна информация о CSS

6.5. Лабораторная работа №4

7. Введение в JavaScript

План проведения курсов по созданию Web-страниц.

1. Общая информация о создании сайтов

1.1. Основные расширения изучаемые в данном курсе

Самыми распространенными расширениями для создания Web-страниц являются такие языки программирования как: HTML, XML, CSS, JavaScript, PHP и т.д. Самым простым и легко изучаемым является html.

HTML – этот язык создан практически для чтения электронной страницы.

CSS – этот язык разработан для дополнительных возможностей оформления Web-страниц

JavaScript -

PHP

1.2. Основные правила создания и работы с сайтами

Каждый созданный сайт должне проходить проверку через такую программу, как Validator. Для того, чтобы ваша страница проходила без лишних ошибок, в начало документа необходимо добавить следующую строчку:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

1.3. Правильное построение графики сайта

1.4. Первая реализация Web-страницы

Первое, что необходимо знать для написания страницы, что весь код оформляется в электронном блокноте. Для просмотра созданной страницы, необходимо прописать путь папки, где лежит проект, в браузере.

Стандартно, информация, написанная в блокноте, сохраняется с расширением *.txt, поэтому, после окончательного написания кода необходимо файл сохранить с расширением *.html.

Вся программа состоит из различных тегов. Любой тег обязательно должен заканчиваться слешем.

Код описания страницы начинается всегда с тега

<html> - создание страницы.

Далее идет тег

<head> - голова страницы (заголовок страницы, дополнительные атрибуты)

</head> - закрытие тега.

Затем тег

<body> - тело страницы

</body>

И закрываем код страницы тегом

</html>.

1.5. Лабораторная работа №0

· Создать страницу

· Озаглавить ее как - Моя первая страница (для этого необходим тег <title>…</title>)

· Написать небольшой текст

· Загрузить страницу в браузере

Примерный код лабораторной работы:

<html>

<head>

<title> Моя первая страница </title>

</head>

<body>

Я хочу стать врачом, потому что я хочу спасать жизни людей. Возможно я стану ветеринаром…

</body>

</html>

2. Основные теги для минимального наполнения сайта

2.1. Структура заголовков на сайте

В HTML существует структура заголовков. Это нужно для того, чтобы не задавать численно размер шрифта.

2.2. Написание текста разным размером

2.3. Знакомство с цветовой палитрой. Тег color

2.4. Лабораторная работа №1

3. Основные теги для минимального наполнения сайта II

3.1. Погрузка изображения

Так как все действия делаются в теле кода(<body> </body>), следовательно, и погружать изображение мы будем в теле данного кода. Для погрузки изображения нам понадобится тег

<img>. В коде это будет выглядеть так:

<img src="название картинки (расширение у картинки должно быть *.jpg)">

Например: <img src="knigi.jpg">

3.2. Ссылка. Ссылка + изображение

Ссылка нужна для перехода с одной страницы на другую. В коде это реализуется следующим образом:

3.3. Области перемещения

3.4. Лабораторная работа №2

· Создать страницу

· Озаглавить страницу

· Погрузить картинку с описанием

· Создать ссылку на адрес, откуда вы скачали данную картинку

4. Таблица

Для создания таблицы необходимо использовать тег <table></table>

Для создания ячеек таблицы нужен тег <td></td>. Чтобы установить параметры высоты и ширены ячейки, в теге прописывается height="75" и  width="75", где 75 – размер ячейки. А выглядеть это будет так:

<table>

<td height="75" width="75" </td>

</table>

Чтобы ячейка была видна, обведем ее «рамкой», для этого допишем к тегу <table> толщину обрамления, например:

<table>

 <table border="5" bordercolor="green" cellspacing="5" >

</table>

Дополнением <Bordercolor=”green”> мы придаем цвет обрамлению, в данном случае, рамка будет зеленой.

Чтобы заполнить ячейку, в данном теге нужно прописать содержимое ячейки:

<td height="75" width="75”> ом </td>

Чтобы вписанный текст располагался в центре ячейки, нужно поставить дополнительный тег <center></center>. Выглядеть это будет так:

<td height="75" width="75"> <center> Учащиеся </center> </td>

Также тег <center> можно использовать для расположения самой таблицы по центру. Только в этом случае тег прописывается перед тегом <table>.

В целом данная часть этого кода будет выглядеть так:

<CENTER>

<table>

<table border="5" bordercolor="green" cellspacing="5" >

<td height="75" width="75" bgcolor="ffffff"> <center> Учащиеся </center> </td>

</table>

Внутри тега <table>, как мы уже разобрали, можно использовать дополнительные теги, а именно: <center>, <border>, <bgcolor> и т.д.

4.1. Лабораторная работа №3

· Создать страницу

· Озаглавить ее Календарь за 2010 год

· Реализовать один календарный месяц (октябрь) и выделить сегодняшний день другим цветом. Оставшиеся ячейки соединить, чтоб стала одна целая ячейка. Все ячейки должны быть одного цвета, кроме сегодняшнего дня!

Примерный код лабораторной работы:

5. Дополнительные теги

5.1. Итоговая работа по HTML

Необходимо сверстать сайт с помощью ссылок! Тематику сайта каждый выбирает свою. Главной задачей является использование всех пройденных тегов и возможностей HTML (пример сайта идет отдельным документом).

6. Введение в CSS

6.1. Основные теги

6.2. Совместимость с HTML

6.3. Графические возможности CSS

6.4. Дополнительна информация о CSS

6.5. Лабораторная работа №4

7. Введение в JavaScript