Sie sind auf Seite 1von 31

Instituto de Educacin Superior Tecnolgico Pblico - Yunguyo

Modulo Profesional: Gestin de Aplicaciones para Internet


y Produccin
Unidad Didctica: DISEO WEB

FORMATO DE PGINAS WEB


REALIZADO POR: ING. AYDEE J. RIVERA GUERRA
INTRODUCCIN

Una pgina Web o pgina electrnica, es


un Documento o informacin electrnica
capaz de contener texto, Sonido, Video,
Programas, Enlaces, Imgenes, y muchas
otras cosas, adaptadas para la llamada
Word Wide Web, y que puede ser
accedida mediante un navegador.
PGINAS WEB ESTTICAS

Son pginas enfocadas


principalmente a mostrar una
informacin permanente, se
crean mediante el lenguaje
HTML, que NO permite grandes
libertades para crear efectos o
funcionalidades ms all de los
enlaces.
PGINAS WEB DINMICAS

Se construyen haciendo uso de


otros leguajes de programacin,
siendo el ms utilizado de todos
PHP, con lo cual podemos definir
las funciones y caractersticas
que se deben cumplir de
acuerdo a nuestras necesidades.
VENTAJAS

A diferencia de otros medios


masivos de comunicacin, este
medio es interactivo.
Ampla su mercado desde un
nivel local hasta un nivel
nacional o internacional.
BENEFICIOS

La informacin publicada en Internet


es permanente porque est siempre
disponible para ser consultada, las 24
horas del da durante todo el ao.
Una pgina WEB le permite ahorrar
en publicidad, evitando tener que
reimprimir o rehacer, cmo sera el
caso de guas y folletos impresos.
HTML

HYPERTEXT MARKUP LANGUAGE


(HTML) / LENGUAJE DE MARCAS DE
HIPERTEXTO
DEFINICIN

HTML; es un estndar que sirve de


referencia del software que
conecta con la elaboracin de
pginas web en sus diferentes
versiones, define una estructura
bsica y un cdigo (denominado
Cdigo HTML)
PARTES DEL HTML

Las pginas HTML se dividen en dos


partes: la cabecera y el cuerpo. La
cabecera incluye informacin sobre
la propia pgina, como por ejemplo
su ttulo y su idioma. El cuerpo de la
pgina incluye todos sus contenidos,
como prrafos de texto e imgenes.
LOS ARCHIVOS HTML

Los archivos HTML deben tener una


extensin htm o html (ej. misitio.htm o misitio.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, Google Chrome, Opera, Safary,
etc.) como mostrar la pgina Web.
Una de las caractersticas de este lenguaje
ms importante para el programador es que
no es necesario ningn programa especial y
QU SE NECESITA PARA sistema operativo. El cdigo HTML, no es ms
CREAR UN PGINA que texto y por lo tanto lo nico necesario es
WEB? escribirlo, en un editor de texto, como el que
tienen todos los sistemas operativos.
En este caso, BLOCK DE NOTAS en Windows

NOTA: Se puede escribir, en otros editores como WORD, sin embargo habr que tener
cuidado con sus correcciones automticas
REGLAS BSICAS

Las etiquetas estn 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 maysculas y minsculas, o
sea <b> es lo mismo que<B>.
EJEMPLO 01
Como estamos usando Windows, abrir el "Block de Notas".
Si usaramos Mac, se abre "Simpletext".

Guarda el archivo como iestp.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, Chrome,
Edge etc.).
Selecciona "File" y luego "Open".
Se abrir una ventana, selecciona "Browse" y ubica el archivo que
acabas de guardar -iestp.html"- elgelo y presiona "Open".
Ahora t ves la direccin, por ejemplo "C:\My
Documents\iestp.html". Presiona "OK" y el navegador mostrar la
pgina recin creada.
EXPLICANDO EL EJEMPLO 01
<html> --> Indica al navegador que abre un archivo HTML.
<head> --> Apertura de la cabecera del documento.
Seccin que no se muestra en la pantalla.
<title>IESTP Yunguyo</title> --> Ttulo de la pgina.
</head> --> Cierre de la cabecera del documento.

