HTML Grundgerüst einer Webseite

In der Ausbildung zum IT-Systemkaufmann hat man unteranderem auch Einführungen in verschiedene Beschreibungs-, Programmier- und Skriptsprachen. Eine Beschreibungssprache ist unteranderem HTML (Hypertext Markup Language). Diese wird auch als Auszeichnungssprache bezeichnet. Als erstes bei der Einführung, lernt man den Grundaufbau einer Internetseite. Dieses Grundgerüst einer HTML Seite habe ich euch inklusive eines Beispiels mal aufbereitet.

Bezeichnung HTML-Tags
HTML-Einleitung für den Webbrowser <!DOCTYPE HTML PUBLIC „*-//W3C//DTD HTML 4.01 Transitional//EN“>
HTML-Dokument öffnen < html >
Die Kopfdaten (Diese werden im Browser selber nicht angezeigt, außer der „title“ dieser erscheint im Anzeigefenster des Browsers, dient als Titel unter den Favorieten und wird auch durch Suchmaschinen mit benutzt. Weitere Angaben Bsp.: Metatags dienen im Allgemeinen für die Robots der Suchmaschinen.) < head > HTML-Kopfdaten öffnen
< title >
Titel der Seite < /title >
< meta name= „description“ content= „Beschreibungstext“ >
< meta name= „author“ content= „Autorenname“ >
< meta name= „keywords“ content= „[Suchbegriffe]“ >
mehrsprachig  Pfeil nach unten< meta name= „keywords“ lang= „de“ content= „[Deutsch]“ >
< meta name= „keywords“ lang= „en-us“ content= „[Englisch-Amerikanisch]“ >
< meta name= „keywords“ lang= „en“ content= „[Englisch]“ >
< meta name= „keywords“ lang= „fr“ content= „[Französisch]“ >
etc.
< /head > HTML-Kopfdaten schließen
Seiteninhalt < body > HTML-Seiteninhalt öffnen
Hier wird der Inhalt einer HTML-Seite eingetragen.
zum Beispiel:

  • Text
  • Verweise / Links
  • Grafiken
  • aktive Elemente (PHP-Scripte, Flash oder PERL-Scripte)

< /body > HTML-Seiteninhalt schließen

HTML-Dokument schließen < /html >
Beispiel-Quelltext <!DOCTYPE HTML PUBLIC „*-//W3C//DTD HTML 4.01 Transitional//EN“>
< html >
< head >
< title > Beispiel-Quelltext < /title >
< style >
a {
text-decoration
: none;
font-family: Verdana;
font-size: 11px;
color: #000000;
font-weight: bold;
}
a:hover {
text-decoration: underline;
color: #1760FC;
}
td.oben {
font-family: Verdana;
font-size: 11px;
color: #9D9D9D;
font-weight: bold;
}
td.inhalt {
font-family: Verdana;
font-size: 11px;
color: #000000;
background: #9D9D9D;
padding: 5px 5px 5px 5px;
font-weight: bold;
}
tr.rahmen {
background: #9D9D9D;
}
< /style >

< /head >
< body bgcolor=„#9D9D9D“ text=„#000000“ link=„#000000“ vlink=„#000000“ alink=„#000000“ >
< div align=„center“ >
<!– Haupttablle –>
< table border=„0“ cellpadding=„0“ cellspacing=„0“ width=„770“ bgcolor=„#1760FC“ >
< tr >
< td width=„770“ >
< div align=„center“ >
< table border=„0“ cellpadding=„0“ cellspacing=„0“ width=„770“ >
<!– Bannerzeile –>
                      < tr >
< td width=„770“ height=„100“ valign=„top“ background=„images/banner_5.jpg“ >
&nbsp;
< /td >
< /tr>
<!– Bannerzeile Ende –>
<!– Menuezeile –>
                      < tr class=„rahmen“ >
< td width=„770“ height=„15“ class„inhalt“ align=„right“ >
< a href=„index.htm“ title=„Startseite“ > Home < /a >
< /td >
< /tr >
<!– Menuezeile Ende –>
<!– Inhaltszeile –>
                      < tr >
