第3回 HTMLでウェブページを作ってみよう! 

元気100倍( ⚈ ̍̑⚈ ̍̑⚈)৴≡Oアンパーンチ

みなさん、こんにちは!

普段は医療職で働きながら、趣味でプログラミングを始めたズダです!

今回のテーマはHTMLを使ってウェブページを作るときの基本的な骨格を覚えましょう。

※繰り返しになりますが、ChatGPTが作ったプログラミングを見て理解できればOKです。自分で書く必要はないですよ〜

ではさっそくHTML作った簡単なサイトを見てみましょう!

<サイト>

<プログラミング>

htmlCopy code<!DOCTYPE html>
<html>
  <head>
    <title>私の初めてのウェブページ</title>
  </head>
  <body>
    <h1>こんにちは、世界!</h1>
    <p>これは私の初めてのウェブページです。</p>
    <img src="image.jpg" alt="私の画像">
    <a href="https://www.google.com">Googleへ行く</a>
  </body>
</html>

このコードの中には、いくつかのHTMLのタグが使われています。それぞれのタグは、ウェブページにどのような内容を表示するかを指定します。

※タグは開始( <OO> )と終わり( </OO> )を書く必要があります。開始タグで「OOしてねー」とパソコンにお願いし、終わりタグで「ここまで作業したら終わりだよ」と教えます。

では、このコードの中に出てきたいくつかの重要なHTMLのタグについて説明しましょう。

<OO>:私の役割はOOです。 という感じで、それぞれのタグの役割を記載します。

  • <!DOCTYPE html>: 今からHTML書きます!って宣言する
  • <html>: このタグの中がHTMLですって説明する
  • <head>: サイトの見出しやタイトルはここに書くよ
  • <body>: サイトの中身はここに書くよ
  • <h1>: 大見出しを作ります。<h1>から<h6>までのタグがあり、<h1>が最も文字が大きな見出し、<h6>が最も文字が小さな見出しです。
  • <p>: 段落です。文章の各部分をこのタグで囲むと、それぞれが新しい段落となります。
  • <img>: 画像を表示します。src=パソコンのどこに画像ファイルがあるか、alt=画像の説明。今回は画像ファイルを置いてないので画像は表示されてないです。
  • <a>: ハイパーリンク(他のページに飛ぶ)。href=リンクの先のURL。このタグで囲ったテキストや画像をクリックすると、指定したURLのページに移動します。

上記のコードの中には記載はないのですが、有名なタグをもう少し紹介します。

  • <div>,<class=OO >,<id=OO >: グループ化するためのタグです。CSS、JavaScriptで操作するために使われます。OOにはclassやidの名前を記載します。
  • <span>: タグ内の一部のテキストをグループ化します。CSSの操作で使います。
  • <ul><ol><li>: リストを作ります。<ul>は順序なしリスト、<ol>は順序ありリストを作り、<li>はリストの項目を表します。(今回タグの説明は、liのリストで作ってます)
  • <table><tr><td><th>: テーブルを作ります。Excelの表みたいなやつです。<table>はテーブル全体、<tr>は行、<td>はデータセル、<th>はヘッダーセルを表します。
  • <form><input><button>: ユーザーからの入力を受け取るためのフォームを作るためのタグです。formはフォーム全体、inputは入力フィールド、buttonはボタンを表します。
  • <header><footer><nav><article><section>: それぞれページのヘッダー、フッター、ナビゲーション、記事、セクションを表します。<body>の中をスッキリと見やすくさせます。
  • <br>: テキストの改行を作るためのタグです。このタグは閉じタグ(</br>)がありません。
  • <strong><em>: テキストを強調するためのタグです。strongは強い重要性、emは強調を表します。

これらのタグを使えば、自分だけのウェブページが作れます!例えば、あなたの好きな本について書いたり、最近見た映画のレビューを書いたり、自分の絵を描いてそれをアップロードしたりできます。

プログラミングは、新しいことを学ぶときには少し難しく感じることがありますが、一歩一歩進んでいけば、必ず理解できるようになります。わからないことはChatGPTに聞けばいいんです!(オイッ笑)

次回はCSSについて学んでみましょう。そして、もっと面白く、もっと個性的なウェブページを作る方法を探っていきましょう。

それでは、楽しいプログラミングの時間をお過ごしください!バイバイキーン!( ⚈ ̍̑⚈ ̍̑⚈)৴≡Oアンパーンチ  

コメント

タイトルとURLをコピーしました