Modelo HTML { avanzado }

Aquí se muestra lo que podemos obtener al emplear las etiquetas HTML más frecuentes con algunas reglas CSS 2.1 y CSS 3 para mejorar el resultado.

(texto e imágenes con sombra, transparencia, bordes redondos, tipografía no estandar, resaltado de celdas, cajas y enlaces, etc...)

Todo esto se ve correctamente con las últimas versiones de los navegadores más populares: FireFox, Google Chrome, Safari, Internet Explorer y Opera .

Párrafos

Etiquetas: <p>, <br /> , <em>, <strong>, <span>, <a href="url"> ,

<sup>, <sub>, <cite>, <abbr>, <tt>, <u>, <del>, etc...


Lorem ipsum dolor sit amet, Esto es un enlace adipiscing elit. Esto está con enfatizado doble Nullam dignissim convallis est. Quisque aliquam. Esto está con enfatizado simple Donec faucibus. Nunc iaculis suscipit dui. Esto es una potencia: 28 = 256. Aquí tenemos el sulfato de aluminio: Al2(SO4)3. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
Y esto es una cita (That’s a citation). Subrayado. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Esto es un texto grande. Integer nisl purus,Esto es pequeño consequat at, commodo vitae, feugiat in, Y esto está escrito como un teletipo, todas las letras ocupan lo mismo. Morbi imperdiet augue quis tellus.

HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type Código y variable. Dinner’s at 5:00. Let’s make that 7. This línea tachada has been struck.


Tipografía "no estandar"

Tipografía "Dancing Script" de Google web fonts

Mauris venenatis dui ac libero lacinia nec egestas est viverra. Duis blandit pretium velit ut suscipit. Mauris a volutpat augue. Aliquam volutpat tempor suscipit. Curabitur placerat, neque non gravida sagittis, ipsum elit tincidunt enim, ut gravida lorem tortor at lacus.

Tipografía "Yanone Kaffeesatz" de Google web fonts

Integer pretium blandit odio; sed imperdiet lectus pretium quis. Mauris tincidunt sapien non sem egestas sed ultricies justo egestas. Sed egestas vehicula massa nec ornare? Nunc pellentesque nisl ut sapien eleifend imperdiet! Quisque nulla ipsum, tristique eu venenatis quis, cursus at arcu.

Tipografía "Bullpen3D.ttf" utilizando @font-face

Integer pretium blandit odio; sed imperdiet lectus pretium quis. Mauris tincidunt sapien non sem egestas sed ultricies justo egestas. Sed egestas vehicula massa nec ornare? Nunc pellentesque nisl ut sapien eleifend imperdiet! Quisque nulla ipsum, tristique eu venenatis quis, cursus at arcu.

Tipografía "chops___.ttf" utilizando @font-face

Cras ac orci eu nunc iaculis fermentum. Mauris ipsum tellus, suscipit ut accumsan a; congue at ligula. Mauris ac eleifend mi. Aliquam erat volutpat. Aenean et iaculis urna. Sed sollicitudin ullamcorper dapibus? Ut lorem arcu, cursus eget lobortis a, malesuada nec dolor. Morbi quam est, ullamcorper ac posuere nec, aliquam laoreet massa. Mauris faucibus urna at leo faucibus ultrices lacinia ligula malesuada? Fusce ullamcorper felis nec nisi fermentum viverra. Proin accumsan volutpat aliquam.


Niveles de títulos

Etiquetas: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5
Encabezado 6

Tipos de Listas

Etiquetas: <ol>, <ul>, <li>, <dt> y <dd>

Listas de definición

Tetraedro
Y su definición es: es un poliedro de cuatro caras. Con este número de caras ha de ser un poliedro convexo, y sus caras triangulares, encontrándose tres de ellas en cada vértice. Si las cuatro caras del tetraedro son triángulos equiláteros, iguales entre sí, el tetraedro se denomina regular.
Homotecia:
Es una transformación afín que, a partir de un punto fijo, multiplica todas las distancias por un mismo factor.

Lista ordenada

  1. List Item 1
  2. List Item 2
    1. subítem de lista A en griego
    2. subítem de lista B en griego
    3. subítem de lista C en griego
  3. List Item 3

Lista desordenada


Tabla

Etiquetas <table>, <tr>, <td>, <th>, etc...

Cabecera de la tabla
Columna 1 Columna 2 Columna 3
Fila 1 celda 11 celda 12 celda 13
Fila 2 celda 21 celda 22 celda 23
Fila 3 celda 31 celda 32 celda 33

Rayado en cebra de una tabla con CSS3 y pseudo-clase :nth-child(2n+1)

111 aaa Proin quis nunc ligula, ac mollis arcu....
222 bbb Mauris bibendum ante at est bibendum ut blandit magna vulputate.
333 ccc In a nisl mi, at feugiat nisi. Etiam vehicula convallis purus.
444 ddd Sed eget enim velit. Quisque condimentum fringilla mauris in hendrerit.
555 eee Nam consequat magna iaculis nisi bibendum viverra.
666 fff Phasellus accumsan facilisis diam, id bibendum leo sagittis sed!.

Texto preformateado

Etiquetas: <pre>, <code>

Tipográficamente no es lo mismo texto preformateado que código. Diferencias:

Preformato

Hay veces que necesitamos escribir texto tal cual aparece en ciertos documentos, con espacios y forma idénticos como este ejemplo:

“Lorem Ipsum es simplemente el texto de relleno de las imprentas.
	Al contrario del pensamiento popular,
	el texto de Lorem Ipsum no es simplemente texto aleatorio.
	Tiene sus raices en una pieza clásica de la literatura del Latin,
	que data del año 45 antes de Cristo,
	haciendo que este adquiera mas de 2000 años de antiguedad.
	La primera linea del Lorem Ipsum, "Lorem ipsum dolor sit amet..",
	viene de una linea en la sección 1.10.32
		

Código

Otras veces, necesitamos poner fragmentos de código y tenemos dos opciones: escribir código en la misma línea como por ejemplo: var pageTracker = _gat._getTracker("UA-953-1"); o en bloques de párrafo, respetando sangrías y espacios en blanco, como aquí:

	.contenedor {
		width: 640px;
		margin: 0 auto;
		padding: 20px;
		background: #fffaf4;
		border: 1px solid #dfdfdf;	
		text-align: left;
		}
		

Tabulaciones

Etiqueta: <blockquote>

En ocasiones necesitamos tabular (sangrar) un párrafo, para esto utilizaremos la etiqueta <blockquote> como puede observarse en el siguiente párrafo:

The X-48 Hybrid Wing Body, an F/A-18 used as an advanced systems testbed, a supersonic boundary layer transition experiment and gauging the effect of sonic booms on large structures—those are just some of the flight research projects being conducted by the Aeronautics Research Mission Directorate at NASA's Dryden Flight Research Center in 2011 in support of NASA aeronautics research goals.

http://www.nasa.gov/


Imágenes

Etiqueta: <img src="url" />

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac sollicitudin odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque justo tortor, cursus at molestie in, volutpat at libero.escher Nam at est velit, nec faucibus odio. Ut orci lorem, venenatis et viverra vel, bibendum et velit? Vivamus arcu enim, convallis in adipiscing et, fermentum vel urna. Donec ante turpis, fermentum at tincidunt non, egestas ac neque! Curabitur dictum lobortis ante, sit amet feugiat dolor rutrum eu. Etiam fermentum tincidunt justo eget semper. Nam convallis magna quis nunc dictum pharetra. Donec egestas magna non risus suscipit tristique. Aenean non justo nec diam accumsan faucibus vel eu quam. Phasellus et turpis nibh. Etiam sed urna non mi tempor consectetur. Cras a lacus quam. Suspendisse pretium, neque eu venenatis consectetur, nisi velit euismod dui, ac cursus dolor orci at nulla. Praesent luctus nibh in velit convallis a placerat ante cursus.

escher

Vivamus eget mi elit, in hendrerit augue. Vivamus vestibulum leo ut nisi feugiat varius. Donec placerat tincidunt ornare. Phasellus ut eleifend lectus. Maecenas porttitor lacinia commodo. Etiam at nunc leo; vel vehicula enim. Donec a ligula odio. Pellentesque velit mi, euismod convallis auctor non, viverra at felis. Ut blandit vehicula lectus, quis porttitor est tincidunt lobortis? Nam ultrices laoreet nisl ut venenatis.

Phasellus tincidunt pulvinar venenatis. Aenean felis mauris; bibendum ac vestibulum ut, lobortis eget est. Nunc ipsum nibh, auctor congue dapibus vitae, ultricies sit amet enim. Nam risus augue, sollicitudin nec pretium non, tincidunt nec mauris? In placerat justo eget turpis mattis eleifend. Maecenas viverra metus at ipsum consequat vel aliquet neque laoreet. Sed varius, augue molestie pellentesque eleifend, arcu metus vulputate nisi, in semper nulla mauris et turpis? Praesent eros magna, accumsan ut convallis non, adipiscing quis leo. Aenean arcu tellus, vulputate a fringilla laoreet, eleifend at arcu. Maecenas elit dolor, ullamcorper vitae hendrerit id, ullamcorper ut ligula.


Cajas especiales

Suspendisse orci sem, dapibus bibendum elementum non, vulputate eu turpis. Duis erat nulla, molestie et elementum non, vestibulum ac est. Suspendisse ut fringilla metus. Fusce sollicitudin cursus nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut nisl ut felis tristique ultrices. Mauris tincidunt, erat non lobortis scelerisque, nulla lacus suscipit purus, pretium pellentesque magna quam eu nulla. Sed.

Nam lobortis pulvinar sapien, vel mattis felis ultricies vel. Quisque luctus, mauris eget aliquam euismod, purus lacus pellentesque elit, vitae bibendum tellus odio egestas felis. Sed auctor neque ac risus dignissim rutrum!.

Praesent ut consequat enim. Suspendisse libero lorem, condimentum eu volutpat eleifend, mattis id nibh? Donec vel orci ut nibh feugiat hendrerit nec id lectus! Curabitur quis mollis nisi. Quisque a dolor eu.

Esto es un triángulo con CSS para nota de 1 sola línea.

Esto es una nota con borde izquierdo. Donec vel orci ut nibh feugiat hendrerit nec id lectus! Curabitur quis mollis nisi.

Utilizando algunas propiedades CSS 2.1 y 3 podemos crear cajas con aspecto de bocadillo añadiendo la denominada "cola" del bocadillo. Esto es un ejemplo.

Cuatro tipos de bordes para cajas; en la imagen sólo el superior izquierdo y el inferior derecho tienen un radio de 25px. Alternan al pasar el cursor por encima.



Galería de imágenes con CSS3 y pseudo-clase :nth-child(4n)


Código CSS de la página, dentro de una caja css con scroll vertical

Código CSS de esta página

Basada en la demo de http://borderleft.com/labs

creative commons

 

Valid XHTML 1.0 Strict ¡CSS Válido!