31日目①(2025.03.02) HTMLの基本

今日は、Javaでwebアプリを作るためにHTMLについて学びます!!
HTMLもこれまで触れたことすらないものなのでドキドキです!!
菅原先生、よろしくです!!


【HTMLの特徴】

★ハイパーテキスト:複数の文書を結びつける仕組み(要するにリンクを使える)
★マークアップ言語:タグを使って文章に意味付けができる言語
※言語・・・文字を繋げることで何かの意味を成すもの

【HTMLの構成】

タグ(HTML)
「<」と「>」で囲まれた文字列。文章をタグで囲むことによって、その文章に意味付
    けをすることができる。

<title>タイトル文字列</title>
タイトルを作るタグ。タイトルで指定した文字列は、ブックマーク時のページ名として
使われる。

(例)

<title>HTML入門</title> <br/>
<a href = “https://google.com”>リンク</a>

<br/>
ブレイク。改行をするためのタグ。
1ヵ所を指定するタグは、タグ名と「>」の間に「/」を記述する。

<a href = “URL” > リンク文字列</a>
リンクを作るタグ。
文字列をクリックするとhref属性値のURLに移動する。
anchor(いかり)が由来(船のいかりのように次のページを引っかけて取ってくるイメージ)

<!DOCTYPE html>
(お決まりの一文。htmlで書かれているということを言っている)

<html>
<head>
<meta charset = “utf-8″/>
<title>HTML入門</title>
</head>
<body>
<h1>HTMLを始めよう!</h1>
<a href = “~” > リンク</a>
</body>
</html>



<html> ~ </html>
→ HTMLの開始と終了を表すタグ

<head> ~ </head>
→ HTML全体の設定情報などをまとめるタグ(文字の種類、タイトル等)

<body> ~ </body>
→ webブラウザへの表示内容をまとめるタグ

【<head>内に記述できる主なタグ】

★<title> ~ </title>
ページのタイトルを指定(ブックマークや検索結果のページ名に使用される

★<meta charset = ” ~ ” />
HTMLファイルの文字コードを指定する

★<meta discription = ” ~ ” />
ページの概要を指定する

★<meta keywords = “~”/>
ページの内容に関連があるキーワードを指定する


【 <body>内に記述できる主なタグ】

★<h1 ~ /h1>
見出しを指定する。h1~h6まであり、h1が一番上のレベル

★<P> ~ </P>
段落を指定する

★<strong> ~ </strong>
強調する範囲を指定する

★<br/>
改行を入れる(HTMLファイル内の改行はブラウザには反映されない)

★<a href = “(URL)” > ~ </a>
リンクを表示する。クリック時の遷移先をhref属性に指定する

★<img src = “(画像データのパス)”> ~ </img>
画像を表示する。width属性とheight属性で、画像の幅と高さを指定できる



全部のタグを覚える必要はない



「とほほのwww入門」で調べる!!

全部のタグを覚える必要がないという点ですごく安心しました!!

そして、最後は実際にHTMLを書いて実行!!


無事、ちゃんとできました!!

この調子で楽しんでいこう!!!

コメントを残す