República Bolivariana De Venezuela

Ministerio Del Poder Popular Para La Defensa

Universidad Nacional Experimental Politécnica De La Fuerza Armada

Análisis y Diseño De Sistemas 4to Semestre

Programación HTLM

Docente: Bachiller:

Adalides Rodriguez Bryan Rodriguez

C.I: 27.923.793

San Félix Abril de 2020

Definición HTML

Es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de

la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de

Hipertexto, se entiende como un sistema que permite ordenar y etiquetar diversos documentos

dentro de una lista. Este lenguaje es el que se utiliza para especificar los nombres de las etiquetas

que se utilizarán al ordenar, no existen reglas para dicha organización, por eso se dice que es un

sistema de formato abierto. EL HTML se encarga de desarrollar una descripción sobre los

contenidos que aparecen como textos y sobre su estructura, complementando dicho texto con

diversos objetos (como fotografías, animaciones, entre otros).

Características HTML

 Puede ser creado y editado con cualquier editor básico de textos.

 Puede ser creado y editado con cualquier editor básico de textos.

 Es multiplataforma, o sea, puede ser visualizado por cualquier navegador de cualquier

sistema operativo.

 No diferencia entre mayúsculas y minúsculas.

 Utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final,

mediante las cuales se determina la forma en la que debe aparecer en su navegador el

texto así como también las imágenes y demás elementos en la pantalla del ordenador.

 Cada elemento de un documento HTML consta de una etiqueta de comienzo, un bloque

de texto y una etiqueta de fin.

 Lenguaje estático.
  Es utilizado para la creación de páginas web.

 Los documentos HTML son documentos de hipertexto que aparecen enlazando a otros

documentos.

 El Web tenía que ser distribuido: La información repartida en páginas no muy grandes

enlazadas entre sí.

 El Web tenía que ser hipertexto y debía ser fácil navegar por él.

 Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de

trabajo...) y con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-

OS,...).

 Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y

rápido.

Herramientas básicas de diseño en HTML.

1. Editores de HTML

  Sublime Text: este editor de código no es gratuito, la licencia tiene un coste de 70

dólares, aunque se puede descargar una versión gratuita para probarlo. Es una

solución muy popular entre los desarrolladores, con una experiencia de usuario

bastante cuidada. De hecho, muchos desarrolladores usan Sublime y lo califican como

el mejor editor de código.  Algunas de sus características fundamentales son:

 Disponible para Windows, Mac OS X y Linux.

 Soporta un gran número de lenguajes de programación: HTML, C, C++,

Groovy, Java, JavaScript, Lisp, Perl, PHP, Python, Ruby, SQL...

 Atajos rápidos para la búsqueda.

  Modo libre de distracciones para la escritura de código.

 Función de autocompletar.

 Editor muy personalizable.

 Soporta macros.

 Mejora de sus funcionalidades con plugins.

 Atom: es un editor gratuito, de código abierto y muy personalizable lanzado por

GitHub, la plataforma de desarrollo de proyectos colaborativa. Es una herramienta que

está generando una gran sensación dentro de la comunidad de desarrolladores. Lo

bueno de este editor es que muchos programadores están aportando mejoras al editor a

través de GitHub.  Características interesantes de Atom:

 Está disponible para Windows, Mac OS X y Linux.

 Totalmente personalizable: sus creadores presumen de que el desarrollador

puede modificar el editor a su gusto, incluso el core.

 Integración de [Link]: esto permite que cualquier usuario pueda usar los

cientos de paquetes y librerías de [Link].

 Sistema de navegación de archivos.

 Buscar y reemplazar en los archivos de trabajo.

 Paneles, cursores y selectores múltiples.

 Interfaz de usuario sencilla y limpia.

 Diseño de módulos personalizados: el editor permite el diseño de módulos a

medida para incorporar nuevas funcionalidades.

 Notepad++: es, posiblemente, uno de los editores de código más conocidos del

