Clase 1 - Programacion III - HTML 1

Descargar como pptx, pdf o txt
Descargar como pptx, pdf o txt
Está en la página 1de 14

HTML

En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el


HTML 2.0 primer estándar oficial de HTML, es decir, el HTML 1.0 no existió como estándar.
HTML 2.0 no soportaba tablas.

La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de HTML


HTML 3.2 publicada por el W3C (Consorcio internacional). Esta revisión incorporó los últimos
avances de las páginas web, como applets de Java y texto que fluye alrededor de las
imágenes.

Esta especificación oficial de HTML se publicó en diciembre de 1999 y se denomina


HTML 4.01 HTML 4.01. Contemplaba, distintas variantes de la version, STRICT, TRANSITIONAL y
FRAMESET.

El consorcio internacional W3C, después de una evolución de varios años, liberó el


HTML 5 como estándar oficial a finales de octubre de 2014. HTML 5 incorpora
HTML 5 nuevas etiquetas, se introduce la posibilidad de introducir audio y video de forma
directa en la web sin necesidad de plugins, etc.
HTML  Hypertext Markup
Language
<!DOCTYPE html>  Le decimos al navegador que este
archivo es del tipo html:5
Nota: SIEMPRE LOS TAGS COMIENZAN Y TERMINAN CON
PARENTESIS ANGULARES < >
<html lang="es">  Es la etiqueta "padre" donde vivirá
nuestro proyecto. El atributo lang establece el idioma del sitio web.
<head> </head>  Este elemento se usa para definir la
información necesaria para configurar la página web
<body> </body>  Este elemento delimita el contenido del
documento (la parte visible de la página).
Nota: EXISTEN TAGS DE INICIO Y CIERRE.
HTML  Tags dentro de
<head>
<head>
<meta charset="UTF-8" /> Este atributo nos ayuda a la hora de incluir
caracteres especiales y emojis en nuestro proyecto.
<meta name="description"content="Esta página es de Programación III" />
Muestra una descripción de nuestro sitio en los buscadores.
<meta name="robots"content="index,follow" /> Le dice a los robots de los
navegadores que rastreen nuestra página y la muestran en las búsquedas
<title>Mi página</title> Título de nuestra página, es el que ves en
la pestaña del navegador
HTML  Tags dentro de
<head>
<meta name="viewport"content="width=device-width, initial-scale=1.0" />
Para trabajar en proyectos reponsive
<link rel="stylesheet"href="./css/style.css"> Enlaza archivos de estilos u
otros archivos que necesitemos en nuestro proyecto
<style>código CSS</style> Este elemento se usa para declarar estilos CSS
dentro del documento
<script>código Javascript</script> Este elemento se usa para cargar o
declarar código JavaScript
</head>
HTML

<!DOCTYPE html>
<html lang="es">
<head>
<title>Programación III</title>
</head>
<body>
CONTENIDO DE LA WEB. letra ñ y acentos ó
</body>
</html>
HTML

Caracteres especiales:
<meta charset="utf-8">

Buscadores:
<meta name="description" content="Esta es la web de
Programación III de la UTN FRVM">
<meta name="keywords" content=“Tecnicatura, UTN,
FRVM">
HTML  Estructura de
<body>
HTML  Tags de estructura de
<body>
<header> Este elemento define la cabecera del cuerpo o de
secciones dentro del cuerpo.

<nav> Este elemento define una división que contiene ayuda para
la navegación, como el menú principal de la página o enlaces.
Puede ir dentro del tag <header>.

<main> Este elemento define una división que contiene el


contenido principal del documento.

<section> Este elemento define una sección genérica. Se usa para


organizar el contenido principal.
HTML  Tags de estructura de
<body>
<aside> Define una división que contiene información relacionada
con el contenido principal pero que no es principal.4

<article> Este elemento representa un artículo independiente.

<div> Este elemento define una división genérica.

<footer> Este elemento define el pie del cuerpo o de secciones


dentro del cuerpo.
Caracteres
HTML  Tags de estructura de
<body>
HTML  Atributos
Globales
Id - Este atributo nos permite asignar un identificador único a un
elemento.
Class - Este atributo asigna el mismo identificador a un grupo de
elementos.

<section id="seccion2">
<div class="producto">Producto 1</div>
<div class="producto">Producto 2</div>
<div class="producto">Producto 3</div>
</section>
HTML 
Textos
<h1> <h2> <h3> <h4> <h5> <h6> - Títulos en 6
niveles.
<p> - Este elemento representa un párrafo. Por defecto, los
navegadores le asignan un margen en la parte superior para separar
un párrafo de otro.
<span> - Este elemento puede contener un párrafo, una frase o una
palabra. No aplica ningún estilo al texto pero se usa para asignar estilos
personalizados, como veremos en próximos capítulos.
<br> - Este elemento se usa para insertar saltos de línea.
<blockquote> -Este elemento representa un bloque de texto
que incluye una cita tomada de otro texto en el documento.
HTML 
Textos
<em> -Este elemento se usa para indicar énfasis. El texto se
muestra por defecto con letra cursiva.
<strong> -Este elemento es utiliza para indicar importancia. El
texto se muestra por defecto en negrita.
<i> -El texto se muestra por defecto con letra cursiva.
<u> -Por defecto se muestra subrayado.
<b> -El texto se muestra por defecto en negrita.
<small> -Este elemento representa letra pequeña, como
declaraciones legales.
HTML 
Textos
<pre> -Este elemento representa un texto con formato predefinido, como
código de programación o un poema.
<code> -Este elemento representa código de programación. Se usa en
conjunto con el elemento <pre> para presentar código de programación en el
formato original.

<article>
<pre>
<code>
function cambiarColor()
{ document.body.style.backgroundColor =
"#0000FF";
}
document.addEventListener("click",
cambiarColor);
</code>
</pre>
</article>

También podría gustarte