Editores de páginas web.

pasos-a-seguir-para-crear-pagina-web
 
Antes de nada vamos a definir claramente que es un editor de páginas web.
Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML.

¿Cómo nos facilita esto? 

Una de las formas es usando fragmentos de código, que nos va a ahorrar muchísimo tiempo a la hora de escribir nuestras marcas.
Cuando vamos a crear nuestras páginas webs, lo más habitual es encontrarnos código repetido «mil veces». Para ahorrarnos escribirlos a mano, aparecen los fragmentos de código o snippets, que no son más que un «trozo» de código, el cual reusaremos a lo largo de nuestro marcado.

Con estas herramientas nos ahorraremos tiempo y varios quebraderos de cabeza. 
 
Vamos a clasificarlos en dos grupos. Los específicos para Windows y los que se usan en Linux o son multiplataforma.
 
Editores Windows
 
CoffeeCup HTML Editor:
 
Las principales características del CoffeeCup HTML Editor son sus asistentes (inserción de imágenes, enlaces, menús HTML, etc.) tratando a los elementos HTML como objetos con sus propiedades, resaltado de sintaxis (HTML, CSSPHP…) , editor visual (WYSIWYG), y poco más. Ha quedado un tanto desfasado, aunque sigue siendo muy válido como editor HTML.
 
Su precio es de 69 dolares.
 
 
 
Adobe Dreamweaver:
 
Es muy similar a CoffeeCup aunque con mayores prestaciones, aunque también es mucho más caro.
 
En la última versión dispone de un mejorado soporte de CSS, que junto a su autocompletado de atributos CSS (ideal para los que empiezan) lo convierte quizás en uno de los editores más cómodos para trabajar con CSS.
 
Al igual que CoffeeCup, sus asistentes harán gran parte del trabajo para los más novatos, aunque de poca utilidad para los más avanzados. Incluye lo que han llamado Spry, una librería de widgets y efectos mediante Javascript.
 
Su precio es de 24,59€ al MES.
 
 
 
Linux / Multiplataforma                                            
Amaya:
 
Está desarrollado por la W3C (World Wide Web Consortium), la asociación que se encarga de construir los estándares web.
 
Es un navegador y un editor web, cuya peculiaridad es que permite editar directamente cualquier página web que se visualice, y que permite editar SVG y MathML, para codificar e integrar junto con HTML. Es bastante rudimentario  y carece de asistentes.
 
Su software es libre.
 
URL: Amaya
 
 
Aptana:
 
Este editor está basado en Eclipse, e incluso puede usarse como plugin en éste. Su asistente de código (HTML, CSS y Javascript) es único, mostrando documentación en línea de todos y cada uno de los elementos, como en qué navegadores está soportada una función de Javascript o un atributo CSS.
 
Además muestra información en línea sobre las funciones Javascript propias. Viene con depurador de Javascript. Es el editor web más completo del mercado y además es libre (gratuito y con código fuente abierto).
 
Software libre.
 
URL: Aptana
 
 
Zend Studio:
 
Más que un editor web, es todo un entorno de desarrollo para PHP. Tiene auto completado de código HTML (no para Javascript y CSS) además de para PHP, y no es posible editar en modo WYSIWYG, aunque el resaltado de sintaxis les podría valer a los desarrolladores más expertos.
 
Su punto fuerte está en su editor y depurador PHP. Su soporte para gestionar bases de datos (MySQL, MS SQL Server, Oracle, PostgreSQL, …), lo convierte en uno de los mejores entornos de desarrollo web para PHP existente.
 
Su precio es de 89 dolares, aunque dispone de una versión de prueba.
 
BlueGriffon:

 

Este editor WYSIWYG utiliza por debajo el motor de renderizado de Firefox para visualizar las páginas a medida que las vamos editando. 
 
Cuenta con ayudas a la escritura de código y ofrece incluso la posibilidad de probar en tiempo real transformaciones 3D de CSS3 sin abandonar el editor. 
 
Es gratuito, código abierto y multiplataforma (Windows, Mac y Linux) y está disponible en Español entre otros muchos idiomas.
 

Comienzo de lenguaje de marcas con HTML

 

introduccion html
Vamos a hacer una breve introducción primero a que es el HTML.
 
Bien, pues HTML es un lenguaje de marcas. Y os preguntareis, ¿qué es un lenguaje de marcas?
Pues el lenguaje de marcas es una forma de codificar un documento que incorpora etiquetas o marcas que contienen información adicional acerca de la estructura. El más extendido es el HTML.
Dentro de los lenguajes de marcas tenemos varias clases.
  • Marcado de presentación: Nos va a indicar el formato del texto.
  • Marcado por procedimiento: Está enfocado hacia la presentación del texto.
  • Marcado descriptivo: Utiliza etiquetas para describir elementos del texto pero sin decirnos como es representado.


