Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML Crash Kurs

No description
by

Anton Wilhelm

on 21 February 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML Crash Kurs

Hypertext Markup
Language WWW Consortium (W3C)
aktuell: 4.01 Aufbau 1. Dokumenttypdeklaration <!DOCTYPE html>
2. HTML-Kopf <head>
3. HTML-Körper <body> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Titel der Webseit</title>
<!-- weitere Kopfinformationen -->
<!-- Kommentare werden im Browser nicht angezeigt. -->
</head>
<body>
<p>Inhalt der Webseite</p>
</body>
</html> Document Object
Model Spezifikation einer Schnittstelle für den Zugriff auf HTML / XML-Dokumente <table>
<thead>
<tr>
<th>Vorname</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donald</td>
<td>Duck</td>
</tr>
</tbody>
</table> als
Baumstruktur Bezeichnungen <element attribut="wert" attribut2="wurst">Content</element> Cascading Style
Sheets (CSS) Funktionsweise Zugriff auf die HTML Elemente (DOM) mit Hilfe von Selektoren.
Oft verwendete Selektoren: Möglichkeiten Information 1x definieren
und über die CSS mehrere Versionen für verschiedene Ausgabemedien erzeugen
Bildschirm
großer Monitor
Tablet
Smartphone
Papier/Druck
Sprache (links nach rechts, umgekehrt) veraltet
<font face="verdana" color="green">
This is some text!
</font> Selector1, Selector2
{
Property-1:Value-1;
Property-2:Value-2;

Property-n: 2:Value-n;
}
/* Comments */ Beispiel Beispiel <p class="info">
<span>Hinweis</span>
Sie haben sich erfolgreich angemeldet.
</p> HTML p.info {
font-family: arial, sans-serif;
line-height: 150%;
margin-left: 2em;
padding: 1em;
border: 3px solid red;
background-color: #f89;
display: inline-block;
}

p.info span {
font-weight: bold;
}

p.info span:after {
content: ": ";
} CSS Selektoren einfache Selektoren * -- selektiert jedes Element
E -- selektiert jedes Element vom Typ E
#box1 -- selektiert das Element mit der ID "box1"
.bar -- selektiert jedes Element mit der Klasse "bar"
[class] -- selektiert Elemente, deren "foo"-Attribut gesetzt ist
[class=bar] -- selektiert Element, deren "foo"-Attribut den Wert
"bar" haben

[class*=bar] -- enthält den Wert
[class^=bar] -- beginnt mit dem Wert
[class$=bar] -- endet mit dem Wert
[class~=bar] [class|=bar] Kombinatoren Pseudoklassen strukturelle Pseudoklassen Pseudoelemente E F -- selektiert alle Elemente F, die Nachfahren
eines Elements E sind

E > F -- selektiert alle Elemente F, die ein Kind
eines Elements E sind

E ~ F -- selektiert alle Elemente F, die einen
Vorgänger E auf gleicher Ebene haben

E + F -- selektiert alle Elemente F, die einen
direkten Vorgänger E auf gleicher Ebene haben :link -- selektiert unbesuchte Verweise
:visited -- selektiert bereits besuchte Verweise
:focus -- selektiert das Element, das den Fokus
:hover -- selektiert das Element, über dem sich der Mauszeiger befindet
:checked -- selektiert Elemente von Schaltflächen, die angewählt sind
:enabled
:disabled :first-child -- selektiert Elemente, die das erste Kind ihres Elternelementes sind
:last-child -- selektiert Elemente, die das letzte Kind ihres Elternelementes sind
:nth-child(2) -- selektiert Elemente, die beispielsweise das 2. Kind ihres
Elternelementes sind
:only-child -- selektiert Elemente, die das einzige Kind ihres Elternelementes sind
:empty -- selektiert Elemente, die keine Kinder haben
:root -- Wurzelelement (html)

