Главная База знаний "Allbest" Программирование, компьютеры и кибернетика Использование языка HTML для создания сайта

Использование языка HTML для создания сайта

Создание основы интернет-сайта - набора таблиц, которые расположены в нужном порядке. Использованные теги и их атрибуты. Кодовое оформление сайта, наложение второго слоя. Стильный текст в HTML. Использование скриптов для большей информативности сайта.

Рубрика	Программирование, компьютеры и кибернетика
Вид	методичка
Язык	русский
Дата добавления	08.11.2013
Размер файла	813,6 K

посмотреть текст работы

скачать работу можно здесь

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

весь список подобных работ

Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже

Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.

Страница:

Размещено на http://www.allbest.ru

Пояснительная записка

На данный момент самая посещаемая часть Интернета - World Wide Web - www, состоит из Web сайтов и отдельных Web - страниц, а в основе создания сайтов лежит язык HTML. Естественно HTML это только фундамент профессионального сайта, т.к. этот язык «примитивен» и является скорее оболочкой сайта, нежели новомодной начинкой. Для более профессиональных сайтов существует язык PHP, который используется в основном с MySQL базами данных. Такие познания требуются для торгового класса сайтов. Они несут в себе бизнес, доход и торговую систему, но опять же без знания простейших языков программирования вам этого не добиться, потому, как в основе любого сайта лежит HTML. Этот простенький язык может помочь в развитие бизнеса, поэту, художнику, самый же главный потенциал знания HTML это экономия при создании своего сайта. Вам ненужно будет заказывать за огромные деньги у программистов сайт, потому как вы сами сможете его сделать и возможно даже помочь коллеге в этом деле.

Язык HTML очень прост, и пользоваться им может абсолютно каждый, для этого быть программистом необязательно, достаточно иметь навыки пользования Интернетом.

Я постарался описать в своей методичке довольно простой метод обучения этому языку. За основу мы возьмем созданный мной шаблон, который будем описывать по мере создания его основ. Таким образом, на основе полученных знаний вы сможете создавать электронные учебники, легкие сайты и электронные резюме. Профессионализм приходит не сразу, но после 10-15 созданных вами сайтов на моей основе, вполне сможете вершить «шедевры».

Шедевром можно назвать свой сайт тогда когда он будет отвечать всем стандартным требованиям, естественно, если сайт будет сделан именно вами (плагиат в данном случае считается пустой тратой времени, хотя очень многие считают это в порядке вещей). Стандарты сайта, я приведу в одной из разделов данной методички.

Глава 1. Основа сайта

Тема 1. Общие характеристики

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

Вот этот шаблон:

<html>

<head>

</head>

<body>

</body>

</html>

Символы и слова со значками <…> называются тэгами. Тэги бывают открывающие и закрывающие.

К примеру: открывающий <title> и закрывающий </title>, они отличаются только символом /, например:

Но не все теги HTML действуют по этому принципу, есть и такие тэги, у которых закрывающего тэга нет, например:

<br>

<b>

В данном шаблоне кода используется четыре тэга, это: <html>, <head>, <title>, <body>. Рассмотрим что они означают и для чего нужны вообще:

<html> - указывает программе просмотра страниц, что это HTML документ.

<head> - определяет место, где помещается различная информация, не отображаемая в самом документе.

<title> - не является частью отображаемого текста. Он может отображаться, например, как заголовок страницы или название окна.

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

Теперь нужна идея, как должен выглядеть сайт, и в каком расположении относительно друг от друга все будет находиться. В этом я вам помогу, для начала мы рассмотрим представленную мной модель будущего сайта и попытаемся вместе ее сделать:

Начнем с того, что сделаем основу, нашего сайта. Мы создадим набор таблиц, которые расположим в нужном нам порядке. Правильное расположение этих таблиц залог успешного сайта, оно и является главным и сложным элементом при разработке. Расположение таблиц создает сложность в том, что открывающие и закрывающие тэги нужно правильно поставить по смыслу, иначе ничего не получится.

Рассмотрим несколько примеров:

Обычная таблица 3х2

<tr>

</tr>

<tr>

</tr>

</table>

Результат

1111	2222	3333
4444	5555	6666

Два примера с применением ROWSPAN

<tr>

</tr>

</td>

</tr>

</table>

Результат

1111	2222	3333
	4444	5555

<tr>

</tr>

<tr>

</tr>

</table>

Результат

1111	2222	3333
4444		5555

Пример с применением COLSPAN

<tr>

</tr>

<tr>

</tr>

</table>

Результат

1111	2222
3333	4444	5555

Демонстрация множественных заголовков и COLSPAN

<tr>

</tr >

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Результат

1111	2222
3333	4444	5555	6666
7777	8888	9999	1000
1100	1200	1300	1400

Теперь рассмотрим некоторые использованные нами теги и их атрибуты:

<table> - создает таблицу. Все прочие элементы таблицы должны быть вложенными в него.

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

Атрибуты тэга <table>:

BORDER - Толщина рамки в пикселях (например: =”1” или =”5” так указываются все размеры). Если атрибут не указан, то таблица выводится без видимой рамки.

ALIGN - Выравнивание таблицы относительно документа.

left - по левому краю

rigth - по правому краю

center - по центру

BACKGROUND - Строка, определяющая рисунок для заднего фона

BGCOLOR - Определяет задний фон таблицы

BORDERCOLOR - Цвет рамки

CELLSPACING - Задает расстояние между ячейками таблицы

CELLPADDING - Задает расстояние между содержимым ячейки и ее рамкой

TITLE - Всплывающая подсказка

