手紙をマークアップする

私たちはみんな遅かれ早かれ手紙を書くことを学びます。

テキストの書式設定のスキルを試すのも便利な例です。この評価では、ハイパーリンクを含む基本的な HTML テキストフォーマットスキルと高度な HTML テキストフォーマットスキルをテストするためにマークアップするための文字が与えられます。さらに HTML <head> コンテンツに対するあなたの慣れをテストします。

前提条件: このアセスメントを試みる前に、「HTML を始めよう」、「head には何が入る? HTML のメタデータ」、「HTML テキストの基礎」、「ハイパーリンクの作成」、および「高度なテキスト処理」をすでに読んでおく必要があります。
目的: 基本的な HTML テキストの書式設定とハイパーリンクのスキル、および HTML <head> の内容に関する知識をテストします。

スタートポイント

この評価を開始するには、マークアップする必要がある生のテキストと、HTML に含める必要がある CSS を入手します。テキストエディタを使用して新しい .html ファイルを作成し、作業を行います (または、JSBin や Thimble などのサイトを使用して評価を行います)。

簡単なプロジェクト

このプロジェクトの場合、あなたの仕事は大学のイントラネットでホストされる必要がある手紙をマークアップすることです。手紙は、大学で働くことへの彼らの申し込みに関する研究フェローから博士課程の学生への返事です。

ブロック/構造セマンティクス

  • ドキュメント全体を doctype、<html>、<head>、<body> 要素を含む適切な構造で構成する必要があります。
  • 一般的な手紙は、以下の点を除いて、段落と見出しの構造でマークアップされるべきです。トップレベルの見出し ("Re:" 行) が1つと、セカンドレベルの見出しが3つあります。
  • 学期の開始日、研究科目、そしてエキゾチックな踊りは適切なリストタイプを使ってマークアップされるべきです。
  • 2つのアドレスは段落の中に入れることができます。<address> 要素はそれらには適していません — その理由を考えてください。さらに、アドレスの各行は新しい行の上に配置する必要がありますが、新しい段落には配置しないでください。

インラインセマンティクス:

  • 送信者と受信者の名前 (および "Tel" と "Email") は、非常に重要なものとしてマークアップする必要があります。
  • 文書内の4つの日付には、機械が読める日付を含む適切な要素を指定する必要があります。
  • 手紙の最初のアドレスと最初の日付には、"sender-column" のクラス属性値を指定する必要があります。後で追加する CSS では、従来の手紙のレイアウトの場合と同様に、これらが正しく配置されます。
  • 文字の本文中の5つの頭字語/略語は、それぞれの頭字語/略語を拡張するためにマークアップする必要があります。
  • 6つの下付き/上付き文字は適切にマークアップする必要があります — 化学式、および 103 と 104 の数字 (それぞれ 10 のべき乗または 3 と 4 にする必要があります)。
  • テキストの中で少なくとも2つの適切な単語に強い重要性と強調を設定するようにしてください。
  • ハイパーリンクを追加する場所は2か所あります。タイトル付きの適切なリンクを追加してください。リンクが指す場所には http://example.com を使用してください。
  • 大学のモットーのクォートと引用は適切な要素でマークアップされるべきです。

ドキュメントの head:

  • 適切なメタタグを使用して、ドキュメントの文字コードを utf-8 として指定する必要があります。
  • 手紙の作者は適切なメタタグで指定されるべきです。
  • 提供された CSS は適切なタグの中に含まれるべきです。

ヒントとコツ

  • HTML を検証するために W3C HTML validator を使用してください。検証すればボーナスポイントを得られるでしょう。
  • この評価をするために CSS を知る必要はありません。 提供された CSS を HTML 要素の中に入れるだけです。

例

次のスクリーンショットは、マークアップ後の文字の表示例を示しています。

Example

評価

組織的コースの一環としてこの評価に従っている場合、採点のために作品を教師/メンターに渡すことができるはずです。もし自己学習しているのであれば、この練習問題についてのディスカッションスレッド、または Mozilla IRC の #mdn IRC チャンネルで尋ねることで、非常に簡単にマーキングガイドを入手することができます。最初にエクササイズをしてみてください - 不正をすることによって得られるものは何もありません！

 

このモジュール

