HTML CSS 骨組み

<!doctype html>

doctype宣言

 

<html>~</html>

HTMLの文章だと表す

 

<head>~</head>

ページの情報を記述

 

<meta charset="UTF-8">

文字コードUTF-8に指定

 

<title>~</title>

ページタイトルを記述

 ブラウザのタブ、ブックマーク名、検索時のページタイトルとして表示

 

<meta name="description" content="~">

ページの説明文。検索ページでタイトルとともに表示される部分

 

<body>~</body>

HTMLの本体部分

 

<h1>~</h1>

見出しタグ。1~6まである

 

<p>~</p>

文章の段落を表す

 

<img src="ファイル名" alt="説明文">

画像を表示するタグ。終了タグはない。

src属性 場所を設定

alt属性 画像の代わりに表示する文

 

<a href="URL">~</a>

リンクを張るaタグ

 

 <a href="https://google.co.jp">
        <img src="sakura.jpg" alt="美しい桜">
    </a>

画像にリンクを張るコード

 

<a href="info@example.com">お問い合わせ</a>

メールアドレス宛てのリンク

 

<ul>
        <li>卵(3個)</li>
        <li>しょうゆ(大さじ1)</li>
        <li>みりん(大さじ1)</li>
        <li>塩(少々)</li>

</ul>

箇条書きリストを作るタグ

<ul>タグだけでは機能せず、<li>タグを使用し項目を追加する。

ul「Unordered List」順序の決まってないリスト

li「List Item」箇条書きにするリストアイテム

 

<ol>
        <li>卵を割りほぐし、調味料を加える</li>
        <li>卵焼き器に卵液を1/4量を入れて広げる</li>
        <li>半熟状になったら箸で手前に巻き、奥に移動させる</li>
        <li>これを繰り返し、最後まで焼けたら完成</li>
    </ol>

番号付きリストを作るタグ

<ol>の中に<li>で追加していく。