el lenguaje html - wordpress.com · • el html es un lenguaje para hipertexto. existen múltiples...

14

Upload: others

Post on 23-Apr-2020

10 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que
Page 2: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

El lenguaje HTML

• HTML significa HyperText Markup Language. Es el lenguaje en que se escriben los millones de documentos que hoy existen en el World Wide Web. Cuando accedemos a uno de estos documentos, el cliente (Netscape, IE, Mosaic, Lynx, Mozilla) los interpreta y los muestra.

• El lenguaje HTML se basa en la sintaxis SGML (Standard Generalized Markup Language). Esto quiere decir que los diferentes elementos (párrafos, encabezamientos, tablas, listas, ...) de un documento para la WWW se señalan intercalando etiquetas que indican al navegador cómo debe mostrarlo.

Page 3: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

• Los documentos HTML son ficheros de texto plano (también conocidos como ASCII) que pueden ser editados con cualquier editor de texto (como Vim o el "Bloc de notas" de Windows).

• También podríamos utilizar cualquier programa procesador de textos (como StarWriter o Word)

• DreamWeaver, Composer, FrontPage….

Page 4: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

Sintaxis de código HTML <directiva parámetro="xxxx"> ... </directiva>

• HTML no es sensible a mayúsculas y minúsculas. Para HTML es equivalente <HTML> y <html>, con algunas excepciones. Aunque es recomendable es escribir los nombres de las etiquetas en minúsculas ya que las nuevas generaciones del HTML están basadas en SGML que requiere de documentos bien formados. Así que, si nuestra intención es continuar trabajando con este tipo de documentos en el futuro, nos puede venir bien seguir el modo de escribir de los documentos bien formados:

• Nombres de etiquetas y atributos en minúsculas. • Etiquetas de cierre para elementos no vacíos. • Los valores de los atributos deben estar incluidos entre

comillas dobles.

Page 5: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

Estructura de un documento HTML

• Todas las páginas web tienen la siguiente estructura:

<html> <head> <title>Primera página</title> </head> <body> </body> </html>

Page 6: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

Comandos básicos de formateo de texto (1)

• <p>...</p> Indica un comienzo de párrafo. Tiene como opciones

align="center" ,"left" o "right", para centrar o alinear a derecha o izquierda el texto. Cada comienzo de párrafo deja un espacio separador.

• <h1>...</h1> Se usan para dividir correctamente en secciones nuestra página, tal y como se hace en un documento de texto normal. El mas importante (grande) es <h1>, luego <h2> y así hasta <h7>.

• <center>...</center> Permite centrar.

• <pre>...</pre> Representa el texto encerrado en ella con un tipo de letra de paso fijo.

• <blockquote>...</blockquote> Para dejar márgenes tanto a izquierda como a derecha (sangrar).

Page 7: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

Comandos básicos de formateo de texto (2)

• <br> Cuando escribimos un documento HTML los retornos

de carro no tienen ningún efecto (salvo si están contenidos bajo la directiva <pre>). Agrupaciones de más de un carácter en blanco se traducen en un solo carácter blanco.

• <hr> Inserta una linea horizontal o separador. De ellos pueden modificarse varios atributos:

• size="num", "%" grosor de la barra horizontal, en pixels o el porcentaje del ancho de página.

• width="num" anchura de la barra horizontal en pixels. • align="..." alineamiento de la barra, puede valer left, right o

center . • noshade elimina el aspecto tridimensional .

Page 8: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

Cambiando el estilo de letra

Todas estas etiquetas nos permiten cambiar el aspecto del tipo de letra que estemos utilizando: • <b>...</b> Pone el texto en negrita. • <i>...</i> Representa el texto en cursiva. • <u>...</u> Para subrayar algo. • <s>...</s> Para tachar. • <tt>...</tt> Permite representar el texto en un

tipo de letra de paso fijo. • <sup>...</sup> Letra superíndice. • <sub>...</sub> Letra subíndice.

Page 9: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

