Erste HTML-Befehle
Falls über diesem Text keine PDF-Präsentation zu sehen ist, wurde diese von Ihrem Browser direkt runtergeladen (wenn Sie z.B. mit Safari@Mac surfen). Sie könnnen zum Download auch hier klicken: Direktdownload PDF-Präsentation
Eine Webseite anlegen
Die Sprache, mit der man einem Browser (Firefox, Opera, Internet Explorer …) “sagt”, was er wie darstellen soll, heißt HTML (Hypertext Markup Language). HTML-Dokumente sind in einer gewissen Art und Weise strukturiert (s.u.).
HTML verwendet “Tags”, die in Spitzklammern stehen und häufig Inhalte umschließen, z.B. <body>blabal</body> oder <title>titel</title>.
Ein Dokument, das so strukturiert ist und im Dateinamen die Erweiterung .html hat, kann von einem Browser als Webseite angezeigt werden. Der grundsätzliche Aufbau eines solchen Dokuments ist dieser:
Alles innerhalb des <body>-Tags wird im Browser angezeigt.
Übungen
Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).
Die aktuelle Übung können Sie hier als txt-File herunterladen.
***** Übungen: HTML - erste Webseite *****
HTML_2-1: HTML-Seite mit Inhalt anlegen
Erstellen Sie eine einfache HTML-Seite. In den Body-Bereich schreiben Sie folgenden Code:
HTML-Code<h1>Ist es schwierig?</h1> <p>Es ist nicht schwierig.</p> <p>Im Gegenteil: Es ist einfach.</p>
Lassen Sie sich die Seite in einem Browserfenster anzeigen.
Überlegen Sie: Was bewirken die Tags <h1> und <p>?
Wie geht HTML mit Zeilenumbrüchen um?
HTML_2-2: Fehler im HTML-Quellcode finden
Berichtigen Sie den folgenden HTML-Quellcode und lassen Sie sich das Ergebnis im Browser anzeigen.
HTML_2-3: HTML-Seite interpretieren
Kopieren Sie den folgenden HTML-Code in ein Word-Dokument. Markieren Sie die Ihnen bekannten Markups mit rot. Studieren Sie die Struktur des Dokuments.
(Das Dokument ist der leicht veränderte Quelltext der Startseite von studivz.de am 1.8.2010.)
HTML-Code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="imagetoolbar" content="no" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>studiVZ | Bist Du schon drin?</title> <meta name="description" content="studiVZ.net ist eine kostenlose Plattform, die es Studenten ermöglicht, Informationen auszutauschen. Über persönliche Netzwerke bieten wir Euch die Möglichkeit, mit alten Bekannten in Kontakt zu bleiben und neue Verbindungen herzustellen." /> <meta name="keywords" content="Studenten, students" /> <meta name="ajaxUrl" content="/Ajax" /> <meta name="platformId" content="Svz" /> <meta name="platformUrlOther" content="http://www.meinvz.net" /> <meta name="staticServer" content="http://static.pe.studivz.net/20100730-0" /> <meta name="noCacheFlag" content="20100730-0" /> <meta name="activeModules" content="Default,Search,Login,StaticContent, Cooperations,Info,Chat,Plauderkasten,Gadgets ,Ims,Friends,Uservoice" /> <meta name="pageletName" content="Default.Overview" /> <link rel="shortcut icon" href="http://static.pe.studivz.net/20100730-0/favicon.ico" /> <link rel="stylesheet" type="text/css" href="http://static.pe.studivz.net/20100730-0/Css/Default.css" /> <link rel="stylesheet" type="text/css" href="http://static.pe.studivz.net/20100730-0/Css/Main.css" /> <link rel="stylesheet" type="text/css" href="http://static.pe.studivz.net/20100730-0/Css/Objects.css" /> <link rel="stylesheet" type="text/css" href="http://static.pe.studivz.net/20100730-0/Css/DefaultJS.css" /> <link rel="stylesheet" type="text/css" href="http://static.pe.studivz.net/20100730-0/Css/Login.css" /> <link rel="stylesheet" type="text/css" href="http://static.pe.studivz.net/20100730-0/Css/Gadgets.css" /> <link rel="stylesheet" type="text/css" href="http://static.pe.studivz.net/20100730-0/Css/rd/Grid.css" /> <link rel="stylesheet" type="text/css" href="http://static.pe.studivz.net/20100730-0/Css/rd/Objects.css" /> <link rel="stylesheet" type="text/css" href="http://static.pe.studivz.net/20100730-0/Css/rd/Default.css" /> <script type="text/javascript" src="http://static.pe.studivz.net/20100730-0/Js/build/resource-core.js"></script> </head> <body class="svz isNotLoggedIn webkit webkit53316"> <div id="Grid-Wrapper"> <div id="Grid-Advertising-Top"> </div> <div id="Grid-Advertising-Right"> </div> <div id="Grid-Page"> <div id="Grid-Page-Left"> <div id="Logo"> <a href="/" rel="nofollow" title="zur Startseite"> <img src="http://static.pe.studivz.net/20100730-0/Img/logo.png" alt="Logo studiVz, Link zur Startseite" /> </a> </div> <div class="obj-box complex" id="Mini-Loginbox"> <div class="innerbox"> <form id="Loginbox" method="post" action="https://secure.studivz.net/Login"> <fieldset> <div class="form-row labelinside"> <label for="Login_email">E-Mail</label> <input onfocus="this.hasfocus='yes';" class="text" type="text" name="email" id="Login_email" value="" /> </div> <div class="form-row labelinside"> <label for="Login_password">Passwort</label> <input onfocus="this.hasfocus='yes';" class="text" type="password" name="password" id="Login_password" value="" /><br/> </div> <p><a href="/Login/ResetPassword">Passwort vergessen?</a></p> <div class="form-row"> <input onfocus="this.hasfocus='yes';" type="checkbox" name="reminder" id="Login_remind" value="1" class="remind-login"/> <label for="Login_remind" id="Login-Remind-Label">Eingeloggt bleiben</label> <img class="loginTooltipIcon" src="http://static.pe.studivz.net/20100730-0/Img/rd/transparent.png" width="16" alt="?"/> <div id="reminder-hint" class="hidden"> <div class="obj-box complex bg-highlight"> <div class="innerbox"> Obacht! Verwende das Auto-Login aus Sicherheitsgründen nicht, wenn Du an einem für andere Personen zugänglichen Computer sitzt. </div> </div> </div> </div> <div class="form-row"> <input onfocus="this.hasfocus='yes';" type="checkbox" name="ipRestriction" id="Login_ip_restriction" value="1" checked="checked" class="ip-restriction-login"/> <label for="Login_ip_restriction" id="Login-IpRestriction-Label">Sitzung sichern</label> <img class="loginTooltipIpRestrictionIcon" src="http://static.pe.studivz.net/20100730-0/Img/rd/transparent.png" width="16" alt="?"/> <div id="ip-restriction-hint" class="hidden"> <div class="obj-box complex bg-highlight"> <div class="innerbox"> Diese Einstellung dient der Sicherheit Deiner Daten: Unser System erfährt, von welcher IP-Adresse aus Du aktuell eingeloggt bist und kann so verhindern, dass sich jemand anderes von einem fremden Computer aus in Deine Sitzung „einklinkt“. Wenn Du Probleme mit dem Login hast oder wiederholt unbeabsichtigt ausgeloggt wirst, kannst Du diese Funktion deaktivieren. </div> </div> </div> </div> <input onfocus="this.hasfocus='yes';" class="button" type="submit" name="login" value="Einloggen" /> <input type="hidden" name="jsEnabled" id="jsEnabled" value="false" /> <script type="text/javascript"> document.getElementById('jsEnabled').value = 'true'; </script> <input type="hidden" name="formkey" value="7690c9ac051d136120e145e0e6c6" /> <input type="hidden" name="iv" value="78afb4ad8f26342515c9df36fcd489e0" /> </fieldset> </form> <p><a href="/Register/Resend">Aktivierungslink noch einmal zusenden</a></p> </div> </div> <div id="LeftsideBox" class="box rounded simple-ext"> <div class="innerbox"> <p> Wenn´s mit dem Studium nicht klappt, geh ich zur <a href="http://www.studivz.net/C/1431">Mafia</a>.</p> </div> </div> </div> <div id="Grid-Page-Center"> <div id="Grid-Page-Center-Top"> <h1>Studentenverzeichnis / studiVZ</h1> <ul id="Grid-Page-Center-Top-Navigation"> <li><a href="https://secure.studivz.net/Register" rel="nofollow" title="Immatrikulieren">Immatrikulieren</a></li> <li><a href="/l/help" rel="nofollow" title="Hilfe">Hilfe</a></li> <li><a href="/Newsroom/" title="Klartext">Klartext</a></li> <li><a href="/l/mobile_info" title="Handy">Handy</a></li> <li><a href="http://blog.studivz.net" rel="nofollow" target="_blank" title="Blog">Blog</a></li> </ul> </div> <div id="Grid-Page-Center-Header"> <div id="Grid-Page-Center-Header-Menu"> </div> <h1 class="ellipsis" title="Bist Du schon drin?">Bist Du schon drin?</h1> </div> <div id="Grid-Page-Center-Content"> <div id="shoutboxJs" class="obj-shoutbox hidden"> <div> <p id="shoutboxJsSuccess" class="success hidden"></p> <p id="shoutboxJsError" class="error hidden"></p> </div> <div class="close"> <a rel="nofollow" href="javascript:;"></a> </div> </div> <div id="Mod-Default"> <div class="unit unit1of1"> <!-- <div class="obj-box complex-ext"> <p class="innerbox"> </p> </div> --> </div> <div class="unit unit3of5"> <a href="http://www.studivz.net/C/1425" target="_self"> <span id="rotatorImage" class="box complex" style="background: url(http://static.pe.studivz.net/modules/20100730-0//DefaultPageImages/Svz/eeb0112ce3.jpg)"></span> </a> <div class="box" id="Mod-Default-Intro"> <p><strong>Sei dabei</strong> in Deutschlands größtem sozialen Netzwerk</p> <p><strong>Tausch Dich aus</strong> über Fotos, Filme, Nachrichten, Gruppen</p> <p><strong>Bleib in Kontakt</strong> mit Freunden, Kommilitonen und Familie</p> </div> </div> <div class="unit unit2of5"> <div class="box complex bg-light" id="Form-To-Registration"> <h2>Kostenlos registrieren</h2> <form class="innerbox" method="post" action="/Default"> <input type="hidden" name="formcall" value="1"/> <input type="hidden" name="internalRegTracking" value="http://static.pe.studivz.net/modules/20100730-0//DefaultPageImages/Svz/eeb0112ce3.jpg"/> <fieldset> <legend>Deine Benutzerdaten</legend> <div class="form-row"> <label for="Register_firstName">Dein Vorname</label><input type="text" maxlength="30" class="text" value="" name="firstName" id="Register_firstName" title="Bitte gib Deinen vollständigen Vornamen ein, damit Deine alten und neuen Freunde Dich finden können!"/> </div> <div class="form-row"> <label for="Register_lastName">Dein Nachname</label><input type="text" maxlength="30" class="text" value="" name="lastName" id="Register_lastName" title=" Bitte gib auch Deinen Nachnamen vollständig ein - Sonst erkennt Dich niemand wieder."/> </div> <div class="form-row"> <label for="Register_birthdayDay">Geburtstag</label> <span class="hint">(TT.MM.JJJJ)</span> <span class="labelinside"> <label for="Register_birthdayDay">Tag</label> <input type="text" maxlength="2" class="day text" value="" name="birthdayDay" id="Register_birthdayDay"/> </span> <span class="labelinside"> <label for="Register_birthdayMonth">Monat</label> <input type="text" maxlength="2" class="month text" value="" name="birthdayMonth" id="Register_birthdayMonth"/> </span> <span class="labelinside"> <label for="Register_birthdayYear">Jahr</label> <input type="text" maxlength="4" class="year text" value="" name="birthdayYear" id="Register_birthdayYear"/> </span> </div> <div class="form-row"> <label>Geschlecht</label> <div class="checkboxContainer"> <input type="radio" value="1" name="sex" id="sex_1"/><label for="sex_1">weiblich</label> <input type="radio" value="2" name="sex" id="sex_2"/><label for="sex_2">männlich</label> </div> </div> <div class="button-row"> <input class="button" type="submit" value="Weiter"/> </div> </fieldset> <input type="hidden" name="formkey" value="d45505e0e823373fa" /> <input type="hidden" name="iv" value="6de9dd8b089658c30781b4d81ea07e26" /> </form> <p class="innerbox"> Was ist das hier?<br/>Schau Dir unsere <a href="/l/Tour" title="" rel="nofollow">studiVZ-Tour</a> an! </p> </div> <div class="box simple" id="Platform-Switch"> <h2>Du bist gar kein Student?</h2> <div class="innerbox"> Dann schau Dich mal bei <a href="http://www.meinVZ.net" title="meinVZ">meinVZ</a> um! </div> </div> </div> <!-- <div class="unit unit1of1"> <ul class="box complex horizontal bg-light" id="Seo-Links"> <li><a href="">Bundesland</a></li> <li><a href="">Region</a></li> <li><a href="">Uni</a></li> <li><a href="">Edelprofil</a></li> <li><a href="">Edelgruppe</a></li> <li><a href="">Politiker</a></li> <li><a href="">Häufige Namen</a></li> </ul> </div> --></div> </div> <div id="Grid-Page-Center-Footer"> <ul class="first"> <li><a href="/l/about_us" title="Über uns">Über uns</a></li> <li><a href="/l/press" title="Presse">Presse</a></li> <li><a href="/l/jobs" title="Jobs">Jobs</a></li> <li><a href="/l/security" title="Sicherheit">Sicherheit</a></li> <li><a href="/l/security/5" title="Tipps">Tipps</a></li> </ul> <ul class="second"> <li><a href="/Terms/Current/" title="AGB">AGB</a></li> <li><a href="/Terms/Current/Policy" title="Datenschutz">Datenschutz</a></li> <li><a href="/l/impressum" title="Impressum">Impressum</a></li> <li><a href="/l/rules" title="Verhaltenskodex">Verhaltenskodex</a></li> <li><a href="/l/advertising" title="Werbung">Werbung</a></li> </ul> <ul class="last"> <li><a href="/Freunde/Unis.html" title="Universitäten">Universitäten</a></li> <li><a href="/Freunde/Regions.html" title="Regionen">Regionen</a></li> <li><a href="/Sitemap" title="Edelkompass">Edelkompass</a></li> <li><a href="/Gadgets/Sitemap" title="Appkompass">Appkompass</a></li> <li><a href="/Developer" title="Entwickler">Entwickler</a></li> </ul> <div id="Policy-Footer"> <a href="https://www.sicher-im-netz.de/Default.aspx" target="_blank"> <img src="http://static.pe.studivz.net/20100730-0/Img/dsin.png" alt="dsin" /></a> <a href="https://www.fsm.de/" target="_blank" style="margin: 0 2px;"> <img src="http://static.pe.studivz.net/20100730-0/Img/fsm.png" alt="fsm" /></a> <a href="/l/security" rel="nofollow"> <img src="http://static.pe.studivz.net/20100730-0/Img/vzds-de.png" alt="policy" /></a> <a href="/l/zertifikat" rel="nofollow" style="margin: 0 0 0 2px;"> <img src="http://static.pe.studivz.net/20100730-0/Img/logo-tuev.png" alt="TÜV" /></a> </div> </div> <div> </div> </div> <br class="Clear-The-Evil-Float" /> </div> </div> <input type="hidden" id="moduleNews" value="#" /> <script type="text/javascript" src="http://static.pe.studivz.net/20100730-0/Js/build/phx-core.js"></script> <script type="text/javascript" src="http://static.pe.studivz.net/20100730-0/Js/build/phx-start.js"></script> <!-- SZM VERSION="1.6" --> <noscript> <div id="ivwbox_noscript"> <img src="http://vznetzst.ivwbox.de/cgi-bin/ivw/CP/svz_index_welcome;LoggedOut" width="1" height="1" alt="" /> </div> </noscript> <!-- /SZM --> </script><!-- SiteCatalyst code version: H.20.3. Copyright 1997-2009 Omniture, Inc. More info available at http://www.omniture.com --> <input type="hidden" name="omniture-s" id="omniture-s" value="1" /> <script language="javascript" src="http://static.pe.studivz.net/20100730-0/Js/source/class/phx/modules/omniture/Scode_uvz.js" type="text/javascript"></script> <script type="text/javascript"> <!-- /* Copyright 1997-2004 Omniture, Inc. */ s.trackingServer = "www.vz-t.net"; s.trackingServerSecure = "secure.vz-t.net"; s.trackingServerBase = "vz-t.net"; s.pageName="Svz_Default_Overview"; s.channel="Default"; s.prop5="1"; s.linkInternalFilters="javascript:,meinvz.net,studivz.net"; function reloadScodes() { var s_code=s.t();if(s_code)document.write(s_code); window.setTimeout("reloadScodes()", 1740000); } reloadScodes(); //--> </script> <!-- End SiteCatalyst code version: H.20.3. --> <div id="adContainer"></div> </body> </html>