mercado. Es una herramienta bajo licencia GNU (Licencia Pública General). Se

 podría definir como un blog de notas con esteroides. Dispone de características muy

interesantes para desarrolladores y programadores: 

 Dispone de coloreado de código para facilitar la programación, no sólo para

HTML, también para el resto de lenguajes para los que Notepad++ tiene

soporte: Python, Ruby, PHP o JavaScript. 

 Autocompletado de código. No es necesario teclear todas la etiquetas HTML.

Los comandos de teclado se pueden configurar.

 Posibilidad de trabajar en varios documentos distintos a la vez.

 Multivista: El usuario puede tener varias vistas de un mismo código.

 Expresiones regulares para la automatización de acciones.

 Detección automática del estado del documento. Buena característica si un

equipo de desarrolladores trabaja colectivamente.

 Grabación y reproducción de macros.

 Posibilidad de hacer zoom.

 Soporte para varios idiomas.

 Editra: es un editor de texto multiplataforma. Sus desarrolladores destacan su interfaz

sencilla de usar y que cuenta con asistencia para la programación en código. Editra es

totalmente gratis, está bajo una licencia LGPL y soporta más de 60 lenguajes de

programación distintos: Python, PHP, Perl, Java, Lisp, SQL, Visual Basic o Pascal

son algunos de los más importantes. Características:

 Permite trabajar con pestañas y en varios documentos a la vez.

 Incorpora un buscador.

 Dispone de un editor y resaltador de comandos.

  Función de autocompletado.

 Ayuda de palabras clave.

 Tiene la posibilidad de aumentar sus funcionalidades con la incorporación de

plugins.

 TextWrangler: editor de texto desarrollado por Bare Bones Software. Tiene una

interfaz sencilla, inteligente y con algunas funcionalidades que permiten programar

código con un gran rendimiento. Algunas de sus características:

 Soporte para varios lenguajes de programación como HTML, C, C++, Fortran,

Java, Object Pascal, Objective-C, Perl, Python, Ruby…

 Coloreado de sintaxis para facilitar la programación en código.

 Funcionalidad de buscar y reemplazar en múltiples filas.

 Configuración de idioma por documento de trabajo.

 Posibilidad de funcionar como un editor externo integrado con Xcode, el

Entorno de Desarrollo Integrado de Apple.

 Soporte integrado para el acceso FTP a través de Interarchy.

 Teclas configurables por el desarrollador.

 Lista de ventanas flotantes.

2. Frameworks para HTML5

 Bootstrap: es el framework de Twitter para el diseño responsivo o adaptativo y

desarrollo de páginas web en HTML, CSS y JavaScript. Bootstrap es

un framework muy utilizado en la actualidad por los desarrolladores de front-end. El

aumento del consumo de contenidos en dispositivos móviles es uno de los acicates

fundamentales en la expansión de este framework. Tiene algunas características que lo

hacen una herramienta sencilla:

 Es un framework que tiene detrás a Twitter. Eso quiere decir que es difícil que

se quede obsoleta por falta de mantenimiento.

 Aunque tiene un soporte limitado para HTML5 y CSS3, sus diseños son

compatibles con la mayoría de navegadores del mercado.

 Es un marco de código abierto y está compartido en GitHub. Eso lo convierte

en un framework especial porque son muchos los desarrolladores que lo

utilizan y lo mejoran continuamente.

 Facilita mucho el trabajo con JavaScript: cualquier funcionalidad del site que

requiera JavaScript no exigirá al desarrollador ponerse a programar, existen

componentes que permiten implementar recursos especiales sin necesidad de

hacerlo. Y eso es una ventaja.

 Todos esos componentes están basados en la librería jQuery. Cada uno de

esos plugins permite introducir nuevas funcionalidades a la interfaz de usuario:

desde un efecto de carrusel en la cabecera del site hasta las creación de grupos

