【ホームページ制作】HTML練習用コード

HTMLの忘備録です。

そういえば最近、Web系触ってない。。練習するか。。
が。。あれっHTMLの書き方ってなんだっけ？？
なんか宣言()とかheadタグ()の中にも何か書いたよね。CSSの読み込みはもちろん、他にもあったな。。

久々すぎて忘れていましたので、テンプレートとして残します。

事前準備
・VScodeのインストール
・テスト用のフォルダ作成とテスト用のフォルダの中に、テスト用のhtml、css、jsファイル(拡張子.html,.css,.js)の作成
■階層
Testフォルダ - index.html
L index.css
L index.js
※ファイル名は適当に決めてください。

VScode(Visual Studio Code)を開き、フォルダを開く。
Windows: 「Ctrl」+ 「K」 + 「O」
macOS：［Command］＋［O］

index.htmlに以下のソースをコピペ

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8"/>
        <!-- レスポンシブ対応用タグ -->
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <!-- 検索結果がタイトル下に表示される文章 -->
        <meta name="description" content="検索結果のタイトル下に表示される文章" />
        <title>模倣サイト</title>
        <!-- ブラウザのタブに表示されるサイトアイコン -->
        <link rel="icon" href=""> 
        <link rel="apple-touch-icon" href="" />
        <!-- スマホでホーム画面にページを保存したときに使われるアイコン -->
        <link rel="apple-touch-icon-precomposed" href="" /> 
        <!-- og -->
        <meta property="og:title" content="タイトル" />
        <meta property="og:type" content="website"> <!-- website　または　blog　または　article -->
        <meta property="og:description" content="ページの簡単な説明" />
        <meta property="og:url" content="ページのURL" />
        <meta property="og:site_name" content="サイトのタイトル" />
        <meta property="og:image" content="サムネイル画像のURL" />
        <!-- css -->
         
        <!-- ブラウザ由来のCSSを無効 -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"/> 
        <!-- CSS読み込み -->
        <link rel="stylesheet" href="index.css"/>
　　<!-- JS読み込み -->
　　<script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <h1>タイトル</h1>
        <p>テキスト</p>
    </body>
</html>

※使用するJSファイルによってはタグ直前もしくは、タグ直前だった気がする。

■階層例
Testフォルダ - imgフォルダ - 画像1.png
L HTMLフォルダ - index.html
L JSフォルダ - index.js
L CSSフォルダ - index.css
この場合のhtmlでJS,CSS,imgの読み取り
※絶対パス、相対パスはご自身の勉強のためお調べください。

        <!-- 省略 -->
        <!-- CSS読み込み -->
        <link rel="stylesheet" href="./CSSフォルダ/index.css"/>
        <!-- JS読み込み -->
        <script type="text/javascript" src="./JSフォルダ/index.js"></script>
    </head>
    <body>
        <h1>タイトル</h1>
        <p>テキスト</p>
        <!-- <img src="画像ファイルの場所" alt="代替文字"> -->
        <img src="./imgフォルダ/画像1.png" alt="画像1">
    </body>
</html>

さあ練習しましょう。
もしよければサンプルとして使用してください。

またね。