Publicado hace: 13 años

Lorem ipsum – Texto de ejemplo

Lorem ipsum es un texto usado en diseño gráfico, para hacer simulación de texto, en esos casos donde no interesa comentar/corregir el contenido, sino la diagramación/ubicación de los textos.

En este caso estoy usandolo para maquetear el HTML/CSS para algunas webs, usando algunas de las etiquetas más comunes del editor de posts de Wordpress, de esta manera puedo tener una vista previa de la presentación de los textos de las webs que voy diseñando/desarrollando.

Lorem ipsum es el texto que se usa habitualmente en diseño gráfico en demostraciones de tipografías o de borradores de diseño para probar el diseño visual antes de insertar el texto final.

El texto en sí no tiene sentido, sino que deriva de un texto de Ciceron de la lengua latina a cuyas palabras se les han eliminado sílabas o letras. El significado del texto no tiene importancia, ya que sólo es una demostración o prueba, sino que es el aspecto tipográfico y de la maquetación lo que importa.

Ejemplo de párrafo p all syntax below uses shortcodes, the content macro used in WordPress. Shortcodes converts simple, understandable and pre-defined syntax to complex HTML constructions.Ejemplo de párrafo p all syntax below uses shortcodes, the content macro used in WordPress. Shortcodes converts simple, understandable and pre-defined syntax to complex HTML constructions.Ejemplo de párrafo p all syntax below uses shortcodes, the content macro used in WordPress. Shortcodes converts simple, understandable and pre-defined syntax to complex HTML constructions.Ejemplo de párrafo p all syntax below uses shortcodes, the content macro used in WordPress. Shortcodes converts simple, understandable and pre-defined syntax to complex HTML constructions.Ejemplo de párrafo p all syntax below uses shortcodes, the content macro used in WordPress. Shortcodes converts simple, understandable and pre-defined syntax to complex HTML constructions.Ejemplo de párrafo p all syntax below uses shortcodes, the content macro used in WordPress. Shortcodes converts simple, understandable and pre-defined syntax to complex HTML constructions.Ejemplo de párrafo p all syntax below uses shortcodes, the content macro used in WordPress. Shortcodes converts simple, understandable and pre-defined syntax to complex HTML constructions. Ejemplo de span

If you wish to view the typography page, showing how to setup the various typography elements with HTML, then please go to the Ejemplo de link A.

This is an H1 Header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices. Vivamus quis lectus. Praesent eu mi. Curabitur pharetra leo sed nisl. Nunc vel nisi. Aliquam nulla. Etiam at est. Pellentesque arcu diam, tempus nec, sodales eu, ullamcorper quis, risus.

This is an H2 Header

Proin ac nunc eu nunc condimentum accumsan. Phasellus odio justo, euismod vitae, egestas a, porttitor in, urna. Maecenas vitae mauris. Donec vestibulum, nunc eu varius pharetra, massa est sagittis odio, sit amet eleifend elit dolor id tortor.

This is an H3 Header

Mauris euismod. In ac massa vitae quam tincidunt dapibus. Ut at tortor nec mi mattis blandit. Maecenas venenatis lorem at nulla. Phasellus a libero. Sed odio odio, eleifend dignissim, feugiat vel, tempor nec, ligula. Suspendisse lacinia convallis nulla. Vestibulum posuere, lacus aliquet pulvinar faucibus, tortor urna luctus diam, vitae ultrices ante magna non tellus.

This is an H4 Header

This is an H5 Header

H1

H2

H3

H4

H5

H6

Blockquote Styles

This is a blockquote, you will want to use the following formatting: [blockquote]….[/blockquote]Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a blockquote, you will want to use the following formatting: [blockquote]….[/blockquote]Praesent rutrum sapien ac felis.

This is a blockquote, you will want to use the following formatting: [blockquote]….[/blockquote]Praesent rutrum sapien ac felis. Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

This is a blockquote, you will want to use the following formatting: [blockquote]….[/blockquote]Praesent rutrum sapien ac felis.

LI Solos

uno

dos

tres

cuatro

UL LI

uno

dos

tres

OL LI

uno

dos

tres

Phasellus elementum dolor quis turpis. Vestibulum nec mi vitae pede tincidunt nonummy. Vestibulum facilisis mollis neque. Sed orci. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed euismod magna a nibh.

List Styles – Bullets

UL

Ejemplo 01
Ejemplo 02
Ejemplo 03

Ejemplo 01
Ejemplo 02
- Ejemplo 01a
- Ejemplo 02a
- Ejemplo 03a
Ejemplo 03

Ejemplo 01
Ejemplo 02
1. Ejemplo 01a
2. Ejemplo 02a
3. Ejemplo 03a
Ejemplo 03

OL

Ejemplo 01
Ejemplo 02
Ejemplo 03

Ejemplo 01
Ejemplo 02
1. Ejemplo 01
2. Ejemplo 02
3. Ejemplo 03
Ejemplo 03

Ejemplo 01
Ejemplo 02
- Ejemplo 01
- Ejemplo 02
- Ejemplo 03
Ejemplo 03

