SlideShare ist ein Scribd-Unternehmen logo
1 von 8
Grundlagen HTML
     - Tag (Mz. Tags) = Steuerbefehl, Vokabel der
       „Programmiersprache“

     - Tags werden immer in spitze Klammern gesetzt.
       Beispiele: <html>, <body>, <i> oder <title>


Es gibt 3 Grundregeln für das Einbinden von Tags:

     1. Regel:
        Tags müssen grundsätzlich korrekt geöffnet und
        geschlossen werden!
       Beispiel: <title> Meine erste Homepage </title>
2. Regel:
   Die Reihenfolge der Tags ist zu beachten!

  Im Browserfenster soll der folgende Text erscheinen:
  Die Reihenfolge der Tags ist wichtig.
  Der <i>-Tag (kursiv) wird erst beendet, nachdem
  der eingeschobene <b>-Tag (Fettdruck) abge-
  schlossen ist.
  <i>Die Reihenfolge der Tags ist <b>wichtig</b></i>.

3. Regel:
   Unterscheidung von Groß- und Kleinschreibung!
  Es macht keinen Unterschied, ob man Tags groß oder
  klein schreibt.
  Der <body>-Tag kann auch als <BODY>, <Body>
  oder <BOdy> geschrieben werden.
Grundgerüst einer HTML-Datei

 <html>
           <head>
                  <title>Dies ist eine HTML-Datei
                  </title>
           </head>
           <body>




           </body>
 </html>

Der Inhalt, der im Browserfenster zu sehen sein soll, wird in den
<body>-Bereich (grün) eingefügt!
Browseransicht der HTML-Datei




Der Text im <title>-Tag erscheint oben in der blauen Titelleiste des Browsers.

Da im <body>-Bereich kein Inhalt eingefügt wurde, erscheint ein leeres
Dokument!
Grundgerüst mit Inhalt
Fügt man Inhalte in Form von Text in den <body>-Bereich ein, …
   <html>
             <head>
                    <title>Dies ist eine HTML-Datei
                    </title>
             </head>
             <body>

                      Überschrift


                      Texte

                      Bilder

             </body>
   </html>
Browseransicht der HTML-Datei
… so wird dieser Text lediglich als „normaler Text“ dargestellt!
Grundgerüst einer HTML-Datei
Um beispielsweise eine Überschrift besonders hervorheben zu lassen,
muss man diese im Quelltext gesondert markieren.

     <html>
               <head>
                      <title>Dies ist eine HTML-Datei
                      </title>
               </head>
               <body>
                      <h1>
                      Überschrift
                                         <h1> macht die Überschrift
                      </h1>              erst zur Überschrift!

                        Texte

                        Bilder

               </body>
     </html>
Browseransicht der HTML-Datei
Durch die Verwendung des Tags <h1> wird die Überschrift dicker,
größer und vom restlichen Text abgerückt dargestellt!

Weitere ähnliche Inhalte

Andere mochten auch

Konzept 3030 claudia
Konzept 3030 claudiaKonzept 3030 claudia
Konzept 3030 claudia
Anna Groos
 
Mi proyecto de vida
Mi proyecto de vida Mi proyecto de vida
Mi proyecto de vida
SDCV0108
 
Ds 003-2014-minam aprueba
Ds 003-2014-minam apruebaDs 003-2014-minam aprueba
Ds 003-2014-minam aprueba
naty2210
 
Leonardo torres presentacion lucena
 Leonardo torres presentacion lucena Leonardo torres presentacion lucena
Leonardo torres presentacion lucena
Leonardo Torres
 
La necesidad de aplicar el uso de las tic al proceso de la pedagogia
La necesidad de aplicar el uso de las tic al proceso de la pedagogiaLa necesidad de aplicar el uso de las tic al proceso de la pedagogia
La necesidad de aplicar el uso de las tic al proceso de la pedagogia
Jaime Ramirez
 
Criterios de divisibilidad
Criterios de divisibilidadCriterios de divisibilidad
Criterios de divisibilidad
davidcolumela
 
Xente ao lonxe eduardo blanco amor
Xente ao lonxe   eduardo blanco amorXente ao lonxe   eduardo blanco amor
Xente ao lonxe eduardo blanco amor
María Sánchez
 
Dn12 u3 a35_lsr
Dn12 u3 a35_lsrDn12 u3 a35_lsr
Dn12 u3 a35_lsr
rubi_lopez
 
Therapiestall Nettelsee
Therapiestall NettelseeTherapiestall Nettelsee
Therapiestall Nettelsee
sbrueg
 

Andere mochten auch (20)

Multipower pvp 2013
Multipower pvp 2013Multipower pvp 2013
Multipower pvp 2013
 
FAMILY EXAM
FAMILY EXAMFAMILY EXAM
FAMILY EXAM
 
Konzept 3030 claudia
Konzept 3030 claudiaKonzept 3030 claudia
Konzept 3030 claudia
 
Mi proyecto de vida
Mi proyecto de vida Mi proyecto de vida
Mi proyecto de vida
 
GWAVACon 2015: Microsoft MVP - Das Beste aus beiden Welten
GWAVACon 2015: Microsoft MVP - Das Beste aus beiden WeltenGWAVACon 2015: Microsoft MVP - Das Beste aus beiden Welten
GWAVACon 2015: Microsoft MVP - Das Beste aus beiden Welten
 
Uñas n
Uñas nUñas n
Uñas n
 
GWAVACon 2015: GWAVA - Mailserver Migration
GWAVACon 2015: GWAVA - Mailserver Migration GWAVACon 2015: GWAVA - Mailserver Migration
GWAVACon 2015: GWAVA - Mailserver Migration
 
