Встряхнись с HTML — Basix

Вскоре мы опубликуем наши первые учебники по HTML5 здесь, в Activetuts +, но перед тем, как мы начнем, вот быстрый и простой учебник, чтобы освоить основы HTML — даже если вы никогда не делали этого раньше.

---

Разница между HTML и .html

Создайте новый файл в любом месте на вашем компьютере и назовите его page.html . В Windows самый простой способ сделать это — щелкнуть правой кнопкой мыши пустое место в папке, нажать « Создать»> «Текстовый файл» , а затем обязательно удалить «.txt» в конце файла. Windows, вероятно, скажет вам, что опасно менять расширение файла следующим образом; просто нажмите ОК. Кроме того, вы можете открыть текстовый редактор (например, «Блокнот» или «TextEdit»), нажать « Файл»> «Создать» и ввести page.html в качестве имени файла.

Как только вы создали файл, откройте его в текстовом редакторе; Есть много модных редакторов, которые предлагают все виды HTML-дружественных функций, но для этого урока вышеупомянутый Блокнот или TextEdit подойдет. (Если вы просто дважды щелкните файл, он, вероятно, откроется в вашем браузере, поэтому вам сначала нужно будет открыть текстовый редактор и использовать « Файл»> «Открыть», чтобы выбрать файл, либо (в Windows) щелкнуть правой кнопкой мыши выберите « Открыть с помощью»> «Блокнот» .) Убедитесь, что вы используете простой текстовый редактор, а не текстовый процессор.

Введите это в свой файл:

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

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

Шучу, конечно.

Браузеры не экстрасенсы

Вот эксперимент: возьмите файл изображения, скопируйте его (чтобы не повредить исходное изображение) и переименуйте копию в нечто .html . Затем попробуйте открыть это в своем браузере. Нажмите здесь, чтобы открыть скриншот выше , после того, как он был переименован из .png в .html в вашем браузере.

Хлоп. Это много болтовни. Но если вы откроете оригинальный файл .png в вашем браузере , он загрузится просто отлично. Ваш браузер, очевидно, может справиться с этими файлами, так что же дает?

Когда вы открываете файл .html в браузере, он говорит: «Эй, я знаю, как обращаться с файлами .html!» — он предполагает, что содержимое файла написано с использованием языка разметки гипертекста (HTML, если коротко, как вы уже догадались), и пытается использовать все, что он знает об этом языке разметки, для отображения страницы. Файлы изображений не пишутся с использованием HTML, поэтому, когда он пытается отобразить что-то, что имеет какой-либо смысл, используя свои правила HTML, он терпит неудачу.

Существуют и другие расширения файлов, которые браузеры автоматически связывают с HTML — например, .htm — и браузерам также можно предположить, что другие типы файлов будут содержать HTML-подобные файлы, заканчивающиеся на .php или .aspx.

Таким образом, не каждый файл, написанный на HTML, будет заканчиваться на .html. Но значит Is this HTML? что Is this HTML? идеальный HTML сам по себе? Ну … не совсем.

Люди делают ошибки

Хотя фактическое содержимое файла изображения обычно создается программой, такой как Paint или Photoshop, на основе ввода пользователя, содержимое файла .html может быть введено пользователем непосредственно в файл. А пользователи, будучи людьми, делают ошибки.

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

Is this HTML? Вы будете шокированы, узнав, что это не идеальный HTML, поскольку он не содержит всю информацию, которую браузер хотел бы видеть, но все равно будет отображаться.

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

---

Что делает «правильную» HTML-страницу?

Хорошо, так что одна строчка английского не учитывается как обычный HTML, это не удивительно. Что же нам добавить в наш простой файл?

Теги

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

Например, на нашей текущей странице:

… что такое «Это HTML?» Это текст, конечно. В частности, мы могли бы сказать, что это абзац текста. И чтобы показать это, мы можем пометить абзац, заключив его в теги <p> (p для абзаца — и нет, прежде чем вы спросите, тега «предложение» нет):