ONE	TWO	THREE
lorem ipsum dolor sit amet enot toror lorem ipsum dolor sit amet enot toror	lorem ipsum dolor sit amet enot toror lorem ipsum dolor sit amet enot toror	lorem ipsum dolor sit amet enot toror lorem ipsum dolor sit amet enot toror
lorem ipsum dolor sit amet enot toror lorem ipsum dolor sit amet enot toror	lorem ipsum dolor sit amet enot toror lorem ipsum dolor sit amet enot toror	lorem ipsum dolor sit amet enot toror lorem ipsum dolor sit amet enot toror

Info message

Successful operation message

Warning message

Error message

Notice message

Pre Example

This is a sample PRE


.post {
	background:url(images/arrow1.png) top left no-repeat; padding:60px 30px 30px 30px; font:13px/1.5 Arial,'Liberation Sans',FreeSans,sans-serif;
	min-height:500px;
	height:auto !important;
  	height:500px;
}
/*..post h1, .post h2, .post h3, .post h4, .post h5, .post h6 { color:#0052A0; margin-bottom:15px;}
.post h1 { font-size:36px;}
.post h2 { font-size:31px;}
.post h3 { font-size:24px;}
.post h4 { font-size:21px;}
.post h5 { font-size:18px;}
.post h6 { font-size:14px;}*/

.post h1 { color:#2F2C2C; font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;}
.post h1 a { text-decoration:none; color:#2F2C2C; display:block;}
.post h1 a:hover { text-decoration:underline;}
.post small { font-size:12px; color:#666666;}
.post small a { display:inline;}
/*
.post p { line-height:130%; margin-bottom:15px;}
.post p a { text-decoration:none;}
.post p a:hover { text-decoration:underline;}*/
.post .aligncenter  { margin:0 auto; display:block;}
.post .alignleft  { float:left; margin:0 15px 15px 0;} 
.post .alignright { float:right; margin:0 15px 0 15px;}

.post p, .post dl, .post hr, .post h1, .post h2, .post h3, .post h4, .post h5, .post h6, .post ol, .post ul, .post pre, .post table, .post address, .post fieldset, .post figure { margin-bottom: 15px;}
.post p{ color:#202020; text-align:justify;}
.post table { border-top:#666666 solid 1px; border-right:#666666 solid 1px;}
.post td, th { border-bottom:#666666 solid 1px; border-left:#666666 solid 1px; padding:5px;}
.post b, .post strong {	font-weight: bold; color:#666666;	}
.post img {	color: transparent;
				font-size: 0;
				vertical-align: middle;
			}
.post li {
				display: list-item;
			}
.post table {
				border-collapse: collapse;
				border-spacing: 0;
			}
.post th, .post td, .post caption {
				font-weight: normal;
				text-align: left;
				vertical-align: top;
			}
.post q {
				quotes: none;
			}
.post q:before, .post q:after {
				content: none;
			}
.post sub, .post sup, .post small {
				font-size: 75%;
			}
.post sub, .post sup {
				line-height: 0;
				position: relative;
				vertical-align: baseline;
			}
.post sub {
				bottom: -0.25em;
			}
.post sup {
				top: -0.5em;
			}
.post svg {
				overflow: hidden;
			}
.post pre, code {
				font-family: 'DejaVu Sans Mono',Monaco,Consolas,monospace;
			}
.post hr {
				-moz-border-bottom-colors: none;
				-moz-border-image: none;
				-moz-border-left-colors: none;
				-moz-border-right-colors: none;
				-moz-border-top-colors: none;
				border-color: #CCCCCC;
				border-right: 0 solid #CCCCCC;
				border-style: solid;
				border-width: 1px 0 0;
				clear: both;
				height: 0;
			}
.post h1 {
				font-size: 25px;
			}
.post h2 {
				font-size: 23px;
			}
.post h3 {
				font-size: 21px;
			}
.post h4 {
				font-size: 19px;
			}
.post h5 {
				font-size: 17px;
			}
.post h6 {
				font-size: 15px;
				margin-bottom:5px;
			}
.post ol {
				list-style: decimal outside none;
			}
.post ul {
				list-style: disc outside none;
			}
.post li {
				margin-left: 30px;
				line-height:140%;
			}
.post a { color:#0052A0;}
.post a:hover { color:#000000;}

.info, .success, .warning, .error, .validation {
  border: 1px solid;
  margin: 10px 0px;
  padding:15px 10px 15px 50px;
  background-repeat: no-repeat;
  background-position: 10px center;
}
.info {
  color: #00529B;
  background-color: #BDE5F8;
  background-image: url('../images/info.png');
}
.success {
  color: #4F8A10;
  background-color: #DFF2BF;
  background-image:url('../images/success.png');
}
.warning {
  color: #9F6000;
  background-color: #FEEFB3;
  background-image: url('../images/warning.png');
}
.error {
  color: #D8000C;
  background-color: #FFBABA;
  background-image: url('../images/error.png');
}

.notice {
  color: #6D6E6E;
  background-color: #F1F1F1;
  padding:15px;
  border:1px solid #CBC4C4;
}

ser humano

Music & Design & Photo & Bike.

Test, fail, learn, repeat.