HTML - 2021

LENGUAJE WEB
INTRODUCCIÓN AL
LENGUAJE HTML
URL
(Localizador de
recursos uniforme)
2
¿Qué es una URL?
▸ Localizador de recursos uniforme, más comúnmente

denominado URL (sigla en inglés de uniform resource
locator), Las URLs tienen un formato como el siguiente:
<protocolo>://<servidor>/<path>.
▸ Echemos un vistazo a una URL y ver cómo se consigue

dividir en pedazos :
http://www.asp.net/mvc/mvc3
3
URL
▸ Protocolo
Es el “cómo”.
Le dice a la pc que convenciones hay que utilizar cuando se comunica con
el servidor solicitado.
▸ Servidor
Es el “donde”.
Le dice a la pc el nombre de la computadora que aloja a la página
solicitada.
▸ Path
Es el “que”.
Indica qué página estamos interesados en acceder de ese sitio web.
▸ Cuando no hay nada luego del servidor es porque existe un default para el
path (por ejemplo index.html)
4
¿Qué sucede después?
▸ La pc establece una conexión con la dirección IP del servidor y

el servidor acepta la conexión, algo así como llamar a un
número telefónico y que te contesten el teléfono.
▸ Una vez establecida la conexión, el equipo envía algo que se

llama una petición HTTP (lo veremos en la próxima
diapositiva) y el servidor hace una de dos cosas:
▹ si se puede encontrar la página solicitada, se devuelve
en una respuesta HTTP.
▹ Si el servidor no encuentra la página solicitada, se
devuelve un “error 404 not found" que es una respuesta
especial, que es todo lo que vemos de cuando se escribe
mal una dirección URL.
5
HTTP (HyperText Transfer Protocol)
▸ En la world wide web, las computadoras no se comunican
con palabras, sino que utilizan protocolos como HTTP
(HyperText Transfer Protocol).
▸ HTTP es una forma de estructura de peticiones y

respuestas de recursos web que son entendidas
claramente y sin ambigüedad por un ordenador.
▸ Además de utilizar un protocolo para gestionar la

transferencia de información, el contenido real que se
transfiere y presenta por el navegador también sigue un
formato muy preciso llamado HTML (HyperText Markup
Language). 6
HTML (HyperText Markup Language)
▸ HTML es un lenguaje para describir las
páginas web.
▸ HTML es un lenguaje de etiquetas
(Markup). Las etiquetas describen el
contenido del documento.
▸ Los documentos HTML contienen
etiquetas HTML y texto plano.
▸ Es un documento de texto compuesto
por etiquetas y contenido. Todos los
sitios se muestran en forma de HTML
en un navegador.
7
Estructura
Cliente
Servidor
8
Estructura Cliente - Servidor
PHP, ASP.NET, Python, Ruby, Etc. HTML CSS Javascript
El Servidor ejecuta lenguajes de programación y siempre devuelve

HTML, que es ejecutado desde la computadora Cliente (mediante el
navegador). Los navegadores “renderizan” (entienden) solamente
HTML, CSS y JS. El resto se ejecuta del lado del servidor.
9
En el Cliente
Validaciones e interacciones complejas Diseño del sitio
Estructura y contenidos del sitio
El código Javascript (es un lenguaje de programación) se ejecuta del

lado del cliente. El CSS es una hoja de estilos (estructura de código)
que permite darle diseño al HTML.
10
¿Pagina Web = Sitio Web?
Una página Web está compuesta por un sólo archivo

HTML.
Un sitio Web es un conjunto de páginas web, con

enlaces internos y externos (menú de navegación)
con mayor interacción con el usuario
11
Etiquetas - TAGS
▸ Los tags forman la estructura de un sitio en

HTML
▸ Cada uno tiene atributos que permiten setear
características específicas.
▸ Algunos son jerárquicos e indispensables
Requerimientos para escribir un HTML

▸ Editor de texto (Bloc de notas, Notepad++, etc.)
▸ Navegador de Internet (IE, Firefox, Chrome,
Safari, Opera, etc.)
12
Formato de TAGS
Tag que abren y cierran

<tag> contenido </tag>
Tag que no tienen cierre o que cierran sin contenido

dentro
<tag>
13
Etiquetas HTML
HEAD Contiene información sobre la página que

