LoginSignup
6
8

More than 5 years have passed since last update.

プログラミングしたこと無い人向けにサンプルプログラムを作った話(1)

Last updated at Posted at 2016-04-25

はじめに

同じ会社で事務員をやっている女の子が、
「html触ってみたいけど、いまいち分からない・・・
headタグとbodyタグのことなら知ってるけど・・・」
て言っていたので、ひとまずサンプルプログラムを渡してみた。

<!DOCTYPE html>
<html>
<head>
    <!--エンコードをUTF-8に指定-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>タイトルは、ここに書く</title>
</head>
<body>
    <h1>■とりあえず何か書いてみた↓</h1>
    タグ無しで文字に書くと、こんな感じ。bodyタグの中に書かないと表示されない。<br/>
    基本的に、htmlだけだと黒色でしか表現できない。<br/>
    色付けやデザインなどは、htmlではなくcssという言語を用いる必要がある。<br/>
    改行タグ『&lt;br/&gt;』を使わないと改行できない。

    <br/>
    <h1>■見出しタグのサンプル</h1>
    <h1>h1タグだとこれぐらいの大きさで表示される</h1>
    <h2>h2タグだとこれぐらいの大きさで表示される</h2>
    <h3>h3タグだとこれぐらいの大きさで表示される</h3>
    <h4>h4タグだとこれぐらいの大きさで表示される</h4>
    <h5>h5タグだとこれぐらいの大きさで表示される</h5>
    <h6>h6タグだとこれぐらいの大きさで表示される</h6>
    <br/>
    <h1>■pタグのサンプル</h1>
    <p>
        pタグ内だと、こんな感じ。ここは1つの段落として表現される。<br/>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br/>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト<br/>
        テキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
    <p>
        pタグごとに改行される。テキストテキストテキスト
        pタグ内では改行タグ『&lt;br/&gt;』を使わないと改行できない。
    </p>
    <br/>
    <h1>■なんか違うページ開きたい時</h1>
    <a href="http://www.yahoo.co.jp/" target="_blank">ここをクリックしたら飛ぶよ</a>
    <br>
    <h1>■リスト表示してみたい</h1>
    <ul>
        <li>リスト1</li>
        <li>リスト2</li>
        <li>リスト3</li>
    </ul>
    <br>
    <h1>■テーブル表示してみたい</h1>
    <table>
        <tr>
            <th>番号</th>
            <th>品物</th>
            <th>個数</th>
        </tr>
        <tr>
            <td>1</td>
            <td>りんご</td>
            <td>4個</td>
        </tr>
        <tr>
            <td>2</td>
            <td>みかん</td>
            <td>5個</td>
        </tr>
        <tr>
            <td>3</td>
            <td>ぶどう</td>
            <td>3個</td>
        </tr>
    </table>
    <br>
    <h1>■入力フォーム的なの作りたい</h1>
    <p>
        名前:<input type="text" size="40">
    </p>
    <p>
        性別:<input type="radio" name="sex" value="male"><input type="radio" name="sex" value="female"></p>
    <p>
        血液型:
        <select name="blood">
            <option value="A">A型</option>
            <option value="B">B型</option>
            <option value="O">O型</option>
            <option value="AB">AB型</option>
        </select>
    </p>
    <p>
        ご感想:<br>
        <textarea rows="4" cols="40"></textarea>
    </p>
    <p>
        <input type="submit" value="クリックしても何も起きないボタン">
    </p>
    <br/>
</body>
</html>

おわりに

まぁ、そんだけなのですが・・・。

6
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
8