Lección 1 – HTML Básico (para ir probando en clase)
(Códigos procedentes de esa página, comentarios, de un servidor)
El Lenguaje HTML es muy básico. Todo funciona con etiquetas. Y cada
etiqueta, tiene un significado:
<tag> texto afectado </tag>
Cada etiqueta que pongamos, irá siempre al principio y al final. De esa
forma, el navegador que usemos (Chrome, Explorer, Mozilla....), sabrá cuándo
comienza "la orden" y donde termina.
Todo código HTML tiene 3 partes:
*head = cabecera (donde va el título)
*title = básicamente, el nombre que vemos en la parte superior izquierda
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>
*body = que será "el cuerpo" ( o sea, prácticamente todo el
código)
Y por último, ese html se cierra = </html>
Prueba este primer código, pero antes, usa el bloc de notas (sí, tiene que
ser el bloc de notas). Ahora, copia este código desde el blog y pégalo en el
bloc de notas:
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
<H1>Mi primera página</H1>
<!-- Aqui va un comentario que no es
interpretado por el navegador -->
<P>Hola mundo, esta es un página con titular,
que tiene también un párrafo y unos cuantos
saltos de línea.</P>
Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>
Ahora, guárdalo en "guardar como", pero antes, debajo del nombre,
despliega la lista, para que en lugar de guardar como un archivo de texto,
guarde como "todos los archivos".
Es ahora, cuando le pondremos nosotros, el nombre completo:
index.html
Se llamará "index" , porque será la primera página que creemos. Y
la que permita que otras personas, al hacer clic sobre las palabras que
marquemos, lleguen a nuestros blogs y foros.
Ahora, algo más "latosillo". Los marcadores.
Básicamente, un marcador es un "recordatorio" para nosotros. Este
ejemplo en concreto, nos permite ir "arriba" o "abajo",
según le pidamos. Y todo, sin esfuerzo. Sólo hay que poner "donde va el
arriba" y "donde va el abajo" (a name="arriba".....).
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Página de
enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A><br>
<A HREF="ej4.html">Ir a ejemplo
4</A><br><br>
<A HREF="http://www.webestilo.com/">Ir a
WebEstilo</A><br>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>.<br>.<br>.<br>.<br>.<br>
<A NAME="abajo"><br></A>
<A HREF="#arriba">Ir arriba</A>
</BODY>
</HTML>
Estos no son saltos "absolutos" (que nos "sacan" de
donde estamos"), si no que se trata de saltos "controlados",
dentro de la página que estemos viendo.
En cambio, los saltos "absolutos", se ponen con un código como
éste:
<A
HREF="http://www.webestilo.com/">Ir a
WebEstilo</A><br>
Antes, había un <br> (salto de página, punto y aparte, para que
nos entendamos). Y luego viene un "a
href="www.patatinpatatan.com"-. Ese código es para que la palabra que
venga tras poner la dirección (OJO, ENTRE COMILLAS), será la destinada a que,
si le hacemos clic, nos lleve justo a esa otra página web (que no es en la que
estamos).
Ahora bien, en algún momento, querremos que la gente nos escriba. Y existe
un comando (mailto:maselcorreoquecorresponda@yalosabes.com) específico para
esto:
<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</HEAD>
<BODY>
<H1>Diferentes tipos de URLs</H1>
Enlace a <A
HREF="http://www.webestilo.com">WebEstilo</A>.
<br>
Enlace al servidor de FTP
de <A HREF="ftp://ftp.mozilla.org/pub/mozilla/">Mozilla</A>.
<br>
Enlace a <A HREF="file:///C:">la unidad C
de su ordenador</A>.
<br>
Enlace a <a href="mailto:webmaster@bienvenidos.es">
mailto:webmaster@bienvenidos.es</a>.
<br>
Enlace a las <A HREF="news://msnews.microsoft.com">News de
Microsoft</A>.
<br>
</BODY>
</HTML>
Como sé que habéis visto viñetas en Word..... pues que sepáis que en HTML,
también se pueden hacer:
<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>
<H1>Listas</H1>
Una lista ordenada
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
<br><br>
Una lista sin ordenar
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<br><br>
Una lista de glosario
<dl>
<dt>Témino 1</dt>
<dd>Definición 1</dd>
<dt>Témino 2</dt>
<dd>Definición 2</dd>
</dl>
<br><br>
Listas anidadas
<ul>
<li>Uno
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</BODY>
</HTML>
Los tipos de letra son más fáciles:
<HTML>
<HEAD>
<TITLE>Ejemplo 7</TITLE>
</HEAD>
<BODY>
<H1>Estilos de caracter</H1>
Un ejemplo de texto de <EM>realzado</EM>.<br>
Un ejemplo de texto de <STRONG>realzado</STRONG>.<br>
Un ejemplo de texto de <CODE>realzado</CODE>.<br>
Un ejemplo de texto de <SAMP>realzado</SAMP>.<br>
Un ejemplo de texto de <KDB>realzado</KDB>.<br>
Un ejemplo de texto de
<VAR>realzado</VAR>.<br>
Un ejemplo de texto de <DFN>realzado</DFN>.<br>
Un ejemplo de texto de <CITE>realzado</CITE>.<br>
<br>
Un ejemplo de texto de <B>realzado</B>.<br>
Un ejemplo de texto de <I>realzado</I>.<br>
Un ejemplo de texto de <U>realzado</U>.<br>
Un ejemplo de texto de <TT>realzado</TT>.<br>
</BODY>
</HTML>
Aunque no siempre queda como espero, por lo que puedo recurrir al texto
"preformateado" (PRE) , para que salga justo con los espacios que
necesito (está algo en desuso, pero podría no venir mal que lo conozcamos):
<HTML>
<HEAD>
<TITLE>Ejemplo 8</TITLE>
</HEAD>
<BODY>
<H1>Texto preformateado</H1>
Diferencia entre un texto normal y
un texto preformateado. En el texto
preformateado, se respetan los
carácteres y los espacios.<br>
iiiiii<br>
wwwwww<br>
<PRE>
Diferencia entre un texto normal y
un texto preformateado. En el texto
preformateado, se respetan los
carácteres y los espacios.<br>
iiiiii<br>
wwwwww<br>
</PRE>
</BODY>
</HTML>
Ahora, algo más entretenido: saltos y líneas en blanco (BR)
<HTML>
<HEAD>
<TITLE>Ejemplo 9</TITLE>
</HEAD>
<BODY>
<H1>Saltos y lineas</H1>
<HR>
<HR width="80%">
<HR width="60%">
<HR width="40%">
<HR width="20%">
----
<br><br><br>
----
</BODY>
</HTML>
Y como no podía ser menos, también existen las tablas (de lo más útil que
se ha inventado, justo después del pan de molde -Bimbo-):
<HTML>
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY>
<H1>Tablas básicas</H1>
<TABLE BORDER="1">
<TR>
<TH>Cabereca 1</TH>
<TH>Cabereca 2</TH>
<TH>Cabereca 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Y si quieres probar algo más:
<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
</HEAD>
<BODY>
<H1>Tablas avanzadas</H1>
<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3"
CELLPADDING="2">
<TR>
<TD COLSPAN="2" ALIGN="right">Dato
1</TD>
<TD>Un
texto cualquiera</TD>
<TD ROWSPAN="2">Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 4</TD>
<TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>
</BODY>
</HTML>
