memo.xight.org

日々のメモ

カテゴリ : HTML

1ページ目 / 全3ページ

<object>を利用した,外部のHTMLファイルを読み込む方法

Summary

<iframe>を利用しないで,外部のHTMLファイルを読み込む方法.

For Internet Explorer

<object
    classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13"
    data="some.html">
	<p>backup content</p>
</object>


For Internet Explorer以外

<object
    type="text/html"
    data="some.html">
	<p>backup content</p>
</object>


読み込ませるページ

...
<body style="border:0;overflow:visible">
...


Reference

aplus moments - Insert HTML page into another HTML page
http://www.aplus.co.yu/web-dev/insert-html-page-into-another-html-page/

Reference 追記 [2006-11-27]

WWW WATCH - 2006-11-25 - IFRAME を使わない方法の補足
http://hyper-text.org/archives/2006/11/object_element.shtml

via

phpspot開発日誌 - 2006-11-24 - IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法
http://phpspot.org/blog/archives/2006/11/iframehtmlhtml.html

Webページにソースコードを表示するには

方法

1. <textarea>
Ctrl+A で Copy & Paste が楽.

2. <pre> + CSS

3. <pre> + <code> + CSS

4. <textarea> + dp.SyntaxHighlighter[2006-06-12-7]

CSSの例

pre.code {
	font-family: monospace;
	white-space:pre;
	overflow:scroll;
}


vimの設定

.vimrc に記述
" html escape function
:function HtmlEscape()
silent s/&/\&/eg
silent s/ silent s/>/\>/eg
:endfunction


対象範囲を選択後,
:call HtmlEscape()


Reference

i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
http://www.ideaxidea.com/archives/2006/09/post_129.html

404 Blog Not Found:ソースを貼付ける50の方法
http://blog.livedoor.jp/dankogai/archives/50621177.html

hail2u.net - Weblog - pre要素へのスタイル指定
http://hail2u.net/blog/webdesign/styling-pre.html

2xup - 2006-09-07 - pre 要素のスタイル定義とマークアップ
http://2xup.org/log/2006/09/07-0056

hxxk.jp - 2006-09-06 - Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
http://hxxk.jp/2006/09/06/2210

i d e a * i d e a - 2006-09-07 - ソースの貼り付け方法その後
http://www.ideaxidea.com/archives/2006/09/post_131.html

イメージツールバーを無効にする方法

Summary

画像をマウスオーバーすることで表示されるイメージツールバーを,
無効化するHTMLの記述方法.

Firefoxの拡張 "Image Toolbar" でも有効.

ページ全体でイメージツールバーを無効にする

<meta http-equiv="Imagetoolbar" content="no" />


画像単位でイメージツールバーを無効にする

<img src="path/to/image.gif" alt="サンプル" galleryimg="no" />


Reference

TAG index - HTMLタグリスト/ページ全般タグ/イメージツールバーを無効にする (ページ全体)
http://www.tagindex.com/html_tag/page/meta_12.html

TAG index - HTMLタグリスト/イメージタグ/イメージツールバーを無効にする (画像単位)
http://www.tagindex.com/html_tag/img/img_gall.html

Image Toolbar :: Mozilla Add-ons :: Add Features to Mozilla Software
https://addons.mozilla.org/firefox/243/

target="_blank" を使わないで新しいウィンドウでリンクを開く方法

Summary

target="_blank" を使わないで新しいウィンドウでリンクを開くための手法.
Behaviour.js を利用すればより簡単,かつHTMLを汚さずに実装可能.
Sample

Source

var myrules = {
	'.popup' : function(el){
		var href = el.getAttribute('href');
		if (href){
			el.onclick    = function(){ window.open(href); return false;}
			el.onkeypress = function(){ window.open(href); return false;}
		}
	}
};
Behaviour.register(myrules);


<script type="text/javascript" src="behaviour.js"></script>

<a href="index.html">Normal</a>
<a class="popup" href="index.html">Pop up</a>


Reference

Behaviour : Using CSS selectors to apply Javascript behaviours
http://bennolan.com/behaviour/

via

cl.pocari.org - 2006-03-14
http://cl.pocari.org/2006-03-14-5.html

HTML, XML 検証サービス

HTML/XHTML Validator

  o The W3C Markup Validation Service
    HTML/XHTML Validator の定番
    http://validator.w3.org/

  o Another HTML-lint
    http://openlab.ring.gr.jp/k16/htmllint/

  o WDG HTML Validator
    http://www.htmlhelp.com/tools/validator/

CSS Validator

  o W3C CSS 検証サービス
    CSS Validator の定番
    http://jigsaw.w3.org/css-validator/

アクセシビリティ

  o Watchfire WebXACT
    http://webxact.watchfire.com/

RDF/XML Validator

  o W3C RDF Validation Service
    http://www.w3.org/RDF/Validator/

  o FoaF Explorer
    http://xml.mfd-consult.dk/foaf/explorer/

  o ccValidator
    http://www.yergler.net/projects/ccvalidator/

RSS Validator

  o Feed Validator for Atom and RSS
    http://feedvalidator.org/

  o Redland RSS 1.0 Validator and Viewer
    http://librdf.org/rss/

Reference

ValidatorCollection - HTML/XML 検証サービス一覧
http://hpcgi3.nifty.com/spiegel/?ValidatorCollection

Windows Media 形式の動画を埋め込むHTMLソースコード

Summary

Internet Explorer でも Firefox でも再生できるような動画の埋め込み方.

ポイント

o Internet Explorer は <embed> , <object> の両方で再生可能.
o Firefox は <embed> タグしか認識しない.
o <object> タグ内で <embed> タグを利用することで,双方のブラウザで再生可能.

Sample

