You are on page 1of 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 . P.html” (Ejem..Seguidamente nos aparecerá la ventana de “Guardar Como” y elegiremos la ruta donde guardaremos el archivo. CARLOS E. 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”). luego tecleamos el nombre del archivo pero poniéndolo siempre al final “.

<body></body> Dentro de esta etiqueta va todo el cuerpo de la página web. usando el valor del código de color hexadecimal. usando el valor del código de color hexadecimal. 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. Atributos de la etiqueta Body <body bgcolor=?> Configura el color de fondo de la página.Background: Ingresa un color o imagen de fondo . DIAZ GANTU .ALGUNAS ETIQUETAS Y ATRIBUTOS Atributos del BODY . P. Etiquetas del Encabezado <title></title> El título de la página web. CARLOS E. <body text=?> Configura el color por defecto del texto.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.

Cursivas <cite></cite> Cita. DIAZ GANTU . de 1 a 7 <font color=?></font> Configura el color. usand valor hexadecimal o nombre directo (blue. verdana. derecha o al centro <br> Inserta un interlineado suave. courier.) 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. arial. etc.etc. 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. <font size=?></font> Coloca tamaño de letra. en cursiva <font face=?></font> Coloca el tipo de letra: por ejemplo. P. green. CARLOS E. 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. COLOR.. </BLOCKQUOTE> <BODY> <CENTER> <EMBED> <FONT> </BODY> </CENTER> NO . ALT. LINK. Atributos HREF. REV.. Aumenta el tamaño. Da formato con sangría a un párrafo Cuerpo del documento. WIDTH. Sonido de Fondo. VLINK. BACKGROUND.Internet Explorer </BIG> </BLINK> . LOOP. BEHAVIOR. Internet Explorer: FACE. VSPACE.0: LEFT. WIDTH. Itálica (Cursiva). WIDTH. Línea horizontal. HEIGHT. AUTOSTART. RIGHT Ninguno Ninguno Ninguno Ninguno </H1 . </MARQUEE> Internet Explorer NO </P> </S> </SUB> </SUP> </TITLE> <P> <P ALIGN> <S> <SUB> <SUP> <TITLE> Salto a otro parrafo. Ninguno LEFT. SCROLLDELAY. SCROLLAMOUNT. Superíndice. SIZE. DIAZ GANTU . LOOP. CENTER. RIGHT NOSHADE. CENTER. LOOP. ISMAP. NAME. REL. HEIGHT. SIZE. Tamaño de la fuente base. ING. Internet Explorer: COLOR Ninguno ALIGN. Sonido de fondo. TITLE Ninguno SRC. WIDTH. Hace parpadear el texto. Definición de la fuente.Etiquetas Apertura <A> <BASEFONT SIZE> <BGSOUND> <BIG> <BLINK> Acción Hipervínculo. CARLOS E. VSPACE. ALIGN. P. ALINK Ninguno SRC.Netscape Cierre <BLOCKQUOTE> Ninguno BGCOLOR.H6> HTML 3. Ninguno Ninguno </A> NO NO . Cargar imágenes. Texto tachado.. Tamaño de letras del 1 al 6. HSPACE. DIRECTION. Subíndice. HSPACE ALIGN. Alineación de texto. Título dentro de HEAD. SRC. TEXT.. Centrar. BGCOLOR./H6> <HR> <I> <IMG> NO </I> NO <MARQUEE> Marquesina.Netscape </FONT> <H1 .

H6>.gif" alt="Nombre de Imágen" bgcolor="#FFFFFF" (blanco) background="foto.hp.Atributos Nombre HREF SRC <IMAGE> ALT BGCOLOR BACKGROUND TEXT ALIGN ALIGN SIZE WIDTH SIZE COLOR FACE HEIGHT WIDTH <EMBED>. <DIV>. CARLOS E. <TD>. 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. CENTER Alinear el texto: LEFT. <IMAGE>. <P ALIGN>.. <TH> <FONT> <HR> <H1. <TD>. RIGHT. <MARQUEE>. DIAZ GANTU . P. <BODY> Etiqueta Dirección del URL local o remoto. <TR>.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.com" Nombre del gráfico Nombre que reemplaza a la imágen cuando ésta no puede ser cargada. <TH>. Acción href="www. Color de fondo Imágen de fondo Color del texto Alinear el texto: LEFT. RIGHT.