Vous êtes sur la page 1sur 6

CREACIÓN DE UNA PAGINA WEB

El servicio World Wide Web es un Sistema de Información distribuido por Internet basado en la tecnología hipertexto/hipermedia; Un documento hipertexto, es un texto en que cualquier palabra puede ser un enlace a otros documentos que contienen más información sobre dicha palabra, se puede acceder a la información que nos interese (simplemente haciendo clic con el ratón en la palabra), y de esta forma avanzar de documento en documento hasta encontrar la información deseada. Un documento hipermedia es un hipertexto, pero que no incluye sólo información textual sino también información multimedia, es decir, puede incluir gráficos, vídeo, y sonido. HTML es el acrónimo de HyperText Markup Language (Lenguaje de Marcado de Hipertexto) y es el lenguaje que se utiliza para crear las páginas web. Este lenguaje indica a los navegadores cómo deben mostrar el contenido de una página web.

MI PRIMER DOCUMENTO HTML
PASO 1: Abrimos el bloc de notas en INICIO/Todos los Programas/Accesorios/Bloc de Notas

PASO 2: Dentro del bloc de notas se teclea los atributos del lenguaje HTML EJEMPLO: <HTML> <HEAD> <TITLE> MI PRIMERA PAGINA</TITLE> </HEAD> <BODY> <CENTER><H1>Mi primera pagina Web</H1></CENTER> <HR> Esta es mi primera pagina, aunque todavía es muy sencilla. <BR>Como el lenguaje HTML no es difícil, pronto estaré en condiciones de hacer cosas mas interesantes. <P> Aquí va un segundo párrafo.</P> </BODY> </HTML> PASO 3 Para grabar el archivo seguimos los pasos como vemos: - Nos vamos al “Menú Archivo” y seleccionamos “Guardar Como” como vemos en la imagen:

ING. CARLOS E. P. DIAZ GANTU

“Mi Primera Pagina. DIAZ GANTU . luego tecleamos el nombre del archivo pero poniéndolo siempre al final “.html” (Ejem. P.. y elegiremos en Tipo “Todos los Archivos” y guardamos: Al final el archivo se guardara en la ruta especificada y al abrirlo se mostrara la siguiente pantalla: ESTRUCTURA DE UN DOCUMENTO HTML Un Documento HTML siempre se compone de las siguientes 2 partes: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> CABECERA CONTENIDO DEL DOCUMENTO ING.html”).Seguidamente nos aparecerá la ventana de “Guardar Como” y elegiremos la ruta donde guardaremos el archivo. CARLOS E.

