¿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).
VIEJA FORMA Formato de propietario.
NUEVA FORMA Leible, estándar, universal,... <html> <head> <title>Primera página</title> </head> <body> <p>Está es mi primera página usando HTML.</p> </body> </html>
¿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 DE CIERRE ETIQUETA DE APERTURA TEXTO MARCADO
FORMATO DE UNA ETIQUETA HTML BÁSICA 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> TEXTO MARCADO Comienza el marcado Finaliza el marcado
FORMATO DE UNA ETIQUETA HTML AVANZADA <p align="center">texto de prueba</p> ATRIBUTO TEXTO MARCADO NOMBRE DE LA ETIQUETA ETIQUETA DE CIERRE ESPACIO
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.
ATRIBUTOS DE ETIQUETAS HTML <p align="center">texto de prueba</p> El atributo está a continuación del nombre de la etiqueta, pero dentro de la etiqueta de apertura El atributo nunca está en la 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>
FORMATO DE UNA PÁGINA WEB BÁSICA Todo estará rodeado por etiquetas HTML. Todas las páginas WEB tienen HEAD y BODY. HEAD Solamente ciertas etiquetas funcionarán. Esas etiquetas se aplicaran a toda la página Ejemplo: El título se muestra en la barra de título de la ventana del browser. BODY aquí está todo el contenido
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