Caracteres especiales 1º Indicar a otro navegador que estamos utilizando los caracteres de un

idioma europeo occidental, la primera línea de la cabecera debe ser <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 2º Utilizar los nombres simbólicos definidos en HTML • &aacute;, &Aacute;, &eacute;, &Eacute;... á, Á, é, É, í, Í, ó, Ó, ú y Ú • &ntilde; y &Ntilde; ñ y Ñ • &nbsp; Espacio en blanco que no puede ser usado para saltar de línea. Cuando

escribimos un documento HTML las agrupaciones de más de un carácter en blanco se traducen en un solo carácter blanco (salvo si están contenidos bajo la directiva <pre>).

• &iquest; ¿ • &iexcl; ¡ • &ordm; º • &ordf; ª • &copy; © • &reg; ®

Page 10: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

Enlaces • El HTML es un lenguaje para hipertexto. Existen múltiples

formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que tienen en común es que todos poseen enlaces.

• Para incorporar un enlace hay que utilizar esta etiqueta <a>. Todo lo que encerremos entre <a> y </a>, ya sea texto o imágenes, será considerado como enlace y sufrirá dos modificaciones:

• El texto aparecerá subrayado y de un color distinto al habitual, y las imágenes estarán rodeadas por un borde del mismo color que el del texto del enlace.

• Al pulsar sobre el enlace, se abrirá en el navegador el documento al que apuntaba el enlace.

Page 11: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

Para especificar una dirección en un enlace:

<a href="dirección">P&uacute;lsame</a> La dirección estará en formato URL (Uniform Resource Locator). servicio://máquina/ruta/fichero Donde el servicio podrá ser uno de los siguientes: • http Es el servicio invocado para transmitir páginas web y el

que usaremos normalmente en los enlaces. • https Es una innovación sobre el anterior, que nos permite

acceder a servidores (generalmente comerciales) que nos ofrecen el uso de técnicas de encriptación para proteger los datos que intercambiemos con él de terceras personas.

• ftp Permite trasmitir ficheros desde servidores de ftp anónimo. Si no le pedimos un fichero sino un directorio, en general el navegador se encargará de mostrarnos el contenido del mismo para que podamos escogerlo cómodamente. Utilizando la @ podremos acceder a servidores privados.

• mailto Para poder mandar un mensaje. • news Para poder acceder a grupos de noticias. Se indica el

servidor y el grupo. Por ejemplo

Page 12: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

Ejemplo de una página sencilla

<html>

<head>

<title>Mi primera página WEB

</title>

</head>

<body> Hola a todos, como han deducido por el titulo esta es la primera pagina web que hago, espero que les guste. Fdo. Jorge

</body>

</html>

Page 13: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que
Page 14: El lenguaje HTML - WordPress.com · • El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que

<html> <head> <title> La chistera - Humor y magia </title> </head> <body> <center> <h1> <img src="imagenes/chistera.gif"> LA CHISTERA - Humor y magia </h1> </center> <h2> Quienes somos </h2> <p>La chistera es un grupo de artistas dedicados al mundo de la magia, la comedia y el espectáculo. Entre nosotros podrás encontrar humoristas, magos, showmen, etc.</p> <p>Si usted o su empresa necesita crear un espectáculo y no quiere quedar decepcionado no dude en escribirnos AHORA MISMO. Nuestra dirección es:</p> <center> [email protected] </center> <h2> Un ejemplo de nuestro repertorio </h2> <p>Cada día le mostramos ejemplos distintos de nuestro amplísimo y novedoso repertorio de chistes: <blockquote> Era un tío tan gafe, tan gafe, que se sentó en un pajar y se clavó la aguja. </blockquote> <blockquote> Doctor, Doctor, ¿cuanto tiempo me queda de vida? <br> 5... 4... 3... 2... </blockquote> </p> <h2> Enlaces a páginas relacionadas </h2> <p> <a href="http://www.ciudadfutura.com/areirse ">¡A Reírse Toca, ¡Ja, ja, ja! </a> </body> </html>