Publizieren im Internet

Größe: px

Ab Seite anzeigen:

Download "Publizieren im Internet"

Martha Pfaff
vor 8 Jahren
Abrufe

1 Publizieren im Internet Eine eigene Homepage erstellen Teil 2 Margarita Esponda esponda@inf.fu-berlin.de Ein Bild als Hintergrund <head> <title> Webseite mit einen Bild als Hintergrund </title> </head> <body background="h_heft.jpg"> <BR><BR> <TABLE width=70% align=center> <TR> <TD> <H3 align=center>willkommen auf meiner Webseite </TD> </TR> </TABLE> h_heft.jpg 1

de Ein Bild als Hintergrund <head> <title> Webseite mit einen Bild als Hintergrund

2 Mehr über Tabellen <head><title> Webseite mit einem Bild als Hintergrund </title></head> <body background="h_heft.jpg"> <BR><BR> <TABLE BORDER=6 CELLSPACING=14 CELLPADDING=10 bgcolor=teal text=white width=70% align=center> <TR> <TD> <H3 align=center> <font color=white >Willkommen auf meiner Webseite</font> </TD> <TD> <img src= "2.jpg"> </TD> </TR> </TABLE> Mehr über Tabellen BORDER=6 CELLSPACING=14 CELLPADDING=10 Willkommen auf meiner Webseite bgcolor=teal 2

<TD> <H3 align=center> <font color=white >Willkommen auf meiner Webseite</font> </TD> <TD> <img src= "2.

3 Größe eines Bildes verändern und alternative Text definieren <head><title> Webseite mit einen Bild als Hintergrund </title></head> <body background="h_heft.jpg"> <TABLE BORDER=6 CELLSPACING=14 CELLPADDING=10 bgcolor=teal text=white width=70% align=center> <TR> <TD> <H3 align=center> <font color=white>willkommen zu meinen Homepage</font> </TD> <TD> <img src= "2.jpg" height=86 width=128 alt="das hier ist eine Schülerin"> </TD> </TR> </TABLE> Größe eines Bildes verändern und alternative Text definieren Das hier ist eine Schülerin 3

jpg"> <TABLE BORDER=6 CELLSPACING=14 CELLPADDING=10 bgcolor=teal text=white width=70% align=center> <TR> <TD> <H3 align=center> <font

4 Rahmen, der einen rechteckigen Teil des Browser-Fensters belegt, seine Größe dynamisch anpasst und in einem URL angegebene Dokumente enthält. Frame Frame Hier können zwei verschiedene HTML-Dokumente gezeigt werden. <head><title> </TITLE></head> <FRAMESET ROWS="120,*"> <FRAME SRC="head.html" SCROLLING=no> <FRAME SRC="body.html" > </FRAMESET> <head><title>rumpf</title></head> <body bgcolor="#ffffff" > <center><h3>rumpf</center> <head><title>kopf</title></head> <body bgcolor="#00cafb" > <center><h3>kopf</center> 4

<head><title> </TITLE></head> <FRAMESET ROWS="120,*"> <FRAME SRC="head.html" SCROLLING=no> <FRAME SRC="body.

5 ROWS head.html COLS menu.html body.html feld1 5

6 ..mehr über <head><title> Animationen </TITLE></head> <FRAMESET ROWS="100,*"> <FRAME SRC="head.html" SCROLLING =no> <FRAMESET COLS ="150,*"> <FRAME SRC="menu.html" > <FRAME SRC="body.html" NAME="feld1"> </FRAMESET> </FRAMESET>..mehr über <head><title> Menu </TITLE> </head> <body> <a href="alien.gif" TARGET="feld1"> Alien </a> <a href="computer.gif" TARGET="feld1"> Rechner </a> <a href="toothy.gif" TARGET="feld1"> Zaehne </a> <a href="schaf.gif" TARGET="feld1"> Schaf </a> <a href="swimmer.gif" TARGET="feld1"> Fisch </a> <a href="drums.gif" TARGET="feld1"> Trommel </a> <a href="mouse.gif" TARGET="feld1"> Maus </a> <a href="haseani.gif" TARGET="feld1"> Hase </a> 6

gif" TARGET="feld1"> Alien </a> <a href="computer.gif" TARGET="feld1"> Rechner </a> <a href="toothy.gif" TARGET="feld1"> Zaehne </a> <a href="schaf.

