HTML von Anfang an

TutorialTutorial von: Isa
Kategorie: HTML/CSS

In diesem Tutorial m├Âchte ich versuchen totalen Anf├Ąngern, die von Hyper Text Markup Language (HTML) noch nie etwas geh├Ârt haben, die Sprache etwas n├Ąher zu bringen.
Vorsicht: Das Tut ist sehr lang!

1 Allgemein:

  • Zur Strukturierung von Texten und Einbindung von Grafiken
  • Schnittstellen f├╝r Erweiterungssprachen wie CSS, XML oderJavaScript
  • Mit Hilfe von SGML (Standard Generalized Markup Language) definiert --> als ISO-Norm 8879 festgeschrieben
  • HTML ist ein Klartextformat: Keine bestimmte Software n├Âtig, da Bearbeitung mit beliebigen Texteditor


2 Aufgaben:

  • Wichtige Aufgaben: Verweise ("Hyperlinks") definieren
  • Typische Elemente als solche auszeichnen
  • Elemente haben fest definierbaren Erstreckungsraum
  • Z.B. ├ťberschrift muss angefangen + beendet werden:
    Code:
    [├ťberschrift] Text der ├ťberschrift [Ende ├ťberschrift]


3 Befehle:
Code:
                                                
 Einr├╝ckung: ___ <blockquote>Text</blockquote>                                                                                                
 Font-Style: ___ <i>Text</i> <em>Text</em> <b>Text</b>                                                                                                
 Hyperlinks: ___ <a href="URL">Text</a>                                                                                                
Textfeld: ___ <div>Text</div>



3.1 Undefinierter Erstreckungsraum, da unn├Âtig:
Code:
                                                
 Zeilenumbruch: ___[i]<br>
                                                                                                
 Bildereinbau: ___ <img src="URL">                                                                                                
Bildergr├Â├če anpassen:___ <img src="URL" height="?" width="?">    


3.2 Befehl-Kombination:
Code:
Thumbnail: <a href="URL"><img src="URL"></a>                                                                                                
" ohne Border:<a href="URL"><img src="URL" border="0"></a>



4 Ger├╝st:
So wird eine HTML-Datei aufgebaut:
Code:
                                                                                                
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN><html><head><title>TITLE</title></head><br><body> <!--  INHALT --> </body></html>

HTML besitzt einen Head- und einen Bodybereich!

  • Im Headbereich: Alle Definitionen und Anweisungen
  • Im Bodybereich: Alle Ausf├╝hrungen


5 Cascading Style Sheets:

  • HTML kann nicht angeben wie Elemente aussehen sollen: Gr├Â├če, Schriftart, Farbe etc.
    --> Aufgabe von Cascading Style Sheets (CSS)
  • Nahtlose Einklingung von CSS
  • Von CSS definierte Formate k├Ânnen in HTML-Datei niedergeschrieben oder in externe Style-Dateien ausgelagert werden
  • In den Headbereich folgt die CSS-Einbindung
    Code:
    <head><style type="text/css">/* Hier werden die Formate definiert */</style> </head>


  • Soll eine externe style.css-Datei eingebunden werden, platziert man an der selben Stelle folgendes:
    Code:
    <link rel="stylesheet" type="text/css" href="style.css">


5.1 CSS Anweisungen:
├ähnlich wie in C etc. werden bei CSS Elementen Bl├Âcke mit geschwungenen Klammern gebildet:
Code:
h1 {<br>Inhalt<br>} 

  • h1 = SelektoR
    Ebenso wird eine Anweisung/Definition in CSS mit einem Semikolon beendet:
    Code:
    h1 {<br>color: red;<br>font-size: 12px;<br>}


  • Definitionen: Eigenschaft (color) + Wert (red)
  • Anwendung:
    Code:
    <h1>Text</h1>


5.2 Formatierungen:
5.2.1 Formatierung- Schrift:

  • Font-family: arial; -> Art
  • Font-size: 12pt; -> Gr├Â├če
  • Font-variant: small-caps; -> Variante (Kapit├Ąlchen)
  • Font-weight: bold; -> Gewicht (dick)
  • Font-Style: -> (normal, italic, oblique, bold, underlined)<
  • Color: #000; -> Farbe (schwarz)
  • Line-height: 15px; -> Zeilenh├Âhe
  • Letter-spacing: 2px; -> Zeichenabstand
  • Text-transform: uppercasen; -> Transformation (Gro├čbuchstaben)
  • Text-align: center; -> Textausrichtung (zentriert)


5.2.2 Formatierung- Links:

    Links besitzen in CSS folgende Selektoren:
  • A:link -> Normaler Link
  • A:visited -> Besuchter Link
  • A:active -> Aktiver Link
  • A:hover -> Link beim Mouseover


Man k├Ânnte sie also folgenderma├čen definieren:

Code:
                                    
A:link,  A:visited, A:active {                                    
font-family: verdana;                                    
color: #000;                                    
font-size: 11px;                                    
text-decoration: none;                                    
}                                    
                                    
A:hover {                                    
color: #66a;                                    
text-decoration: none;                                    
cursor:crosshair;                                    
}                                    


5.2.3 Formatierung- Bodybereich
Im Bodybereich kann man z.B. die Formatierung der Schrift, sowie des Hintergrunds, den Cursor oder auch die Scrollbar festlegen:

Code:
                        
body {                        
cursor: url(seite.de/name.cur);                        
scrollbar-face-color: #000;                        
scrollbar-highlight-color: #66a;                        
scrollbar-3dlight-color: #FFF;                        
scrollbar-darkshadow-color: #000;                        
scrollbar-shadow-color: #66a;                        
scrollbar-arrow-color: #FFF;                        
scrollbar-track-color: #FFF;                        
overflow-x: hidden;                        
background-color: #FFF;                        
color: #000;                        
}                        


  • Wir haben nun im Bsp. eine wei├če Seite mit schwarzen Text, einer wei├čen Scrollbar mit schwarzer Leiste und einigen wei├čen Licht- sowie blauen Schatteneffekten erzeugt.
    Ebenfalls haben wir einen eigenen Cursor generiert und die waagerechten sowie senkrechten Scrollbalken im Browserfenster deaktiviert!


5.3 Klassen
Auch in CSS lassen sich Klassen definieren. So kann man neben der h1-├ťberschriftmethode auch z.B. P-Classes verwenden:
Code:
                        
.title {                        
color: #000;                        
font-family: verdana;                        
font-size: 12px;                        
background-color: #FFF;                        
}                        


  • Wir haben in dem Bsp. eine Klasse namens title definiert, die eine schwarze Verdana-Schrift und einen wei├čen Hintergrund aufweist

Anwendung
Code:
<p class=title>Text</p>                        


Selbiges l├Ąsst sich auch bei Textfeldern o.├ä. anwenden:
Code:
.beispiel {                        
font-family: Georgia;                        
font-size: 12px;                        
color: #FFF;                        
border:1px #FF0000;                        
background-color:#000;                        
}                        



  • Wir haben eine schwarze Box mit einer wei├čen Georgia-Schrift und roter Umrandung erstellt
    Anwendung:
    Code:
    <div class=beispiel>Das schaut dann so aus!</b>text</div>

Kommentare

Leider haben wir fŘr diesen Eintrag noch keine Kommentare erhalten.

Kommentar schreiben

Name
E-Mail
Homepage
Text
captchaWie viele ausgefŘllte Kreise sind auf dem Bild?