スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

HTML初心者のメモ

uvs130922-027.png私の復習用、気が向いたら更新っ!

**更新履歴**
更新
メニュー
 HTML文書の基本
文書本体の基本構造テキスト
ページフォント
画像リンク
リストテーブル
フォーム
リンク
コピペで飾ろうホームページ 
みんなのタグ辞書/HTMLタグ辞書
HTMLの色指定について

TeraPadを立ち上げて、ファイルを保存→test.html などの様に保存する。  TeraPadダウンロード先
下のテンプレートは毎回コピー貼り付けし、下のhtml内容にあった記述をすれば練習可能

テンプレート
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title></title>
</head>
<body>
</body>
</html>

第2章 HTML文書の基本
<!DOCTYPE> DTD(文字型定義) 
<html lang="ja"> HTMLの各要素の最上位に位置する要素 <html lang="ja">日本語
<head> ヘッダ情報(文書先頭に記述する文章に関する情報)を表す
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> meta要素,文字コード指定
<title></title> タイトルを表す
</head>
<body> 文書の本体を表す ヘッダー ボディー フッダー の真ん中みたいな物。
</body>
</html>

第3章 文書本体の基本構造
<h1>  見出し 一番大きな見出し<h1>から<h6> <h1>は1番目の見出しなので、いきなり<h2>を書くのはダメ!
<div> 要素のグループ化(汎用ブロックレベル要素)
<span> 要素のグループ化(汎用インライン要素)
<address> 文書に関する問い合わせ先

第4章 テキスト
<p> 段落
<br> 改行 (終了タグなし、空要素)
<blockquote> 引用
<em> 強調   これが強調
<strong> より強い強調  これがより強い強調
<sup> 上付文字   これが上付文字
<sub> 下付文字   これが下付文字
<pre> 整形済みのテキストを(改行などを反映させて)そのまま表示

第5章 ページ
<body bgcolor ="背景色">
<body text = "テキストの色">
<body background = "背景画像">
<body background="背景画像" bgcolor="背景色" text="テキストの色"> 複数の属性を同時に指定
色の指定方法
RGB(赤緑青)それぞれの強さを16進数2桁で表現し、頭に必ず#をつける(16進数を表す)

<body bgcolor="#ffffff"> 背景色を白に
<body bgcolor="#000000" text="#ff0000"> 背景色を黒に、文字色を赤に
<body bgcolor="blue"> 背景色を青に

画像の指定方法
表示したい画像の場所(URL)を指定する
例 <body background="images/bg.gif"> デスクトップにあるimagesフォルダの中のbg.gifを表示する
※ブラウザによっては無指定で白になるとは限らないので、背景色は必ず指定。

<div align="★"> ★=ブロック内の配置を指定
<div align="left">右寄せ</div>
<div align="center">真ん中(センタリング)</div>
<div align="right">右寄せ</div>

<center>~</center> センタリング
<h1 align="center">この見出し1はセンタリングされます</h1> 見出し1をセンタリング
<p align="center">この段落はセンタリングされます</p> 段落をセンタリング

サイズの指定方法
<hr> 水平線を表示
<hr size="5"> サイズ(高さ)を5ピクセルに
<hr width="100"> 幅を100ピクセルに
<hr width="70%"> 幅を70%に
<hr width="200" align="center"> 幅を200ピクセルにし、センタリング
<hr size="8" noshade> サイズ(高さ)を8ピクセル、立体的な影を付けない
<hr color="green"> 水平線のカラーを緑に

第6章 フォント
<font size = "文字サイズ">~<font>

<font size = "5"> 文字サイズを5に
<font size ="+3"> 文字サイズを3段階大きく
<font size = "-1"> 文字サイズを1段階小さく
<font color="色"></font> 文字色を指定
<b> ボールド(太字)     これがボールド
<i> イタリック(斜体)     これが斜体
<u> アンダーライン(下線)  これが下線
<s> 取消線        これが取消線
<tt> 等幅テキスト    これが等幅テキスト

第7章 画像
<img src="画像URL" alt="名前" width="横のサイズ" height="縦のサイズ"/>
imgタグでのalign="" 画像のテキスト配置を決める
left=画像左に回りこませる right=画像を右に回りこませる
top=画像の上を基準にテキストを配備 middle=中央 bottom=下
hspace="" 画像左右に余白
vspace="" 画像上下に余白

第8章 リンク
<a href="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL" _fcksavedurl="URL">リンク先にジャンプ</a> リンク先にジャンプ
<target=""> _blank(新規ウィンドウ) main(そのページで表示)
<a href="URL" target="_blank"><img src="画像URL" alt="画像の名前" border="0" width="640" height="360"/></a>
画像を横640縦360枠線なしで表示し、画像をクリックすると新規ウィンドウでURL先にジャンプ

<a href="#A">Aの位置へジャンプ</a> #アンカー名でアンカー先にジャンプ
<a name="A">ここがAの位置</a> <a name>タグでアンカー名を付ける
<a href="mailto:メアド">メールはこちら</a> メール作成画面を表示相対パス リンク元のファイルから見た、リンク先の道筋
絶対パス http;//から始まるリンク先の事
リンク先がhttp;で始まる場合は必ず末尾に/を付ける
<body link="リンクの色">
<body vlink="訪問済みリンクの色">
<body alink="アクティブリンクの色">

第9章 リスト
順不同リスト
<ul>
<li>リスト</li>
<li>リスト2</li>
</ul>

<ul type="disk"> 箇条書きのマークを●に(初期値)
<ul type="circle"> 箇条書きのマークを○に
<ul type="square"> 箇条書きのマークを■
リストまとめ
<ul></ul> 順不同リスト  ・リスト
<ol></ol> 番号順リスト  1.リスト 2.リスト
<dl></dl> 定義リスト
<ol type="1"> 1.2.3(デフォルト)
<ol type="A"> A.B.C
<ol type="a"> a.b.c
<ol start="★"> ★・・・開始番号 6とした場合、6.7.8・・・

第10章 テーブル
<table border="1">
<capiton>テーブル</capiton>
<tr>
<td>テーブル1行目</td>
</tr>
<tr>
<td>テーブル2行目</td>
</tr>
</table>
テーブルの構成
<table> </table> テーブルを作る際に必要
<capiton>内容を表す見出し</caption>
<tr> テーブルの行
<td> テーブルの列
<th> 見出しのテーブルの列
テーブルのサイズ
<table widht="☆" height="★"> ☆・・セルの幅 ★・・セルの高さ
<td widht="" height="">
<th widht="" height="">
テーブルの色指定
<table bgcolor="★">  ★・・テーブルの背景色
<tr bgcolor="★">   ★・・行の背景式
<td bgcolor="★">   ★・・セルの背景式
<th bgcolor="★">  ★・・見出しセルの背景色
セルの配置
<table align="☆" valign="★"> ☆・・・セル内配置(left/center/right) ★・・セル内配置(top/middle/bottom)
セルの余白
<table cellspacing="☆" cellpadding="★">  ☆・・セル間隔 ★・・セル内余白
セル内の自動改行
<td nowrap>  セル内の自動改行(折り返し)禁止
セルの結合
<td colspan="☆" rowspan="★"> ☆・・結合するセルの数(横) ★・・結合するセルの数(縦)

第12章フォーム

<form action="☆" method="★" enctype="□">
☆・・フォームデータの送信先
★・・フォームデータの送信方法(get/post)初期値get
□・・フォームデータのMINEタイプ
method="get" 大量のデータを送る場合には向かない
method="post" データは独立して送られるため、大きなデータを扱える

<input type="submit" value="送信"> 送信ボタン  
<input type="reset" value="取消"> リセットボタン  
<input type="button" value="ボタン"> ボタン  
<input type="text"> 1行のテキストフィールド  
<input type="password"> パスワード入力欄  

<input type="radio">
 ラジオボタン  
<input type="radio" name="sport" value="swim" checked>水泳<br>  水泳
<input type="radio" name="sport" value="soccer">サッカー<br>  サッカー
<input type="radio" name="sport" value="baseball">野球<br>  野球
※checked属性で、最初からその項目が選択状態

<input type="checkbox"> チェックボックス(複数選択可)  
<input type="checkbox" name="touhou" value="チルノ" checked>チルノ<br>  チルノ
<input type="checkbox" name="touhou" value="幽々子">幽々子<br>  幽々子
※checked属性で、最初からその項目選択 <br>は改行

