miércoles, 8 de febrero de 2017

HTML: nuestra primera página web

Para hacer nuestra primera página web, tan sólo necesitaremos el bloc de notas.

Para ello, abrimos el bloc de notas y escribimos lo siguiente:
<html>
<head>
<title>Este es el titulo de la web</title>
</head>
<body>
<h1>Este texto es un encabezado h1.</h1>
<h2>Este texto es un encabezado h2.</h2>
<p>Esto es un párrafo. <strong>Este texto está en negrita</strong></p>
<h2>Esto es otro encabezado h2</h2>
<p>Esto es otro párrafo. <em>Este texto está en cursiva</em></p>
</body>
</html>
Ahora, lo único que debemos hacer es clickar en: Archivo - Guardar como...
Y acto seguido, ponemos:
  • Nombre: cualquier nombre terminado en .html o .htm (en nuestro caso, pagina1.html)
  • Tipo: Todos los archivos (*.*)
  • Codifiación: UTF-8
Y guardamos.


 Se nos generará un archivo que puede abrirse con nuestro navegador favorito, viendo algo parecido a lo siguiente:



sábado, 4 de febrero de 2017

HTML: conceptos básicos

HTML se usa sólo para definir la estructura y el contenido o información de una página web.
Para la presentación visual usamos CSS (Cascading Style Sheets), algo que veremos en futuras entradas.
HTML está formado por etiquetas, que se escriben entre corchetes angulares:
<etiqueta>
 Actualmente, HTML5, cuenta con más de 100 etiquetas.

El componente básico de una página web es el elemento. Las páginas web están formadas por un conjunto de elementos escritos en un orden concreto.

Los elementos se componen de una etiqueta inicial o de apertura y una etiqueta final o de cierre, la cual se define con una / y el nombre de la etiqueta inicial.

La etiqueta inicial puede tener atributos, pero la etiqueta final no.
Los atributos pueden llevar un valor. 
Las etiquetas pueden tener contenido, que es todo lo que se escribe entre la etiqueta inicial o final.
Dicho contenido puede llevar otras etiquetas HTML.

Los elementos pueden anidarse (ponerse unos dentro de otros), pero respetando ciertas reglas.

A continuación se presentan las etiquetas esenciales de HTML:
  • <html> es la etiqueta principal y sólo puede existir una. Toda la página web debe ir entre la etiqueta inicial y final de <html>.
  • <head> define la primera parte de una página web (la cabecera). Normalmente la cabecera no aparece representada en la página web, sino que se emplea para definir los metadatos, información sobre la página o instrucciones sobre cómo procesar la página web.
  • <title> etiqueta que va dentro de la etiqueta <head>. Es obligatoria, sólo puede haber una, y se emplea para definir el título de una página.
  • <body> define la segunda parte de una página web (el cuerpo). Esto sí aparece representado en una página web cuando se visualiza en un navegador web.
  • <h1>, ..., <h6> definen los encabezados o títulos. Existen 6 niveles de importancia, siendo <h1> el más importante y <h6> el menos importante. Normalmente solo se usan los niveles del 1 al 3.
  • <p> define párrafos de texto
  • <strong> se usa para destacar un texto. El navegador lo muestra como texto en negrita.
  • <em> se usa para definir un texto enfatizado. El navegador lo muestra como texto en cursiva

miércoles, 1 de febrero de 2017

El lenguaje HTML y las etiquetas más usadas

HTML (Hyper Text Markup Language) es un lenguaje de marcado o etiquetado empleado para crear páginas web.

HTML tiene un vocabulario y una gramática:

  • Vocabulario: son las etiquetas que se pueden emplear.
  • Gramática: son las reglas que establecen cómo se deben emplear las etiquetas para escribir un documento.
El lenguaje HTML tiene muchas etiquetas, aunque tan sólo con un 20% de ellas podemos escribir el 80% del código. Por tanto, deberemos conocer muy bien ese 20% para no tener grandes problemas.
Las etiquetas más importantes de HTML son las siguientes:
  • html
  • head
  • meta
  • title
  • link
  • style
  • script
  • body
  • p
  • a
  • strong
  • em
  • img
  • form
  • input
  • select
  • textarea
  • table
  • tr
  • th
  • td
  • blockquote
  • hr
  • ul
  • ol
  • li
  • div
  • span

Prototipado Web

Antes de ponernos manos a la obra con la creación de una página o aplicación web, lo más importante es definir exactamente qué es lo que queremos crear.

Para ello deben realizarse prototipos de lo que será la página web. Dichos prototipos pueden realizarse con papel y lápiz, aunque también disponemos de varias aplicaciones para su realización.

Tenemos aplicaciones tanto gratuitas como de pago. Normalmente, las de pago suelen ser más completas y tienen una versión de prueba con ciertas limitaciones, para que así podamos probarlas antes de decidir si comprarlas o no.

A continuación os dejamos algunas aplicaciones que podemos usar para realizar nuestro prototipo: