SEMINARIO DE DQL CON Y MYSQL · 12. Introducción a @font-face de CSS: Fuentes en CSS 3. Sintaxis y...
33
SEMINARIO DE DQL CON PHP Y MY SQL
Transcript of SEMINARIO DE DQL CON Y MYSQL · 12. Introducción a @font-face de CSS: Fuentes en CSS 3. Sintaxis y...
SEMINARIO DE DQL CON PHP Y MYSQL
Índice del Seminario
• Diseño en HTML y CSS
– Tipología de los sitios web.
– La estructura de las paginas.
– Etiquetas y atributos: definición.
– Elementos HTML Fondos, CSS, textos, imagen, enlaces.
– Listas.
DISEÑO EN HTML Y CSS
LISTA DE TEMAS
• Table
• Image
• Atributos
• Div
• Span
Diseño en HTML y CSS
• Ejemplo
Diseño en HTML y CSS
Elementos HTML - Tabla
TABLA
<table> </ table>Crea una tabla<tr> </ tr>marcha cada fila en una tabla<td> </ td>Pone en marcha cada celda de una fila<th> </ th>Pone en marcha la cabecera de la tabla (una celda normal, con negrita, texto centrado)
Elementos HTML - ImageIMAGEN
• <img src="name">Agrega una imagen
• <img src="name“ alt=“descripcion”>
Se utiliza para describir el contenido de la imagen hasta 1024 caracteres.
• <img src="name" align=?>Alinea una imagen: izquierda, derecha, centro;, superior, medio fondo
• <img src="name" border=?>Ajusta tamaño del borde alrededor de una imagen
• <img src="name“ longdesc=“indica una direccion para mas información de la imagen”
Elementos HTML - DIVEl elemento div es un contenedor genérico sin un significado semántico en particular. Se utiliza comúnmente en el desarrollo de documentos con propósitos estilísticos, en conjunto con los atributos style y class. También puede resultar útil para proveer atributos comunes a los elementos contenidos por el, como por ejemplo lang o title.
Los atributos más importantes del div:
• id - define una id para hacer referencia el div vía javascript
• title - muestra un titulo del elemento
• style - define estilo vía CSS inline
• height - altura del div. Es recomendable usar CSS
• width - ancho del div. Es recomendable usa CSS
Elementos HTML - DIVEjemplo con div <html>
<head>
<meta charset="utf-8">
<title>Ejemplo etiqueta div - aprenderaprogramar.com</title>
</head>
<body>
<div style="border: 1px solid red;">
Cabecera de la página.
</div>
<div style="border: 1px solid green;">
Cuerpo de la página.
</div>
<div style="border: 1px solid blue;">
Pie de la página
</div>
</body>
</html>
Elementos HTML - DIV
Elementos HTML - SpanEl elemento span es un contenedor genérico sin un significado semántico en particular. El elemento span está diseñado para contener líneas simples de texto únicamente. Para bloques más grandes de contenido usa el elemento div en su lugar.
Ejemplo:
<h1>Pintando el arcoíris</h1>
<p>Chicos, esta vez usaremos los siguientes colores: <span style="color: #ed1b24">rojo</span>, <span style="color: #d9cc00">amarillo</span>, <span style="color: #00a3e8">azul</span>, <span style="color: #a349a3">violeta</span>, <span style="color: #ff7f26">naranja</span>, <span style="color: #a1cc1b“ lang=“en”>green</span> e <span style="color: #5701ae">índigo</span>. </p>
Elementos HTML - Span<html>
<head>
<meta charset="utf-8">
<title>Ejemplo etiqueta span - aprenderaprogramar.com</title>
</head>
<body>
<div style="text-align: center; font-size: 60px; border: 1px solid red;">
Cabecera
<span style="color: green;">de</span> la <span style="color: orange;"> página</span>.
</div>
<div style="border: 1px solid green;">
Cuerpo de la página.
</div>
<div style="border: 1px solid blue;"> Pie de la página </div>
</body>
</html>
Elementos HTML
Elementos HTML -AtributosAtributos que se presentan frecuentemente en HTML
- Id: Identifica de manera única a cada elemento dentro de un documento HTML.
- Class: determina la clase CSS que afectara al elemento.
- Style: determina de manera directa las propiedades CSS que afectarán al elemento.
- Title: añade un titulo al elemento. Esto es de utilidad para mejorar la accesibilidad del documento.
Los atributos Id y class pueden contener letras, números, guiones medios y bajos como valor, pero no pueden comenzar con un numero.
Atributos de Idioma
- Lang: indica el idioma del elemento.
- Xml:Lang indica el idioma del elemento pero con mayor prioridad.
- Dir: indica la dirección del texto , es decir se lo utiliza con idiomas que no se escriben de izquierda a derecha.
Elementos HTML - AtributosAtributos dinámicos
Se encuentran en este grupo a aquellos atributos que son los encargados de
exhibir los efectos y animaciones de las paginas.
- Onclick: establece la accion que se va a realizar cuando se haga un clic
sobre el elemento.
- Ondbclick: cuando se hace un doble click sobre el elemento.
- Onmousedown: se ejecuta cuando se detecta el boton del mouse
presionado.
- Onmouseup: se ejecuta cuando detecta que el boton fue soltado.
- Onmouseover: establece cuando se detecta que el cursor se situa sobre
el elemento.
Elementos HTML - Atributos- Onmousemove: establece la accion cuando se detecta que el cursor se
encuentra en movimiento sobre el elemento.
- Onmouseout: establece la accion cuando el cursor abandona el
elemento.
- Onkeypress: se ejecuta cuando se presiona una tecla del teclado.
- Onkeydown: se ejecuta cuando se detecta que esta pulsada la tecla.
- Onkeyup: se ejecuta cuando la tecla fue soltada.
Estos atributos son utilizados cuando se utilizan codigo javascript en el
documento HTML, lo cual hace posible la iteraccion del usuario con el
mismo.
Elementos HTML - AtributosAtributos de selección
Nos permiten asignar acciones que se realizaran en cada caso cuando se
encuentre el foco del elemento.
- AccesKey: establece una tecla de acceso rápido a un elemento.
- TabIndex: establece el orden de tabulación del documento su valor
oscila de 0 a 32.767.
- OnFocus: se ejecuta la accion cuando se detecta el foco sobre el
elemento.
- OnBlur: se ejecuta cuando se detecta que el elemento ha perdido el
foco.
El TabIndex exhibe su mayor funcionalidad cuando se trabajo sobre
formularios de login o de registro.
Elementos HTML
Elementos HTMLEjemplo con div de dos columnas<html>
<head> <title>pagina con div</title>
</head>
<body>
<div style = "display: table; margin-left: auto; margin-right: auto;
width: 500px; border:0; ">
<div style = "height: 45px; width: 500px;">Cabecera</div>
<div style = "float: left; height: 75px; width: 150px;"> <p>MENU PRINCIPAL</p>
</div>
<div style = "float: right; height: 75px; width: 350px;"><p>PAGINA PRINCIPAL</p></div>
<div style = " clear: both; background-color:#33FF00; <!-- aqui el cursor lo hare una cruz-->cursor:crosshair; text-align:center; height: 35px; width: 500px;">
<p>PIE DE PAGINA</p></div>
</div>
</body>
</html>
CSS -CASCADING
STYLE SHEETS
Elementos HTML - CSSEl nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets,
del que toma sus siglas. CSS 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.
La idea que se encuentra detrás del desarrollo de CSS es separar la
estructura de un documento de su presentación.
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 "<style>".
Elementos HTML - CSS¿CÓMO FUNCIONA?
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los
elementos en los documentos estructurados, y que forman la sintaxis de las
hojas de estilo. Cada regla consiste en un selector y una declaración, esta
última va entre corchetes y consiste en una propiedad o atributo, y un valor
separados por dos puntos.
Ejemplo:
h2 {color: green;}
h2 ---> es el selector
{color: green;} ---> es la declaración
color ---> es la propiedad o atributo
green ---> es el valor
Elementos HTML - CSSCARACTERÍSTICAS
1. Atributo gradiente de colores en borde con CSS y Firefox: Posibilidad de
definir un gradiente de color en el borde de los elementos con CSS, en
un atributo no estándar de Firefox.
2. Bordes redondeados en CSS 3: Las características de CSS 3 incluyen
bordes redondeados, a través del atributo border-radius, que define la
curvatura que debe tener el borde del elemento.
3. Múltiples imágenes de fondo con CSS: Cómo conseguir que un
elemento de la página tenga varias imágenes de fondo a la vez, con CSS
básico y con características de CSS 3.
Elementos HTML - CSS4. Colores RGBA: Veremos qué son los colores RGBA y su notación, que se
incluyen en la especificación de Hojas de Estilo en Cascada CSS 3.
5. Word-wrap: Una propiedad de CSS 3 que sirve para romper las palabras
que son demasiado largas y no caben enteras por la anchura de una
caja.
6. Textos multi-columna: CSS 3 incorpora nuevos atributos para que el
navegador se encargue de producir texto multicolumna, es decir, que
maquete directamente el texto en varias columnas sin tener que hacer
nosotros nada.
7. Bordes con imágenes: El atributo border-image hace posible la
utilización de imágenes como bordes de los elementos de la página, sin
código HTML especial, simplemente con hojas de estilo.
Elementos HTML - CSS8. Sombras con box-shadow: Crear sombras en CSS3 con el atributo box-shadow.
Por fin podremos aplicar sombras a los elementos de la página, sin usar
imágenes, Javascript ni nada extra, simplemente con un atributo de CSS 3.
9. Resplandor exterior: Cómo realizar un elemento que tenga un resplandor
exterior con CSS3 y la propiedad box-shadow.
10. Propiedad background-origin: La propiedad de CSS 3 background-origin permite
decidir la posición de la imagen de fondo con respecto al borde, padding o el
contenido del elemento.
11. Atributos overflow-x y overflow-y: Descripción de los atributos de CSS3
overflow-x y overflow-y, que sirven para definir cómo renderizar un contenido
cuando sobrepasa los límites de un contenedor en la horizontal o vertical.
Elementos HTML - CSS12. Introducción a @font-face de CSS: Fuentes en CSS 3. Sintaxis y
principales características de la regla CSS @font-face, que nos permite
utilizar cualquier tipografía en una página web.
13. Sombras en el texto con text-shadow de CSS: Cómo aplicar sombras y
otros efectos en los textos con CSS y el atributo text-shadow.
Elementos HTML - CSSTres tipos de estilos
Hoja de Estilo Externa: La Hoja de Estilo Externa se almacena en un archivo diferente
al del archivo con el código HTML al cal estar vinculado a través del elemento link,
que debe ir situado en la sección head. Es la manera de programar ms eficiente, ya
que separa completamente las reglas de formato para la página HTML de la
estructura básica de la página.
Hoja de Estilo Interna: La Hoja de Estilo Interna está incorporada a un documento
HTML, a través del elemento style dentro de la sección head, consiguiendo de esta
manera separar la información del estilo del código HTML.
Estilo en Línea: El Estilo en Línea sirve para insertar el lenguaje de estilo
directamente dentro de la sección body con el elemento style. Sin embargo, este
tipo de estilo no se recomienda pues se debe intentar siempre separar el contenido
de la presentación.
Elementos HTML - CSSLas hojas de estilo CSS son un conjunto reglas que enumeran en un fichero .css y que describenel aspecto que deben tener los diferentes elementos HTML de una página.
Lo interesante de esto es que funcionan con una filosofía de patrones o plantillas, es decir, noes necesario especificar cada uno de los elementos, sino que se pueden definir reglas comoestas dos:
“Los títulos de nivel 1 y 2 han de ser de color negro y un tamaño de fuente de 16 y 14 pixelesrespetivamente.”
“El texto de los párrafos están alineados a la izquierda, tienen un tamaño de fuente de 12pixeles y un color gris oscuro.”
Elementos HTML - CSSPropiedades basicas
1 Maquetación básica
• width: Ancho de un elemento.
• height: Alto de un elemento.
• vertical-align: Alineamiento vertical dentro de un elemento.
• margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por lado(arriba, abajo, izquierda, derecha).
• padding: Relleno interior que se añade en los bordes del A diferencia de margin, cuentapara el tamaño del elemento.
• float: Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa en elposicionamiento flotante de CSS. El tema del posicionamiento en CSS no es trivial yconviene estudiar cómo funciona antes de usar esta propiedad.
Elementos HTML - CSSPropiedades básicas2. Fuentes y texto
• font-family: Tipo de letra
• font-size: Tamaño de letra
• font-weight: Peso (normal, negrita, …)
• font-style: Estilo (normal, cursiva, …)
• text-decoration: “Decoraciones” como subrayado, tachado, etc.
• text-align: Alineación del texto (izquierda, derecha, etc.)
• text-transform: Mostrar un texto en mayúsculas, minúsculas o la primera letra de cadapalabra en mayúsculas.
3. Color y fondos
• color: Color del elemento. Se puede especificar en diferentes formatos como palabraspredefinidas (red, green, etc.) RGB o como valor hexadecimal.
• background-color: Color del fondo del elemento.
• background-image: Permite especificar una imagen de fondo.
• background-repeat: Permite usar una imagen a modo de mosaico en diferentesmodalidades.
• box-shadow: Crear un efecto de sombra para un elemento.
Elementos HTML - CSSPropiedades basicas
4. Listas
• list-style-image: Usar la imagen especificada como viñeta para la lista.
• list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista.
5. Bordes
• border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo delínea, etc.)
• border-color: Color del borde.
• border-style: Diferentes estilos para el borde (sólido, puntos, etc.)
• border-radius: Permite crear esquinas redondeadas para un elemento..”
APÉNDICE
