HTML y Javascript

Clase 9 de 50 • Curso de Programación Básica 2014

Clase anteriorSiguiente clase

Andres Massuttier Massuttier

student•

Hay problerma si para el curso uso Dreamweaver?

Erik Kno

student•

Saludos Andres, no creo que haya problema si usas Dreamweaver, pero siempre es bueno aprender a usar sublime text yo lo prefiero más que Dreamweaver

Roel Magdaleno

student•

Que tal Andrés, no hay problema el usar Dreamweaver pero cuando vas conociendo otros editores de texto te vas dando cuenta de lo complicado y/o funcional que puede ser uno o el otro. He probado Dreamweaver, Notepad++, Coda y otros cuantos y sinceramente, me quedo con Sublime Text.

Luis Manuel Gonzalez

student•

para hacer saltos de líne en un alert puedes usar slash invertido y el caracter "n" que significa new line (nueva línea):

alert("Hola \n" +"mi nombre es Luis");

student•

Como ver las extensiones de todos los archivos en Windows:

Para abrir Opciones de carpeta, has clic en el botón Inicio

, en Panel de control, en Apariencia y personalización y, por último, en Opciones de carpeta o Opciones del explorador de archivos.

Has clic en la fichaVer y, a continuación, en Configuración avanzada, para mostrar las extensiones de nombre de archivo, desactiva la casilla "Ocultar las extensiones de archivo para tipos de archivo conocidos" y da clic en aceptar.

Carlos Eduardo Muñoz Niño

student•

Hola queria compartir que tambien en javascript con "/* */" pueden escribir comentarios sin tener que usar "/ /" en cada parrafo y los comentarios en html es "<-- -->"

Charly

student•

Excelente pero en html  solo falta el signo de ! admiración, en javascript se escribe //para comentarios de una linea y

/* para
comentarios
de
varias lineas*/

Rhendell Zambrano

student•

A quienes pueda servir.

Carrera: FrontEnd Profesional
Curso: Programación Básica
Clase: HTML y JavaScript
Facilitado: John Freddie Vega Twitter: @freddier

¿Qué es HTML?

El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada, y que está compuesto por etiquetas, que marcan el inicio y el fin de cada elemento del documento. Un documento hipertexto no sólo se compone de texto, puede contener imágenes, sonido, vídeos, etc., por lo que el resultado puede considerarse como un documento multimedia. Los documentos HTML deben tener la extensión html o htm, para que puedan ser visualizados en los navegadores (programas que permiten visualizar las páginas web). Los navegadores se encargan de interpretar el código HTML de los documentos, y de mostrar a los usuarios las páginas web resultantes del código interpretado.

¿Cómo funciona?

Se escribe un código dentro del documento HTML con las características propias del lenguaje y todo ese contenido es interpretado por el navegador web y mostrado como una página.

Se puede escribir la estructura HTML en un editor de texto y guardado bajo la extensión .html

TIP: Hoy en día existen varios editores con funciones avanzada para la edición o creación de estos archivos (Sublime Text, ATOM, Text Wrangler, Etc).

Estructura

La estructura principal de un archivo HTML inicia así

<!DOCTYPE html>

<html> <head> <title>Barra de titulo</title> </head> <body>  <h1>Bienvenido a mi pagina</h1> <p class="texto">Soy un texto dummy</p> </body> </html>

<!DOCTYPE html>: El Doctype es la primera declaración que va en una página web y le dice al navegador qué especificación de HTML o XHTML estas usando.

El doctype empieza con <!DOCTYPE (debe ser escrito en mayúsculas)

<meta charset=“utf-8”>: El elemento meta con atributo charset en un documento HTML está el destinado a establecer la codificación de caracteres utilizada.
<HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
<HEAD>: Especifica el prólogo del resto del archivo esto es, el encabezado. Son pocas las etiquetas que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras etiquetas dentro de él. En <head> no hay que colocar nada del texto del documento.
<BODY>: Encierra el resto del documento, el contenido es el que se muestra en un explorador Web.
<h1> <P>: Son etiquetas del HTML como existen muchas. Estás son específicamente para el titulo y el párrafo.
<!—comentario —>: Permite insertar un comentario dentro del documento HTML y que no sea interpretado como una linea de código.

TIP: Las etiquetas siempre deben estar escritas en minúsculas.

TIP: En caso de tener problemas con símbolos en la codificación revisar que tengan la etiqueta meta correctamente colocada.

JavaScript

