Introducción HTML 19 Febrero

INTRODUCCIÓN HTML
¿Qué es una aplicación web?

Es una aplicación de software basada en la arquitectura CLIENTE – SERVIDOR a la que
los usuarios pueden acceder a través de un navegador web (cliente) siempre y cuando
sea posible la conexión al servidor.
Internet es la forma de conexión mas

común entre un cliente y un servidor, sin
embargo si se utiliza un servidor en una red
local, también se considera una aplicación
web.
Arquitectura cliente servidor
Request (Solicitud)
Cliente Response (Respuesta)

Servidor
Front END Back END

- Persistencia.
- HTML
- Lenguajes servidor (C#, JAVA, PYTHON,
- CSS
- PHP…)
AJAX
- JAVASCRIPT …
¿Esto sirve solo para una pagina web?
No, la conexión a un servidor no se realiza necesariamente desde una web, por ejemplo:
Las aplicaciones móviles nativas responden también a una arquitectura cliente servidor.
Servidor
Entonces, ¿necesito muchos Back-END en mi servidor
para poder conectarme a distintos tipos de dispositivos?
– API
No, gracias a lo que se llama API, puedes recibir el mismo tipo de solicitud desde varios
dispositivos diferentes y devolver la misma respuesta.
API = Application Programming Interface
Un conjunto de métodos o funciones que quedan expuestos en una capa de abstracción para
ser accedidos desde diversos tipos de dispositivos.
Request (HTTP o SOAP)
Cliente XML o JSON Servidor

Response (Respuesta)
Volviendo a las aplicaciones web…
El cliente vendría siendo entonces en este caso un navegador web (Bien sea el navegador de
un dispositivo móvil o el de una Laptop o una PC), por lo que el FRONT END tiene que estar
programado en lenguajes que soportan dichos navegadores. En la lista tenemos:
- HTML
- CSS
- JAVASCRIPT
- …
Página Web
• Párrafos •Tablas
Estructura •• Encabezados • Capas
Listas • Etc.
HTML
• Textos
Contenido • Imágenes
• Enlaces
• Colores • Fondos
Apariencia • Tipografías
• Alineación
•
•
Tamaños
Etc.
CSS
• Efectos
Comportamiento • Validaciones
• Automatización Javascript
HTML - Hypertext Markup Language
Es un lenguaje estándar utilizado para definir cómo será ordenado el contenido de una página web
(a nivel de interfaz gráfica).
QUE ES HTML
El HTML (Hyper Text Markup Language) es el lenguaje con el que se
escriben las páginas web.
HTML es un lenguaje de hipertexto (Texto de forma estructurada)
HTML está compuesto por etiquetas, que marcan el inicio y el fin de
cada elemento del documento.
HTML permite crear contenidos multimedia
Visualización mediante navegadores web
2. Etiquetas principales de HTML
Estructura general
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Etiquetas HTML
Las etiquetas o marcas delimitan cada uno de los elementos que
componen un documento HTML. Existen dos tipos de etiquetas, la de
comienzo de elemento y la de fin o cierre de elemento.
Etiqueta de comienzo – Etiqueta de final
Comienzo
<identificador atributo1 atributo2 ...>
Final
</identificador>
Algunos elementos no necesitan etiquetas de cierre.

Etiquetas anidadas
<p align="center">
<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">
Bienvenidos a Programación WEB
</font>
</p>
Etiqueta <html> </html>
• Identifica el tipo de documento
• Todas las páginas web escritas en HTML tienen que tener la
extensión html o htm. Al mismo tiempo, tienen que tener las
etiquetas <html> y </html>.
• Entre las etiquetas <html> y </html> estará comprendido el resto del
código HTML de la página.
Cabecera <head> </head>
• Se utiliza para agrupar información sobre la pagina, como puede ser
el título.
• Está formada por las etiquetas <head> y </head>. La
etiqueta <head> va justo debajo de la etiqueta <html>.
• Entre las etiquetas <head> </head> podemos encontrar etiquetas
como:
• <link> <style> <script>
• <meta>
• <title>
Etiqueta <title> </title>
<html>
<head>
<title>
Programacion WEB - UTS
</title>
</head>
</html>
Etiquetas principales de HTML
La etiqueta Hx
Las etiquetas <H1>, <H2>,... <H6> producen texto destacado, al

