Etiquetas

Diseño de Páginas Web en HTML
Mgtr. Enrique Cárdenas Díaz

2018-II
PÁGINAS WEB:
Una Página Web, es un tipo especial de archivo
escrito en formato (HTML).
Existen una gran variedad de Páginas Web, que
incluyen:
 Páginas personales (publicidad).
 Páginas de negocios.
 Directorios: Yahoo, Webcrawler, etc.
 Buscadores: Lycos, Altavista, Google, etc.
Internet 2
HTML:
Hyper Text Markup Languaje.
Permite representar hipertextos que incluirá información,
sobre la estructura y formato de representación; y
especialmente indicará el origen y destino de los saltos de
hipertexto.
WWW (Telaraña Muldial):

Sistema de distribución de información tipo revista. En la red
quedan almacenadas lo que son Páginas Web.
WWW = INTERNET
Internet 3
HIPERTEXTO:
Es un cuerpo (documento), interconectado con otro

documento (relacionado) mediante enlaces (Links).
HIPERVÍCULOS:
La clave de la Web es que los archivos de distintos
servidores puedan conectarse mediante
hipervínculos, también llamados Vínculos.
Ejemplo: La Web del Ministerio de Educación.
http://www.minedu.gob.pe
Internet 4
FORMATOS WEB:
Mientras que los servidores Web puedan transferir cualquier tipo de
archivos, la Web utiliza los mismos tipos de archivos una y otra vez.
Podemos reconocer un archivo por su extensión. Las extensiones más
comunes son códigos de 3 caracteres:
 Archivos de Páginas Web escritos en HTML:
Extensión: html o htm.
 Archivos de imágenes:
Extensión: gif o jpg.
 Archivos de sonido:
Extensión: mid, wav, ra.
 Archivos de video:
Extensión: avi, mov, mpg.
 Archivos de texto en formato Ascii:
Extensión: txt.
Internet 5
URL:
Uniform Resource Locator o Localizador Uniforme de Recursos.
“Es una dirección de una Página Web u otro archivo en Internet”.
Cada URL en la red es único. Como los URLs varían en formato,
tenemos la necesidad de comprenderlos para crear vínculos con
nuestra página.
Dominio
Ejemplo:
http://www.minedu.gob.pe
Protocolo de Nombre del Subdominio País de Origen

Comunicación Servidor
Internet 6
Existen 6 dominios genéricos de alto
nivel:
COM (Empresas Comerciales).

EDU (Instituciones Educativas).
ORG (Organismos No Gubernamentales,
Fundaciones).
GOV o GOB (Entidades del Gobierno).
MIL (Instituciones Militares).
NET (Redes).
Internet 7
Objetivos del Diseño Web en
HTML:
 Conocer y usar las Etiquetas Básicos del HTML. Los
Comandos son llamados “tags”. Hay de 2 tipos: los
que se abren y se cierran, y los que solamente se
abren.
 Los códigos HTML pueden ser escritos en un simple
Bloc de Notas y no necesitan conexión a Internet
para ver la página. Basta con tener el programa
Internet Explorer.
 Crear una página web y publicarla en Internet.
Internet 8
ABRIR EL BLOC DE NOTAS:
 Inicio – Programas – Accesorios – Bloc de Notas.
 Escriba las siguientes etiquetas. Éstas etiquetas
siempre van en la Página Web.
<html>
<head>
<title>texto</title>
</head>
<body>
Cuerpo de la Página Web
</body>
</html> Internet 9
EJEMPLO DE UNA PÁGINA WEB:
<html>
<head>
<title>TELESUP – Marketing</title>
</head>
<body>
 Quien estudia, triunfa…
</body>
</html>
Internet 10
Luego Grabar la Página…
 Archivo – Guardar – Direccionar Ruta - Digitar nombre:
*.html (use letras minúsculas) – Clic en Guardar.
 Minimice el Bloc de Notas. No lo cierre.
 Abrir el programa Internet Explorer: inicio – Programas
– Internet Explorer – Archivo – Abrir – Direccionar Ruta
– Doble clic en el Archivo “*.html”.
Internet 11
ETIQUETAS HTML
Internet 12
html
Se abre y se cierra. Hyper Text Markup Language.
Va al inicio y al final de una Página Web.
<html>
<head>
<title>TELESUP</title>
</head>
<body>
 Hola, cómo están…
</body>
</html>
Internet 13
head
Se abre y se cierra. Cabecera, Encabezado.
Va después de html y antes del título.
<html>
<head>
</head>
<body>
Hola, cómo están…
</body>
</html>
Internet 14
title
Se abre y se cierra. Va dentro del head.
Representa el título de la Página.
<html>
<head>
</head>
<body>
</body>
</html>
Internet 15
body
Se abre y se cierra. Va después de cerrar el
head y antes de cerrar el
html.
<html>
<head>
</head>
<body>
</body>
</html>
Internet 16
br
Se abre pero no se cierra. Va dentro
del body. Representa un salto (break),
deja una línea en blanco.
<body>
 Yo me encuentro bien.