WITH - Ширина таблицы в процентах или пикселях

HEIGHT - Высота таблицы в процентах или пикселях.

<tr> - определяет строку в таблице

Атрибуты тэга <tr>:

ALIGN - Выравнивает текст в ячейке

left - по левому краю

rigth - по правому краю

center - по центру

VALIGN - Выравнивает текст в ячейке по вертикали.

top - по верхнему краю

middle - по центру

bottom - по нижнему краю

<th> - определяет заголовок для столбца в таблице

Атрибуты тэга <th>

ROWSPAN - Указывает количество строк, которые объединены в одной ячейке (по умолчанию=1).

<td> - определяет отдельную ячейку в таблице

Атрибуты тэга <td>:

HEIGHT - Указывает высоту элемента в процентах или пикселях

ALIGN - Выравнивает текст в ячейке

left - по левому краю (по умолчанию)

rigth - по правому краю

center - по центру

VALIGN - Выравнивает текст в ячейке по вертикали

top - по верхнему краю

middle - по центру

bottom - по нижнему краю

COLSPAN - Указывает количество столбцов которые объединены в одной ячейке (по умолчанию=1)

ROWSPAN - Указывает количество строк, которые объединены в одной ячейке (по умолчанию=1)

TITLE - Всплывающая подсказка.

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

Тема 2. От теории к практике

Преступим к практической части, в которой нужно много писать, это начало нашего с вами шедевра!

<!- … -> этот тэг примечания, я вставил его, для большего понимания происходящего, советую писать вместе с ним, а в конце работы удалить. Текст между этим тэгом виден только в тексте кода, в просмотре результата вы его не увидите.

Открываем блокнот

Пишем в нем код из текста ниже.

Сохраняем код следующим образом:

Файл\Сохранить как\

Далее вы увидите диалоговое окно, в котором предложены варианты сохранения документа. В разделе имя файла вместо *.txt напишите index.html и сохраните его.

Основной текст:

<!- Начало документа html ->

<html>

<head>

</head>

<!- Начало шапки ->

<tr>

<td>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

<!- Конец шапки ->

<!- Начало основной доски ->

<tr>

<!- Начало основной формы каталога слева на экране ->

<tr>

<td>

</td>

</tr>

</table>

<!- Конец основной формы каталога слева на экране ->

<!- Начало основной формы наши друзья с лева на экране ->

<tr>

<td>

</td>

</tr>

</table>

<!- Конец основной формы наши друзья слева на экране ->

</td>

<!- Начало текстового поля в центре страницы ->

<!- Конец текстового поля в центре страницы ->

</td>

<!- Начало основной формы прогноз погоды справа на экране ->

<tr>

<td>

</td>

</tr>

</table>

<!- Конец основной формы прогноз погоды справа на экране ->

<!- Начало основной формы новости справа на экране ->

<tr>

<td>

</td>

</tr>

</table>

<!- Конец основной формы новости справа на экране ->

<!- Начало основной формы рейтинг справа на экране ->

<tr>

<td>

</td>

</tr>

</table>

<!- Конец основной формы рейтинг справа на экране ->

</td>

</tr>

</table>

<!- Конец основной доски ->

<!- Начало нижнего раздела по центру низ->

<tr>

</td>

</tr>

</table>

<!- Конец нижнего раздела по центру низ ->

</body>

</html>

<!- Конец документа html ->

Это основа сайта. Без него красоты и качества нашего сайта достичь сложно. Комментарии дают более ясную картину того, что мы написали.

Если вы внимательно читали прошлую тему, то основная часть кода вам понятна. По этому опишем неизвестные части сайта.

Хочу заметить, что расположение атрибутов в тэге может быть хаотичным, никаких определенных рамок нет.

Тэг <body> имеет незнакомые нам атрибуты:

LEFTMARGIN - определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Internet Explorer

TOPMARGIN - определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer

BGCOLOR - определяет цвет фона документа.

У некоторых может возникнуть вопрос, где взять цвета для атрибутов: BGCOLOR и BORDERCOLOR. Ответ довольно прост. Photoshop имеет в себе палитру, в которой можно настроить любой цвет и скопировать его код - #FFFFFF - (белый цвет). Это шестнадцатеричный код, которым кодируется графическая палитра на «машинах». Пример безопасных цветов можно найти в примечании.

Теперь еще раз осмотрите наш код и разберите непонятные моменты, разложив для себя все по полочкам. Результат этого кода в просмотре следующий:

Обратите внимание на код, складывается ясная картина. Хочу обратить ваше внимание на цифры в результате. Ясно, что цифра 1 - является шапкой, а цифра 2 в нашем случае: начало основной формы каталога с лева на экране.

Фактически это можно назвать половиной работы, но это только фактически.

Глава 2. Оформление сайта

Тема 1. Кодовое оформление

Когда человек много времени уделяет чтению текста на компьютере его глаза естественно устают. А если он читает код на различных языках программирования, то нагрузка становится в два, а то и три раза больше.

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

Этим двум пунктам я решил уделить тему второй главы.

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

Пример стандарта:

<!- Начало документа html ->

<html>

<head>

</head>

<!- Начало шапки ->

<tr>

<td>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

<!- Конец шапки ->

Пример с учетом двух параметров:

<!- Начало документа html ->

<html>

<head>

</head>

<!- Начало шапки ->

<tr>

<td>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

<!- Конец шапки ->

