Lenguaje HTML

Repaso 2
Lenguaje HTML
HTML
• Vamos a crear nuestra primera página web.

• Abrir Notepad++
• Crear un archivo con extension en .html
• Agregar estructura base (Repaso 1 – diapo. 22)
• Agregar elementos como h1, p dentro de
body.
• Abrir archivo con algún navegador web y ver
resultados.
Atributos
• Los atributos dentro de una etiqueta entregan

mayor información sobre la misma.
– <img src=“ciisa.png” />
– <img src=“ciisa.png” alt=“Hola” width=“200”
height=“300” />
• Todos los tags pueden tener atributos.
• Siempre se especifican al comienzo del tag.
• Son del tipo: nombre=“valor”
https://www.w3schools.com/html/html_attributes.asp
Estilos
• Nuestro primera página web fue en blanco y

negro.
• Los estilos permiten cambiar colores, tipos de
fuentes, tamaños, etc...
<p style="color:red;">Texto rojo</p>

<p style="color:green;">Texto verde</p>
<p style="font-size:100px;">Texto gigante</p>
• <h1 style="background-color:Blue;">Curso
web</h1>
• Solo para texto (Ejemplo dentro de un <p>)
– <b> - Negrita
– <strong> - Negrita
– <i> - Cursiva
– <em> - Cursiva
– <mark> - Subrayado / Destacado
– <small> - Pequeño
– <del> - Tachado
– <ins> - Subrayado
– <sub> - Texto inferior
– <sup> - Texto superior
• Comentarios (No se muestran)

CSS
• Hojas de estilo en cascada

• Describe el estilo de un HTML
• Esta orientado a diseñadores
• Por lo general es un archivo distinto al mismo
HTML (De tipo nombre.css) y se incluye en la
página HTML dentro de <head>
<link rel="stylesheet" type="text/css" href=”nombr

e.css">
Colores
• La selección de colores se puede hacer de

diferentes maneras:
– HEX
– RGB y RGBA
– HCL y HCLA
– Nombre de color (predefinidos)
La A indica un canal Alpha (Transparencia /

Opacidad)
Colores
• Ingresar a:
– http://www.color-hex.com/
– https://www.w3schools.com/colors/colors_picker.
asp
Ejemplo CSS
body {
background-color: #FF6347;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: arial;
font-size: 20px;
}
Selección de elementos
• Con CSS se pueden aplicar estilos a:

Tipo Ejemplo Descripción
clases .titulo Todos los tags que tengan

class=“titulo”
id #primerafoto Todos los tags que tengan
id=“primerafoto”
elementos p Todos los tags de tipo <p>
elementos,elementos div,p Todos los tags de tipo <p> que se

encuentren dentro de un <div>
https://www.w3schools.com/cssref/css_selectors.asp
JavaScript
• JavaScript es el lenguaje de programación

para HTML.
• Es un lenguaje de programación orientado a
objetos.
• Permite la manipulación de todos los objetos
(tags).
– Cambiar texto
– Cambiar atributos
– Agregar elementos / Quitar elementos
Consola JavaScript
• Los navegadores permiten interactuar

mediante JavaScript con una aplicación web.
• Además, si el código de la aplicación posee

salidas de JavaSript de tipo: console.log()
aparecerán en esa consola.
Acceso a elementos HTML
• Con JS, se accede a los elementos de una

página HTML mediante:
document.getElementById(”identificador")
Por ejemplo:
<p id=“identificador”>Hola curso</p>
Sintaxis de JS
• La sintaxis de JS es bastante simple, y por lo

general cada linea de código se puede escribir
de
var x, y, z; (Declaración de variables)
x = 4; y = 11; (Asignación de variables)
z = x + y; (Operación aritmética)
Agregando JS en un botón
<button type="button"
onclick="alert(1+1)">Presione aquí</button>
<button type="button"
onclick="alert(‘texto’)">Presione aquí</button>
JavaScript
• Ejemplo (Archivo adjunto en aula js.html)

¿Cómo se agrega JS en mi sitio?
• Se puede agregar en cualquier parte del

código de una aplicación web.
• Por lo general se agrega previo al cierre del
</body>
<script>
document.getElementById(”identificador").inne
rHTML = ”código javascript";
</script>
¿Cómo se agrega JS en mi sitio?
• Mediante archivos con extensión .js

• Estos archivos pueden ser locales o remotos
• Locales:
<script src=”archivo.js”></script>
• Remotos:
<script
src="https://ajax.googleapis.com/ajax/libs/jquer
yui/1.12.1/jquery-ui.min.js"></script>
Problemas al cargar JS remotos
• Disponibilidad: ¿qué pasa si el archivo ya no

existe? ¿qué pasa si el dominio ya no existe?
• Velocidad de carga: ¿qué pasa si el archivo
esta en China?
• Seguridad: Tu no administras el archivo JS! El
contenido de ese archivo puede cambiar por
uno malicioso sin saberlo.
Problemas al cargar JS remotos
• Al cargar un JS remoto, tu navegador envía las

cookies al servidor remoto.
• Pueden agregar por ejemplo: Eventos a
formularios de autenticación, eventos a
cuando ingresas datos de tarjetas de crédito,
etc.
Actividad
• Pruebe los distintos tipos de estilos para texto

en su primer sitio web.
• Agregue 1 archivo CSS a una página web.
– Agregue estilos por clase, id y elemento (tag)
• Pruebe funcionalidades JavaScript.

– Cree alertas
– Modifique texto
– Etc...

Lenguaje HTML

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Lenguaje HTML

Загружено:

Авторское право:

Доступные форматы

Repaso 2

• Vamos a crear nuestra primera página web.

• Los atributos dentro de una etiqueta entregan

• Nuestro primera página web fue en blanco y

<p style="color:red;">Texto rojo</p>

• Hojas de estilo en cascada

<link rel="stylesheet" type="text/css" href=”nombr

• La selección de colores se puede hacer de

La A indica un canal Alpha (Transparencia /

• Con CSS se pueden aplicar estilos a:

clases .titulo Todos los tags que tengan

elementos,elementos div,p Todos los tags de tipo <p> que se

• JavaScript es el lenguaje de programación

• Los navegadores permiten interactuar

• Además, si el código de la aplicación posee

• Con JS, se accede a los elementos de una

• La sintaxis de JS es bastante simple, y por lo

• Ejemplo (Archivo adjunto en aula js.html)

• Se puede agregar en cualquier parte del

• Mediante archivos con extensión .js

• Disponibilidad: ¿qué pasa si el archivo ya no

• Al cargar un JS remoto, tu navegador envía las

• Pruebe los distintos tipos de estilos para texto

• Pruebe funcionalidades JavaScript.

Вам также может понравиться