Всё о HTML

  • Assassin
    Статус: оффлайн
    3
     #
    Что такое правильный HTML



    Недостатка в руководствах по веб-дизайну ныне не наблюдается. «Про это» можно прочитать в книгах, в Интернете и даже на нашем сайте =) Первый пост посвятится не очередному «как создать сайт своими руками» (а это еще встретится по ходу топа). Речь начнется о языке HTML и тем, что с ним связано.





    Вы спросите: «Как? А разве HTML не относится к веб-дизайну?» Конечно, относится. Но начну я не с уроков о создании и вставке в документ таблиц, рисунков, форм, апплетов и прочего. А начну – с HTML вообще и его правильным использованием.

    ЧТО ТАКОЕ HTML?

    Я думаю, что подавляющее большинство веб-дизайнеров знает, что HTML расшифровывается как HyperText Markup Language, то есть язык гипертекстовой разметки, а некоторые – и то, что этот язык – подмножество языка SGML (Standard Generalized Markup Language). Следует также знать, что HTML – это стандарт. Стандарт этот разрабатывается Консорциумом по Повсеместно Протянутой Паутине (World Wide Web Consortium, W3C), начиная с версии 3. Консорциум этот занимается также и прочими стандартами, связанными с WWW, например, CSS. Последняя на сегодняшний день и, судя по всему, окончательная, версия HTML – 4.01, вышедшая в декабре 1999 года. Сейчас консорциум занимается новым языком разметки – XHTML, который постепенно набирает обороты, но ещё далеко не вытесняет традиционный HTML. W3C рекомендует использовать как XHTML, так и HTML 4.01 для создания своих документов.

    HTML – это рекомендация. Как и в случае с любым стандартом, он не всегда выполняется полностью. Например, спецификация предписывает, что элемент OBJECT можно использовать для вставки изображений, в то время как такое использование игнорируется большинством браузеров. Наоборот, элемент MARQUEE нигде не встречается в документе от W3C, и в то же время браузеры обычно рисуют его как бегущую строку.

    Название первого поста – «Правильный HTML». Под правильным я подразумеваю код HTML, который полностью удовлетворяет стандарту, опубликованному W3C. Увы, порой нас безжалостно обманывают. Бывают учебники HTML, грешащие против истины; а порой визуальные HTML-редакторы выдают код, несовместимый со спецификацией. Я не говорю, что следует воздержаться от использования и тех и других (хотя сам, не вдумываясь, листал учебники, да и по сей день пишу код вручную), просто следует проверить готовый код на соответствие стандарту.

    «Да зачем оно вообще нужно, это соответствие? – можете вопросить вы. – Моя страница и так хорошо выглядит в браузере!». Но ведь не все люди в мире пользуются одним и тем же браузером. Если ваш документ не удовлетворяет стандарту, то какой-нибудь новый браузер может просто отказаться показывать его – и будет прав. Соответствие стандарту сделает ваш документ читаемым для мобильных телефонов, текстовых браузеров, роботов поисковых машин, холодильников, унитазов (если они подключены к Интернету, конечно). Да и шанс есть, что традиционные браузеры будут показывать страницу быстрее и к тому же одинаковым образом.

    Впрочем, я заболтался. Давайте теперь посмотрим, как должен выглядеть правильный (или «валидный») HTML-документ. Можно и даже нужно вместо этого скачать и прочитать спецификацию от W3C, но всё-таки это довольно объёмистый томик на английском языке, и не каждый решится его осилить.

    ДОКУМЕНТ

    Каждый документ HTML обязан начинаться с объявления типа документа. Тип документа определяет версию и подмножество HTML, используемые в нём. Спецификация HTML 4.01 обозначает три типа:

    • Strict – «Строгий». Включает только структурные элементы и атрибуты, то есть те, что не определяют графическое представление страницы, например, P, DIV и SPAN. Задача определения представления возлагается на CSS.
    • Translitional – «Переходный». Этот тип, как следует из названия, предназначен для перехода со старых версий HTML. Он позволяет включение всех элементов HTML, включая презентационные, вроде B, FONT и CENTER.
    • Frameset – «Набор фреймов». Этот тип предназначен для документов, содержащих фреймы.

    Объявление типа документа Strict выглядит так: <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «www.w3.org/TR/html4/strict.dtd»>. Похожим образом выглядит и объявления для остальных типов, их можно посмотреть на странице www.w3.org/TR/html40/struct/global.html. Важно, что регистр типа документа следует соблюдать, в отличие от регистра остальной части документа (в XHTML регистр важен везде).

    Остальная часть документа состоит из набора элементов. Элемент состоит из открывающего тэга, содержимого и закрывающего тэга. Руководства по веб-дизайну часто путают понятия «тэг» и «элемент». На самом деле это разные вещи. Элемент может не включать содержимое (пустой элемент, например BR) или даже открывающий тэг! (Например, элемент HEAD.)

    Корневым элементом является HTML. Все прочие обязаны быть вложены в него.

    Открывающий тэг в общем случае выглядит следующим образом: <ИМЯТЭГА атрибут1= «значение» атрибут2= «значение»>, а закрывающего </ИМЯТЭГА>.

    Атрибуты – это дополнительная информация об элементе. Они бывают как обязательными, так и необязательными. Существуют также булевские атрибуты, которые могут принимать лишь значения Истина и Ложь. Если атрибут присутствует в открывающем тэге (напр. <SCRIPT defer>), то его значение Истина, если нет, то Ложь. Есть также полная форма записи Истины - <SCRIPT defer= «defer»> - но многие браузеры её игнорируют.

    Вокруг значения атрибута можно ставить двойные кавычки, апострофы или вообще ничего – но только в том случае, если оно содержит лишь латинские буквы, цифры, дефисы, точки, двоеточия и подчёркивания. Естественно, значение атрибута не может содержать знак, которым оно обрамлено, - для этого существуют ссылки на символы.

    Ссылки на символы – это механизм включения в документах редких символов или символов, имеющих особый смысл в HTML. Они делятся на два типа:

    1. Числовые – наподобие 水 (水;) или &212;. В них указан порядковый номер символа в шестнадцатеричной и десятичной системах счисления соответственно.
    2. Символьные – вроде Æ (&AElig;). Используют текстовое описание символа. Полный их список есть в спецификации.

    Четыре ссылки должен помнить каждый веб-дизайнер, поскольку они позволяют использовать символы, которые заняты в HTML. Это угловые скобки < и > (&lt; и &gt;), двойная кавычка " (&quot;), и, наконец, амперсанд & (&amp;).

    Последнее, о чём осталось сказать, - это комментарии. В комментарии, обрамлённом знаками <! – и –>, можно писать что угодно. Браузер просто пропустит его содержимое.

    УНИВЕРСАЛЬНЫЙ СПРАВОЧНИК

    Это и были общие правила HTML. Я думаю, большинство из них вам уже знакомы. Тем более что проблемы с ними встречаются довольно редко – чаще всего это символы <> & » в голом виде или пропущенные DOCTYPE.

    Основная масса ошибок HTML – это использование несуществующих и пропуск обязательных атрибутов/элементов/тэгов. Взять хотя бы общеизвестный элемент P (вплоть до сих строк он был мною использован десятки раз). Одни руководства говорят, что закрывающий тэг необязателен, а где-то я даже читал, что «у всех тэгов есть конец, кроме тэга <P>». Не везде сказано, например, что атрибут alt для элемента IMG и элемент TITLE обязательны. В конце концов ни один учебник не будет пересказывать спецификацию, поэтому, для того чтобы узнать окончательную правду, следует заглянуть туда.

    Правда, не совсем удобно каждый раз заглядывать в документ от W3C, чтобы выяснить какую-то мелкую деталь. Для этого есть DTD (Document Type Definition, Определение типа документа). DTD – это небольшой файл, в котором особым языком изложены все правила, касающиеся конкретных элементов и атрибутов. Язык этот я полностью изложить не могу, так как это займёт слишком много места. Вы можете прочитать про него… да, правильно, в спецификации.

    ПРОВЕРКА И ЧИСТКА

    Предположим, вы прониклись моей идеей и решили сделать свой сайт полностью валидным. Но проверять страницы вручную – не самая благодарная работа, тем более что вы наверняка что-нибудь пропустите. К счастью, нужды в этом нет. Консорциум предлагает бесплатный механизм проверки ваших страниц – W3C Validator, расположенный по адресу validator.w3.org/.

    В него можно загрузить вашу страницу (со своего компьютера или указав адрес в Интернете), и, если HTML-код соответствует стандарту, то вы получите в качестве приза картинку

    Valid XHTML 1.0 Strict

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

    Если ошибок много, то исправлять их все будет довольно муторно. Вэтом случае помочь может программа под названием Tidy. Это консольное приложение, которое приводит в порядок неправильно сформированные HTML/XHTML/XML документы.

    Чтобы узнать все параметры Tidy, запустите её с ключом -?. Впрочем, навряд ли они вам все понадобятся. Типичный запуск Tidy будет таким: tidy –o –raw new.html old.html. Параметр –raw нужен затем, чтобы Tidy не превратила русские буквы в ссылки на символы (к тому же неправильные). Если вы используете в качестве кодировки не Windows-1251, а UTF-8, то вместо –raw укажите –utf8. Не забудьте посмотреть сообщения программы и вторично прогнать страницу через валидатор – возможно, некоторые ошибки придётся-таки поправить вручную. А после того как валидатор признает вашу правоту, можете смело вешать картинку на свой сайт – пусть и другие знают, что вы действительно умеете писать правильный HTML.

  • Assassin
    Статус: оффлайн
    1
     #
    Что такое JavaScript?



    Пользователи, решившие создать свой собственный сайт в Интернете, обязательно сталкиваются с нелегким выбором средств разработки. Некоторые новички под давлением рекламных лозунгов и собственной лени ограничиваются знакомством с визуальными редакторами или «продвинутыми» текстовыми процессорами, не подозревая, что их использование порождает множество ненужных элементов в коде веб-страницы. Другая группа пользователей, разочаровавшись в возможностях HTML, начинают изучение языков веб-программирования «уровня PHP». Но ведь вполне профессиональный сайт можно создать, используя более простое и доступное средство разработки – JavaScript.










    JavaScript – это язык программирования, разработанный фирмой Netscape для расширения возможностей HTML по оформлению страниц. Некоторые веб-дизайнеры относятся к JavaScript с долей презрения, предпочитая «серверные» языки, однако сам факт существования профессиональных ресурсов, посвящённых JavaScript (чаще всего и написанных на этом языке), многое говорит о богатых возможностях JavaScript в руках профессионального веб-мастера. Однако и для новичка эта технология будет полезна: JavaScript – довольно простой язык программирования, для его изучения не нужно какой-либо предварительной подготовки – достаточно только начальные знания HTML. Тем не менее эти знания необходимы, т.к. код скрипта находится непосредственно в тексте HTML-страницы, и эти знания вы обретёте, не выходя с этого топа.

    Внедрить текст программы на JavaScript в HTML-файл можно двумя способами – либо напечатать соответствующий код в HTML-файле, либо дать там команду на подключение файла с кодом скрипта (в случае с JavaScript расширение этого файла - .js). И для первого, и для второго случаев используется тэг <SCRIPT></SCRIPT>, в атрибуте LANGUAGE которого указывается язык скрипта. Внутри тэговой пары <SCRIPT></SCRIPT> печатается текст скрипта. Если код программы находится в отдельном файле, то для его подключения к HTML-файлу используется атрибут SRC тэга <SCRIPT>. Для примера в листинге 1 приведён код простейшего скрипта, а в листинге 2 – текст HTML-файла, в котором оформлена инструкция подключения скриптового файла.

    ЛИСТИНГ 1.
    ПРОСТЕЙШИЙ СКРИПТ

    document.write('Это JavaScript<BR>');

    document.write("Это тоже JavaScript<BR>");

    ЛИСТИНГ 2.
    HTML-ФАЙЛ

    <HTML><BODY>

    Это документ HTML<BR>

    <SCRIPT LANGUAGE="JavaScript" SRC="demo.js"></SCRIPT>

    Это опять документ HTML<BR>

    </BODY></HTML>

    Запустите HTML-файл. Если у вас установлена ОС Windows XP со вторым пакетом обновления, то браузер Internet Explorer (если вы пользуетесь им), скорее всего, в целях безопасности блокирует код скрипта. Поскольку вирусов в нашей «игрушечной» программе нет, смело отключайте блокиратор – для этого щёлкните левой кнопкой мыши на панели информации (жёлтая горизонтальная полоса вверху экрана) и выберите пункт меню «Разрешить заблокированное содержимое…». Если вы правильно набрали код скрипта, то окно браузера должно выглядеть так:

    pix.PlayGround.ru

    Если вы где-то допустили ошибку, то вы можете узнать о её причине, дважды щёлкнув (нет, не клювом) по эмблеме браузера Internet Explorer в строке состояния. Вообще сообщения об ошибках у разных трансляторов (браузеров) разные. Некоторые (в основном находящиеся в разработке) браузеры в большинстве случаев ошибок делают вид, что всё нормально, либо «виснут», держа пользователя на голодном пайке, что весьма обидно. Но это ещё ничего, ведь встречаются ещё в быту старые браузеры, не поддерживающие JavaScript! Отсюда – вывод: прибегайте к JavaScript лишь в тех случаях, когда его помощь действительно нужна.

    Теперь что касается команд скриптового файла (содержание HTML-файла я пока разбирать не буду). Вы, наверное, уже догадались, что команда document.write(строка) печатает в окне браузера строку. Эту команду я повторил два раза только затем, чтобы показать возможность заключения строк как в одинарные, так и в двойные кавычки.

    Скрипт, код которого находится внутри тэга <BODY>, выполняется сразу же после загрузки документа, однако JavaScript – это прежде всего средство оперативного реагирования (т.е. реагирования без перезагрузки страницы) на действия пользователя, поэтому в основе этой технологии лежит понятие события. Щелчок по кнопке, изменение состояния флажка на форме и т.д. – всё это события. Чтобы соответствующим образом прореагировать на событие, необходимо в тэге элемента формы указать название события., поставить знак равенства и в кавычках напечатать код, который будет выполняться в том случае, если событие произойдёт. Пример: <INPUT TYPE=button onClick="alert('Добрый день!')">. Инструкция alert(“Добрый день!”), как можно легко догадаться, реализовав данный пример, создаёт выпадающее окно-сообщение с текстом «Добрый день!». Данная инструкция выполняется, если произошло событие onClick (щелчок мышью). Вообще в JavaScript есть множество разных событий, описания которых можно найти в специальных справочниках, «разбросанных» по Интернету.

    Раздобыв такой справочник и попытавшись написать что-то своё, вы очень быстро заметите, что писать код скрипта в обработчике события не всегда удобно, особенно если он достаточно объёмен. В этом случае вы можете легко запутаться в различных обработчиках при написании скриптов, а внесение изменений может превратиться в настоящее мучение как для вас, так и для посетителя ресурса. Кроме того, может возникнуть необходимость полного или частичного дублирования кода, который загружается на компьютер пользователя, и, следовательно, отнимает у него время. А если алгоритм, реализуемый скриптом, достаточно сложен, писать программу становится вообще невозможно, т.к. уже после нескольких десятков написанных строк программист начинает путаться в многочисленных элементах скрипта. Именно эта проблема вдохновила создателей первых языков программирования ввести в свои детища конструкцию подпрограммы. В некоторых языках (например, в Паскале) различают два вида подпрограмм – процедуры и функции. Процедура – это последовательность команд.

    В виде процедуры можно реализовать фрагмент программы, производящий чтение из полей ввода или присваивающий переменным начальные значения. Функция – это подпрограмма, возвращающая в основную программу некоторое значение. В виде функций можно встретить подпрограммы, вычисляющие значение математических функций. Поскольку с именем функции связано возвращаемое ею значение, это имя можно использовать в выражениях наравне с другими операндами. И процедуры, и функции могут иметь параметры, которые передаются подпрограмме при её вызове и могут быть использованы во время работы подпрограммы. Например, для функции, возводящей число в степень, параметры – это само число, и степень, в которую нужно это число возвести. В языках, базирующихся на C++ (к ним относится и JavaScript), используется только один вид подпрограмм – функции, которые могут и не возвращать значения. Чтобы инструкции подпрограммы были выполнены, в основной программе нужно оформить вызов подпрограммы. В качестве примера использования функций в листинге 3 приведён фрагмент кода HTML-файла. В тэге <BODY> (он остался «за кадром» в листинге 3) я задал две кнопки, присвоив их обработчикам событий onClick и onMouseOver (при наведении курсора мыши) имена соответствующих функций, вот эти две команды: <INPUT TYPE=button VALUE=”onClick” onClick=”alert(Calculator_1(2, 3))”> и <INPUT TYPE=button VALUE=”onMouseOver” onMouseOver=”Calculator_2()>.

    ЛИСТИНГ 3.
    ИСПОЛЬЗОВАНИЕ ФУНКЦИЙ

    <HEAD>

    <SCRIPT LANGUAGE=”JavaScript”>

    function Calculator_1(x1, x2){

    var rez;

    rez=x1+x2;

    return rez; }

    function Calculator_2(){

    alert(“Эта функция не возвращает значения!”);

    return 0; }

    </SCRIPT></HEAD>

    Функция состоит из заголовка и тела. Заголовок, в свою очередь, включает в себя ключевое слово function, имя функции и список параметров (такие параметры называются формальными – фактические параметры передаются функции в момент её вызова). Тело функции заключается в фигурные скобки { и }, которые еще называют логическим блоком.

    В функции Calculator_1 я присвоил переменной rez значение суммы двух чисел, которые передаются функции при её вызове. Переменная – это область памяти, хранящая некоторое значение и имеющая имя, по которому можно получить доступ к этому значению. Перед использованием переменной её надо объявить. Объявление переменной в JavaScript происходит также, как и в Паскале, с помощью ключевого слова var, но, в отличие от бессмертного творения Вирта, JavaScript – безтиповый язык, т.е. тип переменной явно не указывается. Чтобы присвоить переменной значение, изменить его или перезаписать, используется оператор присваивания. В JavaScript – это знак равенства (=). Последняя инструкция тела функции должна иметь вид return <что возвращаем>. В нашем случае возвращаемое значение – это переменная rez. В функции Calculator_2 возвращаемое значение – ноль, т.е. эта функция играет роль процедуры.

    Хотя программирование на JavaScript в большинстве случаев мало похоже на «настоящий» кодинг, всё же основные конструкции «классического» программирования присутствуют и здесь. Сейчас я хотел бы поговорить о двух операторах управления «рабочим ходом» программы – об операторах ветвления и цикла. Первый из них позволяет в зависимости от некоторых условий выполнять определённые действия. В общем виде инструкция if (так называется оператор ветвления в JavaScript и большинстве других языков) записывается так: if(условие) {действие}else{другое действие}. ЕСЛИ условие истинно, то выполняется ДЕЙСТВИЕ, если условие ложно – выполняется ДРУГОЕ УСЛОВИЕ, или не выполняется ничего, если слово else опущено. Код из листинга 4 выводит сообщение «Всё OK!», если текст в поле ввода формы – это число от 0 до 9.

    ЛИСТИНГ 4.
    ВЕТВЛЕНИЕ

    <HTML><HEAD>

    <SCRIPT LANGUAGE=”JavaScript”>

    function Demo(){

    var bool=false;

    if (document.Form1.edit.value >= 0 && document.Form1.edit.value <= 9){bool=true}

    return bool; }

    </SCRIPT>

    </HEAD>

    <BODY>

    <FORM NAME=”Form1”>

    <INPUT TYPE=text NAME=”edit”>

    <INPUT TYPE=button VALUE=”Demo” NAME=”button” onClick=”if(Demo()==true){alert(“Всё OK”)}”>

    </FORM></BODY></HTML>

    В функции Demo я создал булеву переменную bool, которая может принимать только два значения – true (истина) и false (ложь). Таким образом, я проверил, содержит ли поле ввода допустимый текст. В обработчике события onClick кнопки по возвращаемому значению функции (т.е. по значению переменной bool) определялись дальнейшие действия – нужно ли выводить сообщение. Обратите внимание – чтобы программист и интерпретатор не путали оператор сравнения, последний записывается двойным знаком равенства.

    Теперь о циклах. Циклы используются для многократного выполнения одних и тех же инструкций. В JavaScript наиболее активно используются два их вида – for и while. Начну с последнего, т.к. он наиболее универсален. Вот его форма записи while (условие) {инструкции}. ПОКА условие истинно, ИНСТРУКЦИИ выполняются. Хочу только заметить, что если в теле цикла нет команд, изменяющих значение условия, цикл будет «прокручиваться» бесконечно. Другой тип цикла – это for. Записывается он так: for (i=0, условие, i++) {инструкции}. Где i=0 – оператор присваивания переменной-счетчику начального значения, условие – условие, при котором цикл выполняется, i++ - инструкция увеличения счетчика на единицу.

    РАБОТАЕМ С ОБЪЕКТАМИ

    Наверное, дочитав до этого момента, вы хотя бы раз задавались вопросом – как же реализовать эти богатые возможности JavaScript по оформлению страницы? Теперь, разобравшись с «второстепенными» понятиями JavaScript, мы можем ответить на этот вопрос. Управление документом осуществляется с помощью свойств и методов объектов. Объект – это некий элемент на страницу. Картинка, кнопка, ссылка – всё это объекты. Чтобы получить доступ к объекту, нужно указать всех его «родителей», т.е. необходимо знать иерархию объектов JavaScript. Иерархию объектов рассмотрим на примере компонентов, представленных в листинге 5.

    ЛИСТИНГ 5.
    ТЕКСТОВЫЕ КОМПОНЕНТЫ

    <HTML><BODY>

    <FORM name=”myform1”>

    <INPUT TYPE=button NAME=”button1” VALUE=”Щёлкни”>

    <INPUT TYPE=text NAME=”edit1”></FORM>

    <IMG SRC=”demo.gif”>

    <FORM NAME=”myform2”>

    <INPUT TYPE=button NAME=”button1” value=”Щёлкни”></FORM>

    <A HREF=”temp”>Ссылка</A>

    </BODY></HTML>

    В этом примере мы имеем две формы, одну картинку и одну ссылку. В нижеприведённой таблице показана иерархия объектов для данного конкретного случая.


    document
    forms
    links
    images
    forms[0]
    forms[1]
    links[0]
    images[0]
    elements[0]
    elements[1]
    elements[0]

    Как видите, все объекты аккуратно распределены по группам. Самый старший в иерархии JavaScript объект – это объект document (документ, загруженный в окно браузера). Написав строку document.write в листинге 1, мы назвали метод (т.е. подпрограмму) write объекта document, которая и выводит в рабочую область браузера строку. Само же окно браузера – это объект типа window, который позволяет изменять внешний вид браузера. Теперь поговорим о группах объектов, представленных в таблице. Эти группы представляют собой массивы элементов, получить доступ к которым можно по индексу, указанному в квадратных скобках (нумерация начинается с нуля). Например, чтобы узнать, какой текст находится в полевода первой формы, нужно написать вот такую строку document. forms[0]. elements[1]. value. Поскольку JavaScript очень тесно интегрирован с HTML, некоторые свойства объектов имеют те же названия и те же функции, что и соответствующие атрибуты в тэгах HTML. Так, например, в вышеприведённом примере я обратился к свойству value объекта типа text формы, созданного тэгом <INPUT>, атрибут value которого позволяет задать текст, по умолчанию находящейся в поле ввода-редактирования.

    При небольшом количестве элементов на странице доступ к объекту по индексу приемлем, однако довольно часто встречаются случаи, когда форма содержит более десятка элементов. Как вам, например, такая запись document.forms[1].elements[15]? Для решения это проблемы удобно воспользоваться атрибутом NAME тэга. С учётом сказанного, вышеприведённую строку document.forms[0].elements[1].value можно написать так: document.myform1.edit.value.

    Понятия объекта, метода и свойства целиком совпадают с аналогичными понятиями в классическом ООП. Есть, правда, несколько особенностей. Первая особенность заключается в том, что практически любая переменная «по умолчанию» является объектом со своим набором свойств и методов. Например, чтобы узнать длину строки, нужно вызвать метод length строковой переменной. Метод вызывается так: сначала указывается объект, ставится точка, потом пишется название метода. Вторая «странность» JavaScript – это возможность «расширения объекта», добавления к нему новых полей (т.е. свойств и методов) путём простого присвоения им начальных значений! Эта особенность JavaScript продемонстрирована в листинге 6.

    ЛИСТИНГ 6.
    «СТРАННОСТИ» JAVASCRIPT

    <SCRIPT LANGUAGE=”JavaScript”>

    document.metod=Demo();

    document.metod;

    document.info=’Это документ’;

    alert(document.info);

    </SCRIPT>

    В этом примере я создал метод metod объекта типа document, присвоив ему функцию (она осталась за кадром в листинге), затем я этот метод вызвал, т.е. вызвал эту функцию. Далее я придумал свойство info и присвоил ему текстовое значение, которое потом и вывел функцией alert.

    Помимо объектов document и window есть ещё один очень важный в JavaScript объект – location, который содержит URL загруженного документа. Чаще всего к его помощи прибегают, когда нужно создать кнопку-гиперссылку:

    <INPUT TYPE=button onClick=”location.href=’xxx’”>

    Ну вот вроде бы и всё. Информации, изложенной в этом посте, достаточно для того, чтобы смело
    упомянуть о JavaScript в разговоре со знакомым, однако создать действительно функциональный и удобный сайт с помощью этой технологии можно, только овладев основными приёмами программирования на JavaScript. Чисто техническую составляющую «мастер класса по JavaScript» - знание основных объектов и их методов – можно получить, изучив специальные справочники, однако тоже необходимо уметь «чувствовать» документ, «мыслить» на уровне объектов, видеть взаимосвязи между ними. Конечно, для получения этих навыков нужна постоянная практика, но необходимо также и грамотное владение теорией.

  • Assassin
    Статус: оффлайн
    2
     #
    30 советов начинающему веб-мастеру


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




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

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

    2. Избегайте использования визуальных HTML-редакторов: они имеют множество недостатков, в частности, раздувают код до огромных размеров. Стремитесь к простоте кода. Чем проще вы сделаете, тем меньше будет ошибок и тем легче вам потом будет разбираться в собственном коде.

    3. Используйте тег DOCTYPE с данными об используемой версии языка HTML в начале каждой веб-страницы - это поможет поисковым работам при регистрации сайта в каталоге.

    4. Оформляйте все страницы своего сайта в едином стиле и цветовой гамме. Тогда посетители запомнят его индивидуальный дизайн.

    5. Главная страничка должна содержать максимум важной информации, но не отпугивать посетителя большим объёмом текста и при этом быстро загружаться. Логотип веб-сайта - это, как правило, ссылка на главную страницу сайта.

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

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

    8. Для вёрстки веб-страницы чаще всего используют таблицы с невидимыми границами. Не помещайте всю информацию на странице в одну большую таблицу. Лучше разбейте её на несколько маленьких - тогда сайт будет загружаться поэтапно.

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

    10. Оптимизируйте размеры и конфигурацию объектов на вашем сайте под наиболее популярные разрешения - 800x600 и 1024x768. Проверяйте, как ваш сайт выглядит при разных разрешениях. Часто бывает, что структура веб-страницы ломается при смене размеров экрана.

    11. Никогда не ориентируйте свою страничку на определённый браузер. Проверяйте, правильно ли отображается сайт в разных обозревателях.

    12. Подбирайте цвет и размер шрифта, а также цвет фона так, чтобы было возможно прочитать текст без напряжения. Размещай большие текста только на светлом фоне. Маленькие можно разместить и на тёмном.

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

    14. Избегайте использования нестандартных шрифтов. Они могут отсутствовать на компьютере пользователя - тогда пользователь не увидит текста. Шрифты с засечками (например Times New Roman) читаются легче, чем так называемые рублёные шрифты (Verdana, Tahoma).

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

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

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

    18. Сайт должен быть полностью функционален, даже если пользователь отключил загрузку графики в настройках браузера. Создавайте текствовую альтернативу графическим объектам. Если вы будете использовать фоновое изображение, не забудьте указать и похожий на него цвет фона на случай отключения графики.

    19. Избегайте использования ярких фоновых картинок, если только не хотите добиться особого визуального эффекта. Предпочтительнее применять однотонный цвет фона.

    20. Храните фотографии в формате JPEG, а графики, схемы, пиктограммы и логотипы, нарисованные по точкам, - в GIF. Используйте на веб-страницах собственную графику. Избыток стандартных пиктограмм определённо не прибавит вам авторитета.

    21. Уделяйте много внимания мелким деталям на вашем сайте - маркерам, пиктограммам и т.п. Именно из мелочей складывается хороший дизайн. Создавайте объём и разноплавность - с помощью теней, эффекта градации и т.п.

    22. Указывайте в теге IMG ширину и высоту картинки - тогда при выключенной графике область изображения не будет расползаться. Следите за размерами иллюстраций на сайте. Вряд ли посетителям понравиться, что графика загружается слишком долго.

    23. Не переполняйте сайт анимированными картинками, Flash-анимациями и Java-апплетами. Избыток динамических элементов мешает восприятию информации и даже раздражает.

    24. Не используйте на сайте фоновых звуков, не несущих никакой смысловой нагрузки. Веб - это среда текстовой и визуальной информации.

    25. Для статей и объёмных текстов создавайте версии для печати - с минимумом (или отсутствием) графики и максимумом информации.

    26. Не применяйте надписи типа "страница в разработке" - неработающую ссылку лучше просто не показывать.

    27. Размещайте на своём сайте ссылки на другие подобные ресурсы или на страницы, затрагивающие подобные темы.

    28. Не размещайте слишком много рекламных баннеров на одной странице. Избегайте применения автоматически загружаемых окон pop-up. Окно должно открываться, если только этого захотел посетитель.

    29. Чем чаще вы будете обновлять сайт, тем больше у вас будет посетителей. Периодически меняйте тексты приветствия, описание разделов и т.д. Ставьте пометки о дате последнего обновления - это производит хорошее впечатление, особенно если сайт действительно часто обновляется.

    30. И, наконец, я думаю последний совет: прислушивайтесь к критике и пожеланиям посетителей вашего сайта. Обязательно отвечайте на их письма - это прибавит вам авторитета.

    P.S. Советы основаны на личном опыте, рекомендациях других веб-мастеров, отражают субъективное мнение и не могут претендовать на абсолютную верность.