Что делать если русский шрифт не отображается на сайте. Html язык русский

Сайт не отображает русский шрифт

Добрый вечер и другого времени суток! Ко мне на почту и в комментарии на сайте неоднократно поступают вопросы, типа "Почему не отображается русский шрифт на сайт" или "Я прописал в html файле русский текст, а он выводиться кракозябрами. Что делать?". Поэтому я решил посвятить этой теме урок. В этом уроке я расскажу, что нужно делать, если русский кириллический шрифт не отображается у вас на сайте или отображается, но коряво (непонятными символами).

Сразу скажу, что все эти проблемы связаны в первую очередь с кодировкой самого сайта. Я буду учить вас тому, что сам знаю и как делаю именно я (потому что каждый web-разработчик приходит к решение проблемы по разному и на счет кодировки, в частности, у каждого свое мнение на это счет). Итак, начнем!

P.S. Если вы всерьез решили заниматься web-разработкой, советую установить html редактор Notepad, зарегистировать пока самый простой и дешовый шаровый хостинг (советую ihc) и читать много документации по html и css.

Если у вас не отображается русский кириллический шрифт на сайте

1. Открываем html файл в Notepad, нажимаем Ctrl-A (выделяем весь код)

2. Заходим в "Кодировки" и выбираем "Кодировать в Utf-8"

3. Сохраняем файл и теперь можем писать на русском языке и у нас будет все нормально отображаться.

Если же вы скачали готовый шаблон

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

1. Повторить все то, что я описал выше!

2. Убрать все подключаемые шрифты.

Пример:

<script src="js/cufon-yui.js" type="text/javascript"></script> <script src="js/bebas-neue_400.font.js" type="text/javascript"></script>

3. Заменить в css файле в body, h2, h3 и так далее на классический web-шрифт, типа:

font-family: Tahoma, Arial, Helvetica, sans-serif;

4. Можно подключить нестандартные шрифты

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

Надеюсь я вам помог. До новых постов!

bayguzin.ru

Коды языков HTML - таблица кодов языков

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

По рекомендации W3C, следует указывать язык для каждой страницы, используя атрибут lang внутри тега <html>.

Пример кода указания языка страницы lang HTML документа

Пример указания языка на HTML веб странице:

Пример для спецификации XHTML:

Стандарт ISO 639-1 кодов языков

HTML использует стандарт кодов языков ISO 639-1.

Таблица кодов языков ниже содержит HTML код языка с указанием перевода на русский и английский.

Код ISO639-1 Язык на русском Язык на английском

