LENGUAJE DE MARCADO HIPERTEXTO HTML

Transcripción

1 LENGUAJE DE MARCADO HIPERTEXTO HTML 1. QUÉ ES HTML? HTML, siglas de Lenguaje de Marcas de HiperTexto (HyperText Markup Language), hace referencia al lenguaje de marcado Hipertexto. HTML es base de todo desarrollo WEB. Toda página que consultemos en Internet seguro tendrá etiquetas HTML. La versión de HTML que desarrollaremos es HTML5. 2. PARA QUÉ SIRVE EL HTML? HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una serie de etiquetas que el navegador interpreta y da forma en la pantalla a través de un navegador. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc. 3. ESTRUCTURA GENERAL DE UNA PÁGINA en HTML El atributo charset se utiliza para especificar la codificación usada en nuestra página. Únicamente debe existir una etiqueta meta con el atributo charset en la página. En él indicaremos si nuestra página esta codificada en UTF-8, el cual es el estándar para HTML5. Editor de Texto Sublime Text Las etiquetas HTML se deben escribir en un editor, para luego ser guardado con la extensión HTML. Utilizaremos el editor de texto Sublime Text. Descargar en Al crear un archivo nuevo debemos ir al menú View Syntax HTML, o elegir la sintaxis que necesitas. Para crear la estructura de una página html, escribir html:5 y luego la tecla TAB. Haremos de la característica de autocompletar. Si queremos escribir la etiqueta <title> </title>, solo debemos escribir la palabra title y luego la tecla TAB, y se verá el autocompletado. 4. FORMATO DE TEXTO EN HTML Las etiquetas deben rodear al texto. Es decir, la etiqueta debe abrirse y cerrarse, conteniendo el texto o la palabra que queramos transformar en su interior. Por ejemplo: Este texto aparecerá escrito en negrita. Se pueden combinar diferentes formatos, o sea, diferentes etiquetas. Por ejemplo, si queremos que un texto esté en negrita y en cursiva escribiríamos esto: Este texto aparecerá escrito en negrita y en cursiva. Cuando combines, ten cuidado a la hora de cerrar las etiquetas. Debes cerrar las etiquetas por orden, de la más interior a la más exterior Mg. Abril Saire Peralta

2 Muchas de las etiquetas están obsoletas (deprecated), lo que significa que ya no se recomienda su uso. Para lograr el resultado deseado se deben usar hojas de estilo CSS como veremos más adelante. s: HTML Resultado 5. CABECERAS Las cabeceras permiten manejar tamaños de fuentes y se aplican generalmente a los títulos y subtítulos. Las cabeceras van desde <h1>, <h2>, <h3>, etc., mientras va aumentando de número el tamaño se hace más pequeño Mg. Abril Saire Peralta

3 Nota: Cuando se usan cabeceras, se incluyen automáticamente el enter. 6. LÍNEA HORIZONTAL Para inserta una línea horizontal en un documento HTML se hace a través de la etiqueta <HR>. Sus propiedades son las siguientes: noshade: elimina el efecto de sombra de línea width: permite definir la longitud de la línea size: permite definir el grosor o ancho de la línea : 7. PÁRRAFO La etiqueta <p> permite convertir una o más líneas de texto en un párrafo. 8. ETIQUETA PRE Mg. Abril Saire Peralta

4 Respeta el texto en su formato natural. : 9. ETIQUETA FONT La etiqueta FONT permite definir el tamaño, color y tipo de fuente de un conjunto de líneas de texto, sus parámetros ó atributos a utilizarse son lo siguientes: Size: Permite regular el tamaño de la letra, utilizar un número entre 1 y 7 Face: Permite aplicar un tipo de letra al texto, como arial, times new roman, courier, etc. Color: Permite aplicar un color al texto deseado. Para instalar presionamos CTRL + SHIF + P y buscamos install Package y le damos enter. Seguidamente digitamos Color Picker y le damos enter. La forma de insertar colores será a través de la instalación del Plugins Picker Color, el cual una vez instalado lo invocaremos con la combinación de teclas CTRL + SHIF +C. Para desinstalar cualquier plugin presionamos CTRL + SHIF + P y escribimos Remove Package y le damos enter, luego mostrara el listado de plugins instalados, seleccionar y darle enter, para eliminar el plugin. Primera forma TABLA DE COLORES Rojo Red Azul Blue Azul marino Navy Verde Green Oliva Olive Amarillo Yellow Lima Lime Magenta Magenta Purpura Purple Cyan Cyan Marron Brown Negro Black gris gray Teal teal blanco white Segunda forma A través de tres códigos de colores en hexadecimal #rrggbb (rojo, verde, azul). Cada código puede tomar valores entre 00 y ff. Algunos códigos son: Verde: #00ff00 Rojo: #ff Mg. Abril Saire Peralta

