Автор работы: Пользователь скрыл имя, 23 Апреля 2013 в 11:29, реферат
Хорошая ссылка должна быть подписана, и эта подпись должна говорить пользователю, куда он попадёт, если нажмёт на неё. Подпись может быть любой, от пары слов, до целого текста.
В веб-страницы можно вставлять текст и рисунки, то есть можно создавать на основе них книги и справочники, при том в нужных местах ставить ссылки на файлы с примерами (например, на файлы видео, музыки, на другие файлы, которые можно открыть при помощи установленных программ прямо со странички и посмотреть).
Что такое Web-страница
Как создать web-страницу
С чего надо начинать деланье web-страницы, основные определения.
Стили (может, вы не знаете об этом, но это очень удобно)
Пример простейщей web-страницы
Объекты в web-странице: таблицы, картинки, списки, ссылки
Рекомендуемая литература (со ссылками на реальные источники)
Между открывающимся (<title>) и закрывающимся (</title>) тегами помещается название страницы, которое будет отображаться в полосе CAPTION BAR вашего броузера (самая верхняя строчка окна броузера). Так же, если пользователь попытается сохранить вашу страницу на свой компьютер, то, что написано в тегах <TITLE> будет предложено ему в качестве названия. Поэтому, если сайт состоит из нескольких страниц, рекомендуется для облегчения жизни пользователям, которые захотят сохранять ваши страницы, давать страницам разные названия.
Стили
Стили задают свойства текста (начертание шрифта, цвет, размер, выравнивание, отступ красной страки, отступ от предыдущего обзаца, отступ от краёв и т. п.). Можно задать несколько стилей (например стиль заголовка, стиль абзаца и др.) и в дальнейшем не вводить каждый раз все необходимые параметры для каждого абзаца, заголовка или другого раздела текста, а просто указывать название стиля.
Стили заюаются между тегами <style> и </style> (об этом подробнее речь пойдёт в разделе о стилях), либо стили можно задать в отдельном файле с расшерением .css (тогда одни и те же стили можно будет использовать для разных страниц). Теги со стилями тоже должны находиться внутри раздела HEAD
Итак, для задания стиля нужно написать либо:
<style>
Здесь задаются стили.
</style>
Либо подключить файл, в котором заданы стили:
<LINK href="название_файла_со_
rel=STYLESHEET type=text/css>
Задавать свойства стилей не обязательно, поскольку у всех стандартных (предусмотренных броузером) стилей есть свойства, заданные по умолчанию, которые используются в случае, если стили не заданы. Если вы не хотите задавать стили, просто опустите эти строки.
Другое
Кроме того, в разделе HEAD можно разместить JAvA-скрипты (минипрограммки, используемые на web-странице), а так же некоторую другую информацию.
После того, как вы разместили всю необходимую инйормацию, указывающую свойства страницы, необходимо поставить закрывающий тег </head>.
который означает, что указания относительно свойств страницы кончились.
3. Тело страницы
Тело страницы должно начинаться уже псле того. как закроется тег HEAD. Далее необходимо открыть тег <body>, за которым располагается содержательная часть вашей страницы: текст, картинки,таблицы.
4. В конце страницы
В самом конце страницы следует закрыть раздел BODY тегом </body> а далее завершить саму страницу тегом </html>.
Примечание:
Как уже было упомянуто, некоторые броузеры понимают страницу даже если всё, что описано веше, опускается. Но существуют и другие броузеры, которые не понимают страниц без надлежащей атрибутики, поэтому, если вы хотите, чтобы вашу страницу могли прочесть все, или если вы желаете придать ей более привлекательный вид, вам придётся написать её с учётом всего того, о чём говорится в данном разделе.
Стили
Можно было бы не использовать стили, а каждый раз вручную задавать размер шрифта для той части текста, которая у нас идёт в качестве заголовков, и для абзацев. Но если вы решите изменить параметры заголовков и абзацев, то вам либо придётся заменять их вручную на каждой части текста, либо сделать это при помощи автозамены в текстовом редакторе. Этот способ плох тем, что во-первых, так задавать и менять параметры текста не удобно, во-вторых, при любом неосторожном движении можно испортить свой файл.
Куда проще использовать стили. Абзацы, заголовки и другие части текста помечаются соответствующими стилями. Стилям можно назначить совокупность свойств, которые в последствии можно изменять, но для этого не придётся править весь документ.
Поскольку разреботчики языка HTML предполагали, что web-страницы будут писаться в редакторах типа "блокнот для виндовз", то язык этот оставляет возможность для наиболее удобного размещения текста при написании страницы. Вы можете ставить пробелы, символы табуляции или переводить строку (если она у вас становится слишком длинной).
1) Несколько пробелов
подряд воспринимаются
2) Перевод строки игнорируется
Эти проблемы решаются при
помощи управлающих тегов и
Дополнительные пробелы:
Если вам необходимо поставить несколько пробелов подряд, придётся использоватьсимвол: - неразрывный пробел. Простые пробелы, сколько бы подряд их не шло - будут восприниматься как один пробел.
Перевод строки
Перевод строки может осуществляться либо с началом нового абзаца (закрытие тега старого абзаца </p> и открытие тега нового абзаца <p>), либо без разрыва абзаца, по тегу <br>.
Язык HTML предусматривает несколько стилей:
Стили абзаца
Абзац начинается с новой строки (которая может начинаться с отступа или выступа). Внутри абзаца перевод строки осуществляется только по тегу <br>, причём новая строка начинается с того же уровня, с которого начинаются все строки, кроме первой.
В абзаце, кроме текста и символов могут располагаться таблицы и картинки, а также всё, что вы разместите между открывающимся и закрывающимися тегами абзаца. В абзац можно засунуть другой абзац, список. В некоторых случаях, абзацы, помещённые в абзац, могут смотреться как абзацы сами по себе, в других случаях, например, если задан,отступ от текста до края страницы, для вложенного абазаца он увеличится.
<p></p> - обычный абзац.
Обычно люди не пользуются
закрывающим тегом обычного абзаца,
поскольку в большинстве
<h1></h1> ... <h6></h6> - стили заголовков (от англ. heading - заглавие, заголовок). Заголовки устроены также, как обычный абзац (начинаются с новой строки). Крупность заголовков убывает от h1 к h6.
<dir></dir> - абзац с отступом от левого края страницы.
<pre></pre> - сформированный заранее текст. В тексте, помещённом между этими тегами учитываются все энтеры, несколько пробелов подряд, символы табуляции. Этот стиль хорош для написания стихов и образцов текстов программ.
Стили символа
Эти стили применяются к части текста, при том не происходит перевода строки. Такие стили используются для того, чтобы в тексте подчеркнуть какое-либо слово или переменную.
Стили шрифта:
Эти стили знают все пользователи Word и начинающие составители web-страниц, поскольку эти стили являются фундаментальными, на основе их формируются все остальные стили.
<i></i> -наклонный шрифт
<b></b> - жирный шрифт
<u></u> - подчёркивание
Переопределяемые стили
Все теги, которые используются в HTML имеют какие-то свои стили, которые можно переопределить при желании.
<var></var> - переменная
<em></em> - выделение (от англ. emphasis - подчёркивание (в смысле обращения внимания)).
<strong></strong> - более основательный шрифт
<cite></cite> - цитата
<dfn></dfn> - определение
Все эти стили можно переопределить совершенно произвольным образом. Так, стили var, cite, em и dfn по умолчанию все наклонные, Вы, задав им соответствующие свойства, можете сделать их прямыми. Кроме того, поигравшись с настройками, можно сделать стиль strong (что само по себе означает толстый, основательный) тощим и тщедушным.
Примечание к стилям:
Как вы заметили, стили имеют свои названия, которые подразумевают назначения этих стилей. Например, стили заголовка (h1 - h6), стили переменной (var), определения (dfn), цитаты (cite). Но это вовсе не обязывает Вас использовать эти стили соответственно их названиям. Поскольку у нас не программирование, а оформление, мы с лёгкостью можем себе позволить использовать эти стили не по их прямому назначению, и ничего плохого от этого не будет.
К примеру, стили заголовков вовсе не обязательно использовать для заглавия, можно использовать их как абзацы с определёнными настройками. Так же можно переопределить стиль dir так, что он не будет иметь отступа от края. То же касается и стилей символа: вовсе не обязательно использовать стиль var для выделения переменных, точно так же, как стилями dfn и cite выделять определения и цитаты. Использовать эти стили можно для выделения вообще любых слов на ваше усмотрение.
Можно даже переопределить стили <i>, <b> и <u>, сделать их ненаклонным, не жирным и неподчёркнутым. Но только обычно это не надо.
Определение свойств стилей
Все упомянутые выше стили имеют свойства, заданные им по умолчанию. Эти свойства отличают их друг от друга (так, стиль абзаца p заметно отличается от стилей заголовков размером шрифта). Однако, вы в праве определить для каждого стиля свойства, которые нравятся именно вам.
У каждого стиля есть определённые свойства и неопределённые. Определённые свойства будут такими, как определены для стиля, а неопределённые берутся от стиля тех тегов, в которые вложена наша данная часть текста.
Например, тег <i></i> имеет определённое свойство - наклонность шрифта. Все остальные свойства (жирность, размер и т.п.) для данного стиля не определены. Это значит, что если мы внутри некого тега к определённому набору символов применим <i>, то этот набор символов станет наклонным, но остальные свойства (жирность, размер, цвет и др.) будут такими, какими их задают более внешние теги. Если же, скажем, мы для тега <i> в свойствах стилей зададим ещё такой параметр как цвет, то тогда текст, заключённый в эти теги, будет не только становится наклонным, но и приобретать заданный нами цвет.
Итак, как определить стили? Существует два способа.
1. Определение стилей в странице: В теле раздела head (см. выше) открывается тег <style>, далее идет определение стилей, потом тег закрывается: </style>
2. Стили определяются
отдельным файлом с
<LINK href="нзвание_файла_со_стилями
rel=STYLESHEET type=text/css>
NB Если файл находится не в той же папке, что и ваша страница, то необходимо указать его относительный путь следующим образом: если файл лежит в папке (каталоге, директории), находящейся в той же папке, что и ваша страница, то необходимо указать название всех вложенных друг в друга папок, в которых находится файл, через слешы / (точно будет работать) или даже \. После последнего слеша идёт название файла. Если файл находится не в той папке, где расположена ваша страница, то надо выйти на столько уровней вверх, насколько это необходимо, при помощи сочетания символов: ../ (две точки и слеш), а потом указать путь к файлу от того места, куда вы вышли.
Итак, свойства стилей определяются
либо между тегами <style></style>, либо
в отдельном файле (там ничего
в начале и конце файла писать
не надо, сразу непосредственно приступи
Определение стиля имеет следующий вид: сначала пишется название стиля (без скобок <>), потом в скобках {} перечисляются свойства, которые вы хотите изменить через точку с запятой.
Свойство записывается следующим образом: название свойства, далее через двоеточие задаётся значение.
Пример:
p {font-size:medium;
text-indent:30pt;
text-align:justify}
h1 {font-size:large;
text-indent:0pt;
text-align:center}
Так мы определяем свойства для двух стилей: для обычного абзаца и для заголовка. В данном примере для каждого из стилей определяется по три свойства: font-size - размер шрифта, text-indent - величина отступа красной строки и text-align - выравнивание текста (абзац выравнивается по ширине, а заголовок - по центру). На самом деле параметров у каждого стиля может быть гораздо больше. Те параметры, которые мы не указали, будут присвоены значения, заданные по умолчанию. Для стилей, которые мы не определили, также будут использованы значения по умолчанию.
Если вы пользуетесь Dreamweaverом, он поможет вам создать стили не вдаваясь в их синтаксис, а непосредственно выбирая нужные параметры из интуитивно-понятного меню, но понимание того, что же это такое и как оно применяется вам всё равно понадобится.
Подробнее о том, как задавать свойства стелей можно почитать в книге Каскадные таблицы стилей CSS. Учебник www.bousoft.com/books/css.zip (40 кб) (Формат CHM - файл справки Windows).
3. Пример простейшей web-страницы
a) Пример страницы
с заданием только самого
<html>
<body>
<h1>Пример страницы</h1>
<p>Это самая простая страница,
которую только можно создать!</p>
<h1>Правила пользования</h1>
<p>Вам придётся настраивать
кодировку в своём броузере.</p>
</body>
</html>
Так мы создали до безобразия простую страницу, в которой использованы все значения по умолчанию. Как она выглядет: смотрите Здеся. (Кстати, можно посмотреть и HTML-когд, если кликнуть по странице (но не по ссылкам) правой кнопкой мыши, а потом в меню выбрать View Source (у кого русскоязычная версия, этот пункт называется "в виде HTML" или "просмотр кода HTML". Или ещё как-нибудь. В общем, если что-то про HTML, наверное это оно и есть)).
Если при открытии этой страницы у вас вместо букв будет абра-кадабра, попробуйте в меню броузера "вид" в пункте "вид кодировки" выбрать другую кодировку. Пользователем Windows, которые писали страницу в блокноте, следует выбрать "кирилица (Windows)".
Теперь создадим страницу посложней.
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<title>Пример страницы</title>
<style>
p{font-size:small;
font-family:courier;
color:#000033;
text-align:justify;
text-indent:30pt}
h1{font-size:xx-large;
font-family:courier new;
color:#0000aa}
body{margin-left:10%;margin-
</style>
</head>
<body>
<h1>Пример
страницы со встроенными
<p>Это страница с основными аттрибутами.
Обратите внимание на самую верхнюю строку
вашего броузера. Там должно