Porque aprender html5

¿Por qué aprender HTML?

Cada página web que ves está escrita en un lenguaje llamado HTML. Imagina que HTML es el esqueleto que le da estructura a cada página web.

En este curso, usaremos HTML para añadir párrafos, encabezados, imágenes y enlaces a una página web.

CONTINUAMOS...

¿Ves el código con los símbolos de <>? ¡Eso es HTML! Al igual que cualquier otro lenguaje, tiene su propia sintaxis (reglas para la comunicación) especial.

Cuando ejecutemos, veremos que el navegador mostrara nuestro código de una manera mas visual puesto que la función de este es transformar el nuestro html en una página web reconocible!

El navegador sabe cómo distribuir la página, siguiendo la sintaxis HTML.

HTML

HTML significa HyperText Markup Language (lenguaje de marcado de hipertexto). Hipertexto quiere decir "texto que contiene enlaces." ¡Cada vez que haces clic en una palabra que te lleva a una nueva página web, haz hecho clic en un hipertexto!

Un lenguaje de marcado es un lenguaje de programación usado para que el texto haga más que solamente aparecer en una página; puede convertir el texto en imágenes, enlaces, tablas, listas, y mucho más. El lenguaje de marcado que aprenderemos es HTML.

CSS

¿Qué es lo que hace bonita a una página web? Eso es CSS—Cascading Style Sheets (hojas de estilo en cascada). Imagina que es la piel y el maquillaje que cubre los huesos del HTML. Primero aprenderemos HTML, después, nos ocuparemos del CSS.

La primera cosa que debemos hacer es configurar el esqueleto de la página.

COMO COMENZAR

a. Escribe siempre <!DOCTYPE html> en la primera línea. Esto le dice al navegador cuál es el lenguaje que está leyendo (en este caso, HTML).

b. Escribe siempre <html> en la segunda línea. Esto comienza el documento de HTML.

c. Escribe siempre </html> en la última línea. Esto finaliza el documento de HTML.

Terminología básica

Para aprender más HTML, debemos aprender cómo hablar sobre HTML. Ya viste que usamos mucho los símbolos <>.

Las cosas adentro de <> se llaman etiquetas.

Las etiquetas casi siempre vienen en pares: una etiqueta de inicio y una etiqueta de cierre.

Un ejemplo de una etiqueta de inicio: <html>

Un ejemplo de una etiqueta de cierre: </html>

Imaginemos...

Imagina que las etiquetas son como paréntesis; cuando abres uno, debes cerrarlo. Las etiquetas también pueden anidarse, así que debes cerrarlas en el orden correcto: la etiqueta abierta más recientemente debe ser la primera que se cierre, como en el ejemplo de abajo.

<segunda etiqueta>

¡Algún texto!

</segunda etiqueta>

</primera etiqueta>

Haz la cabecera

Todo dentro de nuestro archivo HTML irá en medio de las etiquetas de inicio <html> y de cierre </html>.

El archivo siempre consiste de dos partes:

La cabecera
El cuerpo

Vamos a concentrarnos en la cabecera.

y como se hace?

que hay de nuevo viejo!!

a. Tiene una etiqueta de inicio y una de cierre.

b. La cabecera incluye información importante, como el título de la página web.

c. El título son las palabras que vemos en la etiqueta (por ejemplo, el título de esta página es "Introducción a HTML").

¿QUE SON LOS METAS Y CUALES EXISTEN?

ver link

¿cuales son los que mas se utilizan y para que sirven?

¿que es seo?

¿para que sirve y como es robots.txt?

¿PARA QUE SIRVE Y COMO ES humans.TXT?

meta-datos

Todas estas etiquetas anteriores nos ayudan a definir cada una de las partes de una web como sus artículos sus menús y todos los diferentes elementos que tienen una pagina web en si.

Pero como etiquetar un nombre, un teléfono o cosas por el estilo.

Es aquí donde los microdatos juegan un papel importante en el nuevo estándar de la W3C

como ESTÁN compuestas

Funcionan de la siguiente manera.

Primero requieren:

Itemscope= Que es un contener de datos

Itemtype= Que es apartir de donde sacamos la definición de los datos

Itemprop= Esto que es donde esta el dato

Ejemplo:

 <!DOCTYPE HTML>
<html>
<head></head>
<body>
	<header>
		<nav></nav>
	</header>
	<section>
		<div itemscope itemtype="http://www.data-vocabulary.org/Person/">
			Me llamo <span itemprop="name"> Yhoan </span>
			Ma llaman <span itemprop="nickname"> Toño </span>
			Trabajo de <span> itemprop="title">  desarrollador de software y creando la vida</span>
			Mi web es <a href="http://www.hanoit.com" itemprop="url">Hanoit</a>
			Tengo un amigo que se llama <span itemprop="friend">  Juan David </span>
		</div>
		<article></article>
		<aside></aside>
	</section>
	<footer>
	</footer >
</body>
</html>

Esto es muy beneficiosos para saber que estoy hablando en mi web y que cosas trato dentro de ella

manos a la obra

Párrafos en el cuerpo

Hemos configurado muchas de las cosas básicas de tu archivo HTML para ti. Lo hicimos para que no te enfadaras con nosotros por tanta repetición; ¡apréndelas muy bien!

Hemos aprendido acerca de las etiquetas de inicio y de cierre. Cuando colocamos contenido en medio de las etiquetas, el trozo completo de código es llamado un elemento.

elemento = <etiqueta de inicio> + contenido + <etiqueta de cierre>

