SlideShare una empresa de Scribd logo
3 FORMAS DE INSERTAR
ESPACIOS EN HTML
ARROBA ANDREA
VASQUEZ ANGIE
“Espacio sin salto de línea"  
HTML contrae varios espacios en uno solo.
Escribe   o   para crear un espacio que se
muestre siempre. Si quieres insertar un espacio en blanco
más amplio, usa este código varias veces. Este es un ejemplo
de lo que se llama "entidad de caracteres": un código que
hace referencia a un carácter que no se puede escribir con el
teclado. Se llama porque evita que se inserte justamente un
salto de línea en esa ubicación.
Inserta espacios en blanco de distinta
amplitud.
 
(Del inglés, "espacio ene") su nombre proviene
del bloque "N" de las imprentas, el espacio
"ene" es la amplitud de dos espacios
normales.
 
Espacio "eme", aproximadamente cuatro
espacios normales.
Simula una tabulación con espacios sin salto de línea. Una manera de insertar sangría a un
párrafo es insertar varios espacios sin salto de línea seguidos
<pre>
El Elemento HTML <pre> (o Texto HTML
Preformateado) representa texto preformateado.
Todo el texto que pongas entre las
etiquetas <pre></pre> se mostrará exactamente
como lo escribas.
Texto preformateado
Una forma de asegurarnos de que el texto
aparezca en el navegador tal cual ha sido
insertado dentro del código, es utilizando las
etiquetas <pre> y </pre>.
Utilizando estas etiquetas podemos tener la
seguridad de que en el navegador se
mostrarán todos los espacios en blanco que
se inserten en el texto.
Se podría crear una imagen con él e insertarla
en el documento, pero este es un dibujo hecho
con caracteres y podría aprovecharse para que
pudiese verse también con navegadores que
trabajan en modo texto como Lynx. Algo
importante en este caso ya que interesa que
TODO el mundo vea la firma, además de que
el tenerla como texto hace más fácil su
modificación.
Si no usamos la etiqueta de texto
preformateado la figura construida con
caracteres se convertirá en algo
ilegible.
El nombre asignado a esta etiqueta
proviene de la palabra "PREformateado"
(o PREformatted en inglés) y su función
es mantener todo formateado manual que
sea hecho en el texto escrito entre la
instrucción de inicio (<PRE>) y la
instrucción de fin (</PRE>).
El inconveniente de esta etiqueta es que
entre las etiquetas <pre> y </pre> no se
pueden incluir las etiquetas <img> (para
incluir imágenes), <object> (para incluir
objetos como
animaciones), <big>, <small>, <sub> ni <sup>
Sin embargo esta tag
convertirá el texto afectado a
fuente monoespaciada
(posiblemente Courier).
COURIER
<br></br>
Sirve para marcar el fin de la línea de texto actual. Puedes crear
líneas en blanco usando varias etiquetas <br>.
BIBLIOGRAFIA
https://developer.mozilla.org/es/docs/Web/HTML/Elemento/
pre
http://www.aulaclic.es/html/t_3_2.htm
http://manual-xhtml.blogspot.com/2006/05/texto-
preformateado.html
https://www.ibiblio.org/pub/linux/docs/LuCaS/Manuales-
LuCAS/doc-curso-html/doc-curso-html/x1129.html
http://www.webestilo.com/html/cap4c.phtml
http://es.wikihow.com/insertar-espacios-en-HTML

Más contenido relacionado

La actualidad más candente

Modelo entidad
Modelo entidadModelo entidad
Presentacion Java
Presentacion JavaPresentacion Java
Presentacion Java
maeusogo
 
Modelo relacional
Modelo relacionalModelo relacional
Modelo relacional
gerardo_gauna
 
Colas en programacion
Colas en programacionColas en programacion
Colas en programacion
Luis Igoodbad
 
Diagramas de flujo
Diagramas de flujoDiagramas de flujo
Diagramas de flujo
Salvador Fernández Fernández
 