¿En cual de estas clases encontramos el HTML?
Pues lo vamos a situar en el marcado de presentación, ya que este lenguaje nos va a servir para definir el contenido y formato de una página web, como textos, imágenes, hiperenlaces, etc…
 
¿Qué significa HTML?
Del ingles HyperText Markup Language  que en español se refiere a lenguaje de marcas de hipertexto.
 
¿Qué necesito para empezar con HTML?
Fácil. Ganas, Bloc de notas, navegador y ¡a currar!



¡EMPECEMOS!
 
Lo primero que debemos hacer es investigar para que sirve cada instrucción, yo os adjunto una página web en la cual podéis mirar varias cositas. AQUI
 
Primero vamos a escribir lo siguiente en el bloc de notas:
<html>
 
 
 
</html>
 
Aquí dentro irá todo el código que queremos escribir. Con esto le decimos al navegador que vamos a escribir en HTML y él nos entenderá.
 
Lo siguiente es definir el cuerpo que lo vamos a hacer con la siguiente instrucción: <body>
¿Como se nos queda? Tal que así:
 
<html>
          <body>
 
 
 
         </body>
</html>
 
¿Bien?
Pues continuemos…
Para crear párrafos vamos a usar el comando <p> y para mostrar texto en negrita <b>
Vamos a ver como queda nuestro primer ejemplo.
 
<html>
       <body>
              <p><b>soy un parrafo y estoy en negrita</b></p>
       </body>
</html>
 
Despues de esto clicamos en Guardar como y ponemos la extensión .html:
ejemplo1.html
 
Y veremos que se nos guarda como si abrieses una página del navegador. Doble click y ya está el primer resultado.
¡Muy bien!
Ya sabemos algo básico. Vamos a avanzar.
 
Ahora vamos a tratar algo en el encabezado de la página web.
Para decirle al navegador que queremos tratar con el encabezado usaremos el comando <head>
y queremos ponerle titulo a nuestra página, pues usamos <title>
¿Cómo nos quedaria?
 
 

<html>
  <head>
    <title>Lenguaje de marcas</title>
  </head>
       <body>
              <p><b>soy un parrafo y estoy en negrita</b></p>
       </body>
</html>


¡Estupendo!
Vamos a pasar a cambiar la forma del texto a itálica, pues nuestro comando seria <i>.
Aunque… tambien quiero linkear mi blog atraves de un hiperenlace, pues… 
<a href=”URL DEL BLOG”>NOMBRE</a>
Por supuesto todo esto va dentro del cuerpo.
Vamos a verlo en la práctica:

<html>
  <head>
    <title>Lenguaje de marcas</title>
  </head>
       <body>

              <p><b>soy un parrafo y estoy en negrita</b></p>
              <p><i>esto es italica</i></p>
              <P>
              <a href=”http://rinconmain.blogspot.com.es/”>BLOG</a>               </p>

       </body>
</html>


Vamos a guardarlo de la misma forma que antes y a ver que tal queda.


 
¿Vamos a por un poco más? ¡Venga!
No todos los textos tienen que ser negros y del mismo tamaño.
Para eso vamos a ver ahora como modificar las fuentes con el comando <font>
Aunque este es un tanto especial… vamos a seguir aumentando el comando.
Quieres cambiar el tamaño. pues usamos <font size=»nº»>
Este número va a variar del 1 al 7, tu decides que tamaño quieres.
También podemos modificar el color… <font color=»COLOR»>
Elige el color que tu quieras pero eso si, escribelo en ingles.
Vamos a ver unos ejemplos:

 <p><font size=»5″> esto es grande </font></p>

 <p><font size=»1″> esto es pequeño </font></p>

 <p><font color=»red»> esto es rojo </font></p>


¿Fácil?
Tambien podemos modificar el tamaño y el color en una misma sentencia:

<font size=»8″ color=»blue»> esto es azul y muuuy grande </font>


Ahora todo esto vamos a implementarlo en nuestro código, a ver que tal queda.



<html>
  <head>
    <title>Lenguaje de marcas</title>
  </head>
       <body>

              <p><b>soy un parrafo y estoy en negrita</b></p>

              <p><i>esto es italica</i></p>

              <P>
              <a href=”http://rinconmain.blogspot.com.es/”>BLOG</a>               </p>
              <p><font size=»5″> esto es grande </font></p>

              <p><font size=»1″> esto es pequeño </font></p>

              <p><font color=»red»> esto es rojo </font></p>

<p>
<font size=»8″ color=»blue»> esto es azul y muuuy grande </font>
</p>

       </body>
</html>

Ahora vamos a guardarlo y a ver que tal nos queda.


 
 
¡Estupendo!
 
Pues esto es todo, espero que os haya sido de gran utilidad.
Un saludo.
Fuente: Propia