Was ist HTML? Designwerkstatt Webart Sommersemester 2014 Institut für Kunstpädagogik, LMU München Martin Pflanzer

Größe: px

Ab Seite anzeigen:

Download "15.04.2014 Was ist HTML? Designwerkstatt Webart Sommersemester 2014 Institut für Kunstpädagogik, LMU München Martin Pflanzer"

Nele Kneller
vor 8 Jahren
Abrufe

1 Was ist HTML?

2 Tim Berners-Lee

3 Die erste Webseite: info.cern.ch, 13. November 1990

6 Webseiten waren ursprünglich einfache Textseiten mit Links. HTML = Textzusätze zur Formatierung & Erweiterung des Inhalts. HTML kann aber auch andere Inhalte in die Webseite einfügen: Bilder, Videos, Dateien, ect. Eine einzelne Webseite ist eine reine Textdatei, die mit der Dateiendung html abgespeichert wird. Html-Dateien können von einem Browser interpretiert und angezeigt werden. Letztendlich bedeutet Webdesign, dem Browser zu sagen, wo und wie man seine Elemente auf der Seite haben will.

Eine einzelne Webseite ist eine reine Textdatei, die mit der Dateiendung html abgespeichert wird.

7 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>eine kleine Seite</title> </head> <body> <h1>ich bin doch nur eine Webseite, was wollt ihr bloß von mir?</h1> <a href="andere_seite.html">schaut euch mal ne andere Seite an</a> <img src="blume.jpg" alt="blume" /> </body> </html>

wollt ihr bloß von mir?</h1> <a href="andere_seite.

8 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>eine kleine Seite</title> </head> <body> <h1>ich bin doch nur eine Webseite, was wollt ihr bloß von mir?</h1> <a href="andere_seite.html">schaut euch mal ne andere Seite an</a> <img src="blume.jpg" alt="blume" /> </body> </html>

9 Anzeige im Browser Martin Pflanzer, Webdesign, Sommersemester 2012 Designwerkstatt Webart Institut Sommersemester für Kunstpädagogik, 2014 Institut Leopoldstraße für Kunstpädagogik, 13, LMU München München Martin Pflanzer

Sommersemester für Kunstpädagogik, 2014 Institut

10 Anzeige im Browser Martin Pflanzer, Webdesign, Sommersemester 2012 Designwerkstatt Webart Institut Sommersemester für Kunstpädagogik, 2014 Institut Leopoldstraße für Kunstpädagogik, 13, LMU München München Martin Pflanzer

11 <html> <head> </head> <body> </body> </html> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery min.js"></script> <style type="text/css"> html{background-color:blue;} </style> <script type="text/javascript"> alert ("hallo!"); </script> <object data="animation.swf" type="application/x-shockwave-flash" width="600" height="400"> <param name="movie" value="animation.swf"> </object> <video src="film.ogg" width="512" height="288" poster="filmtitel.jpg" controls> Video nur in Browsern mit HTML 5 & OGG Unterstützung! </video>

js"></script> <style type="text/css"> html{background-color:blue;} </style> <script type="text/javascript"> alert ("hallo!

12 <html> <head> </head> <body> </body> </html> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery min.js"></script> <style type="text/css"> html{background-color:blue;} </style> <script type="text/javascript"> alert ("hallo!"); </script> <object data="animation.swf" type="application/x-shockwave-flash" width="600" height="400"> <param name="movie" value="animation.swf"> </object> <video src="film.ogg" width="512" height="288" poster="filmtitel.jpg" controls> Video nur in Browsern mit HTML 5 & OGG Unterstützung! </video>

13 Dreamweaver Benutzeroberfläche Vorschaufenster und Menus grafisches Arbeiten Unterstützung beim Schreiben von HTML-Code HTML-Code / Vorschau wird vom Programm im Hintergrund erstellt. Erleichterung von häufigen Vorgängen, wie z.b. Bilder & andere Inhalte einfügen

HTML-Code / Vorschau wird vom Programm im Hintergrund erstellt.

16 Text, Links Formulare Dateien, Downloads Webdesign: Texteditor, z.b. Notepad++ Dreamweaver Browser Bilder Video Animation -HTML5 Canvas - CSS/Javascript

17 Literatur / Links de.selfhtml.org & wiki.selfhtml.org Stefan Münz, Clemens Gull: HTML 5 Handbuch Franzis Verlag 2012 Dreamweaver CS5, Grundlagen des technischen Web-Designs (1. Auflage, Januar 2011), RRZN Bestellung bei LRZ / 6,10 / Abholung in der Uni-Bib. Jason Beaird: Gelungenes Webdesign dpunkt.verlag 2011 Julian Stallabrass: Internet Art. The Online Clash of Culture and Comerce Tate Publishing 2003

org Stefan Münz, Clemens Gull: HTML 5 Handbuch Franzis Verlag 2012 Dreamweaver CS5, Grundlagen des

18 what?!

Ähnliche Dokumente

Einführung Responsive Webdesign

Einführung Responsive Webdesign Aktuelle Situation Desktop Webseiten Umsetzungen auch heute noch in den meisten Fällen Pixelbasiert JavaScript schafft Dynamik CSS schafft Trennung von Inhalt und Layout