С одной стороны, кажется, что стало хуже, все в разброс и ничего не ясно. На самом же деле все наоборот. Нужно ставить тэги на разные, привычные для вас места, но закрывающие и открывающие на одном уровне. И открывая свою многострочную страницу, вы легко определите и визуально представите, что где находится. Это метод активно используется людьми, которые профессионально занимаются созданием сайтов и уделяют много времени коду.

Тема 2. Наложение второго слоя

Вернемся к нашей разработке сайта. Будем работать отрезками, украшая наши таблицы смыслом и визуализацией.

Для начала возьмем первый отрезок:

<!- Начало основной формы каталога слева на экране ->

<tr>

<td>

</td>

</tr>

</table>

<!- Конец основной формы каталога слева на экране ->

Вместо нашей двойки (2), вставим нужный нам код. Для начала нам нужно прописать рамочку для «каталога» вверху этой формы.

Напишем:

<!- Начало основной формы каталога слева на экране ->

<tr>

<td>

<!- Начало рамочки каталога ->

<tr>

<div>КАТАЛОГ</div>

</td>

</tr>

</table>

<!- Конец рамочки каталога ->

</td>

</tr>

</table>

<!- Конец основной формы каталога слева на экране ->

Тэг <div> - Используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать - перемещать, включать/выключать, создавать слои, регулировать отступы.

Обязательно, после того как вставите новый отрезок кода, проверяйте на практике, что у вас получилось. Экспериментируйте со значениями атрибутов и цветовыми схемами. Это позволит вам быстрее запомнить визуальные изменения при использовании того или иного тэга (совокупности тэгов).

Продолжим наш отрезок, создав к рамочке каталога текстовое поле (список каталога), на котором будут располагаться список ссылок по сайту.

<!- Начало основной формы каталога слева на экране ->

<tr>

<td>

<!- Начало рамочки каталога ->

<tr>

<div>КАТАЛОГ</div>

</td>

</tr>

</table>

<!- Конец рамочки каталога ->

<!- Начало списка каталога ->

<tr>

<strong><a href=" text1.html ">Текст номер 1 </a> <br>

<strong><a href=" text2.html ">Текст номер 2 </a> <br>

<strong><a href=" text3.html ">Текст номер 3 </a> <br>

<strong><a href=" text4.html ">Текст номер 4 </a> <br>

<strong><a href=" text5.html ">Текст номер 5 </a> <br>

<strong><a href=" text6.html ">Текст номер 6 </a> <br>

<strong><a href=" text7.html ">Текст номер 7 </a> <br>

<strong><a href=" text8.html ">Текст номер 8 </a> <br>

<strong><a href=" text9.html ">Текст номер 9 </a> <br>

<strong><a href=" text10.html ">Текст номер 10 </a> <br>

<strong><a href=" text11.html ">Текст номер 11 </a> <br>

<strong><a href=" text12.html ">Текст номер 12 </a> <br>

<strong><a href=" text13.html ">Текст номер 13 </a> <br>

<strong><a href=" text14.html ">Текст номер 14 </a>

</td>

</tr>

</table>

<!- Конец списка каталога ->

</td>

</tr>

</table>

<!- Конец основной формы каталога слева на экране ->

Тэг <br> - Вставляет перевод строки. Аналог кнопке на клавиатуре в текстовом редакторе Microsoft Word - Enter.

Тэг <strong> - Используется для выделения из текста слова (жирный шрифт). Аналог тэга <b>.

Тэг <a> - Служит для создания гиперссылок текста или изображения.

Пример:

Для начала нам нужно создать страницу, например text14.html Далее мы пишем ссылку в коде на эту страницу.

<a href="text14.html">Текст номер 14 </a>

Проверяем нашу работу в браузере и видим результат - ссылка ведет с index.html на text14.html

Далее по аналогии создаем такие же рамки и текстовые пространства на номерах 3,5,6,7.

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

Берем 3 отрезок:

<!- Начало основной формы наши друзья слева на экране ->

<tr>

<td>

</td>

</tr>

</table>

<!- Конец основной формы наши друзья слева на экране ->

Прописываем уже знакомую нам рамочку:

<!- Начало основной формы наши друзья слева на экране ->

<tr>

<td>

<!- Начало рамочки наши друзья ->

<tr>

<div>НАШИ ДРУЗЬЯ</div>

</td>

</tr>

</table>

<!- Конец рамочки наши друзья ->

</td>

</tr>

</table>

<!- Конец основной формы наши друзья слева на экране ->

Снова создадим текстовое поле к форме «наши друзья»:

<!- Начало основной формы наши друзья слева на экране ->

<tr>

<td>

<!- Начало рамочки наши друзья ->

<tr>

<div>НАШИ ДРУЗЬЯ</div>

</td>

</tr>

</table>

<!- Конец рамочки наши друзья ->

<!- Начало текстового поля наши друзья ->

<tr>

Наши друзья..

</td>

</tr>

</table>

<!- Конец текстового поля наши друзья ->

</td>

</tr>

</table>

<!- Конец основной формы наши друзья слева на экране ->

Думаю здесь все ясно. Если есть сомнения, повторите пройденное выше.

По такому же шаблону работаем с отрезками 5,6,7. Пишем следующий код и обязательно его разбираем.

Отрезок 5:

<!- Начало основной формы прогноз погоды ->

<tr>

<td>

<!- Начало рамочки прогноз погоды ->

<tr>

<div>ПРОГНОЗ ПОГОДЫ</div>

</td>

</tr>

</table>

<!- Конец рамочки прогноз погоды ->

<!- Начало скрипта погоды в пустом поле прогноз погоды ->

<tr>

<br>

Место скрипта

<br>

</td>