Sistema de interconexion interna
Sistema de interconexion internaSistema de interconexion interna
Sistema de interconexion interna
Jairo Quiroz Cabanillas
 
Procesos e Hilos
Procesos e HilosProcesos e Hilos
Procesos e Hilos
Luis Feliciano
 
Cuadro comparativo algoritmos de ordenamiento
Cuadro comparativo algoritmos de ordenamientoCuadro comparativo algoritmos de ordenamiento
Cuadro comparativo algoritmos de ordenamiento
Lutzo Guzmán
 
Relaciones
RelacionesRelaciones
Mapa Conceptual de Grafos
Mapa Conceptual de GrafosMapa Conceptual de Grafos
Mapa Conceptual de Grafos
Sandra Biondi
 
Vistas en mySql
Vistas en mySqlVistas en mySql
Vistas en mySql
Eduardo Ed
 
Presentacion algoritmos
Presentacion algoritmosPresentacion algoritmos
Presentacion algoritmos
aralylopez88
 
Metodo de busqueda
Metodo de busquedaMetodo de busqueda
Metodo de busqueda
Robert Rivero
 
Tipos de datos en programacion
Tipos de datos en programacionTipos de datos en programacion
Tipos de datos en programacion
Alfonso
 
1.4 software numerico
1.4 software numerico1.4 software numerico
1.4 software numerico
morenito9001
 
Pilas y colas
Pilas y colasPilas y colas
Pilas y colas
arrietaevelio
 
Estructura de Datos - Unidad 6 Metodos de busqueda
Estructura de Datos - Unidad 6 Metodos de busquedaEstructura de Datos - Unidad 6 Metodos de busqueda
Estructura de Datos - Unidad 6 Metodos de busqueda
José Antonio Sandoval Acosta
 
Ejercicio 1 diagrama de flujo
Ejercicio 1 diagrama de flujoEjercicio 1 diagrama de flujo
Ejercicio 1 diagrama de flujo
lisvancelis
 
Estructuras de seleccion
Estructuras de seleccionEstructuras de seleccion
Estructuras de seleccion
Clariza
 
Estructuras de control en Visual Basic
Estructuras de control en Visual BasicEstructuras de control en Visual Basic
Estructuras de control en Visual Basic
Vane Borjas
 

La actualidad más candente (20)

Modelo entidad
Modelo entidadModelo entidad
Modelo entidad
 
Presentacion Java
Presentacion JavaPresentacion Java
Presentacion Java
 
Modelo relacional
Modelo relacionalModelo relacional
Modelo relacional
 
Colas en programacion
Colas en programacionColas en programacion
Colas en programacion
 
Diagramas de flujo
Diagramas de flujoDiagramas de flujo
Diagramas de flujo
 
Sistema de interconexion interna
Sistema de interconexion internaSistema de interconexion interna
Sistema de interconexion interna
 
Procesos e Hilos
Procesos e HilosProcesos e Hilos
Procesos e Hilos
 
Cuadro comparativo algoritmos de ordenamiento
Cuadro comparativo algoritmos de ordenamientoCuadro comparativo algoritmos de ordenamiento
Cuadro comparativo algoritmos de ordenamiento
 
Relaciones
RelacionesRelaciones
Relaciones
 
Mapa Conceptual de Grafos
Mapa Conceptual de GrafosMapa Conceptual de Grafos
Mapa Conceptual de Grafos
 
Vistas en mySql
Vistas en mySqlVistas en mySql
Vistas en mySql
 
Presentacion algoritmos
Presentacion algoritmosPresentacion algoritmos
Presentacion algoritmos
 
Metodo de busqueda
Metodo de busquedaMetodo de busqueda
Metodo de busqueda
 
Tipos de datos en programacion
Tipos de datos en programacionTipos de datos en programacion
Tipos de datos en programacion
 
