SlideShare ist ein Scribd-Unternehmen logo
1 von 10
HTML und CSS



     Daniel Hufler



daniel.hufler@gmail.com
Nützliche Links
http://www.w3schools.com/ (englisch)


http://de.selfhtml.org/ (deutsch)


http://www.w3school.com.cn/index.html
(simplified chinese)


Traditional chinese?
Aufbau einer Html Seite
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
   4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    </head>
    <body>
    </body>
</html>
Kommentare in Html

      <!-- das ist ein Kommentar -->


Kommentare in Stylesheet Bereichen

                    /*
         Das ist ein Kommentar
                    */
CSS – Cascading Style Sheets

•   Interner Stylesheet - wird in head
    eingebunden:
<head>
<title>Das style-Element</title>
<style type="text/css">
/* ... Hier werden die Formate definiert – Besipiel unten...
       */
h1 { color:red; font-size:48px; }
</style>
</head>
CSS – Cascading Style Sheets

•    Externer Stylesheet - wird im head verlinkt:
<head>
<title>Das style-Element</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
/* ... zusaetzliche Styles ... */
</style>
</head>
Externe CSS Datei muss erstellt werden.
CSS – Cascading Style Sheets

•    Externer Stylesheet - wird im head verlinkt:
<head>
<title>Das style-Element</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
/* ... zusaetzliche Styles ... */
</style>
</head>
Externe CSS Datei muss erstellt werden.
CSS – Cascading Style Sheets

•   Formate innerhalb eines HTML-Elements
    definieren
<body>
<h1 style="[element-spezifische Formate]">Das style-
    Attribut</h1>
</body>


•   Beispiel:
<p style="background-color:#808040; color:#D8FD02;
font-family:Helvetia>Hallo</p>
Container platzieren




Quelle: http://www.simplebloggertutorials.com
WYSIWYG
what you see is what you get


        Kompozer

   http://kompozer.net/

Weitere ähnliche Inhalte

Andere mochten auch

Try out final epm phd meeting 30 jan12 3a1
Try out final  epm phd meeting 30 jan12 3a1Try out final  epm phd meeting 30 jan12 3a1
Try out final epm phd meeting 30 jan12 3a1epmanginsela
 
โรคขาดวิตามินบี2
โรคขาดวิตามินบี2โรคขาดวิตามินบี2
โรคขาดวิตามินบี2kimjeen513
 
โรคขาดวิตามินบี2 กลุ่ม 5 แพร่ง
โรคขาดวิตามินบี2 กลุ่ม 5 แพร่งโรคขาดวิตามินบี2 กลุ่ม 5 แพร่ง
โรคขาดวิตามินบี2 กลุ่ม 5 แพร่งkimjeen513
 
Clasificacion de los textos recreativo
Clasificacion de los textos recreativoClasificacion de los textos recreativo
Clasificacion de los textos recreativoEl Gran Roy
 
Telejornalismo Guia Rápido
Telejornalismo  Guia RápidoTelejornalismo  Guia Rápido
Telejornalismo Guia RápidoFausto Coimbra
 
INTRODUÇÃO À PRODUÇÃO DE ROTEIRO
INTRODUÇÃO À PRODUÇÃO DE ROTEIROINTRODUÇÃO À PRODUÇÃO DE ROTEIRO
INTRODUÇÃO À PRODUÇÃO DE ROTEIROFausto Coimbra
 

Andere mochten auch (7)

Try out final epm phd meeting 30 jan12 3a1
Try out final  epm phd meeting 30 jan12 3a1Try out final  epm phd meeting 30 jan12 3a1
Try out final epm phd meeting 30 jan12 3a1
 
โรคขาดวิตามินบี2
โรคขาดวิตามินบี2โรคขาดวิตามินบี2
โรคขาดวิตามินบี2
 
โรคขาดวิตามินบี2 กลุ่ม 5 แพร่ง
โรคขาดวิตามินบี2 กลุ่ม 5 แพร่งโรคขาดวิตามินบี2 กลุ่ม 5 แพร่ง
โรคขาดวิตามินบี2 กลุ่ม 5 แพร่ง
 
Gaya gesek
Gaya gesekGaya gesek
Gaya gesek
 
Clasificacion de los textos recreativo
Clasificacion de los textos recreativoClasificacion de los textos recreativo
Clasificacion de los textos recreativo
 
