Entradas
ETIQUETAS HTML
APLICACIONES
Son instrucciones de código que se ejecuta
mediante el procesador de un computador.
Existen aplicaciones de escritorio y aplicaciones web
Arquitectura
Cliente/Servidor
CLIENTE/SERVIDOR
Arquitectura Cliente-Servidor aplicado a la web.
HTML
HyperText Markup Language.
Lenguaje de Marcado de Hipertexto.
HIPERTEXTO
Ejemplo Hipertexto
HTML: Características
Se basa en Etiquetas o Marcas.
Las etiquetas utilizadas tiene la siguiente
sintaxis:
< HTML > [CONTENIDO] </HTML>
Únicamente representa contenido estático de un sitio web.
No es propiamente un lenguaje de programación.
HTML: Características
Sintaxis: Toda etiqueta que es abierta DEBE
SER CERRADA.
<TABLE></TABLE>
<HTML><TABLE></HTML>: No es correcto
No es sensible a mayúsculas y minúsculas.
<html></HTML>.
HTML: Características
Se lo puede escribir en cualquier procesador de texto básico. Ejemplo: Bloc de Notas de Windows
HTML: Características
El lenguaje de marcado resultado es interpretado por un Browser (Firefox).
SINTAXIS DE UN ARCHIVO HTML
<html>
<head>
</head>
<body>
ESTE ES EL PRIMER ARCHIVO HTML
</body>
</html>
Jerarquía en Html
HTML: Ventajas
Desarrolla mediante la concepción de diseño: WYSIWYG (What you see is what you get).
Se centra en el diseño de la aplicación web, y no en la lógica de programación.
Los ficheros con extensión .htm o .html son compatibles con cualquier navegador.
Son ficheros livianos y de rápida interpretación por el browser
HTML: Desventajas
Tiempo.
Talento Humano.
$$$.
El lenguaje de marcado HTML propiamente no posee estructuras de programación.
Las opciones que presenta las etiquetas son muy limitadas.
HTML: Etiquetas
Inicio de un documento HTML
Inicio del título.
Título (que conviene poner para identificar la
página de cara al visitante).
Final del título.
Inicio del cuerpo de la página, esto es, de aquello que queremos visualizar.
Fin del cuerpo de la página.
Fin del documento HTML.
Saltos de línea.
<br>: Produce un salto de línea.
<p> Produce el final de un párrafo
HTML: Etiquetas Salto de
Línea
Ejemplo:
HTML: Listas Enumeradas
Para etiquetar una lista se lo realiza mediante
la etiqueta <OL> </OL>
Cada elemento numerado de la Lista dentro de la Etiqueta: <LI> (La etiqueta <LI>, no necesita ser cerrada).
HTML: Listas Enumeradas
HTML: Listas Numeradas
HTML: Listas no numeradas
Para etiquetar una lista NO NUMERADA se lo
realiza mediante la etiqueta <UL> </UL>
Cada elemento de la Lista dentro de la Etiqueta: <LI> (La etiqueta <LI>, no necesita ser cerrada).
HTML: Listas no numeradas
HTML: Listas no numeradas
HTML-> Lenguaje de Marcado de Hipertexto
Alineación
Se predefinen 3 ‘‘center’’, ‘‘right’’ y ‘‘left’’.
Para alinear todo un párrafo se lo coloca como un
ATRIBUTO de la ETIQUETA
ATRIBUTOS DE ETIQUETAS HTML
Un atributo cambia algo acerca de la etiqueta.
Normalmente el párrafo estaría alineado a la izquierda.
Ahora está centrado.
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.
Separadores Horizontales
Un recurso para el diseño de las páginas web, son las líneas horizontales, la cual se define con la etiqueta
<hr>
Este separador horizontal puede modificarse tanto en altura como en longitud, para lo cual se utiliza los atributos de esta etiqueta
Para modificar el valor por defecto en longitud se utiliza el atributo <hr size=‘‘n’’>, para modificar el valor de altura el atributo <hr width=‘‘n’’>
Ejemplo:
<hr>
<hr size=‘‘50’’>
<hr width=‘‘100’’>
<hr size="90" width="50%">
Cabecera de texto
x va desde 1 a 6, siendo 1 el mayor.
<h1>Cabecera tipo 1</h1>
<h2>Cabecera tipo 2</h2>
<h3>Cabecera tipo 3</h3>
<h4>Cabecera tipo 4</h4>
<h5>Cabecera tipo 5</h5>
<h6>Cabecera tipo 6</h6>
Visualización
Texto en negrita
Para colocar un texto en negrita, se coloca el texto entre las etiquetas <b> y </b>.
<b> TEXTO EN NEGRITA </b>
Ejemplo
<b>Universidad Tecnológica Equinoccial</b>
Texto en Cursiva
La etiqueta <i> permite aplicar el estilo de cursiva al texto contenido, entre las mismas
<i>Texto en cursiva </i>
Ejemplo:
<i>Universidad Tecnológica Equinoccial</i>
Texto Subrayado
La etiqueta <u> permite dar formato al texto de manera subrayado
<u>Texto Subrayado</u>
Ejemplo :
<i>Universidad Tecnológica Equinoccial</i>
Formato del texto.
Cuando se requiere personalizar el formato del texto en documentos HTML, se utilizan varias etiquetas, una de las mas importantes es la etiqueta <font>
La etiqueta font permite configurar:
1. Tipo de letra.
2. Color de la letra
3. Tamaño de la letra
Sintaxis.
<font>Texto para formatear</font>
Importante.
El conjunto de fuentes, es aquel que existe en el equipo donde será reproducido el documento HTML.
Color
Se puede colocar en texto el nombre de los colores predefinidos
También se puede colocar el tono de color en
hexadecimal
<font color="FF0000" >
Formato: Color
<font color="FF0000" size="7">Universidad
Tecnológica Equinoccial</font>
Ejemplo de Formato
<font color="FF0000" size="7" face= "Verdana’’>
Universidad Tecnológica Equinoccial</font>
Inserción Imágenes
Para insertar una imagen se utiliza la etiqueta <img>, con el atributo ‘‘src’’, colocándole la ubicación del archivo de la imagen.
El atributo ‘‘alt’’, entrega información, acerca de la descripción de la imagen, para aquellos navegadores que no permita mostrar la imagen
Además podemos redimensionar con los atributos
‘‘width’’ y ‘‘height’’
Imágenes
<img src="logo_ute.png" alt="Logo ute" width="100" >
No hay comentarios:
Publicar un comentario