Conceptos html
- 1. Ángela San Antonio y Yaiza García
- 2. Lenguaje HTML Estructura Básica De Una Página HTML Personalización del Estilo: CSS
- 3. 1.1 Significado de HTML y utilidad 1.2 ¿Por qué HTML no es un lenguaje de programación? 1.3 Etiquetas 1.4 Atributos
- 4. 1.1 Significado de HTML y utilidad HyperText Markup Language Conjunto de etiquetas predefinidas que son interpretadas por el navegador para construir la visualización de una página. Las paginas web están estructuradas con código HTML, el lenguaje CSS y el JavaScript.
- 5. 1.2 ¿Por qué HTML no es un lenguaje de programación? Carece de ciertas características que lo definirían como un lenguaje No tiene estructuras de control No puede tomar decisiones Es un lenguaje de etiquetas predefinidas que indican al navegador como estructurar el contenido
- 6. 1.3 Etiquetas Es un nombre que define a la etiqueta y esta encerrada por símbolos (<>) y esta escrita en minúsculas. Hay dos tipos : las que contienen texto y las que representan parte de la estructura. Ejemplos : Párrafo : <p>Contenido del párrafo </p> Salto de línea : <br/> Párrafo con contenido en negrita : <p>Texto normal y <strong>texto en negrita.</strong></p>
- 8. 1.4 Atributos Valores que se agregan a una etiqueta para configurar su comportamiento Se añaden en la etiqueta de apertura, nunca la entrada Hay dos tipos : los globales que se aplican a todas las etiquetas y los exclusivos que solo funcionan en algunas etiquetas Ejemplo : (src = archivo que contiene la imagen; alt = texto alternativo) <img src= “imagen.jpg” alt=“imagen de prueba”/>
- 9. 2.1 Editores de texto plano y editores de documentos web. Ejemplos 2.2 Elementos básicos de la estructura de un documento HTML 2.3 Elementos de bloque y de línea 2.4 Etiquetas básicas 2.5 Atributos globales aplicables a cualquier etiqueta: id, class, style, title 2.6 Listas y tipos 2.7 Encabezados 2.8 Tablas 2.9 Imágenes 2.10 Enlaces
- 10. 2.1 Editores de texto plano y editores de documentos web TEXTO PLANO EDITORES WEB Es un formato que solo incluye código Ejemplo : brackets Ofrecen herramientas para añadir efectos al texto sin necesidad de escribir código Ejemplo : KompoZer
- 11. 2.2 Elementos básicos de la estructura de un documento HTML Antes de empezar a crear el documento es preciso definir la estructura básica de la página web Elementos básicos : Doctype : informa sobre el tipo de archivo <Html> : elemento raíz que contiene todo el documento html <Head> : incluye la información general sobre la pagina web <Meta charset=“UTF-8”/> : indica el tipo de codificación <Body >: encuentra a continuación de <head>
- 12. • Ejemplo de estructuración básica
- 13. 2.3 Elementos de bloques y de línea ELEMENTOS DE BLOQUE ELEMENTOS EN LINEA Por defecto, ocupan el ancho disponible Pueden contener otros elementos de bloque Ejemplos : Párrafos <p> Listas <ul> y <ol> Tablas <table> El ancho que ocupan viene definido Solo pueden contener otros elementos en línea Ejemplos : Imágenes <img> Enlaces <a> Negrita <strong>
- 14. 2.4 Etiquetas básicas División : <div> divide la pagina en secciones Párrafo : <p> solo engloba elementos en línea Subrayado : <u> Cursiva : <em> Negrita : <strong> Subíndice : <sub> Superíndice : <sup> Salto de línea : <br>
- 15. 2.5 Atributos globales aplicables a cualquier etiqueta <Id> : identifica una etiqueta de forma única . Solo puede contener letras , números y caracteres. <Class> : agrupa varias etiquetas bajo un estilo común. <style> : aplica un estilo mediante CSS a un elemento. Es útil para hacer pruebas de visualización. <Title>: elabora una descripción corta de un elemento
- 16. 2.6 Listas y tipos Listas ordenadas Establecen un orden concreto Se representan con la etiqueta <ol> Admite otros atributos como: reversed , type, start • Estructura que engloba un conjunto de elementos que la componen.
- 17. 2.6 Listas y tipos Listas desordenadas No mantienen ningún orden concreto Se representa con la etiqueta <ul> Puesto que no siguen ningún orden concreto no se usan otros atributos en esta lista
- 18. 2.7 Encabezados Son párrafos especiales destinados a la creación de títulos Están definidos por las etiquetas <h1> hasta <h6>, siendo <h1> el de mayor nivel Es recomendable usar hasta el nivel 4 como máximo porque sino el encabezado es mas pequeño que el texto
- 19. 2.8 Tablas Elemento que se emplea para estructurar una serie de datos alineados en filas y columnas Etiquetas: Tabla <table> Filas <tr> Columnas <td> Atributo border Atributo colspan (unión columnas) Atributo rowspan (unión de filas)
- 20. 2.9 Imágenes Elementos en línea que si no se quieren alinear con el resto del texto se deben incluir en elementos de bloque aparte Se representan con la etiqueta <img>. Lo ideal seria incluir el atributo <alt> que incluye texto alternativo en caso de que la imagen no se pueda mostrar
- 21. 2.10 Enlaces Son vínculos a otras paginas, ya sean en el mismo servidor o uno externo Etiquetas : Enlace <a> Atributo _blank ( abrir el enlace en otra pestaña) Atributo href (incluye la ruta hacia la pagina con la que se enlaza)
- 22. 3.1 Significado de CSS y utilidad 3.2 Formas de colocación del código CSS 3.3 Selectores básicos 3.4 Colores 3.5 Texto 3.6 Tamaño 3.7 Bordes 3.8 Márgenes 3.9 Posicionamiento 3.10 Imagen de fondo
- 23. 3.1 significado de CSS y utilidad Es un lenguaje utilizado para definir el modo de presentar el código HTML Permite separar la estructura de un documento(HTML) de su diseño o presentación (CSS) Un solo archivo CSS puede modificar varios documentos HTML
- 24. 3.2 formas de colocación del código CSS ATRIBUTO HTML CON ATRIBUTO STYLE ETIQUETA STYLE El atributo style se puede usar con cualquier etiqueta Los diferentes argumentos se separan por comas <Style > permite establecer un diseño general que afecta a todo el documento Se suele incluir en la cabecera(<head>) No se puede reutilizar en otros documentos sin haberse duplicado previamente
- 25. 3.2 formas de colocación del código CSS EN UN ARCHIVO INDEPENDIENTE La forma mas elegante de incluir código CSS es con un archivo externo Tiene una extensión .css Para incluir un documento CSS se necesita insertar la siguiente etiqueta en la cabecera
- 26. 3.3 selectores básicos Selectores por tipo Se escribe el nombre de una etiqueta HTML Afectan a todos los elementos del mismo tipo en el documento, como párrafos o enlaces Selectores de clase El nombre del selector va precedido por un punto Atributo class Selectores de id Afecta a un elemento Atributo id
- 27. 3.4 colores Modificar color de texto color Modificar color de fondo background-color Se tienen que indicar las proporciones del los tres colores básicos(RGB)
- 28. 3.5 texto Algunas de las propiedades del texto que se pueden modificar son: Alineación(test-align): left, right, center, justify. Subrayado(text-decoration): underline, overline, line- through. Tipo de fuente(font-family): helvetica, verdana, times new roman. Grosor(font-weight) Sombreado(text-shadow)
- 29. 3.6 Tamaño Por defecto los elementos de bloque ocupan el espacio disponible La anchura y altura de un elemento se pueden establecer con propiedades CSS Un elemento viene definido por width (ancho) y heigth(alto) Propiedades : Display: block elemento de bloque Display: inline elemento en línea
- 30. 3.7 Bordes Propiedades: Border-width: añade grosor al borde de los cuatro lados Border-style: selecciona el tipo de trazo (solid, double, dotted) Border-color: define color del borde Border-radius: establece el radio del borde (en px)
- 31. 3.8 Márgenes Propiedades: Margin: espaciado entre un elemento y los elementos que lo rodean (en px) Padding: espaciado entre un elemento y su contenido Se pueden modificar de manera individual con los sufijos –left, -right, -top, -bottom.
- 32. 3.9 Posicionamiento Se realiza según la estructura HTML establecida Propiedades CSS position: Position: static valor por defecto Position: relative altera la posición con las propiedades top, botton, left, right Position: absolute situa el elemento en la esquina superior izquierda del elemnto que la contiene
- 34. 3.10 Imagen de fondo Propiedades: Background-image (background-image:url(‘./img.png’) Background-position: incluye una alineación horizontal y una vertical Background-repeat : ocurre cuando la imagen es más pequeña que el elemento, y por defecto se repite (efecto mosaico)
Notas del editor
- #7: https://www.um.es/docencia/barzana/IAGP/HTML1.html