テキストエディターでプロフを作ってみよう
テキストエディターでプロフを作ってみよう

.

*******のプロフィール


【HN】
***********
【HNの由来】
************
【性別】
************
【誕生日】
************
【星座】
************
【血液型】
************
【職業】
************
【↓↓】
同様に増やす
← このようにプロフィールを
メモ帳等のテキストエディター
を使いつくってみる。
テンプレート

(基本形、これに付け加えていきます) 

<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
<html>
<head>
<title>題名を入れる</title>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="textediter">
</head>
<body>

ここにタグを入れる

</body>
</html>
上記のソ−スです
windows
下記を[Ctrl]+[A]で全選択して、コピーできます
mac
下記を +[A]で全選択して、コピーできます
最初に homepage という名前のフォルダを作成します。

名前はなんでもよい。その中で作業をすすめます。

上にあるテンプレートを
メモ帳に貼り付けて下記の部分を変更する。

メモ帳の中
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
<html>
<head>
<title>my profile</title>
<-- 題名を my profile にしました -->
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="textediter">
</head>
<body style="color:white;background:gray;">
<-- テキストの色をwhite 背景色をgrayに -->
ここにタグを入れる
</body>
</html>

背景に画像を貼る場合は 詳しくはこちらを参照

<body style="color:gray; background:white url(画像のurl);">
画像が表示されない時のために
画像の色と背景色は近い色に文字の色にも気をつけて

homepage フォルダの中に
ファイルの種類 すべてのファイル
profile.html という名前で保存します。
各自自由に見出しを入れます

メモ帳の中 
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
<html>
<head>
<title>my profile</title>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="textediter">
</head>
<body style="color:white;background:gray;">
<h1>******プロフィール</h1>
<-- 各自自由に見出しを入れます -->
</body>
</html>

<h1> </h1>
数字の部分を変えると 見出しの大きさが変わります（１〜６）

見出しの位置を変えるには
<h6 style="text-align:left;">******プロフィール</h6>
******プロフィール
<h3 style="text-align:center;">******プロフィール</h3>

******プロフィール

<h1 style="text-align:right;">******プロフィール</h1>

******プロフィール

文字の位置 大きさ 色についてはこちらを参照
homepage フォルダの中に profile.html という名前で上書き保存します。
写真を貼ります


メモ帳の中 
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
<html>
<head>
<title>my profile</title>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="textediter">
</head>
<body style="color:white;background:gray;">
<h1>******プロフィール</h1>
<div>
<img src="写真のURL" alt="写真の説明" width="写真の幅" height="写真の高さ">
</div>
</body>
<img src="写真のURL" alt= "写真の説明" width="写真の幅" height="写真の高さ">

alt= "写真が表示されない時の代替テキスト"
homepage フォルダの中に
profile.html という名前で上書き保存します。
プロフィールの内容


メモ帳の中 
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN>
<html>
<head>
<title>my profile</title>
<meta http-equiv="content-type" content="text/html; charset=shift_jis">
<meta http-equiv="content-style-type" content="text/css">
<meta name="generator" content="textediter">
</head>

<body style="color:white;background:gray;">


<h1>******プロフィール</h1>
<div>
<img src="写真のUR"L alt="写真の説明" width="写真の幅" height="写真の高さ">
</div>

<dl>
	<dt>【HN】</dt>
	<dd>*******************</dd>
	<hr>

	<dt>【性別】</dt>
	<dd>*******************</dd>
	<hr>

	<dt>【誕生日】</dt>
	<dd>******************</dd>
	<hr>

	<dt>【血液型】</dt>
	<dd>******************</dd>
	<hr>

	<dt>【職業】</dt>
	<dd>******************</dd>
	<hr>

	・
	・
	・

</dl>

</body>
</html>
homepage フォルダの中に profile.html という名前で上書き保存します。



最初のテンプレートに
ピンクの部分、 茶色の部分を 追加しただけでプロフィールが完成です。
<dl>

<dt>【HN】</dt>
<dd>hogehoge</dd>
<hr>

<dt>【HNの由来】</dt>
<dd>hogehoge</dd>
<hr>

<dt>【性別】</dt>
<dd>hogehoge</dd>
<hr>

<dt>【住んでいるところ】</dt>
<dd>hogehoge</dd>
<hr>

・
・
・

</dl>
.
<hr> 横罫線をひきます

用語の説明をつける時に使うリストタグ

<dl>

<dt>用語</dt>
<dd>説明</dd>

<dt>用語</dt>
<dd>説明</dd>

</dl>



<dt>用語</dt>
<dd>説明</dd>
この部分はいくらでも増やせます




pre top home(geo) home(goo) close
Counter