</tr>

</table>

<!- Конец скрипта погоды в пустом поле прогноз погоды ->

</td>

</tr>

</table>

<!- Конец основной формы прогноз погоды ->

Далее идет отрезок 6

<!- Начало основной формы новости ->

<tr>

<td>

<!- Начало рамочки новости ->

<tr>

<div>НОВОСТИ</div>

</td>

</tr>

</table>

<!- Конец рамочки новости ->

<!- Начало текста в поле новости ->

<tr>

03.10.2007 <br>

Новость 1 <br>

<br>

15.10.2007 <br>

Новость 2 <br>

<br>

Все новости... <br>

</td>

</tr>

</table>

<!- Конец текста в поле новости ->

</td>

</tr>

</table>

<!- Конец основной формы новости ->

Отрезок 7:

<!- Начало основной формы рейтинг ->

<tr>

<td>

<!- Начало рамочки рейтинг ->

<tr>

<div>РЕЙТИНГ</div>

</td>

</tr>

</table>

<!- Конец рамочки рейтинг ->

<!- Начало текста в поле рейтинг ->

<tr>

Рейтинг@Mail.ru

</td>

</tr>

</table>

<!- Конец текста в поле рейтинг ->

</td>

</tr>

</table>

<!- Конец основной формы рейтинг ->

Делаем проверку и смотрим долгожданный результат. Сайт по мере наростов приобретает желаемую форму, но это далеко не то, что мы хотим увидеть. Для этого нам понадобится вставить новый отрезок - 4 и 8. Продолжим наши эксперименты и узнаем пару интересных «маневров», для будущих сайтов.

Отрезок 4.

Все что мы имеем из этого отрезка это маленький кусок кода. Стоит его преобразовать и сделать стильное меню с ссылками и рамку над ней. Ниже должна располагаться форма для текста или изображения:

</td>

</td>

Заменяем 4 на код:

</td>

<!- Начало рамочки ->

<tr>

<div>Настройка старых программ для работы под управлением Windows XP</div>

</td>

</tr>

</table>

<!- Конец рамочки ->

<!- Начало меню ссылками вверху центрального текстового поля ->

<tr>

<strong><a href="#">Главная</a> / <a href="#">Текст номер 001</a> / <a href="#">Текст номер 002</a> </strong>

</td>

</tr>

</table>

<!- Конец меню ссылками вверху центрального текстового поля ->

Далее прописываем текстовое поле и закрываем этот отрезок кода:

<!- Текстовое поле ->

<tr>

</tr>

</td>

</table>

<!- Конец текстового поля ->

</td>

У нас остался нижний раздел, в котором оставляют авторство сайта или ставят дополнительные ссылки. Для чего он нужен вам придумаете сами, а моя цель научить вас правильно ее прописать.

Отрезок 8:

<!- Начало нижнего раздела ->

<tr>

</td>

</tr>

</table>

<!- Конец нижнего раздела ->

Вместо цифры 8 пишем текст выделенный из основного кода с разницей в одном действии - ваша фамилия и имя отличается от моей, а год может отличаться на момент прочтения данного урока:

<!- Начало нижнего раздела ->

<tr>

</td>

</tr>

</table>

<!- Конец нижнего раздела ->

Довольно неплохо для начала. Но работы предстоит еще много.

Тема 3. Стильный текст в HTML

В текстовое поле посередине экрана для наглядности мы вставим текст из справки Windows:

Windows XP:

Большинство программ корректно выполняется в Windows XP. Исключение составляют некоторые старые игры и другие программы, написанные специально для какой-либо более ранней версии Windows. Чтобы запустить программу в системе Windows XP, выполните следующие действия.

Запустите мастер совместимости программ. Можно также установить свойства совместимости вручную.

Обновите программу, драйверы или оборудование.

Эти операции подробнее описываются ниже.

Мастер совместимости программ

Этот мастер предлагает протестировать программу в различных режимах (средах) с различными параметрами. Например, если программа изначально предназначена для работы под управлением Windows 95, установите режим совместимости с Windows 95 и попробуйте снова запустить программу. Если попытка окажется удачной, значит, программа будет каждый раз запускаться в этом режиме. Мастер также предоставит возможность попробовать другие параметры, например переключить экран в режим 256 цветов и установить разрешение 640 х 480. Если проблемы совместимости не позволяют установить программу в Windows XP, запустите мастер совместимости программ для файла установки этой программы. Такой файл обычно имеет имя Setup.exe или похожее и находится на установочном диске программы.

Расположить этот текст в таком же виде не так уж и сложно. Нам не составит труда сделать аналогично красиво и узнать некоторые новые тэги с их атрибутами.

Код текстового поля:

<!- Текстовое поле ->

<tr>

</tr>

</td>

</table>

<!- Конец текстового поля ->

Добавляем в него текст из справки и ставим нужные, для редактирования стиля, тэги:

<!- Текстовое поле ->

<tr>

<b>Windows XP:</b><br>

<p>Большинство программ корректно выполняется в Windows XP. Исключение составляют некоторые старые игры и другие программы, написанные специально для какой-либо более ранней версии Windows. Чтобы запустить программу в системе Windows XP, выполните следующие действия.</p>

<ul>

<li>Запустите мастер совместимости программ. Можно также установить свойства совместимости вручную. </li><br>

<li>Обновите программу, драйверы или оборудование. </li><br>

</ul>

<p>Эти операции подробнее описываются ниже.</p>

<b>Мастер совместимости программ</b><br>