5 10. INSERTAR IMÁGENES La etiqueta que permite agregar imágenes es <IMG SRC=imagen> Para manejar el tamaño de una imagen, podemos aplicar las siguientes propiedades: Width, maneja el ancho de la imagen. Height, maneja o redefine el alto de la imagen. 11. LISTAS Las listas permiten agregar elementos a través de numeración o viñetas. Para mejorar la velocidad en la creación de listas podemos utilizar el plugin EMMET. Se instala de la misma manera como se instaló el plugin Color Picker. Listas No Numeradas La etiqueta <UL> permite crear una lista y la etiqueta <LI> permite agregar elementos a las listas. Las listas por defecto se listan con círculos negros. La etiqueta <UL>, admite el parámetro TYPE, donde se indica el tipo de símbolo que listara a los elementos de la lista. Podemos darle los valores de: disc, circle y square. <UL TYPE=square> Listas Numeradas Se pueden enumerar los elementos de la lista través de números, letras del alfabeto, numeración decimal y romana. Para crear una lista numerada se usa la etiqueta<ol> Mg. Abril Saire Peralta

6 Al ejecutar por defecto se enumera con números empezando por el 1. Otras características o propiedades de este tipo de lista, tenemos: TYPE, indicando que símbolo utilizar para enumerar y tenemos: a, A, 1, I, i. También tenemos la propiedad START, que indica desde donde empezar la ordenación, se le indicara un número 02 Listas de Definiciones Este tipo de listas se asemejan a la palabra y concepto, parecido a un diccionario. Para crear esta lista utilizaremos la etiqueta <DL>, y para cada elemento dos etiquetas, una para la palabra que es <DT> y la otra para la definición de dicha palabra <DD>. Con el plugin EMMET podemos digitar ul>li*5, luego presionar el tabulador y tenemos la lista de 5 elementos. 12. ENLACES A OTRAS PÁGINAS Permiten conectarnos con otras páginas a través de enlaces. 01 Enlazar la página index.html con las páginas producto.html y ventas.html Mg. Abril Saire Peralta

7 Los archivos ventas y productos deben estar guardados en el mismo lugar. Si los archivos ventas y productos estuvieran dentro de una carpeta, la agregación seria: 02 Enlace a través de listas e imágenes 13. ENLACE DENTRO DE LA MISMA PÁGINA Son desplazamientos o saltos dentro del mismo archivo. Primero tenemos que colocar anclas a los puntos donde queremos saltar. <a name= posicion1 >texto opcional</a> <a name= posicion2 >texto opcional</a> Por último los enlaces son <a href="#posicion1" > haga clic aquí</a> Podemos saltar a una posición de una página específica <a href="productos.html#posicion1 > haga clic aquí</a> Mg. Abril Saire Peralta

8 14. COLOR AL FONDO DE TU PÁGINA Con la etiqueta <BGCOLOR> podemos aplicar un color de fondo Con la etiqueta BACKGROUND se puede aplicar una imagen de fondo y con la etiqueta TEXT se puede aplicar un color de texto a la página. 15. DESCARGAR UN ARCHIVO Para descargar un archivo de Word, Excel, video o archivo de animación, etc. 16. TABLAS Una tabla está formada por un conjunto de filas y columnas. Para crear una tabla se debe utilizar las siguientes etiquetas, Insertar una tabla: <table> Insertar una fila: <tr> Mg. Abril Saire Peralta

9 Insertar una celda sin formato: <td> Insertar una celda con formato: <th> (centrar y negrita) Nota: La tabla mostrada tiene las siguientes propiedades El ancho de la tabla (width) ocupa el 50% del ancho de la ventana El borde de la tabla (border) tiene un grosor de dos píxeles La tabla esta alineada al centro (center) de la ventana No hay espacio entre las celdas (cellspacing="0") El border de la tabla es de color verde Mg. Abril Saire Peralta

10 El color de fondo o relleno es rojo La propiedad colspan, permite combinar columnas de celdas La propiedad rowspan, permite combinar filas de celdas Mg. Abril Saire Peralta

11 AUDIO Y VIDEO Las etiquetas audio y video tienen problemas de soporte de los navegadores, ya que son etiquetas de HTML5. Atributos Src, cadena que representa una URL que señala a un archivo de vídeo. Controls, atributo booleano que activa un conjunto de controles de reproducción integrados. Normalmente incluye reproducción, pausa, buscar y ajustar volumen. Internet Explorer 10 también muestra un control para elegir varias pistas de audio y texto. Autoplay, atributo booleano que inicia la reproducción de vídeo automáticamente cuando el reproductor tiene suficiente contenido almacenado en búfer. Muted, atributo booleano que reproduce vídeo con la pista de audio desactivada. Loop, atributo booleano que reproduce el vídeo repetidamente hasta que se presiona el botón de pausa en los controles, o se llama al método pause desde un script. height, Establece el alto del reproductor de vídeo, en píxeles. width, Establece el ancho del reproductor de vídeo, en píxeles Mg. Abril Saire Peralta