ab	Абхазский	Abkhazian
av	Аварский	Avaric
ae	Авестийский	Avestan
az	Азербайджанский	Azerbaijani
ay	Аймара	Aymara
ak	Акан	Akan
sq	Албанский	Albanian
am	Амхарский	Amharic
en	Английский	English
ar	Арабский	Arabic
hy	Армянский	Armenian
as	Ассамский	Assamese
aa	Афарский	Afar
af	Африкаанс	Afrikaans
bm	Бамбара	Bambara
eu	Баскский	Basque
ba	Башкирский	Bashkir
be	Белорусский	Belarusian
bn	Бенгальский	Bengali (Bangla)
my	Бирманский	Burmese
bi	Бислама	Bislama
bg	Болгарский	Bulgarian
bs	Боснийский	Bosnian
br	Бретонский	Breton
cy	Валлийский	Welsh
hu	Венгерский	Hungarian
ve	Венда	Venda
vo	Волапюк	Volapük
wo	Волоф	Wolof
vi	Вьетнамский	Vietnamese
gl	Галисийский	Galician
lg	Ганда	Luganda, Ganda
hz	Гереро	Herero
kl	Гренландский	Kalaallisut, Greenlandic
el	Греческий (новогреческий)	Greek
ka	Грузинский	Georgian
gn	Гуарани	Guarani
gu	Гуджарати	Gujarati
gd	Гэльский	Gaelic (Scottish)
da	Датский	Danish
dz	Дзонг-кэ	Dzongkha
dv	Дивехи (Мальдивский)	Divehi, Dhivehi, Maldivian
zu	Зулу	Zulu
he	Иврит	Hebrew
ig	Игбо	Igbo
yi или ji	Идиш	Yiddish
id или in	Индонезийский	Indonesian
ia	Интерлингва	Interlingua
ie	Интерлингве	Interlingue
iu	Инуктитут	Inuktitut
ik	Инупиак	Inupiak
ga	Ирландский	Irish
is	Исландский	Icelandic
es	Испанский	Spanish
it	Итальянский	Italian
yo	Йоруба	Yoruba
kk	Казахский	Kazakh
kn	Каннада	Kannada
kr	Канури	Kanuri
ca	Каталанский	Catalan
ks	Кашмири	Kashmiri
qu	Кечуа	Quechua
ki	Кикуйю	Kikuyu
kj	Киньяма	Kwanyama
ky	Киргизский	Kyrgyz
zh	Китайский	Chinese
kv	Коми	Komi
kg	Конго	Kongo
ko	Корейский	Korean
kw	Корнский	Cornish
co	Корсиканский	Corsican
xh	Коса	Xhosa
ku	Курдский	Kurdish
km	Кхмерский	Khmer
lo	Лаосский	Lao
la	Латинский	Latin
lv	Латышский	Latvian (Lettish)
ln	Лингала	Lingala
lt	Литовский	Lithuanian
lu	Луба-катанга	Luga-Katanga
lb	Люксембургский	Luxembourgish
mk	Македонский	Macedonian
mg	Малагасийский	Malagasy
ms	Малайский	Malay
ml	Малаялам	Malayalam
mt	Мальтийский	Maltese
mi	Маори	Maori
mr	Маратхи	Marathi
mh	Маршалльский	Marshallese
mn	Монгольский	Mongolian
gv	Мэнский (Мэнкский)	Manx
nv	Навахо	Navajo
na	Науру	Nauru
nd	Ндебелесеверный	NorthernNdebele
nr	Ндебелеюжный	SouthernNdebele
ng	Ндунга	Ndonga
de	Немецкий	German
ne	Непальский	Nepali
nl	Нидерландский (Голландский)	Dutch
no	Норвежский	Norwegian
ny	Ньянджа	Chichewa, Chewa, Nyanja
nn	Нюнорск (новонорвежский)	Norwegiannynorsk
oj	Оджибве	Ojibwe
oc	Окситанский	Occitan
or	Ория	Oriya
om	Оромо	Oromo (AfaanOromo)
os	Осетинский	Ossetian
pi	Пали	Pāli
pa	Пенджабский	Punjabi (Eastern)
fa	Персидский	Persian (Farsi)
pl	Польский	Polish
pt	Португальский	Portuguese
ps	Пушту	Pashto,Pushto
rm	Ретороманский	Romansh
rw	Руанда	Kinyarwanda (Rwanda)
ro	Румынский	Romanian
rn	Рунди	Kirundi
ru	Русский	Russian
sm	Самоанский	Samoan
sg	Санго	Sango
sa	Санскрит	Sanskrit
sc	Сардинский	Sarda
ss	Свази	Swati
sr	Сербский	Serbian
si	Сингальский	Sinhalese
sd	Синдхи	Sindhi
sk	Словацкий	Slovak
sl	Словенский	Slovenian
so	Сомали	Somali
st	Сотоюжный	Sesotho
sw	Суахили	Swahili (Kiswahili)
su	Сунданский	Sundanese
tl	Тагальский	Tagalog
tg	Таджикский	Tajik
th	Тайский	Thai
ty	Таитянский	Tahitian
ta	Тамильский	Tamil
tt	Татарский	Tatar
tw	Тви	Twi
te	Телугу	Telugu
bo	Тибетский	Tibetan
ti	Тигринья	Tigrinya
to	Тонганский	Tonga
tn	Тсвана	Setswana
ts	Тсонга	Tsonga
tr	Турецкий	Turkish
tk	Туркменский	Turkmen
uz	Узбекский	Uzbek
ug	Уйгурский	Uyghur
uk	Украинский	Ukrainian
ur	Урду	Urdu
fo	Фарерский	Faroese
fj	Фиджи	Fijian
fl	Филиппинский	Pilipino
fi	Финский (Suomi)	Finnish
fr	Французский	French
fy	Фризский	WesternFrisian
ff	Фулах	Fula, Fulah, Pulaar, Pular
ha	Хауса	Hausa
hi	Хинди	Hindi
ho	Хиримоту	HiriMotu
hr	Хорватский	Croatian
cu	Церковнославянский (Старославянский)	OldChurchSlavonic, OldBulgarian
ch	Чаморро	Chamorro
ce	Чеченский	Chechen
cs	Чешский	Czech
za	Чжуанский	Zhuang,Chuang
cv	Чувашский	Chuvash
sv	Шведский	Swedish
sn	Шона	Shona
ee	Эве	Ewe
eo	Эсперанто	Esperanto
et	Эстонский	Estonian
jv	Яванский	Javanese
ja	Японский	Japanese

guruweba.com

Метатеги | htmlbook.ru

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

Метатеги для поисковых механизмов

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

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

Некоторые принципы, относящиеся к метатегам:

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

description

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

Пример 1. Использование Description

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>description</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="Сайт об HTML и создании сайтов"> </head> <body> <p>...</p> </body> </html>