Javascript es un lenguaje con muchas posibilidades, utilizado para crear pequeños programas que luego son insertados en una página web y en programas más grandes, orientados a objetos mucho más complejos. Con Javascript podemos crear diferentes efectos e interactuar con nuestros usuarios.
Este lenguaje posee varias características, entre ellas podemos mencionar que es un lenguaje basado en acciones que posee menos restricciones. Además, es un lenguaje que utiliza Windows y sistemas X-Windows, gran parte de la programación en este lenguaje está centrada en describir objetos, escribir funciones que respondan a movimientos del mouse, aperturas, utilización de teclas, cargas de páginas entre otros.
Es necesario resaltar que hay dos tipos de JavaScript: por un lado está el que se ejecuta en el cliente, este es el Javascript propiamente dicho, aunque técnicamente se denomina Navigator JavaScript. Pero también existe un Javascript que se ejecuta en el servidor, es más reciente y se denomina LiveWire Javascript.

JavaScript en HTML

La manera de usar JS en HTML es insertar una etiqueta dentro de la cabecera llamada script, dicha etiqueta permite insertar código en JS.

TIP: Es una buena práctica colocar el archivo JS aparte del HTML y hacer una llamada en el código del HTML.
La sintaxis de una instrucción JS puede manejarse de la siguiente manera.

Dentro del HTML: <script type=“text/javascript” src=“codigo.js”>
JS: alert( 1 + “10” );

( ): Se usan para colocar los parámetros de la función JS.
“ “: Para colocar las condenas de texto

TIP: Juntar 2 cadenas de texto se llama concatenar.

TIP: Para comentar el código dentro de JS se usa // al inicio de cada linea.

Tipos de Datos

Es un atributo de los datos que indica al ordenador (y/o al programador) sobre la clase de datos que se va a trabajar. Esto incluye imponer restricciones en los datos, como qué valores pueden tomar y qué operaciones se pueden realizar.

Existen diferentes tipos de datos cada uno con características diferentes.

REF
REF
REF
REF
REF
REF
REF
REF
REF

Mike Menendez

student•

Dentro de una cadena de texto delimitada por comillas puedes agregar comillas anteponiendo el caracter de escape '', Ejemplo:

alert("\"Alex\" es un nombre masculino");

Saludos

Sergio De La Cruz

student•

Tengo 5 años de haber egresado de la carrera en Ingeniería en Sistemas con especialidad en Programación, con sinceridad expreso que no encontrado mejor forma enseñar que la que tengo ahora mismo enfrente de mi, desde luego continuo con lo básico y me sigo con todo lo demás.

Norman Arango Arango

student•

Cómo mostrar las extensiones de archivos en Windows

1- Accede al Panel de control y allí abre la herramienta Opciones de carpetas.
2- Selecciona las pestaña Ver.
3- Busca y desmarca la casilla llamada: "Ocultar las extensiones de archivo para tipos de archivos conocidos".

4- Clic en Aceptar para guardar los cambios.

Danelia Sanchez

student•

Tener separado HTML y Javascript es buena práctica puesto que permite reutilizar código. Cierto pedazo de código me puede servir para otro proyecto, además de que en proyectos grandes es muy útil porque es mucho más fácil de mantener y modificar.

Carlos Yuriar León Contreras

student•

HTML:Funciona como un Árbol, con Grupos y Ramificaciones. <h1>: Etiqueta de texto tipo Titulo. <p>: Etiqueta de tipo Parrafo. Meta: Datos generales de todo el archivo. Charset: atributo con un valor. Utf-8: Formato de codificación de caracteres. <!DOCTYPE html>: Para que el navegador funcione bien. Ejemplo: <html> <head> <meta charset="utf-8" />

Juan Esteban Quintero

student•

Carlos Yuriar León Contreras, gracias por el aporte.

Joe

student•

Cómo ver extensiones en Mac:
1.- Abre o selecciona una ventana de Finder, o bien, da un clic en algún punto vacío del escritorio.
2.- En la barra de menús, da clic en 'Finder' y luego a 'Preferencias' (preferencias de Finder).
3.- Da clic a la pestaña 'Avanzado' y luego a 'Mostrar extensiones de nombres de archivo'.
4.- Para aplicar los cambios sólo cierra la ventanita.

David Andres Cuentas Martinez

student•

Aporte importante: Hacer que Windows muestre las extensiones de los archivos.

Vamos a panel de control y ubicamos "Opciones de carpeta" (Les recomiendo poner la modalidad de iconos pequeños)
Nos abrira una ventana emergente y le daremos click a la pestaña ver
Por ultimo Desmarcamos la opción "Ocultar las extensiones de archivos para tipos de archivos conocidos" y le daremos a aplicar.

LISTO ahora podremos ver siempre las extensiones de nuestros archivos.

Emilio Domínguez Sánchez

student•

Hola, ya hice el código en sublime text pero no sé como se corre en chrome o si debo instalar algo antes de hacerlo, alguien me podría ayudar?
Gracias.
dejo el código que hice:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mi primer proyecto</title> <script type="text/javascript"> alert("Hola mamá, ya sé programar!!1!"); </script> </head> <body> <h1>Primer proyecto de programación</h1> <p>Bienvenido a mi primer proyecto increíble en html</p> </body> </html>