< td width=„770“ >
< div align=“center“ >
< table border=„0“ width=„770“ >
< tr >
< td width=„130“ valign=„top“ >
< div align=„center“ >
< table border=„0“ cellpadding=„0“ cellspacing=„0“ width=„130“ >
< tr >
< td width=„130“ background=„images/navigation_2.jpg“ class=„oben“ align=„right“ >
Thema1&nbsp;
< /td >
< /tr >
< tr >
< td width=„130“ bgcolor=„#9D9D9D“ align=„left“ class=„inhalt“ >
Link1 < br >
Link2
< /td >
< /tr >
< tr >
< td >
&nbsp;
< /td >
< /tr >
< tr >
< td width=“130″ background=„images/navigation_2.jpg“ class=„oben“ align=„right“ >
Thema2&nbsp;
< /td >
< /tr >
< tr >
< td width=„130“ bgcolor=„#9D9D9D“ align=„left“ class=„inhalt“ >
Link1 < br >
Link2
< /td >
< /tr >
< /table >
< /div >
< /td >
< td width=„640“ valign=„top“ >
< div align=„center“ >
< table border=„0“ cellpadding=„0“ cellspacing=„0“ width=„100%“ >
< tr >
< td colspan=„2“ width=„100%“ background=„images/infofeld.jpg“ class=„oben“ align=„right“ >
Startseite – Home &nbsp;

< /td >
< /tr >
< tr align=„center“ class=„rahmen“ >
< td width=„215“ valign=„top“ class=„inhalt“ align=„left“ >
< img src=„images/startseite.jpg“ width=„200“ height=„200“ border=„0“ >
< /td >
< td width=„403“ valign=„top“ class=„inhalt“ align=„left“ >
Hier finden Sie: < br > < br >
Inhaltstext
< /td >
< /tr >
< /table >
< /div >
< /td >
< /tr >
< /table >
< /div >
< /td >
< /tr >
                      <!– Inhaltszeile Ende –>
                      < /table >
< /div >
< /td >
< /tr >
< /table >
<!– Ende Haupttabelle –>
< /div >
< /body >
< /html >
so sieht es aus Bild zeigt Quelltext als HTML Seite

Klicken Sie auf das Bild um die gesamte Seite dargestellt zu bekommen.

Ein solches Grundgerüst kann mit jedem Texteditor oder mit dafür speziellen Programmen geschrieben werden.

Als freie Software, kann man den NVU-Composer nutzen.

Wer ein wenig Geld übrig hat kann auch eine kostenpflichtige Software nutzen. Ich selbst nutze zur schnellen Erstellung von HTML-Seiten den NAMO Webeditor 9.

Ich wünsche alles viel Spaß beim Üben und Probieren

Den Artikel zum Donwload gibts hier: Artikel HTML Grundgerüst einer Webseite (348)

Teil 2 HTML Code für Linkeinträge oder Verweise auf einer Webseite einfügen

Teil 3 Homepage HTML Codes Bilder oder Fotos einfügen

Über Michael Bergler 687 Artikel
Mein Name ist Michael Bergler ich stamme aus Sachsen und habe seit 10 Jahren die Leidenschaft mich mit HTML, PHP, Bildbearbeitung und Perl zu beschäftigen. Seit 2011 lebe ich in Chemnitz und arbeite als Selbständiger in dem Bereich Informationstechnologie (IT), Büroservice und Telefonmarketing. In meinem Blog, online seit Dezember 2010, geht es um die Ausbildung zum IT-Systemkaufmann, Games und alles rund um den PC. Von daher lag es nah eine Umschulung 2006 – 2009 in dem Beruf IT-Systemkaufmann zu absolvieren, welche ich dann auch im Januar 2009 erfolgreich abgeschlossen habe. Ich bin in Leipzig geboren und in der Umgebung von Dresden aufgewachsen.

Ersten Kommentar schreiben

Kommentar verfassen