keywords

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

Пример 2. Использование Keywords

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>keywords</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="Keywords" content="HTML, META, метатег, тег, поисковая система"> </head> <body> <p>...</p> </body> </html>

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

Автозагрузка страниц

Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv="refresh" (пример 3).

Пример 3. Автозагрузка страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Автозагрузка</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="refresh" content="5; URL=http://www.htmlbook.ru"> </head> <body> <p>...</p> </body> </html>

Браузер поймет эту запись, как ожидать 5 секунд, а затем загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт htmlbook.ru.

Этот метатег позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.

Кодировка

Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо установить параметр <meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">. Для операционной системы Windows и кириллицы charset обычно принимает значение utf-8 или windows-1251 (пример 4).

Пример 4. Выбор текущей кодировки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Кодировка</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <p>Кириллица</p> </body> </html>

Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда указание кодировки может принести определенный вред. Например, веб-сервер автоматически использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251, переводит текст в кодировку Windows. Получается двойное изменение символов, прочитать такой текст не просто. К счастью, подобная проблема уже отходит в прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне сервера.

htmlbook.ru

Meta теги. Учебник html

Глава 10

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

<html> - начало документа<head> - начало головы</head> - закрытие головы<body> - начало тела</body> - закрытие тела</html> - конец документа

Где между тегами <body> </body> указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами <head> </head> исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе.

С тегом <title> мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег <meta> (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.

http-equiv - указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
name - информационное имя. (применяется в паре с атрибутом content)
content - информационное содержание, связанное с мета именем (name)

Теперь на примерах будем вникать в суть дела.

Пример (очень нужный и важный):

Сначала расскажу зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку в которой была написана данная страница - формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку "иероглифов" у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере Вид->Кодировка->Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием.

Теперь разберём по "слогам" нашу запись:<meta http-equiv="Content-Type" - указываем что в этом мета теге мы будем заниматься Content-Type - типом содержанияContent="text/html; - а именно его текстомCharset=Windows-1251"> - документ для Windows - Кириллица где 1251 кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться Charset=Windows-1252

В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку UTF 8

То есть писать в голове документа вот так:

Пример:

В этой строчке говорится о том что язык Language документа является русским Content="ru"

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

Пример:

Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так name="author" указывает имя автора страницы, а name="copyright" авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того включив в заголовок документа такое описание Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду...

Пример:

Если хотите можете указать с помощью какого html редактора была написана данная страница.

Пример:

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

Пример:

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

Представьте что Вы ищете в какой либо поисковой системе сайт с информацией о том где можно продать те же рога и копыта :) Какие слова и фразы Вы будите вводить в строке "Поиск"? ну наверно что то типа: "Где продать коровьи рога?" или "Реализовать копыта по выгодной цене" Так вот если определить ключевые слова и так сказать предугадать мысли потенциального посетителя можно надеяться на то, что та или иная поисковая система выдаст ссылку на Ваш сайт в первых строчках результата поиска. Конечно ввод данного метоописателя не есть гарант того что именно Ваш сайт займет первые места в поиске по данным словам, но всё же не стоит им пренебрегать. Впрочем, оптимизация и раскрутка сайта это отдельная тема для разговора.

Помните что описание description не должно превышать по длине более 200 символов, а ключевые слова keywords 1000 символов, иначе это может пагубно отразится при продвижении Вашего сайта в ТОП поисковых систем.

Пример:

Думаю понятно.. здесь указывается адрес Вашего почтового ящика Publisher-Email и адрес сайта Publisher-URL

Пример:

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

Пример:

Для того чтобы ускорить загрузку страницы, а так же сэкономить трафик современные браузеры сохраняют посещаемые пользователем страницы в кэш (на жёсткий диск), и при повторном посещении загружают их не с сервера, а непосредственно с кэша. На самом деле такая функция хороша собой.. но есть одно "но", дело в том что в браузере может отображаться уже устаревшая информация, какой либо страницы. Представьте, к примеру, Ваш сайт представляет собой некое периодическое новостное интернет издание, а пользователь получит, вместо самых свежих новостей, уже устаревшую информацию, ту которая хранится у него в кэше!! и не разобравшись в чем "беда" примет Ваш сайт за "мертвый" заброшенный и никем не обновляемый.

