2010年11月21日

HTML 〜リンク作成〜

ちょっとだけwebサイトっぽくなってきました。
次回からはCSSです。

【この課での目標】

ページ・画像へのリンク方法の習得。

【教材範囲】

はじめてのホームページHTML入門 の126〜140ページ

【成果物】

http://programming.so.land.to/20101121-2.html
※Chromeだと見れません。

【つまづいた箇所・解決法】

特になし。

【未解決の悩み】

画像への直接リンクを行う際a href="image/◯◯.jpg"を使うも表示されず。
書き方の問題と言うよりもサーバー周りを理解出来ていない可能性。

【ソース】

※タグの囲み(<)を半角から全角に置換してあります。

<html>
<head>
<title>2010/11/21 A</title>
</head>

<body>
<p>
リンクの練習です。
</p>
<p>
今までの成果物
</p>
<ol>
<a href=http://programming.so.land.to/self.html><li>自己紹介・2010年10月末に作成してみたもの</li></a>
<a href=http://programming.so.land.to/20101120-1.html><li>第一回・HTMLタグ基本の基本</li></a>
<a href=http://programming.so.land.to/20101120-2.html><li>第二回・表作り</li></a>
<a href=http://programming.so.land.to/20101120-3.html><li>第三回・箇条書き</li></a>
<a href=http://programming.so.land.to/20101121-1.html><li>第四回・画像・音楽ファイルの挿入</li></a>
</ol>
<p>
作成者へのメールは<a href=mailto:yuuya.tekitou@gmail.com>こちら</a><br>
※実際には届きません。
</p>
<p>
<a href="self.html">ファイルへのリンクテスト</a><br>
※自己紹介ページに飛びます。<br>
<a href="image/india01.jpg">画像へのリンクテスト</a><br>
</p>
<hr>
<ol>
<a href="#1st"><li>Q:ご飯に1番合うおかずといえば?</li></a>
<a href="#2nd"><li>Q:では2番目は?</li></a>
</ol>
<hr>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="1st">ザーサイ</a>
<a href="#2nd"><li>Q:では2番目は?</li></a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="2nd">あ、あんたなんかに教えてなんてあげないんだからっ!!</a>

</body>
</html>
posted by yuuya1986 at 15:27| Comment(0) | HTML | このブログの読者になる | 更新情報をチェックする

HTML 〜画像・音楽ファイル〜

この課から、はじめて勉強するページになります。
コピペではなく書いて覚える。

【この課での目標】

画像・音楽ファイルを表示する。

【教材範囲】
はじめてのホームページHTML入門 の113〜126ページ

【成果物】

http://programming.so.land.to/20101121-1.html
※Chromeだと見れません。

【つまづいた箇所・解決法】

特になし。

【未解決の悩み】

音楽ファイルのタグ内でhidden="false"と打ち込んでも表示されない
場所の問題かと思いタグ内の順序を前後させてみるも失敗。

【ソース】

※タグの囲み(<)を半角から全角に置換してあります。

<html>
<head>
<title>2010/11/21 @</title>
</head>

<body>
<p>
画像・音楽ファイル表示の練習です。
</p>

<img src="india01.jpg">
<br>
<img src="india01.jpg" width="30%" height="150">
<br>
<embed src="music.mp3" loop="true" autoplay ="false">

</body>
</html>

posted by yuuya1986 at 14:44| Comment(0) | HTML | このブログの読者になる | 更新情報をチェックする

2010年11月20日

HTML〜表作り〜

この課も復習です。

ですが、前回はなかった不明点が出てきたので、改めて確認します。
これ以降、不明点が解決できた際には追記で解決策を書いていきたいと思います。

【この課での目標】

HTMLでの表作り

【教材範囲】
はじめてのホームページHTML入門 の93〜112ページ

【成果物】

http://programming.so.land.to/20101120-3.html
※Chromeだと見れません。

【つまづいた箇所・解決法】

特になし。

【未解決の悩み】

captionで囲んだ部分が表の右上ではなく表の右側の上部に表示される。
divで囲む、brで改行する、を試みるも解決せず。

【ソース】

※タグの囲みを半角から全角に置換してあります。


<html>
<head>
<title>2010/11/20 B</title>
</head>
<body>
<div>
表の練習です。<br>
カードゲームについて。
</div>

<p>
<table border="1" width="80%" height="50%" cellpadding="10">
<caption align="right">カードゲーム勝率一覧</caption>

<tr align="center">
<th>ゲーム名</th>
<th>ルール</th>
<th colspan="2">勝率</th>
</tr>

<tr align="left">
<td rowspan="2" valign="top">ソリティア</td>
<td>カードのめくり方(3枚ずつ)</td>
<td>43%(試行100回)</td>
<td>100回中43回成功</td>
</tr>

<tr align="right">
<td align="center">カードのめくり方(1枚ずつ)</td>
<td>14%(試行100回)</td>
<td>100回中14回成功</td>
</tr>

<tr>
<td rowspan="3" valign="top">スパイダーソリティア</td>
<td>初級:1組</td>
<td>38%(試行100回)</td>
<td>100回中38回成功</td>
</tr>

<tr>
<td>中級:2組</td>
<td>20%(試行50回)</td>
<td>50回中10回成功</td>
</tr>

<tr>
<td>上級:4組</td>
<td>0%(試行50回)</td>
<td>50回中0会成功
</tr>

<tr>
<td>フリーセル</td>
<td>なし</td>
<td>38%(試行50回)</td>
<td>50回中19回成功</td>
</tr>
</p>

</table>
</body>
</html>
posted by yuuya1986 at 18:14| Comment(0) | HTML | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。