Manual Practico de HTML

MANUAL PRACTICO HTML
MANUAL PRACTICO DE HTML
SPTIMO AO DE EDUCACIN BSICA
NOMBRE: .. PARALELO:
PERIODO LECTIVO 2012 2013
Para mayor informacin http://www.compuipacseptimo.blogspot.com
HTML
Es un lenguaje de programacin que se utiliza para el desarrollo de pginas web utilizadas en Internet. Se trata de las siglas que corresponden a Hyper Text Markup Language; es decir, Lenguaje de Marcas de Hipertexto, que podra ser traducido como Lenguaje de Formato de Documentos para Hipertexto. Es un lenguaje muy simple y general que sirve para definir otros lenguajes que tienen que ver con el formato de los documentos. El texto en l se crea a partir de etiquetas, tambin llamadas tags, que permiten interconectar diversos conceptos y formatos. Permite escribir pginas de WWW (World Wide Web). Este lenguaje se escribe en un documento de texto, por eso necesitamos: Un editor de textos para escribir una pgina web. Guardar el archivo donde est contenido el cdigo HTML utilizando la extensin .html o .htm (es indiferente cul utilizar). Un browser donde ejecutaremos el archivo guardado previamente.
Qu es un browser?
Un navegador o navegador web (del ingls, web browser) es una aplicacin que opera a travs de Internet, interpretando la informacin de archivos y sitios web para que podamos ser capaces de leerla (ya se encuentre sta alojada en un servidor dentro de la World Wide Web o en un servidor local) Entre los principales podemos encontrar a: Internet Explorer Mozilla Firefox Google Chrome Opera Safari Entre otros
Qu es un editor de texto?
Es un programa que permite crear y modificar archivos digitales compuestos nicamente por texto sin formato, conocidos comnmente como archivos de texto o texto plano. Existe una gran variedad de editores de texto. Algunos son de uso general, mientras que otros estn diseados para escribir o programar en un lenguaje. Algunos son muy sencillos, mientras que otros tienen implementadas gran cantidad de funciones Ejm: Bloc de notas Notepad + + Gedit Word Front page
DEFINICIN Y FUNCIN DE UNA ETIQUETA EN HTML.

El lenguaje HTML es un lenguaje de marcas, estas marcas sern fragmentos de texto destacado de una forma especial que permiten la definicin de las distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del lenguaje. A estas marcas las denominaremos ETIQUETAS y sern la base principal del lenguaje HTML. En documento HTML ser un fichero texto con etiquetas que variarn la forma de su presentacin. Una etiqueta ser un texto incluido entre los smbolos menor que < y mayor que >. El texto incluido dentro de los smbolos ser explicativo de la utilidad de la etiqueta. Por ejemplo: <b> <table> <img> Letra Negrita, del ingls Bold (negrita). Definir una tabla. Inclusin de una Imagen.
Existe normalmente una ETIQUETA DE INICIO Y OTRA DE FIN, la de fin contendr el mismo texto que la de inicio aadindole al principio una barra inclinada /. El efecto que define la etiqueta tendr validez para todo lo que est incluido entre las etiquetas de inicio y fin, ya sea texto plano u otras etiquetas HTML. <etiqueta>Elementos afectados por la etiqueta</etiqueta> Por ejemplo, con la etiqueta siguiente: <b>Texto que ser en negrita</b>. Obtendremos: Texto que ser en negrita
Estructura de un documento HTML

Las pginas HTML estn estructuradas en dos partes diferenciadas: la HEAD (cabecera) y el BODY (cuerpo). Un documento escrito en HTML contendra bsicamente las siguientes etiquetas:

<html> <head> <title> </title> </head> <body> </body> </html> Indica el inicio del documento. Inicio de la cabecera. Inicio del ttulo del documento. Final del ttulo del documento. Final de la cabecera del documento. Inicio del cuerpo del documento. Final del cuerpo del documento. Final del documento
Cabecera (HEAD) de un documento HTML

