Jueves, 20 Abril 2017 12:32

Consultorio web: La propiedad word-break

Propiedad word-break

Evitar quiebre de palabras con CSS3

Respondiendo a consulta "¿Cómo evitar el quiebre de palabras en HTML5 a través de CSS3?

Cabezal posicionamientos html css

Experimentando con static, relative, absolute, fixed

En esta entrada exploraremos, de manera no formal, el comportamiento de tres divs (etiquetas de bloque) al someterlos a cambios de posicionamientos usando estilos CSS.

Maquetación Web: Preparando la barra de navegación

HTML5, CSS3, .js: Maquetando la barra de navegación

En la entrada anterior hicimos un repaso general sobre algunas etiquetas html y propiedades css vistas en clases con las que generamos algunos diseños preliminares para nuestra página web, usando las etiquetas header, div y footer, entre otras; toca el turno ahora de crear un barra de navegación (menu) para nuestro sitio para lo cual partiremos de los siguientes supuestos y condiciones:

Lunes, 22 Agosto 2016 11:28

Introducción a la maquetación web (ii)

Primeros contenedores en html

Diseñando una página web: Primeros estilos y contenedores

En una entrada anterior vimos las etiquetas básicas necesarias en la creación de una página web vacía; continuaremos ahora con la creación de los primeros contenedores (html) y los primeros estilos (css) para dar estructura a los primeros contenidos y elementos de navegación y diseño de nuestra página web.

Visualmente, lograremos algo similar a lo que vemos en la siguiente imagen:

Lunes, 22 Agosto 2016 09:35

Introducción a la maquetación web (i)

Cabezal art. Introducción a la maquetación web

Conceptos básicos: Códigos de una página en blanco

Antes de comenzar con la codificación necesaria para la maquetación de una página web, debemos entender cual es la estructura básica de un documento html vacío. - Lectura recomendada: Introducción al HTML y CSS (i)

Así, todo documento comienza con una declaración que indicará de qué tipo de documento se trata; para un documento HTML5, esta declaración se reduce al código correspondiente a la línea 1 del siguiente código:

Envío de formularios con archivos adjuntos

Formulario de contacto con envío de adjuntos en DW CC2015

Veremos a continuación cómo generar un código básico de ejemplo para un formulario de contacto, usando Adobe Dreamweaver CC2015.2:

Miércoles, 27 Abril 2016 09:35

Introducción al HTML y CSS (i)

Cabezal artículo HTML y CSS: Notas preliminares

HTML y CSS: Notas preliminares

HTML

HTML es un pseudolenguaje que permite crear documentos web; sus siglas corresponden a HyperText Markup Language, que en español podría traducirse como lenguaje de marcado de hipertexto, múltiples páginas web, vinculadas entre sí, y en su conjunto pueden configurar un sitio web.

HTML ha tenido una evolución en el tiempo, llegando a la versión actual HTML5, cuya referencia oficial la tenemos en la siguiente dirección: https://www.w3.org/TR/html5/, página del W3C, organización internacional dedicada a la estandarización de las tecnologías asociadas a la Web.

Cabezal artículo Menú desplegable en HTML y CSS

Creando un menú desplegable con HTML5 y CSS3 (primera parte)

Esta entrada responde a una necesidad generalmente básica para el desarrollo de un sitio web: La creación de una barra de navegación (menú) usando HTML y CSS; en nuestro caso HTML5 y CSS3 serán las versiones usadas en este tutorial.

Así, nuestra página al comienzo de nuestro trabajo, tendrá la siguiente estructura:

  <!doctype html>
  <html><head>
    <meta charset="utf-8">
    <title>Creando un menu con HTML y CSS</title>
  </head>
  <body>
  </body>
  </html>

En nuestro caso, supondremos que deseamos una barra de navegación horizontal, para lo cual en los pasos siguientes estaremos abocados a generar los códigos necesarios para lograr este objetivo; así, comenzaremos a colocar, por razones semánticas, dentro de la etiqueta nav [W3C] [esp], una lista sin ordenar (ul), cuyos ítems (li) mostrarán las opciones principales de nuestra barra de menú, con lo que ahora nuestro código será el siguiente: