¿Que se necesita para comenzar a programar?
- Editor de texto para escribir el código fuente: puede ser Notepad ++ , o Bloc de notas (aplicación que trae incorporada windows). Existen otros editores como Kompozer, podés utilizar otro con el que te sientas cómodo.
Notepad++
Es un programa para editar código fuente de cualquier lenguaje de programación.Es de estos editores que ofrecen ayudas muy útiles para "tirar líneas de código", como resaltado de colores, posibilidad de editar varios documentos a la vez, menús contextuales, auto-completar código, etc. además es gratuito.
Entre las características que ofrece Notepad++ podemos destacar:
Esto simplifica bastante la tarea de las personas que quieren empezar a crear sus páginas web, porque no tienen que aprender HTML. Simplemente tenemos que aprender a manejar Kompozer, con sus menús, formularios, etc. Pero no hay que engañarse, porque utilizar un programa de este estilo, como mínimo, requerirá unos conocimientos básicos para aprender a manejar archivos de diversos tipos, conexiones FTP, y otras características propias de la publicación en Internet. A la hora de maquetar contenidos en una web, lo que se hace con Komposer, también viene bien saber las distintas propiedades que podemos aplicar a los elementos de la página para cambiar su apariencia, colocación o comportamiento.
Kompozer ayuda bastante a la hora de diseñar la web, pero además tiene diversas herramientas para facilitar también la publicación de una página en un servidor. Dispone de un gestor de sitios (site manager), en el que podemos configurar un acceso por FTP al servidor web donde está alojada la página. A través de ese gestor podemos abrir archivos que estén en el servidor para editarlos directamente con Kompozer y luego guardarlos en el servidor con el botón "Publish". También podemos crear nuevos archivos en Kompozer y subirlos a un servidor que tengamos configurado en el gestor de sitios. El mismo gestor de sitios lo podemos utilizar también para acceder a directorios y ficheros que tengamos en local en nuestro ordenador, configurando un sitio sin indicar los datos de FTP, sino indicando el directorio de nuestro disco duro donde están los archivos de la web.
Comenzando con HTML5
Son elementos dentro del
código de hipertexto que funcionan como
una especie de marca, que le otorga a la
sección encerrada dentro de la etiqueta una
característica específica, como color de
fuente, tamaño, tipo de elemento y hasta la
sección que ocupa dentro del archivo HTML, o
en este caso HTML5.
Las etiquetas se inician de la siguiente manera: ‹› y se cierran con: ‹/›
Etiquetas semánticas: etiquetas que indican qué es el contenido que contienen, en lugar de como se debe formatear al mostrar el documento HTML en un cliente web.
Son las que sirven para definir el esquema principal del documento, como HEADER, ARTICLE, FOOTER, etc. Todas esas etiquetas semánticas nos indican qué es el contenido que engloban y cuál es su relación con el conjunto de elementos del documento HTML.
La directiva <HTML> aparece una vez al principio de la página web y de nuevo con una barra añadida ( </HTML>) al final y le indica al navegador que todo lo que se encuentra entre ellas es código html y se debe interpretar como tal.
Con la directiva <HEAD> y </HEAD>se delimita la cabecera del documento que suele contener información sobre el mismo como título, idioma, palabras clave, autor, etc. La información que se especifique en la cabecera no es mostrada por el navegador al usuario con la única excepción de la etiqueta <TITLE> y </TITLE> esta sirve para especificar el título del documento y es visualizada en la barra de título de la ventana correspondiente al programa navegador.
La directiva <BODY> delimita el cuerpo de un documento html y engloba todo el contenido que se ve en una página web: titulares, texto, imágenes, listas, tablas, formularios.
<NAV> </NAV>: Representa a todos los enlaces de navegación que llevan a las distintas secciones de nuestra web. Es una de las partes más importante, pues debe ser fundamental para que el usuario sea capaz de navegar por las categorías y páginas.
<SECTION> </SECTION>: Es la etiqueta que viene a sustituir por defecto al <DIV>
<ARTICLE> </ARTICE>: La etiqueta article está diseñada para contener una unidad propia de información y contenido, que a su vez puede tener su cabecera (header), cuerpo (section) y pie de artículo (footer). Un section puede contener varios artículos independientes.
<ASIDE> </ASIDE>: Viene a sustituir al sidebar o barra lateral, aunque su uso es para llenarlo de contenido que no esté relacionado directamente con esa página, por ejemplo un listado de enlaces, anuncios, iconos sociales, etc.
<FOOTER> </FOOTER>
: Representa el pie de página, presente en casi todas las webs. Nos sirve para ubicar los datos de contacto, algo de información extra, iconos sociales, actualizaciones de twitter, etc. Permite inclusive un segundo menú de navegación.
Etiquetas y atributos
Las etiquetas pueden presentar modificadores que llamaremos atributos, los que nos permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma, separados por un signo de igual. El orden en que se incluyan los atributos es indiferente y no afecta al resultado. Si se incluye varias veces el mismo atributo con distintos valores, el resultado obtenido será imprevisible dependiendo de cómo lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra, deberá expresarse entre comillas, en otro caso no será necesario.
Entre las características que ofrece Notepad++ podemos destacar:
- Coloreado de código para más de 40 lenguajes de programación diferentes, entre los que se incluyen todos los que un desarrollador del web podría tocar, como HTML, Javascript, ASP, SQL, PHP, CSS, Pitón, Ruby, etc.
- Impresión a color de los códigos
- Permite definir el resaltado de sintaxis para nuevos lenguajes de programación que necesite el usuario.
- Autocompletado de código, también configurable por el usuario o extensible por medio de descargas bajo demanda del programador.
- Multi-Documento
- Multi-Vista, lo que significa que puedes tener más de una vista de un mismo código, con por ejemplo dos versiones del mismo documento.
- Permite realizar acciones de Buscar / Reemplazar utilizando incluso expresiones regulares para definir los patrones a reemplazar.
- Deteción automática del estado del documento, que puede ayudarnos en caso que queramos guardar un archivo que había sido modificado por otro usuario o programa.
- Otras utilidades como Zoom, soporte para varios idiomas, puntos de marca, resaltado de paréntesis u sangría, creación de macros, etc.
Kompozer
Estamos ante un programa sencillo para realizar páginas web en vista diseño, lo que técnicamente se llama WYSIWYG (what you see is what you get, lo que ves es lo que obtienes). Esto quiere decir que puedes crear sitios web directamente escribiendo texto sobre Kompozer, como si fuera un editor de texto normal y sin tener que escribir el código fuente HTML necesario para construir la página. Cuando quieres insertar otros contenidos, como imágenes o enlaces, tienes que utilizar botones de la barra de herramientas, que te muestran formularios para especificar las propiedades de los elementos, como el archivo de la imagen, el texto alternativo, o en el caso de un enlace, la dirección donde se dirige, etc.Esto simplifica bastante la tarea de las personas que quieren empezar a crear sus páginas web, porque no tienen que aprender HTML. Simplemente tenemos que aprender a manejar Kompozer, con sus menús, formularios, etc. Pero no hay que engañarse, porque utilizar un programa de este estilo, como mínimo, requerirá unos conocimientos básicos para aprender a manejar archivos de diversos tipos, conexiones FTP, y otras características propias de la publicación en Internet. A la hora de maquetar contenidos en una web, lo que se hace con Komposer, también viene bien saber las distintas propiedades que podemos aplicar a los elementos de la página para cambiar su apariencia, colocación o comportamiento.
Kompozer ayuda bastante a la hora de diseñar la web, pero además tiene diversas herramientas para facilitar también la publicación de una página en un servidor. Dispone de un gestor de sitios (site manager), en el que podemos configurar un acceso por FTP al servidor web donde está alojada la página. A través de ese gestor podemos abrir archivos que estén en el servidor para editarlos directamente con Kompozer y luego guardarlos en el servidor con el botón "Publish". También podemos crear nuevos archivos en Kompozer y subirlos a un servidor que tengamos configurado en el gestor de sitios. El mismo gestor de sitios lo podemos utilizar también para acceder a directorios y ficheros que tengamos en local en nuestro ordenador, configurando un sitio sin indicar los datos de FTP, sino indicando el directorio de nuestro disco duro donde están los archivos de la web.
- Galería de imágenes: esta te ayudara para salir al paso en caso de que no tengas conexión a internet, arma una con formatos .jpg, .png, .gif (dichos formatos son los que soporta HTML).
- Un editor de imágenes: si necesitás retocar alguna imagen podés utilizar cualquier aplicación que uses en Multimedia 1 o Diseño Web (Photoshop, Fireworks, etc. o alguna con la que te identifiques o te sea fácil de usar).
- Un servidor (Host): podés conseguir uno gratuito subscribiéndote a él, o podés adquirir uno pago. La idea es que tengas tu propio espacio para subir tus trabajos y presentarlos en caso de que lo necesites.
Comenzando con HTML5
¿Qué son las etiquetas?
Son elementos dentro del
código de hipertexto que funcionan como
una especie de marca, que le otorga a la
sección encerrada dentro de la etiqueta una
característica específica, como color de
fuente, tamaño, tipo de elemento y hasta la
sección que ocupa dentro del archivo HTML, o
en este caso HTML5.Las etiquetas se inician de la siguiente manera: ‹› y se cierran con: ‹/›
Etiquetas semánticas: etiquetas que indican qué es el contenido que contienen, en lugar de como se debe formatear al mostrar el documento HTML en un cliente web.
Son las que sirven para definir el esquema principal del documento, como HEADER, ARTICLE, FOOTER, etc. Todas esas etiquetas semánticas nos indican qué es el contenido que engloban y cuál es su relación con el conjunto de elementos del documento HTML.
¡A programar!
La primera línea de código es la declaración <!DOCTYPE HTML> de un documento HTML. Esta etiqueta indica qué versión de HTML se utiliza en el documento, para que los navegadores puedan aplicar la gramática y sintaxis correspondiente al él. La versión de HTML5 simplifica mucho esta directiva. Las versiones anteriores HTML usaban declaraciones más complicadas para varios formatos HTML.La directiva <HTML> aparece una vez al principio de la página web y de nuevo con una barra añadida ( </HTML>) al final y le indica al navegador que todo lo que se encuentra entre ellas es código html y se debe interpretar como tal.
Con la directiva <HEAD> y </HEAD>se delimita la cabecera del documento que suele contener información sobre el mismo como título, idioma, palabras clave, autor, etc. La información que se especifique en la cabecera no es mostrada por el navegador al usuario con la única excepción de la etiqueta <TITLE> y </TITLE> esta sirve para especificar el título del documento y es visualizada en la barra de título de la ventana correspondiente al programa navegador.
La directiva <BODY> delimita el cuerpo de un documento html y engloba todo el contenido que se ve en una página web: titulares, texto, imágenes, listas, tablas, formularios.
<NAV> </NAV>: Representa a todos los enlaces de navegación que llevan a las distintas secciones de nuestra web. Es una de las partes más importante, pues debe ser fundamental para que el usuario sea capaz de navegar por las categorías y páginas.
<SECTION> </SECTION>: Es la etiqueta que viene a sustituir por defecto al <DIV>
, y lo que indica es que estamos
en una sección distinta, como si de un
capítulo de un libro se tratase.
<ARTICLE> </ARTICE>: La etiqueta article está diseñada para contener una unidad propia de información y contenido, que a su vez puede tener su cabecera (header), cuerpo (section) y pie de artículo (footer). Un section puede contener varios artículos independientes.
<ASIDE> </ASIDE>: Viene a sustituir al sidebar o barra lateral, aunque su uso es para llenarlo de contenido que no esté relacionado directamente con esa página, por ejemplo un listado de enlaces, anuncios, iconos sociales, etc.
<FOOTER> </FOOTER>
: Representa el pie de página, presente en casi todas las webs. Nos sirve para ubicar los datos de contacto, algo de información extra, iconos sociales, actualizaciones de twitter, etc. Permite inclusive un segundo menú de navegación.
Etiquetas y atributos
Las etiquetas pueden presentar modificadores que llamaremos atributos, los que nos permitirán definir diferentes posibilidades de la instrucción HTML. Estos atributos se definirán en la etiqueta de inicio y consistirán normalmente en el nombre del atributo y el valor que toma, separados por un signo de igual. El orden en que se incluyan los atributos es indiferente y no afecta al resultado. Si se incluye varias veces el mismo atributo con distintos valores, el resultado obtenido será imprevisible dependiendo de cómo lo interprete el navegador. Cuando el valor que toma el atributo tiene más de una palabra, deberá expresarse entre comillas, en otro caso no será necesario.
Los atributos se incluyen siempre dentro de
la etiqueta de inicio y llevan inmediatamente
detrás el signo igual (“=”) con los valores de
dichos atributos entre comillas (“”).
Etiquetas lógicas y físicas
Los estilos físicos formatean cada porción
de texto atendiendo tan sólo a cómo
debe aparecer finalmente en pantalla, sin
preocuparse en absoluto en qué peso o papel
desempeña cada parte del documento en el
esquema total del mismo.
<B>: muestra el texto en un tipo de letra más
grueso.
<I>: muestra el texto inclinado (en cursiva).
<U>: subraya el texto.
<TT>: utiliza un tipo de letra no proporcional.
<BIG>: muestra el texto con un tipo de letra
más grande.
<SMALL>: utiliza un tipo de letra menor
<S>: utiliza un tipo de letra tachado.
<SUB>:escribe como subíndice.
<SUP>: escribe como superíndice.
Los estilos lógicos se caracterizan porque
en ellos hacemos un estudio lógico de
cada parte del documento, observando
la importancia que tiene en el global del
mismo distinguiendo entre cabeceras, citas,
subíndices, comienzos de capítulo, etc., por lo
que formatearemos cada parte del documento
de acuerdo a su importancia en el conjunto
global.
<STRONG>: muestra el texto en un tipo de letra
más fuerte, normalmente en negrita.
<EM>: muestra el texto enfatizado,
normalmente en cursiva.
<CODE>: suele utilizarse para mostrar algún
tipo de código, suele usar un tipo de fuente no
proporcional.
<BLOCKQUOTE>: bloque de texto indentado.
Etiquetas Anidadas
Las etiquetas
HTML5 suelen ir en parejas y también vimos
que es posible incluir unas etiquetas dentro de
otras. Esto es lo que precisamente se llama
anidamiento. Por ejemplo:
<B>negrita</ B>
<B><I>cursiva y negrita</I></B>
El < META CHARSET = "UFT-8"> es el tipo de carácter que usamos en toda la pagina.
Saltos de Línea
El salto de línea está definido con la etiqueta <BR> . Es utilizado cuando queremos terminar
una línea sin necesidad de terminar con el
párrafo. La etiqueta <BR> obliga a saltar de
línea donde quiera que la ubiquemos.
Parrafos
<P>: esta etiqueta sirve para separar párrafos.
Cabeceras
En un documento HTML es posible definir
seis tipos distintos de cabeceras que serán
normalmente el título del documento y los
distintos sub-apartados que lo forman.
Las etiquetas que definen las cabeceras serán <H1> indica el tirulo mayor <H2> corresponde al tirulo menor <H3> sirve para colocar un subtitulo<H4> corresponde a un subtitulo 2<H5> este realiza un subtitulo 3.
Las Imágenes y HTML
Un documento HTML puede incorporar
imágenes o gráficos, no sólo como fondo
del documento (con el atributo BGCOLOR de
la etiqueta <BODY>) sino dentro del propio
cuerpo del documento. Existen distintos tipos
de imágenes:
- Jpg: (con extensión JPG) son imágenes en color real (paleta de colores RGB de 24 bits) comprimidas mediante un algoritmo matemático. Se emplean cuando la imagen precisa una gran cantidad de colores (fotografías principalmente), prevaleciendo la calidad de la imagen y su colorido sobre el tamaño del archivo.
- Gif: En el formato GIF, las imágenes sólo se representan mediante una paleta de 256 colores, por lo que no permiten la presentación de imágenes muy complejas. Son las más empleadas por su pequeño tamaño. Puede escogerse uno de los 256 colores para hacerlo transparente, con lo que el navegador no representa dicho color en el documento, viéndose su fondo.
- Gif animado: Consiste en una serie de imágenes en formato GIF (y por tanto en 256 colores) que se alternan en la pantalla del ordenador, obteniéndose una película. El GIF animado puede repetirse un número determinado de veces o indefinidamente, de forma que la película se repita ininterrumpida mente, volviendo al principio cuando se ve la última imagen.
- PNG: (Portable Network Graphics) es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de color.
¿Cómo insertar imágenes?
<IMG>![]()
: Para insertar una imagen en un
documento HTML se emplea la etiqueta
![]()
, que carece de etiqueta de cierre. Por el
contrario presenta varios atributos, uno de los
cuales, el atributo SRC, es imprescindible para
su funcionamiento.
SRC: El atributo SRC es indispensable dentro
de la etiqueta ![]()
, ya que especifica la
URL (absoluta o relativa) de la imagen que se
desea insertar en el documento HTML.
Así, para insertar una imagen llamada foto.jpg
que se encuentre en el directorio imágenes,
respecto a la ubicación del documento,
escribiremos:
<IMG SRC=”imagenes/foto.jpg”>
Si por el contrario la imagen se halla en el
directorio imágenes del sitio www.dominio.ar,
deberemos indicar:
<IMG SRC=”http://www.dominio.ar/
imagenes/foto.jpg”>