de botones o alertas. Y la enorme popularidad de Bootstrap favorece que cada

vez haya más plugins de terceros para automatizar gran parte de estas

funcionalidades.

 Bootstrap utiliza LESS (lenguaje de hojas de estilo dinámico).

  Facilita mucha documentación: si alguien tiene un proyecto y tiene alguna

duda o necesita resolver alguna situación complicada, siempre dispondrá de

documentación y tutoriales para resolverla. 

 HTML5 Boilerplate: es el otro gran framework de HTML5 del mercado. Estas son

algunas de sus características fundamentales:

 Da soporte a navegadores antiguos. HTML5 Boilerplate dispone de una

biblioteca de detección de características llamada Modernizr. Esto permite

determinar si el navegador del usuario soporta HTML5 y CSS3. En caso de

que no sea así, se carga una función adicional que permite a ese navegador

antiguo cargar todos los elementos del site.

 Mejora de los tiempos de carga. Con el consumo de información en

dispositivos móviles, el tiempo de carga de las páginas se convierte en una

condición imprescindible para competir. En HTML5 Boilerplate, todos los

elementos scripts se colocan al final de la página, lo que evita que su lentitud

al cargar ralentice la aparición de los elementos clave del site. Esto afecta a

casi todos esos elementos, incluso el habitual código de seguimiento de

Google Analytics.

 Optimización por el lado del servidor: el archivo .htaccess propuesto por

HTML5 Boilerplate permite introducir una caché más eficiente y enviar

nuestras páginas web comprimidas en GZIP, igual que imágenes y elementos

en JavaScript, lo que optimiza el rendimiento del site con tiempos de carga

más reducidos.
 

 Junior: es un framework para hacer aplicaciones móviles nativas en HTML5. Este

marco utiliza transiciones CSS3 para optimizar el rendimiento de los sites en

dispositivos móviles, permite diseñar carruseles con [Link] y el diseño de la

interfaz de usuario es realmente sencillo gracias al listado de componentes

predefinidos que incluye el propio framework.

3. Soluciones para audio y vídeo

 Audio5js: es una biblioteca JavaScript que es muy fácil de implementar. Lo único que

es necesario es descargar el código fuente y extraer y colocar los archivos .js y .swf en

algún lugar del proyecto que estemos trabajando. Lo que permite Audio5js es

determinar qué códec de audio es compatible con el navegador que esté utilizando el

usuario en ese momento e iniciar el archivo con el motor de reproducción adecuado

(HTML5 o Flash).

 html5media: es un reproductor de vídeo y audio en HTML5. Lo mejor es que para

incorporarlo a nuestro site sólo tenemos que incluir el archivo script en algún lugar del

<head> de nuestro proyecto. No es necesario instalar nada más. Es compatible para

todos los navegadores y móviles. 

4. Editores visuales de animaciones

En este campo tenemos dos grandes grupos de herramientas: las primeras suelen ser

programas utilizados fundamentalmente por diseñadores y la segundas son algo más complejas

porque permiten el desarrollo de animaciones con programación pura. En el primer grupo,

tenemos soluciones como Edge Animate CC, del paquete Adobe; Google Web Designer;
o Sencha Animator. En el segundo grupo, tenemos opciones que exigen saber programar: The

Greensock Animation Platform, CreateJS, PaperJS.

Codificación básica en HTML.

Etiquetas HTML

El lenguaje HTML está conformado por un sistema de etiquetas en serie o tags, que incluyen

instrucciones que los navegadores traducen como:

 Imágenes

 Texto

 Hipervínculos

 Listas de palabras

 Tablas, etc.

Así, para que un elemento de este tipo pueda ser leído, la etiqueta debe tener dos partes: una

etiqueta de inicio (<etiqueta>) y una de cierre (</etiqueta>) entre guiones (< >).

Estructura básica HTML