<p>Этот мастер предлагает протестировать программу в различных режимах (средах) с различными параметрами. Например, если программа изначально предназначена для работы под управлением Windows 95, установите режим совместимости с Windows 95 и попробуйте снова запустить программу. Если попытка окажется удачной, значит, программа будет каждый раз запускаться в этом режиме. Мастер также предоставит возможность попробовать другие параметры, например переключить экран в режим 256 цветов и установить разрешение 640 х 480.

Если проблемы совместимости не позволяют установить программу в Windows XP, запустите мастер совместимости программ для файла установки этой программы. Такой файл обычно имеет имя Setup.exe или похожее и находится на установочном диске программы.</p><br>

<p></p>

</tr>

</td>

</table>

<!- Конец текстового поля ->

Рассмотрим новые тэги и их атрибуты:

Тэг <b> - текст, заключенный между начальным и конечным тегами, будет выделен жирным шрифтом.

Тэг <p> - создает новый параграф.

Атрибуты тэга <p>

ALIGN - Выравнивание таблицы относительно документа.

left - по левому краю

rigth - по правому краю

center - по центру

justify - выравнивание по ширине

Тэг <ul> и <li>

<ul> - создает список.

<li> - обозначает отдельные пункты списка, создает маркеры.

Пример:

<ul>

<li> Первый пункт </li>

<li> Второй пункт </li>

<li> Третий пункт </li>

</ul>

Теперь стоит заняться Нашей шапкой сайта это самый верхний и пожалуй немало важный отрезок нашего сайта.

Для этого мы возьмем картинку размером: в высоту - 181, в ширину - 291, форматом - jpg и назовем ее 203.

Берем отрезок:

<!- Начало шапки ->

<tr>

<td>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

<!- Конец шапки ->

Напишем:

<!- Начало шапки ->

<tr>

<td>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

<!- Конец шапки ->

Тэг <center> - предназначен для горизонтального выравнивания ВСЕХ элементов посередине окна браузера.

Тэг <img> - служит для внедрения графики на страницы.

Атрибуты тэга <img>:

SRC - Обязательный атрибут, указывающий URL рисунка

ALIGN - Выравнивает изображение к одной из сторон документа

left - Выравнивание по левому краю

right - Выравнивание по правому краю

center - Выравнивание по центру

bottom - Выравнивание по нижнему краю

top - Выравнивание по верхнему краю

middle - Выравнивание по середине

ALT - Выводит текст к картинке. Полезно, если браузер не отображает графику на странице border.

HEIGHT - Высота картинки в пикселях или процентах.

WIDTH - Ширина картинки в пикселях или процентах.

Любую картинку в Вашей странице можно сделать ссылкой.

Для этого нужно выполнить следующую операцию:

Тема 4. Пользуемся скриптами или для чего они нужны

интернет сайт тег скрипт

Скрипт - это готовая часть кода, которая готова функционировать на сайте. В нашем случае такими скриптами будут счетчик с mail.ru и форма погоды с gismeteo.ru

Такие скрипты нужны для большей информативности вашего сайта (например: погода). Счетчики нужны для участия в поисках того или иного поисковика и для просмотра посещаемости вашего ресурса. Скрипты могут быть различными и на различных языках, мы рассмотрим два вида скриптовых вставок, один из которых написан на JavaScript, а другой ссылается на уже созданный скрипт, который расположен на сайте организатора этой идеи.

Место для начало регистрации своего счетчика:

http://top.mail.ru/add

После регистрации скопируйте полученный вами код и вставьте его в наш отрезок в место слов Рейтинг@Mail.ru

<!- Начало текста в поле рейтинг ->

<tr>

<center><script language="JavaScript" type="text/javascript"><!--

d=document;var a='';a+=';r='+escape(d.referrer)

js=10//--></script><script language="JavaScript1.1" type="text/javascript"><!--

a+=';j='+navigator.javaEnabled()

js=11//--></script><script language="JavaScript1.2" type="text/javascript"><!--

s=screen;a+=';s='+s.width+'*'+s.height

a+=';d='+(s.colorDepth?s.colorDepth:s.pixelDepth)

js=12//--></script><script language="JavaScript1.3" type="text/javascript"><!--

js=13//--></script><script language="JavaScript" type="text/javascript"><!-

d.write('<a href="http://top.mail.ru/jump?from=1329852"'+

' target=_top><img src="http://da.c4.b4.a1.top.list.ru/counter'+

'?id=1329852;t=57;js='+js+a+';rand='+Math.random()+

'" alt="Рейтинг@Mail.ru"'+' border=0 height=31 width=88/><\/a>')

if(11<js)d.write('<'+'!-- ')//--></script><noscript><a

target=_top href="http://top.mail.ru/jump?from=1329852"><img

src="http://da.c4.b4.a1.top.list.ru/counter?js=na;id=1329852;t=57"

border=0 height=31 width=88

alt="Рейтинг@Mail.ru"/></a></noscript><script language="JavaScript" type="text/javascript"><!--

if(11<js)d.write('--'+'>')//--></script></center>

</td>

</tr>

</table>

<!- Конец текста в поле рейтинг ->

Советую перед скриптом поставить тэг <center> для красоты конечно!

С Гисметео аналогичная процедура:

http://www.gismeteo.ru

<!- Начало скрипта погоды в пустом поле прогноз погоды ->

<tr>

<br>

<br>

</td>

</tr>

</table>

<!- Конец скрипта погоды в пустом поле прогноз погоды ->

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

<!- Начало документа html ->

<html>

<head>

</head>

<!- Начало шапки ->

<tr>

<td>

<tr>

<td>

</td>

