Sesión 04:
Ing. Edgar A. Cruz Huaman
INSTITUTO SUPERIOR TECNOLÓGICO INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”“SAN PEDRO”
La Primera Página Web. (<p>, <br>, <hr>, <a>, <center>, <blockquote>, <address>, atributos.)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
I. HTML
– WWW contiene información casi infinita.– La WWW es un sistema Hipermedia.
II. Características del lenguaje HTML– El Web tenía que ser distribuido.– El Web tenía que ser hipertexto y debía ser fácil
navegar por él.– Tenía que ser compatible con todo tipo de
ordenadores y con todo tipo de S.O.– Debía ser dinámico.
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
II. Editores Html
• Asistentes: HotDog(Win), HomeSite (Win),HTML Editor(Mac), Quanta(Linux, KDE) o Bluefish, (Linux,GNOME), Notepad++.
• Conversores: Microsoft Word, Quark XPress y PageMaker.
• Editores WYSIWYG: Macromedia Dreamweaver, HotMetal, Microsoft Frontpage, phpDesigner 2007 Professional.
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
III. Algunas razones para usar HTML
• Aprovechar todas las características de este lenguaje, incluso las más nuevas.
• Modificar el código que generan los WYSWYG, corregir errores o incluir etiquetas no soportadas por el editor.
• No depender de la disponibilidad de una herramienta concreta para poder crear páginas web.
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
IV. Atributos de una Etiqueta
• Las etiquetas tienen atributos para cambiar aspectos del efecto que producen.– Formato: <etiqueta atributo="valor">– Ejmplo: <hr size = 1>
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
V. Párrafos en HTML
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
VI. Saltos de línea (<br>)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
VII. Cómo se insertan párrafos (<p>)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
VII. Mas sobre parrafos. (ii)
• Existe otra opción para el código anterior?
• Uso incorrecto de la etiqueta <p>
• El atributo ’align’ en la etiqueta <p> permite especificar la alineación del párrafo. Puede tener tres valores: "center", "left" y "right", para obtener un párrafo centrado, alineado a la izquierda o alineado a la derecha respectivamente.
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
Ejercicio Nº 01
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
VIII. Líneas horizontales para separar párrafos (<hr>)
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
Ejercicio Nº 02
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
IX. La etiqueta <blockquote>... </blockquote>
• Ejercicio Nº 03
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
X. La etiqueta <address>... </address>
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XI. La etiqueta <center>... </center>
• Ejercicio Nº 04
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XII. Cómo insertar imágenes en una página. (<img></img>)
• Ejemplo – <img src="flecha1.gif">
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
XIII. Cómo crear enlaces hipertexto.
• Los enlaces pueden clasificarse en dos tipos, los internos o locales y los externos:– /hobbies/index.html– http://www.otroservidor.com/hobbies/index.html
• La etiqueta <a>... </a>– <a href=“index.html"> Texto </a>
• Páginas en otros directorios.– <a href="varios/hobbies.html">hobbies</a>
• Enlaces externos.– <a href="http://www.corsiteccgmr.com">CORSITEC</a>
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
REPASO.
• Titulares : <h1>• Salto de línea : <br>• Parrafo : <p> </p>• Línea horizontal : <hr>• Texto parafraseado : <blockquote> </blockquote>• Centrado : <center></center>• Enlaces : <a href=”url ”>enlace<a>• Imagen : <img src=“url”>• Dirección :<address>texto<address>
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman
La Primera Página Web
INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO”INSTITUTO SUPERIOR TECNOLÓGICO “SAN PEDRO” Ing. Edgar A. Cruz HuamanIng. Edgar A. Cruz Huaman