</body>
Internet 17
p
Se abre y se cierra. Va dentro del
body. Representa un párrafo, deja
dos líneas en blanco.
<body>

texto texto texto texto

</body>
Internet 18
left
Se abre y se cierra. Para que el texto
esté alineado a la izquierda:
<body>


</body>
Internet 19
justify
Se abre y se cierra. Para que el texto esté
justificado (No deje espacios al inicio y al
final de los renglones:
<body>


</body>
Internet 20
b
body. Bold, configura un texto en
negrita.
<body>
 texto
</body>
Internet 21
u
Body. Underlined, configura un texto
subrayado.
<body>
 texto
</body>
Internet 22
i
body. Italic, configura un texto en
cursiva.
<body>
 texto
</body>
Internet 23
tt
body.
Inserta texto de máquina de escribir.
<body>
 <tt>texto</tt>
</body>
Internet 24
s
Se abre y se cierra. Va dentro
del body. Inserta un texto tachado.
<body>
 <s>texto</s>
</body>
Internet 25
sup
body. Superíndice. Ejemplo: m²
<body>
 m2
</body>
Internet 26
sub
Se abre y se cierra. Va dentro
del body. Subíndice. Ejemplo: H2O
<body>
 H2O
</body>
Internet 27
capitalize
Se abre y se cierra. Para poner el
texto automáticamente con las
primeras letras en mayúsculas.
<body>
 texto texto texto
</body>
Internet 28
spacing
Se abre y se cierra. Para hacer que
las letras estén alejadas unas de
otras, se pone:
<body>
 texto
</body>
Internet 29
background
Se abre y se cierra. Para que el
texto tenga color de fondo, se pone:
<body>
 texto
</body>
Internet 30
center
Se abre y se cierra. Para que el
texto esté centrado en una línea:
<body>
 <center>texto</center>
</body>
Internet 31
font size
Se abre y se cierra. Para poner
textos en letras más grandes o más
pequeñas, se pone:
<body>
 texto
</body>
Internet 32
font color
Se abre y se cierra. Para cambiar de
color a un texto, se pone:
<body>
 texto
</body>
Internet 33
font face
Se abre y se cierra. Para cambiar de
fuente a un texto (tipo de letra), se
pone:
<body>
 texto
</body>
Internet 34
Color de fondo a la página
Se utiliza de la siguiente manera:
<body bgcolor=COLOR>
Cuerpo
</body>
Internet 35
imagen de fondo a la página
Se utiliza de la siguiente manera:
<body background=dirección de la
imagen>
Cuerpo
</body>
Internet 36
img src
Se abre pero no se cierra. Va dentro del body.
Image Source. Origen de la imagen. Inserta una
imagen en la Página Web.
<body>
 <img src=Nombre_Archivo width=# height=#>
</body>
NOTA:
width Establece el ancho del archivo imagen.
height Establece el alto del archivo imagen.
Internet 37
audio controls
Se abre y se cierra. Va dentro del body.
Inserta música en la Página Web.
<body>
<audio controls>
<source src='musica.mp3' />
</audio>
</body>
Internet 38
video src
Se abre y se cierra. Va dentro del body.
Inserta un archivo de video en la página.
<body>
 
<video src=“video.mp4“ controls>
</video>
</body>
Internet 39
marquee
Se abre y se cierra.
Va dentro del body.
Marquesina desplazándose (de derecha a
izquierda).
<body>
 <marquee>texto</marquee>
</body>
Internet 40
hr
Se abre pero no se cierra. Va dentro del body.
Horizontal Rule. Regla Horizontal. Traza una
línea horizontal.
Ejemplo: ___________________________
<body>
 <hr>
</body>
Opcional:
<hr size=#> <hr noshade> <hr color=“COLOR”>
Internet 41
viñetas
Se abre y se cierra. Se obtiene:
1. Texto.
OPCIONALES:
2. Texto.
<ol type=“a”>
<body> <ol type=“A”>
<ol> <ul><li>texto
<li>texto <li>texto</ul>
</ol> <ul type=“square”>
</body> <li>texto
</ul>
Internet 42
tablas
Se abre y se cierra. Se obtiene:
<body>
<table> donde:
<tr> <tr> Indica la fila
<td>texto <td> Indica la columna
<td>texto
</tr>
</table>
</body>
Internet 43
a href
Se abre y se cierra. Para vincular
una página con otra página:
<body>
 <a href=dirección_página> texto </a>
</body>
Internet 44
Para hacer un alerta al ingresar a
una Página
Para imprimir un mensaje al entrar a la
página:
<body>
<body onLoad="alert
('Bienvenidos a la página
de TELESUP');">
</body>
Internet 45

Etiquetas

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Etiquetas

Uploaded by

Copyright:

Available Formats

Diseño de Páginas Web en HTML

Mgtr. Enrique Cárdenas Díaz

WWW (Telaraña Muldial):

Es un cuerpo (documento), interconectado con otro

Protocolo de Nombre del Subdominio País de Origen

COM (Empresas Comerciales).

You might also like