<body> --> Apertura del cuerpo del documento. Esta


seccin aparece en la pantalla.
Computacin e Informtica. --> Texto que va a ser
mostrado por el navegador.
</body> --> Cierre del cuerpo del documento.
</html> --> Cierre del archivo HTML
EJEMPLO 01
Final mente se mostrara como la siguiente imagen
ELEMENTOS Y ETIQUETAS DE HTML

LOS ELEMENTOS LAS ETIQUETAS

Los elementos son declaraciones Las etiquetas (en ingles: tags), son
para visualizar o dar forma a una marcas insertadas en un documentos
p[agina web. HTML para proporcionar
informacin sobre una unidad o
contenido
ETIQUETAS HTML / EJEMPLO 02
Veamos un ejemplo:
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>.

NOTA; esta es una etiqueta HTML


<b>Este texto es en negrita.</b>
EJEMPLO 02
Final mente se mostrara como la siguiente imagen
ELEMENTO HTML
Otro elemento HTML en el ejemplo es:
<body>
Hola a todos. <b>Este texto es en negrita</b>
</body>

EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el


cuerpo del documento).
El contenido de dicho elemento es: Hola a todos. <b>Este texto es en negrita</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


informacin 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.
ATRIBUTOS DE LAS ETIQUETAS / EJEMPLO 03

Veamos un ejemplo:

En la etiqueta <body> podemos observar


el atributo bgcolor=(color de fondo) y el
valor"#FFFF00"(representa el color amarillo en
hexadecimal).
Esto quiere decir que el color de fondo de la pgina
ser amarillo.
VISTA DEL EJEMPLO 03
Final mente se mostrara como la siguiente imagen
UN CONSEJO RESPECTO A USO DE MINSCULAS

Si bien HTML acepta tanto etiquetas en mayscula <B> como en minscula


<b>, el World Wide Web Consortium (W3C) recomienda el uso de
minsculas. Adems XHTML (la siguiente versin de HTML) acepta solo
minsculas.
Es por eso que recomendamos acostumbrarse a usar minsculas cuando
escribas tus cdigos HTML.
ETIQUETAS BSICAS / HEADINGS

1. Headings
Nos definen el tamao de un ttulo o cabecera.

<h1> nos d el tipo de letra ms grande.


<h6> nos d el tipo de letra ms pequeo.
HTML agrega automaticamente un espacio antes y despus de cada ttulo.

<h1> al ser usado como ttulo de una pgina Web, es de suma importancia ya que es uno
de los parmetros que Google y dems buscadores tiene en cuenta, a la hora de indexar un
sitio web
VISTA DEL EJEMPLO 04 / HEADINGS
En este ejemplo, en el lado izq. se ve el cdigo y en el lado derecho cual es el resultado:
ETIQUETAS BSICAS / PRRAFOS / EJEMPLO 05

Los prrafos se definen con la etiqueta <p>


ETIQUETAS BSICAS / COMENTARIOS / EJEMPLO
06

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

<!-- Esto es un comentario. -->

* Nota que el signo de exclamacin se coloca solo al principio del cdigo.


ETIQUETAS BSICAS / SALTO DE LNEA / EJEMPLO
07

El salto de lnea est definido con la etiqueta <br>. Es utilizado cuando queremos cortar una
lnea sin necesidad de terminar con el prrafo. La etiqueta <br> obliga a saltar de lnea
dondequiera que la ubiquemos
ETIQUETAS BSICAS / TRAZAR UNA LNEA /
EJEMPLO 08

La etiqueta <hr> nos permite trazar una lnea horizontal como las que separan las distintas
secciones de este tutorial.
La etiqueta <hr> no tiene cierre.
ETIQUETAS BSICAS / TABLA CON LAS
ETIQUETAS BSICAS