Kompozer

Existen muchos editores que te pueden asistir al escribir código HTML para una página web. Sin embargo, usualmente la mayoría requiere que el usuario tenga que trabajar con el código mismo. En vez de eso, vamos a usar un editor llamado Kompozer que te permite editar páginas web de forma muy parecida a si estuvieras editando un documento en Microsoft Word. Este tipo de editor se conoce como "What You See Is What You Get" (lo que vez es lo que recibes) -- WYSIWG, pronunciado "wi-si-wig". Este tipo de editor probablemente no será muy útil para un creador profesional de sitios web, pero es muy bueno para comenzar porque te permite alternar sin problemas entre el código para la página y una vista de la página en la forma en que se vería en el navegador web al ser publicada. Una vez que aprendas a manejar estos elementos básicos, puedes entonces comenzar a usar otras herramientas de diseño más avanzadas.
Kompozer Window

Escribiendo texto y formateo

La forma de escribir texto en tu página se trabaja de manera muy similar a usar Microsoft Word o LibreOffice Write. Se escribe en la pantalla principal, y luego se usan los botones en el menú superior para formatear el texto.

Formatting Toolbars

Hay dos líneas de herramientas para el formateo, localizadas debajo de la barra de herramientas principal y sobre el documento. La primera línea tiene las siguientes opciones, de izquierda a derecha:
Text format (Formato de texto) - Te permite especificar que el texto es un encabezado, parte del cuerpo del texto, o otra parte de tu composición.
Empty Bar - Puedes ignorar esta barra vacía.
Emphasize (Enfatizar) - Añade énfasis al texto (básicamente igual que usar itálicas)
Strong Emphasize (Enfatizar fuerte) - Añade énfasis fuerte al texto (basicamente igual que usar negrilla)
Numbered List (Lista Numérica) - Crea una lista en la que puedes enumerar prociones de texto en secuencia
Bulleted List (Lista de Puntos) - Crea una lista sin ninguna secuencia en particular, por lo que usa puntos en vez de números
Increase Indent (Aumentar Indentado) - Mueve la sección de texto hacia la derecha.
Decrease Indent (Disminuir Indentado) - Mueve la sección de texto hacia la izquierda.

En la segunda línea están las siguientes opciones:
Font (Tipo de Letra) - Escoge el tipo de letera que quieres usar. Ten cuidado con esto, dado que las páginas web se deben poder ver por todo tipo de computadores y no todos los computadores tienen los mismos tipos de letra instalados (en otras palabras, es mejor escoger tipos de letra que sean comunes y conocidos)
Text/Background Color (Color de Texto/Trasfondo) - Escoge el color para el texto y/o trasfondo.
Highlighter (Marcador)  - Marca una proción de texto
Decrease Text Size - Disminuye el tamaño del texto
Increase Text Size - Aumenta el tamaño del texto
Bold - Añade negrilla al texto.
Italics - Añade itálicas al texto.
Underline - Subraya el texto
Left Justify - El texto se alínea a la izquierda
Center - El texto se alínea en el centro
Right Justify - El texto se alínea a la derecha
Align Justified - El texto se estrecha de forma que tanto el margen izquierdo como el derecho se alínean

Ahora escribe un poco de texto sobre tí mismo y sobre algún tema que te interesa. Usa las varias opciones para formatear tu texto.

Sample text

Links

Links are the key to any web page. To make a link, select the text that you want to be the link.  Then click the Link button from the main toolbar.  Now you can enter the address of the web page you want the link to go to. This can be a full URL (called "absolute") like http://google.com/MyPage.html or it can be a local URL (called relative) like MyFolder/MyPage.html.  Then click OK.  That's all there is to it!

Now go to your example page that you are creating, and add a link to the Wikipedia page for your topic.

Link

Images

Putting an image in a page with Kompozer is similar to a link.  Click the spot where you want the link to go, then click the image button from the main toolbar.  Here you enter the URL for the image. In addition, every time you put in an image, you should enter the alternate text for the image. This allows people to read what the image is about before it loads and allows people who can't see the web page to still understand what is on the page.

Again adding on to our example page, add an image about your topic of choice.

Adding an Image

So now our final page will look something like this:
Kompozer-PageFinal.png

Now that we have a complete page, we'll need to save it.  Just click the save button up at the top of the window. This will pop up a dialog asking you what you want the title of your page to be. The title is what will show up in the tab of your browser window, but not actually within the page.

Setting the Title

View Source/Split

One of the most important parts of any web page editor is the ability to look at the code for the page. Because HTML is very complicated and can do many different things, it isn't possible to make an editor like Kompozer that can do everything graphically. Sometimes an author will need to go into the code and make changes because it is the only way to do it. Other times, it is just faster to make changes in the code view. Either way, it is an important feature to have.

There are two different modes for viewing the code in Kompozer.  The first is the Split view. If you look at the bottom of the screen, you will see the split tab between the Design (the view we've been using so far) and Source tabs.  This view will show you just the portion of the code that is relevant to where you have your mouse cursor. Go put your cursor on the line with your link, and then select the Split view.

Kompozer-Split.png

You'll notice here that you can see the <a href="">...</a> tag for the link, as well as the <p>...</p> tags for this paragraph. This mode is great for editing a small piece of code in the page. 

The final viewing mode for Kompozer is the source mode. This is the most powerful mode, and lets you see all the source for the page at one time. Once you have a good feel for all the tags and code in HTML, it is very easy to use the source mode to make a lot of changes to the page, very quickly. 

Kompozer-Source.png

You can see in the source view that all the tags are right there, easy to pick out.

That's about all you need to know to make some basic pages using Kompozer.