:first-of-type :last-of-type :only-of-type :nth-of-type(n) :nth-last-of-type(n) :first-line -- selektiert die erste Zeile des formatierten Textes
:first-letter -- selektiert das erste Zeichen des formatierten Textes
foo:before -- erzeugt und selektiert ein Element vor einem Element „foo“
foo:after -- erzeugt und selektiert ein Element nach einem Element „foo“
:target -- HTML Anker
:not(selector) -- selektiert Elemente, für die „foo“ nicht zutrifft
::selection -- vom Benutzer selektierter / markierter Bereich Versionen CSS 2 und CSS 2.1
CSS Level 2 (CSS2) wurde im Mai 1998 veröffentlicht. Bis heute (Stand Januar 2010) wird diese Empfehlung von keinem verbreiteten Browser vollständig implementiert. CSS3
Seit 2000 ist CSS Level 3 in der Entwicklung (analog HTML5)
Derzeit veröffentlichte und breit unterstützte Standards sind unter anderem CSS Color Level 3, CSS Namespaces, Selectors Level 3 und Media Queries. CSS Referenz / Kompatibilitätsliste
http://caniuse.com/
http://www.css4you.de/ Webserver (Web)Server Server /var/www/
/var/www/index.html
/var/www/dir1/start.html
/var/www/dir2/index.php
/var/www/dir2/menu.php
/var/www/dir2/shop.php Entwickler FTP HTTP Besitzer Mail (Pop3/Imap) Dateien/Ordner Datenbank Hypertext Transfer Protocol Kurzeitinformationen
zustandlos --> keine Sitzungsinformation (Session)
Lösungen:
HTTP-Cookie
Session ID in URL