関連トピック
  1. 完全な初心者はこちらから!
  2. ウェブ入門
    1. ウェブ入門
    2. 基本的なソフトウェアのインストール
    3. ウェブサイトをどんな外見にするか
    4. ファイルの扱い
    5. HTML の基本
    6. CSS の基本
    7. JavaScript の基本
    8. ウェブサイトの公開
    9. How the Web works
  3. HTML — Structuring the Web
  4. HTML概論
    1. HTML概論
    2. Getting started with HTML
    3. head って何？HTML のメタデータ
    4. HTML テキストの基礎
    5. ハイパーリンクを作ってみる
    6. Advanced text formatting
    7. Document and website structure
    8. Debugging HTML
    9. Assessment: Marking up a letter
    10. Assessment: Structuring a page of content
  5. Multimedia and embedding
    1. Multimedia and embedding overview
    2. Images in HTML
    3. Video and audio content
    4. From object to iframe — other embedding technologies
    5. Adding vector graphics to the Web
    6. Responsive images
    7. Assessment: Mozilla splash page
  6. HTML tables
    1. HTML tables overview
    2. HTML table basics
    3. HTML Table advanced features and accessibility
    4. Assessment: Structuring planet data
  7. HTML forms
    1. HTML forms overview
    2. Your first HTML form
    3. How to structure an HTML form
    4. The native form widgets
    5. Sending form data
    6. Form validation
    7. How to build custom form widgets
    8. Sending forms through JavaScript
    9. HTML forms in legacy browsers
    10. Styling HTML forms
    11. Advanced styling for HTML forms
    12. Property compatibility table for form widgets
  8. CSS — Styling the Web
  9. CSS
    1. CSS
    2. CSS の働き
    3. CSS syntax
    4. Selectors introduction
    5. Simple selectors
    6. Attribute selectors
    7. Pseudo-classes and pseudo-elements
    8. Combinators and multiple selectors
    9. CSS values and units
    10. Cascade and inheritance
    11. The box model
    12. Debugging CSS
    13. Assessment: Fundamental CSS comprehension
  10. Styling text
    1. Styling text overview
    2. Fundamental text and font styling
    3. Styling lists
    4. Styling links
    5. Web fonts
    6. Assessment: Typesetting a community school homepage
  11. Styling boxes
    1. Styling boxes overview
    2. Box model recap
    3. Backgrounds
    4. Borders
    5. Styling tables
    6. Advanced box effects
    7. Assessment: Creating fancy letterheaded paper
    8. Assessment: A cool-looking box
  12. CSS layout
    1. CSS layout overview
    2. Introduction
    3. Normal Flow
    4. Flexbox
    5. Grids
    6. Floats
    7. Positioning
    8. Multiple-column Layout
    9. Legacy Layout Methods
    10. Supporting Older Browsers
    11. Fundamental Layout Comprehension
  13. JavaScript — 動的クライアントサイドスクリプト
  14. JavaScript の第一歩
    1. JavaScript の第一歩
    2. JavaScriptって何？
    3. JavaScriptへの最初のダイブ
    4. 何が間違っている? JavaScript のトラブルシューティング
    5. 必要な情報を保存する — 変数
    6. JavaScriptでの数学入門 — 数値と演算子について
    7. テキストを扱う — JavaScript での文字列
    8. 便利な文字列メソッド
    9. 配列
    10. バカ話ジェネレーター
  15. JavaScript building blocks
    1. JavaScript building blocks overview
    2. Making decisions in your code — Conditionals
    3. Looping code
    4. Functions — Reusable blocks of code
    5. Build your own function
    6. Function return values
    7. Introduction to events
    8. Assessment: Image gallery
  16. Introducing JavaScript objects
    1. Introducing JavaScript objects overview
    2. Object basics
    3. Object-oriented JavaScript for beginners
    4. Object prototypes
    5. Inheritance in JavaScript
    6. Working with JSON data
    7. Object building practice
    8. Assessment: Adding features to our bouncing balls demo
  17. Asynchronous JavaScript
    1. Asynchronous JavaScript overview
    2. General asynchronous programming concepts
    3. Introducing asynchronous JavaScript
    4. Cooperative asynchronous Java​Script: Timeouts and intervals
    5. Graceful asynchronous programming with Promises
    6. Making asynchronous programming easier with async and await
    7. Choosing the right approach
  18. Client-side web APIs
    1. Client-side web APIs
    2. Introduction to web APIs
    3. Manipulating documents
    4. Fetching data from the server
    5. Third party APIs
    6. Drawing graphics
    7. Video and audio APIs
    8. Client-side storage
  19. Accessibility — Make the web usable by everyone
  20. Accessibility guides
    1. Accessibility overview
    2. What is accessibility?
    3. HTML: A good basis for accessibility
    4. CSS and JavaScript accessibility best practices
    5. WAI-ARIA basics
    6. Accessible multimedia
    7. Mobile accessibility
  21. Accessibility assessment
    1. Assessment: Accessibility troubleshooting
  22. Tools and testing
  23. Cross browser testing
    1. Cross browser testing overview
    2. Introduction to cross browser testing
    3. Strategies for carrying out testing
    4. Handling common HTML and CSS problems
    5. Handling common JavaScript problems
    6. Handling common accessibility problems
    7. Implementing feature detection
    8. Introduction to automated testing
    9. Setting up your own test automation environment
  24. Server-side website programming
  25. First steps
    1. First steps overview
    2. Introduction to the server-side
    3. Client-Server overview
    4. Server-side web frameworks
    5. Website security
  26. Django web framework (Python)
    1. Django web framework (Python) overview
    2. Introduction
    3. Setting up a development environment
    4. Tutorial: The Local Library website
    5. Tutorial Part 2: Creating a skeleton website
    6. Tutorial Part 3: Using models
    7. Tutorial Part 4: Django admin site
    8. Tutorial Part 5: Creating our home page
    9. Tutorial Part 6: Generic list and detail views
    10. Tutorial Part 7: Sessions framework
    11. Tutorial Part 8: User authentication and permissions
    12. Tutorial Part 9: Working with forms
    13. Tutorial Part 10: Testing a Django web application
    14. Tutorial Part 11: Deploying Django to production
    15. Web application security
    16. Assessment: DIY mini blog
  27. Express Web Framework (node.js/JavaScript)
    1. Express Web Framework (Node.js/JavaScript) overview
    2. Express/Node introduction
    3. Setting up a Node (Express) development environment
    4. Express tutorial: The Local Library website
    5. Express Tutorial Part 2: Creating a skeleton website
    6. Express Tutorial Part 3: Using a database (with Mongoose)
    7. Express Tutorial Part 4: Routes and controllers
    8. Express Tutorial Part 5: Displaying library data
    9. Express Tutorial Part 6: Working with forms
    10. Express Tutorial Part 7: Deploying to production
  28. Further resources
  29. Common questions
    1. HTML questions
    2. CSS questions
    3. JavaScript questions
    4. How the Web works
    5. Tools and setup
    6. Design and accessibility
  30. How to contribute