Для того чтобы принудительно заставить браузер загружать ту или иную страницу не с жёсткого диска, а с сервера необходим мета тег с данным синтаксисом, где указывается день недели, число месяц год время (чч:мм:сс) и часовой пояс(GMT+03:00 - время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.

Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели

Месяцы:От Английского:Сокращения:

Январь	January	Jan
Февраль	February	Feb
Март	March	Mar
Апрель	April	Apr
Май	May	May
Июнь	June	Jun
Июль	July	Jul
Август	August	Aug
Сентябрь	September	Sep
Октябрь	October	Oct
Ноябрь	November	Nov
Декабрь	December	Dec

Дни недели:От Английского:Сокращения:

Понедельник	Monday	Mon
Вторник	Tuesday	Tue
Среда	Wednesday	Wed
Четверг	Thursday	Thu
Пятница	Friday	Fri
Суббота	Saturday	Sat
Воскресенье	Sunday	Sun

Атрибуту content можно присвоить значение "0" <meta http-equiv="Expires" content="0"> в этом случае страница всегда будет загружаться с сервера.

И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. - не искушайте судьбу..

Пример:

А такая запись вовсе запретит браузеру кэшировать данную страницу.

Пример:

Данный мета тег предназначен для подачи поисковому роботу той или иной команды.

Список возможных команд роботу:

Index - индексировать страницу
Noindex - не индексировать страницу
Follow - прослеживать гиперссылки на странице
Nofollow - не прослеживать гиперссылки на странице
All - индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)
None - не индексировать страницу и не прослеживать гиперссылки на странице

Пример:

Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:

<html><head><meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"><meta http-equiv="Refresh" content="10; URL=http://www.mysite/index.html"><title>Переадресация</title></head><body><font size="+1">Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:<br><a href="http://www.mysite.ru/index.html"><b>http://www.mysite.ru/</b></a><br>Нажмите <a href="http://www.mysite.ru/index.html">здесь</a> для того чтобы выполнить переход немедленно.<br>Приносим извинения за доставленные неудобства.</font></body></html>

Разберём и осмыслим строчку из примера:

meta http-equiv="Refresh" - Refresh (восстановление) указывает браузеру что данную страницу необходимо обновитьcontent="10; - обновить через заданное количество секунд (в нашем случае десять)URL=http://www.mysite/index.html"- адрес новой/другой страницы на которую следует перейти.

Пример:

А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.

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

Пример:

Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.

Page-Enter - Эффект появления страницы
Page- Exit - Эффект исчезновения страницы

В которых:

Duration - время действия эффекта в секундах
Transition - Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:

НомерОписание эффектаНомерОписание эффекта

0	Прямоугольники внутрь	12	Растворение
1	Прямоугольники наружу	13	Вертикальная панорама внутрь
2	Круг внутрь	14	Вертикальная панорама наружу
3	Круг наружу	15	Горизонтальная панорама внутрь
4	Наплыв наверх	16	Горизонтальная панорама наружу
5	Наплыв вниз	17	Уголки влево - вниз
6	Наплыв вправо	18	Уголки влево - вверх
7	Наплыв влево	19	Уголки вправо – вниз
8	Вертикальные жалюзи	20	Уголки вправо – вверх
9	Горизонтальные жалюзи	21	Случайные горизонтальные полосы
10	Шажки горизонтальные	22	Случайные вертикальные полосы
11	Шажки вертикальные	23	Случайный выбор эффекта

Пример:

Файл page1.html

<html><head><meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"><meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=1.0, Transition=12)"><title>Эффекты перехода страниц</title></head><body bgcolor="#c5ffa0"><center><h3>На заметку:</h3><font size="+1">Эффекты перехода с одной страницы на другую работают не во всех браузерах.</font><hr><br><font size="+1">Нажмите на "Перейти" чтобы перейти к следующей странице<br>и оценить эффект перехода от одной странице к другой.</font><br><br><a href="page2.html"><font size="+2">"Перейти"</font></a></center></body></html>

Файл page2.html

<html><head><meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"><meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=2.0, Transition=23)"><title>Эффекты перехода страниц</title></head><body bgcolor="#c0e4ff"><center><h3>На заметку:</h3><font size="+1">Эффекты открытия и закрытия веб-страниц будут видны только при переходе <br>от одной страницы к другой или же при помощи кнопок "назад" "вперёд". <br>При первом открыти страницы, а также во время перезагрузки<br>эффекты перехода видны не будут.</font><hr><br><font size="+1">Нажмите на "Перейти" чтобы перейти к следующей странице<br>и оценить эффект перехода от одной странице к другой.</font><br><br><a href="page1.html"><font size="+2">"Перейти"</font></a></center></body></html>

Ещё раз напомню о том что мета теги стоит применять умело и грамотно особенно это касается команд для робота и кодировки символов, иначе весь Ваш труд может пойти насмарку..
Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода "презентации" слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему "Откинетесь на спинку кресла и расслабьтесь..":) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт "в свои руки" или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!

www.webremeslo.ru