</tr>

</table>

</td>

</tr>

</table>

<!- Конец шапки ->

<!- Начало основной доски ->

<tr>

<!- Начало основной формы каталога слева на экране ->

<tr>

<td>

<!- Начало рамочки каталога ->

<tr>

<div>КАТАЛОГ</div>

</td>

</tr>

</table>

<!- Конец рамочки каталога ->

<!- Начало списка каталога ->

<tr>

<strong><a href=" text1.html ">Текст номер 1 </a> <br>

<strong><a href=" text2.html ">Текст номер 2 </a> <br>

<strong><a href=" text3.html ">Текст номер 3 </a> <br>

<strong><a href=" text4.html ">Текст номер 4 </a> <br>

<strong><a href=" text5.html ">Текст номер 5 </a> <br>

<strong><a href=" text6.html ">Текст номер 6 </a> <br>

<strong><a href=" text7.html ">Текст номер 7 </a> <br>

<strong><a href=" text8.html ">Текст номер 8 </a> <br>

<strong><a href=" text9.html ">Текст номер 9 </a> <br>

<strong><a href=" text10.html ">Текст номер 10 </a> <br>

<strong><a href=" text11.html ">Текст номер 11 </a> <br>

<strong><a href=" text12.html ">Текст номер 12 </a> <br>

<strong><a href=" text13.html ">Текст номер 13 </a> <br>

<strong><a href=" text14.html ">Текст номер 14 </a>

</td>

</tr>

</table>

<!- Конец списка каталога ->

</td>

</tr>

</table>

<!- Конец основной формы каталога слева на экране ->

<!- Начало основной формы наши друзья с лева на экране ->

<tr>

<td>

<!- Начало рамочки наши друзья ->

<tr>

<div>НАШИ ДРУЗЬЯ</div>

</td>

</tr>

</table>

<!- Конец рамочки наши друзья ->

<!- Начало текстового поля наши друзья ->

<tr>

Наши друзья..

</td>

</tr>

</table>

<!- Конец текстового поля наши друзья ->

</td>

</tr>

</table>

<!- Конец основной формы наши друзья слева на экране ->

</td>

<!- Начало текстового поля в центре страницы ->

<!- Начало рамочки ->

<tr>

<div>Настройка старых программ для работы под управлением Windows XP</div>

</td>

</tr>

</table>

<!- Конец рамочки ->

<!- Начало меню ссылками вверху центрального текстового поля ->

<tr>

<strong><a href="#">Главная</a> / <a href="#">Текст номер 001</a> / <a href="#">Текст номер 002</a> </strong>

</td>

</tr>

</table>

<!- Конец меню ссылками вверху центрального текстового поля ->

<!- Текстовое поле ->

<tr>

<b>Windows XP:</b><br>

<ul>

<li>Запустите мастер совместимости программ. Можно также установить свойства совместимости вручную. </li><br>

<li>Обновите программу, драйверы или оборудование. </li><br>

</ul>

<p>Эти операции подробнее описываются ниже.</p>

<b>Мастер совместимости программ</b><br>

<p></p>

</tr>

</td>

</table>

<!- Конец текстового поля ->

<!- Конец текстового поля в центре страницы ->

</td>

<!- Начало основной формы прогноз погоды справа на экране ->

<tr>

<td>

<!- Начало рамочки прогноз погоды ->

<tr>

<div>ПРОГНОЗ ПОГОДЫ</div>

</td>

</tr>

</table>

<!- Конец рамочки прогноз погоды ->

<!- Начало скрипта погоды в пустом поле прогноз погоды ->

<tr>

<br>

<br>

</td>

</tr>

</table>

<!- Конец скрипта погоды в пустом поле прогноз погоды ->

</td>

</tr>

</table>

<!- Конец основной формы прогноз погоды справа на экране ->

<!- Начало основной формы новости справа на экране ->

<tr>

<td>

<!- Начало рамочки новости ->

<tr>

<div>НОВОСТИ</div>

</td>

</tr>

</table>

<!- Конец рамочки новости ->

<!- Начало текста в поле новости ->

<tr>

03.10.2007 <br>

Новость 1 <br>

<br>

15.10.2007 <br>

Новость 2 <br>

<br>

Все новости... <br>

</td>

</tr>

</table>

<!- Конец текста в поле новости ->

</td>

</tr>

</table>

<!- Конец основной формы новости справа на экране ->

<!- Начало основной формы рейтинг справа на экране ->

<tr>

<td>

<!- Начало рамочки рейтинг ->

<tr>

<div>РЕЙТИНГ</div>

</td>

</tr>

</table>

<!- Конец рамочки рейтинг ->

<!- Начало текста в поле рейтинг ->

<tr>

<center><script language="JavaScript" type="text/javascript"><!--

d=document;var a='';a+=';r='+escape(d.referrer)

js=10//--></script><script language="JavaScript1.1" type="text/javascript"><!--

a+=';j='+navigator.javaEnabled()

js=11//--></script><script language="JavaScript1.2" type="text/javascript"><!--

s=screen;a+=';s='+s.width+'*'+s.height

a+=';d='+(s.colorDepth?s.colorDepth:s.pixelDepth)

js=12//--></script><script language="JavaScript1.3" type="text/javascript"><!--

js=13//--></script><script language="JavaScript" type="text/javascript"><!-

d.write('<a href="http://top.mail.ru/jump?from=1329852"'+

' target=_top><img src="http://da.c4.b4.a1.top.list.ru/counter'+

'?id=1329852;t=57;js='+js+a+';rand='+Math.random()+

'" alt="Рейтинг@Mail.ru"'+' border=0 height=31 width=88/><\/a>')

