Scribd
Cargar
30 vistas

Clase 3 3k1_HTML_CCS

El documento detalla las actividades y requisitos para el curso de Desarrollo Web y HTML en la Universidad Tecnológica Nacional, incluyendo la creación de un portafolio individual en GitLab. Se abordan conceptos clave como el protocolo HTTP, la estructura y elementos de HTML, así como la implementación de formularios y gráficos. Además, se proporcionan recursos y enlaces útiles para el aprendizaje de Git y desarrollo web.

Cargado por

velasquezmaribel534
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 PPTX, PDF, TXT o lee en línea desde Scribd
30 vistas

Clase 3 3k1_HTML_CCS

El documento detalla las actividades y requisitos para el curso de Desarrollo Web y HTML en la Universidad Tecnológica Nacional, incluyendo la creación de un portafolio individual en GitLab. Se abordan conceptos clave como el protocolo HTTP, la estructura y elementos de HTML, así como la implementación de formularios y gráficos. Además, se proporcionan recursos y enlaces útiles para el aprendizaje de Git y desarrollo web.

Cargado por

velasquezmaribel534
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 PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 62

Desarrollo Web y

HTML
Universidad Tecnológica Nacional
Facultad Regional Córdoba
Cátedra: Desarrollo de Software (DDS)
Portfolio de Actividades en Clase
Además de los trabajos grupales cada alumno debe mantener un portafolio
individual
Crear un proyecto en gitlab (labsys) donde tenés que versionar todos los
trabajos que hagas durante el cursado.

Crearlo en:
https://labsys.frc.utn.edu.ar/gitlab/desarrollo-de-software1/proyectos2025/3k1/
portafolios/portafolio_36697_Romero

Patrón para el nombre: portafolio_[legajo]_[apellido]


Ejemplo de nombre: portafolio_36697_Romero

De la actividad en el portfolio dependerá la nota final


Git - machetes

Aprendiendo a Usar Git


https://docs.google.com/presentation/d/16aioHVY3uLf-f8UZ3brU-icn1swMlVBW1Hc6OQMPfDU/edit?usp=sharing

Hoja de Referencia Para Git


https://training.github.com/downloads/es_ES/github-git-cheat-sheet.pdf
Consideraciones en Laboratorios
Link:
https://docs.google.com/presentation/d/115bwoDiRqdolkclWL6AjzYUTl8N-MbpxV
Gg0nl5HIGU/edit?usp=sharing

Ayuda memoria git

https://docs.google.com/presentation/d/16aioHVY3uLf-f8UZ3brU-icn1swMlVBW1Hc6OQMPfDU/e
dit?usp=sharing
Temario
- Formularios:
- controles,
- método de envío,
- referencia
- CSS:
- esquemas de uso,
- retomar estilos inline,
- etiqueta STYLE,
- archivo independiente vinculado,
- concepto de cascada y nivel de precedencia.
- .gitignore: https://www.toptal.com/developers/gitignore
- Devtools del navegador (usamos la de chrome)
- Responsive? (Vimos el sitio de la página del departamento)
Conceptos importantes

● Protocolo HTTP: HyperText Transfer Protocol


● URL: Uniform Resource Locator
● DNS: Domain Name System
● Servidor web: IIS, Apache, Nginx, Lighttpd
● Clientes web: Chrome, IE, Firefox, Maxthone, Safari
● Documentos HTML: HyperText Mark-up Language
● Sitios web estáticos vs. dinámicos
Protocolo HTTP
● Protocolo HTTP: HyperText Transfer Protocol
● Es el protocolo usado en cada transacción de la World Wide
Web
● HTTP define la sintaxis y la semántica que utilizan los
elementos de software de la arquitectura web (clientes,
servidores, proxies) para comunicarse
● Es un protocolo orientado a transacciones y sigue el esquema
petición-respuesta entre un cliente y un servidor
● HTTP es un protocolo sin estado (stateless)
Estructura de formulario sin css
Base -> HTML

https://labsys.frc.utn.edu.ar/gitlab/desarrollo-de-
software1/proyectos2024/3k2/martes/css-html-forms-
etc
Mensajes HTTP

Ejemplo de mensajes HTTP


GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: nombre-cliente
[Línea en blanco]

HTTP/1.1 200 OK
Date: Fri, 31 Dec 2003 23:59:59 GMT
Content-Type: text/html
Content-Length: 1221

<html>
<body>
<h1>Página principal de mi sitio web</h1>
(Contenido)
.
.
.
HTTP
cliente servidor

http://www.example.com/inicio.html

DNS www.example.c
IP=66.45.26.25 - Puerto: 80 HTTP request om
66.45.26.25

<html>
<body>
Pagina principal
X
de mi sitio web
</body>
Pagina principal HTTP response </html>
de mi sitio web
HTTP: métodos
● HTTP define métodos (o "verbos") que indican la acción que
desea que se efectúe sobre el recurso identificado

○ HEAD
○ GET
○ POST
○ PUT
○ DELETE
○ TRACE
○ OPTIONS
○ CONNECT
HTTP: códigos de estado

1xx - Mensajes
2xx - Operación exitosa
3xx - Redirección
4xx - Error por parte del cliente
5xx - Error del servidor
HTML
HTML es un lenguaje de marcas que se utiliza
para describir la estructura de un documento web

● HTML viene de Hyper Text Markup Language


(Lenguaje de Marcas de Hipertexto)
● Un lenguaje de marcas está compuesto por
una serie de etiquetas (tags)
HTML: etiquetas (tags)
Las etiquetas HTML son palabras clave encerradas entre
"<" y ">"
<etiqueta>contenido</etiqueta>

● Los tags HTML generalmente vienen en pares como


<p> y </p>
● El primer tag es el de inicio, mientras que el segundo
es el tag de cierre
● El tag de cierre lleva una barra antes del nombre de
tag
HTML: atributos
Las etiquetas HTML pueden tener atributos
<etiqueta atributo="valor">contenido</etiqueta>

● Los atributos brindan información adicional


acerca de un elemento
● Siempre se definen en el tag de inicio
● Vienen en pares nombre valor:
nombre="valor"
HTML: contenido
No todos los elementos tienen contenido de texto plano.
Hay elementos que son:

● Elementos Vacíos: existe solo una etiqueta de


apertura y cierre

● Elementos anidados: elementos que pueden


contener otros elementos

● Elementos compuestos: elementos que por


definición son usados en conjunción con otros
elementos
HTML: estructura
La estructura básica de un documento html contiene los
siguientes elementos
<!DOCTYPE html>
<html>
<head>
<title>Mi Documento</title>
</head>
<body>
<!-- Cuerpo del elemento HTML -->
</body>
</html>
zz
HTML: elementos
Encabezados

<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6>

Párrafo
<p>Lorem ipsum</p>
HTML: elementos
Listas
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

Salto de línea
<br> <br />

Línea horizontal
<hr> <hr />
HTML: caracteres especiales
Hay caracteres que no son parte del conjunto de
caracteres ASCII y hay algunos que tienen un
significado especial en HTML
&nbsp;
&copy; ©
&aacute; á
&eacute; é
&iacute; í
&ntilde; ñ
&#269; č
&#x112; Ē
HTML: elementos
div: representa una división o bloque de contenido
<div id="encabezado">
<h1>Mi P&aacute;gina</h1>
</div>

img: imagen
<img source="logo.png" alt="logo" title="Mi Sitio" />
HTML: elementos
HTML5 define nuevos elementos para estructurar
documentos, con mayor valor semántico que el
elemento div
Algunos de ellos son:
<article>
<details>
<dialog>
<figure>
<footer>
<header>
<main>
img: imagen
<nav>
<section>
<summary>
HTML: elementos
enlaces
<a href="http://google.com" target="_blank">Google</a>
<a href="contacto.html" target="_self">Contacto</a>

<a name="arriba">Principio de Página</a>


.
.
.
<a href="#arriba">Ir al principio</a>
HTML: elementos
tablas
<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
<tr>
<td>Celda 1,1</td>
<td>Celda 1,2</td>
</tr>
<tr>
<td>Celda 2,1</td>
<td>Celda 2,2</td>
</tr>
<tr>
<td>Celda 3,1</td>
<td>Celda 3,2</td>
</tr>
</table>
HTML: elementos
encabezado y pié en tablas
thead, tbody y tfoot no afectan la distribución de la tabla, pero permiten diferenciar estos
elementos mediante estilos css
<table>
<thead>
<tr>
<th>Mes</th>
<th>Ingresos</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Enero</td>
<td>$100</td>
</tr>
<tr>
<td>Febrero</td>
<td>$80</td>
</tr>
</tbody>
</table>
HTML: elementos
combinar celdas
<table>
<tr>
<th>Columna 1</th>
<th>Columna 2</th>
</tr>
<tr>
<td colspan="2">Celda 1,1</td>
</tr>
<tr>
<td rowspan="2">Celda 2,1</td>
<td>Celda 2,2</td>
</tr>
<tr>
<td>Celda 3,2</td>
</tr>
</table>
HTML: formularios
● La mayoría de las aplicaciones web necesitan recibir
información de entrada, esto es posible a partir de los
elementos de formulario HTML

