Academia de Carmen Millos: lección 1

Lección 1 – HTML Básico (para ir probando en clase)

Fuente: http://www.webestilo.com/html/cap1a.phtml

(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>

   

<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>

Fuente: http://daleclick.blogspot.com.es/

Academia de Carmen Millos

Contador general de visitas

martes, 24 de abril de 2012

lección 1 - HTML Básico

No hay comentarios:

Publicar un comentario

Juego de la pecera

Juega desde mi blog

programa salud mascotas