INCUBE2.

COM

Colegio de Informática y Tecnología de Puerto Rico
P.O Box 55
Caguas, Puerto Rico 00726
Teléfono. (787) 967-1050
Email. servicios@incube2.com
www.incube2.com

Programa Académico 

Módulo 1
Introducción al lenguaje de programaci ón HTML
ID #WEB501
Departamento de Ciencias y Tecnología

Instructor:

Juan Carlos Rodríguez
Microsoft Certified Trainer
MCP, MCSA, MCSE, MCTS, MCDST, MCITP, MCT
Facebook: http://www.facebook.com/incube2education
Twitter: http://www.twitter.com/incube2
Youtube: http://www.youtube.com/incube2education

Derechos de autor:
Totalmente prohíbido la repoducción parcial o total de esta guía de
estudio, sin autorización escrita de sus creadores.

2 web design & develepment project proposal . existen algunas variantes mejoradas con más capacidad de estructura como lo son PHP y ASP. atributos y compartimientos que mejoran el funcionamiento del HTML. PHP.firefox.microsoft. En este módulo nos enfocaremos en crear páginas de Internet en HTML. ¿Qué significa HTML? El HTML (Hyper Text Markup Language) es el lenguaje en el cuál se escriben las páginas de Internet. (787) 967-1050 | email. Notepad++ o algún editor de HTML.htm y *. Esta versión incluye nuevos elementos.com Módulo 1 Actualmente existen diferentes lenguajes de programación. *.com  Firefox http://www. tales como Adobe Dreamweaver o Microsoft Expression Web.Incube2.htm.apple. Usted puede crear una página de Internet en HTML a través de programas de texto como Notepad. ¿Qué tipo de extensión utiliza el html en los archivos? El HTML utiliza las extensiones *. Algunos de los navegadores más famosos en Internet son:  Internet Explorer http://www.html y otros tipos de archivos. Un navegador es un programa que interpreta los archivos *. Usted puede programar una página de Internet con el lenguaje de programación de HTML. ASP y otros. servicios@incube2. La versión más reciente al momento de desarrollar esta guía de estudio es el HTML5. Actualmente. Esto permite que se integren nuevas tecnologías en las páginas desarrolladas en el HTML y así puedan crear aplicaciones más diversas y de gran alcance.com Actualmente.opera.html para que se puedan ver interpretadas en los navegadores. existen diferentes versiones del código HTML.com  Safari http://www.com  Opera http://www.com Tel.

adobe.com Tel.com. Diseño de Páginas de Internet y Tiendas Virtuales 3 . (787) 967-1050 | email.6. La ventaja de esta aplicación es que usted puede crear una página de Internet sin necesidad de saber ninguna programación de HTML. Descargar la aplicación de Notepad++ Para descargar la aplicación lo único que debe hacer es entrar a: https://notepad-plus-plus. En este curso utilizaremos bloc de notas Notepad++ como herramienta para programar nuestros portales. Esta aplicación es una aplicación comercial.html Descargar el editor Adobe Dreamweaver El editor Adobe Dreamweaver es una de las aplicaciones más poderosas para crear una página de Internet. coloca las imágenes que desee y la misma aplicación crea el código HTML.  Incube2. donde usted escribe el texto que quiere en el portal. Es una herramienta ideal que todo programador debe tener. pero usted podrá descargar una versión de prueba de 30 días desde el portal: http://www. servicios@incube2.com Hablemos un poco más sobre el bloc de notas Notepad++ y los editores web. ya que funciona como un editor de documentos. como también en PHP y otros lenguajes. Esta herramienta la podemos utilizar para preparar nuestros códigos de programación HTML.org/download/v6.8.

(787) 967-1050 | email.com. servicios@incube2.adobe.com Conocimiento un poco más a Adobe Dreamweaver Esta aplicación está disponible para Windows y para Apple. Curso de Diseño de Páginas de Internet y Tiendas virtuales 4 .com Tel. Lo mejor de esta aplicación es que usted puede programar páginas totalmente básicas como páginas complejas. Luego que terminemos los puntos introductorios de programación. empezaremos a trabajar con el sistema de CMS Wordpress. Recuerde que para descargar la aplicación de Adobe Dreamweaver. debe entrar a: http://www. que será aplicación que utilizaremos para desarrollar nuestros portales.` Incube2. Nota importante: Durante este curso utilizaremos la aplicación de Notepad++ y Dreamweaver para crear portales básicos con el propósito de que usted entienda como funciona el lenguaje de programación.

la cual contiene estos elementos: Encabezado. le invito a entrar a este portal: http://html-color-codes. (787) 967-1050 | email. El color de fondo especificado en este código es: #FFCC90.Incube2. cuerpo y cierre. Mi primer código: <html> <head> <title>MI PRIMERA PAGINA</title> </head> <body bgcolor="#FFCC99"> <font color="#CC3300" size="5">Hola.info/codigos-de-colores-hexadecimales/  <font color=”#CC3300” size=”5”> este código indica el color de la letra y el tamaño del texto que usted escriba. Se utiliza para decirle al navegador que hasta ahí es el contenido visual de la página. un orden.  </html> Este es el cierre del código HTML de la página. es bastante lógica la estructura del HTML. Ahí podríamos especificar el título del portal utlizando <title></title> y otras funciones que las explicaremos más adelante. Luego que termine de escribir lo que se encontrará en el encabezado. El primer paso es que usted debe entender como funciona el código HTML. ya es hora de empezar con un poco de programación.  </body> Este es el cierre el cuerpo de la página.com Tel. estoy haciendo pruebas. debe cerrarlo utilizando </head>. Todo lenguaje de programación tiene una lógica. o Para saber los códigos de colores. Se parece a como si escriberamos una carta. Las cosas deben escribirse con un orden lógico para que el navegador de Internet interprete lo que usted quiere presentar.com Mi primera página en HTML Bueno.  <head> es el encabezado de la página. servicios@incube2. 5 Curso de Diseño de Páginas de Internet y Tiendas Virtuales .  <body bgcolor=”#FFCC99”> indica que la página tendrá un color de fondo.</font> </body> </html> Explicación del código:  Siempre utilizaremos la entrada <html> al principio para decirle al sistema que vamos a programar en HTML. Si usted puede notar.

