Foros ZackYFileS - Curso para HTML

Foros ZackYFileS (http://foros.zackyfiles.com/index.php)

- ARTES GRÁFICAS - Diseño, Firmas, WEBS. (http://foros.zackyfiles.com/forumdisplay.php?f=238)

- - Curso para HTML (http://foros.zackyfiles.com/showthread.php?t=211691)

El Lenguaje HTML

1ª Parte:

Definición:
HTML es una implementación del standard SGML (Standard Generalized Markup Language), estándar internacional para la definición de texto electrónico independiente de dispositivos, sistemas y aplicaciones.
Metalenguaje para definir lenguajes de diseño descriptivos; proporciona un medio de codificar documentos hipertexto cuyo destino sea el intercambio directo entre sistemas o aplicaciones.

Características:
· Permite crear lenguajes de codificación descriptivos.
· Define una estructura de documentos jerárquica, con elementos y componentes interconectados.
· Proporciona una especificación formal completa del documento.
· No tiene un conjunto implícito de convenciones de señalización. Soporta, por tanto, un conjunto flexible de juegos de etiquetas.
· Los documentos generados por él son legibles.

Sintaxis general:
· Son validos todos las caracteres incluidos en ISO 8859-1
· El formato es libre. El formato introducido en el fichero fuente (saltos de línea, líneas en blanco, etc.) es irrelevante para el formato final del documento.
· Caracteres de significado especial:
· < Marca el comienzo de una etiqueta.
· > Marca el final de una etiqueta.
· & Marca el comienzo de una referencia a entidad

Estos caracteres, en caso de que sea necesario utilizarlos, se sustituyen por el nombre de la entidad que los representa en el repertorio ISO Latín 1 (ISO 8859-1)

& à &
< à <
> à >

En algunos navegadores las letras acentuadas y algunos caracteres como la “ñ” no se visualizan correctamente, por lo cual deben ser sustituidos por la referencia a su entidad.

Fuente:
La web de los Tutoriales.

2ª Parte

Sintaxis

Etiquetas:
· Son los textos que delimitan los distintos elementos que componen un documento.
· No son sensibles a mayúsculas y minúsculas.
· Hay dos tipos de etiquetas:

Etiquetas de comienzo de elemento. Delimitadas por los caracteres “<” y ”>”

Etiquetas de final de elemento. Delimitadas por los caracteres “</” y “>”

· Estructura de una etiqueta:
· De comienzo:
<identificador [atributos]>
· De final:
</identificador>
· Estructuras posibles de un atributo:
Literal=valor
Valor
Normalmente, el valor de un atributo es una cadena de caracteres entre dobles comillas. Dentro de ella no se pueden poner los siguientes caracteres “ ,>, &. Si es necesario ponerlos se sustituyen por " > y &

Comentarios:

· Texto introducido en un documento que no aparece en el formato final

<!--texto -- >.

URL: Uniform Resource Locator:

· Define objetos en una red Internet.
En ella se contienen datos sobre:
· El tipo de objeto (objetos asociados con alguno de los protocolos o servicios disponibles en Internet: ftp, http, mailto, file, etc.).
· El nodo de la red en que se encuentra dicho objeto.
· Fichero físico que contiene el objeto.

Todo URL tiene la siguiente estructura:
[Esquema]: [parte dependiente del esquema]

La estructura mas general es:
Servicio://[host]:[puerto]/[path del fichero]
[url]http://microsoft.com/download/aspdoc.z-ip[/url]

Si se omite el puerto se tomaría el válido por defecto para el protocolo o servicio utilizado (puerto 80 para servicios web).

URL’s absolutas y relativas:
· Absolutas:
Especifican un path completo
[url]http://microsoft.com/download/aspdoc.z-ip[/url]
· Relativas:
Especifican un path relativo a la url del documento
imagenes/dibu1.gif

Fuente:
La web de los Tutoriales.

3ª Parte:

Estructura de un documento HTML

Un documento HTML consta de las siguientes piezas:

1. Identificación SGML
2. Una etiqueta <HTML>
3. Cabecera (iniciada por la etiqueta <HEAD> y cerrada por </HEAD>)
4. Cuerpo del documento (iniciada por la etiqueta BODY y cerrada por </BODY>)
5. Una etiqueta de fin de documento </HTML>

Código HTML:

<¡DOCTYPE PUBLIC HTML “-//IETF/DDT HTML 2.0/EN”>

<HTML>

<HEAD>



...



</HEAD>

<BODY>



...



</BODY>

</HTML>

Identificación SGML:

Permite identificar la DTD adecuada para procesar el documento.
No es obligatorio.

Ejemplos:

Identificación de un documento HTML 2.0

Código HTML:

<!DOCTYPE PUBLIC HTML “-//IETF//DTD HTML 2.0//EN”>

Identificación de un documento HTML 4

Código HTML:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4//EN”>

Cabecera:

Es un conjunto sin orden con información acerca del documento.
Se identifica con la etiqueta

Código HTML:

<HEAD>

y finaliza por tanto con

Código HTML:

</HEAD>

En su ámbito se pueden emplear diferentes elementos referenciados por sus etiquetas, los más relevantes son:

·

Código HTML:

<TITLE> [cadena de caracteres] </TITLE>

Da titulo al documento, en la mayoría de los navegadores se visualiza en la barra de titulo
·

Código HTML:

<BASE HREF=”Url”>

Indica la localización de los ficheros, gráficos, sonidos, etc. a los que se hace referencia en nuestra página web. Si no se incluye esta directiva, el navegador entiende que los elementos se encuentran en el mismo lugar que nuestra página.

Código HTML:

<base href="http://************/images/">

Código HTML:

<META [HTTP-EQUIV=VALOR1] [NAME=VALOR2] CONTENT=VALOR3>

HTTP-EQUIV Enlaza el documento con una cabecera de respuesta HTTP
NAME Nombre del valor a asignar
CONTENT Contenido del valor a asignar.

Las funciones principales son:
Proporciona al navegador las palabra clave y contenidos de nuestra página Web.
Muchos de los buscadores de página web de Internet (Yahoo, Lycos,etc..) utilizan el contenido de esta directiva para incluir la página en sus bases de datos.
Documenta el contenido, calidad y posibilidades de dicho conjunto de datos
para dar una indicación de su conveniencia de uso.
Es muy utilizada para efectuar el “refresco automático “de documentos dándole a HTTP-EQUIV el valor “refresh”.
También se puede emplear para introducir transiciones de pagina.

Código HTML:

 <head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="DESCRIPTION” content="Mi pagina personal”>

<meta name=”KEYWORDS” content =”musica; peliculas; baloncesto”>

<title>Página personal de Luis</title>

</head>



Y/O



<head>

<meta http-equiv="refresh" content="15;URL=http://www.ibm.com">

<title>Página redirecionada a IBM a los 15 segundos</title>

</head>

Fuente:
La web de los Tutoriales.

4ª Parte

Cuerpo del documento:

· Es el contenedor de la información propia del documento.
· Se identifica con la etiqueta

Código HTML:

<BODY [BACKGROUND=”url de imagen”] [BGCOLOR=”color”]>

y finaliza por tanto con la etiqueta

Código HTML:

</BODY>

.
BACKGROUND: Url de la imagen de fondo de la pagina
BGCOLOR: Color de fondo de la pagina en RGB
· En su ámbito se pueden emplear los elementos referenciados por las siguientes etiquetas:
· Cabeceras
· Elementos con estructura de bloque
· Elementos generales
· Etiquetas de resaltado y control de fuentes texto
· Listas
· Resaltados
· Formularios

Ejemplos:

Cuerpo de documento con imagen de fondo

Código HTML:

<body background="imagenes/backbartmanfly.gif" >

        .....

</body>

Cuerpo de documento con color de fondo

Código HTML:

<body  bgcolor="#FF0000”>

......

</body>

Nota: El color de fondo puede especificarse, además de en modo RGB, en formato texto para los 16 colores de la paleta VGA Standard

Black = "#000000" Green = "#008000"
Silver = "#C0C0C0" Lime = "#00FF00"
Gray = "#808080" Olive = "#808000"
White = "#FFFFFF" Yellow = "#FFFF00"
Maroon = "#800000" Navy = "#000080"
Red = "#FF0000" Blue = "#0000FF"
Purple = "#800080" Teal = "#008080"
Fuchsia = "#FF00FF" Aqua = "#00FFFF"

Elementos del cuerpo del documento:

Cabeceras:

Existen 6 niveles de cabeceras:

Código HTML:

·        Cabecera de nivel 1: <H1>Texto de la cabecera</H1>

·        Cabecera de nivel 2: <H2>Texto de la cabecera</H2>

·        Cabecera de nivel 3: <H3>Texto de la cabecera</H3>

·        Cabecera de nivel 4: <H4>Texto de la cabecera</H4>

·        Cabecera de nivel 5: <H5>Texto de la cabecera</H5>

·        Cabecera de nivel 6: <H6>Texto de la cabecera</H6>

El formato en que se visualizan las cabeceras depende de su nivel, variando:
· Tamaño de la letra
· Tipo de resaltado
· Líneas a saltar antes y después del texto.

Ejemplos:

Código HTML:

<H1>Cabecera de nivel 1</H1>

<H3>Cabecera de nivel 3</H3>



Bloques de texto:



        Definen la estructura de un bloque:

        

·        <P> párrafo

Conjunto de texto que empieza y acaba con un salto de línea, la etiqueta de finalización no es obligatoria. Admite el parámetro ALIGN=(left|center|right)

Para definir la alineación del texto dentro del bloque



<P> texto





·        <PRE> Texto con formato previo

Conjunto de texto que se muestra como se introdujo en el formato original.



<PRE> texto</PRE>





·        <ADDRESS>Dirección

Información sobre el autor del documento, dirección, etc.



<ADDRESS>texto</ADDRESS>





·        <BLOCKQUOTE>Anotación

Sirve para escribir una cita, el texto se presenta indentado y en un formato distinto al del párrafo normal.



<BLOCKQUOTE>texto</BLOCKQUOTE>





·        <DIV> Permite agrupar varios bloques de texto en uno solo, heredando todos ellos la alineación especificada mediante el parámetro

 ALIGN=(left|center|right)



<DIV> texto</DIV>

        



Elementos generales:



·        <BR> Rotura de línea

Fuerza que se parta una línea de texto independientemente del formato en que se este trabajando.



<BR>



Nota:

Extensiones de la etiqueta <br>



<BR CLEAR=LEFT> Busca el primer margen libre (clear) a la izquierda. 

<BR CLEAR=RIGHT> Busca el primer margen libre a la derecha. 

<BR CLEAR=ALL> Busca el primer margen libre a ambos lados. 



Su uso esta indicado para romper la secuencia de texto cuando se sitúa este alrededor de una imagen



·        <HR WIDTH= ALIGN=  SIZE=  > Línea horizontal

Dibuja una línea horizontal.



WIDTH= Tamaño en puntos o porcentaje

ALIGN= Alineación en la pagina: LEFT, RIGTH

SIZE= Grosor de la línea.  



<HR WIDTH= “60%”>



·        <CENTER> Centrar un texto

        Centra en texto en la pagina



<CENTER>texto</CENTER>

Fuente:
La Web de los Tutoriales.

Edito porque no esta en la seccion

saludos y paz.

DESCRIPCIÓN:

(HTML)

(HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con enlaces (hyperlinks) que conducen a otros documentos o fuentes de información relacionadas, y con inserciones multimedia (gráficos, sonido...) La descripción se basa en especificar en el texto la estructura lógica del contenido (títulos, párrafos de texto normal, enumeraciones, definiciones, citas, etc) así como los diferentes efectos que se quieren dar (especificar los lugares del documento donde se debe poner cursiva, negrita, o un gráfico determinado) y dejar que luego la presentación final de dicho hipertexto se realice por un programa especializado (como Mosaic, o Netscape).

ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML

Un documento HTML comienza con la etiqueta html, y termina con /html entre los signos <>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado por head y /head entre los signos <>, que sirve para definir diversos valores válidos en todo el documento; y el cuerpo, delimitado por body y /body entre los signos <>, donde reside la información del documento. La única utilidad del encabezamiento en la que nos detendremos es la directiva title, que permite especificar el título de un documento HTML. Este título no forma parte del documento en sí: no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como título de la ventana del programa que nos la muestra. Por ejemplo, en el encabezamiento de este manual se ha especificado: en minúsculas. Obsérverse que el título que encabeza este texto se ha escrito con mayúsculas, para distinguirlo del título global del documento. El cuerpo de un documento HTML contiene el texto que, con la presentación y los efectos que se decidan, se presentará ante el hiperlector

Con estos 4 apartados tenemos la suficiente info como para comenzar a estudiar y comprender este lenguaje de programacion para pag. web, espero que os vaya sirviendo de ayuda.

salu2

joer tio que complicado para mi haber si presto atencion que quiero aprender

no veas si parece dificcil , bueno veremos si aprendo algo

un saludo y que funcione todo muy bien compi

No es complicado Blaxer30, lo primero y principal es estructurar tu web, saber de antemano que quieres y como la quieres, que nº de tablas(en otro apartado hablaremos de estas) necesitamos y como, etc..., me explico:

No debes o no puedes comenzar una casa por el tejado, debes saber primero los cimientos (etiquetas, tablas, fondo, estructura, scripts, etc..)que necesitas para el plano e idea del arquitecto, que te ha pintado la casa muy bonita sobre el papel, entiendes?

Despues es todo a base de etiquetas, es muy bonito este lenguaje.

saludos

Joer, qué oxidado tengo el html, hace unos años hice un cursillo con el P.I.E.E. de la universidad y aprendía a hacer mis pinitos, pero muchas cosas se me han olvidado, tendré que estudiar un poquito para ponerme al día y no perder el hilo.

No obstante pregunto por aquello de que ya me han surgido dudas. Aquí por ejemplo, cuando damos una dirección de una web o incluimos una imagen ponemos el comando html para hacer la etiqueta entre corchetes y según lo que nos has indicado antes iría entre <>. Bien es cierto que cuando sacas el código fuente de una web lo indican con los símbolos que tú comentas... pero me llama la atención, aquí escribimos con corchetes y en cambio, en word o frontpage ponemos <>.

Bueno, quizás sea un siroco mental de esos que me dan, pero no lo puedo evitar.

Por lo demás, me ha gustado el manual, muchas gracias.

Salu2.

babilonio,fijate a bajo de la pagina a la izquierda donde pone "pedes....codigo HTML esta off".
Se Puede usar html,pero si el administrador de el foro cree apropiado no activar el codigo html,no te funcionara si lo haces en html(<>).Eso es lo que creo, de todas formas que te lo confirme alguien.
Saludos.