Vista previa del material en texto
Introducción al
Desarrollo Web
Departamento de Informática
HTML - Parte 1
2022
Requerimientos
Para empezar? NADA
Alcanza para ser un desarrollador web? NO
Conocer:
Cómo funciona Internet?
Cómo funciona la web?
Cómo funciona Navegador?
Qué es un sitio web?
Que es una página web?
Requerimientos
Vamos a poder crear un sitio web sólo con HTML? NO
Con HTML, CSS y Javascript? Si, pero algo simple
Es HTML indispensable? SI - Es por donde deberíamos empezar - es simple
Todos los sistema web utilizan HTML
Otras tecnologías - Frameworks
Página Web
Es un documento electrónico que contiene información.
Contenido: texto, imágenes, videos, enlaces, etc.
Adaptado para ser visualizado en internet.
Se puede acceder a ella a través del navegador ingresando
un dominio.
Sitios WEB
Conjunto de páginas web relacionadas.
Son relativamente nuevos en el mundo de la computación.
Son cada vez más complejos.
Presentan un entorno de requisitos muy cambiantes.
Gran número de usuarios y/o requisitos (mundial).
El equipo de desarrolladores suele ser pequeño
Objetivo
Vamos a poder definir la estructura de los
sitios web, especificar su contenido y
entender su funcionamiento.
HTML
HTML ("HyperText Markup Language"). Lenguaje de marcas de hipertexto.
NO es un lenguaje de programación.
Hipertexto significa que el documento contiene enlaces que permiten ir a otros
lugares del documento o a un documento distinto.
Las marcas se utilizan para controlar cómo se procesa y presenta el texto.
HTML
HTML fue creado por primera vez por Tim
Berners-Lee, Robert Cailliau y otros a partir de 1989 .
HTML 2.0 (1995), HTML 3.2 (1997), HTML 4.0 (1998),
HTML 4.01 (1999), XHTML
(2000), HTML 5, 5.1 y 5.2 (2014).
La última versión se conoce como HTML5
HTML
Los elementos en HTML están compuestos por etiquetas y
atributos.
Etiquetas: Se utilizan para marcar el inicio de un elemento
HTML y generalmente se incluyen entre corchetes
angulares.
Un ejemplo de una etiqueta es: <h1>.
La mayoría de las etiquetas deben abrirse <h1>y cerrarse
</h1>para que funcionen.
HTML - Estructura
<html>
...contenido...
</html>
HTML - Estructura
<html>
<head>
...elementos de la cabecera...
</head>
</html>
HTML - Estructura
<html>
<head>
<title> Mi primer título </title>
</head>
</html>
HTML - Estructura
<html>
<head>
<title> Mi primer título </title>
</head>
<body>
...Cuerpo de la página, lo que será visible en el navegador...
</body>
</html>
HTML - Etiqueta
● Etiqueta HTML <h1>: Encabezado o título principal.
● Etiqueta HTML <h2>: Para elementos subtítulo.
● Etiqueta HTML <p>: Para elementos de párrafo.
● Etiqueta HTML <b>: Para hacer texto en negrita.
● Etiqueta HTML <i>: Texto en cursiva.
● Etiqueta HTML <ul>: Para listas sin ordenar
● Etiqueta HTML <table>: para crear tablas.
● Etiqueta HTML <form>: Para crear formularios.
● Etiqueta HTML <a>: Para crear enlaces.
● Etiqueta HTML <img>: Para insertar imágenes.
HTML - Etiqueta
Etiquetas de párrafo y encabezados HTML
Las etiquetas que siempre indican texto y son:
● <p> Indica que el elemento es un párrafo.
● <h1> Señala que se trata de un título principal.
● <h2>, <h3>, <h4>, <h5>, <h6>: indica niveles de encabezado,
subtítulos.
HTML - Etiqueta
<html>
<head>
<title> MI PRIMER TÍTULO </title>
</head>
<body>
<h1> Este es el encabezado o título visible </h1>
<p> Este es el primer párrafo de texto </p>
<p> Este es otro párrafo de texto</p>
</body>
</html>
HTML - Etiqueta
Etiqueta <br/>
● <br/> indica un salto de línea, observa bien, no está mal escrito, es así como se
escribe.
● <br/> puede ir dentro de un párrafo, por ejemplo para hacer un salto de línea si es
necesario.
● <br/> no tiene etiqueta de cierre.
Etiqueta <hr/>
● <hr/> es una etiqueta que crea una línea horizontal o separador y también solo hay
que digitar tal como aparece, para crear una línea horizontal.
● <hr/> no tiene etiqueta de cierre.
HTML - Etiqueta
Los comentarios en HTML
Un comentario en HTML se indica de la siguiente manera:
<!– Escriba aquí su comentario –>
HTML - Etiqueta
Listas no ordenadas <ul> en HTML
Una lista no ordenada en HTML es aquella en la que los elementos
no están enumerados.
viñeta: un punto u otro tipo como veremos más adelante.
Etiqueta <ul>
Una etiqueta <ul> contiene a todas los elementos de la lista.
Etiqueta <li>
HTML - Etiqueta
<ul>
<li> primavera</li>
<li> verano </li>
<li> otoño </li>
<li> invierno </li>
</ul>
HTML - Etiqueta
Listas ordenadas en HTML <ol>
Una lista ordenada en HTML es aquella en la que los elementos están
ordenados
Etiqueta <ol>
Se utiliza la etiqueta html <ol> para crear listas ordenadas, entre la etiqueta de
apertura y cierre irán los elementos de la lista dentro de una etiqueta <li>
respectivamente.
Etiqueta <li>.-
En cualquier caso la etiqueta <li> sirve para indicar los elementos de la lista,
HTML - Etiqueta
Listas ordenadas en HTML <ol>
<ol>
<li> lunes</li>
<li> martes </li>
<li> miércoles </li>
<li> jueves </li>
<li> viernes </ li>
<li> sábado </li>
<li> domingo</li>
</ol>
HTML - Atributos
Los atributos en HTML es información adicional que se
coloca siempre en la etiqueta de apertura. Agrega
información o significado al elemento HTML con el que
estamos trabajando.
HTML - Atributos
Lista de los atributos más usados en HTML
● Id =” ”: Para identificar un elemento único.
● class =” ”: Identificador múltiple.
● align =” ”: Alineación de contenido.
● border =” ”: Para darle borde al contenido.
● style =” ”: Para darle un estilo al contenido.
● background-color =” ”: Para color de fondo.
● href =” ”: Para enlaces html.
● height =” ”: Para determinar altura.
● width =” ”: Para determinar ancho.
● src=“ ”: Para imágenes.
HTML - Atributos
Colocar los atributos en HTML
Un atributo se escribe de la siguiente manera:
Atributo=“valor”
Todo esto siempre dentro de la etiqueta de apertura.
Por lo tanto el atributo escrito en una etiqueta (por ejemplo
párrafo) se ve así:
<p atributo="valor">Este es un párrafo</p>
HTML - Atributos
Colocar los atributos en HTML
Cuando se hace uso de un atributo HTML se debe especificar su valor, este
puede representar una cantidad exacta, característica específica o simplemente
en qué medida se ejecutará dicho atributo.
El valor se expresa entre comillas después del signo de (=), de acuerdo al
atributo, pueden haber una variedad de valores disponibles. Por ejemplo, en caso
de align puede tomar el valor de center (centro), right (derecha), left
(izquierda), justify (justificado).
HTML - Atributos
Colocar los atributos en HTML
<p align="center">Este es un párrafo alineado al centro</p>
<p align="right">Este es un párrafo alineado a la derecha</p>
<p align="left">Este es un párrafo alineado a la izquierda</p>
HTML - Atributos
Hipervínculo en HTML
Para definir enlaces o hipervínculos utilizaremos la etiqueta
<a> de la siguiente manera:
<a> texto del enlace</a>
HTML - Atributos
Atributo href para enlaces HTML
Para indicar la dirección destino del enlace utilizaremos el atributo href, En todo
caso quedaría de la siguiente manera.
<a href="URL"> texto ancla </a> </body>
● El atributo href contiene el valor de la url de destino, es decir, el link o
dirección web.
● El texto ancla es el texto visible, o el texto que contiene el enlace, el texto
donde se hará clic.
● <a> puede ir dentro de un párrafo para un texto ancla específico.
● Se puede colocar enlace tanto a texto como a imágenes.
HTML - Imagenes
Insertar una imagen en HTML es muy simple, simplemente debemos indicar que el elemento es una imagen
y cuál es el archivo o donde esta ubicado para que sea mostrado en el navegador, veamos.
Etiqueta <img/>
Utilizaremos la etiqueta <img/> para insertar imágenes, a diferencia de otras etiquetas, <img/> no tiene una
etiqueta de cierre, pero si atributos.
Atributo src
Para indicar la ubicación o dirección de la imagen, utilizaremos el atributo src, la imagen puede estar
almacenadaen la misma carpeta que el documento HTML o también podemos agregar la imagen desde una
dirección URL, de la siguiente manera
<img src="boca.jpg"/>