Как переводить html игры на русский язык на примере Virtual date games

Всем привет сегодня попытаемся рассказать вам, как переводить html игры на русский язык на примере Virtual date games Zoe.

Для этого вам понадобятся следующие программы: любой браузер (Opera 12, Mozilla Firefox, Pale Moon), Notepad++, Promt Professional.

Существует два способа переводить на русский html игры. Первый способ стоит использовать, если вы подключены к Интернету. Сначала переводятся все html файлы программой Promt. Затем улучшаем качество перевода с помощью онлайн переводчиков. Второй способ стоит использовать, если вы не подключены к Интернету. Всё то же самое только улучшаем качество перевода с помощью программ переводчиков, таких как Promt и Сократ Персональный. Второй способ немного хуже по причине, что онлайн переводчики помогают гораздо лучше. Но какой бы из способов вы не выбрали, машинного и онлайн перевода будет мало и вам всё равно придется усовершенствовать перевод самим.

Для начала создайте папку, куда будете сохранять русский вариант игры. Откройте окно Promt Professional и выберите Запустить приложения => Пакетный переводчик файлов.

В окне Пакетный переводчик файлов нажмите Файл => Добавить папку. Окно выбора папок будет разделено на две части. Слева нужно выбрать папку, из которой вы будете выбирать исходные файлы, а справа вы выбираете папку, в которую вы будете сохранять уже переведённые файлы. Затем нажимаете Ок и у вас откроется окно Параметры файлов. Так как мы будем переводить с английского на русский языковая пара у нас будет Английский-Русский. Профиль перевода можно оставить Универсальный. Напротив поля Рекурсивный перевод папок оставляем Да. Напротив Формировать уникальное имя файла поставим Нет и это единственное что поменяем. Если мы поставим Да и будем формировать уникальное имя файла тогда все ссылки в игре будут битыми, то есть ссылаться на старое имя файла. С настройками закончили и теперь жмём Ок. Ждём некоторое время файлы будут добавляться в очередь для перевода. Когда все файлы добавятся нажимаете Перевод => Перевести все или просто клавишу F9. Начнётся перевод html файлов, который займёт некоторое время.

Promt Professional сделает за вас самое трудное, переведёт все html файлы на русский а также изменит кодировку на utf-8. Если бы вы не использовали Promt Professional вам пришлось бы вручную изменять в каждом html файле кодировку на utf-8 или Windows-1251 с помощью программы Notepad++. В игре бывает от 100 до 2000 файлов и поэтому это заняло бы кучу времени. Да и ошибки ручного ввода никто не отменял. Если бы вы попробовали без изменения кодировки открыть html файл с помощью Notepad++ и изменить английский текст на русский и нажали сохранить, тогда у вас бы вместо текста сохранились вопросительные знаки и текст выглядел бы так (????? ???? ????? ? ?? ?????).

Переведённые файлы сохранятся в папку, которую вы выбирали. Так как вы перевели на русский язык только html файлы, вам в папку с русской игрой нужно будет скопировать все оставшиеся файлы из папки с английской игрой. Сделать это лучше всего с помощью программы Total Commander. Откройте в левой части папку с английской версией игры а в правой папку с русской версией игры. Отсортируйте файлы по типу. Теперь из папки с английской версией игры в папку с русской версией игры скопируйте все файлы js, css, jpeg и все остальные. В принципе после этого у вас игра уже будет переведена на русский язык, но не полностью. Машинный перевод он на то и машинный, что иногда не может точно определить смысл перевода. Для более точного перевода вам понадобиться программа Notepad++ для открытия и редактирования html файла. Для этого желательно хотя бы немного познакомиться с основами html. Одного дня на изучения основ html будет достаточно. Для финальной стадии перевода используйте Total Commander. Открывайте один и тот же html файл с помощью Notepad++ в английском и русском варианте. В русском варианте вы поймёте где находится переводимый текст и открыв английский вариант копируйте этот текст. Затем в браузере отрывайте две страницы онлайн переводчиков (https://translate.yandex.ru/ и https://translate.google.com/) и вставляйте в них английский вариант. Теперь у вас есть текст, переведенный тремя переводчиками. Из трёх вариантов перевода теперь вам стоит выбрать, а ещё чаще и самому отредактировать текст. Когда с переводом определились, исправляете в русском варианте html файла текст и нажимаете сохранить. После открываете вторую англо русскую пару html файлов и повторяете все снова. Но результат того стоит. По окончанию у вас будет хорошо переведённая игра.

Сколько времени займёт перевод игры? На 250 html файлов у вас уйдёт одна неделя. Поэтому игра Madisson с её 2000 файлов, пожалуй, так и не увидит свет. Это просто вопрос времени и с таким количеством файлов вам предстоит достаточно долго повозиться. А месяца 4 потратить на перевод игры вряд ли кто-нибудь захочет.

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

stoprog.ru

Редакция и форматирование текста. Учебник html

Глава 2

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

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

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

Так вот, для того чтобы на странице сайта разбить текст на параграфы, необходимо воспользоваться тегом <p> - собственно параграф.

Параграф имеет атрибут align "выравнивание" который в свою очередь может быть равен тому ли иному значению.

Рассмотрим на примерах:

С помощью параграфа можно расположить наш текст по центру:

<p align="center">Привет мир!!!</p>

По левому краю:

<p align="left">Привет мир!!!</p>

По правому краю:

<p align="right">Привет мир!!!</p>

Или же обоим краям документа:

<p align="justify">Привет мир!!! - здесь нужен текст подлиней чтобы эффект был хорошо виден при открытии документа</p>

Давайте слегка изменим нашу первую страничку:

<html><head><title>Мой первый сайт </title></head><body><p align="center">Привет мир!!!</p><br><p align="justify"> Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю вареньё!!! С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!! </p></body></html>

Так уже лучше, не правда ли?

Запомним некоторые вещи:

1) Тег <p> не может содержать в себе других параграфов, то есть писать вот так:

