Comando s HTML

15-7-2012

C

TUTORIAL DE

HTML BASICO | Carlos

Tutorial de HTML

” Año de la Integración Nacional y el Reconocimiento de Nuestra Diversidad”

Trabajo de investigación: 1

TUTORIAL DE HTML

Autor: CHATA YAURI, CARLOS

Tutorial de HTML

Introducción al HTML

¿Qué significa HTML? y un primer ejemplo de este manual.

2

¿Qué son los archivos HTML?

HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto".

Los archivos HTML deben tener una extensión htm o html. Para crear un archivo HTML solo hace falta un editor de texto. Un archivo HTML está compuesto por etiquetas. Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox,

Mozilla, etc.) como mostrar la página.

¡Vamos a hacer una pequeña prueba!

Si estás usando Windows, abre el "Block de Notas". Si usas Mac, abre "Simpletext". Escribe en el mismo, el siguiente texto:

Guarda el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML).

Abre el navegador Internet (Internet Explorer, Firefox, Opera, etc.). Selecciona "File" y luego "Open". Se abrirá una ventana, selecciona "Browse" y ubica el archivo que

acabas de guardar -"pagina1.html"- elígelo y presiona "Open". Ahora tú ves la dirección, por ejemplo "C:\My Documents\

pagina1.html". Presiona "OK" y el navegador mostrará la página.

Tutorial de HTML

Expliquemos el ejemplo

3

La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página.

Luego vemos la etiqueta <head>. Lo que sigue a continuación hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página (<title>Mi primera página Web</title>), palabras claves para los motores de búsqueda, una descripción de la página y otros datos del documento.

Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola a todos.".

Nota: observa que todas las etiquetas de cierre se diferencian de las de apertura por llevar "/" antes del nombre.

Tutorial de HTML

Elementos y etiquetas de HTML

Las etiquetas HTML son las encargadas de dar forma a nuestro sitio.

4

¿Qué son los elementos y las etiquetas de HTML?

Los elementos son declaraciones para visualizar o dar forma a una página Web.Las etiquetas (en inglés: tags) son marcas insertadas en un documento HTML para proporcionar información sobre una unidad o contenido.

Reglas básicas

Las etiquetas están encerradas entre los signos "<" y ">". Generalmente vienen en pares <p> y <⁄p>. La primera es de apertura y la segunda de cierre. El texto que se encuentra entre dos etiquetas es el contenido

del elemento. Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea

<b> es lo mismo que <B>.

Etiquetas de HTML

Veamos un ejemplo.

Esta es una etiqueta HTML:

Tutorial de HTML

El elemento HTML comienza con la etiqueta de apertura <b>(etiqueta que nos muestra el texto en negrita).El contenido de dicho elemento es: Este texto es en negrita. El fin del elemento HTML es con la etiqueta de cierre </b>.

Otro elemento HTML en el ejemplo es:

EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que 5define el cuerpo del documento).El contenido de dicho elemento es: Hola a todos. <b>Este texto es ennegrita</b>.El fin del elemento HTML es con la etiqueta de cierre </body>.

¿Qué son los atributos de las etiquetas?

Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.Los atributos siempre van con la estructura: nombre="valor". Los atributos siempre van en la etiqueta de apertura.Los valores siempre hay que ponerlos entre comillas.

Un ejemplo de los atributos sería:

Un consejo con respecto al uso de minúsculas.

Si bien HTML acepta tanto etiquetas en mayúscula <B> como en minúscula <b>, el World Wide Web Consortium (W3C) recomienda el uso de minúsculas.

Además XHTML (la siguiente versión de HTML) acepta solo minúsculas.

Es por eso que recomendamos acostumbrarse a usar minúsculas cuando escribas sus códigos HTML.

Tutorial de HTML

Etiquetas básicas de HTML

Las etiquetas más simples y de uso más común en HTML.

Headings6

Nos definen el tamaño de un título o cabecera.

<h1> nos da el tipo de letra más grande. <h6> nos da el tipo de letra más pequeño.HTML agrega automáticamente un espacio antes y después de cada título.

<h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google tiene en cuenta, a la hora de indexar su sitio.

Párrafos

Los párrafos se definen con la etiqueta <p>.

Tutorial de HTML

7

Comentarios

La etiqueta  se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo.

* Nota que el signo de exclamación se coloca solo al principio del código.

Salto de línea

