MAPA2

Programación WEB

Disciplina que permite la creación de sitios web dinámicos, a través de diversas herramientas de desarrollo.

¿Qué es?

HTML

XML

CSS

Lenguaje de Marcado para Hipertextos (HyperText Markup Language)

Lenguaje de Etiquetado Extensible (eXtensible Markup Language)

Hojas de Estilo en Cascada (Cascading Style Sheets)

Elemento de construcción más básico de una página web, se usa para crear y representar visualmente una página.

XML es un formato que permite la lectura de datos a través de diferentes aplicaciones.

Lenguaje utilizado para describir la presentación de documentos HTML o XML (como debe ser renderizado el elemento).

¿Qué es?

¿Qué es?

¿Qué es?

Estructura Global de un Documento Web

Permite conocer el inicio y el final del mismo, sin dejar a un lado los contenidos, los tamaños de la hoja y el marguen con el que contará.

¿Para que sirve?

Título

Cabecera

Cuerpo

Estructura HTML5

Principales Zonas

Dentro de la cabecera hay informacion del documento que no se ve en la pantalla principal y que presisa las caracteristicas del documento (<head>...</head).

El título debe ser breve y descriptivo de su contenido (<title>...</title).

Dentro del cuerpo del documento se incluye calquier carácter imprimible (<body>...</body).

¿Qué es?

¿Qué es?

¿Qué es?

Lenguajes de Presentación

Elementos Básicos

Texto

Vínculos

Listas

Tablas

Objetos

Imagenes

Elemento más significativo de cualquier sitio Web.

El texto se muestras a través de las etiqueta <p>...</p>.

Enlaces a otros recursos.

La etiqueta <a href=""> representa un hiperenlace.

Entre las comillas de href se coloca la dirección del otro recurso.

Ordenadas

<ol>...</ol>

No ordenadas

<ul>...</ul>

Cada punto en la lista va dentro de la etiqueta <li>...</li>

Para agregar el símbolo del punto, es a través del atributo type.

Puntos negros type=”disc”

Puntos con el fondo blanco type=”circle”

Cuadrados type=”square”

Cada punto en la lista va dentro de la etiqueta <li>...</li> y se muestran con un número.

Números Romanos <ol type ="I">

Inicio de la lista en un valor especifico

<ol start ="3">

Se define con las etiquetas

<table>...</table>

Comienzo y final de una fila de la tabla. <tr>...</tr>

Comienzo y final de una columna de la tabla. <td>...</td>

El encabezado de una fila va dentro de las equitetas <tr>...</tr>

Cada encabezado se define con las etiquetas <th>...</th>

Otras etiquetas

Título de la tabla <caption>...</caption>

Para añadir un borde a las celdas con el atributo border

Horizontalmente colspan

Verticalmente rowspan

<input> se usa para crear controles interactivos para formularios basados en la web.

La forma en que <input> funciona varía considerablemente dependiendo del valor de su atributo type.

<img alt="Título de la imagen" src="Ruta de la imagen" width="ancho(px)" height="alto(px)" />

Las imagenes se insertan a través de la etiqueta <img>

Tales Como

Integra

Es

Son

Tipos

Tipos

Estructura Básica

Son

Acción

Uso

Estructura

Formularios

Selectores

Modelo de caja

Son uno de los puntos principales de interacción entre un usuario y un sitio web o aplicación .

¿Para que sirve?

¿Qué es?

Permiten a los usuarios enviar información a un sitio web.

Todos los formularios HTML comienzan con el elemento <form>

<form action="/my-handling-form-page" method="post">...</form>

Estructura

action="" define la locación (una URL) desde donde la información recolectada por el formulario debería enviarse.

Atributos

method ="" define con que método HTTP se enviará la información (puede ser "get" o "post").

Identifican a un elemento dentro de la página Web para luegopoder definir sus propiedades.

¿Para que sirve?

Los distintos tipos de selectores abarcan desde el simple nombre de las etiquetas usadas en HTML (body, p, code, table, ul, etc.) hasta complejas combinaciones que permiten un juego muy amplio de selecciones dentro de la página.

¿Cómo funcionan?

Permite sacar el máximo provecho de las CSS.

Finalidad

"Box model" es seguramente la característica más importante del lenguaje de hojas de estilos CSS.

El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares.

¿Qué es?

¿Para que sirve?

Cada vez que se inserta una etiqueta HTML, se crea una nueva caja rectangular que encierra los contenidos de ese elemento.

¿Cómo funcionan?