comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

[HTML][BASICO] Primeros pasos en HTML

  • 0 Respuestas
  • 1140 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5395
  • Actividad:
    36.67%
  • Reputación 31
  • ANTRAX
    • Ver Perfil
    • Underc0de
    • Email
  • Skype: underc0de.org
  • Twitter: @Underc0de
« en: Febrero 24, 2010, 11:53:11 am »
El esqueleto de HTML

Si editas una Peich con cualquier editor de texto verás que lo primero que pone es algo así (dan igual mayusculas que minusculas, pero, a partir de ahora, usaremos las mayusculas por cuestión de claridad):

<HTML>

Y que lo ultimo es

</HTML>


Esto es una inteligentisima manera de decirle a tu navegador que lo que hay en medio de esos dos Tags es texto HTML. ¿ Te parece dificil?.

De aquí podemos sacar yá varias ideas basicas:

Cada marca va siempre ente los signos < y >

Las Marcas siempre son dobles (casi siempre), una para indicar el principio y otra para el final

la marca que indica el final es igual que la del principio pero con el signo / delante

Dentro de estos Tags (Entre Tag-Principio y Tag-Final) encontramos otro que dice:

<HEAD>

...

...

</HEAD>

que indica la cabecera de la pagina, la cual sirve para meter un monton de tonterias, la mas importante de las cuales es:

<TITLE>

Esto-Debería-Ser-El-Título-De-La-Pagina

</TITLE>

Que es, como su propio nombre indica (en inglés), el titulo de la Peich (El que aparece en la ventana del navegador). despues viene el cuerpo de la pagina en sí: El texto, imágenes, links, ect... todo ello dentro de los siguientes Tags:

<BODY>

</BODY>

Con esto tenemos yá una pagina muy basica pero completa, por ejemplo:

Código: HTML5
  1. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  2.  
  3. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  4.  
  5. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  6.  
  7. Peich Cutre Experimental
  8.  
  9. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  10.  
  11. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  12.  
  13. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  14.  
  15. Este es un ejemplo MUY basico de una peich reducida a su minima esencia, puedes copiarla y guardarla con tu editor de textos favorito con el nombre que prefieras, guardarlo con la extensión *.htm o *.html, y así poder abrir tu primera obra en HTML con cualquier navegador.
  16. ¿No es MARAVILLOSO?
  17.  
  18. Fijate que en el código fuente hay un salto de linea, pero no sale en el navegador.
  19. Y aquí hay un gran                        espacio, pero tampoco sale.
  20. Yá veremos como solucionar esto.
  21. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  22. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  23.  
  24.  


Veamos ahora que se puede hacer dentro del Body:

como hemos comprobado en el ejemplo anterior, por mucho que le des al espacio o a la tecla ENTER en el editor de texto, todo lo que escribas te saldrá en un solo bloque. para dividirlo en parrafos tienes que acotar estos entre los Tags <P> y </P> del siguiente modo:

<P>

Parrafo 1

</P>

<P>

Parrafo 2

</P>

(En realidad, con solo usar el tag inicial <P> es suficiente, pero usaremos también el de cierre por el bién de la compatibilidad con el mayor numero de navegadores, aunque este punto en concreto está mas que estandartarizado, y por ser un poco mas fieles la teoría del HTML)

Este tag tiene una opción muy util que sirve para alinear el texto y que se usa de esta forma:

<P ALIGN=modo> donde modo es uno de estos tres: LEFT, RIGHT,CENTER, que alinean el texto a la derecha, izquierda y centro, respectivamente.

Otro tag que sirve casi para lo mismo que <P> es <BR> (este si que no se cierra, es decir, no existe </BR>), que solo se diferencia en que, en la mayoría de navegadores, <P> deja un espacio entre los párrafos, y <BR> no lo hace.

Exactamente, lo que hace <P> es marcar todo el texto que contiene como un párrafo. <BR>, por el contrario, solo indica que hay que introducir un salto de línea en el punto donde se encuentra
Sin embargo, si intentas dejar varios espacios en blanco entre dos palabras o entre dos líneas, el navegador lo ignorará y no te aparecerá en la página. Una solución sería poner un señal <P> o <BR> conteniendo un espacio en blanco, pero el navegador la ignoraría y no pasaría nada. Para resolver este problema tenemos el código &nbsp; que fuerza un espacio en blanco, y que podríamos usar de estas formas:

Para dejar más de un espacio entre palabras, solo hay que hacer esto:

palabra1 &nbsp; &nbsp; &nbsp; &nbsp; palabra2 (Esto deja cuatro espacios entre palabra1 y palabra2)

Y para espacios en blanco entre líneas hay que hacer algo parecido a esto:

linea1
<BR>&nbsp;
<BR>linea2

Que dejará una línea en blanco entre linea1 y linea2 (El primer <BR> fuerza un salto de línea, &nbsp; la ocupa con un espacio en blanco, y el segundo <BR> vuelve a forzar el salto de línea). No es la única forma, pero si la mas habitual.

Hemos visto un forma de alinear texto, de todas formas, y como suele ser tradicional en el HTML, existen muchas maneras de hacer las cosas, como en este caso, encerrando aquello que quieres definir entre tags:

<CENTER></CENTER> centra en la página todo aquello que esté entre las marcas.

<DIV ALIGN=modo><DIV> donde modo puede ser LEFT, RIGHT o CENTER, alinea, respectivamente, a a la derecha, izquierda y centro.

<DIV> tiene, además, otra opción que puede ser muy util en ciertos casos:

<DIV NOWRAP> que hace que el navegador considere todo el texto contenido entre los tags <DIV> y </DIV> como una sola palabra, es decir, que no cortará la frase aunque llegue al final del renglón.

Las fuentes:

Que hacemos para cambiar las caracteristicas de los caracteres? Muy facil, encerrandolos entre tags (¿a que te lo esperabas?). Veamoslo:

<B>Texto en negrita</B> Texto en negrita

<I>Texto en cursiva</I> Texto en cursiva

<U>Texto subrayado</U> Texto subrayado

<B><I><U>Las tres cosas</B></I></U>Las tres cosas

Como ves, se pueden combinar.

Bién, ya hemos avanzado un poco en nuestras capacidades, veamos un ejemplo:

Código: HTML5
  1. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  2. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Peich Casi-Cutre Experimental 2</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  4. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  5. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  6. Este es un ejemplo de una peich un poco mejor que la anterior, puedes copiarla y guardarla como hiciste con la otra, con el nombre que prefieras, con la extensión *.htm o *.html para después abrirla con un navegador y contemplar el expectacular resultado de tu SEGUNDA obra en HTML.
  7. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>¿No es AÚN MAS maravilloso?</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  8. <No tienes permisos para ver links. Registrate o Entra con tu cuenta> te habras dado cuenta de que ya somos capaces de poner varios parrafos, sin que el antipatico de tu navegador se empeñe en agruparlos en uno solo, lo cuál es un alivio. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  9. <No tienes permisos para ver links. Registrate o Entra con tu cuenta> Ademas, cambiamos el formato de las letras...</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  10. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Texto en negrita,</No tienes permisos para ver links. Registrate o Entra con tu cuenta><No tienes permisos para ver links. Registrate o Entra con tu cuenta>texto en cursiva,</No tienes permisos para ver links. Registrate o Entra con tu cuenta><U>y texto subrayado.</U>
  11. <No tienes permisos para ver links. Registrate o Entra con tu cuenta> ...Alineamos parrafos...</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  12. <No tienes permisos para ver links. Registrate o Entra con tu cuenta ALIGN=right>Texto alineado a la Derecha</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  13. <No tienes permisos para ver links. Registrate o Entra con tu cuenta ALIGN=center>Texto alineado en el Centro</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  14. <No tienes permisos para ver links. Registrate o Entra con tu cuenta ALIGN=left>Texto alineado a la Izquierda</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  15. <No tienes permisos para ver links. Registrate o Entra con tu cuenta> Y dejamos todos los espacios en blanco que &nbsp; &nbsp; &nbsp; queramos
  16. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>&nbsp;
  17. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>&nbsp;
  18. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>&nbsp;
  19. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>&nbsp;
  20. <No tienes permisos para ver links. Registrate o Entra con tu cuenta> ¡FASCINANTE!</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  21. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  22. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  23.  
  24.  


Otras modificaciones que puedes aplicar son las siguientes:

<STRIKE>texto</STRIKE>

Que se usa para tachar texto, de este modo:

Texto tachado

<S>texto</S>

Que no es más que otra forma de escribir la anterior.

<SUB>texto</SUB>

Que sirve para crear subíndices ( como los números "1" y "0" en la siguiente fórmula):

Incremento de energía=Energía1-Energía0

<SUP>texto</SUP>

Que sirve para crear superíndices (como el "2" de la siguiente fórmula):