hagamos el cuerpo

<body>

<p>Hola soy el párrafo </p>

</body>

Y QUE ES EL CUERPO PROFE?

Párrafos y encabezados

¡Definitivamente estamos haciendo un buen progreso! Hemos aprendido cuándo y por qué usamos HTML. También hemos aprendido cómo:

a. Configurar un archivo HTML con etiquetas

b. Ponerle un título a la página web (en la cabecera, o <head>)

c. Crear párrafos (en el cuerpo, o <body>)

encabezados

El siguiente paso es colocar encabezados a nuestros párrafos, usando las etiquetas de encabezado.

Vamos a comenzar con la etiqueta <h1>, que marca una cosa como la más importante. (¡Todos saben que la fuente más importante es la más grande!)

¡Más sobre los encabezados!

En realidad, HTML nos permite tener más de un tamaño de encabezado. Hay seis tamaños de encabezado: ¡<h1> es el jefe de todos y <h6> es un yo!

<h1> - El Presidente Ejecutivo

<h2> - El Vicepresidente Elegante

<h3> - El director de algo

<h4> - El de gerencia intermedia

<h5> - El humilde asistente

<h6> - El que esta estudiando como yo :P

Repaso de mitad de clase

¡Has hecho un trabajo fantástico! Aquí hay un resumen rápido de las cosas que hemos aprendido:

-HTML se usa para dale estructura a los sitios web.

-Abrimos los archivos HTML usando un navegador, y el navegador traduce el archivo (nos lo muestra).

-Los archivos HTML tienen una cabecera y un cuerpo (¡así como tú tienes una cabeza y un cuerpo!)

-En la cabecera encontramos las etiquetas <title>, y las usamos para especificar el nombre de la página web.

-Cómo hacer encabezados y párrafos.

Código hasta el momento

<!DOCTYPE html>
<html>
	<head>
	   <title>Primera pagina</title>
	</head>
	<body>
		
	   <h3>Hola soy un encabezado</h3>	
	   <p>Holaaaa</p>	
	   <p>Holaaaaaaaa</p>	
	   <p>Holaaaaaaaaaaa</p>	
		
	</body>
</html>

Añadiendo imágenes

Puedes añadir imágenes a tus sitios web para hacer que se vean ultra fantásticos. Solamente necesitas una etiqueta de imagen, como: <img>. Esta etiqueta es un poco diferente a las demás. En vez de colocar el contenido en medio de las etiquetas, le dices a la etiquetas dónde está la imagen, usando src.

como se ve??

¿Ves la dirección web (o URL, por localizador de recursos uniforme) después de src=? Es "http://bit.ly/PK1euu". ¡Le dice a la etiqueta <img> de dónde obtener la imagen!

 <!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<img src="http://bit.ly/PK1euu"></img>
		<img src="http://bit.ly/PK1euu"></img>
	</body>
</html>

Haz clic en esa imagen

¡Bien hecho! Ahora ya sabes cómo añadir imágenes a tu sitio web. Pero, ¿qué tal si quisieras darle clic a esa imagen para que te llevara a algún otro sitio?

¿es con?

La etiqueta <a></a> es la que se usa para crear hipervínculos (o simplemente enlaces) en las páginas web. ¡Éstas son las palabras o imágenes en las que haces clic que te lleven a una nueva página!

Al igual que con <img>, <a> tiene un atributo que indica el enlace a donde vamos. En lugar de src, <a> usa href, de esta manera:

como se realiza una etiqueta a?

<a href="http://www.hanoit.com">¡Aprende HTML5!</a>

src significa "source" (fuente). ¡Le dice al enlace <img> de dónde proviene la imagen!

href significa "hypertext reference" (referencia de hipertexto). ¿Recuerdas cuando dijimos que el hipertexto (es decir, los enlaces) es texto sobre el cual puedes hacer clic? ¡Pues href le dice a ese enlace a dónde ir! El texto después de href es la dirección web, y el texto en medio de <a> y </a> es el texto sobre el que haces clic.

pero entonces como doy clic a la imagen y re-direcciono a google?







<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<a href="http://www.google.com">
		    <img src="http://bit.ly/PK1euu"></img>
		</a>
	</body>
</html>

ejercicio :D

Añade dos imágenes en medio de las etiquetas de cuerpo. Una debe ser un enlace; la otra no. El enlace puede conducir a cualquier sitio que quieras.

Después de las dos imágenes, crea un enlace que simplemente sea una línea de texto. Puede conducir a cualquier sitio que quieras.

solución

 <!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		
		<a href="http://www.google.com">
		    <img src="http://bit.ly/PK1euu"></img>
		</a>
		
		<img src="http://bit.ly/PK1euu"></img>
		
		<a href="http://www.google.com">
		    Hola
		</a>			</body>
</html>

ejercicio 2

 <!DOCTYPE html>
<html>
	<head>
		<title>Result</title>
	</head>
	<body><h1>YEAH SANDWICHES</h1>
	<img src="http://bit.ly/RhrMEn" />
		<p>I like eggs.</p>
		<p>And ham!</p>
		<p>But mostly sandwiches.</p>
	</body>
</html>

HAGAMOS MAS Y HABLEMOS MENOS

a. hacer listas ordenadas y no ordenadas

b. cambiar el tamaño, color y tipo de fuente

c. cambiar el color del fondo

d. alinear el texto

RIP HGROUP

PORQUE MURIÓ ESTA ETIQUETA SEMÁNTICA DE HTML5?