Tema 3 de Programacion

P. Salvador B.
TEMA 3 DE PROGRAMACION
PRINCIPIOS DE PROGRAMACION CON HTML Y CSS
1. EDITORES DE CODIGO
Gracias a los avances de la tecnología informática que está evolucionando
constantemente, los usuarios pueden crear un sitio web simple sin necesariamente
tener conocimientos particulares de programación; sin embargo, si lo suyo es el
desarrollo de páginas web profesionales, entonces debe contar con editores de
código, la herramienta más importante que le brinda las funciones necesarias que
requieren los sistemas operativos como Windows, macOs o Linux.
Para el desarrollo de sitios web profesionales, los programadores deben tener un

conocimiento profundo de HTML, CSS y JavaScript, a diferencia de los programas
de creación de sitios web, las páginas programadas profesionalmente revelan un
alto nivel de originalidad y código fuente limpio y fácil de leer.
Es por esta razón que una de las herramientas indispensables para el desarrollador
de páginas, son sin lugar a dudas, los editores de código; ya que a través de ellos
podemos obtener las las funciones que se emplean en la programación de HTML
para diferentes sistemas operativos como Windows, macOs o Linux.
Los editores de código son las herramientas que todo desarrollador debe tener a
mano. Permiten editar código fuente en diversos lenguajes de programación y
ofrecen múltiples herramientas para facilitar el trabajo y aumentar la
productividad.
2. TIPOS DE EDITORES DE CODIGOS

a) Visual Studio Code. También conocido por VSCode, es el editor de
código de Microsoft, multiplataforma y de código abierto.
b) Atom. Este editor está realizado en Javascript y es muy ligero. Dispone de
una cantidad muy grande de extensiones para pesonalizar su
funcionamiento. Creado inicialmente por Github, ha sido precursor de
algunos otros editores como VSCode.
c) Notepad++. Notepad++ es un programa para editar código fuente
de cualquier lenguaje de programación. Como tiene soporte para
P. Salvador B.
una gran cantidad de lenguajes, interesará no sólo a los

desarrolladores de webs, sino en general a toda la comunidad de
programadores.
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.
Todo un regalo para los programadores, ya que además es gratuito.
Es un proyecto creado a partir de otro editor para programadores
llamado Scintilla. Por decirlo de alguna manera, Notepad++ es una
distribución de Scintilla, pero con algunas contribuciones adicionales.
Se distribuye sólo para sistemas Windows y está programado en C++,
utilizando directamente el API de win32, lo que hace que sea rápido y
con un archivo de descarga pequeño. Se puede descargar y conocer
más sobre el programa en: https://notepad-plus-plus.org
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
P. Salvador B.
 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.
d) Brackets. Es de código abierto y ha sido creado originalmente por Adobe.
Su mejor baza es que dispone de herramientas interesantes para poder editar el

código y ver las modificaciones en línea, en tiempo real a medida que se cambia el
código. También integra de casa un servidor web para probar las aplicaciones.
e) Komodo Editor. Komodo Edit es un editor de código fuente bastante

avanzada y extensible. No se limita sólo a proveernos de las diversas
herramientas habituales de los editores populares para programadores, sino
que va más allá, proporcionando algunas de las utilidades típicas de los
entornos de desarrollo profesionales o IDEs. Además, incorpora un sistema
de complementos o add-ons similar al que conocemos por el navegador
Firefox, que hace que todavía podamos disfrutar de diversas otras utilidades
que seguro agradeceremos.
La verdad es que si queremos editar código fuente en lenguajes de

programación orientados para la web, Komodo Edit es una de las opciones más
interesantes. Primero porque es multiplataforma, lo que da soporte tanto a
usuarios de Windows como los de otras plataformas como puede ser Mac o
Linux. Otra de las principales ventajas de Komodo IDE es que se ofrece con la
P. Salvador B.
misma licencia que el navegador de la fundación Mozilla, Firefox, por lo que

