Lesson2　HTML基礎

いよいよ本格的な実践編となりました。
HTMLのコードを実際に触ってWebページを作るデモンストレーションを行います！

HTMLは“ハイパーテキストマークアップランゲージ”の略で〜
ブラウザに認識させるための文書で〜
ってこの辺はまぁテストに出るかもしれませんが実践の場の知識としては必要なさそうなので割愛。

ここからはVS Codeってゆう専用エディタを使って学習したタグについての内容を記載するよ

基本的なタグ

例えば<h1>は見出しやタイトルとして目立たせて表示したいときに使います。
フォントのサイズによって<h2><h3>…というように数字が大きくなると見出しサイズが小さくなります

<h1>のぞみのブログ</h1>

<ul>と<li>

<ul>はリストを記載するときに初めにコードを書きます。
リストの終わりは必ず</ul>で終了します。

<ul>
英語
数学
理科
</ul>

上記の、英語・数学・理科を「リスト」として表示したい場合は<li>を使って
リストを作成していきます。

<ul>
  <li>英語</li>
  <li>数学</li>
  <li>理科</li>
</ul>

 <!-- と -->

ブラウザから読み取られない隠しコードのようなもの。
メモしたい場合などに使えますが
他の人に見られる可能性もあるためプライベートな内容を書くのは控えた方がいいようです。

<head>と<body>

<head>はユーザーらから見えない内容
<meta charset=”UTF-8″>とUTF-8のコーディングをしますよ、って意味になるので
<head>の後に必ず記載するタグです

<body>はユーザーに見せたい内容

<body>
<ul>
  <li>英語</li>
  <li>数学</li>
  <li>理科</li>
</ul>
</body>

その他のタグ

英語さえ読めればタグがどんなときに使うのかなんとなく理解できますね

　<header> 　　Webページのヘッダー
 <main>　　　　　　メインのコンテンツ
 <article>　　　　サイドバー
 <nav>　　　　　　　　　メニューや目次
　<footer>　　　　フッター
<br>　　　　　　　　　　　　改行
<p>　　　           段落

画像の貼り方

画像貼りする場合は<img>を使います画像のリンクを貼る前にsrcを入れて
リンクを貼っていきます。
altは画像先がエラー表示や読み込めないとき文字にして表してくれる言語を指定します。


具体的には下記のような仕方です。

<img src="https://画像ドメイン" alt="ロゴ画像" width="300">

文字にリンクを貼りたい場合は<a>…</a>を使います。

<a>詳しくはこちらのチャンネルを</a>

ここまで学習してだいぶ疲れてきました！
このブログをアウトプットの場にしていますが、1000文字書くのに1時間といったところでしょうか。
かなり時間を使いますね。SEOの観点からは2000文字を目指すようにと聞いたのですが
ブログに挫折する方々の気持ちがものすごくわかります。

明日も復習として頑張って記事を書きます。

コメント

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