So erstellen Sie eine HTML-Seite

Autor: Florence Bailey
Erstelldatum: 20 Marsch 2021
Aktualisierungsdatum: 1 Juli 2024
Anonim
Eigene Website mit HTML und CSS bauen | Tutorial für Anfänger 2020
Video: Eigene Website mit HTML und CSS bauen | Tutorial für Anfänger 2020

Inhalt

HTML (Hypertext Markup Language) ist die wichtigste Programmiersprache zum Entwickeln von Webseiten. Erstellt als einfache und komfortable Programmiersprache. Die meisten Seiten im Internet wurden mit einer der Formen dieser Sprache (ColdFusion, XML, XSLT) entwickelt. Nachdem Sie diesen Artikel gelesen haben, können Sie Ihr Training mit anderen Ressourcen im Internet fortsetzen. Versuchen Sie, im Internet nach anderen Artikeln zu diesem Thema zu suchen.

Schritte

Methode 1 von 1: Eine HTML-Seite schreiben

  1. 1 Bevor Sie sich mit einem der hier vorgestellten Schritte vertraut machen, lesen Sie den Abschnitt „Was Sie benötigen“.
  2. 2 Was Sie wissen sollten, bevor Sie dieses Problem verstehen:
  3. 3 Die Grundlagen. Schon mal was von dem Etikett gehört? Das Tag ist von spitzen Klammern umgeben, in denen sich das Wort befindet. Das End-Tag wird in der gleichen Form geschrieben, jedoch mit einem Schrägstrich nach der ersten spitzen Klammer. Ein Attribut ist ein optionales Wort in einem Tag, das verwendet wird, um einem Tag Details hinzuzufügen.
  4. 4 Der Anfang des Dokuments. Fügen Sie in dem von Ihnen verwendeten Texteditor Folgendes ein:
    html>Kopf>Titel>wikiHow/Titel>/Kopf>Körper>Hallo Welt/Körper>/html>Groß>/Groß>
    Das Tag muss mit demselben Tag geschlossen werden, jedoch mit einem Schrägstrich nach der ersten spitzen Klammer. Es gibt Ausnahmen wie Tags META oder DOCTYP.
  5. 5 DOCTYP
    • Normalerweise sind die meisten Webseiten eingestellt DOCTYP ”. Dies hilft bei der Bestimmung der Codierung und wie sie von Webbrowsern wahrgenommen wird. Die meisten Seiten funktionieren ohne, „aber dies ist notwendig, wenn Sie übereinstimmen möchten (Sie regeln die Arten von Codierungen im Internet und wie sie verwendet werden)... Der DOCTYPE für HTML 4.01 ist unten dargestellt:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Dies ist einer der häufigsten DOCTYPE wird auf Seiten im gesamten Internet verwendet.Zuerst zeigt es auf den Typ der Seite, die das „html“ beschreibt, dann hebt es die Art der Codierung hervor und schließlich die Position des DOCTYPE, der die Seite für den Webbrowser beschreibt.
    • Es gibt verschiedene Arten von HTML (verschiedene Versionen, die im Laufe der Jahre entwickelt wurden), beispielsweise die Verwendung neuer Tags oder spezifischer Tags. Einige Tags sind veraltet (andere, nützlichere Tags werden stattdessen verwendet).
    • b> und ich> - Dies wird derzeit Tags auferlegt, da sie verwendet werden, um Text zu transformieren, aber keine Spezifikationen. Daher werden sie durch andere Tags ersetzt. Etikett stark> ist ein Ersatz für b>, und em>, ein Ersatz für ich>.
    • Es ist wichtig, dass die vorherigen Tags durch Tags ersetzt werden, die mehr als nur eine Formatierung sind. Wird der Text übersetzt, bleibt nicht nur die Formatierung, sondern auch die Bedeutung gleich. Dies ist semantisch korrekt.
    • In der XHTML-Version 2.0 sind die b> und ich> nicht verwendet, genau wie in HTML-Version 3+.
  6. 6 HTML "Kapselungsregel".
    • Werfen wir einen Blick auf die wichtigeren Tags, die derzeit verwendet werden. Bei der Erstellung der Seite wird eine einfache Struktur verwendet. Wenn ein Tag geöffnet wurde, wird als Ergebnis es sollte geschlossen sein... Dies gilt für die gesamte Struktur. Hier ist ein gültiges Beispiel für die XHTML-Layoutstruktur:
    • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • html xmlns = "http://www.w3.org/1999/xhtml">
    • Kopf>
    • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
    • title> Hallo Welt! / title>
    • / Kopf>
    • Körper>
    • h1> Hallo Welt! / h1>
    • / Körper>
    • /html>
    • Beispielcode, der eine Nachricht ausgibt Hallo Welt... Das nennt man einen Test Hallo Welt.
  7. 7 Üerschrift
    • Der Webseitentitel ist der Inhalt zwischen dem Tag Kopf>... Dieser Inhalt kann vom Benutzer nicht angezeigt werden (nur der Titel, der im Titel der Seite angezeigt wird). Informationen zwischen Tags Kopf>, kann andere Tags einschließen, wie zum Beispiel:

      • Das META-Tag wird für Informationen verwendet, die für Suchmaschinen und andere Dienstprogramme nützlich sind.
      • LINK-Tag, das eine Verknüpfung zwischen Dokumenten herstellt, beispielsweise für Styles (CSS).
      • SCRIPT-Tag, dies umfasst fast jede Webcodierung mit der Möglichkeit des Fernzugriffs (von einem anderen Dokument aus).
      • Das STYLE-Tag, das im Wesentlichen ein Stil ist, der auf eine Seite angewendet werden kann.
      • Das TITLE-Tag ist der Titel, der als Titel einer Seite in Ihrem Webbrowser angezeigt wird.
    • Sehen wir uns eine Demo von einigen davon in einem Beispiel-Header von dieser Website an (er wurde gekürzt):
      • Kopf>
      • Titel> ... / Titel>
      • meta name = "description" content = "..." />
      • link rel = "stylesheet" type = "text / css" href = "..." />
      • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
      • style type = "text / css" media = "all"> ... / style>
      • script type = "text / javascript" src = "..."> / script>
      • / Kopf>

        Falls Sie es nicht bemerkt haben, wurden die einzelnen Tags hervorgehoben und die eigentlichen Informationen entfernt. Das Beispiel ist ziemlich kurz und zeigt fast alle Tags, die in gefunden werden können Kopf>außer HTML-Kommentar (Wir werden darüber in einfachen Tags sprechen).
  8. 8 Einfache Tags überall
    • Lassen Sie uns weitermachen und andere Tags sehen. Seien Sie vorsichtig mit Ihrem Tagging und denken Sie an die Faustregel "Kapselung".

      • stark> Hebt wichtigen Text hervor.
      • small> Verkleinert den Text. Die Schriftgröße wird in Standardeinheiten von 1 bis 7 gemessen. 3 ist die Standardtextgröße. ...
      • pre> Definiert einen Rich-Text-Block. Wie es richtig ist, wird ein solcher Text in einer Schrift gleicher Größe und mit allen Leerzeichen zwischen den Wörtern geschrieben.
      • em> Zeigt Text als Phrase an.
      • del> Text durchgestrichen.
      • ins> Definiert den Text, der in das Dokument eingefügt wurde.
      • h1> Einer von vielen Überschriften-Tags. Tags dieser Art beginnen mit 'h', mit einem Unterschied in der Zahl. Stellen Sie sicher, dass Sie das Tag mit der gleichen Nummer schließen.
      • p> Definiert einen Absatz.
      • --- ... ---> Im Gegensatz zu anderen Tags muss der Kommentar innerhalb des Tags selbst stehen. Diese Informationen sind nur sichtbar, wenn der Code angezeigt wird.
      • blockquote> Zeigt ein Zitat an, kann mit dem Tag cite> verwendet werden.
      • Die wenigen Beispiele oben sind keine vollständige Liste vorhandener Tags. Um mehr über andere zu erfahren, besuchen Sie.
  9. 9 Eine klare Struktur schaffen
    • Seiten sind so konzipiert, dass sie Daten in einfachen Tags enthalten, damit wir die Informationen in Absätze aufteilen können. Der Computer erkennt Daten, er kennt weder Kontext noch konzeptionelle Zusammenhänge. Wir müssen computerfreundliche HTML-Seiten erstellen. Dies wird durch die Verwendung des div-Tags erreicht. Es hilft, eine große Anzahl von Seiten zu erstellen. Es kann mit CSS gestaltet werden und ist einfacher als das Erstellen großer Codetabellen für das Layout.
      • div> Dieses Tag ist besonders, weil es gestylt werden kann und separate Informationsblöcke verwendet, die sowohl der Benutzer als auch der Computer verstehen können.
    • Schauen wir uns ein einfaches HTML-Layout an, das ein div-Tag verwendet.
      • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • html xmlns = "http://www.w3.org/1999/xhtml">
      • Kopf>
      • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
      • title> Hallo Welt! / title>
      • / Kopf>
      • Körper>
      • h1> Hallo Welt! / h1>
      • div id = "contentOne">
      • p> Dies ist ein Text in div # contentOne. / p>
      • div>
      • p> Ein Absatz in einem Unterabschnitt von div # contentOne / p>
      • / div>
      • / div>
      • / Körper>
      • /html>
    • Die Verwendung von div>-Tags hilft beim Suchen und Ändern von Stilen bei der Arbeit mit CSS und Javascript. HTML verwendet unterschiedliche Codierungen, um mit CSS-Stilen und Javascript zu arbeiten, um eine bessere und reaktionsschnellere Benutzererfahrung zu schaffen.

