Aprende HTML en 5 simples pasos

Aprenda utilizar el lenguaje HTML para crear una página web básica con estilos, imágenes y hasta videos!
5.0 (3 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
42 students enrolled
$19
$50
62% off
Take This Course
  • Lectures 26
  • Length 1.5 hours
  • Skill Level Beginner Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2015 Spanish

Course Description

Les cuento que este es un curso básico de HTML y está dirigido a personas que tienen deseos de aprender a programar páginas web. TODO programador comienza con HTML y este curso es una oportunidad muy buena para poder iniciarte en el precioso mundo de la programación y diseño web.

Tu deberías tomar este curso porque en él aprenderás:

  • Qué es HTML y JsBin
  • La configuración del documento HTML
  • Headers y parrafo
  • Negrita cursiva subrayado
  • Estilos CSS
  • Links o Vínculos
  • Insertar imágenes
  • Distintos tipos de Listas (numeradas, sin ordenar, listas de destalles)
  • Tablas con sus respectivos encabezados, filas y columnas
  • Formularios de envío de información y login.
  • Integración social con Youtube, Facebook y Twitter
  • Por último te enseñaré a incluir JUEGOS en tu página web.

En lineas generales también estarás capacitado/a para comprender el contenido de un sitio web cualquiera sea este. Entenderás "qué hay por detrás de una página". Así como también tendrás herramientas para crear tu propia página web.

El material de este curso será transmitido mediante videos que hice especialmente para ti... en los que iremos viendo paso a paso la manera en que podemos construir una página web.

En solo 5 pasos te mostraré las etiquetas necesarias para armar tu página. Y créeme que no te demorará más de 2 horas capacitarte mediante este curso de HTML.

Este curso es la manera más simple de aprender HTML. No necesitarás de conocimientos previos ni largas horas de estudio. Con solo tu conexión a Internet podrás realizar TODO. NO es necesario tener software especial instalado en tu sistema.

Apúntate ahora. Anótate al curso y compártelo con otras personas para que cada vez más puedan disfrutar de los beneficios de diseñar o programar webs

Es simple y concreto. Sin vueltas y pensado para ti.

What are the requirements?

  • Naaaaada de nada! en este curso arrancamos y terminamos JUNTOS y sin requerimientos previos ;)
  • Ganas de aprender y divertirse

What am I going to get from this course?

  • Aprenderás HTML desde Cero en 5 simples pasos
  • Crearás tu propia página web
  • Tendrás la posibilidad de Incluir contenido multimedia
  • Integrarás Facebook y Twitter en tu página web
  • Integrar Facebook, Youtube y Twitter en tu página web

What is the target audience?

  • Estudiantes
  • Profesionales
  • Personas sin conocimientos
  • Interesados en HTML

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: PASO 1 - Introducción y nociones básicas
00:54

Bienvenidos a este curso de programación en HTML en 5 Simples Pasos.

Esperamos que tengan una buena jornada de aprendizaje, que se diviertan y puedan compartir con otros usuario, amigos, familia, etc... todo lo que aprendan en estos videos.

Les animamos a que hagan comentarios y/o preguntas que con mucho gusto serán respondidas!

En esta primera clase repasaré los contenidos y objetivos del curso animándote a que lo completes para hacer tu propia página web!

02:09

Ten en cuenta de seguirme en todos los pasos que voy dando.

Debes prestar atención mientras disfrutas del contenido para poder programar juntos.

También debes tener instalado un navegador web actualizado (preferentemente el Chrome)

Utilizaremos el sitio JsBin.com para trabajar programando "en vivo"... en los próximos videos te lo explicaré con más detalles.

02:54

En esta clase comprenderemos de forma simple en qué consiste el lenguaje HTML.

Según la WikiPedia:

HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, videos, entre otros. Es un estándar a cargo de la W3C, organización dedicada a la estandarización de casi todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación. (...)

02:28

Al ver esta clase comprenderás cómo hacer tus prácticas “en vivo” sin necesidad de Software especializado para hacer tus páginas web viendo los resultados automáticamente.

04:00

En esta clase veremos la forma básica de cómo se construye una página web. Las etiquetas elementales para esto son:

<html></html>

<head></head>

<title></title>

<body></body>


Fíjate que cada una de estas contiene su etiqueta de apertura y su correspondiente etiqueta de "cierre".

En este video pon atención a la forma en que se combinan estas etiquetas para hacer una página web correctamente programada.

Section 2: PASO 2 - Etiquetas Básicas
04:14

Hasta aquí encendimos los motores. Ahora ponemos primera y vamos hacia delante en nuestro camino de programadores HTML. Lo primero es saber armar encabezados con las etiquetas <h1> <h2> … <h6> y las de párrafos <p> para poder comenzar a darle formato a nuestra página.

03:35

Una páginas sin palabras resaltadas puede parecer algo monótona, por eso te mostraré aquí, la manera en que podrás transformar tus textos. Las etiquetas principales de esta clase son: <b> <i> <u>


<b>Esto aparecerá en negrita</b>

<i>Esto aparece en letra cursiva o itálica</i>

<u>Este texto se va a ver subrayado</u>


07:22

En esta clase te mostraré de forma simple los estilos. Así tu página podrá tener colores de texto, colores de fondo, cambiar el tipo de letra que verán los visitantes de tu página y algunas cosas más...

  • style="color:orange"
  • style="font-family:verdana"
  • style="font-size:30px"
  • style="background-color:#FF8000"


Sitio web con fuentes:

https://www.google.com/fonts


Sitio web con colores hexadecimales:

http://html-color-codes.info/codigos-de-colores-hexadecimales/#Html_Color_Chart

http://www.w3schools.com/tags/ref_colorpicker.asp


Referencias oficiales de estilos CSS (sitio en Inglés):

http://www.w3schools.com/cssref/default.asp


01:41

Aquí pon atención al contenido de las etiquetas porque incluiremos varios estilos en un mismo lugar. Será genial que veas tus textos decorados con toooooda la artillería !


Recuerda que cada estilo va todo entre comillas dobles " " y separado por un punto y coma ;

style="color:orange; font-family:verdana; font-size:30px; background-color:#FF8000"


Sitio web con fuentes:

https://www.google.com/fonts


Sitio web con colores hexadecimales:

http://html-color-codes.info/codigos-de-colores-hexadecimales/#Html_Color_Chart

http://www.w3schools.com/tags/ref_colorpicker.asp


Referencias oficiales de estilos CSS (sitio en Inglés):

http://www.w3schools.com/cssref/default.asp

03:47

Como si fuera poco te harás del conocimiento de algunas etiquetas más (que no todos conocen).¿Cómo se hace un subíndice? ¿Y un súper índice? ¿Cómo se superpone una línea sobre el texto para que se vea “eliminado”? No lo sabes verdad?... bueno, en esta clase lo aprenderás


<em> </em> es el mismo efecto que <i> </i> cursiva o itálica

<strong> </strong> es el mismo efecto que <b> </b> negrita o bold

<sub> </sub> sub índice

<sup> </sup> super índice

<del> </del> para mostrar el texto con una línea "borrándolo"

<br> para bajar una renglón (no tiene etiqueta de cierre)

Section 3: PASO 3 - Etiquetas Intermedias
02:19

Haciendo un click irás de un lado a otro de internet !

Los vínculos te ayudarán a dar un paseo por el mundo o si lo prefieres por el interior de tu página/sitio web. La famosa etiqueta <a> será nuestra mejor aliada en este viaje!


Vínculo simple:

<a href="http://educacionconvalores.com"> Al hacer click aquí irás al sitio del vínculo </a>


Vínculo que se abre en una nueva pestaña:

<a href="http://educacionconvalores.com" target="_blank">

Al hacer click aquí irás al sitio del vínculo abriéndose una nueva pestaña en tu navegador

</a>

02:51

Nada como una buena imagen para representar lo que las palabras a veces no pueden. En esta clase conocerás la forma en que podemos agregar imágenes a la páginas. Con la etiqueta <img> en segundos habrás hecho magia.


<img src="http://tusitioweb.com/imagenes/tuimagen.jpg">


NOTA IMPORTANTE: te recomiendo solo usar imágenes de formato JPG, GIF, PNG. NO uses BMP por que no van a funcionar.


01:25

Aceleramos un poco más y le ponemos vínculos a las imágenes. A partir de aquí, al hacer click en tus imágenes podrás saltar hasta otro lugar!


Ejemplo de una imagen que funciona como link (vínculo):

<a href="http://educacionconvalores.com" target="_blank">

<img src="http://tusitioweb.com/imagenes/tuimagen.jpg">

</a>

05:17

En esta clase te muestro las diferentes maneras de armar listas. Ya sea sin un orden específico o también numeradas.

  • opción 1
  • opción 2
  • opción 3
  1. Pedro Rodríguez
  2. Luis Suárez
  3. Lionel Messi
  4. Neymar Jr.
  5. Adama Traoré

Para profundizar más en este concepto te recomiendo que veas el contenido oficial de listas en w3schools

http://www.w3schools.com/html/html_lists.asp


04:13

Hasta aquí todo muuuuy lindo. ¿Pero cómo estructuramos la información para que se vea un poco más prolijo? Las tablas son una buena opción y la etiqueta <table>


<table style="width:100%">
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th>Edad</th>
</tr>
<tr>
<td>Evelin</td>
<td>Jacentu</td>
<td>24</td>
</tr>
</table>

03:16

¿Qué hacemos con toda esta información? Ya hemos visto desde lo básico en HTML, pasando por párrafos, formatos de texto, estilos, imágenes, vínculos, etc hasta lo último en el video anterior de las tablas. Ahora incorporaremos toda esta información para hacerla atractiva visualmente y armar una página con todo lo visto.

Section 4: PASO 4 - Etiquetas Avanzadas
02:37

Con esta clase nos metemos de lleno en las posibilidades de interactuar con nuestros visitantes. Vamos a armar un pequeño formulario que servirá en el futuro para enviar comentarios.


<form>

Apellido <input type="text" name="apellido">

Nombre <input type="text" name="nombre">

</form>

03:51

¿Radio, CheckBox y Passwords ? y eso con qué se come?

Son parte de un formulario. El RADIO nos permite elegir opciones, el CHECKBOX para tildar y el PASSWORD para hacer las conocidas cajas de texto donde pones tu contraseña y se ve todo ********* .

Bueno honestamente esta explicación no es muuuuy descriptiva por eso te propongo disfrutes del video y aprendas rápido y fácil cómo usar estas tres alternativas dentro de un formulario ;)
02:12

Al fin… con este botón resolvemos el envío del formulario. Lo utilizaremos para cada caso según nuestras necesidades. Si estás haciendo un formulario de “login” para poner usuario y contraseña el boton de “enviar” puede decir “ingresar” o “registrarse” o “enviar comentarios”... tu decides!


<input type="submit" name="miboton" value="Enviar">


04:24

En este video te muestro algunos detalles de configuración del formulario. Generalmente los diseñadores web trabajan con programadores web. Estos últimos son los que realizan el procesamiento del formulario y requieren que los configuremos con algunos detalles que te cuento aquí.


Métodos de envío:

GET <form name="miformulario" method="get">

- En este formulario, la información se enviará y será visible desde la barra de direcciones del navegador web.


POST <form name="miformulario" method="post">

- En este formulario, la información se enviará y NO PODRÁ VERSE desde la barra de direcciones del navegador web, sino que los datos del formularios se mandan incrustados en el paquete HTTP (este tema es para otro curso)


01:22

Nuestro formulario funciona, pero no se ve muy atractivo. Ahora es momento de darle un poco de Style para que den ganas de usarlo. Lo pondremos dentro de una tabla y lo decoramos… qué te parece?

Section 5: PASO 5 - Social Media
01:40

Hasta hora ya vimos lo necesario para desarrollar nuestra página web. En este último PASO te invito a hacer una integración con las redes sociales más conocidas y agregarle inclusive videos de Youtube. Te animas?

09:03

Cómo incluir los “me gusta” de tu página de face? también le pondremos comentarios y por último un “me gusta” a algún artículo para hacer un “share” (compartir) con tus amigos de Facebook. Todo eso en este video que comparto contigo.

COMPARTIR: https://developers.facebook.com/docs/plugins/share-button

ME GUSTA: https://developers.facebook.com/docs/plugins/like-button

PAGE PLUGIN: https://developers.facebook.com/docs/plugins/page-plugin

...

05:43

Muchos piden que agreguemos los últimos twitts en una página, para estar al tanto de las últimas novedades. Será bien simple y fácil poder hacerlo, siempre y cuando veas este video prestando atención a las instrucciones que te doy. Go twitter !

Botones de twitter
https://about.twitter.com/es/resources/buttons

TimeLine en nuestra página
https://dev.twitter.com/web/embedded-timelines

Tweets individuales
https://dev.twitter.com/web/embedded-tweets

02:14

Hagamos nuestra página un poco más divertida aún, agregándole juegos. Usaremos games creados en otros sitios web y nos permitirán incrustarlos dentro de la página tal como hicimos con los videos de Youtube! A qué te gustaría que jueguen los visitantes de tu página EN TU PÁGINA?

http://www.minijuegostop.com.mx/

Section 6: Despedida
00:44

Woooooow… qué más decirte!

GRACIAS por darte la oportunidad de aprender.

GRACIAS por darme la oportunidad de compartir mis aprendizajes.

GRACIAS por llegar hasta el final del viaje.

GRACIAS por darme los estímulos para armar más material.

GRACIAS por tu buena disposición, paciencia y respeto.

Y como dijo el gran Cerati: “GRACIAS TOTALES!” :)

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Cristian Matías Damián Blanco, Profesor y Analista de Sistemas

Hace más de 10 años me dedico a trabajar de lo que amo: Educación

En estos últimos años me he especializado en tecnologías aplicadas a la educación. Te invito a participar de los cursos que iré creando, con el deseo de que mi experiencia te sea útil.

Recién tenemos terminado el curso de "HTML en 5 simples pasos" para que puedas aprender a programar bien bien bien fácil en el lenguaje básico de toda página.

Saludos!

Ready to start learning?
Take This Course