modo de títulos, siendo el <H1> el de mayor nivel.
Además cada bloque de texto contenido en uno de estos elementos
ocupará siempre un párrafo separado del resto del documento.
La etiqueta FONT
La etiqueta <FONT> permite cambiar multitud de aspectos de la letra que se muestra,
mediante el uso de distintos atributos:
FACE: cambia la fuente que se muestra, si se pone una lista elegirá la primera que se
encuentre instalada en la máquina.
COLOR: cambia el color. Este se puede indicar como una palabra inglesa o como un código
RGB en hexadecimal #RRGGBB.
SIZE: cambia el tamaño con que aparecerá la fuente.
https://htmlcolorcodes.com/es/
Las etiquetas P y BR
La etiqueta <P> permite establecer una división en párrafos. Aunque es una etiqueta
llena, se puede usar como vacía, pues la siguiente apertura funcionará como cierre del
párrafo actual. Admite un atributo:
ALIGN: puede tener tres valores: CENTER, LEFT, RIGHT o JUSTIFY.
La etiqueta <BR> provoca un salto de línea. La diferencia con <P> es que no permite
controlar la alineación y los párrafos no aparecerán separados.
Efectos en el texto
<CENTER> centra el texto encerrado en el elemento.

<B> pone en negrita el texto encerrado.
<I> pone en cursiva el texto encerrado.
<U> subraya el texto encerrado en el elemento.
<SUP> el texto aparecerá como superíndice.
<SUB> el texto aparecerá como subíndice.
<TT> texto teletipo, aparecerá con fuente de paso fijo
Listas
Se puede crear una lista numerada (con la etiqueta <OL>) o sin numerar (<UL>). Todo el
texto contenido entre la apertura y cierre de estas etiquetas formará parte de la
correspondiente lista.
Para delimitar los elementos dentro de cada lista se utiliza el elemento vacío <LI>, que se
coloca al comienzo de cada elemento.
Pueden anidarse listas, de forma que un elemento de una lista sea a su vez otra lista, y así
sucesivamente.
La etiqueta <ul>, permite definir una lista desordenada (“Unordered List”).
La etiqueta <ol>, permite definir listas o viñetas ordenadas (“Ordered List”), bien con
numeración o alfabéticamente.
Listas
Listas
Listas
Listas
La etiqueta <dl>, permite definir lo que se denominan, listas de definición,
las cuales a su vez están compuestas por un término, y una definición
Para realizar la lista se utilizan dos etiquetas más, la primera es <dt> </dt>,
que permite especificar el termino en la lista. Y otra etiqueta <dd> </dd>,
que permite especificar la definición.
La sintaxis de la lista con las etiquetas correspondientes, es la siguiente:

Listas
Tablas
Una tabla se crea con la etiqueta <TABLE>

Esta etiqueta tiene como atributos principales:
WIDTH: permite especificar el ancho de la tabla, tanto en puntos, como en porcentaje sobre
el total de pantalla disponible.
BORDER: con el se especifica el grosor con que se pintará el borde de la tabla, por defecto es
0.
ALIGN: alineamiento: CENTER, LEFT o RIGHT. CELLSPACING: separación entre celdas
(en puntos). CELLPADDING: separación de la celda y su contenido.
Tablas
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado
presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas
iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente.
En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada
una contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que contiene a
un grupo de filas, y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.
Como muchas otras estructuras de HTML, las tablas son construidas utilizando elementos. En particular, una
tabla básica puede ser declarada usando tres elementos, a saber, table (el contenedor principal), tr
(representando a las filas contenedoras de las celdas) y td (representando a las celdas). Dejémoslo más claro
con un ejemplo:
Tablas
Tablas
Tablas
Tablas
Tablas
Tablas
Tablas

Introducción HTML 19 Febrero

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introducción HTML 19 Febrero

Cargado por

Copyright:

Formatos disponibles

INTRODUCCIÓN HTML

¿Qué es una aplicación web?

Internet es la forma de conexión mas

Cliente Response (Respuesta)

Front END Back END

API = Application Programming Interface

Request (HTTP o SOAP)

Cliente XML o JSON Servidor

Algunos elementos no necesitan etiquetas de cierre.

Las etiquetas <H1>, <H2>,... <H6> producen texto destacado, al

<CENTER> centra el texto encerrado en el elemento.

La sintaxis de la lista con las etiquetas correspondientes, es la siguiente:

Una tabla se crea con la etiqueta <TABLE>

También podría gustarte