if(11<js)d.write('<'+'!-- ')//--></script><noscript><a

target=_top href="http://top.mail.ru/jump?from=1329852"><img

src="http://da.c4.b4.a1.top.list.ru/counter?js=na;id=1329852;t=57"

border=0 height=31 width=88

alt="Рейтинг@Mail.ru"/></a></noscript><script language="JavaScript" type="text/javascript"><!--

if(11<js)d.write('--'+'>')//--></script></center>

</td>

</tr>

</table>

<!- Конец текста в поле рейтинг ->

</td>

</tr>

</table>

<!- Конец основной формы рейтинг справа на экране ->

</td>

</tr>

</table>

<!- Конец основной доски ->

<!- Начало нижнего раздела по центру низ->

<tr>

</td>

</tr>

</table>

<!- Конец нижнего раздела по центру низ ->

</body>

</html>

<!- Конец документа html ->

Стандарты

С подобными требованиями к веб-сайтам вы можете столкнуться при работе в рекламном агенстве или дизайн-студии.

Отступы, отбивки, межстрочное расстояние, и размер шрифта должны совпадать с этими же элементами эскиза (макета, выполненного в графическом редакторе)

Каждый раздел сайта первого уровня должен располагаться в отдельной папке

Название папки должно быть переведено на английский язык

Папка с графикой для интерфейса сайта имеет название image

Папка с таблицами стилей для сайта имеет название css

Папка с ява-скриптами для сайта имеет название js

Папка с flash-вставками для сайта имеет название flash

Папка с графикой заказчика (фотографии в каталоге, схемы проезда, иллюстрации к новостям и т.д.) имеет название images

Прозрачный gif размером 1 на 1 пиксель имеет название spacer.gif

Макет, предоставляемый менеджерам проекта должен иметь связи с указанием главного файла папки about/index.html

Завершенный макет, предоставляемый программистам должен иметь связи без указания головного файла папки about

На странице недопустима ссылка на саму себя

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

Надписи на кнопках должны быть написаны либо c все заглавной буквы либо все с прописной и на одном языке

Все кнопки должны иметь либо стандартный вид, либо настроены через таблицы стилей, либо сделаны как графические элементы

Логотип должен быть ссылкой на главную страницу сайта и иметь alt="на главную | название компании"

Аlt на заголовке раздела должен совпадать с названием раздела

Тitle должен иметь следующий вид: Название подраздела | Название раздела | Название компании

В таблицах стилей все буквы должны быть строчными, исключение заглавные буквы в названии шрифтов.

В таблицах стилей первыми определяются стандартные элементы

p {margin: 0; font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;},

а только затем элементы подклассов

В таблицах стилей все величины должны иметь одинаковые единицы измерения px или pt

Если дизайн сайта резиновый, то размеры шрифтов прописываются плавающими. font-size: 8/12pt (8pt когда пользователь выбирает в настройках браузера размер шрифта самый мелкий и соответственно 12pt - самый большой)

При использовании таблиц стилей конструкции в теле html-документа типа font-size и bgcolor недопустимы.

Значение атрибутов тегов должны быть заключены в кавычки <p class="head">

Контактная информация на всех страницах сайта указывается в порядке: адрес, телефон, факс, электронная почта.

Телефон и факс обязательно указывается с кодом города

Ссылка на сайт разработчика должна открываться в материнском окне

Примечание

Пример безопасных цветов:

255.255.204	255.255.153	255.255.102	255.255.51	255.255.0	204.204.0
FFFFCC	FFFF99	FFFF66	FFFF33	FFFF00	CCCC00

255.204.102	255.204.0	255.204.51	204.153.0	204.153.51	153.102.0
FFCC66	FFCC00	FFCC33	CC9900	CC9933	996600

255.153.0	255.153.51	204.153.102	204.102.0	153.102.51	102.51.0
FF9900	FF9933	CC9966	CC6600	996633	663300

255.204.153	255.153.102	255.102.0	204.102.51	153.51.0	102.0.0
FFCC99	FF9966	FF6600	CC6633	993300	660000

255.102.51	204.51.0	255.51.0	255.0.0	204.0.0	153.0.0
FF6633	CC3300	FF3300	FF0000	CC0000	990000

255.204.204	255.153.153	255.102.102	255.51.51	255.0.51	204.0.51
FFCCCC	FF9999	FF6666	FF3333	FF0033	CC0033

204.153.153	204.102.102	204.51.51	153.51.51	153.0.51	51.0.0
CC9999	CC6666	CC3333	993333	990033	330000

255.102.153	255.51.102	255.0.102	204.51.102	153.102.102	102.51.51
FF6699	FF3366	FF0066	CC3366	996666	663333

255.153.204	255.51.153	255.0.153	204.0.102	153.51.102	102.0.51
FF99CC	FF3399	FF0099	CC0066	993366	660033

255.102.204	255.0.204	255.51.204	204.102.153	204.0.153	153.0.102
FF66CC	FF00CC	FF33CC	CC6699	CC0099	990066

255.204.255	255.153.255	255.102.255	255.51.255	255.0.255	204.51.153
FFCCFF	FF99FF	FF66FF	FF33FF	FF00FF	CC3399

204.153.204	204.102.204	204.0.204	204.51.204	153.0.153	153.51.153
CC99CC	CC66CC	CC00CC	CC33CC	990099	993399

204.102.255	204.51.255	204.0.255	153.0.204	153.102.153	102.0.102
CC66FF	CC33FF	CC00FF	9900CC	996699	660066

