HTML, XML Und CSS
Übersetzt von
ScribdTranslationsHTML, XML Und CSS
Übersetzt von
ScribdTranslations2 HTML, XML Y CSS.
Conoce y aplica las
Werkzeuge für
Seiten erstellen
Web, unter Berücksichtigung der
grafische Benutzeroberfläche von
Benutzer, eine Sprache
de marcado y de
Präsentation.
2 HTML, XML und CSS.
2.1 Einführung.
2.2 Globale Struktur eines Webdokuments.
2.3 Grundelemente: Text, Links, Listen, Tabellen
Objekte, Bilder und Anwendungen.
2.4 Formulare.
2.5 Präsentationssprachen in Webdokumenten.
2.6 Selektoren.
2.7 Modell der Kiste.
2 MARKUPSPRACHE.
AKTIVITÄTEN
Aktivität Mut
Theoretische Prüfung 20 %
Integrationsprojekt 20%
HTML-Praktiken: von den grundlegenden Elementen des
Markup-Sprachen, wie zum Beispiel: Text, 15%
Links, Listen, Tabellen, Objekte und Formular.
Praktiken XML 15%
Einzelprojekt 5%
2.1 EINLEITUNG.
HTML : ("Hypertext Auszeichnungssprache
Sprache
HTML ist die standardisierte Auszeichnungssprache
verwendet, um Webseiten und ihre
Elemente bilden die Blöcke von
Bau aller
HTML4: Websites.
Es ist die Veröffentlichungsprache des World Wide Web. Neben Text, Multimedia und
funciones de hipervínculo de las versiones anteriores de HTML (HTML 3.2 [HTML32] y HTML 2.0
[RFC1866]), HTML 4 ist mit mehr Multimedia-Optionen, Skriptsprachen und Stylesheets kompatibel.
Stil, bessere Druck- und Dokumenteneinrichtungen, die für Benutzer mit mehr Zugänglichkeit sind
Behinderung. HTML 4 hat auch große Fortschritte in Richtung Internationalisierung von Dokumenten gemacht.
mit dem Ziel, das Web wirklich für alle zugänglich zu machen.
HTML5 : Spezifiziert zwei Varianten der Syntax für HTML: eine "klassische", HTML (text/html), bekannt
wie HTML5, und eine Variante von XHTML, bekannt als XHTML5-Syntax, die mit Syntax bereitgestellt werden muss
XML. Die endgültige Version der fünften Überarbeitung des Standards wurde im Oktober 2014 veröffentlicht.
2.1 EINLEITUNG.
Marken
Die Marken grenzen Elemente eines Dokuments wie Überschriften, Absätze,
etc. und werden verwendet, um eine andere Behandlung des Textes zu geben, die ...
finden Sie unter den Marken.
HTML ist eine Sprache, die ihre Syntax auf einem Basiselement basiert.
was wir Etikett nennen. Das Etikett zeigt häufig zwei
partes: Una apertura de forma general Un cierre de tipo
...normaler Text<marca>vom Markierung betroffener Text</marca>Rest des
Ein Beispiel könnte sein, einen Text fett hervorzuheben; dafür wird verwendet
die Marke <B> und würde wie folgt aussehen: ...normaler Text <B>Text in
<B>negrita</B> resto del texto...
2.1 EINLEITUNG.
Attribute der Marken
Einige Marken können Attribute unterstützen, wobei jede von ihnen diese haben kann.
Attribute einen Wert. Dieser Wert wird in Anführungszeichen (") gesetzt, wenn dieser Wert ...
alphanumerisch.
<marca atributo1=numerico atributo2="alfanumetrico">
Beispiel:
<table width="50" height="70" border="20"> </table>
<a href="/home/[Link]">
<img src="imagenes/foto_01.jpg" width="600" height="337" />
2.1 EINLEITUNG.
Attribute der Marken
Einige Marken können Attribute akzeptieren, wobei jede dieser Attribute haben kann.
Attribute einen Wert. Dieser Wert wird in Anführungszeichen (") gesetzt, wenn dieser Wert ist
alphanumerisch.
<marke attribut1=numerisch attribut2="alphanumerisch">
Beispiel:
<table width="50" height="70" border="20"> </table>
<a href="/home/[Link]"> </a>
<img src="imagenes/foto_01.jpg" width="600" height="337" />
2.2 GLOBALER AUFBAU EINER DOKUMENTE
WEB.
2.2 GLOBALE STRUKTUR EINER DOKUMENTES
WEB.
<link> rel="stylesheet" href="[Link]" />
<link> rel="shortcut icon" href="/[Link]" />
<link rel="alternate" title="Pozolería RSS" type="application/rss+xml"
href="/[Link]" />
</Kopf>
<Körper>
<kopf>
<h1>Meine Webseite</h1>
<p>Meine Website, die in HTML5 erstellt wurde</p>
</header>
<section>
<Artikel>
<h2>Inhaltstitel<h2>
<p> Inhalt (neben Bildern, Zitaten, Videos usw.) </p>
</article>
</section>
<aside>
<h3>Titulo de contenido</h3>
<p>Inhalt</p>
</aside>
<fußzeile>
Erstellt von mir im Jahr 2011
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
2.2 GLOBALE STRUKTUR EINES DOKUMENTS <kopf>
<title>Titulo de la web</title>
<meta charset="utf-8" />
WEB. <link rel="stylesheet" href="[Link]" />
<link rel="shortcut icon" href="/[Link]" />
<link> rel="alternativ" title="Pozolería RSS"
type="application/rss+xml" href="/[Link]" />
</Kopf>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML <body>
4.01//DE <header>
<h1>Meine Webseite</h1>
[Link] <p>Meine Website, die in HTML5
</header>
erstellt wurde</p>
<HTML> <section>
<artikel>
<KOPF> <h2>Inhaltstitel<h2>
<p> Inhalt (neben Bildern, Zitaten,
<TITLE>Mi primer documento HTML</TITLE>
Videos etc.) </p>
</KOPF> </article>
</section>
<BODY> <aside>
<h3>Titulo de contenido</h3>
<P>Hallo Welt!</P> <p>Inhalt</p>
</aside>
</BODY> <footer>
Erstellt von mir im Jahr 2011
</HTML> </footer>
</body>
</html>
2.2 GEGLAUBE STRUKTUR EINEM DOKUMENT
WEB.
Kopfzeile
Der Kopfbereich wird verwendet, um Informationen über das Dokument bereitzustellen, und ist durch ...
<HEAD>Prolog</HEAD>
Innerhalb des Kopfes können wir den Titel hervorheben, der den Namen des Dokuments angibt <TITLE>
</TITLE>.
<HTML>
<KOPF>
<TITLE> Bienvenido a nuestra guía rápida </TITLE>
</KOPF>
Körper des Dokuments
…</HTML>
2.2 GLOBAL STRUKTUR EINER DOKUMENTE
WEB
<!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.0//DE">
<html>
<kopf>
<title>MI PRIMERA PAGINA</title>
<METAname="keywords" content="HTML,realización páginas web">
<METAname="descripcion" content="Mi primera portada ">
<METAname="GENERATOR" content="BOC DE NOTAS Win95">
<METAname="author" content="Nombre Apellidos">
<METAHTTP-EQUIV="Refresh" content="5";url=[Link]>
<link rel="stylesheet" href="css/[Link]">
<script src="js/[Link]"></script>
</head>
<Körper>
</body>
</html>
2.2 GLOBALE STRUKTUR EINES DOKUMENTS
WEB.
[Link]
Körper
Der Rest des Dokuments wird resident sein.
zwischen den Marken <BODY> und
</BODY>. Dies ist die Struktur
minimale, die jeder besitzen muss
documento HTML:
<BODY>
Dokument...
</BODY></HTLM>
Im Folgenden werden wir beschreiben
einige Elemente, die können
im Körper erscheinen.
2.2 GLOBALE STRUKTUR EINER DOKUMENTS
WEB.
Überschrift
Die Überschriften werden verwendet, um Dokumente in Abschnitte zu unterteilen oder genauer gesagt, um die Titel von
Diese Abschnitte. Die Marken sind vom Typ <H#> Titel </H#>, wobei # eine beliebige Zahl zwischen 1 und 6 sein kann.
<H1>Tamaño mayor</H1>Tamaño menor
<H6>Tamaño menor</H6>Tamaño mayor
2.3 GRUNDDATENTYPEN.
<!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.0//EN">
DOCTYPE: Bietet Informationen an den Host-Webserver der Seite
die notwendigen Daten für die
Kommunikation zwischen dem Browser und dem Server. (nicht obligatorisch) Ihre Form
Der Standard ist der folgende:
HTML PUBLIC: Das Dokument ist öffentlich.
IETF: Der öffentliche HTML-Typ wird von der Internet Engineering Task verwaltet.
Kraft.
DTD HTML 4.0: Die unterstützte Version von HTML ist 4.0.
EN:El idioma del documento es el inglés.
2.3 GRUNDDATENTYPEN.
META: Sie sind Codeschnipsel, die von den Suchmaschinen als erstes gelesen werden.
KEYWORDS:Las palabras clave son los términos que, de manera resumida
beschreiben den Inhalt einer Webseite.
AUTHOR:Autor de la página.
DESCRIPCION:Título que aparecerá tras la búsqueda.
GENERATOR:Nombre del editor que se ha generado el Documento.
NOINDEX: Es, wenn gewünscht wird, dass eine Seite NICHT in den Suchmaschinen indiziert wird.
de búsqueda.
REFRESH:Refrescar la página cada cierto tiempo.
HTML-Sprache
BLOCKSEPARATOR
(Absatztrenner, seine Attribute sind links, rechts, zentriert).
<BR>(Zeilenumbruch).
(TabulierteAbsätze).
<HR>(Horizontale Linie, Attribute: noshade, breite, größe, ausrichtung).
(Text vorformatiert).
(Blockzentrierung)
LENGUAJE HTML
Hintergründe und Schriftfarben
Eine bestimmte Anzahl von Attributen der Marke BODY ermöglichen die Kontrolle über das
Farbe des Hintergrunds des Browsers, die Farbe der Zeichen des
Text und schließlich die Farbe der Links:
< KÖRPER attribut1 attribut2 attribut3 ... attributN >
Das Attribut BGCOLOR
Dieses Attribut ermöglicht die Wahl einer Farbe für den Seitenhintergrund.
<BODY BGCOLORS="#rrggbb"> wobei "rr", "gg" und "bb" hexadezimale Werte sind
von 00 bis FF, die den Sättigungsgrad der roten Farben spezifizieren,
grün und blau.
Das Attribut BACKGROUND
Dieses Attribut gibt ein auf dem Server gespeichertes Bild an, das verwendet werden soll als
Fußzeile.
<BODY BACKGROUND="fichero_gráfi[Link]">
HTML-SPRACHE
Hintergründe und Textfarben
Das Attribut TEXT
Erlaubt es, die Farbe des Standardtextes zu steuern, d.h. aller Texte, die keinen Link angeben.
<BODY TEXT="#rrggbb">
Die Attribute LINK, VLINK und ALINK
Steuern die Farbe der Links:
LINK-Farbe des Links, der noch nicht besucht wurde.<BODY LINK="#rrggbb">
ALINK-Farbe, die sehr flüchtig erscheint, wenn auf den Link geklickt wird <BODY
ALINK="#rrggbb">
VLINK ist die Farbe eines Links, der bereits besucht wurde <BODY VLINK="#rrggbb">
2.3 GRUNDLEGENDEN DATENTYPEN.
<!DOCTYPE HTML PUBLIC="-//IETF//DTD HTML 4.0//DE">
<html>
<head><title>MEINE ERSTE SEITE</title>
<METAname="keywords" content="HTML, realización páginas web">
<METAname="descripcion" content="Mi primera portada ">
<METAname="GENERATOR" content="BOC DE NOTAS Win95">
<METAname="author" content="Nombre Apellidos">
<METAHTTP-EQUIV="Refresh" content="5";url=[Link]>
</Kopf>
<body bgcolor="#AEAEFF">
Schriftart <B>fett</B>, Schrift <I>kursiv</I> und Schrift <TT>courier</TT>.
<CENTER>Dieser Text ist zentriert</CENTER>
<P Align="left">Dieser Text ist linksbündig ausgerichtet</P>
<P Align="center">Dieser Text ist zentriert</P>
<P Align="right">Dieser Text ist rechtsbündig</P>
texto...
2.3 GRUNDDATENTYPEN.
<h1>Überschrift Typ 1</h1>
<h2>Kopfzeile Typ 2</h2>
<h3>Kopfzeile Typ 3</h3>
<h4>Kopfzeile Typ 4</h4>
<h5>Header Typ 5</h5>
<h6>Typ-6-Kopfzeile</h6>
Internet
<p> Separator </p>
<ol>
<li>Bilddatei</li>
<li>Audiodatei</li>
<li>Videodatei</li>
<ol>
</body>
</html>
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINKS, LISTEN,
TABELLEN, OBJECTS, BILDER UND ANWENDUNGEN.
1. FormatoTexto
Die Formatierung des Textes, das heißt, das Format des Textes, sind eine Reihe von Tags, die
wir schreiben in HTML, indem wir das Wort oder den Text umgeben und diesen Text in das umwandeln
formato que nosotros le hemos querido dar.
Fettdruck
Es gibt zwei Tags, die unseren Text fett machen. Die Verwendung von
Egal welche von ihnen. Du kannst die wählen, die du bevorzugst.
Die erste ist das Etikett <b> und die andere ist das Etikett <strong>. Hier ist ein Beispiel:
Dieses Wort werden wir <b>fett</b> und dieses andere
auch
Dieses Wort werden wir fett drucken und dieses andere auch.
2.5 BÁSISCHE ELEMENTE: TEXT, LINK, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
Texto
Cursiva:Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por
man soll sie mit dem Tag </i>) schließen.
WirkönnenauchdasTag<em>[Link],istes
indifferent ob die eine oder die andere Verwendung. Hier lasse ich euch ein Beispiel:
Dieses Wort werden wir <i>kursiv</i> setzen und dieses andere
auch
Dieses Wort werden wir kursiv schreiben und dieses andere auch
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINKS,
LISTEN, TABELLEN, OBJEKTE, BILDER UND
ANWENDUNGEN.
Texto
Unterstrichen: Wenn wir wollen, dass das Wort oder der Text unterstrichen wird, müssen wir
umgeben Sie es mit dem Tag <u> und schließen Sie es mit dem entsprechenden Tag. Das heißt,
</u>. So würden wir einen wichtigen Satz unterstreichen:
<u>So würden wir einen wichtigen Satz unterstreichen</u>
So würden wir einen wichtigen Satz unterstreichen
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINKS, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
TextoCabeceras
<h1>Kopfzeile Typ 1</h1>
<h2>Überschrift Typ 2</h2>
<h3>Cabecera tipo 3</h3>
<h4>Kopfzeile Typ 4</h4>
<h5>Kopfzeile Typ 5</h5>
<h6>Überschrift Typ 6</h6>
Attribut Gesicht
Definieren Sie den Schriftart. Dieses Attribut wird von Versionen von Netscape ab 3 interpretiert.
de MSIE 3 oder höher. Andere Browser ignorieren sie vollständig und zeigen den Text mit der
Quelle, die sie verwenden.
2.5 GRUNDELEMENTE: TEXT, LINKS, LISTEN, TABELLE
OBJEKTE, BILDER UND ANWENDUNGEN.
Color,tipo de letra y tamaño
Gesicht Attribut
Definieren Sie den Schriftschnitt. Dieses Attribut wird von Netscape-Versionen ab interpretiert.
de la 3 y de MSIE 3 o superiores. Otros navegadores ignorieren sie völlig und
zeigen Sie den Text mit der verwendeten Schriftart.
<font face="Comic Sans MS,arial,verdana">Dieser Text hat einen anderen
Typografie
face="Comic Sans MS,arial,verdana"
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, VERKNÜPFUNGEN, LISTEN, TABELLE
OBJEKTE, BILDER UND ANWENDUNGEN.
Color,tipo de letra y tamaño
Attribut Größe
Definieren Sie die Schriftgröße. Diese Größe kann absolut oder relativ sein. Wenn wir sprechen von
Absolute Begriffe, es gibt 7 verschiedene Größenstufen, nummeriert von 1 bis 7 in Reihenfolge.
wachsend. Wir wählen daher einen Wert size="1" für die kleinste Schrift oder size="7"
für die Größte.
<font size=4>Dieser Text ist Größe 4</font>
<font size=12>Dieser Text ist Größe 12</font>
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINKS, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
Color,tipo de letra y tamaño
Attribut Farbe
Die Farbe des Textes kann durch das Attribut color definiert werden. Jede Farbe ist wiederum
definiert durch eine hexadezimale Zahl, die wiederum aus drei Teilen besteht. Jeder
Ein Teil davon repräsentiert den Beitrag von Rot, Grün und Blau zur betreffenden Farbe.
<font color="red">Dieser Text ist rot</font>
<font color="#FF0000"> Dieser Text ist rot </font>
2.5 GRUND ELEMENTE: TEXT, LINKS, LISTEN, TABELLE
Objekte, Bilder und Anwendungen.
2. Formato Parrafos
Um dem Browser mitzuteilen, dass wir diesen Text in einen Absatz setzen möchten, müssen wir
<p>escribirlo entre las etiquetas <p> y su cierre </p>.</p>
So wird der Text innerhalb eines Absatzes stehen, durch einen Leerraum darüber getrennt
und eins unten.
Den Text des Absatzes kannst du mit dem Tag align ausrichten, indem du die verwendest.
Parameter „center“ (um es zentriert auszurichten), „right“ (um es nach rechts auszurichten), „left“
(um es nach links auszurichten) und „be justify“ (um den Text zu rechtfertigen).
Ein Beispiel für dieses Tag mit seinen jeweiligen Parametern ist das folgende:
<p align="center">Dieser Text wird zentriert dargestellt</p>
<p align="right">Dieser Text wird rechtsbündig ausgerichtet</p>
<p align="left">Dieser Text wird links ausgerichtet</p>
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINKS, LISTEN, TABELLE
OBJEKTE, BILDER UND ANWENDUNGEN.
Absätze Zeilenumbrüche
Es gibt zwei Tags, um anzuzeigen, dass wir einen normalen Zeilenumbruch machen wollen. Sie sind die
etiquetten <br> und <br/> werden vom Browser gleich interpretiert. Dieses Tag nicht
Es muss geöffnet und geschlossen werden, nur mit dem Schreiben wird es bereits vom Browser interpretiert.
<p > Dieser Text wird in der ersten Reihe sein<br/>
Dieser Text wird zentriert sein <br/>
Dieser Text wird am Ende sein
AKTIVITÄT 1: FORMAT
Grundelemente der Auszeichnungssprache, wie: Text,
Verknüpfungen, Listen, Tabellen.
Practica: Format (practica_1_1_format_text.html)
Indicaciones:Elaborar un documento HTML en que se incluya:
. Encabezados (h1 – h7)
. Texto tamaño (1-4)
. Estilos de texto (normal, negrita, subrayado, cursiva, subíndice, superíndice)
. Ausrichten von Absätzen (Blocksatz, Zentriert, Rechtsbündig und Linksbündig)
Extra:Agregar al menos tres párrafos de texto con tipos distintos de estilo,
Farben, Schriftarten, Ausrichtung usw.
AKTIVITÄT 1: FORMAT - BEISPIEL
AKTIVITÄT 1: FORMAT - BEISPIEL
2.5 BASISELEMENTE: TEXT, VERLINKUNGEN, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
[Link]
Eine Tabelle in HTML wird durch die Tags <table> </table> markiert. Dazwischen
Wir werden die Tabelle mit zwei Tags definieren, die Zellen, die wir wollen, die Spalten und die
Merkmale jedes dieser Parameter. Aber lassen Sie uns anfangen.
Die <table>-Etagene erklären.
Wir haben bereits gesagt, dass dieses Tag uns anzeigt, dass eine Tabelle beginnt, aber…
Können wir Eigenschaften dieser Tabelle vordefinieren? Natürlich können wir das.
es gibt viele Parameter. Wir werden dir die wichtigsten erklären.
2.5 GRUNDLEGENDE ELEMENTE: TEXT, VERBINDUNGEN, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
Die Tabelle: <table>
Wie bereits bei dem Body-Tag, können wir auch einer Tabelle das definieren
Hintergrund der gleichen. Dies können wir mit dem Parameter "bgcolor" erreichen, der uns
Es wird eine Hintergrundfarbe oder ein 'Hintergrund' festgelegt, um ein Hintergrundbild einzufügen.
Denke daran, dass wenn das Bild kleiner als die Tabelle ist, sich diese so oft wiederholen wird, wie...
breit wie lang.
<table width="100%" border="1" bordercolor="#0000FF" cellspacing="0">
cellpadding="0">
<tr>
<td>Hallo</td>
<td>holaa2</td>
</tr>
</table>
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINKS, LISTEN,
TABELLEN, OBJECTS, BILDER UND ANWENDUNGEN.
1. FormatoTexto
Die Formatierung des Textes, das heißt, das Format des Textes, sind eine Reihe von Tags, die
wir schreiben in HTML, indem wir das Wort oder den Text umgeben und diesen Text in das umwandeln
formato que nosotros le hemos querido dar.
Fettdruck
Es gibt zwei Tags, die unseren Text fett machen. Die Verwendung von
Egal welche von ihnen. Du kannst die wählen, die du bevorzugst.
Die erste ist das Etikett <b> und die andere ist das Etikett <strong>. Hier ist ein Beispiel:
Dieses Wort werden wir <b>fett</b> und dieses andere
auch
Dieses Wort werden wir fett drucken und dieses andere auch.
2.5 GRUNDLEMENTE: TEXT, LINKS, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
Tabellen
Die Zellen <td>
Die Zellen, die innerhalb jeder Zeile sind, müssen wir mit dem Tag <td> schreiben.
und das entsprechende Schließen </td>.
Ähnlich wie in den Zeilen können wir in den Zellen die Ausrichtung des Inhalts festlegen, die
ist innerhalb mit den Attributen "valign" und "align".
Die Zellen verfügen über Attribute, die uns helfen, so viele Zellen oder so viele
Spalten, wie wir sie angeben. Um Zellen zu gruppieren, würden wir das Attribut "colspan" verwenden.
und um Zellen zu gruppieren, das Attribut "rowspan".
Zum Beispiel, um in einer Zelle 2 Spalten zu gruppieren, müssen wir schreiben: <td
colspan='2'></td>. Und um zwei Zeilen zu gruppieren, wäre die Angabe wie folgt: <td
rowspan= "2"></td>.
2.5 GRUNDLEGEND ELEMENTE: TEXT, LINKS, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
Tabellen
AKTIVITÄT 2: TABELLEN UND LISTEN -
BEISPIEL
<table border="1px">
<tr> <table border="3px">
<td>Name</td> bordercolor="#0099FF">
<td>Nachname</td> <tr>
</tr> <td>Kante</td>
<tr> <td>3 pixels</td>
<td>Pedro</td> </tr>
<td>Garcia</td> </table>
</tr>
</Tabelle>
AKTIVITÄT 2: TABELLEN UND LISTEN –
BEISPIEL
<table border="1px"> <table border="1px" cellspacing="15px">
bordercolor="#333333" bgcolor="#3399FF">
cellpadding="20px"> <tr>
<tr> <th bordercolor="#0033FF"
<th bgcolor="#CCCCCC">Name</th> bgcolor="#ffffffff">Name</th>
<th bgcolor="#CCCCCC">Nachname</th> <th bordercolor="#0033FF"
</tr> Nachname
<tr>
<td>Pedro</td> </tr>
<td>Garcia</td> <tr>
</tr> <td bgcolor="#CCCCCC">Pedro</td>
</Tabelle> <td bgcolor="#CCCCCC">Garcia</td>
</tr>
</tabelle>
AKTIVITÄT 2: TABELLEN UND LISTEN –
BEISPIEL
AKTIVITÄT 2: TABELLEN UND LISTEN –
BEISPIEL
ACTIVIDAD 2: TABLAS Y LISTAS
Grundelemente der Auszeichnungssprache, wie: Text,
Verknüpfungen, Listen, Tabellen.
Praktika: Tabellen und Listen (praktika_1_2_tabellen_und_listen.html)
Indicaciones:Elaborar un documento HTML en que se incluya:
. Verschiedene Tabellenformate
. Verschiedene Listenformate
Extra: Fügen Sie 2 Tabellen mit Füllformat, Schriftfarben und Typen hinzu.
verschiedene Buchstaben.
Beispiele
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINK, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
3. Listen
Ungeordnete Listen: <ul>Die ungeordneten Listen befinden sich innerhalb des Tags
<ul> und dessen Abschluss </ul>. Jeden Punkt, den wir zur Liste hinzufügen möchten, werden wir hinzufügen.
innerhalb des Tags <li> und seiner Schließung.
<ul>
<li type="circle">Das ist eine Art Punkt.</li>
<li type="square">Das ist ein weiterer.</li>
<li type="disc">Und das ist ein anderer.</li>
</ul>
AKTIVITÄT 2: TABELLEN UND LISTEN -
BEISPIEL
<table border="1px">
<tr> <table border="3px">
<td>Name</td> bordercolor="#0099FF">
<td>Nachname</td> <tr>
</tr> <td>Kante</td>
<tr> <td>3 pixels</td>
<td>Pedro</td> </tr>
<td>Garcia</td> </table>
</tr>
</Tabelle>
AKTIVITÄT 2: TABELLEN UND LISTEN –
BEISPIEL
ACTIVIDAD 2: TABLAS Y LISTAS –
BEISPIEL
2.5 BASISELEMENTE: TEXT, LINKS, LISTEN
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
4. Objekte
Objekte einfügen: <object> und <param>
Das <object>-Tag erlaubt das Einfügen beliebiger Dokumenttypen (nicht nur von
texto) dentro de un documento html. Para poder mostrar esos archivos, el navegador
benötigen oft Plug-ins. Einige Dokumentarten benötigen zusätzliche Informationen
die durch das Tag <param> bereitgestellt wird.
Beispiele für das Einfügen von Objekten
Eine Webseite einfügen
Man kann eine Webseite in eine Seite einfügen.
Web mittels des Tags <object>, wie gezeigt
das folgende Beispiel.
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINKS, LISTEN
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
4. Objekte
<iframe src="ejemplo_iframe.html">
</iframe>
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINKS, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
4. Objetos
Beispiele für das Einfügen von Objekten
Eine Webseite einfügen
Man kann eine Webseite in eine Webseite mittels des Tags <object> einfügen, wie
zeigen Sie das folgende Beispiel.
<object type="text/html">
data=“objeto_pagina.html"
style="width: 400px; height:200px;" >
FEHLER (das Objekt kann nicht angezeigt werden)
</object>
Sie müssen eine HTML-Datei namens objeto_pagina.html erstellen, um sie aufzurufen.
2.5 BASISELEMENTE: TEXT, VERLINKUNGEN, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
Beispiele für das Einfügen von Objekten
4. Objetos Einfügen einer Google-Karte
<objecttype="text/html">
data=[Link]
f=q&source=s_q&
hl=de&geocode=&q=ies+abastos&
ie=UTF8&cid=11271517402525668942&
s=AARTsJqO2-JJ63RN_BaPYqsXhy19-WrrDw&
ll=39.477148,-0.382204&spn=0.023188,0.036478&
z=14&iwloc=A&output=embed
style="width: 425px; height:350px;">
FEHLER (das Objekt kann nicht angezeigt werden)
</object>
<iframe width="425" height="350" >
src="[Link]
hl=es&geocode=&q=ies+abastos&
ie=UTF8&cid=11271517402525668942&
s=AARTsJqO2-JJ63RN_BaPYqsXhy19-WrrDw&
ll=39.477148,-0.382204&spn=0.023188,0.036478&
z=14&iwloc=A&output=embed">
</iframe>
2.5 GRUNDLAGEN: TEXT, LINKS, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
4. Objekte
Eine PDF-Datei einfügen
Eine PDF-Datei kann in jede Webseite eingefügt werden, wie im Folgenden gezeigt.
Beispiel. Um eine andere PDF-Datei einzufügen, müsste die URI der Datei angegeben werden durch
attributodatei (im Beispiel, es ist einfach [Link]).
<object
type="application/pdf"
data="pdf/programacion_web.pdf"
style="width: 400px; height: 550px;" >
FEHLER (das Objekt kann nicht angezeigt werden)
</objekt>
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINKS,
LISTEN, TABELLEN, OBJEKTE, BILDER UND
ANWENDUNGEN.
4. Objekte
Ein YouTube-Video einfügen
Die YouTube-Videos sind im Flash-Format, sodass sie auf einer Seite eingebettet werden können.
Web über das Tag <object>, wie im folgenden Beispiel gezeigt. Um ein anderes einzufügen...
Das Video müsste den Videocode im Attributdata ersetzen (im Beispiel den Code des
vídeo esvZV-t3KzTpw).
<iframe class="youtube-player" type="text/html" width="340"
height="200" src="[Link]
frameborder="0"></iframe>
AKTIVITÄT 3: OBJEKTE
Grundlegende Elemente der Auszeichnungssprache, wie: Text, Links, Listen, Tabellen.
Praktika: Tabellen und Listen (praktika_1_3_objekte.html)
Anweisungen: Erstellen Sie ein HTML-Dokument, in dem die folgenden Objekte enthalten sind:
. Eine Seite mit Iframe einbetten.
. 2. Google-Karte mit Iframe und Objekt
. 3. Embeber un archivo pdf
. 4. Ein YouTube-Video einbetten
Extra: Fügen Sie 2 weitere Objekte hinzu.
Beispiele
Reproductor de audio
Videoplayer (anders als YouTube)
AKTIVITÄT 3: OBJEKTE
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINKS, LISTEN
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
6. Bilder
Attribute von IMG
Los atributos de la imagen pueden ser los siguientes:
ALT="Texto que aparece al situar el cursor sobre la imagen“
Zeigen Sie auch diesen gleichen Text an, falls der Browser das Bild nicht lädt.
ALIGN=Zeigt die Position des Bildes im Verhältnis zum Text an. Nach dem Gleichheitszeichen können die Werte stehen:TOP,
MITTE, UNTEN, LINKS und RECHTS.
BREITE=80, HÖHE=100: Gibt die Breite und Höhe des Bildes in Pixeln an, in diesem Fall 80x100 Pixel.
BORDER=2Füge einen Rahmen von 2 Pixeln um das Bild hinzu.
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINK, LISTE,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
5. Bilder
Breite des Randes [border-width]
Farbe des Rahmens [border-color]
Die Eigenschaft border-color definiert die Farbe des Rahmens. Die Werte dieser Eigenschaft sind die Farbwerte.
normal, zum Beispiel, "#123456" (in hexadezimaler Notation), "rgb(123,123,123)" (in RGB-Notation) oder
gelb
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINK, LISTEN,
TABLAS, OBJETOS, IMÁGENES Y APLICACIONES.
5. Bilder
Rahmenstil [border-style]
Man kann aus verschiedenen Randstilen wählen. Weiter unten...
zeigen 8 Rahmenstile, wie sie von Internet Explorer 5.5 interpretiert werden.
Alle Beispiele werden mit dem Farbwert "Gold" angezeigt und das
Wert der Breite auf "dick", aber sie können natürlich angezeigt werden.
in anderen Farben und Stärken
<img src="imagenes/[Link]" width="259"
height="194" border="8" style="border-color:#900;
border-style:dashed" />
2.5 GRUNDLEGENDEN ELEMENTE: TEXT, LINKS, LISTEN,
TABELLEN, OBJEKTE, BILDER UND ANWENDUNGEN.
5. Bilder
<img src="[Link]" width="259" height="194" border="8" aling="bottom"
vspace="10" hspace="10" alt="la playa" />
<br />
<img src="[Link]" width="259" height="194" border="8" vspace="10"
hspace="10" alt="Cascada" style="border-color:#9C0; border-style:gestrichelt;
align:middle" />
<br />
<img src="[Link]" width="489" height="322" border="8" aling="bottom"
vspace="10" hspace="10" alt="die Brücke" style="border-color:#09F; border-
stil:rinne" />
<div align="center"><img src="[Link]"></div>
2.7 FORMULARE.
Los formularios interactivos permiten a los
autores de páginas Web poner elementos
interaktiven Inhalten auf ihren Seiten, zum Beispiel, um
Nachrichten von Ihren Lesern erhalten, auf eine Weise
ähnlich wie die Antwortkarten, die man
fällt in einigen Zeitschriften.
Der Leser trägt die Informationen ein, indem er ausfüllt
Felder oder durch Klicken auf Schaltflächen und dann
Drücke eine Sendetaste, um es an eine
AdresseURLqman spricht normalerweise zu einer
E-Mail-Adresse oder zu einem Skript
dynamisches Web wie PHP, ASP oder CGI.
2.7 FORMULARE.
Das LABEL FORM
Die Formulare sind mit dem Tag <FORM> ... </FORM> begrenzt, das es ermöglicht, sie zu sammeln.
verschiedene Formularelemente, wie Schaltflächen und Textfelder, sowie die müssen besitzen
folgende Attribute:
METHODE gibt an, wie die Antworten gesendet werden.
"POST" ist der Wert, der die Daten an den Verarbeitungsagenten sendet und sie im Körper speichert.
des Formulars, während "GET" die Daten hinzufügt, indem sie zur URL hinzugefügt werden und
sie von der Adresse mit einem Fragezeichen zu trennen (um mehr über die Methoden zu erfahren
POST y GET.
ACTION gibt die Richtung an, in die die Informationen gesendet werden (ein CGI-Skript oder E-Mail-Adresse)
elektronisch ([Link]
Ein optionales Attribut des FORM-Tags ist ENCTYPE, das angibt, wie die Daten codiert werden.
des Formulars. Auf jeden Fall muss dies nicht spezifiziert werden, da der Standardwert
(application/x-www-form-urlencoded) ist der einzige gültige Wert. Das optionale Attribut ACCEPT wird verwendet
für établirrMIME-Typenpara los datos que el formulario puede enviar.
2.7 FORMULARE.
Das FORM-Tag
Dies ist die Syntax für das FORM-Tag:
<FORM METHOD="POST" o "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded"> ...
</FORM>
Hier sind einige Beispiele für die FORM-Tags:
<FORM METHOD=POST ACTION="[Link]
<FORM METHOD=GET ACTION="[Link]
2.7 FORMULARE.
Innerhalb des FORM-Tags
Die Tag FORM fungiert als eine Art Container zum Speichern
Elemente, die es dem Benutzer ermöglichen, Daten auszuwählen oder einzugeben. Alle Daten
werde an die im Attribut ACTION des FORM-Tags angegebene URL-Adresse gesendet,
durch die im Attribut METHOD angegebene Methode.
Se puede insertar cualquier elemento HTML en una etiquetaFORM(como texto,
Schaltflächen, Tabellen und Links), aber die interaktiven Elemente sind die meisten
interessant. Diese interaktiven Elemente sind:
•Das Etikett INPUT: Alle Schaltflächen und Textfelder
•Die TEXTAREA-Tag: ein Textfeld
•Die SELECT-Tag: eine Liste von mehreren Optionen
2.7 FORMULARE.
Datenversand
Wenn ein Formular gesendet wird (durch Klicken auf die Schaltfläche Senden), werden die Daten des
Formulare werden an ein CGI-Skript in Form von Paaren von Name/Wert gesendet, das heißt
Datensätze, die durch den Namen des Formularelements und ein Zeichen dargestellt werden
gleich ("=") und dann der zugeordnete Wert. Diese Paarungen von Namen/Werten werden voneinander getrennt durch
andere durch das Verbindungszeichen (&). Daher werden die Daten, die an die
Das Skript wird so aussehen:
campo1=valor1&field2;=valor2&field3;=valor3
Con el método GET (enviar los datos mediante una dirección URL), Die URL wird eine sein
eine Kette wie die folgende:
[Link]
2.7 FORMULARE.
Das INPUT-Tag
Das Etikett INPUT ist ein essentielles Etikett für Formulare, da es verwendet wird, um
viele „interaktive“ Elemente erstellen. Die Syntax dieses Tags ist wie folgt:
<EINGABE type="Feldname" value="Standardwert" name="Name
Das Attributname ist wesentlich, da es dem CGI-Skript ermöglicht, zu erkennen
Welches Feld ist mit einem Namen/Wert-Paar verbunden, was bedeutet, dass der Name
das Feld wird von einem Gleichheitszeichen ("=") gefolgt, gefolgt von einem Wert, den der
Benutzer gab ein, oder wenn der Benutzer keinen Wert eingegeben hat, durch den Wert
vordefiniert der Etikettenwert.
2.7 FORMULARE.
Das INPUT-Tag
Das Attribut type wird verwendet, um den Typ des Elements anzugeben, das mit dem Tag INPUT dargestellt wird.
Das sind die möglichen Werte:
checkbox: Las casillas de elección pueden adoptar uno de dos estados: checked (seleccionado) o
nicht ausgewählt. Wenn das Kästchen ausgewählt ist, wird das Paar Name/Wert gesendet an
CGI.
hidden: Este campo, que el navegador no muestra, es para definir una configuración única que se
wird an das CGI als Paar Name/Wert gesendet.
Datei: Ein Feld, das es dem Benutzer ermöglicht, einen Dateipfad anzugeben, der zur Datei führt, die sich
wird mit dem Formular versendet. Die Dateitypen, die gesendet werden können, müssen spezifiziert werden.
utilizando el atributoACCEPTde la etiquetaFORM.
2.7 FORMULARE.
Das INPUT-Tag
Ein benutzerdefinierter Versandknopf, der erscheint, wenn man sich an einem...
Bild an der durch das Attribut SRC definierten Position.
password: Unacasilla de textodonde los caracteres escritos aparecen como
Asterisken zur Verschleierung des eingegebenen Textes.
radio: Ein Knopf, der es dem Benutzer ermöglicht, zwischen mehreren Optionen zu wählen. Jede einzelne
Diese Schaltflächen müssen den gleichen Attributnamen haben. Das Paar Name/Wert des
Der ausgewählte Radiobutton wird an das CGI gesendet. Beim Anwenden des Attributs checked für
Einer dieser Schaltflächen wird standardmäßig als ausgewählt definiert.
2.7 FORMULARE.
Das INPUT-Tag
Zurücksetzen: Ein Wiederherstellungsknopf, um alle Elemente zu entfernen.
Formular und zurücksetzen der Standardwerte.
submit: Unbotón de envíopara enviar el formulario. El texto en el botón puede
sich mithilfe des Attributwerts definieren.
Eine Box zum Schreiben einer Textzeile. Die Größe der Box
kann mit dem Attribut Größe und der maximalen Texterweiterung definiert werden
atributomaxlength.
2.7 FORMULARE.
Das TEXTAREA-Tag
Das TEXTAREA-Tag wird verwendet, um ein größeres Textfeld zu definieren als das
Einfache Zeile, die durch das Tag INPUT vorgeschlagen wird. Dieses Tag hat die folgenden
atributos:
cols: repräsentiert die Anzahl der Zeichen, die eine Zeile enthalten kann
rows: representa el número de líneas
name: representa el nombre asociado con el cuadro de texto, que permite su
Identifizierung im Paar Name/Wert.
readonly: verhindert, dass der Benutzer den Standardtext im Feld ändert.
value: representa el valor predeterminado que se enviará al script si el usuario
hat nichts im Textfeld geschrieben
2.7 FORMULARIOS.
Das SELECT-Tag
Die SELECT-Tag dient dazu, eine Dropdown-Liste von Elementen zu erstellen.
(spezifiziert durch die LABEL-OPTIONEN innerhalb davon). Die Attribute davon
etiquette sind:
name: name: representa el nombre asociado con la casilla de texto, que permite
Ihre Identifizierung im Paar Name/Wert.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el número de líneas de la lista (este valor puede ser más grande
dass die Anzahl der realen Elemente in der Liste.
multiple: Permite al usuario seleccionar varios campos de la lista
2.7 FORMULARE.
Das SELECT-Tag
Das SELECT-Tag dient dazu, eine Dropdown-Liste von Elementen zu erstellen.
(spezifiziert durch die OPTION-Tags innerhalb davon). Die Attribute davon
Etikett sind:
name: name: representa el nombre asociado con la casilla de texto, que permite
Ihre Identifizierung im Namen/Wert-Paar.
disabled: crea un lista desactivada, que aparece atenuada
size: representa el número de líneas de la lista (este valor puede ser más grande
dass die Anzahl der realen Elemente in der Liste.
multiple: Permite al usuario seleccionar varios campos de la lista
<FORM method=post action="[Link]">
Benutzerregistrierung
<TABELLE Breite="346" RAND=0>
<TR>
<TD width="140">Nachname</TD>
<TD width="196">
<INPUT type=text name="apellido">
ACTIVIDAD 4 FORMULARIOS
</TD>
</TR>
<TR>
<TD>Nombre</TD>
<TD>
<EINGABE Typ=text Name="nombre">
</TD>
4. Formulare </TR>
<TR>
Genre
<TD>
Masculino: <INPUT type=radio name="género" value="M">
<br>Weiblich: <INPUT type=radio name="geschlecht" value="F">
</TD>
</TR>
<TR>
<TD>Beschäftigung</TD>
<TD>
<SELECT name="ocupación">
<OPTION VALUE="profesor">Profesor</OPTION>
<OPTION VALUE="estudiante">Estudiante</OPTION>
<OPTION VALUE="ingeniero">Ingeniero</OPTION>
<OPTION VALUE="jubilado">Jubilado</OPTION>
<OPTION VALUE="otro">Otro</OPTION>
</AUSWÄHLEN>
</TD>
</TR>
<TR>
<TD>Kommentare</TD>
<TD>
<TEXTAREA rows="3" name="comentarios">
Schreiben Sie hier Ihre Kommentare
</TD>
</TR>
<TR>
<TD COLSPAN=2>
Absenden <INPUT type="submit" value="Absenden">
</TD>
</TR>
</TABELLE>
</FORM>
ACTIVIDAD 4 FORMULARIOS
2.7 FORMULARE.
Formularattribute und Eingaben
Senden
2.7 FORMULARE.
Senden
2.7 FORMULARE.
Enviar