Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.
Заработок в Интернет. Удаленная работа на дому. Все о надомной работе.
26 июля стартовала битва за кодий на Джаваскриптоне. Вступайте в одну из трёх команд, бесплатно проходите онлайн-тренажёры по вёрстке и программированию и зарабатывайте за это кодий. Чем больше участников, тем больше кодия у команды, и тем быстрее открываются новые курсы. Команда, которая к 31 июля наберёт больше всех кодия, станет победителем и получит шикарные призы.
Каждый попаданец из фракции-победителя получит:
Ещё есть время подготовиться и заработать немного кодия, разгадывая загадки бортового компьютера. В общем, всех нас ждёт настоящая космоопера.
Подключайтесь!
Боты — будущее интернета! Недавно ребята из HTML Academy рассказали, как создать простого бота на Node.js,однако он работал только на локальном компьютере.
Сегодня вы узнаете, как загрузить бота на сервер, запустить его и проверить, что всё работает. Для этого нужно пройти 7 этапов:
Выбрать хостинг.
Заказать хостинг.
Загрузить бота.
Зайти на сервер по SSH.
Установить Node.js
Запустить и проверить бота.
Обеспечить автоматический перезапуск бота.
Подробно о каждом этапе читайте в этой статье.
А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и туториалами.
Текст — основная часть контента на большинстве сайтов, и важно грамотно подходить к его отрисовке. Самый простой способ — использовать стандартные шрифты, например, Arial, Times New Roman и так далее. Эти шрифты называются веб-безопасными, достаточно просто указать их название в коде, и всё будет работать.
Но что если дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный? В статье HTML Academy вы узнаете, какие варианты подключения и настройки шрифтов нужны в таких случаях.
А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и туториалами.
Сделал новый видеокурс, посвящённый работе с несколькими колонками, которые создаются через свойство columns. На деле это свойство можно использовать не только для текста, но и для изображений, блоков и других элементов.
Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса.
В этом туториале Саша Смыгина из HTML Academy покажет, как реализовать эффект drag & drop на ванильном JavaScript.
Drag & drop может понадобиться в разных ситуациях, например:
Простое визуальное изменение положения элемента.
Сортировка элементов с помощью перетаскивания. Пример — сортировка карточек задач в таск-трекере.
Изменение контекста элемента. Пример — перенос задачи в таск трекере из одного списка в другой.
Перемещение локальных файлов в окно браузера.
Подробнее об эффекте drag & drop читайте в этой статье. А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и туториалами.
Вот раньше было время! В нулевых, например, никаких фронтов не было, а человек, который делает сайты, был просто человеком, который делает сайты. Мог и на HTML что-то собрать, и стили прописать, и на JavaScript алерты наставить, где нужно.
А что должен уметь верстальщик сегодня? Разбираться в HTML и CSS, немного знать JavaScript, использовать магию гридов, флоатов, знать системы сборки и точно кое-что еще.
О том, как выглядит идеальная вакансия для верстальщика в 2020 году, какие навыки и знания востребованы, и что обо всём этом думают специалисты из индустрии — читайте в блоге HTML Academy.
Как устроен фронтенд в Selectel?
Ответят Валерий Кондратьев, руководитель отдела разработки и тестирования интерфейсов, и младший фронтенд-разработчик Денис Соколинский.
Старт 17 июня в 12:00 в рамках live-сессии с HTML Academy.
Вы узнаете:
как устроена фронтенд-разработка и вёрстка в компании;
что изменилось с приходом самоизоляции;
какие технологии используются в работе;
требования к разработчикам, чтобы попасть в команду;
опыт найма и работы с выпускниками Академии.
Зарегистрируйтесь, чтобы не пропустить трансляцию.
Веб-разработка — это не только про вёрстку и знание HTML. Иногда приходится где-то что-то подпилить и написать код. А где код — там хранение данных. А где хранение данных — там переменные, хранение информации в массивах и другие странных словах.
Ещё информацию можно хранить в коллекциях (вспомните полку со старыми видеокассетами — это прям оно). Допустим, мы хотим получить информацию о всех картинках со страницы и что-то с ними сделать через JavaScript. Мы выполняем команду и получаем коллекцию объектов, которая вроде похожа на массив, но нет.
Дело в том, что коллекции тоже бывают разными — живыми и неживыми. HTML Academy провели целое расследование о том, чем они отличаются, когда программисту нужны динамические коллекции, а когда лучше подойдут статические.
Подробности читайте в блоге HTML Academy. А ещё подпишитесь на нашу полезную рассылку, чтобы получать одно письмо в неделю со статьями о веб-разработке и уделять дополнительные 10-15 минут самообразованию.
И пусть живые позавидуют неживым!
В Академии приоткрыли завесу тайны и рассказали, как в далёком 2013 году начали делать интерактивные курсы (они же тренажёры) для начинающих разработчиков и как они делаются сейчас.
Процесс непростой, но интересный. В нём участвуют авторы, дизайнеры, продюсеры и разработчики, редакторы, маркетологи — список довольно внушительный.
А чтобы курс получился, нужно собрать список типовых задач, разложить их на шаги, придумать теорию, запрограммировать испытание, доработать движок, всё посмотреть четыре раза (а то и больше), протестировать, а потом выложить на сайт.
Подробный рассказ обо всех этапах — в этой статье.
Ребята из HTML Academy выпустили вторую часть цикла про Chrome DevTools — на этот раз статья о вкладках Console, Sources и Network. Рассказ о том, как просмотреть список ресурсов на странице, понять, куда делись шрифты, и выяснить, почему страница так долго грузится.
Вдобавок ко всему вы научитесь делать скриншот всей страницы в Chrome без плагинов, расширений и прочих аддонов — буквально в три клика.
Все подробности — в этой статье.
Хотите получать полезные статьи о веб-разработке, узнавать о лайфхаки для продуктивного обучения, быть в курсе акций и скидок HTML Academy — подписывайтесь на их телеграм-канал. Бонусом — чат, в котором можно задать вопрос коллегам, обсудить технологии, попросить помощи, если что-то не получается.
Ребята из HTML Academy подготовили туториал о том, как сделать телеграм-бота. Это возможность отправить друзьям ссылочку со словами: «Смотри, это моё».
Для работы понадобятся:
редактор кода, чтобы писать код;
Node.js любой версии, выше 0.12;
консоль. Или встроенный в систему вариант;
VPN. Возможно но не факт, потому что Телеграм работает не везде.
Подробно о каждом шаге — по ссылке.
Горячие клавиши — добро, польза и экономия времени. Ребята из HTML Academy рассказали, какие комбинации использовать, чтобы упростить работу с Visual Studio Code.
Вы узнаете, как:
быстро добавить комментарий;
перейти к строке под номером;
поменять строку местами с соседними;
дублировать строку;
перейти к парной сборке;
переименовать переменную;
отформатировать документ;
перейти к объявлению переменной;
включить/выключить перенос слов;
включить дзен-режим.
Подробнее о каждой комбинации читайте в этой статье.
В каждый современный браузер встроены инструменты разработчика — они позволяют быстро отловить и исправить ошибки в разметке или в коде. С их помощью можно узнать, как построилось DOM-дерево, какие теги и атрибуты есть на странице, почему не подгрузились шрифты и многое другое.
Подробно о настройке Chrome DevTools и панеле Elements читайте в статье от HTML Academy.
Сейчас все активно обсуждают радости и гадости удалённой работы. Тем временем ребята из HTML Academy провели небольшой опрос и попросили пользователей рассказать, с какими трудностями они сталкиваются во время работы из дома (спойлер — все ленятся).
Статистику нужно было как-то красиво оформить, поэтому они подготовили туториал о том, как сделать интерактивный SVG-график. Очень подробная инструкция по ссылке.
HTML5 | htmlbook.ru
HTML5 | htmlbook.ru
HTML5 — это не продолжатель языка разметки гипертекста, а новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.
Семантика
Семантика дает представление о структуре документа и позволяет людям и программам более полно управлять данными. В HTML5 добавлено множество семантических тегов, а также поддержка RDFa, микроформатов и микроданных.
Автономная работа
Благодаря кэшу HTML5, веб-приложения могут быстрее работать и запускаться даже без подключения к Интернету.
3D, графика и эффекты
Можно рисовать прямо на веб-странице используя Canvas API. Технологии WebGL и CSS3 3D позволяют отображать трехмерную графику непосредственно в браузере.
Мультимедиа
Приложения и сайты могут проигрывать аудио и видео без установки дополнительных плагинов вроде Flash-а.
Производительность и интеграция
Сделайте свои веб-приложения быстрыми и динамичными с разными технологиями вроде Web Workers и XMLHttpRequest 2.
CSS3
CSS3 в интеграции с HTML5 позволяет управлять видом любых элементов на странице, создавать потрясающие эффекты без ущерба семантической структуры, производительности и без дополнительных скриптов.
Ничего не знаете об HTML5?
Начните изучение HTML5 с книги Марка Пилгрима Погружение в HTML5.
В HTML5 появилось множество семантических элементов, а также тегов, позволяющих вставлять аудио и видео на сайт.
Для эффективной работы не обойтись без необходимых и привычных инструментов,
в том числе и при написании кода HTML. Поэтому для начальной разработки веб-страниц
или даже небольшого сайта — так называется набор страниц, связанных
между собой ссылками и единым оформлением, нам понадобятся следующие программы.
Текстовый редактор.
Браузер для просмотра результатов.
Валидатор — программа для проверки синтаксиса HTML и выявления ошибок
в коде.
Графический редактор.
Справочник по тегам HTML.
Далее рассмотрим эти инструменты подробнее.
Текстовый редактор
HTML-документ можно создавать в любом текстовом редакторе, хоть Блокноте,
тем не менее, для этой цели подойдет не всякая программа. Нужна такая, чтобы
поддерживала следующие возможности:
подсветка синтаксиса — выделение тегов, текста, ключевых слов и параметров
разными цветами. Это облегчает поиск нужного элемента, ускоряет работу разработчика
и снижает возникновение ошибок;
работа с вкладками. Сайт представляет собой набор файлов, которые приходится
править по отдельности, для чего нужен редактор, умеющий одновременно работать
сразу с несколькими документами. При этом файлы удобно открывать в отдельных
вкладках, чтобы быстро переходить к нужному документу;
проверка текущего документа на ошибки.
Ссылки на некоторые подобные редакторы приведены ниже.
PSPad
http://www.pspad.com/ru/download.php
HtmlReader
http://manticora.ru/download.htm
Notepad++
http://notepad-plus.sourceforge.net/ru/site.htm
EditPlus
http://www.editplus.com
Браузер
Браузер это программа, предназначенная для просмотра веб-страниц.
На первых порах подойдет любой браузер, но с повышением опыта и знаний потребуется
завести целый «зверинец», чтобы проверять правильность отображения
сайта в разных браузерах. Дело в том, что каждый браузер имеет свои уникальные
особенности, поэтому для проверки универсальности кода требуется просматривать
и корректировать код с их учетом. На сегодняшний день наибольшей популярностью
пользуются три браузера: Firefox, Internet Explorer и Opera.
Mozilla Firefox
Перспективный и развивающийся браузер, получивший признание во всем мире.
Его особенность — простота и расширяемость, которая получается за счет
специальных расширений, как они называются. Изначально Firefox имеет набор
только самых необходимых функций, но, устанавливая желаемые расширения, в итоге
можно нарастить браузер до системы, выполняющей все необходимые для вашей работы
действия.
Браузер Firefox является открытой системой, разрабатываемый группой Mozilla.
Где скачать http://www.mozilla.ru/products/firefox/
Microsoft Internet Explorer (IE)
Один из старейших браузеров, который бесплатно поставляется вместе с операционной
системой Windows. Это и определило его популярность. Версия IE 7
по удобству приблизилась к своим давним конкурентам, в частности, появились
вкладки. К сожалению, этот браузер хуже всех поддерживает спецификацию HTML,
поэтому для корректного отображения в IE приходится порой отдельно отлаживать
код специально под него.
Где скачать http://www.microsoft.com/rus/windows/ie/default.mspx
Opera
Быстрый и удобный браузер, поддерживающий множество дополнительных возможностей,
повышающих комфортность работы с сайтами.
Где скачать http://ru.opera.com/download/
Safari
Разработаный компанией Apple этот браузер встроен в iPhone и операционную систему MacOS на компьютерах Apple. Также имеется версия под Windows.
Где скачать http://www.apple.com/ru/safari/
Google Chrome
Браузер, появившийся на рынке в конце 2008 года. Разработан компанией Google.
Где скачать http://www.google.com/chrome?hl=ru
Валидатор
Валидация HTML-документа предназначена для выявления ошибок в синтаксисе
веб-страницы и расхождений со спецификацией HTML. Соответственно, программа
или система для такой проверки называется валидатором.
Как проверить HTML-файл на валидность
Если есть доступ в Интернет, то следует зайти по адресу http://validator.w3.org и
ввести путь к проверяемому документу или сайту в специальной форме. После проверки
будут показаны возможные ошибки или появится надпись, что документ прошел валидацию
успешно.
Tidy
Для проверки локального HTML-файла или при отсутствии подключения к Интернету,
предназначена программа Tidy. Некоторые редакторы, например, PSPad, уже содержат
встроенный Tidy и валидацию документа можно провести без дополнительных средств.
Где скачать http://tidy.sourceforge.net
Графический редактор
Графический редактор необходим для обработки изображений и их подготовки для публикации на веб-странице. Самой популярной программой такого рода является Photoshop, ставший стандартом для обработки фотографий и создания графических изображений для сайтов. Но в большинстве случаев мощь Photoshop-а избыточна, и лучше воспользоваться чем-нибудь более простым и проворным. В частности, программа Paint.Net позволяет сделать все необходимые манипуляции с изображениями, вдобавок бесплатна для использования.
Запоминать все теги и их параметры наизусть на первых порах сложно, поэтому
требуется периодически заглядывать в руководство, чтобы уточнить тот или иной
вопрос. Вообще, хороший справочник нужен всем, независимо от уровня подготовки.
Справочники в Интернете
Описание тегов HTML (на английском языке) http://www.w3.org/TR/html4/index/elements.html
На этом сайте вы также найдете один из лучших справочников по тегам в Рунете.
Вёрстка сайтов | htmlbook.ru
HTML изначально задумывался как язык, которому не нужны средства оформления, такие как цвет, размер, рамки или что-то подобное. Разработанный в Европейском институте физики частиц (CERN), HTML был игрушкой ученых, их, прежде всего, интересовала логика информации, а не её визуальное представление. Тогда ещё не существовало понятия веб-дизайна и вёрстки как таковой, все сайты по своему оформлению были практически однотипными, в стиле, называемом сейчас «академический дизайн». Пример до сих пор можно посмотреть на lib.ru.
Однако пользователи преимущественно думали иначе и, глядя на красивую картинку, отдавали предпочтение именно ей. Разработчики браузера Netscape прекрасно понимали это и вводили в HTML новые теги, улучшающие внешний вид документа. Эти теги не были стандартизированы и работали только в Netscape, что в эпоху повального засилья этого браузера, не имело значения. Доля Netscape составляла более 90% от всех существующих браузеров.
Влияние Netscape оказалось губительным для академического дизайна, фактически похоронив его и оказалось благотворным для становления веб-дизайна. Разработчики сайтов поняли, что дизайн это не просто разноцветный текст и вставленные наобум картинки. Это возможность красочно и эффектно подать материал, придать определённое настроение сайту, заинтересовать посетителя и задержать его на ресурсе. Дизайн стал непосредственным этапом разработки сайта, за которым последовала и вёрстка. Нарисованные в Фотошопе макеты следовало превратить из одной картинки в набор изображений, стилевых и HTML-файлов, способных быстро загружаться по сети, сохраняя при этом особенности дизайна.
Век Netscape продолжался до тех пор, пока часть рынка браузеров не захватила Microsoft со своим браузером Internet Explorer, что в итоге принесло только головную боль разработчикам сайтов. Разные подходы Netscape и Internet Explorer к отображению сайта, противоречивая поддержка стилей и тегов, большое количество мелких ошибок привело к тому, что сайт приходилось тестировать и отлаживать долгое время.
Устаревшие версии браузеров не в полной мере поддерживали CSS (Cascading Style Sheets, каскадные таблицы стилей), поэтому код представлял собой окрошку из HTML и CSS. Это привело к тому, что для макетов стали применяться таблицы с невидимой границей, на долгое время ставшими стандартом де-факто.
Следующим этапом развития разработки сайтов стало рождение спецификации, которая была названа Cascading Style Sheets Level 2, сокращенно CSS2. Следом появилось обновление Cascading Style Sheets Level 2 Revision 1 (CSS 2.1), которое используется по сей день. Выпуск новых версий браузеров, поддерживающих, пусть и не в полной мере, эту спецификацию, серьёзно облегчил работу над сайтами. В итоге, начал происходить постепенный переход от табличной вёрстки к блочной или, как она ещё называется, вёрстке слоями, в которой расположение элементов на странице и их вид задаётся через стили.
В настоящее время уже можно заявить, что табличная вёрстка в большинстве своём является архаизмом. Тем не менее, существует ещё множество сайтов вроде yandex.ru, artlebedev.ru и других, свёрстанных именно при содействии таблиц. Такой консерватизм связан со следующими обстоятельствами.
Вёрстка слоями сложнее, чем таблицами, поскольку требует от разработчика глубоких знаний спецификации CSS.
Браузеры содержат разные ошибки при интерпретации стилевых свойств, поэтому следует знать особенности поведения основных браузеров, их ошибки и уметь обходить их.
Практически каждую задачу можно решить несколькими способами, от разработчика требуется выбрать оптимальный, т.е. наименее затратный по времени и усилиям. Для оценки оптимальности необходим практический опыт, чтобы иметь в запасе разные методы, применяемые в конкретных ситуациях.
Таким образом, вёрстка в простом понимании это процесс превращения работы дизайнера в веб-страницу, отображаемую в браузере. Но один и тот же результат можно получить разными методами и уже от верстальщика зависит, какой из них предпочесть. От такого выбора зависит результат работы сайта, быстрота его отображения, доступность для разных устройств и браузеров.
Помните, что вёрстка это практическая дисциплина и только самостоятельно решая разные задачи и работая над проектами, вы сможете освоить это искусство.
HTML | htmlbook.ru
Влад Мержевич
Сделал новое мобильное приложение под Андроид, чтобы практиковаться с кодом HTML. По разным темам выводятся небольшие задания, которые надо решать прямо в текстовом редакторе. Проверка заданий автоматическая, так что сразу будете знать, выполнено оно или нет.
Установить приложение
Влад Мержевич
Выпустил новую версию самоучителя HTML в виде мобильного приложения под Android. Кроме самой теории с примерами есть куча вопросов для самопроверки. Установить можно через Google.Play.
Добавились новые разделы про формы, аудио и видео, фреймы и семантику. Старые тексты тоже обновлены, чтобы они лучше соответствовали современным стандартам.
Приложение пока находится в бета-режиме, так что если есть замечания и предложения по улучшению, пишите письма и отзывы.
Влад Мержевич
Переделал мобильное приложение под Андроид Основы HTML, тексты для которого написал Джереми Томас с сайта marksheet.io.
Обновлена система заданий, оптимизирована производительность, все уроки связаны друг с другом. Теперь это больше похоже на законченный учебный курс.
Установить приложение
Если ещё не ставили приложение, то самое время это сделать и начать учить HTML. Если ставили, то можно проверить свои знания и обновить их. Так что включать всем!
Влад Мержевич
На сайте webref.ru стал доступен самоучитель HTML. Более 50 вопросов для проверки, несколько десятков интерактивных упражнений на закрепление материала, почти два десятка практических заданий по редактированию кода.
Сам учебник остался знакомым, но теперь это действительно самоучитель.
Влад Мержевич
Быстрый старт
Чтобы сразу же ввести в курс дела нетерпеливых читателей, предложим им возможность
создания веб-страницы без последовательного изучения правил HTML. По крайней
мере, вы сумеете убедиться, что создание веб-страниц достаточно простая штука.
В примере 1.1 приведен несложный пример такого кода.
Пример 1.1. Первая веб-страница
HTML5 | htmlbook.ru
HTML5 | htmlbook.ru
Определяет содержание сайта вроде новости, статьи, записи блога, форума или др.
Определяет блок сбоку от контента для размещения рубрик, ссылок на архив, меток и другой информации.
Добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице.
Указывает фрагмент текста, который должен быть изолирован от изменения направления вывода текста.
Создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства.
Создает команду в виде переключателя, флажка или обычной кнопки.
Создает список вариантов, которые можно выбирать при наборе в текстовом поле.
Используется для хранения информации, которую можно скрыть или показать по требованию пользователя.
Используется для загрузки и отображения объектов.
Содержит описание для тега <figure>.
Используется для группирования любых элементов, например, изображений и подписей к ним.
Определяет «подвал» сайта или раздела.
Определяет «шапку» сайта или раздела.
Используется для группирования заголовков веб-страницы или раздела.
Используется для генерации пары ключей — закрытого и открытого.
Элемент <main> предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п.
Помечает текст как выделенный.
Отображает список меню.
Используется для вывода значения в некотором известном диапазоне.
Группирует ссылки навигации по сайту.
Определяет область для вывода, преимущественно с помощью скриптов.
Используется для отображения прогресса завершенности задачи.
Используется для вывода текста в браузерах, которые не поддерживают тег <ruby>.
Добавляет аннотацию сверху или снизу от текста, заключенного в контейнер <ruby>.
Предназначен для добавления небольшой аннотации сверху или снизу от заданного текста.
Задаёт раздел документа, может применяться для блока новостей, контактной информации, глав текста, вкладок в диалоговом окне и др.
Вставляет звуковой или видеофайл для тегов <audio> и <video>.
Указывает заголовок для тега <details>, по которому можно щелкать для разворачивания/сворачивания информации.
Помечает текст внутри тега как дату, время или оба значения.
Добавляет, воспроизводит и управляет настройками видеоролика на веб-странице.
Указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента.
Развитие HTML в определенном смысле зашло в тупик — новые теги уже не нужны,
поскольку хватает существующих, к тому же акцент разработки веб-страниц сместился
на стили, которые расширяют возможности по оформлению документов. Естественно,
CSS никак не подменяет HTML, но зато позволяет использовать ограниченный
набор тегов, а вид элементов, их положение и различные параметры, задавать
через стили.
Определенным ограничением HTML является и то, что он относится к формальным
языкам, в том смысле, что теги и их иерархическая структура жестко описаны
в спецификации. Поэтому популярность набирает XML, с помощью которого можно
создавать собственные теги и формировать их структуру. Разница между HTML
и XML состоит не только в тегах, но и правилах написания кода. Браузер при
работе с HTML «закрывает глаза» на разные мелкие огрехи и недочеты в структуре
или тому, что не корректно указан атрибут. С XML такие фокусы не проходят,
поэтому браузер выдаст ошибку о том, что документ неверно сформирован.
Чтобы научить разработчиков «правильному» мышлению, изменить их стиль написания
кода, а также сократить разрыв между HTML и XML, и был разработан XHTML,
как промежуточный этап между ними.
XHTML (EXtensible HyperText Markup Language, расширяемый язык разметки гипертекста)
предназначен для замены HTML и считается его более строгой версией. Вообще, W3C
определяет XHTML как последнюю версию HTML, которая постепенно его вытеснит.
Так ли это будет обстоять на самом деле, покажет только время.
Если рассуждать о некотором идеальном коде веб-страницы, то его можно сравнить
с программой, которая не будет скомпилирована до тех пор, пока все ошибки
не исправлены. Браузер выступает в роли компилятора и не отображает документ,
если он не соответствует спецификации. XHTML, сохраняя все особенности HTML,
вносит более строгие правила создания страниц, чтобы приблизиться к «идеальному»
коду. Это позволяет делать сайты независимыми от устройства отображения и
браузера. Иными словами, сайт будет корректно показываться во всех современных
браузерах и платформах вроде компьютеров, смартфонов, КПК, нетбуках и др.
На деле все обстоит более приземленно. Разработчики браузеров не могут позволить
себе, чтобы их детище работало только с «правильным» кодом. А все из-за того,
что большая часть сайтов в мире просто не будет отображаться в таком браузере.
Виноваты в таком положении вещей и разработчики и пользователи. Первые не
обеспечили должную поддержку спецификации в своих браузерах, а вторые не
потрудились ей следовать.
По этим причинам XHTML 1.x является всего лишь подобием HTML, но с
более строгим синтаксисом, а не тем перспективным языком разметки, на который
обязательно стоит переходить из-за его уникальных возможностей.
HTML Basic
В этой главе мы покажем несколько основных примеров HTML.
Не беспокойтесь, если мы будем использовать теги, о которых вы еще не узнали.
HTML-документов
Все документы HTML должны начинаться с объявления типа документа: .
Сам HTML-документ начинается с и заканчивается .
Видимая часть документа HTML находится между и .
Пример
Мой первый заголовок
Мой первый абзац.
Попробуй сам »
Декларация
Объявление представляет тип документа и помогает браузерам корректно отображать веб-страницы.
Он должен появляться только один раз, вверху страницы (перед любыми тегами HTML).
Декларация не чувствительна к регистру.
Декларация для HTML5:
HTML-заголовки
HTML-заголовки определены с тегами от
до
.
определяет наиболее важный заголовок.
определяет наименее важное
заголовок:
Пример
Это заголовок 1
Это заголовок 2
Это заголовок 3 Попробуй сам »
HTML абзацы
абзацы HTML определены с тегом
:
HTML-ссылки
HTML-ссылки определены с тегом :
Назначение ссылки указывается в атрибуте href .
Атрибуты
используются для предоставления дополнительной информации об элементах HTML.
Подробнее об атрибутах вы узнаете в следующей главе.
HTML изображений
HTML-изображения определены с тегом .
Исходный файл ( SRC ), альтернативный текст ( или ), ширина и высота предоставляются в качестве атрибутов:
Пример
Попробуй сам »
Как просмотреть исходный код HTML?
Вы когда-нибудь видели веб-страницу и задавались вопросом «Эй! Как они это сделали?»
Посмотреть исходный код HTML:
Щелкните правой кнопкой мыши страницу HTML и выберите «Просмотреть исходный код страницы» (в
Chrome) или «Просмотр исходного кода» (в Edge) или аналогичные в других браузерах. Это откроет окно
содержащий исходный код HTML страницы.
Проверьте элемент HTML:
Щелкните правой кнопкой мыши элемент (или пустую область) и выберите «Осмотреть» или
«Осмотрите элемент», чтобы увидеть, из чего состоят элементы (вы увидите оба
HTML и CSS).Вы также можете редактировать HTML или CSS на лету в
Откроется панель элементов или стилей.
,
HTML b Tag
Пример
Сделать текст жирным шрифтом (не помечая его как важный):
Это обычный текст — , а это жирный текст .
Попробуй сам »
Ниже приведены примеры «Попробуйте сами».
Определение и использование
Тег <900> указывает жирный текст без какой-либо дополнительной важности.
Советы и заметки
Примечание: Согласно спецификации HTML5, <900> тег следует использовать в качестве ПОСЛЕДНЕГО курорта, если другой тег не является более подходящим.
спецификация гласит, что заголовки должны быть обозначены
теги от
до
, выделенный текст должен
обозначаться с
тег , важный текст должен быть обозначен
с тегом , а выделенный / выделенный текст должен
обозначаться с
тег .
Подсказка: Вы также можете использовать следующий CSS для установки полужирного текста: "font-weight:
жирный; ".
Поддержка браузера
Элемент
<900>
Да
Да
Да
Да
Да
Глобальные атрибуты
Тег <900> также поддерживает глобальные атрибуты в HTML.
Атрибуты события
Тег <900> также поддерживает атрибуты событий в HTML.
Дополнительные примеры
Пример
Используйте CSS для установки жирного текста:
Это обычный текст - , и это жирный шрифт
текст .
Попробуй сам "
Связанные страницы
Учебник по HTML: HTML Text Formatting
HTML DOM ссылка: жирный объект
Настройки CSS по умолчанию
Большинство браузеров отображают элемент со следующими значениями по умолчанию:
,
HTML по сравнению с XHTML
XHTML - это более строгая, более XML-версия HTML.
Что такое XHTML?
XHTML обозначает E X растяжимый H yper T доб M arkup L anguage
XHTML - более строгая, более XML-версия HTML
XHTML - это HTML, определенный как приложение XML
XHTML поддерживается всеми основными браузерами
Почему XHTML?
XML - это язык разметки, где все документы должны быть правильно размечены (быть «правильно сформированными»).
XHTML был разработан, чтобы сделать HTML более расширяемым и гибким для работы с
другие форматы данных (например, XML). Кроме того, браузеры игнорируют ошибки в HTML
страниц, и попробуйте отобразить веб-сайт, даже если в разметке есть ошибки.
Таким образом, XHTML поставляется с гораздо более строгой обработкой ошибок.
Если вы хотите изучать XML, прочитайте наш учебник по XML.