sobra decir que es un producto de código libre y por tanto, gratuito para
cualquier uso.
3. PARA QUE SIRVE HTML
El HTML es el principal lenguaje de marcado utilizado por programadores y

diseñadores web de cualquier nivel de experiencia, siendo la abreviatura de
(HyperText Markup Language o Lenguaje de Marcado de Hipertexto). Muchas
personas al leer la definición técnica piensan en todo el conjunto de elementos
que conlleva el diseño de una página web cuando éste solo funciona para
indicar el orden del contenido dentro de una página web a través de "tags" de
hipertexto.
3.1 ¿Cómo FUNCIONA?
Utilizar HTML es bastante más sencillo de lo que muchas personas

consideran. Comienza abriendo un documento HTML a través de cualquier
programa de edición de textos, y al momento de guardar el archivo como
una página web es necesario usar la extensión ".html"; así mismo es
probable que el programa te realice una advertencia de que se convertirá en
un "texto sin formato". Es importante que tomes en cuenta que no existe una
diferencia entre ".html" y ".htm".
El siguiente paso es observar tu creación en un navegador de internet. Al guardar el

documento en blanco, lo abres con un navegador –haciendo doble click en el
archivo- y debe ingresar como una página en blanco, a medida que edites el
documento puedes ver el progreso en la página. No es necesario tener internet para
esto ya que nadie puede ingresar al archivo, es solamente para leer el documento
HTML.
4. LAS ETIQUETAS MAS UTILIZADAS EN HTML
< html (Importante: Sin ella no conseguimos empezar nada… es la etiqueta que
inicia el código fuente).
- < head (Etiqueta importante que contiene estilos de la página, títulos,
descripciones, etc… es de vital importancia para el funcionamiento de la
web).
P. Salvador B.

- < meta (Son utilizadas frecuentemente en la cabecera)
 - < body (Donde irá todo nuestro contenido)
 - < p (Para distinguir los párrafos de los textos)
 - < a href= (Para crear enlaces)
 - < h1 (Etiqueta utilizada para el título principal de cada url)
 - < h2 (Para los subtítulos)
 - Entre otras…
Ejemplo: Abre el blog de notas y coloca el siguiente código, luego guárdalo
con el nombre que quieras y escribe .html al final (Ejemplo: hola.html)
EJEMPLO DE UN CODIGO.
 < html>
 < head>
 < title>TITULO< /title>
 < /head>
 < body>
 Hola!
 < /body>
 < /html>
OTRO CODIGO.
 < html>
 < head>
 < title>HOLA MUNDO!< /title>
 < /head>
 < body bgcolor="#000000">
 < div align="center" style="font-size:36px; color:#FFF"><
strong>Hola!< /strong>< /div>
 < /body>
 < /html>
P. Salvador B.

Tema 3 de Programacion

Cargado por

Copyright:

Formatos disponibles

Tema 3 de Programacion

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 3 de Programacion

Cargado por

Copyright:

Formatos disponibles

P. Salvador B.

Para el desarrollo de sitios web profesionales, los programadores deben tener un

2. TIPOS DE EDITORES DE CODIGOS

una gran cantidad de lenguajes, interesará no sólo a los

 Multi-Vista, lo que significa que puedes tener más de una vista de

Su mejor baza es que dispone de herramientas interesantes para poder editar el

e) Komodo Editor. Komodo Edit es un editor de código fuente bastante

La verdad es que si queremos editar código fuente en lenguajes de

misma licencia que el navegador de la fundación Mozilla, Firefox, por lo que

3. PARA QUE SIRVE HTML

El HTML es el principal lenguaje de marcado utilizado por programadores y

3.1 ¿Cómo FUNCIONA?

Utilizar HTML es bastante más sencillo de lo que muchas personas

El siguiente paso es observar tu creación en un navegador de internet. Al guardar el

4. LAS ETIQUETAS MAS UTILIZADAS EN HTML

También podría gustarte