Ingresar al Link: http://colegios.pucp.edu.pe/america/
Tarea: Desarrollar la Aplicación 1, Foro 1 y 2
domingo, 21 de abril de 2013
domingo, 14 de abril de 2013
PRACTICA DIRIGIDA - MI PRIMERA PAGINA
Practica Dirigida
Con los conceptos expuestos en las sesiones anteriores, desarrollaremos paso apaso una página web con las siguientes características:
- El tema debe ser la biografía de Leonardo Da Vinci.
- Debe contener un título explicativo (el documento y la biografía).
- La codificación debe aceptar caracteres latinos.
- Debe tener la posibilidad de ser encontrada por buscadores con la siguiente frase clave “Leo Da Vinci”.
- El fondo debe ser de color oliva.
- El texto debe ser de color azul.
- El código HTML debe estar comentado.
El primer paso en la creación de una página web es tener un diseño de lo que se quiere hacer, como en este caso el tema es bastante sencillo, el diseño también lo es.
Utilizaremos algunas etiquetas de formato de texto que nos permitirán un mejor acabado de la página:
Una vez definido el diseño a tomar, debemos encontrar la información a mostrar.
Una biografía sencilla de Leonardo Da Vinci se puede encontrar en:
http://www.biografiasyvidas.com/monografia/leonardo/Al ser un ejemplo, no utilizaremos toda la biografía, sino pequeñas porciones de
ella.
Entonces, empezaremos definiendo un documento HTML con la estructura
básica, pero sin contenido alguno:
¿Y qué es ese símbolo extraño?
Pues bien, la palabra “Biografía” lleva una letra tildada que pertenece a la codificación de caracteres latinos. Dado que no pusimos ninguna instrucción en nuestro código HTML al respecto en la codificación de caracteres, esta es tomada de la PC y, para el caso del ejemplo, esta no acepta caracteres latinos,
por eso la aparición de este símbolo extraño.
Para asegurarnos de que nuestro texto en español se vea siempre correctamente, debemos indicarle al documento qué codificación utilizar, para esto se utiliza la etiqueta META. De esa manera
agregamos la siguiente etiqueta al documento:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=ISO-8859-1">
Aprovechando que estamos definiendo etiquetas META, debes recordar que estas también pueden ser usadas para optimizar su encuentro mediante buscadores, así que, siguiendo las instrucciones del ejercicio, agregaremos una etiqueta META más:
Ahora llegó el momento de escribir el contenido. Veamos. Este texto simple necesita al menos lo siguiente:
- Título
- Subtítulos
- Párrafos
Los títulos se deben diferenciar del resto, para ello tenemos las etiquetas de encabezado. Probemos usando la etiqueta <H1>:
- <H1>Biografía de Leonardo Da Vinci en web</H1>
Ahora debemos colocar un párrafo, para ello tenemos las etiquetas que definen párrafo <P>:
- <P>Nació en 1452 en …</P>
La idea detrás de los párrafos es que no tengamos que preocuparnos por los cambios de línea, y agrupemos bloques de texto.
También necesitamos agregar subtítulos, para ello podríamos usar otro tipo de encabezado, o simplemente negritas. En este caso, usaremos negritas:
<B>Juventud y descubrimientos técnicos</B>
Veamos cómo va quedando nuestro documento:
Vista Previa de la página:
Finalmente, debemos colocar los colores solicitados, lo cual se logra manipulando los atributos de la etiqueta BODY, como vimos durante el desarrollo del capítulo:
<BODY bgcolor="olive" text="blue" >
******************************************************
EL RESULTADO FINAL
lunes, 8 de abril de 2013
Estructura de una pagina en HTML
Estructura General
¿Cuáles son los usos de las etiquetas META?
A pesar de ser opcionales, las etiquetas META son usadas en la vida real para definir el tipo de contenido y la codificación de una página: <META HTTP-EQUIV=”Content-Type” CONTENT=”text/html;
CHARSET=ISO-8859-1” >
En este caso hemos definido el tipo de contenido como HTML y la codificación como ISO-8859-1 (ISO-8859-1 es la norma que establece la codificación del alfabeto latino, con ñ y letras tildadas).
Actividad 1 :
Realiza la siguiente Codificación:
*************************************************
Actividad 2.
Crea un nuevo documento hmtl y añade color al texto y al fondo de la pagina tal como se muestra en la imagen
Actividad 3: Color una imagen de fondo a tu pagina
miércoles, 3 de abril de 2013
Sesion 6 - Notepad ++
Notepad ++
(Haz clic en la imagen para descargar el portable y luego instalar)
Es un editor un poco más amigable, que no llega a las complejidades de herramientas generadoras de documentos HTML, y que es práctico para el desarrollo de ejercicios y ejemplos.
¿Cuál es el objetivo principal del lenguaje HTML?
Construir una estructura que luego pueda ser leída y traducida a una entidad visualmente amigable, este proceso lo realizan los navegadores (el navegador más común es el Internet Explorer, pero existen otros como Opera o Mozilla FireFox).
Etiquetas
Las etiquetas son las unidades base del lenguaje HTML. Estas definen diversos elementos:
- De estructura (definen secciones del documento).
- De contenido (definen elementos visuales, como tablas, imágenes, etc).
- De formato (definen formato de contenido, como negritas, letra itálica, etcétera).
*** Por definición, las etiquetas inician con “<” y terminan con “>”.
Durante la creación de un documento HTML, es necesario insertar comentarios o indicaciones, en especial cuando un mismo documento es desarrollado en conjunto por varias personas, lo que es bastante común en la vida real. Para ello, el lenguaje permite escribir comentarios en el documento, que no serán traducidos por el navegador, es decir, no serán visibles en la página web.
Actividad:
Realizar la siguiente codificación:
Al ejecutar tu programación debe aparecer de la siguiente manera:
*******************************************************************
Recuerda: No te olvides cada código tiene un inicio y un final
Suscribirse a:
Comentarios (Atom)