sirve para los buscadores y navegadores. También
contiene el título de la misma.
BODY Todo el contenido visible para el usuario en la

página. Puede tener subdivisiones semánticas
(HTML5) que veremos más adelante.
14
Estructura básica de una página
<html>
<head>
tags para el head
</head>
<body>
tags para el body
</body>
</html>
15
Estructura básica de una página
<head>
<title> Nombre de la página</title>
</head>
<body>
<h1> Título de la página</h1>
<h2> Subtítulo de la página</h2>
<p> Este es un párrafo</p>
</body>
16
TAGS HTML
Títulos:
<h1> ... <h6> Contiene los títulos y subtítulos de la página.
El h1 es el más importante, sólo hay uno por página.
<h1>Mi página web</h1>
<h3>Mi equipo favorito</h3>
Párrafo: <p> Contiene varias líneas de texto.
<p>Esta es mi primer página web. Está hecha en HTML</p>
El tag <br> inserta saltos de línea dentro de un mismo párrafo.
17
TAGS HTML
Hipervínculos:
<a>
Es el que nos permite insertar un link en la página
(tanto interno como externo).
<a href="http://campus.ort.edu.ar" title="Escuela"> Campus Virtual ORT</a>
<a href="otraPagina.html" title="Otra Pagina">Ver mas datos</a>
href: dirección de destino.

title: texto que aparece cuando posiciona el mouse sobre el link.
18
TAGS HTML
Imagenes
<img>
<img src="imagenes/imagen.jpg" alt="descripción de la imagen“ />

<img src="http:/bancodeimagenes.com/imagen.jpg" alt="la imagen“ />
Atributos:
src: ruta en donde se encuentra la imagen. (carpeta de imágenes).
alt: texto pequeño que describe la imagen.
19
TAGS HTML
DIV
En un documento HTML el tag "div" permite crear
divisiones, también llamadas secciones o zonas.
Las divisiones se utilizan para agrupar elementos y aplicarles
estilos.
<div>
<p>Parrafo 1</p>
<a href=”vermas.html” title=”Ver mas”>Ver mas datos</a>
</div>
20
TAGS HTML
21
Inspeccionar página (F12)
Lo interesante que tiene

nuestro navegador es que
podemos inspeccionar
cualquier página y ver su
contenido html
(entre muchísimas cosas
más que hay).
Así podemos ver como fue
creada una página web.
22
Bibliografía en INTERNET
Podemos ver las diferencias entre HTML y HTML5 en

https://campus.almagro.ort.edu.ar/articulo/1123374/de-html-a-html5
Podemos ver una lista completa de Tags con sus funciones en

http://www.htmlquick.com/es/reference/tags.html
Tutorial de HTML con todos los tags

https://www.w3schools.com/html/
23

HTML - 2021

Cargado por

Copyright:

Formatos disponibles

HTML - 2021

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

HTML - 2021

Cargado por

Copyright:

Formatos disponibles

LENGUAJE WEB

▸ Localizador de recursos uniforme, más comúnmente

▸ Echemos un vistazo a una URL y ver cómo se consigue

▸ La pc establece una conexión con la dirección IP del servidor y

▸ Una vez establecida la conexión, el equipo envía algo que se

▸ HTTP es una forma de estructura de peticiones y

▸ Además de utilizar un protocolo para gestionar la

PHP, ASP.NET, Python, Ruby, Etc. HTML CSS Javascript

El Servidor ejecuta lenguajes de programación y siempre devuelve

Estructura y contenidos del sitio

El código Javascript (es un lenguaje de programación) se ejecuta del

Una página Web está compuesta por un sólo archivo

Un sitio Web es un conjunto de páginas web, con

▸ Los tags forman la estructura de un sitio en

Requerimientos para escribir un HTML

Tag que abren y cierran

Tag que no tienen cierre o que cierran sin contenido

HEAD Contiene información sobre la página que

BODY Todo el contenido visible para el usuario en la

href: dirección de destino.

<img src="imagenes/imagen.jpg" alt="descripción de la imagen“ />

Lo interesante que tiene

Podemos ver las diferencias entre HTML y HTML5 en

Podemos ver una lista completa de Tags con sus funciones en

Tutorial de HTML con todos los tags

También podría gustarte