Нельзя! - это нелогично, как может один параграф содержать в себе другой?

2) Так же, нельзя писать пустые теги без текста или других тегов.

<p> здесь, что-то обязательно должно быть!!!</p>

3) По умолчанию Ваш текст выравнивается браузером по левому краю, так что если Вам так и надо атрибут align="left" для параграфа можно не указывать.

4) Тег <p> подразумевает в себе перенос строки, если это Вам не нужно, используйте вместо тега <p> тег <div> данный тег является альтернативой тегу <p> пишется так:

<div align="center">Привет мир!!!</div><div align="left">Привет мир!!!</div><div align="right">Привет мир!!!</div><div align="justify">Привет мир!!!</div>

Все то же самое, только данный тег не будет переносить текст на следующую строку и в него можно вставлять тег <p> по принципу:

<div><p align="left">Пишем слева</p><p align="right">Пишем справа</p>

А вообще тег <div> многофункциональный.. и по своей сути он является пустым блоком-контейнером, который может содержать в себе как текст, так и другие теги.. в общем, хочу сказать, что работа с текстом это далеко не основная задача тега <div>, но об остальных возможностях данного тега мы поговорим позже..

5) Еще одним способом выравнивания текста по центру является использование тега <center> любое содержание взятое в данный тег выравнивается по центру экрана. Пишется так:

<center>Привет мир!!!</center>

В наборе тегов html языка имеется шесть типов заголовков:

<h3> Привет мир!!! </h3>

<h4> Привет мир!!! </h4>

<h5> Привет мир!!! </h5>

<h6> Привет мир!!! </h6>

Думаю с этим понятно.. <hx> тег заголовка, где значение x является величиной буковок (может быть от одного до шести). Помните, что после использования того или иного заголовка происходит перенос строки - на то он и заголовок.

Заголовки дело хорошее и достаточно удобное, но ими можно выделять только маленькие кусочки текста, а что если нам надо выделить весь текст?

Знакомимся тег <font> в переводе на русский - "шрифт".

Тег <font> помимо прочих атрибутов, о которых ещё пойдет речь, имеет атрибут size - размер.

Пишется и выглядит это так:

<font size="+4">Привет мир!!!</font><font size="+2">Привет мир!!!</font><font size="+0">Привет мир!!!</font><font size="-1">Привет мир!!! </font><font size="-2">Привет мир!!!</font>

Добавим эти теги на нашу страницу.

<html><head><title>Мой первый сайт</title></head><body><center><h3>Привет мир!!!</h3></center><br><p align="justify"><font size="+1">Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!</font></p></body></html>

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

Для придания страничке красивого вида не обойтись без палитры с красками..

В html языке используется своя палитра красок. Вот основные цвета, выглядят они так:

#000000 black	#ffffff white	#ff0000 red
#ffa500 orange	#ffff00 yellow	#008000 green
#00ffff cyan	#0000ff blue	#800080 purple

Полная палитра базовых красок приведена здесь.

Один и тот же цвет можно задать двумя способами:используя шестнадцатеричное значение цвета RGB - например #008000 - зелёный цвет, либо используя константы цвета - green (для тех кто учил французский, green -зелёный.)

Краски есть, давайте рисовать!

Мы уже знакомы с тегом <font> у него есть еще один атрибут - color.

Так вот, если к примеру написать так:

<font color="#ff0000">Привет мир!!!</font> - То цвет шрифта станет красным. Попробуйте..