La HEAD es la primera de las dos partes en que se estructura un documento HTML. En la HEAD reside informacin acerca del documento, y generalmente no se ve cuando se navega por l. En la HEAD se pone el elemento lleno <title> que es una breve descripcin que identifica la pgina No hay que confundir el elemento <title> con el nombre del fichero. Por ejemplo, esta pgina est contenida en un fichero llamado head.htm y el texto de su <title> es: Head de un documento. Se escribir as: <head> <title>Head de un documento </title> </head>
Cuerpo (BODY) de un documento

El cuerpo (BODY) es la segunda y ltima de las dos partes en que se estructura un documento HTML. Por supuesto es obligatoria, ya que es aqu donde reside el verdadero contenido de la pgina, y por tanto, al contrario de la HEAD s se ve cuando navegamos por ella. Se escribir as: <body> texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto </body> Los navegadores, por defecto, presentan el texto de una pgina ajustando los contenidos a la esquina superior izquierda de la pantalla. Esta etiqueta cuenta con los siguientes atributos: Bgcolor Text Background Define el color de fondo de la pgina Define el color del texto de la pgina Define el archivo grfico que ser desplegado como fondo
PRRAFOS Y BLOQUES
Para definir y separar bloques de texto se emplean una serie de etiquetas que definen los prrafos.
Etiqueta <p>
<p> Se utiliza para que los prrafos queden separados por una lnea en blanco.
Etiqueta <br>
La etiqueta <br> instruye al navegador cliente que inserte un salto de lnea en un documento HTML. La etiqueta <BR> tiene el mismo efecto que un retorno de carro en una mquina de escribir. Es una etiqueta especial, pues no precisa de etiqueta de cierre. Etiqueta <center> </center> Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el cierre. Etiqueta <b> </b> Esta es la etiqueta que nos posibilita un texto con negrillas. Texto en negrita: <b>Texto en negrita</b> Etiqueta <strong> </strong> Esta es la etiqueta que nos permite rezaltar un texto Texto realzado: <strong>Texto realzado</strong> Etiqueta <i> </i> Etiqueta que permite resaltar el texto con inclinacin itlica. Texto en itlica: <I>Texto en itlica</I> Etiqueta <em> </em> Indica que se debe dar nfasis al texto que se contiene. Texto con nfasis: <EM>Texto con nfasis</EM> Etiqueta <u> </u> Etiqueta que posibilita resaltar un texto con subrayado. Texto subrayado: <U>Texto subrayado</U> Etiqueta <s> </s> o <strike> </strike> Tacha el texto incluido entre las etiquetas. Sintaxis de ejemplo: <strike>Este texto esta tachado</strike> Texto tachado: <STRIKE>Texto tachado</STRIKE>
UBICACIN, FORMATO Y ATRIBUTOS DE TEXTO

El lenguaje HTML permite dar varios tipos de formatos al texto de nuestras pginas. Para ello, usa una serie de etiquetas, compuestas todas por una instruccin de inicio y otra de fin, que realizan efectos o formatos diversos en el texto que encierran.
Tamaos y tipos de letra en HTML <hx>

Para definir distintos tamaos de letra, en HTML se utiliza el elemento lleno <Hx> </Hx> donde x es un nmero que puede variar entre 1 y 6, siendo 1 el tamao mayor. Se escribirn as: Se escribirn as: <H1> Texto de prueba (H1)</H1>. <H2> Texto de prueba (H2)</H2> <H3> Texto de prueba (H3)</H3> <H4> Texto de prueba (H4)</H4> <H5> Texto de prueba (H5)</H5> <H6> Texto de prueba (H6)</H6> Y este sera el resultado:
Texto de prueba (H1)


Etiqueta <font> </font>

Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo de fuente, tamao y color. Atributos: COLOR SIZE FACE Determina el color que se aplica al texto Determina el tamao relativo del texto. Los tamaos vlidos son del 1 al 7, siendo el predeterminado el 3 y el ms grande el 1. Asigna una fuente o tipo de letra.
Tamao de fuentes <font size>