Каждый тег начинается с открывающего шеврона < и заканчивается закрывающим шевроном > с именем тега между шевронами. Обратите внимание, что второй тег имеет косую черту / непосредственно перед именем тега; это указывает на то, что это закрывающий тег, и, следовательно, отмечает конец абзаца, начинающийся с открывающего <p> . Весь абзац (включая теги), <p>Is this HTML?</p> можно назвать p-блоком .

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

Теперь у нас есть теги внутри тегов: текст, помеченный курсивом, и текст, выделенный жирным шрифтом, находятся внутри блока абзаца; это называется иерархической структурой. Это как дерево, где p — ствол, а b i — ветки. Я надеюсь, вы видите, что это не имеет смысла:

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

В любом случае, сохраните это и откройте в своем браузере:

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

---

Это HTML ?

---

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

Хорошо, теперь сравните эти три фрагмента:

Как вы думаете, они будут отображаться каждый?

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

Это не правда

Все три случая будут отображаться одинаково, вот так .

Почему? Потому что HTML не заботится о возврате каретки (новые строки). У него есть правило, которое говорит, что по умолчанию «блоки абзаца начинаются с новой строки». Даже это будет отображаться так же:

Пока мы на это, так и будет:

HTML заботится о пробелах, но только по одному за раз. Если есть два или более подряд, они сокращаются до одного.

Почему? Ну, это действительно часть большой темы, которая объясняет зуд вашего друга-разработчика:

Содержание, а не презентация

Всякий раз, когда сообщение на любом сайте Tuts + помечается как «Basix», наше программное обеспечение WordPress автоматически добавляет крошечный речевой пузырь с буквой «b» внутри поверх изображения в верхней части сообщения. Точно так же мой Twitter-клиент настроен так, что все твиты, которые были помечены как «#bieberfever», отображаются жирным красным жирным шрифтом, чтобы я не пропустил их.

Но ни Basix, ни #bieberfever ничего не подразумевают в представлении того, к чему они привязаны; Basix говорит, что «это руководство написано для начинающих», а #bieberfever говорит, что «это твит о Джастине Бибере». Каждый из них подразумевает что-то о содержании . Их презентации меняются из-за внешних правил, которые определяют, как должны отображаться определенные типы контента.

HTML следует тем же идеалам, поэтому теги b и i смотрят свысока. Они существуют только потому, что когда HTML был изобретен (около 18 лет назад), создатели еще не определились с таким образом мышления «отдельный контент от презентации», поэтому браузеры (опять же, из-за их снисходительности) продолжали отображать полужирные и курсивные теги поскольку.

Тем не менее, это не означает, что вы не можете использовать курсив или полужирный текст в ваших файлах HTML! Нет, вам просто нужно использовать разные теги, которые идентифицируют контент, а не презентацию. Понимаете, когда вы добавляете курсив в раздел текста, вы пытаетесь выделить содержимое — поэтому вместо использования тега i следует использовать тег em . И когда вы делаете текст жирным шрифтом, вы пытаетесь strengthen его на странице — поэтому вы должны использовать strong тег.

Ваш HTML должен выглядеть следующим образом:

По умолчанию ваш браузер отображает это точно так же, как и при использовании старых тегов b и i . Тогда вы можете спросить, почему мы потрудились изменить его — ответ лежит во фразе «по умолчанию».

Отдельные веб-страницы — даже отдельные абзацы — могут указывать браузеру по-разному отображать теги em и strong : предположим, что вы решили, что пунктирное подчеркивание — лучший способ усилить текст, а маленькие заглавные буквы — лучший способ показать акцент. Вы можете перенастроить em чтобы они выполняли одно, а другое — на своем сайте, и внешний вид всего текста изменится, причем вам вообще не придется менять текстовое содержимое. Но было бы бессмысленно, чтобы тег b -for-bold отображал пунктирное подчеркивание, не так ли?