<object
	id="Player"
	width="480"
	height="360"
	classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
	type="application/x-oleobject"
>
	<param name="autoStart" value="True">
	<param name="URL" value="path/to/file.asx">
	<embed
		width="480"
		height="360"
		type="application/x-mplayer2"
		src="pato/to/file.asx"
		pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=media&sba=plugin"
		name="mediaplayer"
		showcontrols="1"
		autostart="1"
		showstatusbar="0"
		showdisplay="0"
	>
</embed>
</object>


[2006-12-07]追記

「再生ソフトウェアを限定しないほうが良い」との意見もある.

<object
	data="path/to/file"
	type="application/x-mplayer2"
	width="300"
	height="200"
>
	<param name="src" value="path/to/file" />
	<param name="autostart" value="true" />
</object>


Reference

Microsoft - Windows Media Player SDK - Windows Media Player を埋め込む
http://www.microsoft.com/JAPAN/developer/library/wmplay/embeddingwindowsmediaplayer.htm

Reference 追記 [2006-12-07]

ぽかぽかWeb研究室 - マルチメディアファイルを XHTML 文書に埋め込む
http://yupotan.sppd.ne.jp/web/xhtml-multimedia.html

mozillaZine 日本語版フォーラム - XHTMLページに埋め込んだMediaPlayerの...
http://mozillazine.jp/forums/viewtopic.php?p=3482&sid=ed6003e0483461effd8643760e32c258

HTMLとアクセシビリティ

テーブルとアクセシビリティ

kanzaki.com - テーブルとアクセシビリティ
http://www.kanzaki.com/docs/html/tbl-access.html

フォームとアクセシビリティ

kanzaki.com - フォームとアクセシビリティ
http://www.kanzaki.com/docs/html/htminfo33.html

入力フォーム

みんなのウェブ - 迷わず使える入力フォーム
http://www2.nict.go.jp/ts/barrierfree/accessibility/minna/point7.html

身体が不自由な方による貴重な意見

A.A.O. - ウェブを活用する障害者の声
http://www.aao.ne.jp/user/usersvoice/

携帯サイトのつくりかた

Reference

携帯.HTML - 携帯サイトのフォームに入力項目を作る
http://www3.tokai.or.jp/janboon/hphtml/form/input.html
NTTドコモ - 作ろうiモードコンテンツ - XHTML
http://www.nttdocomo.co.jp/p_s/imode/xhtml/
NTTドコモ - 作ろうiモードコンテンツ - HTML
http://www.nttdocomo.co.jp/p_s/imode/tag/
KDDI au: EZfactory
http://www.au.kddi.com/ezfactory/
ボーダフォン - Developers Support Site
http://developers.vodafone.jp/dp/tool_dl/list/

Mobile Link Discovery 仕様

Summary

XHTML/RSS/Atom においてモバイル版 URL へのリンクをメタデータに埋め込む仕様: Mobile Link Discovery について

XHTML

<link rel="alternate" media="handheld" type="text/html" href="{mobile URL}" />


Atom

<link rel="alternate" x:media="handheld" type="text/html" href="{mobile URL}" />


RSS

<rss xmlns:xhtml="http://www.w3.org/1999/xhtml">
<xhtml:link rel="alternate" media="handheld" type="text/html" href="{mobile URL}" />


Reference

Six Apart - Docs: Mobile Link Discovery spec
http://www.sixapart.jp/docs/tech/mobile_link_discovery_en.html
Six Apart - Docs: Mobile Link Discovery 仕様
http://www.sixapart.jp/docs/tech/mobile_link_discovery_ja.html

via

cl.pocari.org - 2005-12-09 - Mobile Link Discovery 仕様
http://cl.pocari.org/2005-12-09-4.html

Media Playerを埋め込む

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer">
<param name="Filename" value="URL">
<param name="AutoStart" value="自動スタート true | false">
<param name="AutoRewind" value="自動巻き戻し true | false">
<param name="PlayCount" value="再生回数 0で無限">
<param name="AutoRewind" value="自動巻き戻し true | false">
<param name="Volume" value="音量 -10000~0">
<param name="Balance" value="左右の音量バランス -10000>0<10000">
<param name="ShowControls" value="全てのコントロールバー true | false">
<param name="ShowAudioControls" value="音量コントロールバー true | false">
<param name="ShowDisplay" value="タイトル・著作権 true | false">
<param name="ShowGotoBar" value="関連リンクバー true | false">
<param name="ShowPositionControls" value="早送り・巻き戻しバー true | false">
<param name="ShowStatusBar" value="ステータスバー true | false">
<param name="ShowTracker" value="再生位置バー true | false">

Reference

Dynamic HTML Styling : DHTML Media Player
http://members.at.infoseek.co.jp/dhtml_s/web_dhtml/dhtml_media_player.htm

エンティティの参照

良く使うもの

< &lt; 左大不等号
> &gt; 右大不等号
& &amp; アンパサンド,アンド
' &apos; アポストロフィ
" &quot; ダブルクォート
` ' &nbsp; 半角スペース
- Reference
Character entity references in HTML 4
http://www.w3.org/TR/REC-html40/sgml/entities.html
Studying XML -- second step -- [ エスケープ ]
http://www.asahi-net.or.jp/~ps8a-okzk/xml/xml_2/escape.html

ブラウザ上でPDFを扱う方法

PDFの任意のページにリンクする

<a href="example.pdf#page=3">3ページ目を表示</a>


<embed>タグを利用

<embed
	src="test.pdf"
	width="60%"
	height="80%"
/>

<object>タグを利用

<object
	classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"
	width="60%"
	height="80%"
	id="Pdf1"
>
<param name="SRC" value="test.pdf" />
</object>

Reference

http://www.keiyu.com/doc/pdflink.htm#02