Curso básico Html

¿Qué es Html?

HTML es un lenguaje de programación que se utiliza para el desarrollo de páginas de Internet. Se trata de la siglas que corresponden a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto

Programa que utilizaremos

principalmente entenderemos que para
manejar Html podremos utilizar varias plataformas
tales como: Bloc de notas, Word pad, note pad.
nosotros trabajaremos con Sublime text, descargaremos
este programa directamente de la internet.

1. El html se compone por

Etiquetas

Las etiquetas le dicen al visualizador de páginas web el estilo que debe de ir lo que está dentro de ella,estas etiquetas deben abrirse y cerrarse éstas son:

Dentro de esta etiqueta irá todo el contenido de la
página Web, con esta etiqueta empezaremos y terminaremos.

Esta etiqueta se compone por ser el encabezado
de mi página web dentro de éste existe otra etiqueta
la cual es:

Dentro de esta etiqueta irá todo el cuerpo de mi página
como información, videos y el tema del que queramos tratar en la misma.

Atributos

Atributos son todo aquello que queremos aplicarle a lo
que hay dentro de una etiqueta, por ejemplo: Color, fondo de la página, tamaño de la fuente etc.

2. Estructura

Ahora que entendemos bien para qué sirven las etiquetas
y los atributos debemos comprender la estructura de nuestra página web para que funcione correctamente

Ésta se compone por:

3. Etiquetas generales

Las etiquetas son lo que necesitamos para
conformar nuestra página

Página web

Propiedades de la página

<body> ésta es una etiqueta que conforma
todo el cuerpo de nuestra página web.

Los atributos de básicos de ésta son:

<body bgcolor="#xxyyzz"> define el color de fondo de la página.
<body text="#xxyyzz"> define el color por defecto del texto en la página.
<body link="#xxyyzz"> define el color de los enlaces.
<body vlink="#xxyyzz"> define el color de los enlaces visitados.
<body alink="#xxyyzz"> define el color de los enlaces activos.
<body background="imagen.gif"> establece una imagen para el fondo de la página.
Todos estos parámetros se pueden agrupar en una única etiqueta <body>: <body bgcolor="#xxyyzz" text="#xxyyzz" link="#xxyyzz" vlink="#xxyyzz" alink="#xxyyzz">

Formato de texto

es la etiqueta para la negrita y se cierra
igual que las otras etiquetas con slash (/) 

 ...... marca el tamaño de los caracteres, donde X es un valor del 1 a 7, o un valor relativo (+ 1-7).
 ...... define el color del texto, donde XXYYZZ es un valor formado por letras y números que indica el color.
 ...... determina el tipo de la fuente.
La etiqueta puede incluir los tres parámetros (tamaño, fuente y color):

Imágenes

<img src="dirección de la imagen” "> indica la ruta de la imagen.
<img ... border=”X"> establece un borde de X pixels en torno a la imagen.
<img ... height="XX" width="YY"> establece un tamaño de la imagen (altura y anchura) en pixels.
<img ... alt="texto explicativo"> se muestra un texto al pasar el cursorsobre la imagen.
<img ... align="bottom"> alineación inferior del texto respecto de la imagen.
<img ... align="middle"> alineación del texto en el medio de la imagen.
<img ... align="top"> alineación superior del texto respecto de la imagen.
<img ... align="left"> alineación izquierda de la imagen en el párrafo.
<img ... align="right"> alineación derecha de la imagen en el párrafo.
<img ... hspace=X> espacio horizontal entre la imagen y el texto.
<img ... vspace=y> espacio vertical entre la imagen y el texto.

Formato de párrafos

salto de párrafo salto de línea <blockquote> </blockquote> sangrado. <center> centrar el texto. párrafo centrado. párrafo alineado a la izquierda. párrafo alineado a la derecha.

enlaces

<ahref=”http://www.servidor.com/directorio/pagina.htm”>Enunciado del enlace</a>
<a href=”mailto:dirección de mail”> Vínculo a una dirección de correo-e.
<a name=”marcador”> define un marcador (ancla) en un punto concreto de una página, para poder enlazarlo posteriormente.
<a href=”#marcador”> dirige un enlace interno al punto dónde está el marcador.
<a href=”dirección página#marcador”> dirige el enlace a un punto concreto de otra página.
Dentro del a href: target="_blank" Abre la página en un nuevo navegador. target=”_top” Abre la página en toda la pantalla para evitar los frames. title=”texto descriptivo del enlace” permite incluir una descripción del destino del enlace

4.Creamos páginas Web

Ahora que comprendemos los conceptos diseñaremos nuestra
primera página web.
principalmente abriremos un archivo el html y antes de empezar a realizar los siguientes pasos debemos guardar el archivo con .html por ejemplo: Primerpagina.html

pasos:
1.Abriremos la etiqueta <html> automáticamente nos deberá aparecer la estructura de html, si no ocurre esto lo haremos manualmente.

2.Luego de esto damos enter y abriremos la etiqueta <Head> en esta etiqueta irá contenido lo que deseamos ver en la pestaña de nuestra página web. dentro de esta etiqueta abriremos una nueva etiqueta llamada <title> ingresaremos el título dentro de esta y la cerraremos </title> y ahora sí cerraremos nuestra etiqueta </head>

3. ahora abriremos la etiqueta <body> y le agregaremos un atributo por ejemplo <body bgcolor= "blue"> recuerden que hay más atributos que podemos agregar al body, como por ejemplo una imagen de fondo, un color para todo el texto del cuerpo de la página etc.

4.Dentro de esta etiqueta agregarás todas tus imágenes , links, texto y de más. en este paso agregaremos una imagen desde la internet y para esto iremos a la etiqueta de <img src="https://tse1.mm.bing.net/th?id=OIP.yxHyg2gWEnjI42kYBq162AHaE8&pid=15.1&P=0&w=247&h=166"; aling="center"> recuerda que puedes agregar varios atributos a una etiqueta y cerrarla cuando finalices </img>

5. ahora agregaremos un texto para esto abrimos la etiqueta El leopardo (Panthera pardus) es un mamífero carnívoro de la familia de los félidos. 

6. Ahora agregaremos un vídeo sobre los leopardos directamente desde un el código html.
entramos a youtube, buscamos el vídeo y damos clic en compartir después de esto en insertar y copiamos el código completo y lo pegamos en nuestra página web.

7. por ultimo cerraremos la etiqueta </body> y después de esto cerraremos la etiqueta </html>

8. La idea es que explores todos las etiquetas y los atributos que encuentres y así construyes tu página web, para visualizar tu página web deberás hacer clic derecho en tu archivo de html y abrir con: Google Chrome (o el navegador que prefieras) y allí podrás ver cómo es tu página web.