<input type="image"> 画像による送信ボタン
<input type="image" src="images/nitori.gif" alt="にとり" width="50" height="20">  
<textarea name="option" cols="幅" rows="行数">テキストエリア</textarea>  
※テキストエリアの部分は最初から表示する内容

セレクトメニュー(プルダウンメニュー)
<select name="pref">             
<option value="大阪">大阪</option>
<option value="京都">京都</option>
</select>
size="" 複数行同時表示
multiple 複数選択可(ユーザが実際に複数項目選択する時は、CtrlやShift)

第13章 ブラウザ独自拡張
オブジェクトを埋め込む
<embed src="douga.swf" widht="200" height="160"></embed>
Flashムービーdouga.swfを幅200高さ160で表示

<marquee> 文字をスクロールさせる(IE独自拡張)
<blink> 文字を点滅させる (Netscape独自拡張)

第14章 コメント

<!--コメント--> コメント(注釈)

第15章 その他
文字参照
&lt; → <
&gt; → >
&copy; → ・
&hbsp; → (半角スペース)

文書のメタデータ(付加情報)
<meta name="keywords" content="gotou,ブログ"> 検索キーワード
<meta name="description" content="gotouのブログだよ。"> ページの要約
<meta http-equiv="refresh" content="10;url=http://gotou.fc2.com/"> 10秒後にURLに移動
※<head>~<head>内に記述

クリッカブルマップ(イメージマップ)
<img src="Remilia.jpg" alt="沖縄の海の写真" usemap="#mymap">
<map name="mymap">
<area shape="rect" coords="268,112,357,201" href="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" _fcksavedurl="gotou.html" alt="gotouへのリンク">
<area shape="circle" coords="80,157,51" href="gotou2.html" alt="gotou2へのリンク">
</map>


フォームエレメントと項目名を関連づける
<label><input type="radio" name="Subject" value="チルノ">チルノ</label>
<input type="radio" name="Subject" value="chirno" id="eng"><label for="eng">チルノ</label>
Aの位置ジャンプ

Aの位置


















第2章 HTML文書の基本
第3章 文書本体の基本構造
第4章 テキスト
第5章 ページ
第6章 フォント
第7章 画像
第8章 リンク
第9章 リスト
第10章 テーブル


第12章フォーム
第13章 ブラウザ独自拡張
第14章 コメント
第15章 その他







関連記事
スポンサーサイト

コメントの投稿

非公開コメント

アクセスカウンター
現在の閲覧者数:
プロフィール

GOTOUkun510

Author:GOTOUkun510


【自己紹介】
年齢:21(2016年現在)
pc使用歴:6年

【好きな物】
東方vocal、タイピング、小学生、抱き枕


【好きな人・キャラ】
ななひら、3L、高橋菜々、チルノ、レミリア

ハマってるゲーム
ps3 COD bo キルレ2.53、33万k13万d、プレイ時間71日
id:gotoukun510

タイピングマニア、TypingTube、ニコ生タイピング、曲製作してます。

【高校生で取った資格】
情報処理技術者試験ITパスポート

毎日パソコン入力コンクール二段
2012/6月大会高校生和文B
全国13位(11673人中13位)
高校3年生で全国7位

日本情報処理検定協会8冠達成
パソコンスピード英文1級
毎日パソコン入力コンクール 二段
パソコンスピード日本語 初段
情報処理技能検定 データベース1級
情報処理技能検定試験 表計算1級
プレゼンテーション作成検定 1級
ホームページ作成検定1級
文書デザイン検定1級
日本語ワープロ1級
パソコンスピード日本語1級
毎日パソコン入力コンクール1級
情報処理技能検定データベース2級
パソコンスピード英文2級
情報処理技能検定ビジネス部門2級
ワープロ2級
ホームページ作成検定2級
文書デザイン検定2級
パソコンスピード検定3級
情報処理技能検定表計算3級
文書デザイン検定3級

最新記事
最新コメント
リンク
カテゴリ
アクセスランキング
[ジャンルランキング]
ブログ
2527位
アクセスランキングを見る>>

[サブジャンルランキング]
その他
675位
アクセスランキングを見る>>
月別アーカイブ
QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。