So erstellen Sie einen Veranstaltungskalender in HTML

Autor: Mike Robinson
Erstelldatum: 10 September 2021
Aktualisierungsdatum: 4 Kann 2024
Anonim
So erstellen Sie administrative Skripte mit dem Client Command Editor – ACMP Basics
Video: So erstellen Sie administrative Skripte mit dem Client Command Editor – ACMP Basics

Inhalt

Obwohl Tabellen beim Erstellen von Webseitenlayouts in Ungnade gefallen sind, eignen sie sich immer noch gut zum Codieren von HTML-Kalendern. Kalender zeigen tabellarische Daten auf eine Art und Weise an, sobald sie in einem Datumsraster mit Spalten organisiert sind, die beispielsweise mit den Wochentagen benannt sind. Zusätzlicher CSS-Code erzeugt ein langwieriges Raster mit Namen und Nummern, das eher einem Kalender ähnelt. Da die Ereignisse in einem Kalender sowohl für die Anzahl der Daten als auch für die Ereignisse Platz benötigen, muss CSS auch verwendet werden, um die Daten so zu formatieren, dass beide Informationen lesbar bleiben.

Erstellen Sie eine Tabelle in HTML

Schritt 1

Erstellen Sie eine Tabelle, um den Kalender zu strukturieren. Diese Tabelle erfordert eine Kopfzeile mit sieben Zellen, eine für jeden Wochentag. Es ist auch erforderlich, sechs Zeilen regulärer Tabellenzellen zu erstellen. Kopieren Sie den Auszug mit Hilfe von Notepad oder einem Code-Editor und fügen Sie ihn in eine Webseite ein.


SonntagMontagDienstagMittwochDonnerstagFreitagSamstag

Dieser Code erstellt die Tabelle und den Titel. Die Tabelle verwendet einen Identifikationsnamen namens "Kalender", falls die Website Tabellen auf anderen Seiten verwendet.

Schritt 2

Fügen Sie unter dem Tag "" ein Paar Body-Tags hinzu:

Schritt 3

Kopieren Sie den folgenden Code und fügen Sie ihn zwischen "" sechsmal:

Dieser Code erstellt jede Zeile mit sieben Zellen, sodass der Kalender durch Hinzufügen von sechs Zellen alle Datenbereiche enthält, die Sie für alle Monate des Jahres benötigen.

Schritt 4

Fügen Sie dem Kalender Daten entsprechend dem Monat hinzu, den Sie anzeigen möchten. Konsultieren Sie einen echten Kalender und achten Sie darauf, ein Datum nicht zu überspringen oder zu wiederholen. Schließen Sie jedes Datum mit den Tags "" ein, damit Sie die Zahlen später anpassen können:


31

Schritt 5

Beachten Sie die Ereignisse in den Zellen, die relevante Daten enthalten. Ereignisse müssen sich außerhalb der "" Tags befinden, aber innerhalb der "". Wenn Sie derselben Zelle mehr als ein Ereignis hinzufügen möchten, wickeln Sie jedes in ein Paar Tags ein."

’:

31

Halloween Party!

Letzter Tag für die Registrierung.

Passen Sie den Kalender an

Schritt 1

Suchen Sie die "

Gliederung ist optional, aber dies ist die am besten geeignete Methode, um Tabellen auf aktuellen Webseiten Rahmen hinzuzufügen.

Schritt 2

Passen Sie den Titel der Tabelle mit einer Farbe für die Buchstaben und einer anderen für den Hintergrund an:

Kopfkalender {

Farbe: #ffffff; Hintergrundfarbe: dunkelblau; Schriftdicke: fett; }}

Es ist möglich, Hexadezimalcode oder den Namen der Farben zu verwenden. Dieser Titel zeigt weißen Text auf einem dunkelblauen Hintergrund an.

Schritt 3

Füllung, Rahmen, Breite und Position relativ zu den Tabellenzellen:

th Kalender,

td kalender {

Polsterung: 20px; Rand: 1px festes Schwarz; Breite: 100px; Position: relativ; }}


Durch die relative Platzierung kann der Programmierer später Datumsangaben in Form von Zahlen in den Ecken der Tabellenzellen platzieren. Legen Sie keine Höhe fest, da dies die Anzahl der Texte einschränkt, die Sie einem Datum hinzufügen können.

Schritt 4

Erstellen Sie die Zahlen mit Füllung, Hintergrundfarbe und absoluter Positionierung:

td span kalender {

Schriftdicke: fett; Position: absolut; unten: 0; rechts: 0; Bildschirmsperre; Polsterung: 5px; Hintergrundfarbe: #eeeeee; }}

Sie müssen "display: block" einfügen, damit die Tags "" als Kästchen auf der Webseite fungieren, da Sie sie sonst nicht füllen können. Dieser Beispielcode erstellt ein schwaches graues Feld in der unteren linken Ecke jedes Datumsbereichs, in dem die Datumsnummer angezeigt wird.