Данное пособие по постоянно обновляется и совершенствуется, поэтому лучше добавьте эту страницу в избранное, что бы всё время быть в курсе последних изменений и тенденций. Xenus studio
| Вид материала | Учебник |
- Ценность km, 70.05kb.
- Лидерами не рождаются, 24.23kb.
- Налоговый бюллетень, 1540.16kb.
- Лавный архиерей, рассказавший мне о своих упражнениях в стрельбе, выразил сомнение, 341.58kb.
- С. В. Лавров : Уважаемые коллеги, 74.94kb.
- Тест Страх, постоянно появляющийся во время пребывания на балконах, мостах, на высоте, 67.46kb.
- Тренинг таблетка от головной боли для менеджера по персоналу. Такое мнение иногда высказывается, 86.86kb.
- Путешествие к Чехову продолжается бесконечно, время то приближает, то отдаляет Чехова., 188.57kb.
- Методическое пособие для студентов для самостоятельной подготовки по теме: «сепсис, 865.32kb.
- Данное пособие предназначено для студентов, 1433.24kb.
Учебник html для новичков:
| Данное пособие по постоянно обновляется и совершенствуется, поэтому лучше добавьте эту страницу в избранное , что бы всё время быть в курсе последних изменений и тенденций. | Xenus studioссылка скрыта |
Учебник HTML для Чайников.
Правила создания HTML документов
HTML документы записываются в ASCII формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе. Язык HTML представляет из себя множество команд- тегов, открывающих <...>, и закрывающих действия соответствующие данным командам, т.е. текст заключенный между ними, при выводе на экран с помощью браузера подчиняется правилам свойственным для данных тегов. Некоторые из тегов не требуют закрытия, и прекращают свое действие с появлением аналогичных открывающих команд. (Например строка в списке прерывается там, где дана команда создания следующей строки списка.) Учтите, что "лишний" закрывающий тег не испортит ваших трудов. Браузеры вообще все непонятные для них команды пропускают мимо ушей, что для нас- Чайников весьма важно. Поэтому я, рекомендую вам закрывать теги явным образом - это облегчит чтение ваших документов.
Теги могут быть вложены друг в друга, для придания тексту сразу нескольких свойств. В этом случае, порядок закрытия тегов должен быть строго противоположен порядку их открывания. Например если вы сначала объявили текст жирным шрифтом, а потом еще и курсивом, то закрывать следует сначала внутренний тег (курсив) и только затем болд , а чтобы сделать последнее слово в примере только в италике (без bold) вам придется снова открывать и закрывать тег :
Текст вышеописанного примера.
При просмотре в browsers получим:
Текст вышеописанного примера.
Чтобы написать WEB страницу, создайте при помощи блокнота или Worda текстовый файл, назвав его например NewPages.txt и набирайте две первые команды (которые вообще-то нужны только для старых браузеров... но традиции надо чтить): и . Поменяйте расширение файла .txt на .htm и редактируйте пространство между этими двумя метками до полной готовности, не забывая обновлять браузер всякий раз после изменения:
Лично я, делаю это так:
- Щелкаю мышью по значку созданной вышеописанным способом WEB-страницы и жду пока открывается Explorer.
- Ставлю курсор мыши в любую точку открывшейся в Explorere страницы но только не на картинку и щелкаю правую кнопку.
- В появившемся меню выбираю "просмотр источника".
- Редактирую код в открывшемся окне текстового редактора.
- Закрываю редактор.
- На вопрос о сохранении отвечаю положительно.(В случае работы с Word'oм сохранять нужно как текстовый файл.)
- Щелкаю в Explorere "обновить".
Все очень просто. К тому же, если вы еще не поняли, то при помощи блокнота можно изменить любую понравившуюся Вам страницу в интернете. Вы можете поменять скажем графику и текст, оставив не тронутым стиль форматирования, цвета и все что вам еще нужно. Это называется грязный стиль. Но для Чайника это простительно...
Пишем первую страницу
(Экспресс метод Илоны Давыдововны)
Вам понадобится графический файл в формате JPG, желательно с собственной фотографией (Чему еще посвящять свою первую страницу, как не себе любимому?) Назовите его "Image.jpg". Теперь создайте в блокноте новый документ, например : "MyPage.txt". Впишите в него текст следующего содержания:
Да будет вечно жить в памяти народной
создатель этой прекрасной страницы, то есть Я!
(Можете даже скопировать и вставить этот текст мышью)
| HTML не различает, какими буквами набраны команды языка: равносильно или Исключение составляют Специальные символы. |
Теперь нужно сохранить файл и поменять расширение с txt на htm (значек при этом должен поменятся на эксплореровский). Теперь можете открывать созданный документ и любоваться работой. Как видите все не так сложно. Если вместо Вашей фотографии на экране нарисован какой-то квадратик с крестиком, значит ваша рожа не влазит в экран :) В этом случае проверьте, чтоб и страница и фотография лежали в одной папке, а имя файла соответствовало ссылке на него, то есть в нашем случае- Image.jpg. Полюбовавшись собой уничтожте данный файл, и начинайте читать дальше. Это было слишком просто, чтобы ставить на этом точку...
"Голова" документа
Для объявления заголовка страницы служат команды:
Заголовок HTML-документа тоже необязательная часть в документе, но кроме отображения в заголовке браузера названия страницы, может включать неограниченное количество очень полезных META-инструкций. Они должны располагаться между метками и
| d9d9d9 | a3bf00 | ffc200 | 3562 | 69a3 | 9eb03 |
| a6a6a6 | 8992 | ff0000 | 6d93 | 0 | c4a100 |
| 9b8f9b | d3c2ad | 0 | e8aa00 | ffffff | fad69f |
| Примеры цветов в RGB | |||||
| f39e77 | a8d59d | 9595c6 | 9999ff | 9933 | 990066 |
| f6b580 | 99cc99 | 968187 | cc0033 | 7299 | 9999 |
| fad295 | 99cccc | ae88b8 | 960018 | e96b9e | ff6633 |
| fff99d | 99ccff | c699bd | 999966 | a9834f | 99ff |
| c7e19e | 99add5 | ff99cc | 33cc66 | 6699cc | 660066 |
При цифровом выражении цвета не забывайте знак: #
Например: font color="#2547ff"
Соединение с другими документами
Browser выделяет цветом и/или подчеркиванием ключевые слова, являющиеся гиперссылками. Гиперссылка -обращение к документу, или к части документа обозначенной закладкой.
ссылка скрыта.
Здесь ключевые слова `Ссылка на Main.htm' являются гиперссылкой на файл Main.htm, который лежит в той же директории, что и текущий документ. Ссылку на файл NJStats.php, лежащий в поддиректории AtlanticStates можно описать как: New Jersey
Это так называемые относительные ссылки. Вы также можете использовать абсолютное имя файла (полный путь вроде: ссылка скрыта ). В общем случае, использование ссылки по абсолютному имени файла более предпочтительно.
Гиперссылки можно давать не только на изображения и текст, а обсолютно на любые фаилы. Например если вы хотите разместить у себя ссылку на архив с игрой Doom2 то пишите примерно так: В этом случае броузер открывает окно с вопросом о сохранении данного файла на Вашем диске.
Гиперссылка на определенный участок другого документа
Чтобы создать ссылку на определенную часть документа, необходимо сделать закладку к которой будет происходить обращение. Например закладка в документе Main.htm: Глава1 Таким образом слово Глава1 в документе превращается в закладку с именем А001.Теперь создадим ссылку из другого документа на закладку А001, находящуюся в Main.htm: Ссылка на Главу1
Гипертекстовая ссылка внутри документа
Техника соединения аналогична предыдущей но опускается имя файла. Например, связь с Главой 1 внутри того же самого файла Main.htm
Ссылка на Главу1
Значек # -обязателен!
Фреймы
Подобно таблицам фреймы делят экран браузера на части. Отличие заключается в том, что страница содержащая фреймы, вообще не имеет тела т.е. вместо тега BODY в ней должны располагаться теги FRAMESET которые создают разметку для загрузки на экран одновременно нескольких документов. Левая часть этого учебника содержащая оглавление является фреймом в который постоянно загруженна самостоятельная страница -contents.htm Правый фрейм загружается различными документами в зависимости от вызванной гиперссылки. Рассмотрим пример фреймового документа:
| | Схема фреймового документа
|
Первый тег frameset cols="300,*" делит окно браузера на две колонки размер первой из них 300 пикселов, размер второй (*)- все оставшееся место. Тег frame src="images/aaa.php" name="frame_a" содержит ссылку на документ который будет загружаться в первый фрейм и одновременно присваивает ему имя, по которому в дальнейшем можно будет загружать в этот фрейм другие страницы, давая на них гиперссылки с параметром target="frame_a" Например чтобы дать ссылку из frame_a на документы которые должны менятся в frame_b нужно расположить в frame_a страницу содержащую примерно следующее:
Документ ЕЕЕ
Документ UUU
Тег frameset rows="50%,50%" делит вторую колонку на две продольные полосы по 50% каждая. Если при сложении обоих значений результат неравен 100%, то браузер сам рассчитает размеры фреймов пропорционально заданным значениям. Следующие два тега задают имена и URL для каждой из полученных полос поочередно. frameset требует закрывающего тега в отличие от frame. Если в теге frameset одновременно используются оба параметра cols и rows то создается простая фреймовая сетка :
| rows="50%,50%"> | Схема фреймовой сетки:
|
Таблицы
Таблицы являются наиболее замечательной особенностью HTML. Вооружившись небольшим количеством знаний, вы сможете использовать их, чтобы создавать впечатляющее разнообразие эффектов при проектировании страниц. Таблица размещается между тегами
| Это | пример |
|---|---|
| обычной | таблицы |
| Это | пример |
| обычной | таблицы |
| В первой строке в колонку объединены 2 ячейки заголовков. Во второй строке тег первой ячейки должен быть пропущен. |  | 3 ячейка первой строки |
|---|---|---|
| Вторая строка таблицы состоит из трех ячеек, но так как тег первой ячейки пропущен из-за объявления в первой строке, а 2 последние ячейки тоже объединены в одну, то во второй строке используется только одна метка ячейки. | ||
Дает на экране:
| В первой строке в колонку объединены 2 ячейки заголовков. Во второй строке тег первой ячейки должен быть пропущен. |  | 3 ячейка первой строки |
| Вторая строка таблицы состоит из трех ячеек, но так как тег первой ячейки пропущен из-за объявления в первой строке, а 2 последние ячейки тоже объединены в одну, то во второй строке используется только одна метка ячейки. | ||
Своиство "BORDER" определяет ширину рамки вокруг таблицы (если размер не указан то по умолчанию). "BGCOLOR" -цвет фона- можно использовать как для таблицы в целом, так и для каждой ячейки в отдельности. Это относится и к возможности использования в качестве фона графического файла. Например:
WIDTH - ширина таблицы можно в процентах, можно в пикселах.
Также таблицей могут управлять атрибуты CELLPADDING="n" -определяет отступ от содержимого внутри ячеек, и CELLSPACING="n" -ширина границ между ячейками -все в пикселах. (Значение BORDER тем не менее определяет, будут-ли границы присутствовать вообще.)
Маркированные списки
- яблоки
- бананы
Дает на экране:
- яблоки
- бананы
(закрывающие теги в строках необязательны)
Нумерованные списки:
- апельсины
- персики
- виноград
Дает на экране:
- апельсины
- персики
- виноград
Browser автоматически нумерует элементы такого списка.(закрывающие теги в строках необязательны)
Вложенные списки
Списки могут быть произвольно вложены друг в друга :
- Крупные города России:
- Москва
- Санкт-Петербург
- Крупные города Украины:
- Киев
что дает на экране:
- Крупные города России:
- Москва
- Санкт-Петербург
- Москва
- Крупные города Украины:
- Киев
- Киев
Бегущая строка
Данный тег не работает в Нетскэйпе. Вместо чудных бегущих буковок, на экране Вы увидите лишь уродливый обрывок текста, неизвестно отчего торчащий в одной половине окна. Для создания бегущей строки в IE напишите в исходняке следующее:
Оформить строку можно следующим образом: 
Dehavior="alternate" -команда заставляющая строку болтаться туда-сюда. По умолчанию данной команды, строка ползет справа налево. BGCOLOR -цвет фона. Все что касается цвета см. здесь Scrolldelay - скорость перемещения. Width - длина бегущей строки (необязательно в процентах).
Авторский стиль редактирования
Текст документа формируется browser, игнорируя повторение пробелов и перенос строк. Если использовать
...
все ваши пробелы будут сохранены, а строки будут прерываться там же,что и в исходном HTML-файле.
При этом на экране текст пишется
шрифтом фиксированной ширины.
В пределах
могут использоваться гиперссылки. Однако, в пределах
, необходимо избегать использовние других методов форматирования.
Физические стили форматирования
Жирный шрифт Жирный шрифт
Наклонный шрифт Наклонный шрифт
Подчеркнутый шрифт Подчеркнутый шрифт
шрифт фиксированной ширины fixed шрифт
Верхний математ. шрифт Верхний шрифт
Нижний математ. шрифт Нижний шрифт
Увеличенный шрифт Увеличенный шрифт
Уменьшенный шрифт Уменьшенный шрифт
Теги физического форматирования могут быть вложены друг в друга в любом количестве. Помните про их своевременное закрытие:
Логические стили форматирования
Логические стили могут иметь различные отображения в браузерах разных производителей поэтому более предпочтительным было бы использование Физического форматирования.
* Тег шрифта вставки Тег шрифта вставки
*
* Подсказка Подсказка
Тег выделенного шрифта Тег выделенного шрифта
Тег шрифта образцов Тег шрифта образцов
Тег важных фрагментов Тег важных фрагментов
* Поддерживаются только IE
Тег подсказки используется в левом фрейме учебника для описания гиперссылок (подсказка всплывает при удержании на нем курсора мыши)
Отступ от края
Абзацы могут быть выполнены с отступом от края при помощи тегов:
Специальные символы
Символы <, >, & и " имеют в HTML особое значение, как символы форматирования. Но иногда нам необходимо использовать их в тексте по своему прямому назначению. Для их введения в текст, Вы должны использовать:
< - левая скобка <
> - правая скобка >
& - амперсанд &
" - кавычки "
Также можно можно вводить принудительные пробелы в любом колличестве с помощью комманды:
ЗАМЕЧАНИЕ :Специальные символы чувствительны к регистру: НЕЛЬЗЯ использовать < вместо < Знак ; обязателен!
Прерывание строки
Используя
Вы можете перейти на новую строку внутри абзаца:
Институт Ядерной Физики
Московского Государственного Университета
даст на экране:
Институт Ядерной Физики
Московского Государственного Университета
Горизонтальная линия
Используя
Вы можете разделить текст горизонтальной чертой, такой-же, как разделены все параграфы этой страницы. Закрывающего тега нет. Используя своиства size и width , можно указывать высоту в пикселах и длину в пикселах или процентах. Например
нарисует такую линию:
(Если цвет не указан, то по умолчанию устанавливается обычно серый)
Графические файлы
На WEB странице можно использовать графические файлы форматов JPG и GIF. GIF -специальный сетевой формат: имеет малый размер файла, возможность плавного проявления и анимации, но т.к. содержит 256 цветную палитру, неэффективен для храненные фотографий. JPG напротив не имеет ограничений по глубине цвета, но также и возможности анимации. Чтобы включить в страницу рисунок, надо описать ссылку на него:
где Image -графический файл в формате gif или jpg , содержащий рисунок.
Вы можете задавать взаимное расположение рисунка и текста:
- это выравнивание по нижнему краю (делается browser по умолчанию) - это выравнивание по верхнему краю. Положение рисунка задается включением атрибута align = " ":
Также возможны типы выравнивания:
align = "middle" - центр
align = "left" -текст обтекает картинку справа
align = "right"- то же слева
Графические гиперссылки
Любая картинка, как и любой другой видимый элемент страницы, может стать гипертекстовой ссылкой.
Чтобы убрать рамку вокруг картинки-ссылки необходимо использовать в теге img параметр border="0". Вы можете собрать несколько графических файлов в мозаику таким образом, что при нажатии на каждый из ее элементов будет происходить обращение к различным документам. Для этого необходимо использовать таблицу. А в каждую ячейку с размещенным там изображением, необходимо добавить соответствующую ссылку. При этом свойства cellspacing и cellpadding таблицы сделайте равными нулю, и все изображения сольются.
Альтернативный текст в картинках
Некоторые WWW-browsers, не могут показывать рисунки. Кроме того некоторые пользователи специально отключают загрузку картинок для ускорения работы с текстами. Так-же рисунок может быть потерян или испорчен, в этом случае пользователь увидит только текст заданный в свойстве alt="..." Сопроводительный текст должен быть включен в кавычки. Например :
покажет на экране: Этот же текст можно увидеть через некоторое время после наведения и удержания курсора мыши на самой картинке. Удобно для коментариев.
Скрипты
В любой поисковой системе в сети вы сможете найти огромное количество информации по созданию апплетов. Я же просто дам вам несколько адресов в internet с большим количеством примеров скриптов для самостоятельного изучения:
ссылка скрыта
ссылка скрыта
ссылка скрыта
ссылка скрыта
ссылка скрыта
В качестве наиболее полезного приведу вам пример часов, написанный на " onclick="return false">ссылка скрыта
Публикация страницы в WEB
Итак... WWW-страница готова и надо скорее провозгласить миру о ее существовании. Для этого необходимо перекачать ее с Вашего винта на WEB сервер. Не сочтите за рекламу, но действительно полезный совет по размещению я могу дать только там, где расположена моя собственная страничка- ссылка скрыта Я выбрал именно сhat.ru потому, что не надо платить. Дают 10 мегабайт свободного места. Есть правда и недостаток: если вы заметили в моем учебнике нет ни одной буквы [йо]. После перекодировщика на месте этой буквы с сервера возвращается непонятный знак. Так что пользоваться ей нельзя. Принимая во внимание, что это единственный баг в системе, на него можно закрыть глаза...
Во первых Вам нужно зарегистрироваться, как новому пользователю системы. Там будет такая клавиша, сверху помоему, где все и случится. Вас заставят ответить на кучи вопросов -как зовут, чего нада, и еще штук пять типа того... Это им нужно для того, чтоб после благополучной потери Вами вашего же пароля для доступа к редактированию страницы, вы могли у них-же его и узнать :) То есть писать можете все что угодно. Я например уже обращался, и очень пожалел, что написал какую-то чушню, которую вспомнил, потеряв кучу драгоценных часов, только после перебора всего что знал.
После регистрации, получив свой пароль для доступа, вы набираете в Explorere : ссылка скрыта и вводите туда имя вашей страницы и пароль доступа. Перед вами откроется страница под названием File manager. Там будет снизу четыре кнопки. Первой "Upload+UnZip", я вам пользоваться настоятельно не рекомендую, потому как используя ее потерял кучу времени , и все равно пришлось переделывать все сначала без ее использования.
"MkDir" -как я понял, создание в вашей странице вложенных папок. Точнее сказать не могу, потому что моя страница, имея более сотни файлов, расположена вся в одной директории, чего и вам желаю. (поверьте старому чайнику, Вы и в одной директории запутаетесь так, что ни дай бог никому...)
"Upload" -закачка -наиболее используемая клавиша. Жмете на нее. Открывается экран с тремя окошками. В верхней части абсолютно неудобное окно для выбора файла (очень короткое), в котором вы должны подставлять имена ваших файлов для закачки их на сервер. Если рядом с этим окном(справа) нет клавиши типа "Открыть", то медицина здесь безсильна- у Вас старый броузер и придется устанавливать Explorer 4.0 или выше. Возможно вы пользуетесь Netscape Navigator'ом (говорят они лучше), тут я вам не советчик, потому, что пользоваться им я неумею :( и нехочу :)
Следующее окошко "Target" - для закачки файла в нужную дерикторию, которую я Вам нерекомендовал создавать при помощи кнопки "MkDir". Если вы не создавали никаких дерикторий, то окошко это вам не пригодится.
В низу находится окошко перекодировщика. Если вы пользуетесь Explorer'ом то выбираете "WIN cp-1251" для всех файлов с расширением htm, и "Binare data" для всех остальных файлов (рисунки, звук и т.д.).
После нажатия на клавишу "Upload" броузер передает ваш файл на сервер chat.ru и открывает вам окно в котором появится имя файла с его размером при удачном завершении передачи, или сообщении об ошибке. Жмите "file list" и грузите дальше. Первая страница, дающая ссылки на все остальные документы должна называться index.htm и никак более. "Delete"- удаление файла или дериктории.Обьяснять тут нечего, все и так понятно. Кстати если вы заменяете страрый файл новым с тем-же именем, то удаления не требуется, однако если вы отправите файл с измененным регистром в имени, он запишется рядом и будет мешать правильной работе вашей страницы.