小学生でもわかるHTMLの使い方

2024年3月6日 14:07

1 Webサイトについて
・Webサイトを作るためにはエディタとブラウザの2つが必要である。エディタとは文字のみで構成されるテキストファイルを編集や作成するための道具のことである。ブラウザとはインターネット上のウェブページを表示や操作するための道具のことである。
・Webサイトはサイトの形を作るHTML(必須)とサイトの見た目を整えるCSS(ほぼ必須)とサイトに動きを与えるJavaScript(任意)という3つの言語で作られている。

2 タグと属性(HTML)について
・HTMLタグとは開始タグと終了タグで文字を囲むタグのことである。タグとは英語で名札や荷札のことである。
・空要素とはそれ単独で成立するタグのことである。
・属性とはHTMLの各要素に付ける設定のことである。
・属性の種類はタグによって異なる。属性値は引用符("")で囲む。

3 タグと属性の一覧
・DOCTYPE宣言とはこのファイルはHTMLであると定義することである(ヒント：doctype)。
・html要素とはHTML文書の最も上に位置する要素のことである。html要素にはhead要素、body要素を上から順に書くこと(ヒント：html, head, body)。
・head要素には文書の表題を書く(ヒント：title)。
・meta要素にサイトの説明を書くことができる(ヒント：description)。
・HTMLは使用する文字コードを指定する必要がある(ヒント：charset)。
・body要素にはヘッダー、メインコンテンツ、フッダーの順に書く(ヒント：header, main, footer)。ヘッダーには表題やメニューを、メインコンテンツには主要な記事を、フッダーには著作権の表記や関連サイトを乗せる。
・サイト上に直接表示されないコメントと呼ばれるメモを残すことができる(ヒント：!-- --)。
・文章は段落を示すことができる(ヒント：p)。
・文章は見出しを付けて見やすくすることができる(ヒント：h1, h2, h3, h4, h5, h6)。
・箇条書きはリストを付けることができる。(ヒント：ul, ol, li)。リストは目次を作るときに有用である。
・文章は改行することができる(ヒント：br)。
・ある範囲をまとめることができる(ヒント：div)。
・データは表を作ってまとめることができる(ヒント：table, tr, th, td)。
・画像は埋め込むことで表示することができる(ヒント：img src)。画像は高さや幅を変えることもできる。
・ハイパーリンクとは特定の条件下で文章や画像を押すと別のページに移ることである(ヒント：a href)。
・フォームを構成する入力欄や送信ボタンのような各部品(ヒント：input)は、form要素の中に配置する(ヒント：form)。
・名前のような文章の入力が1行で済む場合はフォームの部品であるテキストを入力する欄を作ることができる(ヒント：text)。
・質問や投稿などの文章の入力が2行以上必要になることが多い場合はフォームの部品である2行以上のテキストを入力する欄を作ることができる(ヒント：textarea)。
・フォーム全体では、部品と項目名であるラベルを関連付けることができる(ヒント：label)。
・住んでいる都道府県などの多い選択肢を作るときはフォームの部品であるセレクトボックスを作ったり(ヒント：select, option)、選択肢をグループ化することができる(ヒント：optgroup label)。
・性別など少ない選択肢を作るときはフォームの部品であるラジオボタンを作ることができる(ヒント：radio)。
・同意に賛成するか反対するかを確認するときはフォームの部品であるチェックボックスを作ることができる(ヒント：checkbox)。
・フォームに書かれた入力内容を送る場合のボタン(ヒント：submit)と、フォームに書かれた入力内容をすべて消す場合のボタン(ヒント：reset)を作ることができる。
・特定のメニューと他のメニューを区別するときは特定のメニューにナビゲーションを使う(ヒント：nav)。ナビゲーションは主にページのヘッダー部分に使う。ナビゲーションの内容はリストでなくても文章で表すこともできるが、リストを使ったほうがよい。
・アーティクルは1つの独立した記事であることを表すことができる(ヒント：article)。アーティクルは主にページのメイン部分に使う。
・セクションは主に見出しに使われる(ヒント：section)。
・文書に音楽(ヒント：audio)と動画(ヒント：video)を埋め込むことができる。
・詳細情報を提供する開閉式ウィジェットを表すことができる(ヒント：details)。子要素もある(ヒント：summary)。
・iframe

4 エラーの直し方
もし表示やレイアウトが崩れてしまったら、htmlのタグ閉じ忘れを疑うべきである。

google chromeのデベロッパーツールは、キーボードショートカットまたはChromeのメニューから起動できる。ショートカットキーはMac OSの場合「Cmd+Shift+J」または「Cmd+Shift+C」、それ以外の場合は「Ctrl+Shift+J」となる。

この記事が気に入ったらサポートをしてみませんか？