Características del HTML Multiplataforma Simple Está en todos lados No es más que simple texto Libre
Elementos del HTML Estructura Presentación Hipertexto
Etiquetas La estructura básica de un documento HTML incluye etiquetas, que rodean el contenido y le aplican formato. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Ésta es mi primera página web <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Ésta es mi primera página web
Títulos Hemos agregado dos elementos nuevos aquí, que empiezan con la etiqueta head y title (y ve como ambas se cierran). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Ésta es mi primera página web <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Ésta es mi primera página web
Párrafos Agrega otra línea a tu documento: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Ésta es mi primera página web Qué emocionante <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Ésta es mi primera página web Qué emocionante
Párrafos Cambia las dos líneas para que se muestren así: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Ésta es mi primera página web Qué emocionante <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Ésta es mi primera página web Qué emocionante
Énfasis Puedes dar énfasis a un texto en un párrafo usando en (énfasis) y strong (mayor énfasis). Éstas son dos maneras de hacer más o menos lo mismo, aunque tradicionalmente, los navegadores muestran en itálicas y strong en negritas. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Ésta es mi primera página web Sí, eso es lo que dije. Es muy emocionante. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Ésta es mi primera página web Sí, eso es lo que dije. Es muy emocionante.
Cortes de línea Una etiqueta de corte de línea también puede usarse para separar líneas así: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Ésta es mi primera página web Qué emocionante <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Ésta es mi primera página web Qué emocionante Sin embargo este método está muy sobreusado y no debería ser usado si se quiere separar texto en dos líneas
Encabezados Son h1, h2, h3, h4, h5 y h6. Siendo h1 el mayor y h6 el menor. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Mi primera página web ¿Qué es esto? Una página simple creada usando HTML ¿Para qué es esto? Para aprender HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Mi primera página web ¿Qué es esto? Una página simple creada usando HTML ¿Para qué es esto? Para aprender HTML
Listas Las hay de tres tipos: ordenadas (ol), desordenadas (ul) y de definiciones (li). <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Mi primera página web ¿Qué es esto? Una página simple creada usando HTML ¿Para qué es esto? Para aprender HTML Presumir Porque me he enamorado de mi computadora y quiero darle amor HTML. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Mi primera página web ¿Qué es esto? Una página simple creada usando HTML ¿Para qué es esto? Para aprender HTML Presumir Porque me he enamorado de mi computadora y quiero darle amor HTML.
Listas Ahora cambia las etiquetas ul por ol. Luego, reemplaza el código anterior por esto: Para aprender HTML Para presumir A mi maestra A mis amigos A mi gato Al pequeño pato hablador en mi cerebro Porque me he enamorado de mi computadora y quiero darle amor HTML. Para aprender HTML Para presumir A mi maestra A mis amigos A mi gato Al pequeño pato hablador en mi cerebro Porque me he enamorado de mi computadora y quiero darle amor HTML.
Enlaces (Links) Una etiqueta ancla (a) es usada para definir un enlace pero también necesitarás el destino (href) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Mi primera página web ¿Qué es esto? Una página simple creada usando HTML ¿Para qué es esto? Para aprender HTML Enlace recomendado Rock & Tech <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN” " Mi primera página web Mi primera página web ¿Qué es esto? Una página simple creada usando HTML ¿Para qué es esto? Para aprender HTML Enlace recomendado Rock & Tech
Imágenes La etiqueta img es usada para insertar una imagen en un documento HTML. Agrega lo siguiente antes de /body: El atributo src le dice al navegador dónde está la imagen. Los atributos ancho (width) y la altura (height) son necesarios. El atributo alt es la descripción alternativa. Es usada para gente que no puede o ha elegido no ver imágenes. Es requerido. Como la etiqueta br, img no tiene etiqueta para cerrar, así que se cierra a sí misma terminando con “/>”
Tablas Copia lo siguiente: table define la tabla tr define una fila td define una celda (deben estar entre etiquetas tr) Fila 1, celda 1 Fila 1, celda 2 Fila 1, celda 3 Fila 2, celda 1 Fila 2, celda 2 Fila 2, celda 3 Fila 3, celda 1 Fila 3, celda 2 Fila 3, celda 3 Fila 4, celda 1 Fila 4, celda 2 Fila 4, celda 3 Fila 1, celda 1 Fila 1, celda 2 Fila 1, celda 3 Fila 2, celda 1 Fila 2, celda 2 Fila 2, celda 3 Fila 3, celda 1 Fila 3, celda 2 Fila 3, celda 3 Fila 4, celda 1 Fila 4, celda 2 Fila 4, celda 3
Insertando HTML externo Es tan fácil como copiar y pegar el código que se nos proporciona. Si se requiere se le puede dar formato después. Intenta pegando este código:
Juntándolo todo No te limites, experimenta y juega con valores y etiquetas. Lo más que puede pasar es que no se muestre bien. Intenta ver el código fuente de las páginas que visitas frecuentemente. (clic derecho > ver código fuente) Si te interesa puedes aprender más en TMLQuick.com (
FORMULARIOS HTML
FORMULARIO Los formularios serán de gran utilidad cuando comencemos a trabajar con paginas dinámicas en lenguajes PHP, JSP, ASP. Por ello trataremos a detalle todas sus características. Un formulario en HTML no puede hacer mucho por si solo, ya que simplemente se limita a enviar valores al servidor, pero allí no hay nada que los procese, a continuación trataremos los tags correspondientes a un formulario.
Con sus respectivos atributos: La propiedad ACTION define a que pagina se enviaran los datos para procesarlos o que se hará con los datos una vez que se pulse en botón enviar. También tenemos la propiedad METHOD que también define la forma en que se envíen los resultados; aquí tenemos dos posibilidades: get: Los datos se envían por la URL del navegador. post: Los datos son enviados a través de las cabecera HTTP y son invisibles para el usuario. La propiedad NAME es con la que se sugiere el nombre para el formulario.
EJEMPLO:
CAMPOS DE TEXTO <INPUT TYPE="TEXT" NAME=“TEXTO1“ VALUE=“Ingresa tu nombre aqui ” MAXLENGTH=“50” DISABLE> Son los elementos que utilizaremos con mayor frecuencia. Los mismos permiten que el usuario ingrese datos de una línea como su Nombre, Dirección, correo electrónico, Telefono, Sexo, Edad, etc. Para insertar estos elementos se utiliza la etiqueta, la cual no tiene etiqueta de cierre, con el atributo TYPE=“TEXT”, ademas tenemos otra propiedad muy importante que no puede faltar: NAME.
Ver el ejemplo: TEXFIELD Nombre: Apellidos: Direccion:INPUT TYPE="TEXT" name=“txtdireccion“ value="Ingresa tu direccion" size=50> Teléfono: Mail: Ejecutar ejemplo
CASILLAS DE VERIFICACION Son los elementos que permiten que el usuario seleccione distintas opciones; esto puede ser una o más, se utiliza en la elección de productos a comprar, listas de correo de subscríbase, etc. Musica Literatura arte Cultura Tecnologia La propiedad CHECKED marca una casilla sin valor por defecto.
CHECK,S Ingrese datos: Musica Cultura arte Cultura Tecnologia Ejemplo: Ejecutar ejemplo
BOTONES DE OPCIÓN Este elemento es conocido también como botón de radio, es similar al anterior, pero en este caso los elementos se agrupan, utilizando el mismo nombre, y solo esta permitido una única selección. Verano Otono Invierno Primavera Nota: Solo se selecciona una opción.
Ejemplo: EJEMPLO Verano Otono Invierno Primavera Ejecutar ejemplo
AREAS DE TEXTO Si se desea que el usuario teclee un texto largo debemos ofrecerle un espacio mas cómodo para escribir, es común ver áreas de texto en los campos para redactar mensajes de las paginas Web que ofrecen un correo gratuito, como Yahoo, Hotmail, por ejemplo. Las áreas de texto se definen como y el texto que va en medio aparecerá en el campo por defecto, también se define su tamaño mediante los parámetros alto y ancho con los atributos rows (Filas) y cols (Columnas) respectivamente.
EJEMPLO Area de escritura Ejemplo: Ejecutar ejemplo
BOTONES DE COMANDO Existen 2 tipos de comandos muy utilizados en los formularios; estos son submit y reset. El primero envía los datos del formulario para su procesamiento donde hayamos indicado en la propiedad ACTION de la etiqueta, y el segundo limpia todo texto del formulario.
function HolaMundo() { alert("¡Hola, mundo!"); } <INPUT TYPE="button" NAME="Boton" VALUE="Pulsame" onClick="HolaMundo()"> Existen también botones genéricos que programaremos en javaScript o PHP. Ejecutar ejemplo
MENUS DE SELECCIÓN Conocido como menú descogable del cual podrás elegir una opción, con este podrás crear menús sencillos o múltiples. Argentina Uruguay Paraguay Brasil Chile Ejecutar ejemplo