¡Descarga Wellens Paul 2015 Capitulo 2 Html Practical Web Developme y más Traducciones en PDF de Humanidades solo en Docsity!
HTML
ley. derechos de autor aplicable bajo EE.UU. o Permitido usos justo editor, excepto permiso de la en cualquier forma sin editorial. No se puede reproducir
- Packt reservado. derechos de autor Todos los derechos En este capítulo, le guiaremos a través de los conceptos básicos de HTML. En el Capítulo 1 , The World Wide Web ,ya cubrimos lo que significan las letras HTML, de dónde viene el idioma y para qué se usa: para crear la parte de contenido de sus páginas web. Ya sabemos que este contenido se coloca entre las etiquetas: para abrir y para cerrar. Estaría más allá del alcance de este libro proporcionar una referencia completa a todas las etiquetas HTML, o elementos (usaremos estas palabras indistintamente), y todos sus atributos. Hay algunas buenas referencias enumeradas en la bibliografía y, por supuesto, hayalgunas referencias en línea interesantes. Personalmente, me gusta w3schools.com pero, si no lo haces, simplemente busca en Google "HTML" seguido de un nombre de etiqueta sobre el que te gustaría saber más y encontrarás algunas excelentes fuentes alternativas. Por lo tanto, solo describiremos las etiquetas HTML más utilizadas en este capítulo, agrupadas por el papel que desempeñan en el documento. Por ejemplo, todas las etiquetas que se pueden utilizar en una tabla se agrupan bajo la tabladeencabezados.
Versiones HTML
Desde su creación, por supuesto, ha habido varias versiones y sabores diferentes de HTML. Los más notables son HTML4, XHTML y HTML5:
- HTML4 : Esta es la última de una serie de versiones de HTML y es a lo que la mayoría de la gente se referirá implícitamente cuando hablen de HTML.
- XHTML : Esta es una definición diferente de HTML y un intento de hacer de HTML un miembro de la familia XML, dándole reglas más estrictas. Una ventaja es que sería más fácil utilizar herramientas y lenguajes destinados a manipular y traducir documentos XML. Sin embargo, el interés en mantener esa norma parece haberse desvanecido. [ 15 ] EBSCO Publishing : eBook Collection (EBSCOhost) - impreso el 30/09/2020 12:41 PM vía UCA - UNIVERSIDAD CENTROAMERICANA JOSE SIMEON CANAS AN: 1046853 ; Wellens, Paul.; Desarrollo Web Práctico Cuenta: ns021742.main.eds
HTML
- HTML5 : Este es el niño más nuevo en el proverbial bloque HTML. Se han publicado muchos libros al respecto y, si has leído uno de ellos, habrás descubierto que HTML5 es algo más que una nueva versión del lenguaje de marcado. Por supuesto, viene con bastantes etiquetas nuevas, como las etiquetas o tags. HTML5 también cuenta cons el uso de atributos de datos personalizados, tales como data-whateveryouchoose que puede utilizar en el documento. Más adelante puede manipularlos usando JavaScript. Es una forma de pasar datos dentro de un elemento; de ahí el nombre elegido: data-*. ¿He dichoJavaScript? Todas las demás características nuevas de HTML5 son en realidad API de JavaScript como HTML5 Canvas. Canvas le permite dibujar cosas en su página web, por ejemplo, gráficos circulares. Por muy emocionantes que sean estas API, están fuera del alcance de este capítulo.
Semántica y presentaciónal HTML
El enfoque que estamos tomando en este capítulo y en la primera parte del libro en general es usar solo elementos y atributos HTML que están cubiertos por los tres estándares. En la práctica, esto significa que no usaremos ningún atributo HTML4 que haya desaparecido en HTML5 y no usaremos ningún elemento o atributo HTML5 que no existiera en HTML4. Por otro lado, no queremos desalentar el uso de cosas nuevas, por lo que enumeraremos los elementos específicos de HTML5 en una lista separada. También usaremos los nuevos elementos en la segunda sección del libro donde presentaremos un marco CSS / JavaScript genial. Uno podría dividir fácilmente los elementos HTML en dos grupos. El primer grupo consta de elementos que hacen referencia a partes de un documento: encabezados, párrafos, tablas, params, listas, etc. ( , ,
,
, ). Llamamos a esto HTML semántico ya que se refieren a los nombres de las cosas; describen lo que son. Otro grupo contiene los elementos utilizados para indicar cómo se ven las cosas: cómo se alinean, qué fuente se usa, si está en negrita o cursiva, etc. (, ,
, ),ypodríamos llamarlos HTML de presentación. Lo mismo es cierto para html attributes. class="green" o id="chapter" sería semántico, mientras que width="150px" o valign="top" sería de presentación. [ 16 ] HTML
Esta es la raíz del documento. Todo en el resto del documento estará dentro de esta etiqueta html. Lo que hay dentro de la etiqueta html consta de dos secciones, la cabeza y el cuerpo.
La sección principal contiene una o más tags. El de nuestro ejemplo anterior especifica que la codificación de la parte de texto del documento tiene que estar en UTF-8. Esta sección también es donde reside la tag. El texto dentro de este elemento es El texto que se mostrará en la parte superior de la ventana del explorador y se verá en gran medida por los motores de búsqueda. Por lo tanto, es importante incluir siempre una etiqueta de título y para que suscontenidos sean correctos y significativos. Además, la sección <head> se utiliza para incluir más información que el explorador tendrá que leer antes de que se cargue la parte del cuerpo del documento. Su ejemplo más típico serán las rutas a las hojas de estilo CSS that se utilizan parael documento. Tendremos muchos ejemplos en este libro.
<cuerba>
Dentro de la etiqueta body se encuentra el contenido principal de nuestro documento. Como consecuencia, si hay ciertos elementos de estilo que desea que se usen en todo el documento, estará able para hacerlo simplemente estilizando el <body>tag. Se lo recordaremos más adelante. Por supuesto, primero tenemos que aprender lo que podemos poner dentro del cuerpo.
Sintaxis de etiquetas o elementos dentro
del documento
La sintaxis de una etiqueta HTML es muy simple: <tag attribute1="value1" attribute2="value2">text</tag>, Esto va seguido de la siguiente etiqueta. Puede colocar todo en una sola línea o cada par de etiquetas en una línea independiente para mayor legibilidad a medida que se omiten las nuevas líneas y espacios entre pares de etiquetas. Dentro de la parte de texto, los espacios no se omiten, pero varios espacios de una fila se reducen a uno. Por lo tanto, si desea insertar más espacios, tendrá que usar un método diferente (consulte entidades HTML más adelante en este capítulo). [ 18 ]
Capítulo 2 Para los elementos que no tienen contenido, hay una notación abreviada. Podemos utilizar:
Usamos eso en lugar de:
En nuestro ejemplo, la notación abreviada se utiliza para:
El atributo class puede tener varios valores, en cuyo caso se escribiría como: text No está escrito así: text Esta última línea muestra un descuido común cuando se agrega un atributo de clase sin darse cuenta de que un atributo de clase ya estaba presente. En este caso, se omitirá el segundo. El explorador también omitirá todos los elementos delos atributosnd que no se reconocen como etiquetas HTML. A diferencia de los compiladores para lenguajes de programación de la vieja escuela, nunca verá un mensaje de error cuando escribe mal algo. Las cosas simplemente no se verán bien o incluso puede obtener una pantalla en blanco. Esta es la razón por la que es extremadamente productivo usar un editor HTML u otra herramienta que reconozca las etiquetas y atributos como HTML válidos, preferiblemente herramientas que los muestren en color.
Comentarios HTML
En cualquier lugar dentro del código HTML, puede insertar un comentario: un recordatorio para usted mismo, para la posteridad o (probablemente más importante) para otros miembros de su equipo que necesiten compartir su código. La sintaxis es muy simple. Cualquier cosa que esté dentro de un bloque HTML se puede comentar poniendo después de él: Se recomienda insertar más comentarios en lugar de menos. Aplicar comentarios también es útil cuando alguien te pide que elimines algo del sitio web y tienes la sensación de que podría volver. Porque si lo quitas: ¡ido se ha ido! [ 19 ]
Capítulo 2
El atributo name
El atributo name cuando se utiliza junto con la etiqueta se puede utilizar para asignar un nombre a un lugar determinado de la página. Ese nombre se puede usar en otra parte de la página en un vínculo. Por lo tanto, podría poner esto en algún lugar cerca de la parte superior de su página:
Un enlace en algún otro lugar de la página, usando el mismo nombre, pero precedido por un signo #, nos llevará de vuelta allí: Atrás al principio
El atributo target
Cuando un usuario hace clic en un enlace y llega a una nueva página, a veces quiere volver a donde vino. Algunos dispositivos y la mayoría de los navegadores cuentan con un botón atrás e incluso hacia adelante en el que un visitante puede hacer clic solo para descubrir que el navegador no siemprelos devuelve a la página queesperan. O el botón puede no tener ningún efecto en absoluto. En la segunda mitad del libro, dedicaremos un capítulo entero a este tema y a la noción de lo que realmente debería ser una página anterior. Por ahora, puede ayudar a su causa ya su visitante agregandoel atributo target a su elemento de anclaje. Le permite determinar si la página de destino (de ahí el nombre del atributo) se abrirá o no en una nueva ventana del navegador o no. Hay cuatro opciones:
- target="_blank" : Esta página se abre en una nueva ventana o pestaña
- target="_self": esta página se abre en la misma ventana en la que se hizo clic; este es el valor predeterminado, pero también a veces significa que ha creado un punto de no retorno
- target="_top" : Esta página se abre en el tamaño completo de la ventana del navegador
- target="_parent" : Esta página se abre en la ventana padre [ 21 ]
HTML
Elementos de documento clásicos
En esta sección se enumeran algunos elementos HTML que resultarán familiares para los usuarios de procesadores de texto o programas de autoedición.
, , , ... – títulos
Estos son títulos. Cuanto menor sea el número, mayor será el tamaño de fuente en el que el explorador representará el encabezado.
– párrafo
Esta es la etiqueta de párrafo. Los navegadores agregan automáticamente algo de espacio (margen) antes y después de cada
elemento. El margens se puede modificar con CSS (con las propiedades de margen).
– span
La etiqueta span por sí misma no tiene ningún efecto visual, pero es extremadamente útil cuando necesita aplicar estilo a solo una parte del texto. Puedes usarlo así: Ejemplo
Este es un párrafo con un blueword
Listas
En casi todos los documentos, encontrará la necesidad de resumir una serie de elementos en una lista. En HTML tienes que elegir entre una lista desordenada (piensa en viñetas) y una lista ordenada (piensa en numbers). Los elementos HTML de estas listas son
y . En este ejemplo se genera una lista de colores: Colores
red ververde blue
[ 22 ]
HTML Más tarde aprenderá que incluso tiene la oportunidad de especificar different tamaños de imagen para diferentes tamaños de pantalla cuando estamos discutiendo diseños responsivos. De cualquier manera, una vez que sepa cuál es el tamaño más grande de la imagen que va para ser utilizado es, crear una versión de su archivo de imagen de exactamente esas dimensiones para nosotrose en su sitio. Si el original era más grande, no obligará al visitante a descargar un archivo grande que no necesite. Si el original era más pequeño, cree un archivo de imagen de calidad en el tamaño más grande, por lo que se verá bien, en lugar de confiar en cómo el navegador extrapolará la imagen.
Formularios de entrada
Todos los habistes visto y usado y ahora los vas a crear: formularios de registro, formularios de pedido, en resumen: formularios. Lo que todas las formas tienen en común es que el usuario introducirá, o introducirá, alguna información. A continuación, se valida esa entrada: por ejemplo, para comprobar que una dirección de correo electrónico tiene realmente el formato correcto, y luego se procesa de una manera u otra. El formulario, por supuesto, se escribirá en HTML y CSS. La validación puede ocurrir en el lado client antes de que se procese, en JavaScript y en el lado del servidor mientras se procesa. El procesamiento se realiza, en la mayoría de los casos, en PHP y el resultado se almacena en algún tipo de base de datos, como MySQL o MongoDB, o una no base de datos, como un archivo plano, un archivo XML o una hoja de cálculo de Excel. Por ahora, centrémonos en la creación del formulario en sí.
Elementos de formulario
Los elementos que discutiremos aquí para ser utilizados en formularios son: , , , , y
Capítulo 2 email Register
Atributos de formulario
Observe los atributos de acción y método de la etiqueta de formulario. Indican el nombre del programa que se utilizará para procesar los datos y el método utilizado para hacerlo. Explicaremos esto con gran detalle en el Capítulo 5, PHP.
El atributo label
El elemento label es una etiqueta útil para etiquetar los elementos de entrada. El atributo for vincula una etiqueta de etiqueta a una etiqueta de entrada.
Atributos de entrada
El elemento input es el elemento más versátil que se puede utilizar en un formulario. Se utiliza para permitir que el usuario dé entrada, ya sea escribiendo algún texto o marcando una casilla de verificación o un botón de opción. Hay varios tipos, especificados por el atributo type: atributo descripción type="texto" Este es el valor predeterminado, por lo que no es necesario especificar esto atributo: esto es para texto. type="oculto" Este no se muestra, pero es extremadamente útil para pasar valores. type="radio" Esto crea un botón de opción: solo se puede seleccionar uno. type="checkbox" Esto crea una casilla de verificación: varias casillas de verificación pueden ser seleccionado. type="contraseña" Esto es como texto, pero no se muestran los caracteres introducidos. type="botón" Esto crea un botón. También puede crear botones mediante el tag. type="enviar" Esto crea un botón de envío. Esto significa que el formulario será enviar al servidor. También puede crear un botón de envío Utilizar el element y su tipo="Enviar" atributo. type="archivo" Esto crea un cuadro de diálogo de carga de archivos con un elegir archivo botón. Cuando se utiliza el atributo múltiple y el navegador lo soporta, puede seleccionar varios archivos. [ 25 ]
Capítulo 2
Listas desplegables
A menudo necesitamos que los visitantes elijan de una lista. Para este propósito, podemos usar el element en combinación con el
Orange
El atributo disabled
Tanto el como el
HTML
Elementos de tabla
Los siguientes elementos HTML se utilizan para crear tablas:
Esta es la etiqueta principal para crear una tabla. Cada tabla comienza con una tag y termina con una tag.
<>
Estos elementos (opcionales) permiten separar (y posteriormente aplicar estilo) a la parte del encabezado y a la parte del cuerpo de una tabla. Al igual que en losconjuntos de pliegos, el encabezado se usa para las descripciones de lo que va en las filas de la tabla y el cuerpo para el contenido real. Puede utilizar más de una sección para organizar mejor (y aplicar estilo) a la tabla.
¿No hay filas? Sin mesa. La fila o tabla es el elemento que va a utilizar para todas las filas de la tabla, tanto el encabezado como la sección del cuerpo.
Estos son los elementos de las celdas de la tabla. Las tags se utilizan para las etiquetas en el encabezado de la tabla y la (datos de la tabla) paralas celdas content en el cuerpo de la tabla.
Atributos de tabla
Algunos de los elementos table tienen atributos que son exclusivos de las tablas. Los discutiremos aquí.
colspan (td)
Una tabla que consta de x filas y columnas y, por supuesto, contendrá x veces y celdas. Con el atributo colspan, puede especificar que, para una celda determinada, desee abarcarla en varias columnas. La línea siguiente abarcará esta celda de la tabla en tres columnas: Verylongname [ 28 ]
HTML
Entidades HTML
Como sabemos, todas las etiquetas comienzan con un signo de < y terminan con un signo de >. Imagínese que desea utilizar uno of aquellos como parte de sucontenido. Esto sólo podría confundir el navegador. Es por eso que tenemos entidades HTML. Las entidades HTML son cadenas que comienzan con una y comercial y terminan con un punto y coma.
Esto representa la y comercial en sí: &
Una entidad HTML muy útil es el espacio de no separación:
Le permite insertar uno o más espacios en su contenido. Para utilizar el < o > iniciar sesión en su contenido, tenemos: < y >
También son muy útiles &eur; , para el símbolo del euro, © para el signo de copyright, y ® para el signo de marca registrada.
Los caracteres no ingleses también se pueden representar como entidades HTML, por ejemplo, é para é, è para è, y ê para ê. Le recomendamos que busque algunas de las referencias en línea si desea ver un list completo.
Etiquetas específicas de HTML
HTML5 introdujo una serie de nuevas etiquetas que pueden ayudarle a agregar estructura a su documento, ya que todas tienen los nombres de componentes comunes de un documento o sitio, como encabezado, pie de página o artículo. Si ha estado haciendo desarrollo web durante un tiempo, habrá utilizado estos nombres con toda probabilidad, pero como una clase para categorizar elementos. Así que si usaste , ahora puedes usar . O bien, para cambiar las cosas, si ya usa ,su plan de reserva para admitir exploradores no compatibles con HTML5 podría contener . [ 30 ]
Capítulo 2 Aquí hay una breve descripción de lo que son y cómo se pueden utilizar:
- :se usa para contener el título de una página o sección. Normalmente contiene un logotipo de la empresa y elementos de navegación.
- : Lospies de página normalmente contienen enlaces a otra información relacionada, información de contacto y declaraciones de derechos de autor. Asegúrese de mantener este último actualizado. La gente no confiará en la información en un sitio que tiene un date de hace dosaños.
- : este contenedorse puede usar para la parte principal de navegación del sitio.
- : Esta etiquetaes muy útil para colocar el componente de su lado que a menudo se coloca a la izquierda, junto a todo lo demás.
- y :Estos dos son útiles para organizar mejor el documento. Puede usarlos para entradas de blog o, como sugieren los nombres, artículos o secciones.
resumen
En este capítulo, aprendiste los conceptos básicos de HTML, el primero de varios lenguajes que usaremos para hacer desarrollo web. HTML utiliza etiquetas como y las etiquetas también pueden tener atributos, por ejemplo,
blue paragraph
. Todas estas etiquetas combinadas en una página, una página HTML, forman los bloques de creación de un sitio web. En lugar de dar una lista exhaustiva y una descripción de todos los elementos HTML disponibles de las etiquetas, le guiamos a través de los más comunes y útiles. Los elementos HTML se utilizan para agregar contenido a unsitio web, no para darle al sitio un cierto aspecto. Los colores, el fondo y el primer plano, los tipos de letras, los bordes alrededor de las imágenes y muchas más características visibles de un sitio se manejan a través de hojas de estilos y otro idioma. Ese lenguaje es CSS y ese es el topic de nuestro próximo capítulo.
[ 31 ] EBSCOhost - impreso el 30/09/2020 12:41 PM vía UCA - UNIVERSIDAD CENTROAMERICANA JOSE SIMEON CANAS. Todo uso sujeto a https://www.ebsco.com/terms-of-use EBSCOhost - impreso el 30/09/2020 12:41 PM vía UCA - UNIVERSIDAD CENTROAMERICANA JOSE SIMEON CANAS. Todo uso sujeto a https://www.ebsco.com/terms-of-
