html
TRANSCRIPT
Fundamentos de Fundamentos de Programación Entorno Programación Entorno
WebWeb
Mauricio Durán TorresMauricio Durán [email protected]@gmail.com
[email protected]@netcode.clwww.netcode.clwww.netcode.cl
Qué es InternetQué es Internet
Internet es un conjunto descentralizado de redes de comunicación interconectadas que utilizan la familia de protocolos TCP/IP, garantizando que las redes físicas heterogéneas que la componen funcionen como una red lógica única, de alcance mundial.
Servicios WebServicios Web
Un Un servicio webservicio web (en inglés, (en inglés, Web serviceWeb service) es un conjunto ) es un conjunto de protocolos y estándares que sirven para intercambiar de protocolos y estándares que sirven para intercambiar datos entre aplicaciones. El principal servicio web datos entre aplicaciones. El principal servicio web ocupado en el mundo es www. (World Wide Web).ocupado en el mundo es www. (World Wide Web).
Soap: Simple Object Access Protocol Soap: Simple Object Access Protocol XML: Extensible Markup LanguageXML: Extensible Markup Language Otros Lenguajes para Servicios WEBOtros Lenguajes para Servicios WEB
Página WebPágina Web
Es un conjunto de instrucciones escritas en Es un conjunto de instrucciones escritas en Lenguaje básicamente HTML para ser Lenguaje básicamente HTML para ser visualizado en Internet por medio de un visualizado en Internet por medio de un Browser o Navegador.Browser o Navegador.
HTMLHTML
HTMLHTML, siglas de , siglas de HyperText Markup HyperText Markup LanguageLanguage ( (Lenguaje de Marcado de HipertextoLenguaje de Marcado de Hipertexto), es ), es el lenguaje de marcado predominante para la el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de describir la estructura y el contenido en forma de texto, así como para complementar el texto con texto, así como para complementar el texto con objetos tales como imágenes. objetos tales como imágenes.
(Wikipedia)(Wikipedia)
Estructura del HTMLEstructura del HTML
<HTML><HTML><HEAD><HEAD><!-- Comentario de HTML --><!-- Comentario de HTML --><TITLE>TÍTULO PÁGINA WEB </TITLE><TITLE>TÍTULO PÁGINA WEB </TITLE></HEAD></HEAD><BODY><BODY><!-- ACÁ COMIENZA EL CUERPO DE LO QUE VISUALIZA EL USUARIO --><!-- ACÁ COMIENZA EL CUERPO DE LO QUE VISUALIZA EL USUARIO -->
Mi primera página en HTMLMi primera página en HTML</BODY></BODY></HTML></HTML>
CaracterísticasCaracterísticas
1.1. Se puede escribir sobre cualquier editor de texto, Se puede escribir sobre cualquier editor de texto, ejemplo: notepad.exe (Windows) Vim (Linux)ejemplo: notepad.exe (Windows) Vim (Linux)
2.2. El HTML no es Case Sensitive, es decir no le afecta si El HTML no es Case Sensitive, es decir no le afecta si su código está en mayúscula o minúscula.su código está en mayúscula o minúscula.
3.3. HTML es fácil de aprenderHTML es fácil de aprender
4.4. Las etiquetas HTML se definen por corchetes Las etiquetas HTML se definen por corchetes trinagulaes “< >”trinagulaes “< >”
5.5. El Final de cada Etiqueta se cierra con un Slach ( / )El Final de cada Etiqueta se cierra con un Slach ( / ) <html> </html><html> </html>
EtiquetasEtiquetas
Las Etiquetas en HTML son Definidas por el Las Etiquetas en HTML son Definidas por el lenguaje y usadas por el desarrollador, lenguaje y usadas por el desarrollador, dependiendo del uso y objetivo que quiere dar.dependiendo del uso y objetivo que quiere dar.
Ejemplo: Texto en NegritaEjemplo: Texto en Negrita
<b><b>Mi nombre esMi nombre es</b></b>
Algunas Etiquetas UsadasAlgunas Etiquetas Usadas <body>: El contenido de neustro sitio web<body>: El contenido de neustro sitio web <span>: <span>: Permite agrupar varios elementos en línea seguidos dentro de un mismo bloque (por Permite agrupar varios elementos en línea seguidos dentro de un mismo bloque (por
ejemplo, varias palabras seguidas en un párrafo), para después darles formato con la hoja de estilo. ejemplo, varias palabras seguidas en un párrafo), para después darles formato con la hoja de estilo. <a>: <a>: Inserta vínculos o marcadores Inserta vínculos o marcadores <address>: <address>: Provee información de contacto Provee información de contacto <applet>: <applet>: Inserta un applet (scripts) Inserta un applet (scripts) <area />: <area />: Define sectores para mapas de imagen Define sectores para mapas de imagen <bgsound />: Inserta musica de Fondo al sitio web<bgsound />: Inserta musica de Fondo al sitio web <blockquote>: <blockquote>: Citar párrafos Citar párrafos <button>: <button>: Crea un botón Crea un botón <font>: <font>: Establece el estilo de fuente Establece el estilo de fuente <form>: Permite crear formularios<form>: Permite crear formularios <frame />: <frame />: Inserta un marco Inserta un marco <iframe>: <iframe>: Inserta un marco dentro del documento Inserta un marco dentro del documento <caption>: <caption>: Establece un título para una tabla Establece un título para una tabla <div>: <div>: Define un bloque de contenido Define un bloque de contenido <img />: Permite insertar imagen<img />: Permite insertar imagen <input />: Define un elemento de Formulario<input />: Define un elemento de Formulario <p>: <p>: Define un párrafoDefine un párrafo <br>: Fuerza un quiebre de línea. <br>: Fuerza un quiebre de línea.
Ejercicios PrácticosEjercicios Prácticos
Crear 1 pagina web con los siguientes elementos.Crear 1 pagina web con los siguientes elementos.
Titulo página web: “Mi primera Página”Titulo página web: “Mi primera Página” Titulo Documento: “Hola, es mi primera web” Titulo Documento: “Hola, es mi primera web”
(Verdana, 16px, bold, color: azul, centrado)(Verdana, 16px, bold, color: azul, centrado)
Imagen en el centro de 2 pixeles de bordeImagen en el centro de 2 pixeles de borde
Ejercicios PrácticosEjercicios Prácticos
Crear una página web que Crear una página web que contenga el siguiente formato contenga el siguiente formato de tablas.de tablas.
(3 filas y 3 columnas)(3 filas y 3 columnas) (2 cubos o celdas de la (2 cubos o celdas de la
primera columna fondo primera columna fondo amarillo)amarillo)
En la celda central, colocar el En la celda central, colocar el texto: Holatexto: Hola
En la última celda de la En la última celda de la ultima columna colocar el ultima columna colocar el texto. Esto es una Tablatexto. Esto es una Tabla
Es una Tabla
Hola
Ejercicios PrácticosEjercicios Prácticos
Creación de un formulario web:Creación de un formulario web:
CaracterísticasCaracterísticasNombre del Formulario: ForEjemplo
Nombre Usuario - Email: Input Text
Sexo: Radio Button (Hombre- Mujer)
Interés: Checkbox (Informática - Programación)
Ciudad: Select, cuyos valores son: -Seleccione-, Osorno, Puerto Montt, Purranque, Rio Bueno, Rio Negro, Ancud
Boton Enviar Información : Submit