未経験の方！必見！
最初のフォーマット！
VScode、Eclipsなどのエディタを利用してやる場合は、以下の最初のフォーマットはショートカットキーで自動作成されます。
ただ、PCの容量が少ないけど、練習で制作してみたいという方は、サクラエディタ、秀丸をインストールし、以下をそのままコピペ利用して初めて見てください。
※これは大枠で練習でテキストを表示させたりする前の段階で、制作するサイトの説明などを記載する箇所となります。また、デザインを別のファイル(CSS)で対応する場合は、どのスタイルシートを読み込むのかなどの設定する場所です。
↓最初のフォーマットのプログラム↓
<!DOCTYPE html><!-- このファイルはHTMLですという宣言 -->
<html lang="ja"><!-- ここからHTMLが始まりますというタグ -->
<head><!-- ここから裏の設定ですよという宣言 -->
<!-- memo:メタ情報を適切に設定する -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Title</title>
<meta name="description" content="サイトの説明">
<meta propaty="og:type" content="website">
<meta propaty="og:site-name" content="サイトのタイトル">
<meta propaty="og:url" content="サイトのリンク">
<meta property=”og:image” content=” サムネイル画像のURL” />
<link rel="icon" href="img/favicon.ico">
<!-- 左記のサイトでfavicon.ico作成 https://www.xiconeditor.com/-->
<!-- CSS：デザインを別のファイル(CSS)で対応する場合 -->
<!-- スタイル(フォントサイズ/フォントの太さ/デザインなど) -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head><!-- ここまでが裏の設定ですよという宣言 -->
<style>
</style>
<body>
</body>
</html>
練習問題
メモ帳でも作成可能ですが、フリーソフト：サクラエディタですと行番号も振られており、見やすいので、ぜひインストールして利用してみてください。表示されているか確認は、既存ブラウザにて確認してください。
サクラエディタ
ブラウザ：chrome、edgeなど
練習問題①
上記のフォーマットをコピペして、以下のテキストを表示させてください。
【Hello World】
練習問題②
上記のフォーマットをコピペして、以下のテキストのフォントを太字で表示させてください。
※styleの中に、フォントの太さを指定させる。
【Hello World】
練習問題③
上記のフォーマットをコピペして、以下のテキストと画像をを表示させてください。
※以下の画像をダウンロードして利用してください。
【Hello World】
本日の練習問題の解答は次の投稿にて！