HTML初級基礎編

HTMLの骨格

図解で説明

HTML基礎

図解にしてもあまり変化はありませんが、HTMLの基本はこうなっています。

HTMLは、<head>〜</head>と<body>〜</body>で構成されています。

最初の<!DOCTYPE html>はHTML5の宣言で( これはHTML5のファイルですよ)とコンピュータに教えてあげています。そして<html>〜</html>でHTMLファイル全体を表します。
headの部分はファイルの色々な情報が入り、bodyの部分が実際にブラウザに表示される部分です。なんとなくで構わないので覚えておきましょう。

前回の続き

前回にコピペしたファイルを確認したでしょうか?多分、文字化けが発生していたのではないでしょうか?


テストファイル

➡︎

ブラウザ

これはエラーではありません。わざとそうしてみました。まれにネットでも文字化けしているサイトを見かけると思いが、同じ状況にしてあるのです。


ではちゃんと表示させましょうね。

タグを追加 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストファイル</title>
</head>
<body>
<h1>テストファイル(h1)</h1>
<p>段落(文章)</p>
</body>
</html>

<meta charset="UTF-8">を追加するとh1,pの部分が正常に表示されると思います。これはmetaタグによるエンコード設定です。エンコードは色々有りますが、日本語で構成するファイルはUTF-8で問題無いので、この設定を使用しましょう。


基本的な骨格

ベースファイル(base.html)


<html>だった部分に<html lang="ja">に変わっていますが、これは(日本語ですよ)って書き足しています。

これをコピペしてFTP精霊のローカルファイル(アプリのファイル)に記録しておけば、いつでもどこでもFTP精霊でHTMLの練習ができるようになります。あとは基本的なタグを覚えていけば良いわけですね。


テストファイル

➡︎

ブラウザ

HTML基本タグ

始めに覚えよう

基本的なタグをコピーできるようにしておきます。(<body>〜</body>間に入力します。)

見出し
見出しはh_で表現します。1がいちばん大きくて6がいちばん小さな見出しです。ファイルで繋げて入力しても改行されて標準されます。






段落
ひとまとまりの文章を<p>〜</p>で囲って表現します。
このタグも改行されて表示します。

横幅いっぱいに境界線を引きます。

文字をくします。
文字が斜体(イタリック体)になります。
文字を少し強調します。

改行します。

強く強調します。

標準よりも縮小して表示します。
ここで覚えておきましょう HTMLのタグには<h1>見出し</h1>のように開始タグ【<...>】と終了タグ【</...>】がワンセットになっているタグと、<br>のように単独のタグがあります。また、タグには定義された決まった役割があります。練習を重ねてスキルアップしましょう。

次は色を変える方法の説明です。

表示モード切り替え