Langzeit Informationen (Benutzername, Passwort, etc.) werden in Datenbanken gespeichert (MySql) Domain leitet zum Ordner
/var/www/dir2 Browser (Client) JavaScript jQuery Identifizierung der Elemente mit Selektoren, analog wie bei CSS Darstellung durch einen Webbrowser Grundlage des Word Wide Web zur Strukturierung von Inhalten
Texten
Bildern
Hyperlinks textbasierte Auszeichnungssprache Zusammen mit der Web Hypertext Application Technology Working Group (WHATWG) wird der HTML Standard entwickelt HTML 5 der W3C bzw. HTML Living Standard der WHATWG noch in Entwicklung Wurzelknoten (engl. root) ist table hat als Kinder (children) die Elementknoten thead und tbody Elternteil (parent) von thead und tbody ist wiederum table Knoten mit gemeinsamen Elternteil wie tbody und thead sind Geschwister (siblings) stufenförmige oder (hintereinander) geschachtelte Gestaltungsvorlagen deklarative Sprache für Stilvorlagen von strukturierten Dokumenten wie HTML, XML Grundidee: Trennung von Inhalt und Layout Gegenstück zum (Web)Browser Stellt und sendet dem Browser die Inhalte zu Über das HTTP Protokoll (Port 80) Browser stellt Anfrage (Request) auf eine Resource per URL an den Webserver Webserver liefert die Resource an den Browser zurück (Response) Resource kann ein HTML Dokument, Bild, CSS, JavaScript, etc. sein ein Computer mit einem Order (/var/www) ein Programm, das diesen Ordner mit über HTTP im Internet freigibt (Webdienst: Apache) ein Programm, das diesen Ordner über FTP im Internet freigibt (FTP-Dienst) Server ist immer über eine IP Adresse erreichbar Auf welches Programm/Dienst zugegriffen wird, wird über das Protokoll / den Port bestimmt (HTTP:80, FTP:21, Mail:25) Domain wird verwendet, um keine IP zu merken Besucher können über die Domain niemals auf /var/www/index.html oder
/var/www/dir1/start.html zugreifen
index Seiten haben besondere Bedeutung:
sobald eine Datei diesen Namen enthält wird diese Seite angezeigt, wenn nur der übergeordnete Ordner per HTTP aufgerufen wird HTML Dateien werden so wie im Ordner liegen an den Browser geschickt Mithilfe von PHP können dynamische Seiten erzeugt werden, der Inhalt, der an den Browser geschickt wird, wird on-the-fly erzeugt Folgende Funktionen setzen dynamische Seiten voraus: Formulardaten auswerten per Mail verschicken Forum (Einloggen, Beiträge schreiben) Skriptsprache für DOM, eingesetzt in Browsern Gegenstück zu PHP (läuft nicht auf wem Webserver, sondern auf dem Client / Browser) Möglichkeiten: Dynamische Manipulation des DOM Aufklappen, Ausblenden, PopUp Stil ändern (Farbe, Größe, Form) Abhängige Formularfelder Validierung von Formulareingaben Senden und Empfangen von Daten, ohne das die Seite neu geladen wird (Ajax) AutoComplete JavaScript Bibliothek; bietet einfache Schnittstelle für die DOM Manipulation (einfache Befehle) DOM Traversal / Manipulation Event Handling Effects Ajax Wichtige Links und Tools: http://de.selfhtml.org
http://www.w3schools.com
http://www.w3.org/TR/html-markup/intro.html
http://www.whatwg.org
http://www.css4you.de
http://html5please.com
http://caniuse.com
http://html5test.com
http://jsfiddle.net CSS
frameworks Beispiele http://html5boilerplate.com
http://twitter.github.com/bootstrap
http://www.yaml.de
http://960.gs
http://cssgrid.net CSS framework (Front-End framework) Features: Cross-Browser Kompatibilität (Fluid) Grid System CSS Browser Reset Gestaltungsvorlagen für Tabellen, Buttons, Formulare, ... Elemente es gibt viele verschiedene Elemente Elemente werden unterteilt in block Elemente und inline Elemente es gibt Regeln, wie die Elemente verschachtelt werden dürfen es gibt Pflicht-Attribute und optionale Attribute für Elemente oft verwendete Elemente h1,h2 -- Headings
p -- Paragraph
a -- Hyperlink
img -- Images
table -- Tables
ul, ol, li -- Lists
form, input, select -- Forms, Inputs, SelectBox
textarea -- Textarea div -- Division / Container for block
span -- Container for inline elements
strong -- important text
em -- emphasized GET und POST Methode GET POST http://domain.de/index.php?name=Anton Informationen über die URL übertragen Informationslänge ist beschränkt (weil URL Länge beschränkt ist erforderlich bei File Upload HTTP Header etc. Informationen übertragen über HTML Body beliebige Länge Metainformationen Cookies MIME Type Analyse / Debug direkt im Browser
Google Chrome (Developer Tools Window)
Öfnnen mit
STRG + Shift + I
Element untersuchen
Firefox (Firebug)
Öffnen mit
F12
Element untersuchen
Internet Explorer
Öffnen mit F12 -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; Abgerundete Ecken <a href="http://google.de" target="_blank">Google</a> Wie wird das genau gemacht?
Welche Elemente werden wie gestaltet? Selector Declaration a:hover
{
color: #0000ff;
text-decoration: underline;
} Chrome Developer Bar / FireBug = on-the-fly Changes
Elements TAB
Element untersuchen (Kontexmenü/Rechtsklick)
DOM Baum Anzeige
Rechte Spalte (Styles, Metrics, Computed Style)
Network TAB
Alle Requests (Bilder, Script, CSS, ...)
Console
Selektoren testen ($) , JavaScript testen ($$) Elementname (<h1>, <a>, <table>) Attribut class: <span class="gross"> Attribut id/class: <div id="box1" class="gross"> h1 , a , table span.gross div#box1.gross richtig
<span class="meinLayout">
This is some text
<span> -> http://html5please.com
-> http://caniuse.com
-> http://html5test.com http://www.awwwards.com/22-experimental-webgl-demo-examples.html http://www.chromeexperiments.com/ http://twitter.github.com/bootstrap/scaffolding.html http://www.stoppress.co.nz http://www.the-art-of-web.com/css/css-animation/#adjacent http://www.the-art-of-web.com/css/3d-chart/#final http://tholman.com/ Vorname Name Donald Duck Über mehrere "Generationen" hinweg werden die Begriffe Vorfahre / Nachfahre (ancestor / descendant) verwendet opening tag closing tag <img alt="image" src="#" /> Baumstruktur sollte auch Semantik wiederspiegeln <img src="..." /> unschließt nichts, und deshalb steht steht das closing tag im opening tag. Alternativ, lange Schreibweise <img src="..."></img> Reihenfolge der Attribute spielt keine Rolle Reihenfolge der Elemente spielt eine große Rolle beeinflusst die Darstellung Reihenfolge der Tabellenzellen Reihenfolge der Listenelemente Gesamtreihenfolge in dem HTML Dokument Elemente fangen mit spitzer Klammer an: <a> entfernte Elemente <acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt> neue Elemente <article>
<aside>
<bdi>
<command>
<details>
<summary>
<figure>
<figcaption>
<footer>
<header>
<hgroup> Semantisch/Sturkturell <mark>
<meter>
<nav>
<progress>
<ruby>
<rt>
<rp>
<section>
<time>
<wbr> Medie Elemente <audio>
<video>
<source>
<embed>
<track> <canvas> Form Elemente <datalist>
<keygen>
<output> <input ___> tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, color Multiple (pseudo) class selectors div.red.small

input:enabled:checked CSS Einbettung User style count the number of element names and pseudo-elements in the selector (= d) Selector specify * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ count 1 if the declaration is from is a 'style' (a=1, b=0, c=0, d=0) count the number of ID attributes in the selector (= b) count the number of other attributes and pseudo-classes in the selector (= c) http://addyosmani.github.com/todomvc Author Inline styles Embedded style External style sheets User agent style jQuery vs. AngularJS http://afarkas.github.com/webshim/demos/ http://modernizr.com
http://afarkas.github.com/webshim/demos/index.html
http://yepnopejs.com div {
color: white !important;
} CSS Eigenschaften http://www.css4you.de/css-a-z.html Positionierung http://www.barelyfitz.com/screencast/html-training/css/positioning/
Full transcript