HTML5 y CSS3
REPÚBLICA BOLIVARIANA DE VENEZUELA MINISTERIO DEL PODER POPULAR PARA LA DEFENSA UNIVERSIDAD NACIONAL EXPERIMENTAL POLITÉ
Views 116 Downloads 5 File size 307KB
Recommend stories
- Author / Uploaded
- Oscar Galindo
Citation preview
REPÚBLICA BOLIVARIANA DE VENEZUELA MINISTERIO DEL PODER POPULAR PARA LA DEFENSA UNIVERSIDAD NACIONAL EXPERIMENTAL POLITÉCNICA DE LA FUERZA ARMADA NACIONAL (UNEFANB) NÚCLEO-ANZOÁTEGUI-SEDE SAN TOMÉ
HTML5 CSS3 FACILITADOR(A):
BACHILLERES:
4TO Semestre de Ingeniería de Sistemas
¿Qué es HTML5? HTML5 (HyperText Markup Language) es la quinta revisión del lenguaje de marcado estándar que se emplea para la web. Es uno de los lenguajes de marcado más usados en todo el mundo y la razón es bastante obvia: gracias a HTML5 podemos crear la estructura de una página web. Texto, imágenes y material multimedia pueden mostrarse correctamente gracias a HTML5. Aparte de HTML5, existen otros lenguajes que son necesarios para dar formato e interactividad a un sitio, pero la estructura básica de toda página se define primero en lenguaje HTML5. Con HTML5, los navegadores como Firefox, Chrome, Explorer, Safari y más pueden saber cómo mostrar una determinada página web, saber dónde están los elementos, dónde poner las imágenes, dónde ubicar el texto. Las siglas “HyperText Markup Language”, tiene el siguiente significado: HyperText: cuyo significado es hipertexto, que no es más que un texto que enlaza con otros contenidos, que pueden ser otro texto u otro archivo. Esto es la base del funcionamiento de la web tal y como la conocemos, que no es más que páginas y recursos interconectados. Markup: que significa marca o etiqueta, ya que todas las páginas web están construidas en base a etiquetas, desde las primeras versiones hasta las últimas etiquetas de HTML5. Un ejemplo de una etiqueta HTML es la que identifica a un párrafo, que se compone de la etiqueta, el contenido de la etiqueta y el cierre del párrafo:
HOLA
. Languaje: cuyo significado es lenguaje, porque HTML es un lenguaje,es decir, tiene sus normas, tiene su estructura y una serie de convenciones que nos sirven para definir tanto la estructura como el contenido de una web.
Etiquetas HTML5
Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares < >, que tienen funciones y usos específicos y se utilizan para escribir código HTML.
Etiqueta
Función
Define un comentario
Define el tipo de documento
Define un hipervínculo
Define una abreviación
Define la información de contacto del autor / propietario del documento
Define un área dentro de un mapa de imagen
Define un artículo
Define el contenido lateral del contenedor de una página
Define contenido de sonido
Define texto en negrita
Especifica la base donde se abrirán todas las URL del documento
Aísla una parte del texto que puede tener un formato diferente del texto externo
Sobreescribe la dirección del texto
Define una sección que tiene otra fuente
Define el cuerpo del documento
Define un salto de línea
Define un botón clickeable
Se usa para dibujar gráficos en pantalla
Define el título de una tabla
Define el título de un trabajo
Define un trozo de código de programación
Especifica las propiedades de la columna para cada columna del elemento
Especifica un grupo de una o más columnas de una tabla
Define un botón command al que un usuario puede invocar
Especifica en un input una lista predefinida de opciones
Define la descripción de un ítem en una lista de definición
Define un texto que ha sido definido en un Mdocument
Define detalles adicionales que el usuario puede ver o esconder
Define el término de una definición
Define una caja o ventana de dialogo
Define una sección en un documento
Define una lista de definición
Define un término (un ítem) en una lista de definición
Define énfasis en un texto
Define el contenedor de una aplicación externa (no html)
Grupo de elementos relacionados en un formulario
Define el título para una figura
Especifica auto-contenido
Define el pie de página de un documento
Define un formulario html
a
Define encabezados o títulos
Define información acerca del documento
Define la sección de encabezado del docuemnto
Grupo de encabezado ( a )
Define un cámbio de temática a partir de una línea dibujada
Define la raíz del documento
Define una parte del texto de modo alternativo
Define un frame en línea
Define una imagen
Define un control de entrada de texto
Define texto que ha sido insertado en un documento
Define entrada del teclado
Define un campo generador de claves para formularios
Define el rótulo para un elemento
Define un título para los elementos , ,
Define un ítem de una lista
Define la relación entre un documento y un recurso externo (generalmente con hojas de estilo)
Define un mapa de imagen del cliente
Define texto resaltado o marcado
Define la lista de un menú
Define un metadato de un documento
Define una medida escalar en un rango conocido
Define un link de navegación
Define un contenido alternativo para los usuarios que no soportan scripts del client
Define un objeto embebido
Define una lista ordenada
Define un grupo de opciones relacionadas en una lista desplegable
Define una opción en una lista desplegable
Define el resultado de un cálculo
tiene algo más de significado, pero no deja de ser un párrafo a secas, sin decirte qué tipo de información va a contener ese párrafo. Hoy, la recomendación es usar otro conjunto de etiquetas que sí nos aportan un significado al contenido que engloban. Pero esto no quiere decir que las etiquetas antiguas se dejen de usar, sino que ahora tenemos otra serie de etiquetas con valor semántico, que vienen a aportar nuevas facilidades que te resumiremos en el siguiente punto. De momento, analicemos estas etiquetas nuevas con valor semántico con la estructura de una web en mente. nsistimos. Todo esto iría dentro del . ... .... ... .... ... ....
Define un párrafo
Define un parámetro para un objeto
Define texto pre-formateado
Representa el progreso de una tarea en una barra
Define una cita corta
Define que debe mostrar en navegadores que no soportan scripts de ruby
Define una pronunciación de caracteres
Define una notación de ruby
Define texto que no es correcto
Define un ejemplo de salida de un programa
Define un script del lado cliente
Define una sección de un documento
Define un drop-down list
Define texto pequeño
Define los recursos para elementos multimedia
Define una pequeña sección de un documento
Define un texto en negrita
Define un estilo para la información de un documento
Define un texto que es subíndice
Define un encabezado visible para el elemento
Define un texto que es superíndice
Define una tabla
Define el cuerpo de una tabla
Define una celda en una tabla
Define un control de entrada de múltiples líneas Agrupa los footer contenidos en una tabla
Define una celda de encabezado en una tabla
Agrupa los encabezados de una tabla
Define fecha / hora
Define un título para el documento
Define una fila en una tabla
Define texto de la pista para elementos multimedia (vídeo y audio)
Define una lista desordenada
Define una variable
Define un vídeo o película
Define un posible salto de línea
Estructura de una página web en HTML5 En HTML existe un esqueleto básico, que todos debemos de conocer porque se viene usando desde los inicios del lenguaje. Nos referimos a la conocida estructura del HEAD / BODY. Toda jerarquía de etiquetas comienza por y
dentro tenemos dos grandes bloques y . Bien, en este artículo nos vamos a adentrar en la parte del .
Hasta hace poco dentro del se colocaban etiquetas como , , , etc. pero todas las etiquetas que usábamos decían poco a aquel sistema que las leyera. ¿Qué significa ? pues simplemente que estamos colocando una «división» pero no especifica para qué se usa esa división. Quizás
Esta es la cabecera de una página o un bloque de contenido
Esta es la barra de navegación principal del sitio
Esta es una sección de contenido del bloque principal (MAIN)
Esto es un artículo del sitio
Esto sería un segundo artículo
El contiene información accesoria, que no suele añadir un valor significativo a la temática del sitio. Por ejemplo, es habitual usar para la barra lateral con una serie de banners o widgets sociales.
Esto es un pie de página
Las propias etiquetas expuestas son autoexplicativas, dado su nombre o en vista al texto que hemos colocado a su contenido. Pero ten en cuenta que su uso queda un poco en función de las necesidades del desarrollador. Por ejemplo, podría ser el pie principal de un sitio, o quizás el pie de una parte del sitio, si es que lo colocamos dentro de un . Por poner otro ejemplo, dentro de un hace entender que esa sería la barra de navegación principal, pero si la colocamos dentro de un se supone que serán enlaces de menos valor, como el típico «quienes somos», «contacto», entre otros. ¿Qué es CSS3? Es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C(World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. La idea que se encuentra detrás de desarrollo de CSS es separar la estructura de un documento de su presntacion. La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "". Diferencia entre clases y identificadores en CSS La principal diferencia entre ellos es que los identificadores tienen que ser únicos en todo el documento HTML mientras que las clases pueden repetirse todas las veces que queramos. La otra diferencia es la forma de definirlos y de utilizarlos: En HTML para indicar el identificador de una etiqueta usaremos el atributo "id", mientras que para indicar la clase usaremos "class":
En este ejemplo se asigna el identificador "capitulo2" a la etiqueta inicial. Esta etiqueta sería una sección única en todo el documento sobre la cual podemos aplicar un estilo concreto. El estilo de la clase "parrafogris" se aplicaría sobre las etiquetas "p" indicadas, y como se puede ver si ha aplicado varias veces. Otra diferencia entre identificadores y clases es la forma de definir sus estilos CSS en la hoja de estilos. Para indicar un identificador escribiremos su nombre precedido por una almohadilla "#", y para referenciar una clase usaremos como prefijo el punto ".", por ejemplo:
#identificador { /* estilos CSS */ } .clase { /* estilos CSS */ }
Por ejemplo, para indicar los estilos del ejemplo anterior, escribiríamos el siguiente código:
#capitulo2 { /* estilos CSS */ } .parrafogris { /* estilos CSS */
}
Es importante diferenciar cuando tenemos que usar la almohadilla "#" y el punto ".", los cuales solo los pondremos en la hoja de estilos y no en el código HTML. Esto es un error común y haría que los estilos no funcionasen. Es decir si escribimos ” (con “#”) o escribimos (con”.”) sería un error y no funcionaria. Los identificadores se suelen usar menos que las clases y solo para elementos específicos que se quieren diferenciar. Normalmente se aplican sobre etiquetas "neutras" como o para marcar partes de un documento y después indicar sus estilos (como por ejemplo identificar la cabecera, un logotipo, el menú principal, entre otros.).
Atributos CSS3 Atributo
Descripción
[href]
El atributo href existe en la etiqueta.
[href="#"]
El atributo href existe y su valor es igual al texto #.
[href\*="emezeta"]
[href^="https://"]
El atributo href existe y contiene el texto emezeta.
su
valor
El atributo href existe comienza por https://.
su
valor
y
[href$=".pdf"]
El atributo href existe y su valor termina por .pdf (es un enlace a un PDF).
[class~="emezeta"]
El atributo class contiene una lista de valores, que contiene emezeta.
[lang|="es"]
El atributo lang contiene una lista de valores, donde alguno empieza por es-.
Atributo existente Para empezar, podemos seleccionar los elementos que contengan un atributo concreto, como por ejemplo, los elementos con el atributo style: [style] { background: green; } Este ejemplo seleccionara todos los elementos a los que se ha insertado estilos CSS en el propio elemento HTML. Si el elento Este ejemplo seleccionaría todos los elementos a los que se le ha insertado estilos CSS en el propio elemento HTML. Si el elemento no tiene un atributo style definido, no se le aplican los estilos. Atributo con valor exacto Podemos indicar el valor exacto que deben tener los atributos para que sean seleccionados. Para ello, simplemente utilizamos el = y escribimos el texto entre comillas dobles:
a[rel="nofollow"] { background: red; } Este ejemplo selecciona los enlaces con el atributo rel a nofollow, o lo que es lo mismo, los enlaces que indican a Google que no sean seguidos, y les establece un fondo de color rojo. Atributo contiene texto En lugar de un valor específico, también podemos indicar un fragmento de texto que debe estar incluído, y que así case con varias coincidencias: [href*="emezeta"] {
background-color: orange } Integración de CCS3 y HTML5 Como hemos explicado varias veces, HTML5 permite estructurar las páginas web y las CSS3 permiten darles formato y maquetación. Hay que vincular la estructura HTML al formato y la maquetación CSS. Para hacer esto, tenemos varias posibilidades, cada una de las cuales va a responder a una funcionalidad precisa. La primera posibilidad consiste en declarar los estilos CSS directamente en el elemento HTML correspondiente, con el atributo global style. Esta posibilidad permite aplicar un estilo CSS con el menor alcance, puesto que se utiliza de manera única, y no podrá aplicarse a ningún otro elemento HTML. Este uso poco extendido resulta muy práctico para realizar excepciones a un estilo CSS más global. La segunda posibilidad consiste en integrar los estilos CSS en la página HTML, con el elemento , en el de la página correspondiente. Esta vez, el alcance es más importante, pues todos los estilos CSS definidos en esta página podrán aplicarse a todos los elementos HTML de esta página. La tercera posibilidad consiste en crear un archivo .css que contendrá todas las reglas CSS del sitio. A continuación, bastará con vincular esta hoja de estilos .css a todos los archivos .html del sitio. Esta vez, el alcance es máximo, pues todos los estilos definidos en el archivo .css podrán aplicarse a todos los elementos HTML de todas las páginas web, a todos los archivos .html. Observe que puede crear varias...
En HTML es posible agregar directamente en el código una declaración de estilo en una etiqueta determinada. Este estilo en línea se presenta del siguiente modo: Título de nivel 1 Es conveniente evitar esta forma de proceder en virtud del principio de separación entre contenido y presentación.
No obstante, puede resultar útil para dar prioridad a una propiedad de estilo respecto a la que se haya especificado en la declaración interna o externa.
Propiedades de CSS3 Principales propiedades CSS El lenguaje CSS que estamos usando actualmente es la versión 2.1 que es estándar y la 3.0 que todavía no está terminada de definir pero ya se está usando. La versión 3.0 agrega nuevas propiedades, que se suman a las anteriores. A continuación describo las principales propiedades: Font-family: Define la familia tipográfica. Es conveniente poner una lista de dos o tres tipografías separadas por coma, porque si el usuario no tiene instalada la tipografía que nosostros elegimos, el navegador opta por mostrar la siguiente que debería ser una similar, si tampoco la tiene instalada, mostrará la tipografía por defecto. Font-size: Define el tamaño de la fuente y el valor se puede escribir en pixels o en ems. En este momento se recomienda usar ems. Los dos son valores relativos, el pixel es un valor relativo a la resolución de la pantalla, pero el em es relativo al tamaño de la fuente definida por el usuario. Si el usuario no cambió la configuración, el valor por defecto de los textos en todos los navegadores es de 16px. Entonces 1em = 16px. Color: Define el color de la tipografía. Los colores se pueden escribir de 3 formas distinas: con sistema hexadecimal, por ejemplo: #FF0000 (es rojo). Con los nombres de los colores (más limitado) por ejemplo: black, red, green. O usando RGB, esta paleta permite agregar el canal alfa para hacer transparencias. Width: Define el ancho de un elemento, el valor se puede escribir en pixels, ems o porcentaje. Max-width o min-width: Definen el ancho máximo o mínimo de un elemento. Muy importante en sitios adaptables Height: Define el alto de un elemento, el valor se puede escribir en pixels, ems o porcentaje.
Max-height o min-height: Definen el alto máximo o mínimo de un elemento. Muy importante en sitios adaptables Padding: Es la distancia desde el borde de un elemento hasta su contenido. Margin: Es la distancia entre un elemento y otro (desde el borde de un elemento hacia afuera) Border: Define el borde de un elemento, su color, su estilo y grosor. Background: Define los fondos de un objeto. El fondo puede ser una imagen o un color. El color puede ser pleno o degradado. La imagen se puede repetir formando una trama (es lo que ocurre por defecto) o se puede especificar que no repita y que se coloque en determinada posición.