Post Actualizado en abril 18, 2013
Aprende HTML y se un experto
Aprender HTML ahora es una herramienta necesaria para crear tu propia pagina web, y con ella integrarte al mundo cibernetico de los negocios. No necesitas ser un programador para tener bases de HTML, puedes aprenderlo de manera autodidacta y te ayudaran a aprender a crear tu propio codigo desde cero o bien poder manejar una […]
Aprender HTML ahora es una herramienta necesaria para crear tu propia pagina web, y con ella integrarte al mundo cibernetico de los negocios.
No necesitas ser un programador para tener bases de HTML, puedes aprenderlo de manera autodidacta y te ayudaran a aprender a crear tu propio codigo desde cero o bien poder manejar una plantilla predise;ada para subir tu pagina web a la red.
Las siglas HTML significan HyperTextMarkupLanguaje y este lenguaje es el encargado de poder atraves de un codigo crear una pagina web para que se vea en internet.
QUE ES UN ARCHIVO HTML?
Un archivo HTML lo identificamos por tener una extension .html, estan formados de etiquetas, o tags que son las encargadas de indicarle a los exploradores como debe lucir un sitio web.
Un archivo HTML puede ser creado desde con un bloc de notas, hasta programas como dreamweaver y visual studio.
Como mencionamos los archivos HTML constan de etiquetas, cada una con una funcion diferente, y tiene aperture y cierre en su mayoria. Para crear una pagina web, es necesario abrir el codigo y poner algunas etiquetas basicas antes de crear cualquier tipo de dise;o:
Etiquetas principales:
- Html : Etiqueta de aperture de codigo <html> </html>
- Head: Encabezado de la pagina, este mostrara el titulo que se vera en la parte superior de la pagina en el explorador <head> </head>
- Title (dentro de head) dentro de esta etiqueta ira el texto del titulo de la pagina <title> </title>
- Body: Es el cuerpo de la pagina, es decir, dentro de body estaran el resto de las etiquetas, textos, imagenes, etc <body> </body>
NOTA: Todas las etiquetas para cerrar, llevaran una diagonal antes del nombre de la misma.
Ejemplo:
<html>
<head>
<title>Mi primera página Web</title>
</head>
<body>
Hola a todos.
</body>
</html>
Resultado:
—————————à aqui va la imagen
NOTAS BASICAS:
- Las etiquetas son indiferentes ante mayusculas y minusculas
- El texto o contenido que este entre ellas, sera lo que se vea afectado por la etiqueta correspondiente
- Sin excepcion todas las etiquetas deberan contar con su cierre, si no, no se podra ver el resultado.
- En sintaxis general, los atributos de las etiquetas, es decir cuando una misma etiqueta pueda tener uno o varios atributos diferentes como por ejemplo el color, se escribirian asi: etiqueta=”valor”, es decir – background-color= “#000000” (el valor o atributo siempre ira entre comillas)
- Recomendacion: No utilizar mayusculas
PRINCIPALES ETIQUETAS PARA CREAR UN DISE;O WEB
Texto
- Encabezados: Los encabezados son aquellos que nos ayudan a definir el tama;o de los titulos en un texto, se utilizan para incluir titulos, subtitulos en una redaccion.
- Etiqueta Heading (encabezado) Representada desde <h1> hasta <h6> siendo “h1” el tama;o mayor y <h6> el menor y entre estos numeros los tama;os respectivamente.
Ejemplo:
<html>
<head>
<title>Headings</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Resultado:
——————————à aqui va la imagen
- Parrafos <p> : Esta etiqueta nos sirve para incluir textos ordenados en diferentes parrafos, que pueden contener ciertos atributos, dentro de un archivo HTML
- Negritas (bold) <b> : Funciona para poner un texto en letras negritas
Ejemplo:
<html>
<head>
<title>Párrafos</title>
</head>
<body>
<p>parrafo 1.</p>
<b>parrafo 2.</b>
</body>
</html>
—————————–à aqui va la imagen
Sin embargo, cuando utilizamos textos, tambien debemos indicar espacios hacia abajo, como cambio de renglon, para que estos luzcan esteticos y hablando de codigo la sintaxis sea correcta .
La etiqueta indicada para esto es:
- Br </br> o <br> : Esta etiqueta funciona para dar espacio hacia abajo, es la unica que tiene inicio y fin en una sola etiqueta.
Ejemplo:
<html>
<head>
<title>Párrafos</title>
</head>
<body>
<p>parrafo 1.</p>
</br>
<b>parrafo 2.</b>
</body>
</html>
———————————–à aqui va la imagen
ETIQUETAS SIMPLES PARA TEXTO
Llamaremos etiquetas simples para texto para conocerlas primordialmente, y posteriormente veremos los atributos que pueden tener.
- Texto en negrita < b> </b>
- Texto grande <big> </big>
- Texto enfasis <em> /<em>
- Italica <i> </i>
- Texto peque;o <small> </small>
- Texto fuerte <strong> </strong>
- Subindice <sub> </sub>
- Superindice <sup> </sup>
- Subrayado <ins> </ins> o <u> </u> underline
- Tachado <del> </del>
Ejemplo:
<b>Texto en negrita</b>
<br />
<big>Texto grande</big>
<br />
<em>Texto enfatizado</em>
<br />
<i>Texto en itálica</i>
<br />
<small>Texto pequeño</small>
<br />
<strong>Texto fuerte</strong>
<br />
<sub>Texto subíndice</sub>
<br />
<sup>Texto superíndice</sup>
<br />
<ins>Texto subrayado</ins>
<br />
<del>Texto tachado</del>
——————————-à aqui va la imagen
ATRIBUTOS DE UN PARRAFO
Se les llama atributos a aquellas propiedades que puede tener una etiqueta, en el caso de los parrafos puede ser: color, tama;o, tipo de fuente.
Cada atributo tiene su nombre y sintaxis, y debe ir dentro de la etiqueta parrafo, los atributos no tienen cierre </> pero se escriben entre comillas y se separan uno de otro con un ; (punto y coma)
Para incluir en un parrafo cualquier atributo, anteponemos “style” esto se traduce en “estilo de parrafo” entonces mediante el codigo indicamos los atributos que ese parrafo, hasta su cierre tendra.
Ejemplo:
<html>
<head>
<title>Atributos</title>
</head>
<body>
<p style=” color:#CC33CC; font-family:Arial, Helvetica, sans-serif; font-size:16px”> texto cualquiera </p>
</body>
</html>
Resultado:
———————————à aqui va la imagen
Atributos:
- P style (separado por un espacio p de style) = estilo de parrafo
- Color = color del parrafo (el texto)
- Font-family: tipografia o fuente
- Font-size: tama;o de la fuente
- NOTA: px = pixeles, los tama;os en html se miden en pixeles
Dentro de los parrafos, hay un truco para evitar poner muchos br, (espacios hacia abajo) y de alguna manera generar codigo basura.
Este atributo es margin, el margen puede ser:
- Margin-left : izquierda
- Margin-top: arriba
- Margin-bottom: abajo
NOTA: Los margenes y el espacio entre un parrafo y otro se calcula en pixeles
Ejemplo:
<html>
<head>
<title>Atributos</title>
</head>
<body>
<p style=” color:#CC33CC; font-family:Arial, Helvetica, sans-serif; font-size:16px”> texto cualquiera </p>
<p style=”margin-top:80px”> texto </p>
<p style=”margin-bottom:80px”> texto </p>
<p style=”color:#3399FF”> texto </p>
<p style=”margin-left:80px”> texto </p>
</body>
</html>
Resultado
———————————-à aqui va la imagen
ENLACES / HIPERVINCULOS
Los enlaces o hipervinculos nos permiten en un clik ir a otro html de la pagina, a una imagen, archivo, video, u otra pagina exgterna desde el elemento al que se le aplique
Para lograrlo utilizamos la etiqueta:
a = anchor / ancla <a> </a>
Esto significa que esa etiqueta va “anclar” o ligar mi hipervinculo hacia el destino.
Posterior se utiliza el atributo href , que va hacer referencia al lugar a donde queremos ir al dar el clic
Sintaxis:
<a href=”/http://www.okhosting.com/”>OK HOSTING Sal a la luz del internet</a>
Ejemplo:
<html>
<head>
<title>Hipervinculos</title>
</head>
<body>
<a href=”/http://www.okhosting.com/”>OK HOSTING Sal a la luz del internet</a>
</body>
</html>
Resultado:
——————————-à aqui va la imagen
En los hipervinculos hay un atributo extra llamado: “target “ y con la especificacion blank significa abrir una tarjeta vacia, o nueva, en otras palabras, que al abrir el vinculo en una ventana independiente de donde es originario el enlace.
Sintaxis:
<a href=”http://www.okhosting.com/” target=”_blank”>OK HOSTING Sal a la luz del internet</a>
Ejemplo:
<html>
<head>
<title>Hipervinculos</title>
</head>
<body>
<a href=”http://www.okhosting.com/” target=”_blank”>OK HOSTING Sal a la luz del internet</a>
</body>
</html>
Resultado:
——————————-à aqui va la imagen
Los hipervinculos no solo pueden ponerse en textos sino en imagenes, veamos un ejemplo:
<a href=”http://www.okhosting.com/”><img src=”/httpdocs/imagenes/okhosting.jpg”></a>
Ejemplo:
<html>
<head>
<title>Hipervinculos</title>
</head>
<body>
<a href=”http://www.okhosting.com/”> <img src=”/httpdocs/imagenes/okhosting.jpg”></a></body>
</html>
Resultado:
——————————-à aqui va la imagen
Ahora con target blank:
Ejemplo:
<html>
<head>
<title>Hipervinculos</title>
</head>
<body>
<a href=”http://www.okhosting.com/ ” target=”_blank”>
<img src=”/httpdocs/imagenes/okhosting.jpg”></a>
</body>
</html>
Resultado:
——————————-à aqui va la imagen
LISTAS
Las listas, es una manera de ordenar o clasificar elementos, cuando queremos separarlos o enumerarlos, ya sea con vi;etas o numeros.
Se clasifican en dos, que son ordenadas y desordenadas, siendo las primeras los numeros y las segundas las vi;etas.
Listas ordenadas:
Para crear una lista ordenada debemos primero indicar en el codigo que queremos abrir una lista de este tipo, con la etiqueta <ol> </ol> que significa order list.
Dentro de la lista se separan los elementos, abriendo en cada uno la etiqueta: <li> </li> que significa lista.
Ejemplo:
<html>
<head>
<title>Listas ordenadas</title>
</head>
<body>
<ol>
<li>Naranjas</li>
<li>Manzanas</li>
<li>uvas</li>
</ol>
</body>
</html>
Resultado:
————————à aqui va la imagen
Listas desordenadas.
La mecanica es practicamente igual que en las listas enumeradas, pero lo que cambia es la etiqueta del tipo de lista cambiando a: <ul> </ul>
Ejemplo:
<html>
<head>
<title>Listas ordenadas</title>
</head>
<body>
<ul>
<li>Naranjas</li>
<li>Manzanas</li>
<li>uvas</li>
</ul>
</body>
</html>
Resultado:
————————à aqui va la imagen
COLOR DE FONDO EN TODA LA PAGINA WEB
Las propiedades de color tambien pueden aplicar en el fondo de la pagina web completa, esto es dandole el atributo background color al body
Sintaxis:
<body bgcolor=”#CCFF33″>
Ejemplo:
<html >
<head>
<title>Body color</title>
</head>
<body bgcolor=”#CCFF33″>
</body>
</html>
Resultado:
——————à aqui va la imagen
Tambien podemos jugar con el fondo y poner una imagen, veamos la sintaxis:
<body background=”httpdocs/images/ rosablanca.jpg”>
Ejemplo:
<html >
<head>
<title>Body color</title>
</head>
<body background=”httpdocs/images/ rosablanca.jpg”>
</body>
</html>
Resultado:
——————à aqui va la imagen
Como modificar una archivo HTML?
Para modificar un archivo HTML solamente es necesario abrir el codigo ya sea desde bloc de notas : seleccionar el archivo con clic secundario y abrir con bloc de notas.
O bien abrirlo desde algun programa como dreamweaver o visual studio.
Efectuamos los cambios que queramos realizar.
Guardar los cambios
Abrir el archive de manera local (si no estamos utilizando aun un FTP para subir a un servidor en la red) con doble clic.
Si los cambios que efectuaste no se ven, da f5 a tu explorador.
ANEXO:
Breve historia y context del HTML
El HTMl nace en los 80 cuando un fisico de nombre Tim Berners-Lee quien trabajaba para la Organizacion Europea para la Investigacion Nuclear propuso un nuvo sistema de hipertexto que sirviera para compartir documentos.
Al terminar de dise;ar su sistema lo present en una convcatoria que precisamente fue organizada para desarrollar un sistema como este pero para internet, despues de hacer equipo con un ingeniero en sistemas de nombre Robert Cailliau ganaron con su propuesta llamada: World Wi de Web o “W3”
Fue en 1991 cuando se publico el primer documented e HTML llamado “HTML Tags” (etiquetas HTML) y puede consultarse como un anexo o historia informatica.
Siendo en 1993 la primer propuesta official para convertir a HTML en un estandar, fue en esta misma epoca cuando se definieron mas etiquetas como: imagenes, tablas y formularios, convirtiendose en un estandar official.
HTML 2 nace en 1995 siendo el primer oficial de HTML.
Del 96 para aca, los estandares de HTML han sido modificados mediante a revisiones incorporandose con advances en el mundo de las paginas web como java.
HTML 4 que fue la ultima version corregida se publico en abril de 1998, y tiene novedades como las hojas de estilo CSS, la inclusion de scripts en las paginas web, mejoras en tablas y formularios.
Despues de esto, en el 2004 las compa;ias Apple, Mozilla y Opera organizaron la asociacion llamada WHATWG que significa Hypertext Application .
Esta ultima actividad se centra en lanzar el primer borrador oficial de HTML 5 el que se publica en el 2008.
Esto consiste en HTML unido con XML naciendo entonces XHTML 1.0, que tiene la propiedad de verse correctamente en todos los navegadores.
Por ultimo HTML 5, es la quinta revision que HTML ha tenido por parte de la World Wide Web, en el cual se incluyen variantes dentro de la sintaxis de HTML .
HTML 5 Establece nuevos elementos y atributos, algunos de ellos son similares a las etiquetas con una funcion estandarizada, algunas de las nuevas etiquetas para HTML 5 son:
<div>: esta etiqueta funciona para dividir una seccion dentro de un documento HTML
<span> esta etiqueta, permite agrupar varios elementos en una sola linea dentro de un mismo bloque. Es de cir varios elementos en un parrafo que posterior pu ede ser modificado por hojas de estilo.
Y lo mejor, es que posee una etiqueta para audio <audio> y video <video> que facilitan el poder insertar archivos y reproductores sin necesidad de un flash.
Tiene tambien una mejora que permite renderizar en exploradores como Mozilla, Chrome, Opera, Safari e Internet Explorer elementos en 3D.
Despues de estas mejoras algunos elementos como font y center quedaron obsoletos dentro de HTML, sendo retomados y mejorados por CSS hojas de estilos.
Actualmente HTML 5 se ha vuelto una herramienta compatible cada vez mas con la mayoria de los exploradores y telefonos moviles, permitiendo entonces un alcance mayor a los sitios web y a la mano en cualquier momento.