Confidential // Neoris 1 Confidential // Do Not Reproduce without prior written permission from Neoris // Version 1.1.0 PracticalVisionaries HTML Básico.

Presentación del tema: "Confidential // Neoris 1 Confidential // Do Not Reproduce without prior written permission from Neoris // Version 1.1.0 PracticalVisionaries HTML Básico."— Transcripción de la presentación:

1 Confidential // Neoris 1 Confidential // Do Not Reproduce without prior written permission from Neoris // Version 1.1.0 PracticalVisionaries HTML Básico HyperText Markup Language (Lenguaje de Marcas de Hipertexto).

2 Confidential // Neoris // Version 1.1.0 2 Agenda  ¿Qué es HTML?  Texto HTML  Estilos HTML  Enlaces (Links) HTML  Imágenes HTML  Tablas HTML  Listas HTML  Formularios y controles HTML

3 Confidential // Neoris // Version 1.1.0 3 ¿Qué es HTML? HTML es un lenguaje de marcación. Un lenguaje de marcación esta formado por “etiquetas” HTML usa etiquetas para describir páginas Web

4 Confidential // Neoris // Version 1.1.0 4... Marcador HTML Marcado estructural describe el propósito del texto Golf  Establece a "Golf" como un encabezamiento de segundo nivel. Estructura general de una línea de código en el lenguaje de etiquetas HTML

5 Confidential // Neoris // Version 1.1.0 5 … Elementos contiene una etiqueta de inicio: Ej: contiene una etiqueta de cierre: Ej: Atributos nombre – valor, separados un signo “=” escrito en la etiqueta de comienzo de un elemento: Ej: Contenido

6 Confidential // Neoris // Version 1.1.0 6 … Encabezados HTML Solo se deben usar estas etiquetas para encabezados. Los motores de búsqueda usan los encabezados como índice de estructura y contenido de una pagina Web. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 Reglas horizontales This is a paragraph

7 Confidential // Neoris // Version 1.1.0 7 … Comentarios en el HTML se insertan en el HTML para hacer el código más legible y entendible. Párrafo HTML This is a paragraph. This is a paragraph 2. This is a paragraph 3. Saltos de línea para comenzar una nueva línea o comenzar un Nuevo párrafo This is a para graph with line breaks

8 Confidential // Neoris // Version 1.1.0 8 Texto HTML Etiquetas de formateo de texto Descripción Texto en negrita This text is bold Texto grande This text is big Texto enfatizado This text is emphasized Itálica This text is italic Texto pequeño This text is small Texto fuerte This text is strong Subíndice de textoThis text contains subscript Superíndice de textoThis text contains superscript Texto borrado My favorite color is blue Texto insertado My favorite color is blue red ! Código Tag

9 Confidential // Neoris // Version 1.1.0 9 … Etiquetas de Salida Tag Descripción Marca que lo que se muestra es código Computer code text Texto de teclado Keyboard text Ejemplo de código de computadora Sample computer code text Texto de teletipo This text is teletype Define una variable Variable Define texto preformateado Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks Código

10 Confidential // Neoris // Version 1.1.0 10 … Tag Descripción Define una abreviación The WHO was founded in 1948. Define un acrónimoCan I get this ASAP ? Define un elemento de dirección Written by W3Schools.com Address: Box 564, Disneyland Phone: +12 34 56 78 Define dirección de un texto Here is some Hebrew text! Define una cita larga Here is a long quotation here is a long quotation here is a long quotation here Define una cita corta Here is a short quotation Define una citación Citation Define un término de definición Definition term Código Etiquetas de citación Y definición

11 Confidential // Neoris // Version 1.1.0 11 Estilos HTML El atributo style (estilo) es un Nuevo atributo que introduce CSS al html. proporciona una forma común de estilo de todos los elementos HTML los estilos se pueden añadir a los elementos HTML directamente usando el atributo de style, o indirectamente por separado en hojas de estilo (css). Estilos y colores Este texto esta en Verdana y en rojo. Este texto esta en Times y azul. Este texto es de 30 píxeles de alto

12 Confidential // Neoris // Version 1.1.0 12 Etiquetas obsolut as Tag Centra el contenido y Define fuentes HTML y Define texto tachado Define texto subrayado Atributos absolutos align Define la alineación del texto bgcolor Define color de fondo color Define color del texto Descripcion Atributos Descripcion … Etiquetas y atributos que se deberían evitar usar Se debería usar estilos CSS

13 Confidential // Neoris // Version 1.1.0 13 Enlaces (Links) HTML Hipervínculos Es una referencia a un recurso (todo tipo de recursos, una pagina HTML, una imagen, un archivo de sonido, etc.). Anclas Se usa para definir el destino de un hipervínculo dentro de un documento. Se usa la etiqueta tanto para definir un ancla como para un hipervínculo Link HTML La etiqueta de apertura contiene los atributos del link. El contenido del elemento (texto del link) define la parte que se vera en la pagina texto del link Atributos Descripcion Código href Define la dirección del link. Visite W3Schools! target Define adonde se abrirá el documento diferenciado Visite W3Schools! name El elemento define un ancla nomenclada dentro del documento HTML Contenido

14 Confidential // Neoris // Version 1.1.0 14 Imágenes HTML Se definen mediante la etiqueta. La etiqueta es una etiqueta vacía, o sea que no requiere ser cerrada Atributos Descripcion Código src (source). El valor del src es la URL de la imagen que se intenta mostrar. La URL apunta al lugar adonde se almacena la imagen. alt Define el texto alternativo para una imagen. El valor del alt es un texto definido por el autor:

15 Confidential // Neoris // Version 1.1.0 15 … Etiquetas Descripcion Código Define una imagen Define un mapa de imágenes Define un area clickeable dentro de un mapa de imagen Ejemplos Imagen de fondoImagen de fondo - Alineación de imágenesAlineación de imágenes Imagen flotanteImagen flotante - Ajustar el tamaño de las imágenesAjustar el tamaño de las imágenes Mostrar un texto alternativo para una imagen Hacer un hipervínculo desde una imagen Crear un mapa de imágenesCrear un mapa de imágenes - Convertir una imagen en un mapa de imagenConvertir una imagen en un mapa de imagen

16 Confidential // Neoris // Version 1.1.0 16 Tablas HTML se definen mediante la etiqueta se divide en filas ( ) cada fila se divide en celdas ( “table data”) una celda puede contener texto, imágenes, listas, párrafos, formularios, reglas horizontales, tablas, etc. fila 1, celda 1 fila 1, celda 2 fila 2, celda 1 fila 2, celda 2 fila 1, celda 1fila 1, celda 2 fila 2, celda 1fila 2, celda 2 Si no se especifica el atributo “border”, la tabla se muestra sin bordes

17 Confidential // Neoris // Version 1.1.0 17 … Encabezados en una tabla Se definen mediante la etiqueta. Encabezado Otro Encabezado fila 1, celda 1 fila 1, celda 2 fila 2, celda 1 fila 2, celda 2 EncabezadoOtro Encabezado fila 1, celda 1fila 2, celda 1 fila 1, celda 2fila 2, celda 2 Celdas vacías en una tabla fila 1, celda 1 fila 1, celda 2 fila 2, celda 1 fila 1, celda 1 fila 1, celda 2 fila 2, celda 1 Las celdas sin contenido no se muestran muy bien en la mayoría de los browsers se usa el carácter de espacio ( “non- breaking space”).

18 Confidential // Neoris // Version 1.1.0 18 Etiquetas Tag Descripción Define una tablaTabla sin bordes Encabezados en una tabla Celdas vacías Tabla con un título Celdas de la tabla que ocupan más de una fila/columna Etiquetas dentro de una tabla Margen de celdas Espaciamiento de la celda Añadir un color de fondo o una imagen de fondo a una tabla Añadir un color de fondo o una imagen de fondo a una celda de tabla Alinear el contenido en una celda de tabla El atributo frame Los atributos frame y border Define una fila de encabezado de tabla Define una fila Define una celda Define un titulo Define un grupo de columnas Define el atributo de valores de una o más columnas en una tabla <thead> Define un encabezado Define el body de una tabla Define el pie de una tabla … Ejemplos

19 Confidential // Neoris // Version 1.1.0 19 Listas HTML Listas sin orden es una lista de ítems - Los ítems listados son marcados con bullets empieza con la etiqueta cada ítem de la lista a su ves empieza con un tag Café Leche Café Leche Listas ordenadas es una lista de ítems - esta marcada con números empieza con la etiqueta cada ítem de la lista se marca con la etiqueta. Café Leche 1 Café 2 Leche Dentro de un ítem se pueden insertar párrafos, saltos de línea, imágenes, otras listas, etc.

20 Confidential // Neoris // Version 1.1.0 20 … Listas de definiciones es una lista de ítems (términos), con una descripción de cada uno empieza con la etiqueta (definition list) cada termino empieza con un etiqueta (definition term) cada descripción, comienza con una etiqueta (definition description) Café Bebida caliente de color negro Leche Bebida fría de color blanco Café Bebida caliente de color negro Leche Bebida fría de color blanco Dentro de una etiqueta se pueden insertar párrafos, saltos de línea, imágenes, otras listas, etc. Ejemplos Listas anidadas Listas anidadas 2

21 Confidential // Neoris // Version 1.1.0 21 Etiquetas Tag Descripción Define una lista ordenada Define una lista sin orden Define un ítem de una lista Define una lista de definiciones Define un termino (ítem) de una lista de definiciones Define una descripción de un termino de una lista de definiciones Obsoleta. Usar Obsoleta. Usar …

22 Confidential // Neoris // Version 1.1.0 22 Formularios y controles HTML Formularios es área que puede contener elementos los elementos permiten al usuario ingresar información (textareas, combos, radios checkboxes) se define con la etiqueta Elementos Input se define con la etiqueta el atributo type de la etiqueta especifica el tipo del elemento: * Campos de texto: Nombre: Apellido: * Radios: Masculino Femenino Ej.: Campos de contraseñaCampos de contraseña

23 Confidential // Neoris // Version 1.1.0 23 … * Checkbox: El atributo action y el botón submit: * Botón submit: el contenido del formulario es enviado al servidor de aplicaciones. * Atributo action del formulario: define el archivo al que se enviara dicho contenido para que este lo use. Tengo bicicleta: Tengo auto: Tengo avi ó n: Usuario:

24 Confidential // Neoris // Version 1.1.0 24 … Etiquetas Tag Descripción Define un formulario Define un campo de ingreso de datos Define un textarea (control de ingreso de texto de muchas líneas) Define un label para un control Define un fieldset Defines un titulo para un fieldset Define una lista desplegable de opciones Define un grupo de opciones Define una opción en una lista desplegable Define un botón

25 Confidential // Neoris // Version 1.1.0 25 Gracias! Fuentes - HTML Reference (http://www.w3schools.com/tags) - HTML Tutorial (http://www.w3schools.com/html) - Wikipedia (http://es.wikipedia.org/wiki/HTML)