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 | このブログの読者になる | 更新情報をチェックする

HTMLの基本〜箇条書き〜

ここも以前に勉強していた箇所です。
反復することで、自然に出てくるレベルを目指して。

【この課での目標】

HTMLでの各種箇条書き

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

【成果物】

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

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

特になし。

【未解決の悩み】

特になし

【ソース】

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

<html>
<head>
<title>2010/11/20 A</title>
</head>
<body>
<div>
箇条書きの練習です。
</div>

<p>
<ul>
<li>愛のままに</li>
<ul>
<li>わがままに</li>
</ul>
<li>僕は君だけを</li>
<li>傷つけない</li>
<ul>
<li type="square">いえー</li>
</ul>
</ul>

<ol>
<li>部屋と</li>
<li>Yシャツと</li>
<li>私</li>
</ol>

<ol type="a">
<li>愛する</li>
<li>あなたの</li>
<li>ため</li>
</ol>

<ol type="i">
<li value="4">毎日</li>
<li>きれいで</li>
<li>いたいから</li>
</ol>
</p>
</body>
</html>
posted by yuuya1986 at 17:22| Comment(0) | HTML | このブログの読者になる | 更新情報をチェックする

HTMLタグの基本タグ〜太字や罫線など〜

それでは記念すべき第一回です。
すでに少しだけHTMLの勉強はしていたので、今回は復習からとなります。

なにか気づいた点などがあればご指摘頂けるとほんと嬉しいです。
それではこの先よろしくお願いします。


【この課での目標】

HTMLの基本タグの復習
(太字にする・罫線など)

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

【成果物】

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

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

特になし。
スペルミスはちょいちょい

【未解決の悩み】

なし

【ソース】

※※タグのカッコの一部を半角から全角に置換してあります。

<html>
<head>
<title>プログラミング初心者・虎の穴</title>
</head>

<body text="gray">
<h1 align="center">
プログラミング初心者・虎の穴
</h1>

<p>
<font color="red">
<small><b>はじめてのホームページ</b></small>
</font>
</p>

<div>
<big><u><i>はじめてのホームページ</i></u></big>
</div>

<br>

<hr align="center" width="70%" color="#ff6600" size="20">

<br>

<div>
<abbr title="Hyper Text Markup Language">HTMLの勉強です。</abbr><br>
このホームページではプログラミング初心者の僕が色々やります。<br>
<s>そう、色々。</s>
</div>
<br>

<div>
<pre>
┌ーーーーーーーーーーーーーーーーーーーーーーー┐
│おちゅか、おつかれさまです          │
│外は寒いですか?               │
│そんな時はおちゃでも飲んで          │
│ゆっくりしていってね!            │
└ーーーーーーーーーーーーーーーーーーーーーーー┘
</pre>
</div>

<div align="right">
<acronym title="ネコとネズミ"><トム&ジェリー></acronym>
<br>
<sup>2</sup><sub>2</sub>
</div>
<hr align="center" width="70%" color="#ff6600" size="20">

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

テンプレ

このブログは昨日書いたように、プログラミング勉強の記録用として綴っていきます。

そして、その効果を最大化するために以下のフォーマットで書いていきたいと思います。

【この課での目標】
【教材範囲】
【成果物】
【つまづいた箇所・解決法】
【未解決の悩み】
【ソース】

これから修正していくことはあると思いますが、基本はこれでやっていきますのでよろしくお願いします。

ーーーーーーーーーーー

現状どれくらいのレベルなのか、ということについてなのですが、先月末にこのような自己紹介ページを作成しました。

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

見て分かるとおり色々と残念な感じになっているので、これから精進していきます。

以下には一応ソースを晒しておきます。

<html>
<head>
<title>
<2010/10/28 原口悠哉 自己紹介>
</title>

<style type="text/css">

body {color: #444444;
background-color: #C0C0C0;
margin:0 auto;}

div#container {border: solid 2px #000000;
width: 70%;
froat: center;
padding: 20px;
background-color: #faf0e6}

h3 {font-size: 0.875em;
border-bottom: solid 2px #66aa66;
padding-bottom: 3px;
background-image: url(mark.png);
background-repeat: no-repeat;
background-position: 0 -2px;
padding-left: 20px;
clear: both}

img {float: right;
margin-left: 15px;
margin-bottom: 15px}

img.photo-even {float: left;
margin-right: 15px;
margin-bottom: 15px}

</style>

</head>

<body>

<br>
<hr width="70%" align="center" color="blue">
<div id="container">
<h1 align="center"><a href="sample.html">原口悠哉の自己紹介</a></h1>
</div>
<hr width="70%" align="center" color="blue">

<div id="container">
<h2>
目次
</h2>

<p>
<ul>
<li>生い立ち</li>
<li>インド周遊記</li>
<ol>
<li>タージマハルの裏</li>
<li>ガンジス川</li>
<li>弾き語り</li>
</ol>
</ul>
</p>

</div>

<div id="container">

<h2>生い立ち</h2>

<table border="1" width="80%" align="center" color="gold">
<caption>生活遍歴</caption>

<tr align="center">
<td>  </td>
<td>小学校</td>
<td>中学校</td>
<td>高校</td>
<td>大学</td>
</tr>

<tr align="center">
<td rowspan="2">学校名</td>
<td>橘小学校</td>
<td rowspan="2">錦台中学校</td>
<td>横浜翠嵐高校</td>
<td rowspan="2">慶應大学</td>
</tr>

<tr align="center">
<td>西寺尾小学校</td>
<td>岸根高校</td>
<td></td>
<td></td>
<td></td>
</tr>

<tr align="center" color="red">
<td rowspan="2">居住地</td>
<td>長崎</td>
<td rowspan="2" colspan="4">神奈川</td>
<td></td>
<td></td>
</tr>

<tr align="center">
<td>神奈川</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>

<div id="container">

<h2>インド周遊記</h2>

<h3><acronym title="有名な寺">タージマハル</acronym>の"裏"からの風景</h3>

<P><img src="india01.jpg" alt="タージマハルの裏からの風景"
width="250" height="150"/>
</p>
<font color="grean">タージマハル</font>の写真を見ることはあっても、<br>
<b>その裏からの風景</b>を見ることはあまりない。<br>
ってことで裏側からの写真で綺麗さ<sup>2</sup>。<br>
<s>ちなみにこの後タクシードライバーにキレられました。</s><br>

<h3><acronym title="でっかい川">ガンジス川</acronym></h3>
<P><img src="india02.jpg" alt="ガンジス川"
width="250" height="150" class="photo-even"/>
</p>
インド各所で弾き語ってきましたが、<br>
インドと言えばやはりここ、という<font color="red">ガンジス川。</font><br>
ボードを漕いでくれていた人と仲良くなって<br>
一緒に弾いたりしてみました。<br>
<s>ちなみにぼられました。</s>
<br>
<br>
<h3><acronym title="あぶないとこ">カシミール</acronym></h3>
<P><img src="india03.jpg" alt="カシミール"
width="250" height="150"/>
</p>
<u>到着前日にテロ</u>が起こってた<font color=blue>カシミール</font>。<br>
お金はありませんでしたが、<br>
すごく綺麗な街だったので<br>
ただ歩くだけでも満足でした。<br>
<s>ちなみにここでお金をめぐんでもらわないと日本に帰れませんでした。</s>
<br>
<br>
</div>
posted by yuuya1986 at 16:33| Comment(0) | はじめに | このブログの読者になる | 更新情報をチェックする
×

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