IT-Academy Logo
Sign Up Login Help
Home - Internet - Webdesign - HTML-Code isolieren



HTML-Code isolieren

Um an den HTML-Quellcode einer interessanten Funktion auf einer Website heranzukommen, braucht man oft einige Zeit. Schließlich möchte man nicht den übrigen Code der Website, sondern lediglich den der Funktion. Was fehlt, ist ein System, mit dem man diese Arbeit effizienter erledigt.


Autor: Matthias Reuter (no_comment)
Datum: 03-10-2002, 17:10:17
Referenzen: PC-Intern.com
Schwierigkeit: Anfänger
Ansichten: 4148x
Rating: 8 (1x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Einleitung

Man geht auf eine Website, sieht eine nützliche Funktion und sagt sich: Hey, das wär doch was für meine Website! Erfahrene Programmierer werden sicherlich schnell den dafür benötigten Code herausfiltern können, doch gerade bei größeren Seiten und einem kilometerlangen Wust aus Codezeilen verliert man schnell den Überblick. Anfänger sind hoffnungslos verloren. Dabei kann man durch ein einfaches System Stück für Stück dem gesuchten Code näherkommen und ihn schließlich vom umliegenden Codemüll isolieren.

Beispiel: So siehts aus

Quellcode für Beispiel:

<html>
<head>
<title>Zentrierter Text - Beispiel 01 - HTML-Code herausfiltern</title>
<link rel="stylesheet" href="code_isolieren_beispiel_01_style.css" type="text/css">
<meta http-equiv="imagetoolbar" content="no">
<script type="text/javascript" language="JavaScript" src="fade_scrollbar.js"></script>
</head>
<body class="index">

<div class="index">
Dies ist Beispiel Nr. 1.
<br>
<br>

Hiermit soll demonstriert werden, wie man Code isoliert. Es soll der Code isoliert werden, der bewirkt, dass dieser Text stehts im vertikalen und horizontalen Zentrum des Browserfensters ist.
<br>
<br>

Viel Erfolg!
<br>
<br>
<br>
<b>
Fülltext</b>:
</div>
<br>
<div class="index">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<br>
<div class="index">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<br>
<div class="index">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>


Ziele:

  • Herausfiltern des Rollbalken-Farbenveränderers (diese Funktion wird nur beim Internet Explorer ab Version 6 angezeigt, mit Glück auch bei früheren Versionen)
  • Herausfiltern der Funktion, die den ersten Buchstaben und die erste Zeile eines jeden Absatzes formatiert (offizieller Style Sheet - Standard, doch selbst dieser wird nicht immer 100%-ig von allen Browsern unterstützt)
Fürs bessere Verständnis werden zunächst einzelne Elemente des Codes differenziert.

Normaler Text
Tags für das HTML-Gerüst
Tags zur Gliederung von Textabschnitten
Tags zur direkten Formatierung

Der "normale Text" ist nur wichtig, wenn die Funktion, die wir suchen auch auf diesen Auswirkungen hat.
Die Funktion mit dem Rollbalken-Farbveränderer hat keine direkten Auswirkungen auf irgendeinen Textabschnitt, umgekehrt hat der Textabschnitt Einfluss auf den Rollbalken.
Der Rollbalken erscheint nur, wenn bei der aktuellen Fenstergröße der Inhalt nicht mehr komplett sichtbar ist und dadurch die Möglichkeit des Scrollens erst angeboten wird.

Die "Erster Buchstabe"- und "Erste Zeile"-Formatierungsfunktionen(Relative Format[RF]) beeinflussen dagegen einen Textabschnitt direkt.
Da wir nur einen Pendant für die Darstellung der RF-Funktionen brauchen, können wir alle unnützen löschen. Wir haben also nun zwei Quellcode Versionen. Eine, in der nur das nötigste für RF-Funktionen sein soll und eine, in der nur das Nötigste für den Rollbalken sein soll.

Fangen wir mit der RF-Funktion an:

<html>
<head>
<title>Zentrierter Text - Beispiel 01 - HTML-Code herausfiltern</title>
<link rel="stylesheet" href="code_isolieren_beispiel_01_style.css" type="text/css">
<meta http-equiv="imagetoolbar" content="no">
<script type="text/javascript" language="JavaScript" src="fade_scrollbar.js"></script>
</head>
<body class="index">

<div class="index">
Dies ist Beispiel Nr. 1.
<br>
<br>

Hiermit soll demonstriert werden, wie man Code isoliert. Es soll der Code isoliert werden, der bewirkt, dass dieser Text stehts im vertikalen und horizontalen Zentrum des Browserfensters ist.
<br>
<br>

Viel Erfolg!
<br>
<br>
<br>
<b>
Fülltext</b>:
</div>
<br>
<div class="index">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<br>
<div class="index">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<br>
<div class="index">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
</div>
</body>
</html>


Der eingerahmte Bereich kann sorglos gelöscht werden, denn wie wir im ersten Beispiel gesehen haben, reicht uns ein Absatz um immer noch die Wirkung der Funktion sehen zu können.

Da der normale Text und einige Tags zur direkten Formatierung, sowie einige Tags zur Gliederung nun weggefallen sind, wenden wir uns nun dem Gerüst zu. Hier wird Stück für Stück so viel entfernt, dass sich keine Auswirkung auf unseren Absatz wiederspiegelt. Lediglich die Schriftart ist anders, doch die restliche Formatierung für unser erstes Wort und die erste Zeile des Absatzes sind immer noch speziefisch formatiert.

Beispiel: So siehts aus

Der restliche Code ist nun weitaus überschaubarer:

<html>
<head>
<link rel="stylesheet" href="code_isolieren_beispiel_01_style.css" type="text/css">
</head>
<body>

<div class="index">
Dies ist Beispiel Nr. 1.
<br>
<br>

Hiermit soll demonstriert werden, wie man Code isoliert. Es soll der Code isoliert werden, der bewirkt, dass dieser Text stehts im vertikalen und horizontalen Zentrum des Browserfensters ist.
<br>
<br>

Viel Erfolg!
<br>
<br>
<br>
<b>
Fülltext</b>:
</div>
</body>
</html>


Man erkennt, dass die Style Sheet Datei eine tragende Rolle spielt, denn entfernt man den Verweis auf diese, wird auch die RF-Funktion außer Kraft gesetzt. Um an die Style Sheet Datei heranzukommen muss man in der Adresszeile des Browsers (nach der Webadresse und dem Pfad) statt dem Namen der Datei, die auf das Style Sheet verlinkt, das schreiben, was im Attribut href="" beim Tag <link > steht. Also zum Beispiel http://webadresse.com/Pfadzumdokument/code_isolieren_beispiel_01_style.css

Die Reaktion auf diese Eingabe ist (mal wieder) von Browser zu Browser unterschiedlich. Opera zeigt das Stylesheet im Fenster an. Der Internet Explorer öffnet ein Dialogfeld, in dem man ein Programm wählen kann, mit dem man das Stylesheet betrachtet. Hier kann man Notepad wählen.

Betrachten wir uns einmal das Stylesheet genauer:

<!--
body.index
{
background-image:url(facetten.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-color: #FFFFFF;
background-position:center;
text-align:center;
font-family:Arial;
padding:0px;
color: #000000;
scrollbar-arrow-color: rgb(0,0,200);
scrollbar-face-color: rgb(0,0,80);
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000090;
scrollbar-3dlight-color: #000090;
scrollbar-highlight-color: #000050;
}
a:link, a:visited, a:hover, a:active, a:focus
{
font-weight:700;
color: #FF0000;
font-family:Arial;
text-decoration:none;
}
a:hover
{
color: #FF3000;
}
div.index
{
font-size:12px;
width:500px;
text-align:justify;
margin : 0px auto;
}
div.index:first-letter
{
font-weight: bold;
font-size: 60px;
float: left;
color: red;
first-letter: 22px #FF0000;
font-family:Times New Roman;
}
div.index:first-line
{
font-size: 24px;
color: #505050;
}
-->


Auch hier wird Stück für Stück Code entfernt, immer dabei darauf Achtend, dass die RF-Funktion nicht außer Kraft gesetzt wird.
Übrig bleibt folgender Fetzen Code:

<!--
div.index:first-letter
{
font-weight: bold;
font-size: 60px;
float: left;
color: red;
first-letter: 22px #FF0000;
font-family:Times New Roman;
}
div.index:first-line
{
font-size: 24px;
color: #505050;
}
-->


Wichtig sind also lediglich:
  • die erste Zeile nach dem <div class="index">-Tag im HTML-Dokument und
  • der oben angezeigte Stylesheet-Bereich.
Das zweite Ziel ist das Isolieren der Funktion des Rollbalken Farbveränderers.

Da die Vorangehensweise schon im Detail erläutert wurde, möchte ich nur kurz die benötigten Code-Fetzen für die Rollbalken-Funktion nennen:

Code für das HTML-Dokument:

<html>
<head>
<link rel="stylesheet" href="code_isolieren_beispiel_01_style.css" type="text/css">
<meta http-equiv="imagetoolbar" content="no">
<script type="text/javascript" language="JavaScript" src="fade_scrollbar.js"></script>
</head>
<body class="index">

Genug Inhalt, damit ein Rollbalken entsteht.
</body>
</html>



Code für die Style Sheet Datei, die das HTML-Dokument aufruft:

<!--
body.index
{
scrollbar-arrow-color: rgb(0,0,200);
scrollbar-face-color: rgb(0,0,80);
scrollbar-track-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000090;
scrollbar-3dlight-color: #000090;
scrollbar-highlight-color: #000050;
}
-->


Code für die JavaScript Datei, die das HTML-Dokument aufruft:

<!--

var scrollPct, prevStep, nextStep, interStep

steps = new Array();
steps[0] = new Array(0,0,80);
steps[1] = new Array(0,0,70);
steps[2] = new Array(0,0,60);
steps[3] = new Array(0,0,50);
steps[4] = new Array(0,0,40);
steps[5] = new Array(0,0,30);
steps[6] = new Array(0,0,20);
steps[7] = new Array(0,0,10);
steps[8] = new Array(0,0,0);

function newColor(chan) {
var i=Math.floor(steps[prevStep][chan]+interStep*(steps[nextStep][chan]-steps[prevStep][chan]));
return i;
}

function scrollFunk() {
scrollPct=(steps.length-1)*document.body.scrollTop/ (document.body.scrollHeight-document.body.clientHeight);
prevStep=Math.floor(scrollPct);
nextStep=Math.ceil(scrollPct);
interStep=scrollPct-prevStep;
var newRGB="rgb("+newColor(0)+","+newColor(1)+","+newColor(2)+")";
var invRGB="rgb("+(255-newColor(0))+","+(255-newColor(1))+","+(255-newColor(2))+")";
if (document.body.style.scrollbarTrackColor != null) {
document.body.style.scrollbarFaceColor=newRGB;
}
}

window.onscroll=scrollFunk;
//-->


Da es zahlreiche Programmiersprachen allein im Zusammenhang mit HTML und unendlich viele Möglichkeiten von Funktionen gibt, kann dieser Text nicht als Patentlösung für das herausfinden des Codes eines Scripts gelten. Dennoch sollte dieser Text helfen, das Prinzip des Code-Isolierens zu vermitteln, so dass man im Laufe der Zeit sich Stück für Stück (eventuell mit zusätzlicher Hilfe von Tools) seine eigene Technik entwickelt.

Ich möchte aber darauf hinweisen, dass in jedem Fall bei Inhalten und Codes fremder Autoren stehts das Copyright eingehalten werde muss. Für den privaten Gebrauch, sprich: allein für den heimischen PC, darf man sich die gesuchte Funktion isolieren und sich mit dieser auseinandersetzen. Ansonsten ist man verpflichtet sich das Einverständnis des Autoren einzuholen.


jamesv
Rookie
Beitrag vom:
07-08-2012, 09:05:14

Tag falsch

Hallo.
So weit ich weiß soll folgender Tag anstatt von <br>

<br /> verwenden ;)

-----------------------------------------------------


[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06246
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1154
Comments: 0