nos enfocaremos en los puntos básicos.html. <meta name="author" content="Incube2"> <meta name="description" content="Curso de HTML "> <meta name="keywords" content="código HTML etiqueta"> </head> . debe guardar el documento de Notepad++ en formato HTML: *... Luego que usted realice esto. (787) 967-1050 | email..Incube2. ¿Estos son los únicos <meta> tags que existen? No.com Tel. tales como <scripts>. Si observamos el código <meta> tenemos varias áreas:  Autor: En esta área especificamos el autor del portal  Description: En esta área escribimos la descripción del portal  Keywords: En esta área escribimos los Keywords relacionados al portal. Existen una gran cantidad de opciones que puede utilizar. ¿Cuál es la idea de escribir esta información en el <meta>? Muchos buscadores leen esa información para poder identificar el uso de ese portal. Los “Keywords” serían las palabras claves que alguien utilizaría para conseguir el portal en algún buscador.. En este módulo. ¿Qué son las etiquetas? Las etiquetas son áreas donde usted puede presentar alguna información en específico relacionada al portal. servicios@incube2. Curso de Diseño de Páginas de Internet y Tiendas Virtuales 6 . <html> <head> . Importante: Ver explicación en el video del módulo 1. <meta> y otras.com ¿Cómo guardar la página para verla en el navegador? Para guardar la página es importante que primero escriba el código que explicamos en la página anterior en la aplicación de Notepad++.

. este sería el codigo que utilizaría en el <body>: . para las imágenes que utilizaremos en el portal.com El “Background” de la página... </body> </html> Es importante que en este primer ejercicio coloquemos todas nuestras páginas de práctica en una misma carpeta y a la misma vez tengamos una carpeta con el nombre: imágenes. 7 Curso de Diseño de Páginas de Internet y Tiendas Virtuales .. (787) 967-1050 | email.... Si fuera un color fijo. <body background="imagenes/fondo. sería de esta forma: . Existen diferentes tipos de “Backgrounds” que usted puede utilizar para su página de Internet.gif"> .Incube2. </body> </html> Si fuera una imagen. <body text="#FF0000"> .. </body> </html> Si fuera en código ASCII. servicios@incube2. sería de esta forma: ... <body bgcolor="blue"> .com Tel. Por ejemplo.. usted podría utilizar un color fijo o alguna imagen en específico..

com Manejo del texto El texto es muy importante en una página de Internet. <right></right>. a través de códigos y/o etiquetas.</p> Los encabezados en el contenido Los encabezados suelen utilizarse para títulos y puede resaltarlo según el tamaño que desee utilizar. Por esta razón. sería así: <p align="center">Este es mi primer párrafo. Códigos importantes:  <br> Si usted desea producir un espacio. (787) 967-1050 | email.Incube2. servicios@incube2. Observe el siguiente ejemplo: <p>Este es mi primer parrafo </p> Si desea alinearlo por ejemplo al centro. como si presionara la tecla "Enter”. usted debe dominar los elementos que se requieren para poder escribir un texto de forma correcta en el código HTML. Existe una etiqueta predeterminada para escribir un párrafo la cual sería: <p> y </p>. este es el código que debe utilizar: <br>  Alineamiento de texto: <left></left>. <center></center>  Negrita: <b>  Cursiva: <i>  Tachado: <s>  Aumentar tamaño de la fuente: <big>  Dismuye tamaño de la fuente: <small> A continuación presentaremos como alinear paárrafos.com Tel. Observe el siguiente ejemplo: Título 1  <H1>  <H2> Título  <H3> Título  <H4> Título 4  <H5> Título 5  <H6> Título 6 2 3 Curso de Diseño de Páginas de Internet y Tiendas Virtuales 8 .

&not. &ccedil. &iacute. Por eso es importante que usted se aprenda los caracteres especiales a nivel de código. &ordm. Carácter < > á 10 Representación &lt. &ntilde. &iquest. debe conocer que hay caracteres especiales que quizás usted desee utilizar. &Uacute. &eacute. espacios y otros caracteres que pueden interferir con el código. Curso de Diseño de Páginas de Internet y Tiendas Virtuales . &iexcl. &gt. &reg. &oacute. &middot. &Uuml. &uacute. servicios@incube2. &uuml. &#153. &Oacute. &aacute. &Ntilde. tales como acentos. &amp.com Caracteres especiales y espacios en blanco Cuando usted trabaja con el código de programación HTML. &nbsp. &Eacute. Á é É í Í ó Ó ú Ú ñ Ñ ™ &Aacute. &quot.Incube2. Carácter € ç Ç ü Ü & ¿ ¡ " · º espacio ¬ © ® Representación &euro.com Tel. &copy. &Iacute. (787) 967-1050 | email. &Ccedil.

incube2.incube2.Para más cursos y certificaciones.COM P.com www. visítanos en: http://www.com  Curso de Diseño de Páginas de Internet y Tiendas Virtuales INCUBE2. servicios@incube2.com Rev. 1. PR 00726 Tel.O Box 55 Caguas.1 11 Curso de Diseño de Páginas de Internet y Tiendas Virtuales . (787) 967-1050 Email.