● Para definir un formulario se utilizan las etiquetas form y


los elementos de formulario en su interior
<form>
<!-- elementos de formulario -->
</form>
HTML: formularios
● El elemento form tiene dos atributos que definen
como va a ser enviado y quien va a procesar esos
datos:
○ method: tipicamente GET o POST, por defecto
será GET
○ action: url del programa o script que procesará la
entrada
<form name="login" method="GET" action="autenticar.asp">
<!-- elementos de formulario -->
</form>
HTML: elementos de formulario
● Input
○ Text
○ Password
○ CheckBox
○ Radio
○ Submit
○ Reset
○ File
○ Hidden
○ Image
○ Button
● TextArea
● Select
● Button
HTML: elementos de formulario
input
<Input Type="text" value="Valor" size=NN maxlength= NN>

<Input Type="password" value="Valor" size=NN maxlength= NN>

<Input Type="radio" name="TipoDocumento" value="DNI" checked>DNI<br>

<Input Type="radio" name="TipoDocumento" value="LE">LE<br>

<Input Type="checkbox" name="AirBa" value="SI" checked>Airbag<br>

<Input Type="checkbox" name="Direccion" value="NO">Direccion asistida<br>

<Input Type="hidden" name="Direccion" value="NO">Direccion asistida<br>

<Input Type="file" name="FileName">


HTML: elementos
lista desplegable
<select name="Tipo Documento">
<option value="DNI">Doc. Nac. Identidad</option>
<option value="LE" selected>Libreta de Enrolamiento</option>
<option value="LC">Libreta Civica</option>
<option value="PASAPORTE">Pasaporte</option>
</select>

lista (solo hay que incluir el atributo size)


<select name="Tipo Documento" size="3">
<option value="DNI">Doc. Nac. Identidad</option>
<option value="LE" selected>Libreta de Enrolamiento</option>
<option value="LC">Libreta Civica</option>
<option value="PASAPORTE">Pasaporte</option>
</select>
HTML: elementos de formulario
área de texto
<textarea name="Comentario" cols="60" rows="5" wrap="soft">

</textarea>
HTML: elementos de formulario
enviar y restablecer un formulario
<Input Type="submit" Name = "Nombre1"
value="Presione aquí" para enviar">

<Input Type="reset"> Name="Nombre2"


value="Presione aquí" para restablecer">
HTML: soporte cross-browser
soporte cross-browser
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
HTML: nuevos tipos de input en HML5
● Input
○ color
○ date
○ datetime
○ datetime-local
○ email
○ month
○ number
○ range
○ search
○ tel
○ time
○ url
○ week
Gráficos: Canvas
● <canvas> Es un elemento usado para dibujar gráficos
en una página mediante scripts
● Es solo un contenedor, para dibujar los gráficos se
debe recurrir a un script
● Tiene métodos para dibujar líneas, cuadros, círculos,
texto
<canvas y agregar
id="miCanvas" imágenes
width="200" height="100" style="border:1px solid #000000;">
</canvas>

var c = document.getElementById("miCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
Gráficos: SVG
● <svg> viene de Scalable Vector Graphics
● Es un contenedor para gráficos vectoriales
Dibuja un círculo
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"
/>
</svg>

Dibuja una
estrella
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Comparación: Canvas vs SVG

canvas svg
● Dibuja gráficos 2D con Javascript ● Es un lenguaje para describir gráficos 2D
● Depende de la resolución en XML
● No soporta eventos ● Independiente de la resolución
● Capacidad limitada para renderizar ● Soporta eventos
texto ● Lento para gráficos complejos
● Se pueden salvar las imágenes ● No funciona bien para juegos
como .png o .jpg ● Cada figura es almacenada como un
● Va bien para juegos con uso intensivo objeto, si alguna de sus propiedades
de los gráficos cambia, el browser lo puede actualizar
● Se renderiza pixel por pixel. Una vez
que se dibujó, el browser se "olvida" del
gráfico
Audio
● El atributo controls agrega controles de audio como
play, stop, volumen, etc
● El texto entre los tags <audio> y </audio> se mostrará
si el navegador no soporta el elemento audio
● Se pueden usar múltiples elementos <source> el
browser mostrará el primer formato que reconozca

<audio controls>
<source src="mi_musica.ogg" type="audio/ogg">
<source src="mi_musica.mp3" type="audio/mpeg">
Su navegador no soporta el reproductor de audio.
</audio>
Video
● El atributo controls agrega controles de audio como
play, stop, volumen, etc
● El texto entre los tags <video> y </video> se mostrará
si el navegador no soporta el elemento audio
● Se pueden usar múltiples elementos <source> el
browser mostrará el primer formato que reconozca
● Es una buena práctica incluir los atributos width y
height.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Su navegador no soporta el reproductor de video.
</video>
Local Storage
● Con Local Storage las aplicaciones pueden almacenar datos
localmente en el navegador. De forma más versátil que con cookies.
● Local storage es seguro y se pueden almacenar grandes cantidades
de información sin afectar el desempeño del servidor
● A diferencia de las cookies se puede guardar mucha más información
(5mb como mínimo) y la información nunca se envía al servidor
● Local storage es por origen (por protocolo, por dominio). Todas las
páginas de un mismo origen pueden almacenar y acceder a los
mismos datos

// Guardar
localStorage.setItem("apellido", "Perez");

// Recuperar
document.getElementById("txtApellido").innerHTML = localStorage.getItem("apellido");
Hojas de Estilo en Cascada
¿qué es CSS?
body {
● CSS quiere decir Hojas de Estilo en font-family:Arial;
background: #000;
Cascada (Cascading Style Sheets) }

#contenido {
text-align:left;
width:1020px;
● Un Archivo CSS es típicamente un }

