どうも！エリアです
今絶賛、プログラミングの勉強を行っているので
復習もかねて、はたっぴブログで進捗具合を報告していきます！
エリアブログをやってるだけじゃあ、どうしても飽きがきちゃうので、プログラミングも勉強することにしてみました
しょぼんくんほんと飽き性ね
エリアそういう個性ということで、仕方ないね！
受け入れて色々なことを学んでいきましょ！
プログラミングの勉強方法として、プロゲートというサイトにお世話になっております
ということで、一緒に学んでいきましょう！
エリアまずは、HTMLとCSSからの勉強ですね
HTML&CSSについて
HTML＆CSSというのは
HTMLとCSSは、ウェブページを作成するための基本的な言語です
簡単に言うとHTMLはウェブページの構造を作り
CSSはそのデザインや見た目を決めます
エリア実際に見せた方が早いので、こんな感じのがHTMLになります
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a> to visit another website.
</body>
</html>HTMLだけなら、ウェブページはこんな感じになります
先ほどのコードに、CSSを読み込ませるようにすると
これらのコードをメモ帳とかに記入して、コードを書いていくことができます
エリア今すぐにでも、画面を閉じたくなりますが、それぞれ意味があるので、解説していきます
ちなみに、ＣＳＳは別記事にまとめます
<!DOCTYPE html>の意味
まずはじめに、ウェブページを作るためのルールを決めます
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a> to visit another website.
</body>
</html>そのルールの決め方が↓のコードを入力することで、ルール作りができます
<!DOCTYPE html>
エリアルールを決める必要があるので、<!DOCTYPE html>を一番初めに入力しておきます
このコードを入力することで、パソコンはHTML5のルールで作るということを理解してくれます
HTML5は、ウェブページを作るためのルールの最新版で
動画や音楽を簡単に表示できるようになったり、スマホでも見やすくページが作れるようになったりしています
エリアそれでは、どんどん解説していきます！
<html>の意味
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a> to visit another website.
</body>
</html><html>は、ウェブページ全体を包む箱みたいなものになります
ウェブページは、色々なパーツできていますが
例えば
テキスト入力
といったパーツを1つのウェブページにするために、<html>というコードで囲んでいます
上の見出しや吹き出し、画像は目に見えるパーツをわかりやすく載せていますが
目に見えないパーツ（文字化けを防止するコード等）入れ込んで入力します
エリアちなみに、<html>とかのことを、タグと呼んでいます
<html>のタグは、ここからウェブページの内容が始まりますということを、ブラウザに教えるためのスタート地点になります
<html>でスタートして、最後は、</html>でしめるようにします
この/がタグの終了を知らせるパソコンの言葉になります
エリア次は<head>について解説します！
<head>の意味
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a> to visit another website.
</body>
</html><head>の意味は、簡単にいうとウェブページの”説明書”いれる場所になります
エリア例えば
<head>の中に、入れるタグとして
- <title>
- ここに入力した内容が、ブラウザのタブに表示されます
- <meta>
- ここには、文字化けを防止するコードを入力したり、検索エンジンがどんなページか確認できるようにするコードが書かれます
- <link rel>
- 外部コードを読み込むためのコードを書きます
こんなタグを入れることがあります
エリアまとめるとこんな感じ！
<head>タグは、ウェブページを正しく表示するための「重要な設定ファイル」や「見えない情報」を入れておく場所です
画面には表示されないけど、ブラウザにとってはとても大事な場所ですね
<body>の意味
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is a paragraph of text.</p>
<a href="https://example.com">Click here</a> to visit another website.
</body>
</html>HTMLの最後は、<body>タグの解説します！
<body>はウェブページの”本体“、見えているもの全部がここに入る！
ウェブページを作るとき
- 文字
- 画像
- リンク
- ボタンなど
ユーザーが見て触れる部分はすべてこの<body>の中に書きます
例えば、先ほど解説した
テキスト入力
等を表示するための、タグを記入する場所が<body>になります
- <h1></h1>
- 見出しを作るためのタグ
- <p></p>
- 段落を作るためのタグ
- <img>
- 画像を挿入するためのタグ
- <a>
- リンクを作る為のタグ
等があります
エリア<body>をまとめるとこんな感じ
ページの見える部分をすべて含む、ユーザーがウェブページを開いたときに表示される内容が、すべて<body>の中にあります
まとめ
以上が、HTMLの勉強内容でした！
これらをわかりやすく教えてくれるのが、プロゲートになります
今後は、さらに必要なタグを解説する記事や、javaでのコード解説も出来たらしたいと思います！
今日はそんな所！ノシ
エリア最初は1ヶ月だけ試しに入ろうと考えていたんだけど、間違って1年間入ってしまったので、時間を掛けて習得できたらと思っています！ノシ
しょぼんくん皆様しっかり読んで、契約しましょう！ノシ
