演習: HTML ページを作成する

  • 5 分

この演習では、履歴書の Web ページの作成を開始します。 まず、名前やセクション ヘッダーなどの高度な情報を追加します。 また、いくつかのコメントを追加します。これは、後の演習で情報を追加する場所のマーカーとして使用します。

この演習では 、vscode.dev (Visual Studio Code と CodeSwing の Web ベースのバージョン) を使用します。 これらのツールは、開発プロセスを合理化するのに役立ちます。 以下の演習を完了するために、ローカル インストールは必要ありません。

CodeSwing を使用して HTML ページを作成する

まず、フォルダーを作成し、ツールを設定し、vscode.dev で CodeSwing を使用して "スイング" を作成します。 スイングには、vscode.dev で作成したコードの結果が自動的に表示されます。 これにより、迅速に変更を加え、更新がリアルタイムで行われます。

次のビデオでは、Visual Studio Code で CodeSwing をインストールする方法を示します。 これらの手順は、演習の手順にも含まれます。

  1. デスクトップに resume という名前のフォルダーを作成します。
  2. vscode.dev を開きます。
  3. [フォルダー 開く] を選択します。
  4. 先ほど作成した 再開 フォルダーに移動し、[フォルダーの選択] を 選択します。
  5. [ サイト ビュー ファイルを許可する] というメッセージが表示されたら、[ ファイルの表示] を選択します。
  6. [ 拡張機能 ] ボタンを選択します。

    [拡張機能] アイコンのスクリーンショット。

  7. [ Marketplace の検索拡張機能 ] テキスト ボックスに「 CodeSwing」と入力します。
  8. [ インストール] を選択して CodeSwing をインストールします。
  9. Mac で Ctl-Shift-P または Cmd-Shift-P を選択して、コマンド パレットを開きます。
  10. コマンド パレットに 「CodeSwing 」と入力し、[ CodeSwing: New Swing in Directory...] を選択します。
  11. 現在のディレクトリ (前の手順で作成したディレクトリ) を使用するには、[ フォルダーの選択] を選択します 。
  12. [ 基本: HTML のみ] を選択します。
  13. 変更を保存して再開するように求められたら、[変更の保存] を選択します。

Visual Studio Code では、2 つのウィンドウが並べて作成されます。 左側はエディターで、HTML を入力できます。 右側はブラウザーのように動作し、HTML コードの結果が表示されます。

HTML を追加してページの構造を作成する

次に、HTML を追加してページの構造を作成します。 html、head、bodyの 3 つの主要な要素を作成します。 body内に、名前やソーシャル メディア情報など、ユーザーに関する一般的な情報を含むセクションを追加します。 次に、教育と経験を一覧表示するセクションを追加します。

次のビデオでは、Visual Studio Code で HTML を作成し、CodeSwing でコードをレンダリングする方法を示します。 これらの手順は、演習の手順にも含まれます。

Your name はご自由に自分の名前に置き換えてください。 その他の演習では、メール アドレス、ソーシャル メディア ハンドル、教育と経験へのリストとリンクを作成します。

コードを追加したら、追加されたコードを確認します。

  1. index.html内に、次の HTML を追加します。
<html>
<head>
  <title>Your Name resume</title>
</head>
<body>
  <h1>My Name</h1>
  <!-- email address -->
  <h2>Social Media</h2>
  <!-- social media -->
  <h2>Education</h2>
  <!-- education -->
  <h2>Experience</h2>
  <!-- experience -->
</body>
</html>

HTML 内の各要素は、特定の処理を行います。 次の表では、HTML で使用したタグと、ブラウザーで認識される方法について説明します。

タグ 説明
<html> HTML ドキュメント全体の "コンテナー" タグ。 他のすべてのタグは HTML 要素内に書き込まれます。
<head> ヘッダーコンテナです。 通常、ヘッダーには、ページまたはサイトで必要な他のファイルへの参照が含まれます。 また、検索エンジンやソーシャルメディアサイトがウェブサイトをよりよく見つけるために使用するデータを含めることもできます。
<body> このタグは、Web ページの本文コンテナーを作成します。 ほとんどの表示要素は body 要素に含まれます。
<div> 除算タグは、HTML でセクションを作成します。 セクションには通常、相互に関連する類似のコンテンツまたはコンテンツがあります。
<h1> - <h6> これらはヘッダー タグです。 HTML ドキュメントに構造を与えます。 その階層を示す特定の方法でテキストを書式設定するようにブラウザーに指示します。
<!-- comment text --> これらのタグは HTML のコメントです。 レンダリングされた出力は作成されません。 開発者は、コードの検索、共有、理解を容易にするために使用されます。
/* CSS comment */ これらのコメント タグは、カスケード スタイル シートで使用されます。
  1. 入力すると、ページが自動的に更新されます。最終的な結果は次の図のようになります。

履歴書構造のスクリーンショット。

コードの確認

すべての HTML ページはルート コア要素として html され、その中にすべてのコンテンツが含まれています。 html 通常、2 つの直接の子、メタデータを含む head 、表示する情報を含む body があります。

名前には 1 つの h1 要素のみを使用し、各セクションのヘッダーには h2 要素を使用する方法に注意してください。 これは、ページの最も重要な部分を強調表示するのに役立ちます。 自身の名前は、ページ上で最も重要な情報です。したがって、h1 で最上部に表示させます。

最後に、 メール アドレス、 ソーシャル メディア、 教育、 経験に関するコメントがあります。 これらはプレースホルダーとして使用され、このモジュールの後の演習で置き換えられます。