Tahun 3 (2014)
Tahun 3 (2014)Tahun 3 (2014)
Tahun 3 (2014)
 
978 3-659-16968-7
978 3-659-16968-7978 3-659-16968-7
978 3-659-16968-7
 
Trabajo
TrabajoTrabajo
Trabajo
 
Ds 003-2014-minam aprueba
Ds 003-2014-minam apruebaDs 003-2014-minam aprueba
Ds 003-2014-minam aprueba
 
Leonardo torres presentacion lucena
 Leonardo torres presentacion lucena Leonardo torres presentacion lucena
Leonardo torres presentacion lucena
 
La necesidad de aplicar el uso de las tic al proceso de la pedagogia
La necesidad de aplicar el uso de las tic al proceso de la pedagogiaLa necesidad de aplicar el uso de las tic al proceso de la pedagogia
La necesidad de aplicar el uso de las tic al proceso de la pedagogia
 
Guia1.proyectointegrador3.santiagoflores. revisado
Guia1.proyectointegrador3.santiagoflores. revisadoGuia1.proyectointegrador3.santiagoflores. revisado
Guia1.proyectointegrador3.santiagoflores. revisado
 
Criterios de divisibilidad
Criterios de divisibilidadCriterios de divisibilidad
Criterios de divisibilidad
 
Xente ao lonxe eduardo blanco amor
Xente ao lonxe   eduardo blanco amorXente ao lonxe   eduardo blanco amor
Xente ao lonxe eduardo blanco amor
 
Fabula de los colombianos y japoneses
Fabula de los colombianos y japonesesFabula de los colombianos y japoneses
Fabula de los colombianos y japoneses
 
Dn12 u3 a35_lsr
Dn12 u3 a35_lsrDn12 u3 a35_lsr
Dn12 u3 a35_lsr
 
Therapiestall Nettelsee
Therapiestall NettelseeTherapiestall Nettelsee
Therapiestall Nettelsee
 
Carta a Garcia
Carta a GarciaCarta a Garcia
Carta a Garcia
 

Ähnlich wie html grundlagen

Input o2thinkbig
Input o2thinkbigInput o2thinkbig
Input o2thinkbig
aseubert
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
Andreas Kalt
 
Html Und Css
Html Und CssHtml Und Css
Html Und Css
borya
 

Ähnlich wie html grundlagen (12)

IT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML IIIT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML II
 
Semantic html5
Semantic html5Semantic html5
Semantic html5
 
Input o2thinkbig
Input o2thinkbigInput o2thinkbig
Input o2thinkbig
 
Semantic html5
Semantic html5Semantic html5
Semantic html5
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
 
15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen15 DocPublisher - Anpassung Aussehen und Funktionen
15 DocPublisher - Anpassung Aussehen und Funktionen
 
Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
 
Wordpress Custom Theme Development
Wordpress Custom Theme DevelopmentWordpress Custom Theme Development
Wordpress Custom Theme Development
 
Html Und Css
Html Und CssHtml Und Css
Html Und Css
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 
Hello World // MM 08-11
Hello World // MM 08-11Hello World // MM 08-11
Hello World // MM 08-11
 

html grundlagen

  • 1. Grundlagen HTML - Tag (Mz. Tags) = Steuerbefehl, Vokabel der „Programmiersprache“ - Tags werden immer in spitze Klammern gesetzt. Beispiele: <html>, <body>, <i> oder <title> Es gibt 3 Grundregeln für das Einbinden von Tags: 1. Regel: Tags müssen grundsätzlich korrekt geöffnet und geschlossen werden! Beispiel: <title> Meine erste Homepage </title>
  • 2. 2. Regel: Die Reihenfolge der Tags ist zu beachten! Im Browserfenster soll der folgende Text erscheinen: Die Reihenfolge der Tags ist wichtig. Der <i>-Tag (kursiv) wird erst beendet, nachdem der eingeschobene <b>-Tag (Fettdruck) abge- schlossen ist. <i>Die Reihenfolge der Tags ist <b>wichtig</b></i>. 3. Regel: Unterscheidung von Groß- und Kleinschreibung! Es macht keinen Unterschied, ob man Tags groß oder klein schreibt. Der <body>-Tag kann auch als <BODY>, <Body> oder <BOdy> geschrieben werden.
  • 3. Grundgerüst einer HTML-Datei <html> <head> <title>Dies ist eine HTML-Datei </title> </head> <body> </body> </html> Der Inhalt, der im Browserfenster zu sehen sein soll, wird in den <body>-Bereich (grün) eingefügt!
  • 4. Browseransicht der HTML-Datei Der Text im <title>-Tag erscheint oben in der blauen Titelleiste des Browsers. Da im <body>-Bereich kein Inhalt eingefügt wurde, erscheint ein leeres Dokument!
  • 5. Grundgerüst mit Inhalt Fügt man Inhalte in Form von Text in den <body>-Bereich ein, … <html> <head> <title>Dies ist eine HTML-Datei </title> </head> <body> Überschrift Texte Bilder </body> </html>
  • 6. Browseransicht der HTML-Datei … so wird dieser Text lediglich als „normaler Text“ dargestellt!
  • 7. Grundgerüst einer HTML-Datei Um beispielsweise eine Überschrift besonders hervorheben zu lassen, muss man diese im Quelltext gesondert markieren. <html> <head> <title>Dies ist eine HTML-Datei </title> </head> <body> <h1> Überschrift <h1> macht die Überschrift </h1> erst zur Überschrift! Texte Bilder </body> </html>
  • 8. Browseransicht der HTML-Datei Durch die Verwendung des Tags <h1> wird die Überschrift dicker, größer und vom restlichen Text abgerückt dargestellt!