Una introducción a HTML y CSS para diseñadores.

Como diseñador gráfico, probablemente esté consciente de la relación en constante evolución entre diseño y tecnología. Esto es especialmente cierto para quienes se dedican al diseño web. En esta industria, necesitamos tener una comprensión básica de cómo nuestros diseños cuidadosamente elaborados se convierten en páginas web vivas. Cuando entendemos los conceptos básicos de este proceso (y sus limitaciones), podemos comunicarnos con precisión con los desarrolladores y crear sitios web con perfecto píxel.

Esto no significa que necesites saber cómo codificar un sitio web de arriba a abajo (¡aunque eso sería genial!), solo significa que debes comprender los conceptos básicos. En esta publicación, comenzaremos con una introducción muy básica a HTML. Aprenderá cómo cortar diseños web en Photoshop y formatear HTML usando CSS. Introducción a HTML y CSS para diseñadores

¿Qué es HTML?

¿Qué es HTML?

 

Casi todo lo que ves cuando navegas por la web es un documento en lenguaje de marcado de hipertexto (HTML). Hipertexto es texto que hace referencia y hace referencia a otro texto en su pantalla, lo que le permite acceder al contenido con un simple clic. lenguaje de marcado es un conjunto de etiquetas entre corchetes <>. Estas etiquetas HTML suelen venir en pares:

  • <etiqueta de inicio> : También conocida como etiqueta de apertura.
  •  : también llamada etiqueta de cierre e incluye una barra diagonal /

Cuando se incluye contenido entre estas dos etiquetas, todo se llama elemento :

  • Este es un párrafo

Cuando este idioma se traduce a Internet, los espectadores no verán las etiquetas; solo verán el contenido entre ellas.

HTML 5, la versión actual de HTML, contiene alrededor de 100 etiquetas con atributos que cambian su función o apariencia. Sólo necesita conocer entre 30 y 40 de estas etiquetas para comenzar a comprender y crear HTML. Échales un vistazo y observe cómo están agrupados por función. Veamos esto en acción.

Cortar imágenes en Photoshop.

Introducción a HTML y CSS para diseñadores

Antes de codificar, debemos decidir qué secciones del sitio web deben incluir imágenes y cuáles pueden codificarse. aprovechemos herramienta Photoshop Rebanada (oculto en el submenú herramienta de recorte ) y resaltar áreas como una fotografía de un burrito y joan taco .

Cortar imágenes en Photoshop. Introducción a HTML y CSS para diseñadores

Ahora necesitamos exportar nuestros fragmentos: elija Archivo > Guardar para Web (Alt + Shift + Ctrl + S). Cuando se selecciona un fragmento específico, puede configurar sus opciones de exportación en el lado derecho de la ventana (JPG, PNG, etc.). Si hace doble clic en un fragmento específico, verá una ventana emergente " Parámetros de fragmento" - Esto le permite nombrar archivos de fragmentos específicos.

dlice_export

De forma predeterminada, todas las imágenes se colocan en: /images/ subdirectorio. Si desea exportar solo los fragmentos que cree, seleccione " Todos los fragmentos personalizados" en la ventana "Guardar". Introducción a HTML y CSS para diseñadores

export_slices Introducción a HTML y CSS para diseñadores

Crear un documento HTML básico

Tenemos nuestras segmentaciones, creemos un documento HTML básico. Introducción a HTML y CSS para diseñadores

code_html_simple1 Introducción a HTML y CSS

Línea 1 : Declara que el dialecto HTML 5 es el idioma del documento.

Línea 2 : elemento representa la raíz de un documento HTML. Este es un contenedor obligatorio que indica los límites de nuestro documento.

3 : capítulo contiene elementos de página invisibles como metainformación, título, etc.

Línea 4 : Esta es la declaración de codificación del documento: UTF-8 - elección segura - puede leer más sobre codificaciones de caracteres HTML aquí .

Línea 5 : Página de Ejemplo Este es el título de la página que aparece en la barra de título del navegador.

6 : cierra la etiqueta desde la línea 3.

Línea 7 : Este elemento del cuerpo contendrá todo el contenido visible de la página.

Línea 8 : cierra la etiqueta desde la línea 2. Este elemento marca el final del documento. Introducción a HTML y CSS para diseñadores

Hay otras formas posibles de codificar el mismo diseño. Usaremos etiquetas semánticas HTML 5 (encabezado, navegación, artículo, pie de página) para crear la estructura básica del documento:

IKOS2A Introducción a HTML y CSS

Este es el diseño traducido a HTML:

Algunas notas:

Líneas 11 y 12 : Los elementos son la esencia de Internet ya que se utilizan para crear hipervínculos . Están vinculados al atributo HREF y deben vincular el objetivo. Enlance .

Líneas 18-20 : Estas son algunas etiquetas de formato de texto: denota un encabezado de primer nivel; denota un párrafo; significa salto de línea.

Formateo con hojas de estilo en cascada (CSS).

Introducción a HTML y CSS para diseñadores

justHTMLbrowser Una introducción a HTML y CSS para diseñadores

Cuando abre solo el archivo HTML en un navegador web, verá que no tiene el formato de nuestro diseño anterior. Esto se debe a que el código HTML no es suficiente; debemos formatearlo con Hojas de estilo en cascada (CSS) . CSS es un lenguaje de hojas de estilo que se utiliza para formatear elementos HTML.

Pero, ¿por qué exactamente necesitamos combinar HTML con CCS? Hace algún tiempo, el formato se lograba agregando atributos a las etiquetas HTML. Sin embargo, esto resultó en un código ilegible e imposible de mantener. La solución fue separar el contenido del documento (HTML) del formato del documento (CSS).

Analicemos lo simple regla CSS :.

CSS_estructura2

Selector : Este es el elemento HTML al que desea aplicar estilo. Por ejemplo: <artículo>

Anuncio : una regla CSS puede tener una o más declaraciones. Cada declaración consta de una propiedad y un valor y está separada por un punto y coma. Las declaraciones se colocan entre llaves {}. Introducción a HTML y CSS para diseñadores

propiedad : esta característica de estilo, que desea cambiar. Por ejemplo: color de fondo, tamaño fuente etc.

Valor : Cada propiedad tiene un valor asociado. Por ejemplo: #ffcc11 (para color de fondo), 16px (para tamaño de fuente), etc.

Hay muchas propiedades CSS, que se puede configurar para cada elemento HTML, pero no es necesario escribirlos todos usted mismo. Puede confiar en la configuración predeterminada de su navegador o utilizar una hoja de estilo básica que restablezca su navegador a una configuración razonable. De hecho, a escribir selectores hacerlo usted mismo requiere mucho conocimiento y experiencia.

Veamos algunas reglas CSS necesarias para formatear nuestro diseño simple.

placaimagen_css

Propiedades de posicionamiento CSS : existe 4 métodos diferentes (estáticos, fijos, relativos y absolutos) que nos permiten posicionar determinados elementos en nuestro diseño. Después de configurar uno de estos métodos, puede colocar elementos usando las propiedades superior, derecha, inferior e izquierda; funcionarán de manera diferente dependiendo de cuál de los 4 métodos utilice. En este caso nos gustaría posicionar imagen_placa, utilizando absoluto posicionamiento.

Modelo de caja CSS : Este modelo es un marco que encierra todos los elementos HTML, incluidos márgenes, bordes, relleno y contenido. El margen es el área invisible alrededor del borde y el relleno entre el borde y el contenido.

Si REALMENTE quieres aprender más sobre codificación, echar un vistazo a este genial sitio: Codecademy .

¿Conoces HTML y CSS? ¡Comparte tus consejos en los comentarios!