Calificación:
  • 1 voto(s) - 5 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Manual de lenguaje HTML (Parte III)
#1
[img]http://i.i.imgur.com/nAp1q.gif[/img]

Si te as perdido la primera parte de este tutorial, ver la Parte I AQUÍ
Si te as perdido la segunda parte de este tutorial, ver la Parte II AQUÍ



4.5.- Saltos de línea.

A partir de este momento ya no vamos a incluir la imagen del navegador. En su lugar voy a hacer un enlace para que se abra una pestaña nueva de tu navegador. Pero el proceso que se debe seguir para construir las páginas no ha cambiado:

Modificar/ampliar el código en el bloc de notas.
Guardar los cambios.
Abrir el explorador y Actualizar si es necesario.

Vamos, ahora, a incluir una nueva línea en nuestra página: Por ejemplo vamos a poner: "A mi primera página web":

[img]http://roble.pntic.mec.es/apuente/html/im/a35.png[/img]

<html>
<body bgcolor="red">
<center>
<h1>
<font color="#ffffff">
[email protected]
A mi primera pagina web
</font>
</h1>
</center>
</body>
</html>


Guardamos los cambios y comprobamos el resultado: index.html

¿Qué ha pasado? Esto no era lo previsto.

Lo que ocurre es que el salto de línea que hemos hecho en el código no lo reconocen los navegadores. Para que el salto de línea se incorpore hay que hacerlo con la etiqueta <br> del inglés break, romper. Esta etiqueta no tiene cierre.

El código quedaría así:

[img]http://roble.pntic.mec.es/apuente/html/im/a36.png[/img]

<html>
<body bgcolor="red">
<center>
<h1>
<font color="#ffffff">
[email protected]
<br>
A mi primera pagina web
</font>
</h1>
</center>
</body>
</html>


Veamos ahora el resultado: index.html

Ahora sí que es lo que queríamos.

Nota: Puedes comprobar el código que genera la página que visualizas en la ventana emergente pinchando con el botón derecho del ratón y eligiendo Ver código fuente

4.6.- Párrafos.

Cuando queremos introducir una línea en blanco, utilizamos la etiqueta <p> de párrafo. Esta etiqueta admite su correspondiente cierre </p>, aunque no es necesario.

Le voy a añadir los siguiento:

Este es mi primer trabajo.
Al principio es sencillo pero, poco a poco, se va complicando.

[img]http://roble.pntic.mec.es/apuente/html/im/a37.png[/img]

<html>
<body bgcolor="red">
<center>
<h1>
<font color="#ffffff">
[email protected]
<br>
A mi primera pagina web
</font>
</h1>
</center>
<p>
Este es mi primer trabajo.
<br>
Al principio es muy sencillo pero, poco a poco, se va a ir complicando.
</body>
</html>


Veamos ahora el resultado: index.html

Si queremos separar más no es suficiente repetir la etiqueta <p>. Hay que unir las dos etiquetas y repetir ambas:

[img]http://roble.pntic.mec.es/apuente/html/im/a38.png[/img]

<html>
<body bgcolor="red">
<center>
<h1>
<font color="#ffffff">
[email protected]
<br>
A mi primera pagina web
</font>
</h1>
</center>
<p><br>
<p><br>
<p><br>
<p><br>
Este es mi primer trabajo.
<br>
Al principio es muy sencillo pero, poco a poco, se va a ir complicando.
</body>
</html>


Veamos ahora el resultado: index.html

*Recuerda que puedes ir viendo el código fuente de la página.

Existe otra posibilidad: Consiste en combinar la etiqueta de apertura de párrafo con la de cierre escribiendo dentro un caracter invisible: &nbsp; (non breaking space):

[img]http://roble.pntic.mec.es/apuente/html/im/a39.png[/img]

<html>
<body bgcolor="red">
<center>
<h1>
<font color="#ffffff">
[email protected]
<br>
A mi primera pagina web
</font>
</h1>
</center>
<p>&nbsp;</p>
<p>&nbsp;</p>
Este es mi primer trabajo.
<br>
Al principio es muy sencillo pero, poco a poco, se va a ir complicando.
</body>
</html>


Veamos ahora el resultado: index.html

La cadena &nbsp; también se puede utilizar para añadir un espacio en blanco extra a la separación entre dos palabras, repitiéndolo cuantas veces haga falta. Aunque, su definición inicial, era para añadir un espacio de separación entre dos palabras "que no se pueda romper" caiga, por las configuraciones de pantalla diferenciadas, donde caiga.

Ver la cuarta parte AQUÍ.
Si te as perdido la primera parte de este tutorial, ver la Parte I AQUÍ
Si te as perdido la segunda parte de este tutorial, ver la Parte II AQUÍ


Creado por: DiosOne


FUENTE: Tutorial INDEXhn
España 
Twitter Web 
[Imagen: osxwaKU.gif]
WWW
#2
Buena 3 parte es banstante util aprender con pequeños tutoriales
#3
(01-04-2013, 11:04 AM)global2013 escribió: Buena 3 parte es banstante util aprender con pequeños tutoriales

gracias amigo, me alegra que te haya servido Sonrisa (Y)
España 
Twitter Web 
[Imagen: osxwaKU.gif]
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Duda] Lenguaje GML manuelxd1010 6 230 22-07-2018, 07:08 AM
Último mensaje: AbnerTorres
  lenguaje de programacion. easy english 3 150 05-03-2018, 09:47 AM
Último mensaje: efbsfcd
Sonrisa Login->html+js+ajax+php wpadilla 2 299 05-11-2017, 12:39 PM
Último mensaje: piensaengrande
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 27 1,070 21-10-2017, 01:47 AM
Último mensaje: ReyNexo23
  [Duda] Qué lenguaje me recomiendan para empezar Backend? Kamasado 5 358 03-07-2017, 05:42 AM
Último mensaje: ArtuGar
  Plantillas HTML Responsive Free Profesionales gassip 16 817 13-06-2017, 03:45 AM
Último mensaje: gassip
  lenguaje de programacion. easy english 5 367 11-06-2017, 03:05 AM
Último mensaje: mispracticas2009
Música [Aporte] Reproductor de audio html djsmokingcr 11 776 02-05-2017, 03:04 AM
Último mensaje: gassip
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 338 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Expandir etiquetas HTML en documento .php con EMMET gassip 2 450 18-11-2016, 07:28 PM
Último mensaje: DaveNPlay



Usuarios navegando en este tema: 1 invitado(s)