El salto de línea está definido con la etiqueta <br>. Es utilizado cuando queremos terminar una línea sin necesidad de terminar con el párrafo. La etiqueta <br> obliga a saltar de línea dondequiera que la ubiquemos.

Trazar una línea

La etiqueta <hr> nos permite trazar una línea horizontal como las que separan las distintas secciones de este tutorial.

La etiqueta <hr> no tiene cierre.

Tutorial de HTML

Tabla con las etiquetas básicas

8

Tutorial de HTML

Formato de texto con HTML

Elige como decorar y visualizar los textos de tu sitio.

9

Formato básico del texto

HTML nos permite definir el formato de visualización del texto en la pantalla. Muy útil para cuando queramos resaltar o enfatizar una un texto en especial. También muy usado para subrayar o escribir subíndices o superíndices.Estos son solo algunos ejemplos de lo que podemos hacer con estos elementos Para ello utilizamos las siguientes etiquetas:

Tutorial de HTML

Etiquetas para dar forma al texto

10

Etiquetas de "Texto estructurado"

Estas etiquetas son usadas comúnmente para mostrar códigos de programación.

Etiquetas de citaciones y definiciones

Tutorial de HTML

Caracteres Especiales en HTML

Uso de acentos, signos de apertura de interrogación y exclamación, eñes, espacio en blanco, etc.

Caracteres especiales

Muchas veces necesitamos incluir en nuestros textos, signos que tienen un significado especial en HTML (por ej. "<" - menor que).Para poder mostrarlos debemos usar su nombre en código.