Atributos de la etiqueta Body <body bgcolor=?> Configura el color de fondo de la página. usando el valor del código de color hexadecimal. Etiquetas del Encabezado <title></title> El título de la página web. CARLOS E.Bgcolor: Especifica el color del fondo .Text: Indica el color del texto Algunos Códigos de Colores: BLANCO VIOLETA AMARILLO AZUL MARRÓN PÚRPURA VERDE ROJO NEGRO #FFFFFF #EE82EE #FFFF00 #0000FF #A52A2A #800080 #008000 #FF0000 #000000 Algunas Etiqueta y Atributos a usar: <html></html> Abre y cierra un documento HTML <head></head> Encabezado de la página.Background: Ingresa un color o imagen de fondo . P. usando el valor del código de color hexadecimal.ALGUNAS ETIQUETAS Y ATRIBUTOS Atributos del BODY . <body text=?> Configura el color por defecto del texto. Etiquetas HTML de Texto <pre></pre> Texto pre-formateado <h1></h1> Título más grande <h6></h6> Título más pequeño <b></b> Negritas <u></u> Subrayado <i></i> ING. DIAZ GANTU . <body></body> Dentro de esta etiqueta va todo el cuerpo de la página web.

) Ligas <a href="URL"></a> Hipervínculo Formato y presentación <p></p> Nuevo párrafo <p align=?> Alinea el párrafo hacia la izquierda. derecha o al centro <br> Inserta un interlineado suave. de 1 a 7 <font color=?></font> Configura el color. courier. CARLOS E. Un valor 0 no tendrá contorno <body background="URL o ruta de archivo"></body> Coloca la imagen como fondo de la página <hr> Linea horizontal <marquee> texto u objeto a desplazarse </marquee> ING.Cursivas <cite></cite> Cita. verdana. DIAZ GANTU . usand valor hexadecimal o nombre directo (blue.etc. P. <font size=?></font> Coloca tamaño de letra. en cursiva <font face=?></font> Coloca el tipo de letra: por ejemplo. arial. green. etc. derecha y centro <img src="name" border=?> Determina el contorno de la imagen. Crea otra línea Elementos Gráficos <img src="name"> Incorpora una imagen <img src="name" align=?> Alinea la imagen: izquierda.

HEIGHT.H6> HTML 3. Línea horizontal. P. HEIGHT. Itálica (Cursiva). COLOR. Aumenta el tamaño. VSPACE. Sonido de fondo. Ninguno LEFT.Internet Explorer </BIG> </BLINK> . SCROLLDELAY. HSPACE. SRC. SIZE. BEHAVIOR. Cargar imágenes.Netscape </FONT> <H1 . RIGHT NOSHADE. Internet Explorer: COLOR Ninguno ALIGN.Etiquetas Apertura <A> <BASEFONT SIZE> <BGSOUND> <BIG> <BLINK> Acción Hipervínculo. Definición de la fuente.. WIDTH. CARLOS E. ALT. TEXT. Centrar.. BGCOLOR. Ninguno Ninguno </A> NO NO . </BLOCKQUOTE> <BODY> <CENTER> <EMBED> <FONT> </BODY> </CENTER> NO . CENTER. HEIGHT. Sonido de Fondo. VLINK. REL. Superíndice. AUTOSTART. LINK. Hace parpadear el texto. SIZE. LOOP. Subíndice. HSPACE ALIGN. </MARQUEE> Internet Explorer NO </P> </S> </SUB> </SUP> </TITLE> <P> <P ALIGN> <S> <SUB> <SUP> <TITLE> Salto a otro parrafo. NAME. DIAZ GANTU . Título dentro de HEAD. ING. ALINK Ninguno SRC. TITLE Ninguno SRC. DIRECTION. ALIGN. RIGHT Ninguno Ninguno Ninguno Ninguno </H1 . Internet Explorer: FACE. BACKGROUND. Alineación de texto. REV. CENTER. Tamaño de letras del 1 al 6. WIDTH. LOOP.. Tamaño de la fuente base.0: LEFT. Atributos HREF. LOOP. VSPACE. WIDTH.Netscape Cierre <BLOCKQUOTE> Ninguno BGCOLOR. ISMAP. SCROLLAMOUNT. WIDTH.. Texto tachado./H6> <HR> <I> <IMG> NO </I> NO <MARQUEE> Marquesina. Da formato con sangría a un párrafo Cuerpo del documento.

<IMAGE>. <P ALIGN>.gif" text="#000000" (negro) align=center align=center size=3 width=50% size=6 color="#000000" (negro) face="helv" (helvética) heigth=80 width=50% Valor ING. CENTER Valor de la altura en pixels o porcentaje Valor del ancho en pixels o porcentaje Tamaño de la letra de 1 a 7 Color de la letra Fuente del texto (Internet Explorer) Valor de la altura en pixels o porcentaje Valor del ancho en pixels o porcentaje src="imagen. <TD>. CENTER Alinear el texto: LEFT. <MARQUEE>. <TH>. <TR>. <DIV>.Atributos Nombre HREF SRC <IMAGE> ALT BGCOLOR BACKGROUND TEXT ALIGN ALIGN SIZE WIDTH SIZE COLOR FACE HEIGHT WIDTH <EMBED>. RIGHT.hp.. P. Color de fondo Imágen de fondo Color del texto Alinear el texto: LEFT. <TD>. <BODY> Etiqueta Dirección del URL local o remoto. CARLOS E.gif" alt="Nombre de Imágen" bgcolor="#FFFFFF" (blanco) background="foto. RIGHT.H6>. <TH> <FONT> <HR> <H1. DIAZ GANTU .com" Nombre del gráfico Nombre que reemplaza a la imágen cuando ésta no puede ser cargada. Acción href="www.