Telejornalismo Guia Rápido
Telejornalismo  Guia RápidoTelejornalismo  Guia Rápido
Telejornalismo Guia Rápido
 
INTRODUÇÃO À PRODUÇÃO DE ROTEIRO
INTRODUÇÃO À PRODUÇÃO DE ROTEIROINTRODUÇÃO À PRODUÇÃO DE ROTEIRO
INTRODUÇÃO À PRODUÇÃO DE ROTEIRO
 

Ähnlich wie Htmlcss

HTML5 Übersicht
HTML5 ÜbersichtHTML5 Übersicht
HTML5 Übersichtwdbmh
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenAndreas Kalt
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platformChristian Heilmann
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from ScratchStefan Fröhlich
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13chAlexander Schmidt
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Nicolai Schwarz
 
Xhtml und Websitegestaltung
Xhtml und WebsitegestaltungXhtml und Websitegestaltung
Xhtml und Websitegestaltungcontrastmedia
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD
 
Arbeiten mit Childthemes
Arbeiten mit ChildthemesArbeiten mit Childthemes
Arbeiten mit ChildthemesKirstenSchelper
 

Ähnlich wie Htmlcss (16)

Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
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
 
XHTML
XHTMLXHTML
XHTML
 
HTML5 Übersicht
HTML5 ÜbersichtHTML5 Übersicht
HTML5 Übersicht
 
Semantischer xhtml code 12w
Semantischer xhtml code 12wSemantischer xhtml code 12w
Semantischer xhtml code 12w
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
 
Christian heilmann html 5 - das web und der browser als platform
Christian heilmann   html 5 - das web und der browser als platformChristian heilmann   html 5 - das web und der browser als platform
Christian heilmann html 5 - das web und der browser als platform
 
Contao und CSS
Contao und CSS Contao und CSS
Contao und CSS
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
CSS Clean Code
CSS Clean CodeCSS Clean Code
CSS Clean Code
 
Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)Türme bauen mit Schildbürgern (Webtech Edition)
Türme bauen mit Schildbürgern (Webtech Edition)
 
Xhtml und Websitegestaltung
Xhtml und WebsitegestaltungXhtml und Websitegestaltung
Xhtml und Websitegestaltung
 
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
Developing UXD: Workshop @ IAKonferenz 2014 (German/Deutsch)
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 
Arbeiten mit Childthemes
Arbeiten mit ChildthemesArbeiten mit Childthemes
Arbeiten mit Childthemes
 

Htmlcss

  • 1. HTML und CSS Daniel Hufler daniel.hufler@gmail.com
  • 2. Nützliche Links http://www.w3schools.com/ (englisch) http://de.selfhtml.org/ (deutsch) http://www.w3school.com.cn/index.html (simplified chinese) Traditional chinese?
  • 3. Aufbau einer Html Seite <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> </body> </html>
  • 4. Kommentare in Html <!-- das ist ein Kommentar --> Kommentare in Stylesheet Bereichen /* Das ist ein Kommentar */
  • 5. CSS – Cascading Style Sheets • Interner Stylesheet - wird in head eingebunden: <head> <title>Das style-Element</title> <style type="text/css"> /* ... Hier werden die Formate definiert – Besipiel unten... */ h1 { color:red; font-size:48px; } </style> </head>
  • 6. CSS – Cascading Style Sheets • Externer Stylesheet - wird im head verlinkt: <head> <title>Das style-Element</title> <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/css"> /* ... zusaetzliche Styles ... */ </style> </head> Externe CSS Datei muss erstellt werden.
  • 7. CSS – Cascading Style Sheets • Externer Stylesheet - wird im head verlinkt: <head> <title>Das style-Element</title> <link rel="stylesheet" type="text/css" href="style.css"> <style type="text/css"> /* ... zusaetzliche Styles ... */ </style> </head> Externe CSS Datei muss erstellt werden.
  • 8. CSS – Cascading Style Sheets • Formate innerhalb eines HTML-Elements definieren <body> <h1 style="[element-spezifische Formate]">Das style- Attribut</h1> </body> • Beispiel: <p style="background-color:#808040; color:#D8FD02; font-family:Helvetia>Hallo</p>
  • 10. WYSIWYG what you see is what you get Kompozer http://kompozer.net/