Los nombres de las entidades están compuestos por el signo(&), luego el nombre de la entidad y al final (";" - punto y coma). Los números de estos caracteres están compuestos por (&), luego (# - numeral), el número de la entidad y al final (";" - punto y coma).

Por ejemplo para mostrar el signo "<" debemos escribir < o <.

El uso más común de los caracteres especiales es el espacio en blanco. Si en un texto figuran 5 espacios en blanco seguidos, HTML automáticamente borra 4. Para ingresar espacios en blanco usamos " " y HTML los dejará en su lugar.

Otro uso muy frecuente es el de insertar acentos en el código html por medio de los números de las entidades

11

Tutorial de HTML

Caracteres especiales de uso frecuente

12

Tutorial de HTML

Enlaces en HTML

La propiedad más importante de Internet, es la posibilidad de conectarse los unos con los otros.

13

¿Qué son los Enlaces o Links?

Los enlaces o links (en Inglés) nos permiten conectarnos con otros documentos:

una imagen un video un archivo de sonido sitios en la web(otra página web) mandar un email

Para ello debemos usar la etiqueta <a> que proviene de la primera letra de la palabra anchor (ancla).

La etiqueta <a> tiene como cierre </a>.

Veamos un ejemploVamos a crear un enlace hacia la home de Virtualnauta.com

La etiqueta <a> nos señala que es un enlace.El atributo href="http://www.virtualnauta.com/" indica la dirección donde nos conectaremos. El texto La home de Virtualnauta es el que aparecerá en pantalla.La etiqueta </a> es la etiqueta de cierre.

Tutorial de HTML

EL atributo target

Se utiliza para definir donde queremos que se abra el documento al presionar sobre el enlace.

El ejemplo de abajo abrirá el documento en una nueva página del navegador.

14

EL atributo name

Este atributo se usa para definir una determinada ubicación dentro de la página.Supongamos que definimos un destino de vínculo llamado "destino-uno" en el archivo "uno.html".

Esto crea un destino de vínculo alrededor del texto: Capítulo 1.

Una vez definido el destino, podemos crear un enlace a él desde el mismo documento o desde otro diferente, utilizando un carácter "#" seguido del nombre del elemento.Por ejemplo:

O en caso que el enlace está definido en el mismo documento:

Creando un enlace a un email

Se utiliza en caso que queramos que un enlace mande un email.En el momento que presionamos dicho link se abrirá automáticamente el programa de email que tenemos definido por defecto.

Tutorial de HTML

mailto: nos indica la dirección email a la que va dirigida, en este ejemplo: [email protected].

Un enlace a partir de una imagen

15

Muchas veces queremos usar una imagen como enlace a otro documento. Para ello debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto.

Etiquetas y atributos de los enlaces

Tutorial de HTML

16

Tutorial de HTML

17

Atributos estándar

Si desea una descripción completa, diríjase a: atributos estándard.

Eventos intrínsecos

Tutorial de HTML

Frames en HTMLDividimos la página en partes más pequeñas y en cada una de ellas

visualizamos documentos diferentes.

18

¿Qué son los frames?

Los frames (marcos en español) permiten a los autores presentar documentos con vistas múltiples.

Esto posibilita mantener cierta información visible mientras otras vistas se desplazan o se sustituyen.

Cada vista es un documento independiente de los otros.

La etiqueta framese

La etiqueta <frameset> se usa para dividir la ventana del navegador en diferentes marcos que pueden ser de diferentes medidas.Cada frameset define un grupo de filas y columnas.

La etiqueta frame

La etiqueta <frame> define qué documento colocaremos en cada marco.

En el ejemplo dividimos la pantalla en una columna de 25% y otra de 75%. La primera columna contiene el documento "frame1.html" y la segunda columna el documento "frame2.html". La etiqueta <frame> no debe llevar etiqueta de cierre.

Tutorial de HTML

La etiqueta noframes

La etiqueta <noframes> muestra un texto para los navegadores que no soportan frames.

<noframes> se coloca dentro de la etiqueta frameset si el navegador soporta frames, el texto del <noframes> no se

mostrará si usamos la etiqueta <noframes> el texto debe ir entre las etiquetas

<body> </body> 19

La etiqueta iframe

La etiqueta <iframe> se usa para crear un frame en línea que contiene otro documento. Es decir, que puedo mostrar una ventana que contenga otra página Web dentro de la página que estamos diseñando

En este ejemplo podemos observar que la ventana del resultado nos está mostrando la

página principal de Virtualnauta.com.

Tutorial de HTML

Etiquetas y atributos de los marcos

20

Tutorial de HTML

21

Atributos estándar

Eventos intrínsecos

Tutorial de HTML

Tablas de HTMLLas usamos para componer un sitio o simplemente como tabla de datos.

¿Qué son las tablas de HTML?

Las tablas son una herramienta muy útil para presentar datos de tablas y para el diseño de texto y gráficos de una página HTML.

Características de las tablas

Definimos las tablas con la etiqueta <table>. La tabla está dividida en filas definidas con la etiqueta <tr>. Y a su vez cada fila dividida en celdas definidas con la etiqueta <td>. Las celdas pueden contener texto, imágenes, formularios, listas, otras

tablas, etc.

Bordes de las tablas

22

Para que se visualicen los bordes de una tabla, debemos agregar el atributo border junto con el valor expresado en pixels, de lo contrario no se verán los bordes que dividen las celdas de la tabla.

Tutorial de HTML

Veamos un ejemplo sin bordes:

23Nota: al no colocar el atributo border, los bordes no se visualizan pero la tabla existe.

Encabezados de las tablas

Los encabezados de una tabla se definen con la etiqueta <th>.

La etiqueta <th> siempre muestra los encabezados remarcados.

Márgenes de las celdas

Es el espacio que se encuentra entre los bordes de la celda y su contenido. Definimos los márgenes con el atributo cellpadding.

Tutorial de HTML

24

Nota: en este ejemplo podemos observar que el atributo cellpadding deja 20 pixels mínimo entre las palabras dentro de cada celda y los bordes de las mismas.

Espaciado entre celdas

Es el espacio que se encuentra entre celda y celda.El mismo está definido con el atributo cellspacing.

Tutorial de HTML

Etiquetas y atributos de las tablas

25

Tutorial de HTML

26

Tutorial de HTML

27

Tutorial de HTML

28

Tutorial de HTML

Listas - ListadosLas listas son ideales para el diseño de menús.

¿Qué son las listas de HTML?29

Las listas nos permiten ordenar o enumerar datos o elementos para facilitar su lectura.

Tenemos tres tipos de listas:

Ordenadas. Desordenadas. De definición.

Listas Ordenadas

Son aquellas que ordenan la lista anteponiendo números, letras o signos.

Las listas ordenadas comienzan con la etiqueta <ol> y para cada uno de los items de la misma, utilizamos la etiqueta <li>.

Listas Desordenadas

Exponen la lista anteponiendo un punto, cuadrado o triángulo negro.Las listas desordenadas comienzan con la etiqueta <ul> y para cada uno de los Items de la misma utilizamos la etiqueta <li>.

Tutorial de HTML

Listas de definición 30

Se utilizan para definir términos.Las listas de definición se representan con la etiqueta <dl>.Los términos de las mismas con <dt>.La definición de esos términos comienza con <dd>.

Tutorial de HTML

Etiquetas y atributos de las listas

31

Tutorial de HTML

Formularios en HTMLGuía práctica de como diseñar los formularios HTML para tu sitio.

¿Para qué se usan los formularios? 32

Los formularios son usados para que el usuario ingrese datos.

Esos datos son enviados a un agente para que los procese (por ej., a un servidor web, a un servidor de correo, etc.).

La etiqueta form

Dentro de la etiqueta <form> se encuentra el formulario.Los usuarios interaccionan con los formularios a través de los llamados controles.

Tipos de controles:

Botones (buttons) Casillas de verificación (checkboxes) Radiobotones (radio buttons) Menúes (menus) Entrada de texto (text input) Selección de ficheros (file select) Controles ocultos (hidden controls) Controles tipo objeto (object controls)

Dentro de la etiqueta <form>, se encuentra el atributo action. Este nos especificará el documento que manejará el formulario completado y enviado. También contamos con el atributo method. El mismo nos define el método por el cual se enviarán los datos del usuario al servidor.

La etiqueta input

Nos define el registro donde el usuario puede ingresar los datos.El atributo type específica el tipo de control a crear.Entre ellos se encuentran los siguientes valores:

Text

Crea un control que nos permite ingresar un texto en una línea.

Tutorial de HTML

33

Nota: en este ejemplo podemos observar lo siguiente:

action="datos.php" --> nos indica que el archivo datos.php es el encargado de manipular los datos que el usuario ingresó en el formulario

method="get" --> nos indica que los datos del formulario se enviarán por el método get

name="nombre" --> le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo

Radio botones

Se usan cuando queremos que el usuario elija una sola opción de entre una serie de posibilidades.


action="edades.asp" --> nos indica que el archivo edades.asp es el encargado de manipular los datos que el usuario ingresó en el formulario

method="post" --> nos indica que los datos del formulario se enviarán por el método post

name="edad" --> debemos utilizar el mismo nombre (en este caso "edad") para todos los elementos del mismo control radio.

value="mayor" --> define el valor del elemento <input>

Tutorial de HTML

Checkbox (casillas de verificación)

Permite al usuario elegir varias opciones entre todas las posibilidades.

34


action="hobbie.php" --> nos indica que el archivo hobbie.php es el encargado de manipular los datos que el usuario ingresó en el formulario


name="pasa" --> debemos utilizar el mismo nombre (en este caso "pasa") para todos los elementos del mismo control checkbox.

value="tv" --> define el valor del elemento <input>

Password

Funciona igual que text, pero el texto introducido se presenta mediante una serie de asteriscos. Es utilizado generalmente para ingresar contraseñas.

Submit

Botón de envió de datos del formulario.

Reset

Botón de re inicialización. Al ser pulsado reinicializa todos los controles a sus valores iniciales.

Tutorial de HTML

35


action="datos_personales.php" --> nos indica que el archivo datos_personales.php es el encargado de manipular los datos que el usuario ingresó en el formulario


name="nombre" - name="secreto" --> le asigna un nombre al elemento que luego puede ser usado en scripts o en hojas de estilo

value="Enviar" --> define el texto del botón "submit" value="Borrar" --> define el texto del botón "reset"

Las etiquetas select y option

La etiqueta <select> es usada para crear un menú desplegable.Cada opción ofrecida por el menú se representa con la etiqueta <option>


Tutorial de HTML

action="continentes.php" --> nos indica que el archivo continentes.php es el encargado de manipular los datos que el usuario ingresó en el formulario


name="continente" --> le asigna un único nombre al menú desplegable

value="america" --> define el valor del elemento <option>

La etiqueta textarea36

Se usa para crear un control de entrada de texto multilínea.Los atributos rows y cols nos indican la cantidad de filas y columnas que tendrá el recuadro del área de texto.


action="texto.php" --> nos indica que el archivo texto.php es el encargado de manipular los datos que el usuario ingresó en el formulario


name="eltexto" --> le asigna un nombre al elemento textarea

Tutorial de HTML

Etiquetas y atributos de los formularios

37

Tutorial de HTML

38

Tutorial de HTML

39

Tutorial de HTML

40

Tutorial de HTML

Imágenes en HTMLLas imágenes, gráficos y fotos le dan vida y color a las páginas web.

¿Cómo insertamos imágenes en un archivo HTML? 41

Para insertar imágenes en un sitio usaremos la etiqueta <img>.

Esta etiqueta es vacía, es decir que debemos utilizarla con el atributo src para que muestre la imagen. La etiqueta <img> no tiene cierre.

Veamos un ejemplo

Si tenemos que insertar una imagen que lleva por nombre de archivo "foto1.jpg" y que está ubicada en el directorio "www.virtualnauta.com/imagenes/", entonces esta sería la forma de escribir el código:

Nota: el atributo <img> mediante el uso del atributo src inserta la imagen foto1.jpg ubicada en la dirección "www.virtualnauta.com/imagenes/"

Texto alternativo de la imagen

Se utiliza comúnmente cuando deseamos visualizar un texto explicativo de una imagen.

Este texto aparece al pasar el apuntador sobre la imagen o en muchos casos cuando el navegador, por alguna razón, no visualiza las imágenes y en su lugar coloca este texto alternativo dentro de un recuadro.

Para ello vamos a usar el atributo alt.

Tutorial de HTML

Etiquetas y atributos de las imágenes 42

Tutorial de HTML

43

Tutorial de HTML

Fondos de PantallaEs el telón de fondo de toda página web.

El atributo background

Si queremos diseñar sitios más atractivos debemos utilizar imagenes o colores 44para el fondo de nuestras páginas.El fondo se define en la etiqueta <body>.

Para insertar una imagen de fondo debemos utilizar el atributo backgrounddentro de la etiqueta <body>.

El valor de este atributo es la URL de la imagen que deseamos colocar.

Si la imagen es más pequeña que la pantalla del navegador, esta se repetirátantas veces como sea necesario hasta cubrir toda la pantalla.

Ejemplos

El atributo bgcolor

El atributo bgcolor específica el color de fondo de una página HTML. El valor del mismo puede expresarse con un número hexadecimal, valor RGB, o nombre de color (en inglés).

Este atributo también debe ir dentro de la etiqueta <body>

Ejemplos

¡Importante!

Los atributos background y bgcolor están desaprobados en la última versión de HTML (HTML4 y XHTML).

En su lugar debemos usar las propiedades de fondo de CSS para escribir un código correcto de nuestro sitio.

Tutorial de HTML

INFORMACIÓN ADICIONAL: Las marcas o etiquetasLas partes de la etiqueta que van entre "[]" son opcionales. Una etiqueta siempre va entre "<...>". Opcionalmente, puede tener un conjunto de atributos y valores. Algunos atributos no tienen un valor asociado; a estos atributos se les suele denominar compactos. En caso de tener un valor asociado, el valor del atributo debe ir entre comillas. El contenido de la etiqueta puede ser texto, u otras etiquetas. Algunas etiquetas no tienen ningún contenido. Habitualmente, todas las etiquetas deben cerrarse.Todo el contenido de un documento HTML se encuentra entre las etiquetas<html>

45

</html>. Cada página se divide a su vez en cabecera (delimitada entre las etiquetas <head> </head>) y cuerpo (delimitado entre las etiquetas <body> </body>). Toda la información que se incluye en la cabecera no se renderiza al visualizar el documento. Se considera "meta información". Es buena práctica incluir dentro de la cabecera de la página web un título, empleando la etiqueta <title>. Éste será el título que nuestro navegador web muestre en su barra. Este título también es considerado por los buscadores de Internet, como Google, a la hora de determinar sobre qué trata nuestra página.

Caracteres especialesComo en todo lenguaje de programación, en HTML hay algunos caracteres que tiene significado especial, como por ejemplo < y >. Por ello, no pueden emplearse directamente en el código HTML, sino que debe emplearse una secuencia de escape equivalente. En la siguiente tabla mostramos las secuencias de escape más comunes:

Tutorial de HTML

46

Como habrás podido observar, todas las secuencias de escape empiezan con un "&" y terminan en un ";". La mayor parte de los navegadores modernos permiten escribir vocales con acento y caracteres como la "ñ" directamente en el HTML. No obstante, suele ser una buena idea curarse en salud y emplear las secuencias de escape por compatibilidad con navegadores antiguos.

Comando s HTML

Documents

Transcript of Comando s HTML