11 заметок с тегом

html РСС

27 марта 2010, 13:06

Универсальный шаблон HTML (dtd) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
  <link rel="stylesheet" type="text/css" href="css/base.css">

  <title>New demo</title>
  <style type="text/css">
  	html, body {
  		margin: 0;
  		padding: 0;
  		width: 100%;
  	}
  </style>

  <script type="text/javascript"></script>
</head>
<body>

</body>

</html>
html
нет комментариев

15 января 2010, 18:25

HTML CharCodes for special symbols (Spanish, Italian, German, French)

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

Простой выход — помахать дороговизной переработки, и объяснить то-сё, а можно просто сделать через ВИЗИВИГ реплейсы непонятных символов в альтернативные спецсимволы, а в простых инпутах заставить вставлять вместо тех символов спец-коды.

Пример таблички (бабосики):
Display Friendly Code Numerical Code Hex Code Description
€ &euro; &#128; &#x80; Euro
₣ &#8355; &#x20A3; Franc
₧ &#8359; &#x20A7; Peseta
₤ &#x20A4; Lira





html   utf8
1 комментарий

3 сентября 2009, 11:37

Advancing Textarea (Google chrome hints)

TextArea гибкий и расширяемый тэг. У него есть удобный параметр wrap, который определяет правило переноса строк. Имеет два значения hard (по-умлчанию) и soft off :)

Добавив ивент onclick=«select();» мы можем превратить его в удобный инструмиент для копипаста ;)

В конечном итоге получим простой сриптик 
<!-- со скролом, для длииинных строк -->
<textarea onclick="select();" style="width: 600px; height: 36px;" wrap="off"></textarea>
<!-- без скрола -->
<textarea onclick="select();" style="width: 600px; height: 16px;"></textarea>
Хром умеет ресайзить любые textarea, это можно ограничить или упразнить 
.limit_ta {
	/* ограничиваем textarea по высоте и ширине */
	max-width: 100px; 
	max-height: 100px;
}
.cancel_resize {
	resize: none; /* отключаем ресайз textarea */
}
.wrapoff {
	/* css analog wrap='off' */
	white-space: nowrap;
	overflow: auto;
}
html   шпаргалка
нет комментариев

12 июня 2009, 16:20

Забытые тэги... BDO

Замечательный тэг %) Кто о нём знает, отпишитесь ;))

BDO — Bi-directional Override

Что же он делает — всего лишь указывает направление текста, слева-направо, справа-налево ;) через параметр dir (дирекшон)
  • rtl — right to left
  • ltr — left to right (по умолчанию)
<bdo dir="rtl">Sample Fun Text</bdo>

Выглядит вот так: Sample Fun Text
А на самом деле, направление текста можно изменить у всех текстовых блоках, через css 
div { 
  direction: rtl
}

ps: Также параметр dir есть у тега HTML 
<HTML dir="RTL">
html   Забытые тэги
2 комментария

5 июня 2009, 18:09

Забытые тэги... COL

Эта заметка о забытых тэгах. Она будет со временем пополняться, ибо таких уже достаточно, как ни странно ;)
Ну что же, начнём:
  • У table есть замечательный тэг col, который я, честно говоря, не встречал нигде, случайно наткнувшись на него в каких-то мануалах. Что же он нам даёт? :) Спросите вы ;) А всё просто, мы можем установить любой колонке фиксированную длину (width). Использовать его очень прочто, структура такова: 
    <table border="1">
	<col width="140"/>
	<col width="360"/>
	<tr>
		<td>Колонка 1</td>
		<td>Колонка 2</td>
	</tr>
</table>
    Это нам даёт огромное преимущество в управлении таблицами, ибо раньше нужно было много гемора, что бы выровнять длину колонок двух разных таблиц ;)
to be continued...
html   Забытые тэги
1 комментарий

20 мая 2009, 17:49

HTML текст под произвольным углом

Для того что бы отобразить произвольный текст под углом, мы в нормальных браузерах используем тип svg+xml для object, и через параметр data, передаём нужные данные для обработки!
А именно параметры, и теги:
  • x=’-200’ — координата начала строки текста от верхней стороны object;
  • y=’18’ — координата базовой линии строки текста от левой стороны object;
  • font-family=’Arial’ font-size=’12’ — размер, гарнитура шрифта;
  • fill=’#000000’ — цвет текста;
  • transform=’rotate(-90)’ — поворачиваем текст на -90 градусов.
<object type="image/svg+xml" data="data:image/svg+xml; charset=utf-8,
<svg xmlns='http://www.w3.org/2000/svg'>
<text x='-200' y='18' font-family='Arial' font-size='12' fill='#000000' 
transform='rotate(-90)' text-rendering='optimizeSpeed'>
вертикальный текст
</text>
</svg>">
</object>

