Tutorial de HTLM

Ver el tema anterior Ver el tema siguiente Ir abajo

Tutorial de HTLM

Mensaje por Kevin46 el Dom Nov 30, 2008 4:47 pm

INTRODUCCION
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 carácteres
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 y 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
y
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 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.



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 y
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 a


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:

<h1>BIENVENIDO A MI PAGINA PERSONAL</h1>



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 . Esta
etiqueta también es válida para gráficos, pero lo
veremos mas adelante.

BIENVENIDO A MI
PAGINA PERSONAL






BIENVENIDO A MI PAGINA PERSONAL (H2)


Los párrafos van entre las etiquetas
y , 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.

BIENVENIDO A MI
PAGINA PERSONAL




Ahora estoy
escribiendo el primer párrafo de mi página personal, que
quiero que se alinea a la izquierda.


Pero esta línea
quiero que salga a la derecha


Toma ya y
ahora en el centro





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 , en unión
con el modificador SIZE.
Hay varias maneras de modificar el tamaño de la fuente. En
primer lugar podemos hacer referencia al tamaño absoluto de la
fuente. Los tamaños absolutos varían entre el 1 y el 7,
siendo 7 el mas grande, y 1 el mas pequeño. La segunda manera de
realizar la modificación, es hacer referencia al tamaño
relativo de la fuente, es decir restando o incrementando el tamaño
actual de la fuente en la cantidad especificada. Este modificador puede
varíar entre -4 y +4. Pero como mejor se ve esto es continuando
con nuestra página.
Esta
línea está escrita con tamaño 3

Esta línea esta escrita con tamaño 3
Esta
línea está escrita con tamaño 5

Esta línea esta escrita con tamaño 5
Esta
línea está escrita con tamaño -3

Esta línea esta escrita con tamaño
relativo -3
Cómo vemos en el último ejemplo, el resultado es el mismo
que si aplicamos , resultado que restarle
3 unidades al último tamaño definido de fuente, en nuestro
ejemplo 5.
Visto todo lo anterior, sólo queda por decir que es posible
determinar cual es el tamaño base de la fuente con la que vamos a
escribir nuestro documento HTML, para ello usamos la etiqueta
SIZE=tamaño>, escrito justo a continuación de la
etiqueta .
ESTILOS
Para resaltar partes del texto que
estamos escribiendo, podemos utilizar negritas, cursivas, etc. Las
etiquetas mas comúnes que podemos usar aparecen en la siguiente
tabla
























































<table border="1" width="50%"> <tr> <td bgcolor="#ff8080" width="90">Estilo</td><td bgcolor="#ff8080" width="189">Etiqueta</td><td align="center" bgcolor="#ff8080" width="89">
</td></tr><tr> <td width="90">Negrita</td><td width="189"></td><td width="89">Negrita</td></tr><tr> <td width="90">Cursiva</td><td width="189"></td><td width="89">Cursiva</td></tr><tr> <td width="90">Subrayado</td><td width="189"></td><td width="89">Subrayado</td></tr><tr> <td width="90">Cita</td><td width="189"> </td><td width="89">Cita</td></tr><tr> <td width="90">Código</td><td width="189"> </td><td width="89">Código</td></tr><tr> <td width="90">Enfasis</td><td width="189"></td><td width="89">Enfasis</td></tr><tr> <td width="90">Fuerte</td><td width="189"></td><td width="89">Fuerte</td></tr><tr> <td width="90">Teletipo</td><td width="189"> </td><td width="89">Teletipo</td></tr><tr> <td width="90">Tachado </td><td width="189">< </td><td width="89">Tachado</td></tr><tr> <td width="90">Subíndice</td><td width="189"></td><td width="89">Subíndice</td></tr><tr> <td width="90">Superíndice</td><td width="189"></td><td width="89">Superíndice</td></tr><tr> <td width="90">Grande</td><td width="189"> </td><td width="89">Grande</td></tr><tr> <td width="90">Pequeño</td><td width="189"> </td><td width="89">Pequeño</td></tr></table> Esto se va a
escribir en negrita
LINEAS
HORIZONTALES
A veces vamos a necesitar separar las distintas
secciones de nuestro documento HTML, una forma sencilla de hacerlo, es
insertar líneas horizontales. Esto se consigue con la etiqueta
.
Esta etiqueta no lleva su pareja de cierre, es
individual, por defecto traza una línea de todo el ancho de la
pantalla, no obstante se puede modificar el aspecto de las líneas
añadiendo los siguientes parámetros:
SIZE = Indica el grosor en pixel de la línea
WIDTH = Especifica la anchura que la línea ocupa en la pantalla,
se le puede especificar en pixels o en porcentaje.
ALIGN= Alineación de la línea
NOSHADE = Si queremos la línea con sombra o sin sombra.
Pero todo esto se ve mejor con un ejemplo:

ALIGN="LEFT" NOSHADE="NOSHADE">