Есть несколько других тегов, таких как b и i , которые больше не используются (считается «устаревшими»); Вы можете узнать больше о любом конкретном теге на W3Schools .

Позже я объясню немного больше об изменении внешнего вида веб-страниц. Я не могу объяснить все, так как это огромная тема, с сайтом Tuts + для себя .

Обязательные теги

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

html тег говорит: «Эй, браузер, это HTML-документ!» На что браузер предположительно ответил бы: «Да, спасибо, я догадался!» если бы это был саркастичный человек, а не программный продукт. Весь документ должен идти внутри тега html ; Чтобы вернуться к метафоре дерева, html всегда должен быть стволом.

body содержит фактическое содержание страницы. «В отличие от чего?» В отличие от …

… тег head , который содержит информацию о странице, например …

… title . Если вы посмотрите на строку заголовка вашего браузера с загруженной старой страницей HTML , она просто скажет что-то вроде «page.html» (или, возможно, «Untitled», или имя браузера). Если вы используете приведенный выше код , он скажет: «Это HTML-страница». Обратите внимание, что «Это HTML-страница» не появляется нигде в реальном содержании страницы, хотя: это иллюстрирует разницу между head и body .

Этот HTML становится немного сложнее для чтения, поэтому вы можете предпочесть использовать клавишу Tab для отступа строк:

Подобные отступы также помогают проиллюстрировать эту древовидную структуру. Если бы вы случайно скопировали и вставили тег на неправильном уровне, это было бы действительно очевидно, например так:

Этот второй абзац явно неуместен.

Doctype

Я несколько раз упоминал, что браузеры очень просты, когда пытаются отобразить неработающий (или нестандартный) HTML. Это благословение и проклятие.

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

Это означает, что люди, которые делают браузеры, могут предлагать всевозможные новые теги и функции, которые не являются частью стандартного HTML, но которые отображаются в их браузере, что отлично подходит для использования возможностей того, что можно сделать с помощью HTML. вперед, за пределами официальных стандартов — но не все браузеры будут поддерживать один и тот же набор. (Например, несколько лет назад Netscape Navigator позволял создавать мигающий текст с помощью <blink> , а Internet Explorer позволял создавать текст, прокручиваемый по экрану с помощью <marquee> ; ни один тег не был поддержан другой браузер, и оба эффекта были очень раздражающими.)

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

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

Чтобы попытаться обойти это, у нас есть типы документов . Например, поместите это в верхней части вашей страницы (даже перед тегом html ):

… и браузер отобразит страницу в «режиме причуд», что означает «использование нестандартных методов конца 90-х». Замените это на это:

… и он будет отображаться в «режиме стандартов», что означает «использование официальных стандартов HTML». За исключением некоторых старых браузеров, которые все еще используются, например Internet Explorer 6 и 7, они еще не полностью соответствуют всем стандартам. И каждый браузер имеет свои дополнительные функции.

Типы документов — беспорядок — их очень много, но, к счастью, нам не нужно беспокоиться о них здесь, в Activetuts +, потому что мы фокусируемся исключительно на HTML5. И HTML5 имеет только один тип документа:

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

Итак, теперь вам нужно отредактировать HTML-страницу, чтобы добавить тип документа:

Это странный тег, потому что он на самом деле ничего не заключает (нет </!DOCTYPE html> ), в нем есть пробел, и он частично в заглавных буквах. Это потому, что это вообще не тег, а просто шевроны. Не беспокойся об этом.

Атрибуты

Хорошо, мы использовали этот язык для разметки некоторого текста, но что, черт возьми, делает этот текст таким «гипер», H HTML?

