Tutorial Html
Enviado por jymr • 16 de Diciembre de 2011 • 2.398 Palabras (10 Páginas) • 687 Visitas
Tutorial html
INTRODUCCION AL HTML
Mis pretensiones con este Tutorial no son ni mucho menos intentar enseñar el lenguaje HTML, es más lo único que quiero es llegar a aprender más sobre HTLM según escribo estas líneas. Así que os ruego me perdoneís las meteduras de pata que pueda tener y espero que todos aquellos que sepais de esto me ayudeís a completar el tutorial.
Realizar una página web es bastante fácil y no es necesario saber HTML, basta con utilizar uno de los innumerables programas que hay en el mercado y te ayudan a ello, todo se hace a golpe de ratón. No obstante siempre hay que retocar algo, y por eso estoy escribiendo esto, para que con unos ligeros conocimientos, podamos dar nuestro toque personal a las páginas que diseñemos.
¿Que es HTML?
Una buena pregunta eh?, bueno pues HTLM son las iniciales de Hiper Text Markup Languaje. Pues eso, en definitiva es un lenguaje de programación, mas o menos standard que se usa para que podamos crear documentos que se puedan ver con cualquier navegador.
Los programas HTLM, están hechos con texto plano, sólo contienen números y letras, pero ojo, no todos los caracteres son válidos, algunos carácteres son especiales y debemos insertar su código, por ejemplo las minúsculas acentuadas . Para decirle al navegador que nos muestre una a acentuada debemos teclear á y el resultado sería á, la e acentuada é, y así el resto de vocales. Más adelante incluire una tabla con los códigos especiales, pero de momento esto nos sirve.
Lo que si hay que tener en cuenta es que los códigos de marcado del lenguaje HTML, no son puntillosos y no distinguen entre mayúsculas y minúsculas. Con lo que si hay que tener cuidado es con las llamadas externas, y sobre todo con nombres de ficheros. Con los maravillosos sistemas operativos que tienen ahora nuestros ordenadores, podemos poner nombres larguisimos a nuestros ficheros, y además pueden contener espacios. Por cuestiones de portabilidad, yo seguiría con los nombres cortitos, y si tengo que separar palabras, nunca useis un blanco, es mejor un guión, y apañado. Además, donde si hay que tener cuidado por que si distingue mayúsculas y minúsculas es en los nombres de los ficheros, para el no es lo mismo PEPE que Pepe que pepe, serían tres ficheros distintos, así que cuidado con esto, luego no digaís que no os he avisado.
ESTRUCTURA DE UNA PAGINA
Bueno, esto ya se empieza a poner interesante. Vamos a empezar a escribir nuestro primer código HTML. Lo primero que hay que saber es que todo documento HTML debe empezar y acabar por las etiquetas <HTML> y </HTML> respectivamente. Como veís empezamos a utilizar este lenguaje. Todas las etiquetas van entre <>. Además la gran mayoría de las etiquetas van emparejadas y para distinguir entre la etiqueta de inicio y de fin, se le pone / a la etiqueta de fin. Fácil no?.
Todos los documentos HTML tienen dos partes, el encabezado y el cuerpo, de perogrullo no?. Pues hasta para esto hay que poner etiqueta, y cuales son? .
Para el encabezado la etiqueta es <HEAD> y </HEAD> En esta sección se pone la información de la página y poco más. Aquí es donde pónemos el título de nuestra página, para que todo el mundo nos conozca. El título irá entre las etiquetas <TITLE> y </TITLE> lo que pongamos aqui, aparecera en la parte izquierda de la línea superior de la ventana.
Ya esta, manos a la obra vamos a empezar a diseñar nuestra primera página. Cogemos cualquier procesador, y acordaros de que se debe salvar como texto normal.
<HEAD>
<TITLE>Mi pagina Web</TITLE>
</HEAD>
Y ahora vamos con la parte importante, el cuerpo del documento, donde vamos a insertar nuestro texto, imagenes, hiperenlaces, scrips ......... el cuerpo también tiene su etiqueta, que como no podia ser de otra manera son <BODY> y </BODY> y entre medias que?. Nuestra página WEB como todos los documentos, necesita un encabezamiento, algo que llame la atención y que defina el resto de la página. Podemos definir hasta 6 tamaños de encabezados, y esto se hace con las etiquetas <H1> a <H6> teniendo en cuenta que el número 1 define el tamaño de letra más grande y el 6 define el más pequeño.
Seguimos diseñando la página:
<BODY>
<H1>BIENVENIDO A MI PAGINA PERSONAL</H1>
</BODY>
Bienvenido a mi página personal (H1)
Bienvenido a mi página personal (H2)
Bienvenido a mi página personal (H3)
Bienvenido a mi página personal (H4)
Bienvenido a mi página personal (H5)
Bienvenido a mi página personal (H6)
PARRAFOS
Y ahora que, ya tenemos el encabezado de nuestra página, pero se puede mejorar el aspecto, alineando el parrafo. Lo normal es que todos queramos poner el encabezado en el centro de la página. Esto se logra con la etiqueta <CENTER></CENTER>. Esta etiqueta también es válida para gráficos, pero lo veremos mas adelante.
<BODY>
<CENTER><H3>BIENVENIDO A MI PAGINA PERSONAL</H3></CENTER>
</BODY>
BIENVENIDO A MI PAGINA PERSONAL (H2)
Los párrafos van entre las etiquetas <P> y </P>, y los podemos alinear a la izquierda, a la derecha y como ya hemos visto, centrarlos, pero vamos a seguir con nuestra página, introduciendo el comando ALIGN.
<BODY>
<CENTER><H3>BIENVENIDO A MI PAGINA PERSONAL</H3></CENTER>
<P ALIGN="LEFT"> Ahora estoy escribiendo el primer párrafo de mi página personal, que quiero que se alinea a la izquierda. </P>
<P ALIGN="RIGTH"> Pero esta línea quiero que salga a la derecha</P>
<P ALIGN="CENTER"> Toma ya y ahora en el centro</P>
</BODY>
Ahora estoy escribiendo el primer párrafo de mi página personal, que quiero que se alinie a la izquierda
Pero esta línea quiero que salga a la derecha
Toma ya y ahora en el centro.
Habeís visto las posibilidades de alineamiento del parrafo, pues hay más. Si lo que queremos es sangrar un párrafo, debemos escribir entre las etiquetas <BLOCKQUOTE> Y </BLOCKQUOTE>.
FORMATOS
Pues visto lo anterior, seguimos dando forma a nuestra página, ahora vamos a ver como darle formato a nuestro texto. Lo primero que vamos a ver es como modificar el tamaño de la letra, esto se hace con el comando <FONT></FONT>,
...