El resultado es una línea de grosor 5 pixel un 50% de la
pantalla alineada a la izquierda sin sombra, es decir:

ENLACES
4

Kevin46
Activo
Activo

Mensajes : 106
Fecha de inscripción : 25/11/2008
Localización : GAYLANDIA :$

Ver perfil de usuario http://www.own3d.es

Volver arriba Ir abajo

Re: Tutorial de HTLM

Mensaje por Kevin46 el Dom Nov 30, 2008 4:47 pm

Parte 2

<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
La verdadera potencia de internet nos la da la
posibilidad de enlazar todas las páginas como si de una tela de
araña se tratase, una página sin enlaces no tiene
demasiado sentido, asi que vamos a ver de forma muy breve como insertar
enlaces dentro de nuestro documento. Los enlaces nos pueden llevar a
otro documento o bien a otra sección dentro del documento
editado. Este documento de tutorial, esta repleto de enlaces a la misma
página, como habeís podido ver, desde el índice que
está al principio de este documento, se accede a las secciones
directamente, igualmente de cada una de las secciones, se accede al índice.
Además, este documento tiene enlaces externos, como vereis en la
parte inferior de la pantalla, hay un enlace a la página
principal de mi site y hay otro enlace a







Por cierto si os gusta leer y escuchar música,
pinchar en este enlace, podreis adquirir los mejores libros y la mejor
música de internet, y además así colaborareis a
que pueda seguir manteniendo este tutorial.


Bueno, y ahora manos a la obra que es lo que nos
interesa, vamos a generarnos un enlace a uno de los buscadores mas
conocidos YAHOO


Buscar
en YAHOO


Buscar en YAHOO

Ahora lo vamos a complicar un poco más y vamos a poner un gráfico
como el del ejemplo anterior.

<P ALIGN="CENTER">
HREF="http://armazon.com">





Bien no, es mucho más fácil de lo que parece.Como veis
Hemos realizado dos enlaces a otras páginas pero con el mismo
formato podemos acceder a otros muchos servicios de internet, podemos
realizar enlace tipo ftp, correo electronico, etc. Vamos a ver como añadir
un enlace de correo:
Mandame
un correo

Mándame un correo
Para agregar enlaces a marcadores dentro de la página actual, o
dentro de otra página, lo primero que hay que definir es el
marcador, esto se hace de la siguiente manera:
Texto
del marcador

Texto del marcador
El enlace al marcador anterior se definiría:
Enlace
al marcador anterior

Cómo véis se incluye el símbolo "#"
antes del nombre del marcador
Enlace al marcador anterior
Tambien se pueden hacer llamadas a marcadores definidos en otras páginas:
Enlace al marcador de la página index.html
DAR
COLOR A LA PAGINA
Hasta ahora hemos visto todo lo necesario para realizar
nuestra primera página WEB, pero ahora, vamos a darle un poco de
vidilla, ya que una pagina con letra negra sobre fondo blanco, queda un
poco sosa, asi que vamos a modificar los colores tanto del fondo como de
las letras, e incluso vamos a poder insertar un gráfico como
fondo de nuestra página.
Para modificar los colores de fondo del documento debemos añadir
a la etiqueta de cuerpo de documento el parámetro
BGCOLOR="#RRGGBB" donde #RRGGBB indica la combinacion de tonos
de rojo, verde y azul necesarios para conseguir el color que deseamos.
No obstante HTML reconoce 16 colores simples black, gray, maroon,
purple, green, olive, navy, teal, silver, red, white, lime, yelow, aqua,
blue y fuchsia con nombre y apellidos, así que para poner un
fondo azul, bastará con poner
BGCOLOR="BLUE">
sin más. Si lo queremos
complicar más, necesitamos saber el número en hexadecimal
que define el color que queremos y lo ponemos en la etiqueta bgcolor, el
color rojo sin ir mas lejos sería #FF0000.
Para definir el color del texto, utilizaremos el parámetro TEXT="#RRGGBB".
Para definir el color de los enlaces no vilistados, LINK="#RRGGBB",
para los enlaces visitados VLINK="#RRGGBB", para los enlaces
en los que se haga click ALINK="#RRGGBB".
Para insertar una imagen de fondo, usamos el parámetro
BACKGROUND="imagenfondo.gif". Los formatos de ficheros más
utilizados son el gif y jpg. Cabe reseñar que el fichero debe
estar en el mismo directorio que el documento HTML que lo llama, en caso
contrario se debe especifivar el PATH a dicho fichero gráfico. Y
OJO, ya dije anteriormente que aunque en el código HTML da igual
escribir las etiquetas en mayúsculas o minúsculas, cuando
se hace una llamada a un fichero, enlace, etc... Si existen diferencias,
con lo cual para evitar problemas, escribimos todo en minúsculas.
INSERTAR
IMAGENES
Y como todo documento que se precie debe tener
imagenes, vamos a insertarlas de una manera facilísima, esto se
hace con el comando . Si además queremos especificar
el tamaño
siendo n el tamaño en pixels de la imagen.
Si a esto le añadimos todo lo que hemos visto anteriormente,
podemos alinear la imagen, incluirla en un enlace a otras páginas,
etc etc.
<P ALIGN="CENTER">
HREF="http://armazon.com">





