2021.08.07
テーマ： HTMLタグのお勉強(104)
カテゴリ： HTMLを知る
早速 css というものを作成してみたくなりましたが、
html をある程度作っておかないと飾ることができません。
シンプルで簡単な html を作るところからやってみます。
html の作り方としては、（自己流）
①これは html シートですと宣言する
②シートの見出し部分
③本文
この３つをイメージして作ります。
早速①から始めます。
<!DOCTYPE html>
このように書きます。
次は②です
始めの<html>は、htmlシートを作成するので、
①でこれはhtmlシートですと宣言したあとに、
スタートの印として<html>を書きます。
もちろん、シートの終わりには</html>で閉めるのを忘れないでおきましょう。
次に、<head> ですが、これは見出しのような部分で、
このシートのプロパティのような役割の部分です
とりあえず、タイトルを入れてみました。
タイトルは、<title></title>を使います。
今は、<head></head>のなかにタイトル以外何を入れたらよいかわからないので
これで<head>は閉じてしまいます。
次は③本文です。
これも一般的なものですが、
<body>
<p>早速作ってみよう</p>
</body>
なんとなく、皆さんは理解できるでしょう。
私には難しくて理解するのに時間がかかりました。
私なりに解説しますと、
②本文は<body></body>で作成します。
そのなかに、文章など入れてもいいのですが、
一般的には
<p></p>を使うようです。
段落みたいなものです。
最後に</html>で閉じて、簡単なものができました。
この一連の作業をまとめると、
こんなシンプルなものが出てきました。
これに飾りつけしてみましょう。
html をある程度作っておかないと飾ることができません。
シンプルで簡単な html を作るところからやってみます。
html の作り方としては、（自己流）
①これは html シートですと宣言する
②シートの見出し部分
③本文
この３つをイメージして作ります。
早速①から始めます。
<!DOCTYPE html>
このように書きます。
次は②です
<html>
<head>
<title>タイトルを入れる</title>
</head>
②は説明が必要になりそうです。始めの<html>は、htmlシートを作成するので、
①でこれはhtmlシートですと宣言したあとに、
スタートの印として<html>を書きます。
もちろん、シートの終わりには</html>で閉めるのを忘れないでおきましょう。
次に、<head> ですが、これは見出しのような部分で、
このシートのプロパティのような役割の部分です
とりあえず、タイトルを入れてみました。
タイトルは、<title></title>を使います。
今は、<head></head>のなかにタイトル以外何を入れたらよいかわからないので
これで<head>は閉じてしまいます。
次は③本文です。
これも一般的なものですが、
<body>
<p>早速作ってみよう</p>
</body>
なんとなく、皆さんは理解できるでしょう。
私には難しくて理解するのに時間がかかりました。
私なりに解説しますと、
②本文は<body></body>で作成します。
そのなかに、文章など入れてもいいのですが、
一般的には
<p></p>を使うようです。
段落みたいなものです。
最後に</html>で閉じて、簡単なものができました。
この一連の作業をまとめると、
<!DOCTYPE html>
<html>
<head>
<title>タイトルを入れる</title>
</head>
<body>
</body>
</html>
これをhtmlで保存します。
これで、やっとhtmlシートができました。
早速ブラウザで見てみましょう
↓
これをhtmlで保存します。
これで、やっとhtmlシートができました。
早速ブラウザで見てみましょう
↓
こんなシンプルなものが出てきました。
これに飾りつけしてみましょう。
お気に入りの記事を「いいね！」で応援しよう
[HTMLを知る] カテゴリの最新記事
-
cssに追加してみよう3 2021.08.15
-
cssに追加してみよう2 2021.08.12
-
cssに追加してみよう１ 2021.08.11
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