E=mC2

Evidentemente, estas etiquetas tienen una grán utilidad a la hora de representer fórmulas o de poner pequeñas anotaciones.

Para cambiar el tamaño de la letra se usa el tag <FONT>...</FONT> de las siguientes formas:

<FONT SIZE=número>texto</FONT> donde número es el tamaño de la letra.

o también:

<FONT SIZE=+número>texto</FONT> (fijate en el signo +, podrá ser un - )donde número es lo que se suma (o resta) al tamaño de la letra.(El tamañno mínimo es 1, y el máximo es 7)

Ambas formas son válidas, yo creo preferible usar la segunda porque, si un tipo es medio miope y ha configurado su navegador para que las letras salgan mas grandes, no le obligo necesariamente a usar el tamaño que yo quiera, pero sigue viendo los tamaños relativos de los caracteres. Manías personales mias.

De todos modos, existe una etiqueta especialmente pensada para hacer exactamente esto. Es la siguiente:

<BIG>texto</BIG> que sirve para aumentar un punto el texto encerrado en ella (hace exactamente lo mismo que <FONT SIZE="+1">), se pueden aplicar varias anidadas unas dentro de otras para aumentar varios puntos de este modo:

<BIG>Texto aumentado 1 punto <BIG>texto aumentado dos puntos</BIG></BIG>

con lo que obtendremos lo siguiente:

Texto aumentado un punto texto aumentado dos puntos


Justamente lo contrario (reducir un solo punto el tamaño del texto) es lo que hace la siguiente etiqueta:

<SMALL>texto</SMALL>

Que tambien puede anidarse, ect.

Para cambiar el color tambien se usa el tag FONT, añadiendole el código de color:

<FONT COLOR=#RGB>texto</FONT> donde RGB son, respectivamente, los componentes rojo, verde y azul del color.

Por supuesto, se pueden usar los códigos SIZE y COLOR en conjunto:

<FONT SIZE=+1 COLOR=#008000>Verde y un punto mas grande</FONT> Verde y un punto mas grande

Por otro lado, si lo que quieres es establecer el color del texto para todo el documento, y no solo para una parte de él, puedes hacerlo dentro del tag <BODY>, con las siguientes opciones:

<BODY TEXT=#RGB> donde RGB se usa igual que hemos visto anteriormente.

Esto establece el color de todo el texto de la página, escepto los links y las que luego cambies con <FONT COLOR=#RGB>

<BODY LINK=#RGB>

Establece el color de los links que aún no han sido visitados

<BODY VLINK=#RGB>

Hace lo mismo que el anterior, pero para el color de los links que ya han sido visitados

<BODY ALINK=#RGB>

Este es un poco más sutil: Indica el color de los links activos, es decir, de aquellos que has activado, pero aún no se ha cargado la página a la que indican.

Ni que decir tiene que estos cuatro comandos se pueden (y se deben) usar juntos.

FONT nos permitirá también elegir el tipo de fuente que queremos usar de este modo:

<FONT FACE="nombre de la fuente">

Donde "nombre de la fuente" es el nombre del tipo de letra que queremos emplear.

El problema que tiene esto es que la fuente que quieras usar ha de estar instalada en el ordenador del visitante de tu página. En caso de que no la tenga instalada la verá con el tipo de letra que su navegador tenga por defecto (usualmente,una Times).

Pero, si tienes que cambiar de formato de texto un gran fragmeto del documento, es mejor que uses la etiqueta <BASEFONT>.

Se trata de un elemento vacío (o sea, que no tiene </BASEFONT> y, por lo tanto, no contiene texto u otros elementos) y se usa para asignar las características del texto desde el punto donde se encuentra hasta el final del documento (o hasta la próxima etiqueta BASEFONT, si la hay).

BASEFONT admite exactamente los mismos atributos SIZE, COLOR y FACE que hemos visto en FONT.


barra horizontal



Tradicionalmente, el HTML ha usado como separador la barra horizontal, para ello se utiliza un tag muy sencillo que no hay que cerrar, <HR>, este tag permite algunas opciones interesantes:

<HR SIZE=número> donde número es el grosor de la barra (en pixels o puntos de  la pantalla)

<HR WIDTH=número> donde número indica el ancho de la barra en pixels o, seguido del signo %, en porcentaje de la ventana donde se presenta.

<HR ALING=alineacion> donde  alineacion puede ser left, right o center, alinea la barra, si es menor que el ancho de la página, a la derecha, izquierda o centro, respectivamente.

<HR NOSHADE> presenta la barra en 2D, sin el sombreado de 3D.

Como era de esperar, las opciones son acumulables.

Veamos, para terminar, un ejemplo simple de tamaños, colores y barras:


Código: HTML5
  1. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  2. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  4. letras y barras
  5. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  6. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  7. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  8. <No tienes permisos para ver links. Registrate o Entra con tu cuenta><FONT COLOR=#ff0000>Este es una parte de un ejemplo de una peich reducida a su minima esencia en color rojo, puedes copiarla y guardarla con tu editor de textos favorito con el nombre que prefieras, con la extensión *.htm o *.html</FONT></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  9. <No tienes permisos para ver links. Registrate o Entra con tu cuenta><FONT COLOR=#008000>Este parrafo es otra parte de un ejemplo de una peich reducida a su minima esencia en color verde, puedes copiarla y guardarla con tu editor de textos favorito con el nombre que prefieras, con la extensión *.htm o *.html</FONT></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  10. <No tienes permisos para ver links. Registrate o Entra con tu cuenta><FONT SIZE=-1>Este parrafo es otra parte de un ejemplo de una peich reducida a su minima esencia en tamaño pequeño, puedes copiarla y guardarla con tu editor de textos favorito con el nombre que prefieras, con la extensión *.htm o *.html</FONT></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  11. <No tienes permisos para ver links. Registrate o Entra con tu cuenta><FONT SIZE=+1>Este parrafo es otra parte de un ejemplo de una peich reducida a su minima esencia en tamaño grande, puedes copiarla y guardarla con tu editor de textos favorito con el nombre que prefieras, con la extensión *.htm o *.html</FONT></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  12. <No tienes permisos para ver links. Registrate o Entra con tu cuenta><FONT SIZE=+2 COLOR=808080>Este parrafo es otra parte de un ejemplo de una peich reducida a su minima esencia en tamaño muy grande y color gris, puedes copiarla y guardarla con tu editor de textos favorito con el nombre que prefieras, con la extensión *.htm o *.html</FONT></No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  13. <No tienes permisos para ver links. Registrate o Entra con tu cuenta> y con separadores:</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  14. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Normal:</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  15. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  16. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Varios Gruesos</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  17. <No tienes permisos para ver links. Registrate o Entra con tu cuenta SIZE=1>
  18. <No tienes permisos para ver links. Registrate o Entra con tu cuenta SIZE=2>
  19. <No tienes permisos para ver links. Registrate o Entra con tu cuenta SIZE=4>
  20. <No tienes permisos para ver links. Registrate o Entra con tu cuenta SIZE=8>
  21. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>Varios Anchos</No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  22. <No tienes permisos para ver links. Registrate o Entra con tu cuenta WIDTH=10%>
  23. <No tienes permisos para ver links. Registrate o Entra con tu cuenta WIDTH=20%>
  24. <No tienes permisos para ver links. Registrate o Entra con tu cuenta WIDTH=40%>
  25. <No tienes permisos para ver links. Registrate o Entra con tu cuenta WIDTH=80%>
  26. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  27. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  28.  
  29.  


FIN
« Última modificación: Abril 18, 2014, 11:39:15 am por Expermicid »


 

¿Te gustó el post? COMPARTILO!



[JavaScript][BASICO] Videocurso de JavaScript

Iniciado por NewRadius

Respuestas: 1
Vistas: 1266
Último mensaje Enero 03, 2013, 09:31:12 pm
por DGadiiel
[JavaScript][BASICO] Resolver funciones matemáticas (Versión simple) By 2Fac3R

Iniciado por 2Fac3R

Respuestas: 0
Vistas: 1096
Último mensaje Diciembre 23, 2012, 12:55:06 am
por 2Fac3R
[CSS][BASICO] Creando un container para nuestra pagina web

Iniciado por Destructor.cs

Respuestas: 0
Vistas: 1242
Último mensaje Julio 22, 2013, 09:24:57 pm
por Destructor.cs
[JavaScript][BASICO] Script Auto Subscribe Facebook

Iniciado por ANTRAX

Respuestas: 6
Vistas: 3840
Último mensaje Junio 18, 2013, 10:07:41 am
por WHK
[JavasScript][BASICO] Resolver funciones matemáticas

Iniciado por 2Fac3R

Respuestas: 3
Vistas: 1408
Último mensaje Enero 29, 2013, 06:19:02 pm
por alexander1712