El tamao de las fuentes se puede especificar de dos maneras, una de ellas por medio de un nmero del 1 al 7 (de ms pequeo a ms grande) del siguiente modo <font size=1> Esta es el tamao de letra ms pequea que se puede conseguir </font> Que se ver como
Esta es el tamao de letra ms pequea que se puede conseguir
COLOR DE FONDO
Etiqueta <bgcolor>
El primer parmetro que debe conocer es el del color de fondo, el "bgcolor". A travs de este parmetro podremos definir el color de fondo que queramos que tenga nuestra pgina. Un ejemplo muy simple es el siguiente: Si queremos que nuestra pgina quede con un fondo rojo deberemos escribir: <body bgcolor="#FF0000"></body>
IMAGEN DE FONDO
Etiqueta<background>
Puede que no desee que su pgina tenga un color slo de fondo, sino que quiera que su pgina tenga una imagen. En ese caso debers indicarlo con la etiqueta "background". La etiqueta quedara de la siguiente manera: <body background="URL"> </body>
NUMERACIN Y VIETAS (LISTAS ORDENADAS Y DESORDENADAS)

En HTML es posible tal cual en un editor de texto podemos trabajar con numeracin y vietas.
Etiqueta <ul> </ul>

Crea una lista con vietas no ordenada. No solamente usada para fines de numeraciones y vietas, sino tambin para fines de sangra y tabulaciones.
Etiqueta <ol> </ol>

Listas ordenadas, esta etiqueta numera la lista de elementos comprendidos dentro de las etiquetas <ol>
Etiqueta <li> </li>

Se usa para indicar al navegador que exhiba el texto que le sigue como un elemento de lnea en una lista. Atributos: Type: Especifica el tipo para listas ordenadas Type=A Usa letras mayusculas, Type=a Type=I: Type=i: Type=1: Type: Type= Emplea letras minsculas, Utiliza nmeros romanos grandes, Utiliza nmeros romanos pequeos y Utiliza nmeros arbigos. Tambin puede servir para definir la forma de la vieta en las listas no ordenadas. DISC, CIRCLE y SQUARE son las opciones disponibles. Indica que se inicie la numeracin a partir del nmero especificado.
Value:
TABLAS
En HTML tambin podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas:
Etiqueta <table></table>
Seala el inicio y final de una tabla. Sus atributos son: Align Bgcolor Border BorderColor BorderDark BorderLight Caption Cellpadding Cellspacing Width Establece la alineacin de la tabla o texto mediante ALIGN=LEFT o ALIGN=RIGHT Establece el color de fondo de las celdas de la tabla Determina el ancho del borde en pixeles Asigna un color al borde Determina el color de la parte oscura de un borde de 3 dimensiones Asigna el color de la parte clara de un borde de 3 dimensiones Especifica el ttulo para la tabla Establece la cantidad de espacio libre junto al contenido de una celda Asigna la cantidad de espacio entre las celdas de una tabla Determina el ancho de la tabla en pixeles o en un porcentaje
Etiqueta <th> </th>

Sirve para colocar el texto como un encabezado en la primera fila de una tabla. Atributos principales: Colspan especifica el nmero de celdas que cubre el encabezado Align Determina la posicin del texto del titilo
Etiqueta <tr> </tr>

Permite crear filas en una tabla, as como tambin colocar texto en una tabla; puede tambin interpretarse como la etiqueta que define filas. Align Alineacin del texto/objetos en toda la fila
Etiqueta <td> </td>

La etiqueta de datos de la tabla, es la que identifica a las columnas o celdas especficas de una tabla. Atributos principales: Align Alineacin del texto/objeto de la celda Bgcolor Background Width Color de fondo de la celda imagen de fondo de una celda Ancho de la celda/columna con respecto al ancho de la tabla

Solo precisa definir el ancho en la primera celda de la columna. Recuerde que dentro de una celda, usted puede insertar desde texto o un grfico hasta una tabla
Para recordar:
Las actividades a desarrollar en este manual son 100% prcticas, las cuales sern realizadas en talleres efectuados en jornada de clase y reforzadas por los estudiantes en casa; de tener alguna duda usted puede acudir en hora de recreo y fortalecer los contenidos en caso de ser necesario. Las actividades enviadas en los deberes lo podrn encontrar en el blog que se menciona en la parte inferior de todas las hojas de este manual.

Manual Practico de HTML

Cargado por

Copyright:

Formatos disponibles

Manual Practico de HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Practico de HTML

Cargado por

Copyright:

Formatos disponibles

MANUAL PRACTICO HTML