Scribd
Cargar
30 vistas30 páginas

Clase 2

El documento presenta una clase sobre programación web front end. Explica conceptos básicos de HTML como etiquetas, estructura de una página web, y más. También indica los contenidos que se abordarán a lo largo del curso.

Cargado por

Rafael Agustín Scalabrone Vuyovich
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
30 vistas30 páginas

Clase 2

El documento presenta una clase sobre programación web front end. Explica conceptos básicos de HTML como etiquetas, estructura de una página web, y más. También indica los contenidos que se abordarán a lo largo del curso.

Cargado por

Rafael Agustín Scalabrone Vuyovich
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 30

POTRERO DIGITAL

PROGRAMACIÓN WEB FRONT END

CLASE
2

Milagros González López


Presentación

Prof. Milagros
González López
Día y horario:
Martes de 18 a 19.30 hs

Duración del curso:


12 semanas

Milagros González López


Normas de
convivencia
Mic apagado

Momento de
preguntas

Grupo de Whats
App

Consultas por
privado

Milagros González López


Condiciones de
aprobación
Asistencia a clases en vivo o por
grabación (75%)
Entrega de ejercicios obligatorios
¡Avisar actualizaciones por WA!
Aprobar el proyecto final

Milagros González López


CONTENIDOS A ALCANZAR

Milagros González López


¿Qué es HTML?
Es un "lenguaje" de marcado de etiquetas, que
permite crear documentos para web. Durante el
curso estaremos viendo HTML, incluyendo toda su
estructura y etiquetas.
Los siguientes términos serán de uso frecuente:
Etiqueta.
Atributo.
Estructura

Milagros González López


Modelo cliente-servidor
Al abrir un browser o navegador, e ingresar una
página web, se lo suele hacer por su nombre, por
ejemplo:
https://plataforma.potrerodigital.org/

A lo largo de toda la red de internet, hay una


serie de máquinas que hacen de “agenda” y nos
dan la dirección IP.
La dirección IP es un conjunto de números
que identifica, de manera lógica y jerárquica, a
una interfaz en red.

Milagros González López


Modelo cliente-servidor
Cuando la petición llega al servidor, el
mismo resuelve:
Si el sitio efectivamente está en
ese servidor. Qué directorio (o
carpeta) corresponde con ese
sitio web.
Qué archivo está siendo solicitado
(si no es ninguno, siempre se
busca uno por defecto).
Qué tecnologías conforman esos
archivos.

Milagros González López


Modelo cliente-servidor

Milagros González López


¿Conocés estos conceptos?

Milagros González
López
CONOCIENDO HTML

HTML HyperText Markup Language:


Lenguaje de marcado de hipertexto.
Define la estructura, semántica y contenido de las páginas Web.
El navegador (cliente) interpreta el HTML y lo representan en pantalla.
Permite agregar texto, imágenes, enlaces, tablas, listas, formularios, etc.
Última versión del estándar: HTML 5.
No todos los navegadores son capaces de interpretar un mismo código
de una manera unificada (siempre debemos probar que funcione en la
mayoría de ellos).
Utiliza etiquetas (tags) que definen la estructura del documento.
Texto plano con extensión .html

Hipertexto: Sistema que permite enlazar fragmentos de textos entre sí.


Permite que la lectura no sea lineal, sino que el usuario acceda a la
información a través de los ítems relacionados
CONOCIENDO HTML
SINTAXIS DE HTML
ETIQUETAS
ETIQUETAS BÁSICAS
ETIQUETAS BÁSICAS
ESTRUCTURA DE UNA PÁGINA WEB
ETIQUETAS SEMÁNTICAS
¿Cómo se ve en el código?
¿Cómo se ve en el código?

<!DOCTYPE html> Indica que la versión corresponde a HTML5.

<html lang= “es”> Es la etiqueta principal que engloba al resto de las etiquetas, el atributo lang
define el tipo de lenguaje.

<head> Es la cabeza del documento que contiene los metadatos de la página web.
<meta charset="utf-8"/> Indica al navegador qué tipo de caracteres contiene la página, con el
atributo charset vamos a indicar el conjunto de caracteres que vamos a usar y con el valor "utf-8"
abarcamos a la mayoría de los sistemas de escritura.
<title> Indica el título de la página Web, que se visualiza en la barra de título del navegador.
<body> Es el cuerpo del documento donde va a estar todo el contenido que vamos a mostrar
Otras etiquetas...
ETIQUETA + ATRIBUTO
LISTAS
LISTAS DEPENDIENTES
LISTAS DE DEFINICIÓN
ENLACES
ENLACES
ENLACES
¡A PRACTICAR!

Consigna
ELABORAMOS UNA
PÁGINA WEB QUE
PRESENTE UNA
RECETA

Milagros González López

También podría gustarte