¡Descarga ejercicios practica html y css y más Apuntes en PDF de Dibujo Técnico solo en Docsity!
Estructura de una página html
doctype
La etiqueta
HTML 5 : esta es la última versión. Aún no está muy extendida y llama mucho la atención
porque proporciona muchas mejoras, como la capacidad para incluir vídeos fácilmente, un
diseño mejorado del contenido, nuevas funciones para los formularios, etc.
CSS 3 : esta es la última versión, esta incluye funciones muy esperadas, como bordes
redondeados, degradado, sombras, etc.
Que se requiere: editor de texto (visual estudio code, bloc de notas, sublime tex etc.) y para
ejecutar el programa un navegador de internet como google crown, mozilla etc.
Nota: para crear la pagina web no basta con tener editor y navegador requiere tener las
etiquetas.
Nótese que las etiquetas se abren y se cierran en un orden específico. Por ejemplo, la etiqueta es la primera que se abre y también la última que se cierra (al final del código con ). Las etiquetas se tienen que cerrar en el orden inverso en el que se abrieron. Por ejemplo: : correcto. Una etiqueta que se abrió dentro de otra etiqueta también se tiene que cerrar dentro de esa etiqueta. : incorrecto , las etiquetas están entrecruzadas.
La primera línea se denomina el doctype. Es fundamental porque indica que esto es
efectivamente una página web HTML.
Parte 1
Conceptos básicos de html
Una página web se compone de dos partes: La cabecera : esta sección proporciona información general sobre la página como su título, la codificación (para la gestión de caracteres especiales), etc. Esta sección suele ser bastante corta. La información que contiene la cabecera no se muestra en la página y es simplemente información general concebida para el ordenador. ¡Sin embargo, es muy importante! El cuerpo: es aquí donde se encuentra la parte principal de la página. Todo lo que tecleemos aquí se mostrará en la pantalla. La mayor parte de nuestro código se tecleará en el cuerpo. La codificación ( charset)
El título principal de la página
Organizar el texto
En este capítulo vamos a ver en orden sucesivo: cómo teclear párrafos; cómo organizar la página con títulos; cómo resaltar palabras determinadas en el texto; cómo organizar la información en listas.
significa "comienzo del párrafo";
significa "fin del párrafo";
Párrafos
significa "comienzo del párrafo";
significa "fin del párrafo"; Ejemplo como queda en la página web
Listas ordenadas Una lista ordenada funciona de la misma forma únicamente cambia la etiqueta: tenéis que sustituir por . Ejemplo Resaltar títulos
Para enfatizar el texto, tenéis que usar la etiqueta .
Ejemplo
Crear enlaces
Un enlace a otro sitio web
Estos enlaces se reconocen fácilmente en una página: están escritos de una forma diferente (de forma predeterminada en azul y subrayados) y un cursor que se parece a una mano aparece cuando se pone el ratón sobre ellos. Ejemplo enlace de misitio web a otra pagina web Usamos href
Enlace de mi propia página web archivos ubicados en la misma carpeta ejemplo: Aquí tenemos el código que vamos a usar en nuestros archivos página1.html y página2.html. Enlace de archivos ubicados en la carpetas diferentes IMÁGENES Hay un formato apropiado para cada imagen Para resumir, el formato se debe escoger dependiendo de la imagen que tengas, tal y como se indica a continuación:
Dar formato al texto color , para indicar el color del texto. text-align , para alinear el texto (left, right, center o justify). text-decoration , añade decoraciones al texto, como subrayado, tachado,… font-family , nombre de la fuente a utilizar (Arial, Courier,…). font-size , tamaño de la fuente font-style , estilo de la fuente (negrilla, itálica u oblicua). Ahora solo nos quedará el aplicarlas al elemento body de la página. De esta forma se convertirá en el formato de texto por defecto de nuestra página. Para ello insertamos el estilo CSS en la cabecera de la página de la siguiente forma:
Color
Espefecifica el color del texto. Su valor puede ser un código hexadecimal o el nombre de un color. Ejemplo
Text-align
Permite alinear el texto que está dentro de un elemento contenedor. Pueden usarse los siguientes valores Left: Alinea el texto al borde izquierdo del contenido. Right: Alinea el texto al borde derecho del contenedor. Center: Alinea el texto en el medio del contenedor. Justify: Expande el texto a lo ancho del contenedor haciendo que el borde de las líneas quede lo mas alineado posible en ambos márgenes. A continuación muestro un ejemplo empezando por el CSS:
Text-decoration
Permite añadir una línea decorativa al texto. Los valores que usa: Underline: añade una línea bajo el contenido. Overline: La línea se añade por encima. Line-through: La línea pasa por el medio del contenido dando un efecto de tachado. None: Elimina cualquier text-decoration en un elemento. A continuación muestro un ejemplo comenzando por el CSS: Ejemplo propiedad font-family
La propiedad font-family define una lista de fuentes o familias de fuentes, con un orden de
prioridad, para utilizar en un elemento seleccionado.
Sintaxis font-family: [, ]
Ejemplo
font-style: inherit; font-style: initial; font-style: unset; valores normal italic oblique Escoge un tipo de letra clasificado como normal dentro de una familia de fuente. Escoge un tipo de letra etiquetado como italic, o, si una versión cursiva del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como oblique en lugar de eso. Escoge un tipo de letra etiquetado como oblique, o, si una versión oblique del tipo de letra no esté disponible, escoge un tipo de letra etiquetado como italic en lugar de eso. Ejemplo Color y fondo En CSS el fondo se considera el ancho y el alto de un elemento, más algo de relleno y de las fronteras (pero no los márgenes). Con el CSS color de fondo color podemos propiedad el fondo de nuestra página HTML CSS3 también ha introducido nuevas propiedades para definir el estilo de las imágenes de fondo: background-origin: border-box | padding-box | content-box - permite definir el origen de coordenadas sobre el que se va a colocar la imagen de fondo. Acepta tres posible valores: “border-box” para que el fondo empiece desde el mismo borde del elemento, “padding-box” para que la imagen de fondo se coloque a partir del espaciado de padding, y por último “content-box” para que la imagen de fondo se coloque donde empieza el contenido del elemento, sin tener en cuenta el borde ni el padding. background-clip: border-box | padding-box | content-box - define el área sobre la que se extiende la imagen de fondo, puede tomar tres valores: “border-box” se extiende por toda el área dentro de la zona definida a partir del borde, “padding-box” se extiende a partir del espaciado de padding y “content-box” el fondo se extiende solo dentro del área de contenido. background-size : Permite indicar el tamaño de la imagen de fondo. Acepta diferentes atributos: o background-size: 200px; // especifica ancho y alto a la vez o background-size: 200px 100px; // 200px de ancho y 100px de alto o background-size: auto 200px; // ajustar la anchura automáticamente o background-size: 50% 25%; // También podemos indicar el tamaño con porcentajes o background-size: contain; // Escalar la imagen al tamaño máximo posible (conservando las proporciones originales) para que quepa dentro del área asignada.
o background-size: cover; // Escalar la imagen para que cubra completamente el área asignada (conservando las proporciones originales). Ejemplo Bordes y sombreado Bordes CSS Valor Descripción solid Establece un borde sólido (línea contínua). double Establece un borde doble (dos líneas contínuas). groove Establece un borde biselado con luz desde arriba. ridge Establece un borde biselado con luz desde abajo. Opuesto a groove. La propiedad compuesta border La propiedad compuesta border permite establecer simultáneamente los cuatro bordes (arriba, derecha, abajo e izquierda) de un elemento, definiendo su: color (nombre de color o código RGB o el valor transparent) grosor (valor absoluto de distancia, o los valores thin (fino), medium (medio) o thick (grueso)) estilo Las tres características del borde se pueden escribir en cualquier orden. Ejemplos
¿Qué es el modelo de cajas CSS? El modelo de cajas CSS completo se aplica a cajas que presentan comportamiento en bloque; las cajas con comportamiento en línea solo usan una parte del comportamiento definido en el modelo de cajas. El modelo define cómo funcionan juntas las diferentes partes de una caja (margen, borde, área de relleno y contenido) para crear una caja que puedas ver en tu página. Para complicarlo un poco más, hay un modelo de cajas estándar y un modelo de cajas alternativo. Partes de una caja Al hacer una caja de tipo bloque en CSS tenemos los elementos siguientes: El contenido de la caja : El área donde se muestra el contenido, cuyo tamaño puede cambiarse utilizando propiedades como width y height. El área de relleno de la caja : El área de relleno es un espacio en blanco alrededor del contenido; es posible controlar su tamaño usando la propiedad padding y otras propiedades relacionadas. El borde de la caja : El borde de la caja envuelve el contenido y toda el área de relleno. Es posible controlar su tamaño y estilo utilizando la propiedad border y otras propiedades relacionadas. El margen de la caja : El margen es la capa más externa. Envuelve el contenido, el relleno y el borde como un espacio en blanco entre la caja y otros elementos. Es posible controlar su tamaño usando la propiedad margin y otras propiedades relacionadas. Si suponemos que la caja tienes el CSS siguiente, que establece los valores para las propiedades width, height, margin, border, y padding: Márgenes, áreas de relleno y bordes
margin, padding y border
Margenes El margen es un espacio invisible que hay alrededor de la caja. Empuja otros elementos fuera de la caja. Los márgenes pueden tener valores positivos o negativos. Establecer un margen negativo para un lado de tu caja puede hacer que se superponga con otros elementos de la página. Podemos controlar todos los márgenes de un elemento a la vez usando la propiedad margin, o cada lado individualmente usando las propiedades equivalentes sin abreviar: margin-top margin-right margin-bottom
margin-left ejemplo .box { margin-top: - 40px; margin-right: 30px; margin-bottom: 40px; margin-left: 4em; } Bordes El borde se dibuja entre el margen y el área de relleno de una caja. Si utilizas el modelo de cajas estándar, el tamaño del borde se añade a los elementos width y height que establecen el alto y el ancho de la caja. Para establecer las propiedades de cada lado de forma individual, puedes utilizar: border-top border-right border-bottom border-left Para establecer el ancho, el estilo o el color de todos los lados, usa lo siguiente: border-width border-style border-color Para establecer el ancho, el estilo o el color de un solo lado, puedes usar una de las propiedades no abreviadas: border-top-width border-top-style border-top-color border-right-width border-right-style border-right-color border-bottom-width border-bottom-style border-bottom-color border-left-width border-left-style border-left-color En el ejemplo siguiente, hemos utilizado varios ejemplos de la lista anterior para crear bordes
.container { padding: 20px; } Posicionamiento en css Para ello, vamos a utilizar cuatro propiedades CSS: left : posición relativa en la izquierda de la página; rigth : posición relativa en la derecha de la página; top : posición relativa en la parte superior de la página; bottom : posición relativa en el pie de la página; jemplo a.caixa-5{ } position:relative; top:50px; left:50px; background-color:red; Tablas
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas.
Como muchas otras estructuras de HTML, las tablas son construidas utilizando
elementos.
En particular, una tabla básica puede ser declarada usando tres elementos, a saber,
table (el contenedor principal), tr (representando a las filas contenedoras de las celdas)
y td (representando a las celdas). Dejémoslo más claro con un ejemplo:
Celda 1 Celda 2 Celda 3
Celda 4 Celda 5 Celda 6
Parte
Formularios
Elementos básicos de un formulario En primer lugar vamos a ver qué elementos se necesitan para crear un formulario básico:
Nombre:Nombre:
Form : Es la etiqueta que define que estamos creando un formulario. Los atributos básicos son: action : Establece que página se carga una ve enviado un formulario, en este ejemplo estamos diciendo que se cargue la misma página pero podríamos enviar al usuario a una de agradecimientos. method : Es la forma en la que se envían los datos recogidos en el formulario. Al final lo que queremos con un formulario es recoger la información que rellena el usuario, y debemos establecer si lo mandamos vía URL (get – No recomendable) o POST (ocultos en la petición). La recogida de la información se hace mediante programación sea con: PHP, ASP, Javascript, etc. Label : Es una etiqueta para relacionar campos (inputs) con sus textos. Es decir si tenemos 2 campos necesitaremos identificarlos para que el cliente spa que meter en cada uno de ellos, el atributo form es de uso interno y sirve de identificación: este texto es para este campo, etc. Input type=»text» : Los inputs son campos que debe rellenar el usuario. Type = text : Define el tipo de campo. En este caso es text, por que queremos crear un campo de tipo texto. Name : Es el identificador del input y se usa en programación para recoger su información. Input type=»submit» : Type = submit : Indicamos que es un campo de envió, y su diseño será tipo botón. (Este diseño podemos cambiarlo con CSS) Value : se establece el valor por defecto del campo, en este caso ponemos ENVIAR, que es lo que verá el usuario. Los campos de typo: text, number, etx. También pueden llevar un valor por defecto. Los tipos de campos En la parte de abajo de esta entrada puedes ver un enlace con los ejemplos visuales de estos campos: Input type=»text» : Hemos visto este tipo de campo arriba. Input type=»radio» : Se usan para que el usuario tenga que seleccionar una opción entre varias disponibles. select : Su uso es un poco diferente de los inputs, y se usa para lo mismo que el input type radio pero en formato desplegable.
disabled : Se usa para marcar el campo como deshabilitado. size : Tamaño del campo. name : Es el nombre del campo, es importante ya que es la forma de enviar la información. Inputs : maxlenght : Número de caracteres permitidos. placeholder : Texto que se presenta dentro del campo, y que se borra cuando el usuario escribe. pattern : Permite crear reglar de forma que el usuario tenga que, como en el ejemplo de abajo, introducir solo 3 caracteres. Radio y checkbox : Checked : Indica que opción esta seleccionada por defecto. Textarea : Row y cols : Sirven para establecer las dimensiones del área de escritura. Select y datalist : Selected : Se usa para indicar que opción esta seleccionada por defecto. date y datetime : min y max : Establece los límites entre fechas. Fecha desde y fecha hasta. number : min y max : igual que el caso anterior permite establecer límite superior e inferior, y el usuario no puede seleccionar otro valor. step : Permite establecer el salto entre los números seleccionables. por ejemplo, si establecemos un salto de 3, solo podremos elegir el 3,6,9,12, etc. file : multiple : Permite que se suban varios ficheros a la vez.
Audio y video
Insertando contenido multimedia Insertar contenido multimedia en tus documentos HTML es muy sencillo: Este es un ejemplo para insertar audio en tu documento HTML
El atributo src puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.
