Embed Size (px)
Citation preview
¿QUÉ ES HTML? Hipertext Markup Language. Lenguaje de ordenador. Universal. Estándar. (http://www.w3.org) Leible por humanos. Relativamente
fácil de entender Objetivo principal: intercambio fácil
de documentos en la red (web).
¿CÓMO ESTÁ ESTRUCTURADO EL
HTML? Comienza con el contenido:
Mi afición favorita es sacar fotos.
Añade la información HTML<strong> Mi afición favorita es
sacar fotos.</strong>Esta “información HTML” son las ETIQUETAS HTML.
¿QUÉ ES UNA ETIQUETA HTML?
Le dice al explorador web como mostrar algo.
Sin etiquetas El explorador no hace nada espectacular.
No tiene negrita, no tiene colores, no diferentes fuentes, nada.
Solo devuelve la información sin más. Demo
FORMATO DE UNA ETIQUETA HTML BÁSICA
<strong>texto de prueba</strong>
ETIQUETA DEAPERTURA
ETIQUETA DECIERRE
TEXTO MARCADO
Cada etiqueta está rodeada por corchetes angulares: < >
Las etiquetas de apertura y cierre indican donde comienza y donde finaliza el marcado:<strong>texto de prueba</strong>
FORMATO DE UNA ETIQUETA HTML BÁSICA
Comienza el marcado Finaliza el marcado
TEXTO MARCADO
<p align="center">texto de prueba</p>
FORMATO DE UNA ETIQUETA HTML
AVANZADA
NOMBRE DE LA ETIQUETA
ESPACIO
ATRIBUTOTEXTO MARCADO
ETIQUETADE CIERRE
ATRIBUTOS DE ETIQUETAS HTML
<p align="center">texto de prueba</p>
Un atributo cambia algo acerca de la etiqueta.
Normalmente el párrafo estaría alineado a la izquierda.
Ahora está centrado.
<p align="center">texto de prueba</p>
ATRIBUTOS DE ETIQUETAS HTML
El atributo está a continuacióndel nombre de la etiqueta, perodentro de la etiqueta de apertura
El atributo nunca está enla etiqueta de cierre
¿QUÉ ES UN FICHERO HTML?
Fichero de texto normal El contenido está entremezclado
con etiquetas apropiadas de HTML. No tiene códigos especiales, no
hay magia. En la mayoría de los casos debe
acabar en .htm o .html
REGLAS DE LOS ATRIBUTOS
Los valores de los atributos deben tener apóstrofes.
Incorrecto <img src=foto1.jpg> Correcto <img src="foto1.jpg"> Usar siempre minúsculas para las
etiquetas y los nombres de los atributos. El valor del atributo puede ir
indistintamente en mayúsculas o minúsculas.
REGLAS DE LOS ATRIBUTOS
INCORRECTO:<P ALIGN=“center”>
<P Align=“center”>
CORRECTO:<p align=“center”>
FORMATO DE UNA PÁGINA WEB BÁSICA
<html>
<head>
</head>
<body>
El contenido que se va a mostrar irá aqui
</body>
</html>
Todo estará rodeado por etiquetas HTML.
Todas las páginas WEB tienen HEAD y BODY.
HEADSolamente ciertas etiquetas funcionarán.Esas etiquetas se aplicaran a toda la páginaEjemplo: El título se muestra en la barra de
título de la ventana del browser.BODY aquí está todo el contenido
FORMATO DE UNA PÁGINA WEB BÁSICA
ALGUNAS ETIQUETAS em siginifica emphasis, pero hace
cursiva. p significa párrafo. br significa line break.
ORDEN DE LAS ETIQUETAS Asegurate de cerrar solamente la
última etiqueta abierta. INCORRECTO:<p><strong>Hola a
todos!</p></strong>
TÍTULO Crea un título para tu página. El título se muestra en la barra de
título, no en la página (body). Va en la sección <head>. Ejemplo:<title>Mi primera página</title>. IMPORTANTE: Ninguna otra etiqueta
puede ir entre las del título.
TAMAÑOS DE LETRAS hx x va desde 1 a 6, siendo 1 el
mayor. Demo
FUENTES Usa font para cambiar tipo, tamaño y color. face="tipo de fuente" size=“número“
+1 a+6, y –1 a –6 son tamaños relativos.
1 a 6 son tamaños absolutos. color="#800000“
Se pueden usar nombres de colores o códigos hexadecimales.
LISTAS LISTAS ORDENADAS LISTAS NO ORDENADAS
LISTAS ORDENADAS La lista entera va encerrada por <ol> y </ol>.
Cada elemento de la lista va encerrado por <li> y </li>.
Ejemplo:
LISTAS NO ORDENADAS La lista entera va encerrada por <ul> y </ul>.
Cada elemento de la lista va encerrado por <li> y </li>.
Ejemplo:
LISTAS ANIDADAS