204.153.255	153.51.204	153.51.255	153.0.255	102.0.153	102.51.102
CC99FF	9933CC	9933FF	9900FF	660099	663366

153.102.204	153.102.255	102.0.204	102.51.204	102.51.153	51.0.51
9966CC	9966FF	6600CC	6633CC	663399	330033

204.204.255	153.153.255	102.51.255	102.0.255	51.0.153	51.0.102
CCCCFF	9999FF	6633FF	6600FF	330099	330066

153.153.204	102.102.255	102.102.204	102.102.153	51.51.153	51.51.102
9999CC	6666FF	6666CC	666699	333399	333366

51.51.255	51.0.255	51.0.204	51.51.204	0.0.153	0.0.102
3333FF	3300FF	3300CC	3333CC	000099	000066

102.153.255	51.102.255	0.0.255	0.0.204	0.51.204	0.0.51
6699FF	3366FF	0000FF	0000CC	0033CC	000033

0.102.255	0.102.204	51.102.204	0.51.255	0.51.153	0.51.102
0066FF	0066CC	3366CC	0033FF	003399	003366

153.204.255	51.153.255	0.153.255	102.153.204	51.102.153	0.102.153
99CCFF	3399FF	0099FF	6699CC	336699	006699

102.204.255	51.204.255	0.204.255	51.153.204	0.153.204	0.51.51
66CCFF	33CCFF	00CCFF	3399CC	0099CC	003333

153.204.204	102.204.204	51.153.153	102.153.153	0.102.102	51.102.102
99CCCC	66CCCC	339999	669999	006666	336666

204.255.255	153.255.255	102.255.255	51.255.255

Страница:

методичка "Использование языка HTML для создания сайта" скачать

Подобные документы

Интернет-технологии. Создание сайта
Работа с HTML-редактором Adobe Dreamweaver. Этапы и правила построения заглавной страницы сайта, форматирования HTML-страниц, создания гипертекстовых ссылок, создания и форматирования таблиц. Использование графических материалов при разработке сайта.

методичка [1,9 M], добавлен 06.07.2011
Создание web-сайта
Обоснование выбора средств разработки сайта. Программа Microsoft Office FrontPage 2003, характеристика и принцип работы. Разработка структуры сайта, его реализация и создание элементов дизайна. Наиболее употребляемые теги языка HTML. Листинг HTML-кода.

курсовая работа [1,7 M], добавлен 08.03.2011
Интернет-аукционы
Дизайнерская разработки сайта интернет-аукциона с помощью HTML-кода. Использование тегов для построения таблиц и гиперссылок. Технические характеристики сайта: оформление, цветовая гамма, логотипы и рекламные баннеры. Использование графических редакторов.

курсовая работа [383,8 K], добавлен 18.01.2011
Разработка сайта мебельной компании "ИП Лескин"
Экономическое обоснование создания программного продукта web-сайта мебельной компании. Применение гипертекстового языка разметки HTML, технологии CSS и JavaScript совместно с библиотекой JQuery. Использование Интернет-технологий в создании сайта.

дипломная работа [8,1 M], добавлен 30.11.2014
Создание индивидуального сайта
Создание индивидуального сайта с использованием языка гипертекстовой разметки HTML и языка скриптов JavaScript. Программные средства, используемые при выполнении работы. Основные средства для создания сайта. Разработка CSS-файла (таблица стилей).

лабораторная работа [31,0 K], добавлен 28.10.2010
Создание WEB-сайта "Темная кофейня"
Концептуальное проектирование сайта по онлайн-продаже кофе, его древовидная логическая структура страниц. Описание языка гипертекстовой разметки сайта HTML, особенности отображения HTML-тегов в браузерах. Создание формы заказа для онлайн-торговли.

курсовая работа [2,2 M], добавлен 16.04.2017
Разработка сайта автоматизированного тестирования: оформление сайта с использованием CSS
История возникновения и применение Каскадных таблиц стилей (CSS) в web-дизайне, их преимущества и отличие от HTML. Сравнительная характеристика табличной и блочной верстки. Практика дизайна сайта: создание бокового меню, всплывающего модального окна.

курсовая работа [1,2 M], добавлен 21.06.2011
Язык разметки гипертекста HTML
Специальные разметочные указатели (теги) языка HTML. Основные правила написания тегов. Структура HTML-файлов. Внесение изменений и способы обновления Web-сайта. Необходимые атрибуты для создания на Web-странице бегущей строки и вставки рисунков.

презентация [439,3 K], добавлен 29.01.2014
Создание оригинал-макета сайта
Рассмотрение основных этапов создания сайта. Использование вайрфреймов как документации по проекту. Использование мокапа и структура навигации сайта. Правильный выбор цветов для проекта. Использование модульной сетки и разработка дизайна сайта.

презентация [2,8 M], добавлен 01.09.2019
Разработка web-сайта
Создание тематического Web-сайта с использованием гипертекстового языка разметки HTML, каскадных листов стилей CSS и языка программирования Java Script. Описание используемых тегов при его создании. Особенности разработки навигации и интерфейса сайта.

контрольная работа [2,8 M], добавлен 02.12.2009

Другие документы, подобные "Использование языка HTML для создания сайта"

весь список подобных работ

скачать работу можно здесь

сколько стоит заказать работу?

Работы в архивах красиво оформлены согласно требованиям ВУЗов и содержат рисунки, диаграммы, формулы и т.д.
PPT, PPTX и PDF-файлы представлены только в архивах.
Рекомендуем скачать работу.