Ahora entendemos mucho mejor el ejemplo anterior
LISTAS
Este es uno de los elementos mas útiles para nuestros
documentos HTML, ya que nos permite esquematizar de una forma clara la
información contenida en nuestro documento.

Una lista es una sucesion de elementos que pertenecen a una
estructura común y que es posible numerarlo, sin darle muchas más
vueltas, el índice de esta página esta realizado con una
lista.

Hay diferentes tipos de listas, sin orden con orden, numeradas,
alfabeticas, etc.... Es bastante común que vayan precedidos de
bolos o números para diferenciar una línea de otra.

Para crear una lista ordenada, se usan las etiquetas
    y
,
y a cada elemento se le incluye entre las etiquetas y
pe.




  1. INTRODUCCION


  2. QUE ES HTML?



El resultado es como sigue:

  1. INTRODUCCION
  2. QUE ES HTML?


Las listas sin orden, preceden a las líneas por un bolo, y es
igual que el ejemplo anterior, sustituyendo
    por


      Los elementos de las listas pueden ser a su vez listas




      1. Estructura de un documento HTML





        • Encabezado


        • Cuerpo





  1. Estructura de un documento HTML



  • Encabezado
  • Cuerpo


Para las listas ordenadas, también podemos usar los parámetros
TYPE y START, para definir el tipo de numeracion que deseamos y en que
número empezar, los tipos són AaIi, para las
numeraciones Alfabéticas, Alfabéticas minúsculas,
Romanas y Romano minúsculas respectivamente.

pe.
    , El primer elemento numerado de la
    lista sera la C


CARACTERES
ESPECIALES


































































<table border="1" width="50%"> <tr> <td align="center" bgcolor="#c0c0c0" width="117">Código</td><td align="center" bgcolor="#c0c0c0" width="119">Cáracter
especial</td></tr><tr> <td align="center" width="117"><</td><td align="center" width="119"><</td></tr><tr> <td align="center" width="117">></td><td align="center" width="119">></td></tr><tr> <td align="center" width="117">&</td><td align="center" width="119">&</td></tr><tr> <td align="center" width="117">"</td><td align="center" width="119">"</td></tr><tr> <td align="center" width="117">¿</td><td align="center" width="119">¿</td></tr><tr> <td align="center" width="117">¡</td><td align="center" width="119">¡</td></tr><tr> <td align="center" width="117">á</td><td align="center" width="119">á</td></tr><tr> <td align="center" width="117">Á</td><td align="center" width="119">Á</td></tr><tr> <td align="center" width="117">é</td><td align="center" width="119">é
</td></tr><tr> <td align="center" width="117">É</td><td align="center" width="119">É</td></tr><tr> <td align="center" width="117">í</td><td align="center" width="119">í</td></tr><tr> <td align="center" width="117">Í</td><td align="center" width="119">Í</td></tr><tr> <td align="center" width="117">ó</td><td align="center" width="119">ó</td></tr><tr> <td align="center" width="117">Ó</td><td align="center" width="119">Ó</td></tr><tr> <td align="center" width="117">ú</td><td align="center" width="119">ú</td></tr><tr> <td align="center" width="117">Ú</td><td align="center" width="119">Ú</td></tr><tr> <td align="center" width="117">ñ</td><td align="center" width="119">ñ</td></tr><tr> <td align="center" width="117">Ñ</td><td align="center" width="119">Ñ</td></tr><tr> <td align="center" width="117">ü</td><td align="center" width="119">ü</td></tr><tr> <td align="center" width="117">Ü</td><td align="center" width="119">Ü</td></tr><tr> <td align="center" width="117">&nbs;</td><td align="center" width="119">Espacio en blanco</td></tr></table>

Kevin46
Activo
Activo

Mensajes : 106
Fecha de inscripción : 25/11/2008
Localización : GAYLANDIA :$

Ver perfil de usuario http://www.own3d.es

Volver arriba Ir abajo

Re: Tutorial de HTLM

Mensaje por Pitoloco2 el Dom Nov 30, 2008 9:51 pm

1. Pone fuente
2.Si haces copy y paste hacelo bien.
3. Buen aporte (?
4.Hola are

Pitoloco2
Principiante
Principiante

Mensajes : 18
Fecha de inscripción : 27/11/2008
Localización : Dandote la leche.

Ver perfil de usuario

Volver arriba Ir abajo

Re: Tutorial de HTLM

Mensaje por Contenido patrocinado Hoy a las 11:13 pm


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.