archivo de texto con extensión .css #encabezado{


height:232px;

que contiene una serie de comandos }

#pie{
y reglas width: 100%;
padding: 0 10px;
margin-bottom: 10px;

}
● Estas reglas le dicen a HTML como
se debe mostrar
beneficios de CSS

● Separación de contenido y presentación


● Beneficios de CSS
● Brinda control sobre la presentación
● Facilita el mantenimiento de múltiples páginas
● Agiliza la carga de las páginas
● Mejora la accesibilidad
● Fácil de aprender
HTML y CSS

HTML y CSS trabajan en conjunción para


ofrecer características estéticas y funcionales
a los
sitios Web

HTML = estructura
CSS = estilo
adjuntar una hoja de estilos

Hay 3 formas de agregar CSS a una página

● Inline
● Interna
● Externa
adjuntar una hoja de estilos

Hoja de estilos inline

<p style="color: red">Algún texto</p>


adjuntar una hoja de estilos

Hoja de estilos interna

<style type="text/css">
h1 {color: red)
</style>
adjuntar una hoja de estilos

Hoja de estilos externa

<link rel="stylesheet" type="text/css"


media="all" href="css/styles.css" />
estructura de una regla CSS

Una regla CSS consiste en un selector,


seguido por una o más declaraciones.

Una declaración es un par propiedad valor.


selectores

Un selector es, habitualmente, un elemento


HTML
body { property: value; }
h1 { property: value; }
em { property: value; }
p { property: value; }
selectores: Id y Class

Además de los elementos HTML, CSS nos


permite crear nuestros propios
selectores, llamados "id" y "class"
el selector id
● El selector id se usa para especificar el estilo para
un único elemento.
● El selector id usa el atributo id del elemento HTML
y se define con un "#"

/* Esta regla se aplica al elemento con id = "para1" */


#para1 {
text-align:center;
color:red;
}
el selector class
● El selector class se usa para especificar un estilo para un
grupo de elementos. A diferencia del selector id, el selector
class se utiliza para aplicar estilo a múltiples elementos
● Esto permite tener un conjunto de estilos para muchos
elementos de la misma clase.
● El selector class utiliza el atributo HTML class y se define con
un "."

/* Este estilo se aplica a todos los elementos con


class="center" */
.center {text-align:center;}
orden de la cascada
¿Qué estilo se aplica cuando hay varios estilos
definidos para un mismo elemento?

1. Browser default
2. Style sheet externa
3. Style sheet interna
4. Style sheet inline
propiedades y valores
Las propiedades y valores le dicen al elemento HTML
como se debe mostrar

body {background: purple;}


h1 {color: green;}
h2 {font-size: large;}
p {color: #ff0000;} /* rojo hexadecimal */
colores
Los colores en CSS se pueden definir de
tres formas distintas

● Un valor hexadecimal como "#ff0000"


● Un valor RGB como "rgb(255,0,0)"
● Un nombre de color como "red"
background
Las propiedades background de CSS se
usan para definir los atributos del fondo de
un elemento.

● background-color
● background-image
● background-repeat
repeat|repeat-x|repeat-y|no-repeat|initial|inherit
background
body {background-color:#b0c4de;}
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
body {background-image:url('logo.gif');}

background-image:url('gradiente.png');
background-repeat:repeat-x;

background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;

body {background:#ffffff url('img_tree.png') no-repeat right top;}


texto
● color del texto
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

● alineación
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
texto
● decoración
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

● transformación
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

● identación
p {text-indent:50px;}

También podría gustarte