Tipps

  • Halten Sie nach dem Lesen dieses Artikels nicht inne und denken Sie, dass Sie alles gelernt haben, was Sie wissen müssen. Gerade bei dieser Technologie gibt es immer etwas zu lernen.
  • Code lernen, verstehen und schreiben.
  • Beachten Sie, dass einige Tags nur > verwenden. Para und br sind einige Beispiele. Andere Tags, die mit> geöffnet wurden, müssen weiter geschlossen werden. Beispiel: "div> / div>".
  • Die Leute erwarten neue Entdeckungen, also erfinden, entwerfen oder programmieren Sie neu.
  • Wenn Sie viel gelernt haben, versuchen Sie es mit der Serverprogrammierung.
  • Lernen Sie sowohl mit CSS als auch mit Javascript zu arbeiten.

Warnungen

  • Denken Sie daran, dass es bei HTML darum geht, Inhalte zu bearbeiten. Dies bedeutet, dass HTML nur verwendet wird, um Inhalte in einem erkannten Format zu speichern. Andere Änderungen müssen mit anderen Technologien wie CSS vorgenommen werden. Es bedeutet auch, „semantisch korrekt“ zu tunauch wenn andere es nicht zugeben. Andere Programmiersprachen helfen beim Erstellen von Webseiten (CSS, Javascript und XML). HTML ist ein Inhaltskonstruktor.

Was brauchst du

  • Ein Texteditor, der ANSI-Codierung unterstützt
  • Ein Webbrowser wie Internet Explorer oder Mozilla Firefox
  • (Optional) wysiwyg- oder wykiwyg-HTML-Editor wie Adobe Dreamweaver, Aptana Studio oder Microsoft Expression Web