HTML Hungria Berbesi UNEFA-MERIDA

• ¿Qué son los archivos HTML? • HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto". • Los archivos HTML deben tener una extensión htm o html. • Para crear un archivo HTML solo hace falta un editor de texto. • Un archivo HTML está compuesto por etiquetas. • Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Mozilla, etc.) como mostrar la página.

Primer ejemplo • Mi primera página Web Hola a todos los estudiantes de la UNEFA.

Etiquetas HTML • ¿Qué son los elementos y las etiquetas de HTML? • Los elementos son declaraciones para visualizar o dar forma a una página Web. Las etiquetas son marcas insertadas en un documento HTML para proporcionar información sobre una unidad o contenido. • Reglas básicas de las etiquetas HTML • Las etiquetas están encerradas entre los signos "". • Las etiquetas generalmente vienen en pares

y . • La primera es de apertura y la segunda de cierre. • El texto que se encuentra entre dos etiquetas es el contenido del elemento. • Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea es lo mismo que . •

• Mi primera página Web Hola a todos los estudiantes de la UNEFA. Este texto es en negrita

Heading y comentarios • Headings

Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 •

Parrafos • Párrafos

Este es el primer párrafo del ejemplo.

Y este es el segundo párrafo.

Salto de linea, y separador br - Salto de línea El salto de
línea ocu
rrirá donde lo
coloquemos
. Sección 1 Sección 2 Sección 3

Tipos de tamaño de letra Texto en Negrita Texto normal Texto en negrita Texto grande Texto enfatizado Texto subrayado Texto fuerte

links a href=...

Google.

Abrir vinculo en nueva ventana Un vínculo que se abre en otro página del navegador Google

Abrir en el mismo frame Vínculo que se abre en este recuadro

Google

formularios Formulario Nombre:
Contraseña:

Al apretar el botón "Enviar" usted mandará todos los datos a una página llamada "datos.php" la cual procesará toda la información

formularios Formulario Nombre:
Contraseña:

Al apretar el botón "Enviar" usted mandará todos los datos a una página llamada "datos.php" la cual procesará toda la información.

En este ejemplo podemos observar que hemos sustituido el botón de submit por un botón gráfico/imagen que en sí tiene la misma funcionalidad y además lo ubicamos a la izquierda.

Un formulario tipo checkbox Formulario ¿Cuáles son sus pasatiempos favoritos?
TV
Libros
Música
Otros

El atributo type junto con el valor checkbox nos muestran un formulario del tipo "casilla de verificación" que nos permite elegir tantas opciones como deseemos.

Un formulario para subir archivos Formulario Ingrese la foto:

Al apretar el botón "Enviar" usted mandará los datos a una página llamada "foto.php" la cual procesará la información.

El atributo type junto con el valor file nos indica que este formulario es para el envio de archivos.

Un formulario con contraseña Formulario Nombre:
Contraseña:

Al apretar el botón "Enviar" usted mandará todos los datos a una página llamada "datos.php" la cual procesará toda la información

Un formulario tipo radio Formulario Elija un color
Rojo
Azul
Verde

Al apretar el botón "Enviar" usted mandará todos los datos a una página llamada "colores.php" la cual procesarátoda la información.

El atributo type junto con el valor radio nos muestran un formulario del tipo "radio" que nos permite elegir solo una opción.

Un recuadro alrededor del formulario con titulo Formulario Ingreso de datos Nombre:
Contraseña:

Al apretar el botón "Enviar" usted mandará todos los datos a una página llamada "datos.php" la cual procesará toda la información.

La etiquetafieldset dibuja un recuadro alrededor del formulario.
La etiqueta legend coloca un título al recuadro.

select Formulario Elija su pasatiempo favorito:

TV Libros Música Cine Teatro Caminar Otros

La etiqueta select define un menú desplegable.
La etiqueta option define una opción dentro del menú desplegable y el atributo value especifica el valor incial del control.

Poner subtítulos dentro del menú

Formulario Elija su pasatiempo favorito:

TV Libros Música Cine Teatro Caminar

La etiqueta optgroup junto con el atributo label especifican el rótulo del grupo de opciones.

•

Imágenes

Crear un mapa de la imagen Uso de imagenes

Definir marcos verticales



Definir marcos horizontales



Marcos sin bordes



Uso de márgenes dentro del marco



scroll



tabla Tabla con bordes remarcados

	Columna 1	Columna 2
Fila 1	Contenido 1-1	Contenido 1-2
Fila 2	Contenido 2-1	Contenido 2-2

Tabla con cellpaddiing Uso del cellpadding

Distancia entre celdas Distancia entre celdas

	Columna 1	Columna 2
Fila 1	Contenido 1-1	Contenido 1-2

	Columna 1	Columna 2
Fila 1	Contenido 1-1	Contenido 1-2
Fila 2	Contenido 2-1	Contenido 2-2

Especificamos la alineación horizontal de las filas

Tabla ejemplo de filas con el atributo align

Valor	Resultado	Resultado
right	alineado a	la derecha
left	alineado a	la izquierda
center	texto	centrado
justify	texto	texto