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

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

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

План проведения курсов по созданию 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

Похожие материалы

Информация о работе

Предмет:
Информатика
Тип:
Дополнительные материалы
Размер файла:
25 Kb
Скачали:
0