Post on 08-Mar-2016
description
Fundamentos aplicados de HTML
HTML? Hyper Text Markup Language
Lenguaje de marcado: porque indica qu con6ene una pgina web porque u5liza un conjunto de e6quetas para marcar
Documento HTML E6quetas (marca qu se muestra y cmo, cundo y dnde lo hace)
Texto plano (contenido textual y atributos o valores que tomar el marcado de las e5quetas)
En navegador, documento HTML = pgina web
E6quetas HTML
En pares ( y ) Nombre (marcado: funcin, orden, elemento) entre y .
Esta abre el marcado Esta cierra el marcado No se muestran al usuario; marcan lo que se muestra al usuario
Sintaxis HTML
Estructura documento HTML
, , , , ,
Encabezado 1 Prrafo
Elementos Son las funciones del documento HTML Denidos por e6quetas de apertura y cierre:
contenido del elemento Tipos:
Marcado de contenidos: la mayora de los elementos HTML, marcan cmo se muestra el contenido al usuario
Elementos vacos: las excepciones aunque muy u5lizadas-, cumplen funcin en el documento, no marcan estrictamente contenido, su contenido es vaco; por ejemplo, salto de lnea, imagen U5lizan nicamente la e5queta de entrada (, )
Pueden incorporar valores (atributos) a las funciones
Atributos
Valores adicionales que se aplican a un elemento (referencias, invocacin de fuentes, parmetros espaciales)
Se incluyen siempre en la e6queta de apertura, tras el nombre de la e5queta con un espacio; se iden5can por su nombre, el signo igual y su valor entrecomillado :
Etiquetas y atributos HTML
Funciones bsicas
Encabezados , , , , ,
Prrafos Contenido del prrafo Salto de lnea: (elemento vaco)
Links
Formato de texto Fuente: hZp://www.w3schools.com/html/html_forma_ng.asp
Secciones y maquetacin Elementos que agrupan otros elementos HTML: En un bloque: bloque En una lnea: lnea
Funcin: marcar los elementos y contenidos de la seccin (en conjunto, a varias partes o a partes determinadas) mediante atributos
DIV Empleado para maquetar el documento (layouts) Evita el uso de tablas para maquetar (las tablas deben
restringirse a ordenar datos)
SPAN Fundamentalmente asociado a atributos de es5lo de los
contenidos
Tablas y listas TABLAS Se organizan por las-rows- celdas de la la Cada la con5ene celdas-cells, que indirectamente crean
columnas dato Atributos de presentacin bsicos: y
Encabezados de la o columna de tabla
LISTAS Las lneas de las listas se marcan con contenido lnea Tipos:
Ordenadas (numricamente) : Sin ordenar (bullets) : Excepcin: lista de descripcin (texto) : las lneas principales se marcan con y las dependientes con
Ms HTML Lista rpida de e6quetas HTML
hZp://www.w3schools.com/html/html_quick.asp
Introduccin, novedades y manejo de HTML5
hZp://www.w3schools.com/html/html5_intro.asp
Listado completo de e6quetas HTML/HTML5
hZp://www.w3schools.com/tags/default.asp
Tutoriales y referencias completas
Fundamentos aplicados de CSS
CSS?
Cascading Style Sheets Lenguaje de presentacin semn6ca: porque indica qu aspecto y formato presentar el contenido web en el disposi5vo (navegador, impresora, lector voz de pantalla) del usuario
En Cascada: porque el es5lo que se declara para un elemento, se aplica en cascada (sucesivamente) a los subelementos correspondientes: html > body > div > p >
CSS?
Funcin
Especicacin desarrollada por el W3C (World Wide Web Consor5um)
Separacin contenidos HTML, XML, XHTML, SVG, o XUL de la presentacin del documento
Modicacin sencilla y controlada de aspecto y formato: colores, fondos, mrgenes, bordes, 5pos de letra...,
Bases selector {atributo: valor;}
Selector: elementos HTML afectados Declaracin: es5lo (aspecto y formato) que tendr el selector Propiedad o atributo del selector que se va a modicar
Valor que toma esa propiedad o atributo
Declaracin
CSS?
CSS?
Bases h2 {color: green;}
h2 ---> selector {color: green;} ---> declaracin
color ---> propiedad o atributo green ---> valor
Atributos CSS
Atributos - Tipos
Fuentes Font
Prrafos Text
Fondo Background
Caja o Box
Consulta chuletas CSS
Pseudo-elementos
Aplica es6lo a parte especca de un selector P:rst-leZer { font-size: 200%; color: #993333; font-weight: bold; }
Puede u6lizarse con clases P.nombreclase:rst-line { font-weight: bold; }
Consulta chuletas CSS
Valores
Busca el atributo o propiedad en el listado de la izquierda
hmp://www.w3schools.com/cssref/default.asp
En el apartado Property Values, observa los valores que puede tomar el atributo
Sintaxis CSS
Selectores Tipos y aplicacin Bsico selector {} Se aplica al selector especicado, por ejemplo p {} a los prrafos
Class nombredelaclase {} Se aplica a los elementos marcados en HTML con esa clase, por ejemplo , , or
Aplicacin de es6los
Hoja de Es6lo Externa Se almacena en un archivo diferente al del HTML Vinculacin a travs del elemento link, ubicado en la seccin head del
documento
Hoja de Es6lo Interna Integrada en el documento-archivo HTML Vinculacin , a travs del elemento style dentro de la seccin head
Es6lo en Lnea Integrada en el documento-archivo HTML Ubicado en la seccin body U5lizacin directa del elemento style con las e5quetas html
Aplicacin de es6los
Hoja de Es6lo Externa
Hoja de Es6lo Interna hr {color:sienna;} p {margin-let:20px;} body {background-image:url("images/back40.gif");}
Es6lo en Lnea Texto del prrafo
El archivo .css
Ubicacin Preferentemente, en la raz del si5o (facilita link)
Estructura Disposicin de selectores con atributos y valores Comentarios: /* comentarios */ Recomendado:
Iden5cacin y descripcin (mediante comentarios) Divisin en bloques de es5lo (mediante comentarios)
Muchas gracias