Гипертекст определяется как текст, отображаемый на каком-либо электронном устройстве с гиперссылками на другие фрагменты текста. (Этот термин был придуман в 60-х годах, что объясняет, почему он звучит так банально.) И вы знаете, что такое гиперссылки: фрагменты текста, которые ссылаются на другие страницы, когда вы нажимаете на них, вот так .

Мы создаем гиперссылки, используя тег — для привязки , потому что вы используете его для привязки URL-адреса к некоторому тексту. Нет, я не знаю, почему они не использовали h или l .

Но одного этого недостаточно

Я имею в виду, как это могло? Там нет URL там.

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

Мы добавили href (гипертекстовая ссылка) в тег, который позволит ему содержать URL (хотя мы еще не указали URL). Обратите внимание, что это все еще тег, а не тег a href , и что закрывающий тег по-прежнему </a> , а не </a href> ; Вот почему имена тегов всегда представляют собой одно слово без пробелов.

Чтобы установить значение href для определенного URL, мы используем знак равенства и заключаем URL в кавычки:

Попробуйте это . Нажав на ссылку, вы попадете на главную страницу Activetuts +.

Атрибуты делают HTML намного более мощным. Помещение тега p вокруг некоторого текста просто говорит: «Это абзац» — он прикрепляет один фрагмент информации к тексту — но с атрибутами мы можем сказать намного больше; здесь мы сказали, «слово« это »является якорем, и оно относится к https://active.tutsplus.com/».

Самозакрывающиеся метки

Это все очень просто, поэтому давайте добавим изображение.

Кроме … хм, как именно мы помечаем фрагмент текста, чтобы сделать его изображением? Вы можете догадаться о чем-то вроде этого:

… это хорошее предположение, но не правильно.

В этом случае не имеет смысла иметь тег изображения — кстати, img — тег любого текста. Мы пишем это (без каких-либо атрибутов, пока) так:

Косая черта в конце указывает, что тег сам закрывается. Это немного странная концепция, и в этом случае сама идея тегирования тегов текста немного падает. При желании вы можете вместо этого вызывать элементы HTML-тегов.

В любом случае, давайте вставим это на нашу страницу:

Как и тег, img не будет отображать ничего без каких-либо атрибутов. Давайте добавим немного.

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

Я буду использовать свой аватар в Твиттере, так как он в сети, и надеюсь, что он не изменится, прежде чем вы прочитаете этот урок Это: http://a3.twimg.com/profile_images/1403171562/VectorMJWSquareTransparent.png , так что не совсем кратко.

Вместо использования href для атрибута, который указывает на этот URL, мы должны использовать src (сокращение от «source») — в конце концов, это на самом деле не гиперссылка. Так:

Если вы загрузите эту страницу , вы увидите мой аватар внизу — если я не изменил его или Twitter не отключился, и в этом случае вы увидите символ «испорченное изображение».

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

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

