Ing. Pedro G. Castañeda S. 1 MANUAL PRACTICO DE HTML La estructura tiene tres partes cabeza, cuerpo, cierre o fin. <HTML> <HEAD> <TITLE>MI PC</TITLE> ... </HEAD> <BODY> Aquí iría el contenido que ve el usuario final </BODY> </HTML> Dentro del html, encontramos etiquetas, que son las instrucciones que sirve para el funcionamiento del diseño de la página web, Ejemplo esta etiquetas están abierta pero se deben de cerrar Abre <html> <title> Cierra. Las etiquetas se cierran con / </head> </ttml> Listado de algunos comando que le ayudaran a mejorar su presentación del diseño de la pagina ...Descripción...... ..............INICIO.......... ..........F I N A L.......... Principo de Documento ..<html>... </html> Encabezado y Título <head><title>....(titulo del archivo).... </title></head> Color de Fondo de Página <body bgcolor="#RRVVAA"> ---- Imágen de Fondo <body background="XXX.gif (o jpg)"> ---- Imágen Individual <img src="YYY.gif (o jpg)"> ---- Imágen(Ancho*Alto) <img src=".." width="n" height="n"> -----
18
Embed
MANUAL PRACTICO DE HTML 1 - pedrocastaneda.netpedrocastaneda.net/documentos/pedrohtml.pdf · Marquesina (texto) Con el fin de darle color a su página
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Ing. Pedro G. Castañeda S.
1
MANUAL PRACTICO DE HTML
La estructura tiene tres partes cabeza, cuerpo, cierre o fin.
<HTML>
<HEAD>
<TITLE>MI PC</TITLE>
...
</HEAD>
<BODY>
Aquí iría el contenido que ve el usuario final
</BODY>
</HTML>
Dentro del html, encontramos etiquetas, que son las instrucciones que sirve para el funcionamiento
del diseño de la página web,
Ejemplo esta etiquetas están abierta pero se deben de cerrar
Abre
<html>
<title>
Cierra. Las etiquetas se cierran con /
</head>
</ttml>
Listado de algunos comando que le ayudaran a mejorar su presentación del diseño de la pagina
...Descripción...... ..............INICIO.......... ..........F I N A L..........
Principo de Documento ..<html>... </html>
Encabezado y Título <head><title>....(titulo del
archivo).... </title></head>
Color de Fondo de Página <body bgcolor="#RRVVAA"> ----
Imágen de Fondo <body background="XXX.gif
(o jpg)"> ----
Imágen Individual <img src="YYY.gif (o jpg)"> ----
Imágen(Ancho*Alto) <img src=".." width="n"
height="n"> -----
Ing. Pedro G. Castañeda S.
2
Espacio "libre" <img src=".." hspace="n"> -----
Color del Texto (parcial) <font color="#RRVVAA"> </font>
Tamaño del Texto (parcial) <font size="n"> </font>
Para una mayor presentación usted puede usar las siguientes etiquetas para alinear un párrafo
Un párrafo puede alinearse a la izquierda, centro, derecha o justificarlo. El
párrafo en cuestión debe estar contenido entre las etiquetas
<p align="left/center/right/justify">...</p>.
Ejemplo:
<p align="left">
Este texto está alineado a la izquierda
</p>
<p align="center">
Este texto está centrado
</p>
<p align="right">
Este texto está alineado a la derecha
</p>
<p align="justify">
Este texto está justificado
</p>
Con base a la tabla de comando y colores vamos a realizar el taller No 1
Para realizar el taller usted puede ir al botón de inicio que está ubicado en la barra de tareas en
el escritorio de su pc.
Ing. Pedro G. Castañeda S.
5
Todos los programas
accesorios y dar click en :
Bloc de Notas
Muy bien le presenta la siguiente ventana
Ing. Pedro G. Castañeda S.
6
Aquí usted puede empezar programar
Esta imagen es como se sugiere que código de programación quede
TALLER UNO
<HTML> <HEAD> <TITLE>pedrocastañeda</TITLE> </HEAD> <BODY bgcolor="#006666"> <center><font face ="arial" size="12" color="White"> BOGOTA CAPITAL DE COLOMBIA</font></center></br> <marquee bgcolor="#bdb76b"direction="right"behavior="alternate"> <strong><font color="#800000"size="5">Mi primer curso de diseño WEB</font></strong> </marquee> <p align="justify"> <font face="ariel"size="12"color="black">Desde 1991, Colombia tiene una nueva
Ing. Pedro G. Castañeda S.
7
carta de navegacion conocida con el nombre de constitucion politica de Colombia , basada en derechoy y debreres de los ciudadnos, colo una republica de estado social de Derecho </font></p><hr></br> <center><IMG SRC="C:\Users\Public\Pictures\Sample Pictures\koala.jpg" WIDTH="178" HEIGHT="180" > </center> <hr> </BODY> </HTML>
Para guardar el archivo usted puede ir al archivo guardar como:
Ejemplo
De esta manera usted crea el ejecutable de su página.
Ing. Pedro G. Castañeda S.
8
El nombre que le damos a la página web es TALLERUNO y la extensión es HTML, pero esta debe ir
en minúscula y separa del nombre por un punto.
TALLER DOS
En el taller dos aprendemos a colocar videos y lista en nuestra pagina
La etiqueta <Embed> nos permite inserta video Ejemplo
Además usted puede colocar música de fondo a su página para este caso utilizaremos la siguiente
Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle
el valor infinite o -1.
Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:
Es este taller aplicaremos marcos a la página que unos ayudan a organizar los contenidos dentro
de la página y a la vez la navegación. Pueden ser ventas o sub ventanas de navegación.
Ejemplo
PRACTICA TALLER CINCO
Crear una folder con el nombre proyecto y dentro de esta carpeta puede crear las siguientes
páginas:
Como hacer cada página recuerde que puedes trabajar con el bloc de notas
Y guardar cada página con la extensión HTML, en minúscula.
Ing. Pedro G. Castañeda S.
17
La primera página se deberá llamar index.html
<html> <title>pedro castañeda</title> <frameset rows="20%,80%"> <frame src="diario.html" name="left"> <frameset cols="20%,80%"> <frame src="publicidad.html"name="upper_right"> <frame src="principal.html"name="base"> </frameset> </html> La segunda página principal.html
Ver código
<html> <head> <title>pedrog</title> </head> <body bgcolor="#0000ff"> principal </body> </html> Muy bien, es necesario que usted cada vez guarda vea como va funcionando su proyecto. La tercera página se llamara publicidad.html Esta página tiene algunos enlaces que llevan a dicho dominios. Ver código <html> <head> <title>pedro</title> </head> <body bgcolor="0c0c0c0"> <br> <a href="principal.html"target="base">Inicio</a> <br> <a href="rojo.html"target="base">Rojo</a> <br> <a href="http://www.eltiempo.com"target="base">El tiempo.</a> <br> <a href="http://www.pedrocastaneda.net"target="base">Pedro Castañeda</a> <br> </body> </html> Está mejorando pero nos falta la página que va en la parte superior En este caso le dimos el nombre de diario.html Ver código
Ing. Pedro G. Castañeda S.
18
<html> <head> <title>pedro</title> </head> <body bgcolor="00000"> <marquee bgcolor="#bdb76b"direction="right"behavior="alternate"> <strong><font color="#800000"size="5"> CONOCIMIENTO PARA TODAS Y TODOS</font></strong> </marquee> </body> </html>
Muy bien lo está logrando para finalizar la primera fase
Vamos a crear otra página y le daremos el nombre rojo.html