А можно так:

<font color="red">Привет мир!!!</font> - Будет тоже самое..

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

Есть еще один способ изменить цвет текста. Тег <body></body> "тело" - имеет атрибут text - "текст" если присудить этому атрибуту любой цвет из доступной палитры то весь текст в нашей странице окрасится, кроме тех мест, где мы "принудительно" указали другой цвет.

В строчке где стоит открывающий тег <body> пишем так:

Теперь весь текст у нас стал оранжевым кроме заголовка "Привет мир!!!" который мы отдельно перекрасили в красный.

А вот атрибут тега <body> bgcolor и его значение задает цвет фона страницы

<body bgcolor="#40caff"> - залили всё голубым..

Раскрасьте свою страницу на свой лад.. пробуйте, экспериментируйте!

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

На данный момент у меня получилось вот так: .. а у Вас?

<html><head><title>Мой первый сайт </title></head><body text="#484800" bgcolor="#e8e8e8"><center><h3><font color="#008000">Привет мир!!!</font></h3></center><p align="justify"><font size="+1">Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2" color="#ff0000">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!</font></p></body></html>

Обратите внимание на то, как пишется код, если в теге присутствует два и более атрибута. В нашей строчке <body text="#ff207b" bgcolor="#1a77f0"> у тега <body> два атрибута text и bgcolor мы просто пишем их подряд через пробел, не разделяя никакими другими знаками..

Здесь все достаточно просто..

Итак, новые теги:

<b> </b>	- Полужирный текст
<i> </i>	- Наклонный текст
<u> </u>	- Подчеркнутый текст
<strike> </strike>	- Перечеркнутый
<s> </s>	- Перечеркнутый (второй вариант, от первого ничем не отличается)
<tt> </tt>	- моноширинный шрифт
<small> </small>	- Малый
<big> </big>	- Большой
<sup> </sup>	- Верхний индекс
<sub> </sub>	- Нижний индекс

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

Вот пример на всякий случай…

<html><head><title>Стили текста</title></head><body><big><b><u>Научная статья.</u></b></big><br><br>Если разбавить дистиллированную воду Н<sub>2</sub>О сорока процентами этилового спирта С<sub>2</sub>Н<sub>5</sub>ОН то получится жидкость в 40<sup>о</sup> более известную широкой публике под названием <i>- водка.</i><br>Впервые данную пропорцию <s>придлажил</s> предложил <tt>Дмитрий Иванович МЕНДЕЛЕЕВ.</tt><br><br><br><small>Распитие спиртных напитков вредит вашему здоровью.</small></body></html>

Для того чтобы изменить шрифт документа необходимо дать указание браузеру, что мол от сель до сель показывать текст таким шрифтом. Для этого используем всё тот же тег <font> и его атрибут face - лицо то бишь..

Пишется так:

<font face="arial">Эта строчка будет написана с помощью шрифта Arial</font>

Пример:

<html><head><title>Использование различных шрифтов</title></head><body><font face="arial">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font><br><font face="times new roman">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font><br><font face="comic sans ms">Мало кто знает, как много надо знать для того, что бы знать, как мало мы знаем.</font><br></body></html>

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

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

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

Однако такая политика браузеров, в ряде случаев, не всегда оправданна.. Как например, написать стихи? Нет можно конечно после каждой строчки писать тег <br>, но есть вариант куда проще..

Знакомимся тег <pre>, текст заключённый в данный тег выводится браузерами на экран в том виде в котором он был набран, т.е. со всеми пробелами и переносами строк

Пример:

<html><head><title>Пробелы и перенос строки</title></head><body><pre> СЛОН. Дали туфельки слону. Взял он туфельку одну И сказал: - Нужны пошире, И не две, а все четыре! С. Я. Маршак. </pre></body></html>

Такие вот дела..

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

Расскажу про основные плюсы использования подобного редактора.
- Как правило, html редакторы имеют два окна, в одном Вы пишите код, а во втором сразу видите результат написанного! То есть теперь Вам не придётся постоянно сохранять текущий результат, чтобы открыть его браузером и оценить написанное.
- Как правило, они содержат в себе стандартные наборы шаблонов кода, в который Вы просто подставляете свою информацию, избавляя себя от прописывания тегов.
- Ну и "общие" удобства - сохранить, открыть, редактировать сразу несколько страниц сайта перелистывая их… много короче разных полезных штук.. одна подсветка синтаксиса чего стоит!
P.S. Однако, дальше буду писать эту книгу подразумевая, что Вы тренируетесь в стандартном блокноте… иначе мы друг друга не поймём.
Немного об этике и здоровье глаз..

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

www.webremeslo.ru

Шпаргалка HTML5 на русском языке