Nicolas

student•

hola, esta todo bien las lineas de codigo, proba con otro buscador yo uso mozilla.

Melina Jacqueline onoriaga

student•

esta todo mas que bien, lo copie en mi sublime, lo guarde y abrí en chrome y se ejecuto 10 puntos!! lo guardaste bien con la estension .html?? si te sirve de data, yo ya se alguito y mi novio ya es programador y me enseño que es mejor guardar con la estencion .php ... no creo que influya en algo ahora pero prueba, quien sabe jaja.

Andres

student•

Ya tengo subline tex 2 y pracvtico con eso, pero como hago para probar los codigos en el navegador como en los videos... por favor ayudenme.

Richard Ruben Pariona Quispe

student•

Guarda el proyecto que termine la extencion con ".html" , luego buscas el proyecto y pones "abrir con" y le das click "Google Chrome".

Wil Fts

student•

guardar en sublime, te vas a la carpeta donde guarda el html y arrastra el archivo al navegador

Daniel Perez

student•

Muy interesante!, por cierto no confundir Bytes con Bits un aporte para los que tal vez no conocen la diferencia.
Bit= dígito binario, valores entre 0 y 1
Byte= contiene 8 bits que permite valores entre 0 y 255.

Ivette Guadalupe Hernández Pérez

student•

Estoy tomando este curso para reafirmar mis conocimientos y la verdad es que la forma en que Freddy explica es super buena, explicita y fácil de digerir.

Roldan Mauricio Alvarez

student•

Explica como si una persona nunca hubiera estado en contacto con la programacion y estuviera a punto de comenzar con ella de una manera que las personas pueden entenderla facilmente como con algo cotidiano, video juegos, etc

Usuario anónimo

user•

Así es, un crack!

Justyn Rodriguez

student•

Configurando SublimeTex2 con Package Control y Emmet, se puede conseguir que cuando la persona empiece a escribir el código, con solo poner "html:5 + Ctrl+e" Sublime automáticamente escriba la estructura básica de html5 con el standart UTF-8.
Nos podemos ahorrar un poquito de tiempo =)

Didier Núñez

student•

Muchas gracias, ya había agregado Emmet pero no sabía como hacer que funcione :)

Daniel

student•

Hola amigos
PARA QUE WINDOWS TE MUESTRE LAS EXTENCIONES DE TUS ARCHIVOS
realiza los siguientes pasos:

entrar al panel de control ---> apariencia y personalizacion --> opciones de carpeta --> pestaña ver --> y dentro de las configuraciones avanzadas existen unos check --> buscas la opcion que dice ocultar las extenciones de archivos para tipos de archivos conocidos --> la desmarcas --> le das clip en aplicar --> luego aceptar

y listos ya podras ver las extenciones de todos sus archivos.

Roberto

student•

defer: Carga después de que la página cargo.

Eso fue lo que entendí, no esta en el curso pero es nota.*

Avilio Muñoz

student•

Aqui esta el video que menciona al inicio:
Qué es HTML y como funciona -->

HTML y Javascript

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

Introducción básica a HTML y Javascript para programar

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript

Variables y funciones

Piedra, papel y tijera con Javascript

Variables, Matrices y Objetos en Javascript

Escribir HTML desde JS (document.write)

Matrices

Juego campo minado

Objetos del navegador

Objetos en JS

Preguntas

Ciclos y Dibujos con Canvas

Ciclos

Dibujos con canvas

Dibujar con eventos

Preguntas y respuestas

Programando juegos con canvas

Tipos de imágenes

Insertar imágenes en canvas

Dibujo de múltiples imágenes en canvas

Dibujar al enemigo y controlar a Diana

Sesión de preguntas y respuestas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Objetos en JavaScript con Prototype

Creando el juego del Ahorcado

Dibujo de un ahorcado usando Canvas

Sesión de preguntas y respuestas

Cómo crear un algoritmo para el juego del ahorcado

Extendiendo la funcionalidad de los Strings

Creando nuestro algoritmo para el juego del ahorcado

Sesión de preguntas y respuestas

Pregúntale a Freddy lo que quieras ... acerca de programación ;)

Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 1

Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 2

Conceptos básicos de programación: Frontend-Backend

¿Qué es Frontend y Backend?

Ejemplo de un login usando POST y GET

Ejemplo de un login usando AJAX

Sesión de preguntas y respuestas

Crea tu primer servidor web con Node.JS

Instalación de Node.js

Instalación de librerías de Node con npm

Modelo cliente servidor y seguridad web básica

Servidor web con Express y Node.js

Formulario de login con Node.js

Sesión de preguntas y respuestas

Aprende a volar un dron con Javascript

Introducción a los drones

Bases de Node.js para drones

Vuela un dron con Node.js

Sesión de preguntas y respuestas

Complementos del curso

Publica tu sitio web usando GitHub Pages