La primera línea de un documento HTML siempre debe contener la etiqueta <!DOCTYPE

html>. Esto hará que el código del sitio sea legible en cualquier navegador. Ahora bien, un

documento HTML bien armado tiene cuatro etiquetas esenciales para que el contenido se

distribuya correctamente. Estas son:

 HTML: <html> está al inicio de un documento HTML e indica a los navegadores que la

página tiene código HTML para que pueda leerlo de esa forma. Siguiendo la sintaxis del

lenguaje, la etiqueta de cierre </html> será el último elemento del documento.

 Encabezado: <head> es la etiqueta que se utiliza para el encabezado de la página. Su

principal función es contener toda la información del funcionamiento del sitio. Debido a

esto, es un código encriptado que las personas que entran a la página no pueden ver.

 Título de la página: <title> es la etiqueta que da a tu sitio un nombre para que los usuarios

puedan identificarlo. Es el título que puedes ver en las pestañas del navegador.

 Cuerpo: <body> es la etiqueta que contiene todos los elementos individuales del sitio. O

dicho de otra forma, comprende todo el contenido visible del sitio. Aquí podrás insertar

texto, imágenes, videos o cualquier otra funcionalidad que desees mostrar.

 Títulos y subtítulos: <h1> <h2>… <h6> son etiquetas que funcionan para agregar títulos

y subtítulos en el cuerpo del texto, lo cual ayuda a jerarquizar la información. Por cierto,

te recomendamos utilizar la etiqueta H1 sólo una vez dentro del contenido.

 Párrafos: Las etiquetas <p> y <br> te ayudarán a organizar el texto en párrafos y saltos de

línea.

 Imágenes: <img> con esta etiqueta podrás agregar imágenes al cuerpo de tu página.

Combinarlo con el atributo src te permitirá especificar la ubicación donde se encuentra la

imagen, y el atributo alt te ayudará a darle un título a esa imagen para que lo lean

buscadores como Google. La estructura de los atributos es la siguiente: primero viene

la palabra o abreviatura que lo define (en este caso src es abreviatura de “source” o

fuente), luego el signo igual (=) y al último el modificador del atributo entre comillas

dobles (“_”) o simples (‘_’).

 Hipervínculos: <a> te permite insertar un hipervínculo a la página. Por ejemplo, el link

hacia tus redes sociales o hacia otro sitio web con el que desees conectar tu página.
  Listas e índices: <ol> sirve para agregar listas numeradas y <ul> para agregar bullets, los

cuales mejoran la legibilidad de tus textos.

 Estilo: Aunque usualmente se ubica dentro de la etiqueta <head>, con el

atributo <style> puedes definir el estilo de tu contenido en términos de: color, tamaño de

fuente, tipografía, entre otros.

Ejemplos sencillos de páginas web con códigos en HTML.

1) <html>

<head>

<title>

Mi Página de prueba

</title>

</head>

<body>

<p>

Bienvenido a mi primera <i>página web</i>.

<p>

Espero se sientan a gusto y disfruten su visita.

</body>

</html>
2) <html>

<head>

<title>

INSTRAW en la red

</title>

</head>

<body bgcolor=navy text=white>

<h1 align=center>

<font color=yellow> Instituto Internacional de Investigaciones y Capacitación para la Promoción

de la Mujer<br>

- INSTRAW -

</font>

</h1>

<hr>

<p align=center>

Bienvenidos a nuestras oficinas virtuales, donde esperamos brindarles un mejor servicio y una vía

directa alternativa de comunicación e información de apoyo para la <i>potenciación de la

mujer</i>.

<hr>
<h4>

Cómo contactarnos

</h4>

<p align=right>

<font color=lime size=-1>

César Nicolás Penson 102-A<br>

Santo Domingo, República Dominicana<br>

(809)685-211 - fax (809)685-2117<br>

correo-e: [Link]@[Link]

</font>

</body>

</html>