Прочитав название публикации: » Шпаргалка HTML5 на русском языке » -, все уже догадались про речь, но сначала пару абзацев про HTML5 в целом.

Работы над созданием HTML5 стартовали в 2004г. и идут по сегодняшней день. HTML5 планируется как самая универсальная и функциональная версия HTML (англ. HyperText Markup Language) ведь в создании HTML5, той или иной мерой принимают участие такие титаны отрасли как: Apple, Mozilla, Opera, Microsoft и Google. Отмечу, что именно Google Chrome, на данный момент, поддерживает больше всего элементов HTML5

Несмотря на то, что в HTML5 могут быть внесены изменения, ведь работа над спецификацией HTML 5 всё ещё ведётся и пока находиться в процессе, развитие технологий происходит столь стремительно, что уже скоро HTML5 будет принят и создавать сайты нужно будет пользуясь широкими возможностями HTML5 !

Кодерам и верстальщикам нужно учить новшества, теги и стандарты HTML5 уже сегодня, ведь несмотря на продолжающиеся работы над HTML5, некоторые его возможности уже вполне успешно используют при создание сайтов. Естественно, что начинать учить HTML5 нужно с тегов, ведь в HTML5 появились новые теги, а некоторые старые поддерживаться не будут. Также в HTML5 пришло множество тегов из HTML4. И что может быть лучше и удобней в изучени чего ли бо чем шпаргалка? Встречайте:

первая в рунете шпаргалка HTML5 на русском языке

Первая в рунете шпаргалка HTML5 на русском языке, включает в себя новые элементы HTML5, которые раньше массово использовались, но прописывались в названиях стилей. Например footer, header, section, article и другие. Кроме этого, шпаргалка HTML5 на русском содержит все теги старой версии HTML4, которые перешли в HTML5. Также, шпаргалка HTML5 на русском содержит теги, которые не поддерживаются HTML5.

шпаргалка HTML5 на русском языке, сделана в формате А4

Первая в рунете шпаргалка HTML5 на русском языке сделана в формате А4, поэтому Вам будет удобно ее распечатать и держать под рукой. Отмечу, что шпаргалка HTML5 на русском описывает все теги одним рядком, максимально передавая предназначение тега. Наша шпаргалка HTML5 на русском языке будет постоянно дорабатываться и обновляться по мере исключения или добавления тегов в HTML5. Скачать «шпаргалка HTML5 на русском» вы можете по ссылке ниже. В архиве вы найдете 1 pdf высокого качества и два jpg файла в разных расширениях.

В архиве два jpg фаила в расширениях 1024×1448 и 2480×3508

upd 29.10.2014

Прошло уже больше двух лет с момента написания поста и собственно создания шпаргалки по HTML 5. За это время шпаргалку скачали 3600 раз), мне очень приятно, надеюсь она была полезна тем кто изучал верстку на HTML 5. Я очень много научился и узнал на различных форумах и сайтах, и созданием шпаргалки хотел как бы отблагодарить, отдать долг). По чему я сегодня пишу обновление в этом посту, потому что именно сегодня наконец то закончена разработка HTML5 !

Разработка HTML5 официально завершена

HTML5 официально «функционально завершен». По установленным мировым стандартам Worldwide Web Consortium (W3C). Существуют еще некоторые тесты, которые нужно будет сделать, и он еще не стал официальным стандартом Web, но сейчас можно с уверенностью сказать, что там не будет никаких новых функций, по сравнению с текущей версией.

Это означает, что веб-дизайнеры и производители приложений теперь имеют «стабильную мишень» для плавного перехода на новый стандарт к 2015 году. Язык разметки HTML5 позволяет разработчикам добавить страницы функционалом, который ранее требовал автономных приложений или дополнительного программного обеспечения, такого как Java, Adobe Flash или Microsoft (MSFT, Fortune 500) Silverlight. Он поддерживает потоковое видео и услуги геолокации, оффлайновые инструменты и сенсорное управление, среди прочих прибамбасов.

Потребовалось более 10 лет для разработки нового стандарта. Генеральный директор W3C Джефф Джаффе в подготовленном несколько дней назад заявлении сообщил, что по состоянию на сегодня, разработчики знают, что они могут положиться на HTML5 в ближайшие годы. «Кроме того, разработчики будут знать, какие навыки развивать, чтобы выйти на смартфоны, автомобили, телевизоры, электронные книги, цифровые знаки и устройства, пока еще не известные», добавил он.

Последние версии Microsoft Internet Explorer, Google Chrome, Mozilla Firefox и Apple Safari уже совместимы с большинством элементов HTML5. W3C уже работает над HTML 5.1, первые части которого были только что представлены в виде проекта.

Поблагодарить