1.4 software numerico
1.4 software numerico1.4 software numerico
1.4 software numerico
 
Pilas y colas
Pilas y colasPilas y colas
Pilas y colas
 
Estructura de Datos - Unidad 6 Metodos de busqueda
Estructura de Datos - Unidad 6 Metodos de busquedaEstructura de Datos - Unidad 6 Metodos de busqueda
Estructura de Datos - Unidad 6 Metodos de busqueda
 
Ejercicio 1 diagrama de flujo
Ejercicio 1 diagrama de flujoEjercicio 1 diagrama de flujo
Ejercicio 1 diagrama de flujo
 
Estructuras de seleccion
Estructuras de seleccionEstructuras de seleccion
Estructuras de seleccion
 
Estructuras de control en Visual Basic
Estructuras de control en Visual BasicEstructuras de control en Visual Basic
Estructuras de control en Visual Basic
 

Similar a Agregar espacios en html

Html – básico 1
Html – básico 1Html – básico 1
Html – básico 1
Marte Adamín Espejo Campa
 
Manual html
Manual htmlManual html
Manual html
Marcos Rozze
 
Inf2-exc-1-diego alvarez
Inf2-exc-1-diego alvarezInf2-exc-1-diego alvarez
Inf2-exc-1-diego alvarez
Diego Alvarez Rodriguez
 
Trucos de word
Trucos de wordTrucos de word
Trucos de word
Erika Gaitan
 
Trucos para word
Trucos para wordTrucos para word
Trucos para word
Erika Gaitan
 
Html doc. descargado (reparado)
Html doc. descargado (reparado)Html doc. descargado (reparado)
Html doc. descargado (reparado)
GEEKS - Ventas y Servicios
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
Anchelho Shanghashy
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
retro2011brandon
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
emded
 
Clase 1
Clase 1Clase 1
Clase 1
sinaibucio
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Codigos de html mitzi inf 1
Codigos de html mitzi inf 1Codigos de html mitzi inf 1
Codigos de html mitzi inf 1
Mitzi Melina Garcia Hernandez
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
retro2011brandon
 
emded/Retro2011brandon
emded/Retro2011brandonemded/Retro2011brandon
emded/Retro2011brandon
retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
retro2011brandon
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
emded
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
albafa1995
 

Similar a Agregar espacios en html (20)

Html – básico 1
Html – básico 1Html – básico 1
Html – básico 1
 
Manual html
Manual htmlManual html
Manual html
 
Inf2-exc-1-diego alvarez
Inf2-exc-1-diego alvarezInf2-exc-1-diego alvarez
Inf2-exc-1-diego alvarez
 
Trucos de word
Trucos de wordTrucos de word
Trucos de word
 
Trucos para word
Trucos para wordTrucos para word
Trucos para word
 
Html doc. descargado (reparado)
Html doc. descargado (reparado)Html doc. descargado (reparado)
Html doc. descargado (reparado)
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Clase 1
Clase 1Clase 1
Clase 1
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Codigos de html mitzi inf 1
Codigos de html mitzi inf 1Codigos de html mitzi inf 1
Codigos de html mitzi inf 1
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
emded/Retro2011brandon
emded/Retro2011brandonemded/Retro2011brandon
emded/Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 

Último

La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
NoraRoberts5
 
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
EmilyEsmeraldaQuispe
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
Kevin Aguilar Garcia
 
Diapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptxDiapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptx
erick502105
 
Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
LuisAlbertoCordovaBa
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
al050121024
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
cpadua713
 
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente CruzattSEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
vicenteariana54
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
jorgejhonatanaltamir1
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
ruthechepurizaca
 
PRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS YPRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS Y
WillyBernab
 

Último (11)

La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
La revolución de Netflix redefiniendo las películas, la televisión, el arte y...
 
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docxFICHA DE EDUCACIÓN RELIGIOSA  17 DE CTUBRE LA  oracion.docx
FICHA DE EDUCACIÓN RELIGIOSA 17 DE CTUBRE LA oracion.docx
 
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNETCOMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
COMUNIDADES DE APRENDIZAJE EN EL CURSO DE APLICACIONES PARA INTERNET
 
Diapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptxDiapositiva Herramientas Web, Tema Web 3.0.pptx
Diapositiva Herramientas Web, Tema Web 3.0.pptx
 
Oración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docxOración a Pomba Gira María Padilha .docx
Oración a Pomba Gira María Padilha .docx
 
Análisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de ArtesAnálisis de Crowdfunding con el maestro Tapia de Artes
Análisis de Crowdfunding con el maestro Tapia de Artes
 
APLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptxAPLICACIONES DE INTERNET-INFORMATICA.pptx
APLICACIONES DE INTERNET-INFORMATICA.pptx
 
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente CruzattSEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
SEGURIDAD INFORMATICA- Ariana Vicente Cruzatt
 
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidadESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
ESTUDIANTES BENEFICIARIOS que se suman a los beneficios de la universidad
 
SLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajasSLIDESHARE, qué es, ventajas y desventajas
SLIDESHARE, qué es, ventajas y desventajas
 
PRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS YPRESENTACION TEMA COMPUESTO AROMATICOS Y
PRESENTACION TEMA COMPUESTO AROMATICOS Y
 

Agregar espacios en html

  • 1. 3 FORMAS DE INSERTAR ESPACIOS EN HTML ARROBA ANDREA VASQUEZ ANGIE
  • 2.
  • 3. “Espacio sin salto de línea" &nbsp; HTML contrae varios espacios en uno solo. Escribe &nbsp; o &#160; para crear un espacio que se muestre siempre. Si quieres insertar un espacio en blanco más amplio, usa este código varias veces. Este es un ejemplo de lo que se llama "entidad de caracteres": un código que hace referencia a un carácter que no se puede escribir con el teclado. Se llama porque evita que se inserte justamente un salto de línea en esa ubicación.
  • 4. Inserta espacios en blanco de distinta amplitud. &ENSP; (Del inglés, "espacio ene") su nombre proviene del bloque "N" de las imprentas, el espacio "ene" es la amplitud de dos espacios normales. &EMSP; Espacio "eme", aproximadamente cuatro espacios normales.
  • 5. Simula una tabulación con espacios sin salto de línea. Una manera de insertar sangría a un párrafo es insertar varios espacios sin salto de línea seguidos
  • 6. <pre> El Elemento HTML <pre> (o Texto HTML Preformateado) representa texto preformateado. Todo el texto que pongas entre las etiquetas <pre></pre> se mostrará exactamente como lo escribas.
  • 7. Texto preformateado Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código, es utilizando las etiquetas <pre> y </pre>. Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los espacios en blanco que se inserten en el texto.
  • 8. Se podría crear una imagen con él e insertarla en el documento, pero este es un dibujo hecho con caracteres y podría aprovecharse para que pudiese verse también con navegadores que trabajan en modo texto como Lynx. Algo importante en este caso ya que interesa que TODO el mundo vea la firma, además de que el tenerla como texto hace más fácil su modificación.
  • 9. Si no usamos la etiqueta de texto preformateado la figura construida con caracteres se convertirá en algo ilegible.
  • 10. El nombre asignado a esta etiqueta proviene de la palabra "PREformateado" (o PREformatted en inglés) y su función es mantener todo formateado manual que sea hecho en el texto escrito entre la instrucción de inicio (<PRE>) y la instrucción de fin (</PRE>).
  • 11. El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir las etiquetas <img> (para incluir imágenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup>
  • 12. Sin embargo esta tag convertirá el texto afectado a fuente monoespaciada (posiblemente Courier). COURIER
  • 13. <br></br> Sirve para marcar el fin de la línea de texto actual. Puedes crear líneas en blanco usando varias etiquetas <br>.