HTML 記述の仕方とよく使う表現一覧

現在、当ブログサイトは元のサイトからURLを移動し、もとにあったサイトをプログラミングで改造している最中です。

その際に実際に必要となったプログラムを一覧にして残しておきます。

記述の仕方
HTML よく使う表現

記述の仕方

雛形（最初にコピペしておく）

メモ帳を開き、下記をコピペします。

<!DOCTYPE html>
<html lang="en"> <!--en（英語）ではなく、ja（日本語）でもOK-->
<head>
    <!-- ファイルをHTMLで保存⇒最初の行に「！」を打つ⇒Enter⇒雛形が記述される-->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- ホームページのタグに表示されるタイトル-->
    <title>ページタイトル</title>
</head>
<body>

    <!--ここに後述するプログラムを記載していく-->

</body>
</html>

ファイルの保存

メモ帳のタブが選択されている状態で　Ctrl + S　を押して、ファイルの種類を「すべてのファイル」にして、ファイル名を「ファイル名.html」として、「保存」を押してください

この後は、visual studioでも、Atomでも、好きなエディタで開けます。

エディタで作成することもできますが、ソフトによってやり方が若干異なるので今回は割愛します。

コードを見やすくするインデント

行を選択（複数行選択することでまとめて実行もできる）した状態で「Tab」を押すことでインデントを1つ上げることができる。

逆に「Shift」を押しながら「Tab」を押すことでインデントを１つ下げることができる。

HTML よく使う表現

テキストの太文字・見出し・改行

実際のプログラム

<!--文字を太字にする-->
<strong>ようこそ！</strong>

<!-- 改行をする-->
<br />

<!-- 見出し　大きい順に1～7-->
<h1>こんにちは</h1>

実行結果

ようこそ！

こんにちは

画像の挿入

実際のプログラム

<!--画像を読み込む　別フォルダにある場合にはスラッシュで区切ってファイル名を指定-->
<!--alt="画像の名前" width="横のピクセル数" height="縦のピクセル数"-->
<img src="画像・動画/画像/Alluring.png" alt="タイトルロゴ" width="300" height="100">
<img src="画像・動画/画像/Alluring.png" alt="タイトルロゴ" width="100%" height="100">

実行結果

フォントカラー・サイズの指定・段落分け

実際のプログラム

<!--サイズとカラーを両方指定する　ｐで段落を分ける-->
<!--色はカラーコードでも指定できる-->
<p><font size=20xp color="red">サイズ＆カラー</font></p>

実行結果

サイズ＆カラー

リンクの添付

実際のプログラム

<!-- テキストをクリックしたらリンクに飛ぶ-->
<a href="https://blog.alluring-master.com/"><font size=16xp color="blue">blogサイトはこちら</font></a>

実行結果

blogサイトはこちら

新しいタブでリンクを開く

実際のプログラム

<!-- 文字をclickしたら別タブを開いてリンクに飛ぶ-->
<a href="https://blog.alluring-master.com/" target="_blank"><font size=7xp color="black">blog</font></a>

実行結果

blogサイトはこちら

フォームの作成（ユーザー入力を受け取る）

実際のプログラム

<!-- お問い合わせフォームを作る・送信後に表示するURLを指定する-->
<form method="post" action="画像・動画/画像/Alluring.png">
    <h2>お問い合わせはこちら</h2>
    <!-- 入力枠の表示（input）・関数に入れる（name）・入力スタイルを決める（type）-->
    <!-- ”text”以外にも、checkbox（チェックボックス）、radio（ラジオボタン）など-->
    <input name="nickname" type="text" style="width:300px" value="ここに名前を入力してください。">
    <br />

    <p>ここにメールアドレスを入力してください(任意)</p>
    <input name="mail" type="text" style="width:400px">
    <br />

    <p>ここにパスワードを入力してください</p>
    <input name="pas1" type="password" style="width:500px">
    <br />
    <input name="pas2" type="password" style="width:500px">
    <!-- ”submit”は単純なボタン　Valueで、あらかじめ記載する内容を指定する-->
    <input type="submit" value="送信">
</form>

実行結果

お問い合わせはこちら

ここに名前を入力してください。

ここにメールアドレスを入力してください(任意)

ここにパスワードを入力してください

送信

要素同士の間隔を空ける

実際のプログラム

<img src="画像・動画/画像/Alluring.png" alt="タイトルロゴ" width=200 height=200 hspace="10" vspace="10">

hspaceで左右の余白を、vspaceで上下の余白を設定する。

同じく10ピクセルで設定した要素同士を並べると、合計で20ピクセル分間隔があくことになる

実行結果

実際のプログラム

実行結果