Kommen wir zu den Grundlagen für dieses Kapitel zurück. Jeder, der dies liest, weiß zumindest, was HTML ist. Ich bin der Meinung, dass die Überprüfung der Stiftung, unabhängig von der Erfahrung, die jemand hat, das Wissen verbessern kann. Es hilft auch, Fähigkeiten zu verbessern, insbesondere mit den sich ständig weiterentwickelnden Technologien, die das Internet antreiben.

Auch mit HTML 5 wurde viel über Änderungen gesprochen. Jedes Tag, das ich unten erwähne, wird sowohl in HTML 4.01 als auch in HTML 5 unterstützt. Einige dieser Tags sind bereits weit verbreitet. Ich möchte einige der Möglichkeiten herausfordern, die wir verwenden und über sie nachdenken.

1.

Jedes Buch, das Sie über das Programmieren lesen, wird Ihnen sagen, dass es gut ist, zu erklären, was Sie tun. Warum sind Kommentare eine gute Idee? Aus genau diesem Grund. Es hilft denjenigen, die sich Ihren Code anschauen, um zu wissen, was los ist.

Für HTML kann das Kommentieren wie übertrieben wirken. Es kann jedoch zum Definieren von Abschnitten verwendet werden und hilft dabei, Ihren Code organisiert und strukturiert zu halten. Das Beschriften des Beginns und des Endes eines Abschnitts hilft wirklich beim Workflow.

 
 
Menüpunkt 1
 
Menüpunkt 2
 
   
Dies ist der Hauptinhalt.
… 

2. Tabellenstile - , , und

Wenn ich an die früheren Tage der Webentwicklung zurückdenke, fällt mir das als erstes ein

. Ich habe das so sehr missbraucht. Beim Benutzen richtig, für tabellarische Daten nur, Sie können Stile für Spaltenüberschriften, Fußzeilen und den Körper definieren.

So langweilig es auch ist, es fühlt sich wirklich gut an, eine gut formatierte Tabelle zu erstellen. (Dies gilt außerhalb der Webentwicklung.) Warum sollten wir diese einfache Formatierungsaufgabe nicht in großartiges Design integrieren? Jedes Tag kann dann problemlos im Stylesheet der Site gestaltet werden.

Nur zur Klarstellung: Diese drei Tags betreffen alle Tabellenzeilen.

Artikel	Menge
Summe	7
# 1	3
# 2	4

Umbrechen von Tabellenzeilen mit .

Umbrechen von Tabellenzeilen mit . Das Reihen müssen auch oben sein . Dies ist so, dass die Fußzeile vor den verbleibenden Datenzeilen gerendert wird.

Umbrechen von Tabellenzeilen mit .

 
 
 
Artikel
 
Menge
 
 
 
 
 
Summe
 
7
 
 
 
 
 
# 1
 
3
 
 
 
# 2
 
4
 
 
 

3.

Dropdowns sind eine hervorragende Möglichkeit, einem Benutzer Daten zur Auswahl zu präsentieren. Sie sind sich nicht nur der Bildschirmimmobilien bewusst, sondern sind auch vertraut und einfach zu bedienen. Das tolle ist mit , Es ist möglich, Kategorien für Ihre Optionen zu erstellen (oder wir nennen sie Überschriften).

Detroit-Tiger
Chicago Cubs

Detroit Lions
Chicago Bears

  Detroit-Tiger Chicago Cubs   Detroit Lions Chicago Bears  

4. Überschriften -

,

,

,

,

, und

Ich weiß, dass jeder Überschriften-Tags verwendet. Um ehrlich zu sein, kann ich mich nicht erinnern, wann ich das letzte Mal benutzt wurde

oder niedriger. Ich habe keine guten Gründe, abgesehen davon, dass ich nicht darüber nachgedacht habe und etwas weniger semantisches verwendet habe, wie Text in einem Text zu gestalten

.

Mein Punkt hier ist: Schaffe nicht mehr Arbeit für dich. Denken Sie daran, alle Überschriften-Tags zu verwenden.

5.

und

Ich mag Websites, auf denen Informationen mit logisch getrennten Elementen leicht zu finden sind. Ich denke es sieht glatt aus.

Gruppen bilden zusammen Elemente, indem sie einen Rahmen um sie ziehen. Es ist auch möglich, dem Formular eine Beschriftung hinzuzufügen, indem Sie verwenden

.

 
 
Allgemeine Information: 
 Name:  Email:  Geburtsdatum:  
 

6.

Dies ist möglicherweise einer meiner beliebtesten HTML-Tags. Das Label-Tag ist für das Styling nicht geeignet. Es fügt Funktionalität hinzu.

wird verwendet, um ein Label für ein Eingabeelement zu definieren. Was ist also die große Sache? Bei Verwendung wird die Beschriftung selbst anklickbar, wodurch das entsprechende Eingabefeld aktiviert wird. Dies funktioniert für Textfelder oder Optionsfelder.

Name:
Männlich:
Weiblich:

 Name:  Männlich:  Weiblich:  

7.

Wenn Sie einen dramatischen Effekt erzeugen möchten, um auf eine Aussage oder einen Satz aufmerksam zu machen, können Sie dies verwenden

. Leerzeichen werden standardmäßig vor und nach dem Element eingefügt. Ränder werden auch hinzugefügt, um den enthaltenen Text vom anderen Inhalt zu versetzen.

Dies ist auch ein guter Weg, um Dinge wie traditionelle Blockzitate zu tun. (Ich weiß, das war furchtbar offensichtlich.) Meistens, wenn ich ein Tutorial schreibe, nehme ich einen direkten Auszug von einer anderen Website oder Quelle. ich werde benützen

um dies zu unterscheiden.

Dies ist, was Nettuts + für sein Blockquote-Styling verwendet.

8.

Das will ich nicht sagen bezieht sich auf

, aber ich weiß, dass ich sie normalerweise zusammen benutze.

Denk an wenn Sie etwas zitieren müssen. Wenn Sie frisch aus dem College kommen, sollten Sie die Liste Ihrer Referenzen am Ende Ihrer Arbeit angeben. Denken Sie daran, dass im MLA-Format Buch- und Zeitschriftentitel kursiv dargestellt werden sollen.

"Wir lieben die schöne Typografie und wir schätzen die Bemühungen von Designern, die großartige typografische Techniken und Werkzeuge entwickeln oder die ihr Wissen nur mit Kollegen teilen." - smashingmagazine.com

 
"... das ist ein großartiges Zitat." - someGreatPerson 

9.

Mit Listen lassen sich Informationen gut organisieren. Jeder ist sich dessen bewusst

, aber wie oft sind sie
und

gebraucht? Vielleicht verwirrt der Verweis auf "Definitionsliste" einige anfängliche Codierer zu der Annahme, dass sie nur beim Einfügen von Begriffen und Definitionen verwendet werden können. Dies ist jedoch nicht der Fall.

Arten von Listen

1. Ungeordnete Liste (ul)
2. Bestellliste (ol)
3. Definitionsliste (dl)

Was sie machen

• Ungeordnete Liste (ul): Eine Liste mit Aufzählungszeichen
• Bestellliste (ol): Eine nummerierte Liste
• Definitionsliste (dl): Eine Liste mit Definitionen der Elemente

Gründe für die Verwendung von Listen

• Konsequentes Styling
• Einfach zu erstellen
• Sehr vielseitig

Jeder Listentyp zeigt Informationen auf wertvolle Weise an. Ich glaube nicht, dass ich es erklären muss

und
, Schauen wir uns aber die Struktur einer Definitionsliste genauer an.

 
Dies ist Listenelement Nr. 1
 
Dies ist die Definition des Listenelements Nr. 1
 
Dies ist Listenelement Nr. 2
 
Dies ist die Definition von Listenelement Nr. 2

Anstatt nur einen Listentyp zu deklarieren (

oder
) und jedes Listenelement (
1. ), wir gebrauchen
   und
   .
   Definiert jedes Listenelement und
   beschreibt den obigen Punkt.

   10. '(und andere ASCII-Zeichen)

   Die Verwendung von HTML-ASCII-Codes bei der Verwendung von Symbolen ist eine korrekte Kodierung. Es ist ein bisschen mehr Arbeit, aber es stellt sicher, dass die Zeichen richtig gerendert werden und vom Browser nicht als Teil einer Zeichenfolge oder eines anderen Markups verwirrt werden. Haben Sie jemals einen Text auf einer Webseite gefunden, der nicht korrekt aussah? Vielleicht etwas in der Art: "Ich habe nicht # %%! Verwendet, um den Apostroph zu rendern."

   Das obige Beispiel ist erzwungen, aber ich denke, es vermittelt die Idee.

   Die in modernen Computern, HTML und Internet verwendeten Zeichensätze basieren alle auf ASCII. - w3schools.com

   w3schools.com hat eine großartige HTML-ASCII-Referenzseite für ASCII-Zeichen. Ich möchte jeden dazu ermutigen, es sich anzusehen und ein paar der am häufigsten verwendeten Charaktere wie Apostroph, Anführungszeichen, Et-Zeichen und "at-Zeichen" auswendig zu lernen.

   Vielen Dank fürs Lesen!

   Code