|
Практика JavaScript и DHTML
- Учебник HTML в одной главе (вместо пролога)
Что мешает вам создать веб-сайт и поместить его в Интернет? Несколько страниц текста, 15-20 минут работы - и о вашем существовании сможет узнать весь мир.
- Гл. 1. Больше одной страницы
Сайт из пяти страниц. Минимум HTML-тэгов. Основы навигации (гиперссылки).
- Гл. 2. Прайс-лист. Таблицы и архивы
Перенос списка товаров из бухгалтерской программы в Excel. Надстройка Excel для сохранения в формате HTML. Упаковка в архив zip.
- Гл. 3. Продвижение
Поиск информации в Интернете. Заголовок страницы (title). Краткое описание (meta description). Правильная кодировка страницы. Веб-сайт как рекламоноситель.
- Гл. 4. Обратная связь
...ни с кем не встречайтесь, никому не звоните, не трогайте почтовые конверты, не распечатывайте счета, вообще не прикасайтесь к бумаге, раз уж существует электронная почта!
- Гл. 5. Испытания в полевых условиях
Баловство с IIS на Windows. Практической цели не имеет.
- Гл. 6. Работа с графикой
Фотография, полиграфия и веб. Экранное разрешение. Режим «Индексированный 256», уменьшение количества цветов в палитре. Вставка изображений в HTML-страницу. Атрибут ALT.
- Гл. 7. Оформление с помощью CSS
Блочные HTML-элементы. Управление цветом и размером многих элементов с помощью правил. Особенности в интерпретации HTML разными браузерами. Поля. Оформление ссылок (изменение цвета при наведении мыши - hover).
- Гл. 8. Изменение структуры. Обновление
Каталог продукции: картинки с описаниями. Отличие элементов PRE и P. Добавление прозрачности изображениям. Выравнивание по вертикали. Обработка текстов с помощью поиска и замены символов. Немного об HTML-таблицах.
- Гл. 9. Javascript: баловство или необходимость?
Получение информации о браузере (интернет-обозревателе, клиенте, агенте). Оформление с помощью JS: невидимая на экране команда JavaScript вставляет в текст страницы невидимую глазом инструкцию - и вид страницы изменяется. Оптимизация кода.
- Гл. 10. Примечания (сноски) в книге
В HTML-странице не обязательно собирать все примечания в конце. Их можно отображать и скрывать по желанию пользователя прямо там, где стоит ссылка на сноску.
- Гл. 11. DHTML для нашего сайта
События onclick, oncontextmenu. Знакомство с DOM (объектной моделью HTML-документа). DHTML-шутка: сайт в одной странице.
- Гл. 12. Электронные документы
Скрыть или показать часть стуктуры. Создание оглавления.
- Учебные материалы
Файлы примеров для учебника HTML, спецификации W3C, несколько полезных программ.
Статьи
- Конструктор HTML форм
Начнём с того, что конструктор форм, как и конструктор сайтов, есть вещь принципиально невозможная. Как, впрочем, и любой конструктор вообще. Конструктор – выражение фигуральное, метафорическое. В ... 01.02.12
- Числа прописью с рублями, минутами и метрами
Эта тема беспокоит меня давно, с тех пор, как в нашей газете научились отправлять электронные счета электронной почтой. В счёте ведь надо было как-то превращать цифры с слова (типа «Два миллиона сто ... 15.11.11
- Календарь javascript (datepicker)
В сети полно чудовищных скриптов для наглядного выбора даты с помощью указателя мыши. Эти скрипты не могут быть не чудовищными по определению, так как созданы для позорной задачи: облегчить жизнь ... 15.11.11
- Что из чего следует в PHP-фреймворке «Friends»
«Friends» - рабочее название маленького PHP-фреймворка (16 K кода, вместе с CSS, но пока без javascript), находящегося в сомнительных отношениях с mvc, но бодро работающего.
В предыдущей статье мы ... 29.10.11 Комментарии (1)
- PHP фреймворк, анти-MVC, без ООП
С самого начала изучения MVC мне не понравилось слово «модель». И не зря. На громадном количестве сайтов это понятие действительно не применимо. Там есть Данные, есть какое-никакое их Отображение. ... 17.10.11 Комментарии (6)
- Идеальная функция setCookie
Сравнение двух интересных библиотек (http://microbasejs.ru/, http://github.com/Kolyaj/CrossJS) привело меня к озарению и созданию совершенно особой, доселе невиданной функции по установке куки (с ... 03.10.11 Комментарии (1)
- Отображение настроек для javascript сортировки
Очень сложная оказалась задача – дать пользователю возможность настраивать колонки таблицы не по Ctrl+click, а наглядно, как в оконных приложениях, выбором с помощью мышки. Весь моск вывернула ... 29.09.11
- Что такое Контроллер mvc в вебе?
MVC – Модель, Контроллер, Вью (Представление). Вместо мутного «Модель» используем «Данные». И попытаемся определить откуда у всего этого ноги растут.
Данные – это что-то, что хранится в компьютере; ... 25.09.11
- javascript сортировщики, сравнение алгоритмов
Всякое сравнение хромает в пользу того, кто сравнивает.
Попробуйте поискать в сети страницы по фразам «Сортировка HTML таблиц», «javascript сортировка», «table sorter»... Можно найти немало решений, ... 15.09.11
- unobtrusive top.mail.ru
Лет 5-6 назад среди веб-разработчиков распространилась мода на «unobtrusive javascript» – «ненавязчивый» javascript, который внедряется в тело HTML страницы только в виде ссылок на файлы js (а не в ... 15.09.11
- Простой сортировщик HTML таблиц, версия 0.03
Simple Table Sorter v 0.03
Первый Простой сортировщик HTML таблиц (версия 0), упоминаемый на этом сайте, был придуман далеко не первым по времени, а примерно через год работы над концепцией. Была ... 09.09.11
- Подсветка строк, столбцов и значений в HTML таблице
Это следующая версия скрипта Big Table Sorter – 1.01.
Почти год назад в статье http://ir2.ru/tabsort1.aspx мы сформулировали концепцию полнофункционального сортировщика HTML таблиц. Казалось, что ... 06.09.11
- Отложенная загрузка javascript
Когда в очередной раз пользователи начали жаловаться на «странную» работу некоторых функций корпоративного сайта, мне пришлось вникнуть в проблему. Она оказалась очень простой: 1) после загрузки ... 16.07.11
- Кэширование промежуточных результатов в веб-программировании
Кэширование в php-скрипте
Существует такой шаблон проектирования (или приём программирования) «Экстрактор»: создаваемая конструкция не знает о существовании или отсутствии элементов, она просто ... 28.06.11
- javascript и php: синхронизация сущностей
Вот форма на сайте ("вот дом, который построил Джек"). Вот кнопка submit, при щелчке по которой запускается функция валидации формы. Вроде всё, как всегда, стандартный пример. Но, если подумать, ... 24.06.11
- Скругление углов CSS, JavaScript
Кажется, на эту тему трудно написать что-то новое. Точнее, трудно изобрести новый метод скругления углов. А взглянуть на проблему под другим углом всегда можно. Мы попробуем доказать неизбежность и ... 04.06.11
- Javascript и логика представления (design pattern «JS-словари»)
В статье о генерации HTML формы для wysiwyg редактора мы привели пример небольшой автоматизации в программировании – создание формы на основе структуры mysql-таблицы и последующая обработка данных ... 29.05.11
- Структура WYSIWYG-редактора сайта
WYSIWYG – это наглядный редактор (прежде всего, для текста): вы выделяете фрагмент, нажимаете в управляющей панели кнопку B – и фрагмент становится жирным. Так можно делать, например, в Ворде, или в ... 07.05.11
- Подсветка картинки при наведении мыши
Хорошей практикой веб-строительства является создание таких гиперссылок (и других активных элементов), которые изменяются при наведении мыши. У гиперссылок, по спецификации W3C, даже существует для ... 02.05.11
- Визуальные редакторы: для кого они?
В давние-давние годы, когда в Иркутске только начали появляться компьютеры и про Интернет ещё никто ничего не слышал, для вёрстки использовали программу Xerox Ventura Publisher (Вентура). Вёрстка, ... 27.03.11
- Веб/2: сайты нового поколения
ПредысторияЧтобы дать определение новому понятию «Полувеб», надо вспомнить сначала, что такое «веб 2.0». О нём много пишут; как всегда, лучше всего в Википедии. С содержательной стороны – это ... 28.12.10 Комментарии (2)
- Как измерить скорость работы Javascript?
На самом деле хочется, конечно, знать общую скорость (точнее, время) вывода на экран какой-либо информации. В нашем случае – информации, получаемой с помощью браузеров (то есть скорость вывода ... 21.12.10 Комментарии (2)
- Функция для работы с className в javascript
Изменение атрибута class у HTML-элементов является основой, базой для управления содержимым страницы с помощью DHTML. Любое действие по оформлению проще всего производить, именно изменяя динамически ... 18.12.10
- Сортировщик HTML таблиц, версия 1
В предыдущей статье мы попытались определить минимально необходимые свойства сортировщика таблиц. Вряд ли произведённые определения можно сильно оспорить; другие минималистские сортировщики в общем с ... 11.12.10 Комментарии (1)
- Сортировщик HTML таблиц: концепция и «нулевой цикл»
У кого sorter тинее?
В процессе работы над сортировщиком (как и над любой другой программой) приходится многократно обращаться к разным вариантам, существующим в виде открытых решений в Сети. И ... 09.12.10 Комментарии (29)
- Как с очень высокой скоростью найти слово в большой таблице?
В предыдущей статье мы показали, как два уровня (или два приёма) javascript-кэширования могут увеличить скорость поиска по списку из 400 элементов в десятки раз. Там были важны три ... 06.12.10 Комментарии (2)
- Как в большом списке найти слово с очень высокой скоростью?
Простой список. Прямой алгоритм
Начнём с нашего любимого примера – простого (в одну колонку) списка рубрик из справочника предприятий vostsibspravka.ru: listru1.htm. Наиболее очевидный алгоритм ... 06.12.10
- HTML база данных лучше, чем Excel
Второй вопрос после "как сортировать и фильтровать данные в HTML-таблице?" обычно возникает у критиков: "А нафига?" Скептицизм здесь уместен: пользователи обычно получают HTML-страницы с веб-сервера, ... 05.12.10 Комментарии (1)
- Javascript база данных
Есть такой анекдот (или притча) о злой тётке, которая один раз в жизни пожалела нищенку и подала луковое пёрышко; а потом в аду черти тётку топили, а нищенка протянула ей то самое луковое пёрышко и ... 28.10.10
- Сортировщик HTML-таблиц, версия 1.3
Статья о сортировке HTML-таблиц была написана год назад. Так получилось, что описываемая технология заинтересовала некоторых начинающих программистов, и они стали задавать вопросы и высказывать ... 30.09.10 Комментарии (3)
- Проверка условий в Javascript
Веб-программист постоянно вынужден что-то проверять: правую кнопку мыши нажал пользователь или левую, заполнено ли в форме поле «Поиск», есть ли на странице элемент с id = "console"... Иногда это ... 25.09.10
- Скрыть – показать HTML элементы с помощью Javascript
Специалист – человек, который, избегая мелких ошибок, неуклонно движется к глобальному заблуждению. Закон программирования Мэрфи, ст. 17
Специалист подобен флюсу: полнота его одностороння. Козьма ... 11.09.10
- Таймеры в Javascript (setInterval, setTimeout)
В программировании на скриптовых языках периодически возникает необходимость создать паузу – приостановить выполнение программы на некоторое время, а потом продолжить работу. Например, в сценариях ... 26.08.10 Комментарии (10)
- Javascript фильтрация данных
Сортировать HTML-таблицу мы уже научились. Вторая после сортировки задача базы данных – выборка строк из таблицы по определённому критерию. Например, чтобы поле город заканчивалось на -тск. ... 24.08.10 Комментарии (13)
- Javascript: вопросы и ответы
Все примеры javascript для данной страницы находятся в файле o3.js. Для правильной работы скриптов необходима также библиотека ir2.js.
Как запомнить options, выбранный в элементе select?
... 18.07.10
- Javascript: часто задаваемые вопросы
Как удалить пробелы в Javascript с учётом ?
Речь, понятно, идёт не о всех пробелах подряд, а о лишних пробелах справа и слева, т.е. об аналоге функции trim (удаляющей справа и слева строки ... 27.02.10 Комментарии (3)
- Редактирование таблицы MySQL: Javascript интерфейс
В предыдущей статье мы рассмотрели предельно простой способ доступа к базе данных MySQL (редактирование таблицы без перезагрузки HTML страницы). Отправка данных на сервер производилась через ... 21.02.10 Комментарии (7)
- Редактирование таблицы MySQL в браузере
Заголовок, конечно, пугающий, но там (здесь), в общем, ничего необычного: редактирование таблицы MySQL происходит всё-таки с помощью серверного скрипта PHP. К тому же пользователи вообще очень часто ... 24.01.10 Комментарии (8)
- 10 лучших функций Javascript
Функция удаления со страницы ссылок «на себя» stripSelfHref()
DOM-инспектор dom-javascript.js
Функция scriptRequest() (фоновые http-запросы)
Функция записи куки setCookie()
... 16.01.10 Комментарии (1)
- Сортировка таблицы средствами JavaScript - DOM
Вопрос когда-то с неизбежностью возникает перед любым добросовестным веб-мастером: зачем перегружать HTML страницу при сортировке таблицы? Нельзя ли перегруппировать HTML элементы таблицы прямо в ... 09.01.10 Комментарии (49)
- DHTML: условная разметка для HTML кода
Стили набора и форматирования
Как авторы обычно оформляют текст при наборе? Например, когда надо какое-то слово сделать курсивным? Результат можно получить разными способами:
Нажать мышкой в ... 05.01.10
- DHTML: защита форума
Как защитить фор(ум|му) от спама?
Форма – это дыра, через которую сообщения пользователя отправляются на сервер. Точнее, несколько дыр: текст сообщения, автор, e-mail...
Форма 1.
Автор: ... 02.01.10 Комментарии (3)
- DHTML: хранение настроек пользователя
Для чего нужен Dynamic HTML
Убрать
Развернуть и запомнить
... 30.12.09
- DHTML: проверка формы
В предыдущей статье
http://ir2.ru/dhtml.aspx мы сформулировали ряд причин, по которым
бывает необходимо изменять HTML страницу после её открытия в браузере.
Повторяем здесь список этих причин:
... 26.12.09 Комментарии (2)
- DHTML
Нечасто задаваемые вопросы
Изменение текста (и оформления) страницы после её открытия в браузере иногда называют DHTML – Dynamic HTML. Справочник по DHTML найти в сети почти невозможно. ... 24.12.09 Комментарии (2)
- JavaScript
О популярности JavaScript в Википедии слагают легенды. Специалисты объясняют эту популярность в основном простотой языка и широкой поддержкой в прикладных программах. Такой взгляд кажется нам немного ... 13.12.09 Комментарии (1)
- HTML таблицы
Таблица (элемент table) является, пожалуй, самой загадочной и сложной конструкцией языка HTML. Хотя собственно HTML тут ни при чём, таблица сложна по самой своей сути, по противоречивой логике ... 07.12.09
- Самый быстрый браузер
В последние годы интернет-обозреватели не радуют нас разнообразием рекламы: «С новой версией NN ваш веб-сёрфинг станет ещё безопаснее!» – наиболее типичный призыв производителей. А ... 26.10.09 Комментарии (3)
Добавить статью:
|
Пролог. HTML: самый короткий учебник1. Создание вашей первой html-страницы
Что мешает вам создать веб-сайт и поместить его в Интернет? На этот
вопрос можно найти довольно много ответов. Точнее, можно найти много
причин, по которым создание интернет-страницы кажется вам невероятно
сложной задачей. Ну, что же, кто не хочет делать свой сайт, тот ищет
причины, а кто хочет - читает дальше. Несколько страниц текста, 15-20
минут работы - и о вашем существовании сможет узнать весь мир.
Начинайте!
Html-страница - это файл с расширением "html" или "htm" и совершенно
обычным текстом внутри, русским, английским или каким угодно другим. К
тексту, который мы читаем на экране, добавлены ещё определённые команды
(на экране не видимые) в угловых скобках - метки HTML. Текст в
html-файле может быть и совсем без меток, главное, чтобы расширение
файла было правильным, таким, чтобы его понял интернет-обозреватель
(программа для просмотра html-страниц).
- Откройте папку «Мои документы» (ярлык для неё обычно есть на
рабочем столе), щёлкните по свободному месту в папке правой кнопкой
мыши, выберите из выпавшего меню «Создать», затем «Документ Microsoft
Word»:
- Откройте вновь соданный документ Word двойным щелчком и напечатайте в нём слова «Моя первая HTML-страница»;
- В меню MS Word «Файл» выберите пункт «Сохранить как»,
- в открывшемся окне в поле «Имя файла» наберите в кавычках "1.html",
- в поле «Тип файла» выберите «Обычный текст» (или «Только текст»),
- нажмите «Enter» (если появится новое диалоговое окно «Преобразование файла "1"», ещё раз нажмите «Enter»).

Всё, ваша первая HTML-страница готова. Созданный вами html-файл
может выглядеть как "1.html" или просто "1", в зависимости от настроек
вида ваших папок. Можете теперь открыть его двойным щелчком, (скорее
всего, он откроется в Интернет Эксплорере). А можете поместить свой
файл на какой-нибудь сервер в Интернете (как описано в 3-ей части
Пролога), где просмотреть ваше сообщение сможет каждый желающий.
Вариант: можно щёлкнуть правой кнопкой мыши в
пустом месте папки «Мои документы», выбрать из выпавшего меню пункт
«Создать», выбрать «Текстовый документ»; нажать «Enter» - на экране
появится новый файл с названием «Текстовый документ»; откройте этот
файл двойным щелчком (он откроется в «Блокноте»); напечатайте слова
«Моя первая HTML-страница», выберите в меню файл «Сохранить как»,
наберите (обязательно в кавычках!) "2.html", нажмите «Enter».
Если вы используете оба варианта создания HTML-страницы, то у вас
получится два файла с одинаковым содержанием, но с разными названиями.
2. Создание вашей второй HTML-страницы
- Откройте в программе MS Word (Winword) какой-нибудь документ
(например, автореферат вашей диссертации), а лучше всего просто листок
с основными реквизитами вашего предприятия: название, адрес, телефоны
(может быть, ещё основное направление деятельности предприятия);
- Напечатайте перед началом каждого абзаца <p> (латинская буква в угловых скобках),
- В меню MS Word «Файл» выберите пункт «Сохранить как»,
- в открывшемся окне в поле «Папка» выберите «Мои документы»,
- в поле «Имя файла» наберите "index.html" (обязательно всё маленькими буквами и в кавычках!),
- в поле «Тип файла» выберите «Обычный текст» (или «Только текст»),
- нажмите «Enter».
Всё, ваша основная (и, вероятно, последняя) HTML-страница готова.
Другой вариант сохранения
- Как в первом варианте;
- Напечатайте один раз, в начале всего документа <pre> (3 латинские буквы в угловых скобках),
- Как в первом варианте,
- как в первом варианте,
- как в первом варианте,
- в поле «Тип файла» выберите «Текст с форматированием»,
- нажмите «Enter».
3. Помещение вашей страницы в Интернет
Есть много интернет-серверов, на которые вы можете поместить свою
страницу за некоторую плату. Интернет-провайдеры (организации, через
которые вы подключаетесь к Интернету) также обычно предоставляют
возможность помещать на свои серверы ваши интернет-страницы, как
платно, так и бесплатно. Но существует и несколько возможностей по
публикации ваших страниц в Интернете совсем бесплатно. Пока вы не
уверены в безусловной привлекательности вашей страницы и в том, что она
уже может приносить выгоду, разумно изучать возможности
интернет-публикаций именно на бесплатных серверах.
На момент написания книги можно свободно говорить, например, о таких
серверах, предоставляющих услуги по бесплатному размещению вашего
веб-сайта: narod.yandex.ru, www.nm.ru, www.by.ru... Разница между ними
вот какая: Narod.ru - самый известный и надёжный, но к вашей странице,
не зависимо от вашего желания, периодически добавляется рекламный
баннер (обычно довольно аккуратный и не очень назойливый), потому что
совсем уж бесплатного ничего в этом мире не бывает; Nm.ru - рекламные
баннеры к страницам добавляет как-то неуверенно, нерегулярно, но
изредка ваши страницы становятся недоступными (он ведь бесплатный, и
никакой стабильности вам не гарантирует); By.ru - вроде бы рекламные
баннеры не добавляет, стабильность нужно проверять.
Вообще-то серверов, предоставляющих бесплатный хостинг
(так называется услуга по размещению вашей информации для публикации в
Интернете), не так уж мало. Периодически появляются новые и отказывают
в предоставлении бесплатных услуг старые. Если вас интересуют все
детали, наберите в какой-нибудь поисковой системе в Интернете слова
«бесплатный хостинг», попросите систему огласить весь список, изучите
результаты и выберите наиболее, с вашей точки зрения, привлекательный.
Здесь же мы пойдём самым очевидным и простым путём.
- Подключитесь к Интернету;
- запустите обозреватель IE (Интернет Эксплорер), ярлык для него обычно есть на Рабочем столе и в Панели быстрого запуска;
- наберите в адресной строке Интернет Эксплорера www.narod.ru и нажмите enter;
- когда Narod загрузится, в окошечке, над которым написано «Займите
это имя для своего сайта», напечатайте (латинскими буквам) имя своего
сайта, например, «metall»; если такое имя уже кем-то занято, Narod
сообщит вам об этом и предложит добавить к имени какие-нибудь цифры,
чтобы получился какой-нибудь «metall2025» - соглашайтесь, не думайте
долго!
- выполните дальнейшие инструкции по регистрации; пароль, который
придумаете для входа на сервер, запишите где-нибудь на бумажке, чтобы
не забыть;
- после успешной регистрации щёлкните по ссылке «Управление файлами
и HTML-редактор» найдите там надпись «Загрузить файлы» и щёлкните по
ней;
- щёлкните по первой кнопке с надписью «Browse», найдите в открывшемся окне папку «Мои документы»;
- выберите свой файл «index.html» (который может выглядеть как
) и нажмите «Enter», затем ещё раз «Enter»; через некоторое время Narod
сообщит вам, что ваш файл «index.html» загружен в корневой каталог (или
корневую папку);
- с этого момента любой человек, имеющий доступ к Интернету, может
набрать в своём интернет-обозревателе ваш адрес
«http://metall2025.narod.ru» и прочесть информацию, которую вы
поместили в файл «index.html»;
- сначала попробуйте сделать это сами - набрать в Интернет
Эксплорере свой адрес «http://metall2025.narod.ru» и посмотреть, что
там, на сервере Narod, у вас получилось: если выскочит надпись о том,
что такая страница не найдена, значит вам не удалось загрузить куда
положено файл «index.html», или не все буквы в названии этого файла
маленькие (например, «Index.Html»), попробуйте открыть свой файл с
помощью Блокнота (правой кнопкой мыши - «Открыть с помощью» -
«Блокнот») и сохранить заново (меню «Файл» - «Сохранить как») с
правильным именем (всё маленькими буквами и в кавычках), а потом заново
загрузите правильный файл на сервер;
- после того, как вы зарегистрировались на сервере Narod, в
последующие разы не надо уже «занимать это имя для своего сайта», а
надо набирать своё «имя» («metall2025») в правом верхнем углу страницы,
в поле «Логин», а под ним - свой пароль, после чего нажимать кнопку
«Войти».
ex01 Файлы примеров: htm0 (htm0)
Если вы несколько раз попытались создать HTML-страницу и поместить
её на интернет-сервер, если вы уверены, что всё при этом делали
правильно, а весь мир всё равно не может обнаружить вашу страницу в
Интернете (и узнать всё то, что вы хотели сообщить миру), значит,
вероятно, мир просто ещё не готов к такому знанию, не созрел для того,
чтобы воспринять ваше сообщение. Подождите некоторое время и повторите
попытку.
Михаил Гутентог, 2006 г. Реклама: Электроштабелер ЭШ-1236Э
|