learn semantic markup

Wenige 1.1 - semantische Markup -Praxis

Lernen Sie semantische HTML, indem Sie diese Dokumente markieren.

Was ist das?

Dies ist ein Verzeichnis von Textdokumenten, die Sie für die Praxis markieren können, um HTML zu lernen. Die Dokumente enthalten die typischen Inhalte, die Sie möglicherweise auf Websites auf Ihrem Telefon und Ihrem Desktop sehen. Nur der Text ist hier enthalten! Ihre Aufgabe ist es, das Markup hinzuzufügen!

Neben dem syntaktisch korrekten HTML -Code ist es Ihr Ziel, HTML -Markup zu verwenden, um die Bedeutung zu verbessern und den Kontext der Informationen zu erhalten. Das Markup sollte Klarheit hinzufügen.

Ihr Ziel ist es, das Dokument mit den Tags zu markieren, die den Inhaltstext am besten beschreiben. Sie möchten, dass die Tags die Nachricht und die Absicht des Inhalts jedes Dokuments am besten ausdrücken.

Mach dir keine Sorgen darüber, wie die Dokumente im Browser aussehen. Dies ist ein häufiger Anfängerfehler . Die Standardstile im Browser sind nur die Standardauswahl, wenn kein anderer Stylesheet enthalten ist.

Verwenden Sie diese Tags:

• Sektionstags
  • Header <header>
  • Abschnitt <section>
  • Artikel <article>
  • Fußzeile <footer>
• Überschriften H1-6 <h1>
• Absätze <p>
• klein <small>
• Blockquote <blockquote>
• pre <pre>
• Code <code>
• Inline -Tags
  • Stark <strong>
  • Betonung <em>
  • Abkürzung <abbr>
  • Anker <a>
  • Zeit <time>
  • Superscript <sup>
  • Zitat <q>

Erste Schritte!

tl; dr laden Sie dieses Repo herunter und fügen Sie jedem der Dokumente HTML -Tags hinzu.

Dieses Repo enthält eine Liste von Herausforderungen und Lösungen. Jede der Lösungsdateien ist markiert.

Die Challenge -Datei enthält nur Text, kein Markup, Sie werden Markup (Tags) hinzufügen.

Bevor Sie beginnen, lesen Sie die Kommentare in jeder Datei. Lesen Sie auch den Text selbst. Das von Ihnen hinzugefügte Markup sollte den Kontext hinzufügen und die Bedeutung und Absicht verstärken.

So laden Sie diesen Code herunter

Wenn Sie Probleme haben, dieses Repo herunterzuladen, sind hier die Schritte:

1. Öffnen Sie ein Terminalfenster und navigieren Sie zu dem Ordner, in dem Sie dieses Repository platzieren möchten. (Es heißt wahrscheinlich so etwas wie: dev/courses/web1.0 )

2. Geben Sie den folgenden Code ein:

 $ git clone [email protected]:soggybag/learn-semantic-markup.git

3. Gehen Sie zu Github.com und erstellen Sie ein neues Repository. (Hinweis: Stellen Sie sicher, dass das Kontrollkästchen "dieses Repository mit einem Readme initialisieren" nicht überprüft wird.

4. Geben Sie die folgenden Einsendungen ein, um das Ziel Ihres Repositorys zu aktualisieren:

 $ git remote set-url origin [email protected]:YOUR_USERNAME/YOUR_REPO_NAME.git
$ git push -u origin master

5. Aktualisieren Sie die Seite in Ihrem neu geschaffenen Github-Repo, um sicherzustellen, dass Ihre Änderungen erfolgreich vorangetrieben wurden.

Überprüfen Sie Ihre Arbeit

Sie können Ihre Arbeit auf einige Arten überprüfen:

Verwenden Sie den Validator, um Ihre Syntax zu überprüfen. Der HTML -Validator überprüft die Syntax Ihres HTML.

https://validator.w3.org

Überprüfen Sie Ihre Arbeit im Validator.

Überprüfen Sie Ihre Arbeit gegen die Lösungen. Was Sie haben, muss nicht die gleiche wie die Lösung sein!

Fühlen Sie sich frei zu beitragen

Fühlen Sie sich frei zu beitragen! Wenn Sie Ideen für ein Dokument haben, die eine gute Herausforderung darstellen könnten, können Sie dazu frei sind, einen Beitrag zu leisten. Siehe den beitragenden Leitfaden. Wenn Sie eine besonders gute Lösung haben, können Sie dies auch beisteuern!