7 ..mehr über feld1 <head><title>tabellen</title></head> <body> <table border= 2 WIDTH="80%"> <tr> <td> <table border=2 WIDTH="80%"> <tr> <td bgcolor="#00ffff">_</td> <td bgcolor="#00ddff">_</td> <td bgcolor="#00bbff">_</td> <td bgcolor="#0099ff">_</td> <td bgcolor="#0077ff">_</td> <td bgcolor="#0055ff">_</td> <td bgcolor="#0033ff">_</td> </tr> <tr> <td bgcolor="#ffff00">_</td> <td bgcolor="#ffdd00">_</td> <td bgcolor="#ffbb00">_</td> <td bgcolor="#ff99d00">_</td> <td bgcolor="#ff7700">_</td> <td bgcolor="#ff5500">_</td> <td bgcolor="#ff3300">_</td> </tr> <tr> <td bgcolor="#ff00ff">_</td> <td bgcolor="#dd00ff">_</td> <td bgcolor="#bb00ff">_</td> <td bgcolor="#99d00ff">_</td> <td bgcolor="#7700ff">_</td> <td bgcolor="#5500ff">_</td> <td bgcolor="#3300ff">_</td> </tr> </table> </td> <td bgcolor="#0000dd">_</td> <td bgcolor="#0000bb">_</td> <td bgcolor="#000099">_</td> <td bgcolor="#000077">_</td> <td bgcolor="#000055">_</td> <td bgcolor="#000033">_</td> </tr> <tr> <td bgcolor="#00ff00">_</td> <td bgcolor="#00dd00"> <table WIDTH="80%"> <tr> <td bgcolor="#00ffff">_</td> <td bgcolor="#00ddff">_</td> <td bgcolor="#00bbff"> <table border=2 WIDTH="80%"> <tr> <td bgcolor="#00ffff">_</td> <td bgcolor="#00ddff">_</td> Tabellen 7

bgcolor="#ffdd00">_</td> <td bgcolor="#ffbb00">_</td> <td bgcolor="#ff99d00">_</td> <td bgcolor="#ff7700">_</td> <td bgcolor="#ff5500">_</td> <td bgcolor="#ff3300">_</td> </tr> <tr> <td

8 Tabellen BLOCKQUOTE-Elemente oder Zitate <head><title> Blockquote </title></head> <body> <h2> Zitate </h2> <blockquote> Einrücken!! <blockquote> Noch mal einrücken!! </blockquote> </blockquote> Zitate Blockquote Einrücken!! Noch mal einrücken!! 8

<blockquote> Einrücken!! <blockquote> Noch mal einrücken!

9 Style Sheets für Web-Dokumente Das Erstellen einer Formatvorlage für ein HTML-Element unter Verwendung der Sprache CSS. Cascading Style Sheets. Der Grundgedanke ist, dass mehr als eine Formatvorlage in Benutzung sein und mit anderen verschachtelt werden kann. Wo? Am Anfang eines HTML-Dokuments innerhalb des HEAD-Bereichs Formatvorlage Verbindung einer eigenständigen, externen Formatvorlage mit einem Dokument. CSS Anweisungen und Formatvorlagen Anweisungen Formatvorlage Aussage über einen stilistischen Aspekt eines oder mehrerer HTML-Elemente. Eine oder mehrerer Anweisungen. Beispiel: H1 { color: red } Selektor Deklaration H1 { color: red } Eigenschaft Wert 9

Am Anfang eines HTML-Dokuments innerhalb des HEAD-Bereichs Formatvorlage Verbindung einer eigenständigen, externen Formatvorlage mit einem Dokument.

10 Style-Sheets in einer HTML-Datei definieren <head> <title> HTML und CSS </title> <STYLE type="text/css">  </STYLE> </head> <body background="fondo_1.gif"> <h1> Äolsharfen </h1> <h3>gespräch</h3> <h4>er</h4> <p>ich dacht, ich habe keinen Schmerz; <br> Und doch war mir so bang ums Herz, <br> Style-Sheets in einer HTML-Datei definieren 10

$center } p {color: #500020; font-family: verdana; font-size:10pt; align:center} //--> </STYLE> </head> <body background="fondo_1.$

11 Style-Sheets in separater Datei definieren body { width: 9cm; align:center; background-image:url(fondo_1.gif); } h1 { color: #808080; text-align: center; } h3 { color: #0000FF; text-align: center; font-family: verdana; } h4 { color: #6600DD; text-align: center } p { color: #500020; font-family: verdana; font-size:10pt; align:center} name.css <head> <title> HTML und CSS </title> <link rel=stylesheet type="text/css" href="name.css"> </head> <body> <h1>äolsharfen</h1> <h3>gespräch</h3> <h4>er</h4> <p> Ich dacht, ich habe keinen Schmerz; <br> Und doch war mir so bang ums Herz,<br>.... Style-Sheets in einer HTML-Datei definieren 11

p { color: #500020; font-family: verdana; font-size:10pt; align:center} name.

Ähnliche Dokumente

CSS. Cascading Stylesheets

CSS. Cascading Stylesheets CSS Cascading Stylesheets Themen Was sind Cascading Stylesheets? Vorteile von CSS Nachteile von CSS CSS: Versionen Regelsyntax für Stylesheets Einem HTML-Dokument Styles hinzufügen und Numerische