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