Principios, teoría y práctica sobre los conceptos de HTML básicos.

Presentación del tema: "Principios, teoría y práctica sobre los conceptos de HTML básicos."— Transcripción de la presentación:

1 Principios, teoría y práctica sobre los conceptos de HTML básicos.

2 HTML: HiperText Markup Language HiperText: Lenguaje de Hipertexto. Texto de forma estructurada y agradable con enlaces internos y externos. Markup: Sistema de tags y meta tags para formar la estructura de un sitio. Language: Sistema de ordenamiento sintactico y semantico con un sentido común y con un fin especifico.

3 Se Usa HTML? Todos los sitios de la WWW (World Wide Web) se muestran en forma de HTML. Es difícil usarlo? –Personas sin mucho conocimiento de informática podrían aprender a utilizar HTML.

4 Estructura Cliente - Servidor ServidorCliente HTML, Javascript, CSS Cliente PHP, ASP, C#.net, Python, Ruby, etc. El Servidor ejecuta lenguajes de programación y siempre devuelve HTML, que es ejecutado desde la computadora Cliente. Los navegadores “renderizan” solamente HTML, JS y CSS, todo código de programación se ejecuta del lado del servidor.

5 Javascript CSS HTML ValidacionesDiseñoValidacionesDiseño Estructura Sitio Un sitio web es una estructura de tags y meta tags HTML desplegados de forma jerárquico en el computador del cliente – usuario. El código Javascript se ejecuta del lado del cliente para evitar que se envíen al Servidor datos no validos. El CSS es una estructura de código que nos permite darle diseño al HTML.

6 Etiquetas – Tags HTML se basa en un conjunto de Etiquetas – Tags que formarán la estructura del sitio. Cada una de estos tags tienen atributos que pueden setear características específicas de los mismos. Algunos tags tienen forma jerárquica y otros no (veremos ejemplos)

7 Comenzar a utilizar HTML Requisitos básicos: –Editor de texto: Bloc de notas, Notepad++, HTML Kit, etc. –Explorador de internet: Internet Explorer, Firefox, Safari, Chrome, Opera, etc. El sistema de HTML ignora mayúsculas o minúsculas.

8 Página Web vs. Sitio Web Una Página Web, es contenido estático en la cual tiene links a unos pocos contenidos. (5to BTO) Un Sitio Web, es un conjunto de páginas web, con enlaces internos y externos y con cierta interactividad con el usuario. (6to BTO)

9 Estructura Básica de una Página (refleja el comienzo de una página HTML) (se setea el titulo de la página y otras cuestiones) Título de la página (se pone titulo) (dentro de BODY va TODO el contenido del sitio) Aquí iría el contenido de la página IMPORTANTE: por cada hay un, esto quiere decir, que los tags se abren y se cierran. Solo unos pocos no tienen cierre (BR, IMG por ejemplo)

10 Meta tags “keywords” y “description” Dentro de la etiqueta HEAD, tenemos 2 tags del estilo META que son los siguientes: DESCRIPTION: Incluye la descripción de que PAGINA estamos viendo dentro del SITIO. KEYWORDS: Lista las palabras clave de esa página de ese sitio. TIP: Google y los motores de búsqueda utilizan los tags meta description y keywords para indexar los sitios de la web y sus contenidos.

11 Nuestro ejemplo hasta ahora Título de la página Aquí iría el contenido de la página Los 2 tags meta, uno está en mayúscula y otro en minúscula, pero esto no interfiere en la lectura de HTML por parte de los exploradores. Nuestro ejemplo hasta ahora

12 TAG: “ ” Quizás uno de los tags más simples. El tag BR sirve para dar un “enter”, una linea, entre cada cosa. Se lo aplicaremos a nuestro ejemplo, veamos como queda. Sintaxis: Este tag NO tiene cierre.

13 Título de la página Aquí iría el contenido de la página Este es otro renglón Este otro. Nuestro ejemplo hasta ahora, con saltos de línea

14 Tag: “ ” (link) Tenemos un tag especial para hacer links tanto internos como externos y se llama “A”. La sintaxis para usarlo es: texto a mostrar TAG: ATRIBUTOS: HREF= dirección de destino: Ejemplos: href=“www.clarin.com.ar”www.clarin.com.ar TITLE= Cuando uno posiciona el mouse sobre el link, le aparece lo que escribamos acá. TARGET= si es _blank, es que abra una nueva ventana para el link, si no se especifica nada, recarga la pagina destino en la misma que estamos viendo.

15 Nuestro ejemplo hasta ahora, con links Título de la página Aquí iría el contenido de la página Este es otro renglón Este otro. Haga click aquí para ir al sitio de clarin.http://www.clarin.com.ar

16 Tag: “ ” (imagen) Este tag nos permite mostrar una imagen en nuestro sitio, tanto interna como externa. Se escribe así: TAG: IMG Atributos: SRC= Ruta en donde se encuentra la imagen. En este caso en la carpeta imágenes. ALT= si la imagen no se encuentra, se mostrará este texto. Este tag NO tiene cierre, fijense que termina con “/>”

17 Ejemplo Completo Título de la página Aquí iría el contenido de la página Este es otro renglón Este otro. Haga click aquí para ir al sitio de clarin. http://www.clarin.com.ar

18 Estructura de Página / Sitio web. Archivos.HTML ImágenesArchivos JS Los sitios web deben tener una estructura en la cual los elementos estén correctamente separados para su mejor uso y mantenimiento. Se debe tener una carpeta con imágenes. Una con los archivos CSS, una para los JS y los archivos HTML pueden estar sueltos como en una carpeta también. Archivos CSS

19 Preguntas???