Но есть ещё друг ИЕ (буеее:), и для него есть css filter, а именно:
  • вертикальный фильтр %)
  • горизонтальный фильтр 8)
  • под произвольным углом :D
.vertical object { 
	/* скрываем svg */
	display:none; 
} 
.vertical span { 
	filter: flipv() fliph(); 
	writing-mode: tb-rl; 
}
.vertical_angle span { 
	writing-mode:lr-tb;
	filter:progid:DXImageTransform.Microsoft.Matrix(
	M11='0.985', M12='-0.174', M21='0.174', M22='0.985', 
	SizingMethod="auto expand");
}
  • M11 = cos(угла в градусах)
  • M12 = -sin(угла в градусах)
  • M21 = sin(угла в градусах)
  • M22 = cos(угла в градусах)


ps: Текст будет непредсказуемо размещаться на странице, поэтому делаем ему абсолютное позиционирование! А блок в котором будет текст, вместе с объектом делаем фиксированной длины/ширины
html   css
1 комментарий

25 марта 2009, 13:29

Тире, минус, перенос %) Избранное

Просто для себя, очень часто нужно скопировать %)
Итак, девять различных чёрточек:
ЗнакHTMLНазваниеНазначение и употребление
- - дефисоминус вместо всех остальных чёрточек при отсутствии технической возможности
‐ &#x2010; дефис для разделения частей слова: «светло‐серый», «по‐моему», «кое‐кто» и т. п.
− &minus; минус математические выражения: 2 − 3 = −1
‒ &#x2012; цифровая чёрточка номера телефонов и другие цифровые коды
­ &shy; символ переноса в (длинных) словах в тех местах, где можно сделать перенос
⁃ &#x2043; чёрточный буллит маркер списка
— &ndash; короткое тире западная типографика
— &mdash; длинное тире русская типографика
― &#x2015; горизонтальная черта диалоги (в западной типографике)

И, для сравнения, в одной строке: - ‐ − ‒ ­ ⁃ — — ―

шпаргалка   html
1 комментарий

27 июня 2008, 13:27

Как получить название id элемента через this?

Найдено методом тыка! :)
После часового копания в свалке доков и стандартов

Все просто:
<a id="id_elementa" onClick="alert(this.id)">click</a>
id   html
1 комментарий

26 мая 2008, 15:19

Валидная страница с флешем 

<object width="ДЛИНА" height="ШИРИНА" 
vspace="0" hspace="0"  type="application/x-shockwave-flash" 
data="ПУТЬ_К_ФЛЕШКЕ">
    <param name="allowScriptAccess" value="sameDomain"/>
    <param name="movie" value="ПУТЬ_К_ФЛЕШКЕ"/>
    <param name="bgcolor" value="#FFFFFF"/>
    <param name="quality" value="high"/>
    <param name="wmode" value="transparent"/>
    <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer"/>
</object>
embedet   flash   html   validate   w3c
нет комментариев

26 мая 2008, 15:17

Книги по програмингу (старенькие, запыленные)

Книги по MySQL
Структуризированный язык запросов (SQL)
Системы обработки информации — язык баз данных SQL
MySQL и mSQL
Введение в SQL
Введение в реляционные базы данныx
ОСНОВЫ ПРОЕКТИРОВАНИЯ РЕЛЯЦИОННЫХ БАЗ ДАННЫХ
Версия пакета MySQL : 3.20.29
Мартин Грубер: Понимание SQL
Книги по CGI
CGI Developer’s Guide
CGI Programming Unleashed
CGI reference
CGI — Общий Интерфейс Шлюзов
Oписание CGI
CGI.pm — a Perl5 CGI Library
Книги по HTML
HTML учёбник
Изучение HTML 3.2 на примерах
HTML-справочник
Практическое руководство по HTML
Словарь тагов
Руководство по стилям для создания online гипертекста 
Clean up your Web pages with HTML TIDY
Книги по CSS
WebClub | Спецификация CSS1
Рекомендация W3C | Спецификация CSS2
Книги по JS
Центром Информационных Технологий: JavaScript
Практическое введение в программирование на JavaScript
ВВЕДЕНИЕ В JAVASCRIPT
JavaScript Bible 4th Edition
JS object model
Руководство по JavaScript
JavaScript: Краткое введение и справочникПримеры!
Книги по PHP
PHP 4
Учебник РНР
Руководство по PHP
PHPMySQL Programming
about php rus
cgi   css   css2   html   javascript   mysql   php
нет комментариев

1 мая 2008, 0:32

Empty HTML and reset CSS — just start work!

Очень часто, в начале проекта (верстка, тестовый файлик), каждый раз нужно писать стандартные вещи <html><head><body.. — задолбало!
Просто заготовочки для начала работы:


html   css   yass
нет комментариев