Попробуйте изменить URL-адрес src на тот, который не будет работать (например, http://blahblahblah/ ), и вы увидите альтернативный текст ( для примера нажмите здесь ). Ну, вы можете, в зависимости от вашего браузера; стандарты HTML 5 предлагают делать это , но не настаивайте на этом. Chrome не делает этого, к моему большому удивлению.

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

Вложенные теги

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

Например, вы можете разметить выделенный текст с помощью якоря:

… до тех пор, пока вы не делаете что-то глупое, как:

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

Смотрите результаты здесь .

Есть множество других тегов, которые я мог бы охватить, например, h1 , h2 , h3 (и т. Д.) Для заголовков; pre для вставки больших блоков исходного кода или ASCII-объектов (внутри которых, как правило, HTML обращает внимание на лишние пробелы и новые строки); table для вставки табличной информации; input для добавления кнопок и текстовых полей; iframe , которая позволяет вставить целую дополнительную веб-страницу внутри текущей веб-страницы; и еще — но этого достаточно для контента, потому что нам нужно поговорить о другом аспекте HTML.

---

Презентация: CSS

HTML — язык — не имеет отношения к представлению, это правда. Но HTML- страницы должны иметь возможность изменять свою презентацию, иначе все будет Times New Roman с фиолетовыми ссылками, как в примерах, которые мы видели до сих пор!

Для этого у нас есть другой язык, который мы встраиваем в HTML-страницы, и все о презентации: каскадные таблицы стилей (CSS).

Простой пример

Помните, ранее я упоминал, что мы могли бы отображать strong теги с пунктирным подчеркиванием, а теги em отображать маленькими буквами? Мы можем сделать это, используя язык CSS. Похоже, это само по себе:

Разве это не похоже на HTML? Вы, вероятно, можете прочитать это достаточно хорошо, хотя. У нас есть имя тега, за которым следует пара фигурных скобок («фигурных скобок»), внутри которых находятся все свойства текста, который мы хотим установить. Каждое свойство затем имеет значение, с двоеточием, отделяющим свойство от его значения, и точкой с запятой в конце каждой пары свойство-значение. Вместе это называется таблицей стилей . Достаточно просто.

Мы применяем таблицу стилей к странице следующим образом:

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

Тем не менее, тег em прежнему имеет курсив, и strong по-прежнему отображает слова жирным шрифтом. Что дает?

Это то, к чему относится «Каскадирование» в «Каскадных таблицах стилей»: браузер имеет свои собственные стили CSS по умолчанию (например, «em» означает «курсив»), и они каскадируются , поэтому применяемые вами стили CSS просто добавляется сверху, а не заменяет существующие. Как будто в браузере есть таблица стилей, которая выглядит следующим образом:

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

Затем это происходит каскадно, так что общая таблица стилей, включая ваши варианты, выглядит следующим образом:

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

Тогда общая таблица стилей будет выглядеть так:

Когда браузер находит текст, помеченный как strong , он скажет: «Хорошо, во-первых, мне нужно сделать это жирным шрифтом». Затем мне нужно указать пунктирную границу толщиной 1 пиксель внизу текста. Затем мне нужно сделать вес шрифта нормальным. Подожди, я не сделал это смелым секунду назад? Ну да ладно, неважно.

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

Загрузите страницу . Отлично!

Другие источники CSS

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

Например, мы можем поместить таблицу стилей в свой собственный файл .css (называемый внешней таблицей стилей ) и указать странице использовать ее. Для этого мы используем в заголовке самозакрывающийся тег link , атрибут rel которого является stylesheet а тег href — URL-адрес файла .css.

Вы должны быть в состоянии понять, как написать это из описания; Попробуйте это с таблицей стилей, которую мы используем в Activetuts +: https://active.tutsplus.com/wp-content/themes/tuts/style.css . Если вам нужна помощь, разверните поле кода ниже.

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

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

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

Проверьте результат вышеупомянутого изменения . Встроенные стили применяются после всех остальных стилей.

Обратите внимание, что вам не нужно вводить имя элемента и использовать фигурные скобки — вы уже определили, какой тег вы хотите стилизовать. Вы можете применять несколько стилей в пределах одного атрибута style ; просто напечатайте их один за другим (новая строка не нужна) и убедитесь, что между ними стоит точка с запятой.

Что если вы хотите добавить несколько слов в абзац? Вы можете обернуть их в тег em и оформить тег так:

… но тогда они тоже будут курсивом, верно? Таким образом, вы отмените это так:

… но это тоже нехорошо, потому что вы не можете гарантировать, что к тегу em также не прикреплены другие стили — и поскольку вы не знаете, вы не можете отменить их все. К счастью, есть тег, чтобы помочь.

Тег <span>

Тег span не дает никаких визуальных изменений сам по себе, что означает, что он идеально подходит для нашего примера выше:

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

Ах, но теперь посмотри, что мы делаем. Мы применяем правила представления прямо в контенте — именно в такой ситуации, чтобы em и em тэги были изобретены, чтобы избежать! Это технически недопустимый HTML, но он все еще хитрый, и его следует использовать экономно или не использовать вовсе.

Однако иногда вам может понадобиться сказать: «Этот раздел текста отличается от других, но ни один из существующих тегов HTML не описывает эту разницу очень хорошо». Возможно, вы пишете страницу о животных и решаете, что было бы полезно пометить все слова, которые представляют виды, такие как «кошка» и «собака» и т. Д., Чтобы вы могли применить стиль ко всем из них сразу позже.

HTML не имеет species тега. Соблазнительно сказать: «Ну, на моем сайте я собираюсь сказать, что strong метка всегда используется для представления видов» — но это плохая идея; это не то, что strong для.

Вместо этого вы можете использовать классы . Любому тегу может быть присвоен класс примерно так:

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

Обратите внимание, что для определения стиля для класса, а не тега, вы должны поместить точку перед ее именем в CSS.

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

• Настройки браузера по умолчанию
• внешний
• внедренный
• Классы
• В соответствии

Итак, мы рассмотрели контент и презентацию в файлах HTML. Остался один важный аспект.

---

Код: JavaScript

HTML и CSS не являются языками программирования. Они на самом деле ничего не делают . Они просто рассказывают тексту, как он структурирован и как должен выглядеть.

JavaScript это язык программирования. Это делает вещи.

Один из самых простых примеров кода JavaScript — это alert('Hello') . Когда браузер запустит этот код, появится маленькое диалоговое окно со словом «Hello» внутри.

Как и в случае с CSS, мы можем встроить JavaScript на страницу, добавить его через внешний файл или прикрепить к одному тегу. Чтобы встроить его, мы помещаем его внутри тега script в голове, а не тега style :

Проверьте результат .

Ссылка на внешний JavaScript тоже проста; Вы помещаете свой код в файл .js и добавляете его на свою страницу следующим образом:

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

Встроенный JavaScript, т. Е. Присоединение кода к определенным элементам, работает немного иначе, чем встроенный CSS. Первое предположение о том, как мы могли бы сделать это, может быть:

… но, если вы думаете об этом, это не имеет смысла. Когда появится предупреждение? Когда страница загружается? Когда этот конкретный раздел текста загружен? Когда это было на странице? Когда это было нажато? Вы не можете догадаться, как и браузер.

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

For instance, one such attribute is onclick , which triggers the JavaScript inside it whenever the user clicks the contents of the tag with their mouse. Это выглядит так:

Load the page and click the last paragraph — yes, you can click it, even though it’s not a hyperlink. Тада! You’re half-way to programming a duet.

That’s Not All

I’m not going to go into a lot of detail on JavaScript here, because that’s what the bulk of our future HTML5 tutorials are going to focus on. However, you should know that JavaScript can do a lot more than make annoying dialog boxes appear.

Besides making the browser do stuff on its own, JavaScript can alter and create HTML (as well as CSS and JavaScript code itself). It’s hard to overstate how powerful that makes it.

And as if that weren’t enough: if you’re using Chrome, you can play Angry Birds in your browser , written in JavaScript, HTML, CSS… and, okay, a touch of Flash for the sounds.

---

Что дальше?

If you’re interested in learning more about the design and appearance of webpages, check out our sister site Webdesigntuts+ . One of our other sister sites, Nettuts+ , has already published a lot of articles on HTML , CSS , and JavaScript that you should dig in to.

We’ll be focusing on the latest version of HTML — HTML5 — and using it to create apps and games for modern browser. If you want to keep up to date with what we’re doing, then you can follow us on Twitter , like us on Facebook , subscribe to us through RSS , or sign up to our free email newsletter .

Here’s one last tip for the curious: you can view the HTML of any web page on the Internet by right-clicking a blank area and selecting «View Source». I should warn you: some sites make the markup all messy so that you can’t read (and copy) it; some sites’ markup is just naturally messy. But try it out!