ITを基礎からやってくブログ

とにかく基礎からやってくんです。基礎が大事なんです。

基礎からWebアプリ#2

IT基礎

基礎からWebアプリ#2です。

1. まずはHTMLだけで (Apache利用)

Apacheのインストール

yum -y install httpd
sed -i -e "/#ServerName www.example.com:80/i ServerName `hostname`" /etc/httpd/conf/httpd.conf
service httpd start

まずは動かすことが目的なので細かいことは考えない。
最低限としてServerNameにホスト名だけ入れて、httpdを起動する。
Apacheについてはググる→"Google検索：apache 入門"

HTMLファイル作成

/var/www/html/tableview.htmlを以下の通り作成。
HTMLファイルを書いて置くだけなので、簡単ですね。

<html>
<head>
<title>daily report</title>
<style type="text/css">
table {
    border-collapse: collapse;
    width: 500px;
}
th {
    text-align: center;
    border: solid 1px;
    padding: 0.5em;
    background-color: #6666FF;
}
td {
    text-align: center;
    border: solid 1px;
    padding: 0.5em;
}
</style>
</head>

<body>

<table>
<tr>
<th>日付</th>
<th>体重</th>
<th>体脂肪率</th>
<th>内臓脂肪レベル</th>
</tr>
<tr>
<td>2016/4/8</td>
<td>65.6</td>
<td>14.0</td>
<td>5</td>
</tr>
</table>

</body>
</html>

CSSで表のスタイルを少し入れています。
CSSはよくわかっていないのでメモ。
（抜粋）

table {
    border-collapse: collapse;・・・線を細くする
}
th {・・・表題になる列
    text-align: center;・・・中央揃え
    border: solid 1px;・・・枠線。飾りのない普通の線、太さ1px
    padding: 0.5em;・・・文字と枠線との間のサイズ
    background-color: #6666FF;・・・背景色
}
td {
    text-align: center;
    border: solid 1px;
    padding: 0.5em;
}

そしてブラウザでつなぐとこう見えます。

http://hostname/tableview.html

f:id:quatrefromage:20160409005026p:plain

次回は 2.Java Servlet (Tomcat利用) です。