Manual Practico de HTML

MANUAL PRACTICO HTML

MANUAL PRACTICO DE HTML

SÉPTIMO AÑO DE EDUCACIÓN BÁSICA

NOMBRE: …………………………………………………………… ……………………………………………………………………………………….. ………………………….. PARALELO: …………………………………… ……………………………………………………………………………………… …………………………………………………

PERIODO LECTIVO 2012 – 2013

Para mayor información http://www.compuipacseptimo.blogspot.com

Titles you can't find anywhere else

Try Scribd FREE for 30 days to access over 125 million titles without ads or interruptions! Start Free Trial Cancel Anytime.






HTML Es un lenguaje de programación que se utiliza para el desarrollo de páginas web utilizadas en Internet. Se trata de las siglas que corresponden a Hyper Text Markup Language; es decir, Lenguaje de Marcas de Hipertexto, que podría 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, también llamadas tags, que permiten interconectar diversos conceptos y formatos. Permite escribir páginas de WWW (World Wide Web). Este lenguaje se escribe en un documento de texto, por eso necesitamos:  



Un editor de textos para escribir una página web. Guardar el archivo donde está contenido el código HTML utilizando la extensión .html o .htm (es indiferente cuál utilizar). Un browser donde ejecutaremos el archivo guardado previamente.

¿Qué es un browser? Un navegador o navegador web (del inglés, web browser) es una aplicación que opera a través de Internet, interpretando la información 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 comúnmente como archivos de texto o texto plano. Existe una gran variedad de editores de texto. Algunos son de uso general, mientras que otros están diseñados 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     






DEFINICIÓN Y FUNCIÓN DE UNA ETIQUETA EN HTML. El lenguaje HTML es un lenguaje de marcas, estas marcas serán fragmentos de texto destacado de una forma especial que permiten la definición 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 serán la base principal del lenguaje HTML . En documento HTML será un fichero texto con etiquetas que variarán la forma de su presentación. Una etiqueta será un texto incluido entre los símbolos menor que < y mayor que >. El texto incluido dentro de los símbolos será explicativo de la utilidad de la etiqueta. Por ejemplo:

Letra Negrita, del inglés Bold (negrita). Definirá una tabla. Inclusión de una Imagen.

Existe normalmente una ETIQUETA DE INICIO Y OTRA DE FIN, la de fin contendrá el mismo texto que la de inicio añadiéndole 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. Elementos afectados por la etiqueta Por ejemplo, con la etiqueta siguiente: Texto que será en negrita. Obtendremos:

Texto que será en negrita

Estructura de un documento HTML Las páginas HTML están estructuradas en dos partes diferenciadas: la HEAD (cabecera) y el BODY (cuerpo). Un documento escrito en HTML contendría básicamente l as siguientes etiquetas:






Indica el inicio del documento.

Inicio de la cabecera.

Inicio del título del documento. Final del título 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 información acerca del documento, y generalmente no se ve cuando se navega por él. En la HEAD se pone el elemento lleno que es una breve descripción que identifica la página No hay que confundir el elemento <title> con el nombre del fichero. Por ejemplo, esta página está contenida en un fichero llamado head.htm y el t exto de su <title> es: Head de un documento. Se escribirá así: <head> <title>Head de un documento

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 página, y por tanto, al contrario de la HEAD sí se ve cuando navegamos por ella. Se escribirá así: texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto Los navegadores, por defecto, presentan el texto de una página ajustando los contenidos a la esquina superior izquierda de la pantalla. Esta etiqueta cuenta con los siguientes atr ibutos: Bgcolor

Define el color de fondo de la página

Text

Define el color del texto de la página

Background

Define el archivo gráfico que será desplegado como fondo






PÁRRAFOS Y BLOQUES Para definir y separar bloques de texto se emplean una serie de etiquetas que definen los párrafos.

Etiqueta

Se utiliza para que los párrafos queden separados por una línea en blanco.

Etiqueta
La etiqueta
instruye al navegador cliente que inserte un salto de línea en un documento HTML. La etiqueta
tiene el mismo efecto que un retorno de carro en una máquina de escribir. Es una etiqueta especial, pues no precisa de etiqueta de cierre.

Etiqueta
Se utiliza para centrar el texto/imagen o datos que se encuentren entre la apertura y el cierre.

Etiqueta Esta es la etiqueta que nos posibilita un texto con negrillas. Texto en negrita: Texto en negrita

Etiqueta Esta es la etiqueta que nos permite rezaltar un texto Texto realzado: Texto realzado

Etiqueta Etiqueta que permite resaltar el texto con inclinación itálica. Texto en itálica: Texto en itálica

Etiqueta Indica que se debe dar énfasis al texto que se contiene. Texto con énfasis: Texto con énfasis

Etiqueta Etiqueta que posibilita resaltar un texto con subrayado. Texto subrayado: Texto subrayado

Etiqueta o Tacha el texto incluido entre las etiquetas. Sintaxis de ejemplo: ~~Este texto esta tachado~~ Texto tachado:






UBICACIÓN, FORMATO Y ATRIBUTOS DE TEXTO El lenguaje HTML permite dar varios tipos de formatos al texto de nuestras páginas. Para ello, usa una serie de etiquetas, compuestas todas por una instrucción de inicio y otra de fin, que realizan efectos o formatos diversos en el texto que encierran.

Tamaños y tipos de letra en HTML Para definir distintos tamaños de letra, en HTML se utiliza el elemento lleno donde x es un número que puede variar entre 1 y 6, siendo 1 el tamaño mayor. Se escribirán así:

Se escribirán así:

Y este sería el resultado:

Texto de prueba (H1)
.









Texto de prueba (H4) Texto de prueba (H5) Texto de prueba (H6)

Etiqueta Esta etiqueta proporciona al autor un medio de personalizar el texto con respecto al tipo de fuente, tamaño y color. Atributos:

COLOR

Determina el color que se aplica al texto

SIZE

Determina el tamaño relativo del texto. Los tamaños válidos son del 1 al 7, siendo el predeterminado el 3 y el más grande el 1. Asigna una fuente o tipo de letra.

FACE

Tamaño de fuentes El tamaño de las fuentes se puede especificar de dos maneras, una de ellas por medio de un número del 1 al 7 (de más pequeño a más grande) del siguiente modo Esta es el tamaño de letra más pequeña que se puede conseguir Que se verá como Esta es el tamaño de letra más pequeña que se puede conseguir








COLOR DE FONDO Etiqueta El primer parámetro que debe conocer es el del color de fondo, el "bgcolor". A través de este parámetro podremos definir el color de fondo que queramos que tenga nuestra página. Un ejemplo muy simple es el siguiente: Si queremos que nuestra página quede con un fondo rojo deberemos escribir:

IMAGEN DE FONDO Etiqueta Puede que no desee que su página tenga un color sólo de fondo, sino que quiera que su página tenga una imagen. En ese caso deberás indicarlo con la etiqueta "background". La etiqueta quedaría de la siguiente manera:

NUMERACIÓN Y VIÑETAS (LISTAS ORDENADAS Y DESORDENADAS) En HTML es posible tal cual en un editor de texto podemos trabajar con numeración y viñetas.

Etiqueta

Crea una lista con viñetas no ordenada. No solamente usada para fines de numeraciones y viñetas, sino también para fines de sangría y tabulaciones.

Etiqueta

Listas ordenadas, esta etiqueta numera la lista de elementos comprendidos dentro de las etiquetas

Etiqueta

Se usa para indicar al navegador que exhiba el texto que le sigue como un elemento de línea en una lista. Atributos: Especifica el tipo para listas ordenadas Type=A Usa letras mayusculas, Type:

Type=a

Emplea letras minúsculas,

Type=I:

Utiliza números romanos grandes,






TABLAS En HTML también podemos incluir arreglos de tablas. Se deben utilizar varias etiquetas:

Etiqueta

Señala el inicio y final de una tabla. Sus at ributos son: • Align

Establece la alineación de la tabla o texto mediante ALIGN=LEFT o ALIGN=RIGHT

• Bgcolor

Establece el color de fondo de las celdas de la tabla

• Border

Determina el ancho del borde en pixeles

• BorderColor

Asigna un color al borde

• BorderDark

Determina el color de la parte oscura de un borde de 3 dimensiones

• BorderLight

Asigna el color de la parte clara de un borde de 3 dimensiones

• Caption

Especifica el título para la tabla

• Cellpadding

Establece la cantidad de espacio libre junto al contenido de una celda

• Cellspacing

Asigna la cantidad de espacio entre las celdas de una tabla

• Width

Determina el ancho de la tabla en pixeles o en un porcentaje

Etiqueta Sirve para colocar el texto como un encabezado en la primera fi la de una tabla. Atributos principales: especifica el número de celdas que cubre el encabezado • Colspan • Align

Determina la posición del texto del titilo

Etiqueta Permite crear filas en una tabla, así como también colocar texto en una tabla; puede también interpretarse





MANUAL PRACTICO HTML 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 gráfico hasta una tabla

Para recordar: Las actividades a desarrollar en este manual son 100% prácticas, las cuales serán 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 podrán encontrar en el blog que se menciona en la parte inferior de todas las hojas de este manual.

Manual Practico de HTML

Recommend Documents

Texto de prueba (H1)

Texto de prueba (H2)

Texto de prueba (H3)

Texto de prueba (H4)

Texto de prueba (H5)

Texto de prueba (H6)