-Tutorial de HTML
Con HTML puede crear su propio sitio web.
Este tutorial te enseña todo sobre HTML.
Ejemplos en cada capítulo
Este tutorial HTML contiene cientos de ejemplos HTML.
Con nuestro editor HTML en línea, puede editar el HTML y hacer clic en un botón para ver el resultado.
Ejemplo
<! DOCTYPE html>
<html>
<head>
<title> Título de la página </ title>
</ Head>
<body>
<h1>
Este es un título </ h1>
<p>
Este es un párrafo. </ P>
</ Body>
</ Html>
Inténtalo tú mismo "
Haga clic en el botón "Intentelo usted mismo" para ver cómo funciona.
Referencias HTML
En W3Schools encontrará referencias completas sobre etiquetas, atributos, eventos, nombres de colores, entidades, conjuntos de caracteres, codificación de URL, códigos de idioma, mensajes HTTP y más.
Editores HTML
Escribir HTML mediante el Bloc de notas o TextEdit
Las páginas web se pueden crear y modificar utilizando editores HTML profesionales.
Sin embargo, para aprender HTML recomendamos un editor de texto simple como Bloc de notas (PC) o TextEdit (Mac).
Creemos que usar un editor de texto simple es una buena manera de aprender HTML.
Siga los cuatro pasos a continuación para crear su primera página web con Bloc de notas o TextEdit.
Paso 1: Abra el Bloc de notas (PC)
Windows 8 o posterior:
Abra la pantalla de inicio (el símbolo de la ventana en la parte inferior izquierda de la pantalla). Tipo Bloc de notas.
Windows 7 o anterior:
Abra Inicio> Programas> Accesorios> Bloc de notas
Paso 1: Abrir TextEdit (Mac)
Abrir Finder> Aplicaciones> TextEdit
También cambie algunas preferencias para que la aplicación guarde los archivos correctamente. En Preferencias> Formato> elija "Texto sin formato"
A continuación, en "Abrir y guardar", marque la casilla que dice "Ignorar comandos de texto enriquecido en archivos HTML".
A continuación, abra un nuevo documento para colocar el código.
Paso 2: Escribir un poco de HTML
Escribir o copiar algo de HTML en el Bloc de notas.
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera posición </ h1>
<p>
Mi primer párrafo. </ P>
</ Body>
</ Html>
Bloc
Paso 3: Guardar la página HTML
Guarde el archivo en su computadora. Seleccione Archivo> Guardar como en el menú del Bloc de notas.
Asigne un nombre al archivo "index.htm" y establezca la codificación en UTF-8 (que es la codificación preferida para los archivos HTML).
Ver en el navegador
Puede utilizar .htm o .html como extensión de archivo. No hay diferencia, depende de ti.
Paso 4: Ver la página HTML en su navegador
Abra el archivo HTML guardado en su navegador favorito (haga doble clic en el archivo, o haga clic con el botón derecho del ratón - y elija "Abrir con").
El resultado se verá así:
Ver en el navegador
Ejemplos básicos de HTML
No se preocupe si estos ejemplos usan etiquetas que no han aprendido.
Usted aprenderá sobre ellos en los próximos capítulos.
Documentos HTML
Todos los documentos HTML deben comenzar con una declaración de tipo de documento: <! DOCTYPE html>.
El documento HTML comienza con <html> y termina con </ html>.
La parte visible del documento HTML está entre <body> y </ body>.
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera posición </ h1>
<p>
Mi primer párrafo. </ P>
</ Body>
</ Html>
Inténtalo tú mismo "
Encabezados HTML
Los encabezados HTML se definen con las etiquetas <h1>
a <h6>
.
<h1>
define el encabezado más importante. <h6>
define el encabezado menos importante:
Ejemplo
<h1>
Este es el encabezado 1 </ h1>
<h2>
Este es el encabezado 2 </ h2>
<h3>
Este es el encabezado 3 </ h3>
Inténtalo tú mismo "
Párrafos HTML
Los párrafos HTML se definen con la etiqueta <p>
:
Ejemplo
<p>
Este es un párrafo. </ P>
<p>
Este es otro párrafo. </ P>
Inténtalo tú mismo "
Enlaces HTML
Los enlaces HTML se definen con la etiqueta <a>:
Ejemplo
<a href="https://www.w3schools.com"> Este es un enlace </a>
Inténtalo tú mismo "
El destino del enlace se especifica en el atributo href.
Los atributos se utilizan para proporcionar información adicional sobre elementos HTML.
Imágenes HTML
Las imágenes HTML se definen con la etiqueta <img>.
El archivo fuente (src), el texto alternativo (alt), el ancho y la altura se proporcionan como atributos:
Ejemplo
<img src = "w3schools.jpg" alt = "W3Schools.com" width = "104" height = "142">
Elementos HTML
Elementos HTML
Un elemento HTML normalmente consiste en una etiqueta de inicio y una etiqueta de fin, con el contenido insertado entre:
<tagname> Contenido aquí ... </ tagname>
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta de fin:
<p>
Mi primer párrafo. </ P>
Etiqueta de inicio Contenido del elemento Etiqueta de finalización
<h1>
Mi primera posición </ h1>
<p>
Mi primer párrafo. </ P>
<br>
Los elementos HTML sin contenido se denominan elementos vacíos. Elementos vacíos no tienen una etiqueta de finalización, como el elemento <br> (que indica un salto de línea).
Elementos HTML anidados
Los elementos HTML pueden anidarse (los elementos pueden contener elementos).
Todos los documentos HTML constan de elementos HTML anidados.
Este ejemplo contiene cuatro elementos HTML:
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera posición </ h1>
<p>
Mi primer párrafo. </ P>
</ Body>
</Inténtalo tú mismo "
Ejemplo explicado
El elemento <html> def Html>
- Java Script
JavaScript es el lenguaje de programación de HTML y la Web.
JavaScript es fácil de aprender.
Este tutorial le enseñará JavaScript de básico a avanzado.
Ejemplos en cada capítulo
Con nuestro editor "Try it Yourself", puede cambiar todos los ejemplos y ver los resultados.
Ejemplo
Mi primer JavaScript
Haga clic en mí para mostrar la fecha y hora
Inténtalo tú mismo "
Le recomendamos leer este tutorial, en la secuencia que aparece en el menú de la izquierda.
Aprender por Ejemplos
Los ejemplos son mejores que 1000 palabras. Los ejemplos son a menudo más fáciles de entender que las explicaciones de texto.
Este tutorial complementa todas las explicaciones con ejemplos clarificadores "Try it Yourself".
Ejemplos de JavaScript
Si intentas todos los ejemplos, aprenderás mucho sobre JavaScript, en muy poco tiempo.
¿Por qué estudiar JavaScript?
JavaScript es uno de los 3 idiomas que todos los desarrolladores web deben aprender:
1. HTML para definir el contenido de las páginas web
2. CSS para especificar el diseño de las páginas web
3. JavaScript para programar el comportamiento de las páginas web
Este tutorial trata sobre JavaScript y cómo funciona JavaScript con HTML y CSS.
¿Sabías?
JavaScript y Java son lenguajes completamente diferentes, tanto en concepto como en diseño.
JavaScript fue inventado por Brendan Eich en 1995, y se convirtió en un estándar ECMA en 1997.
ECMA-262 es el nombre oficial de la norma. ECMAScript es el nombre oficial del idioma.
La etiqueta <script>
En HTML, el código JavaScript debe insertarse entre las etiquetas <script> y </ script>.
Ejemplo
<script>
Document.getElementById ("demo"). InnerHTML = "Mi primer JavaScript";
</ Script>
Inténtalo tú mismo "
Los antiguos ejemplos de JavaScript pueden utilizar un atributo de tipo: <script type = "text / javascript">.
El atributo type no es necesario. JavaScript es el lenguaje de script predeterminado en HTML.
Funciones y eventos JavaScript
Una función JavaScript es un bloque de código JavaScript, que se puede ejecutar cuando se "llama".
Por ejemplo, una función se puede llamar cuando se produce un evento, como cuando el usuario hace clic en un botón.
Aprenderá mucho más sobre funciones y eventos en capítulos posteriores.
JavaScript en <head> o <body>
Puede colocar cualquier número de secuencias de comandos en un documento HTML.
Los scripts se pueden colocar en la sección <body>, o en la sección <head> de una página HTML, o en ambas.
JavaScript en <head>
En este ejemplo, una función JavaScript se coloca en la sección <head> de una página HTML.
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Una página web </ h1>
<p id = "demo">
Un párrafo </ p>
<button type = "button" onclick = "myFunction ()"> Intentelo </ button>
<script>
Function myFunction () {
Document.getElementById ("demo"). InnerHTML = "Párrafo cambiado.";
}
</ Script>
</ Body>
</ Html>
Inténtalo tú mismo "
Colocar secuencias de comandos en la parte inferior del elemento <body> mejora la velocidad de visualización, porque la compilación de secuencias de comandos disminuye la visualización.
JavaScript externo
Los scripts también se pueden colocar en archivos externos:
Archivo externo: myScript.js
Function myFunction () {
Document.getElementById ("demo"). InnerHTML = "Párrafo cambiado.";
}
Los scripts externos son prácticos cuando se utiliza el mismo código en muchas páginas web diferentes.
Los archivos JavaScript tienen la extensión de archivo .js.
Para usar un script externo, ponga el nombre del archivo de script en el atributo src (fuente) de una etiqueta <script>:
Ejemplo
<! DOCTYPE html>
<html>
<body>
<script src = "myScript.js"> </ script>
</ Body>
</ Html>
Salida de JavaScript
Posibilidades de visualización de JavaScript
JavaScript puede "mostrar" los datos de diferentes maneras:
Escribir en un elemento HTML, usando innerHTML.
Escribir en la salida HTML utilizando document.write ().
Escribir en un cuadro de alerta, utilizando window.alert ().
Escribir en la consola del navegador, usando console.log ().
Uso de innerHTML
Para acceder a un elemento HTML, JavaScript puede utilizar el método document.getElementById (id).
El atributo id define el elemento HTML. La propiedad innerHTML define el contenido HTML:
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera página web </ h1>
<p>
Mi primer párrafo </ p>
<p id = "demo">
</ p>
<script>
Document.getElementById ("demo"). InnerHTML = 5 + 6;
</ Script>
</ Body>
</ Html>
Inténtalo tú mismo "
Cambiar la propiedad innerHTML de un elemento HTML es una forma común de mostrar datos en HTML.
Uso de document.write ()
Para fines de prueba, es conveniente utilizar document.write ():
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera página web </ h1>
<p>
Mi primer párrafo. </ P>
<script>
Document.write (5 + 6);
</ Script>
</ Body>
</ Html>
Inténtalo tú mismo "
Utilizando document.write () después de que un documento HTML esté completamente cargado, eliminará todo el HTML existente:
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera página web </ h1>
<p>
Mi primer párrafo. </ P>
<button onclick = "document.write (5 + 6)"> Intentelo </ button>
</ Body>
</ Html>
Inténtalo tú mismo "
El método document.write () sólo debe utilizarse para las pruebas.
Utilizando window.alert ()
Puede utilizar un cuadro de alerta para mostrar datos:
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera página web </ h1>
<p>
Mi primer párrafo. </ P>
<script>
Window.alert (5 + 6);
</ Script>
</ Body>
</ Html>
Sintaxis de JavaScript
La sintaxis de JavaScript es el conjunto de reglas, cómo se construyen los programas de JavaScript.
Programas JavaScript
Un programa de computadora es una lista de "instrucciones" que debe ser "ejecutada" por el ordenador.
En un lenguaje de programación, estas instrucciones del programa se llaman declaraciones.
JavaScript es un lenguaje de programación.
Las sentencias JavaScript están separadas por punto y coma:
Ejemplo
Var x, y, z;
X = 5;
Y = 6;
Z = x + y;
Inténtalo tú mismo "
En HTML, los programas JavaScript son ejecutados por el navegador web.
Declaraciones JavaScript
Las sentencias JavaScript se componen de:
Valores, operadores, expresiones, palabras clave y comentarios.
Valores JavaScript
La sintaxis JavaScript define dos tipos de valores: Valores fijos y valores de variables.
Los valores fijos se llaman literales. Los valores variables se llaman variables.
-Tutorial de SQL
SQL es un lenguaje estándar para acceder a bases de datos.
Nuestro tutorial de SQL le enseñará cómo usar SQL para acceder y manipular datos en: MySQL, SQL Server, Access, Oracle, Sybase, DB2 y otros sistemas de bases de datos.
Ejemplo
SELECT * FROM Clientes;
Inténtalo tú mismo "
Haga clic en el botón "Intentelo usted mismo" para ver cómo funciona.
¿Qué es SQL?
SQL significa Structured Query Language
SQL le permite acceder y manipular bases de datos
SQL es un estándar ANSI (American National Standards Institute)
¿Qué puede hacer SQL?
SQL puede ejecutar consultas en una base de datos
SQL puede recuperar datos desde una base de datos
SQL puede insertar registros en una base de datos
SQL puede actualizar registros en una base de datos
SQL puede eliminar registros de una base de datos
SQL puede crear nuevas bases de datos
SQL puede crear nuevas tablas en una base de datos
SQL puede crear procedimientos almacenados en una base de datos
SQL puede crear vistas en una base de datos
SQL puede establecer permisos en tablas, procedimientos y vistas
SQL es un estándar - PERO ..
Aunque SQL es un estándar ANSI (American National Standards Institute), existen diferentes versiones del lenguaje SQL.
Sin embargo, para ser compatible con el estándar ANSI, todos ellos soportan al menos los comandos principales (como SELECT, UPDATE, DELETE, INSERT, WHERE) de una manera similar.
Nota: La mayoría de los programas de base de datos SQL también tienen sus propias extensiones propietarias además del estándar SQL.
Uso de SQL en su sitio web
Para crear un sitio web que muestre datos de una base de datos, necesitará:
Un programa de base de datos RDBMS (es decir, MS Access, SQL Server, MySQL)
Para usar un lenguaje de scripting del lado del servidor, como PHP o ASP
Para usar SQL para obtener los datos que desea
Para usar HTML / CSS
RDBMS
RDBMS significa Sistema de Gestión de Base de Datos Relacional.
RDBMS es la base para SQL y para todos los sistemas de bases de datos modernos como MS SQL Server, IBM DB2, Oracle, MySQL y Microsoft Access.
Los datos en RDBMS se almacenan en objetos de base de datos denominados tablas.
Una tabla es una colección de entradas de datos relacionadas y consiste en columnas y filas.
Sintaxis de SQL
Tablas de base de datos
Una base de datos a menudo contiene una o más tablas. Cada tabla se identifica con un nombre (por ejemplo, "Clientes" u "Pedidos"). Las tablas contienen registros (filas) con datos.
En este tutorial utilizaremos la conocida base de datos de ejemplo de Northwind (incluida en MS Access y MS SQL Server).
A continuación se muestra una selección de la tabla "Clientes":
CustomerID CustomerName Nombre de contacto Dirección Ciudad Código postal País
1 - Alfreds Futterkiste Dirección: Maria Anders Obere Str. 57 Berlin 12209 Alemania
2 - Ana Trujillo Emparedados y helados Ana Trujillo Avda. De la Constitución 2222 México D.F. 05021 México
3 - Antonio Moreno Taquería Antonio Moreno Mataderos 2312 México D.F. 05023 México
4 - Alrededor del Cuerno Thomas Hardy 120 Hanover Sq. Londres WA1 1DP Reino Unido
5 - Berglunds snabbköp Más información Christina Berglund Berguvsvägen 8 Luleå S-958 22 Suecia
La tabla anterior contiene cinco registros (uno para cada cliente) y siete columnas (CustomerID, CustomerName, ContactName, Dirección, Ciudad, PostalCode y País).
Sentencias SQL
La mayoría de las acciones que necesita realizar en una base de datos se realizan con sentencias SQL.
La instrucción SQL siguiente selecciona todos los registros de la tabla "Clientes":
Ejemplo
SELECT * FROM Clientes;
Inténtalo tú mismo "
Declaración SQL SELECT
La instrucción SELECT se utiliza para seleccionar datos de una base de datos.
La instrucción SQL SELECT
La instrucción SELECT se utiliza para seleccionar datos de una base de datos.
El resultado se almacena en una tabla de resultados, denominada conjunto de resultados.
Sintaxis SQL SELECT
SELECT nombre_columna, nombre_columna
FROM table_name;
SELECT * FROM nombre_tabla;
Base de Datos Demo
En este tutorial usaremos la base de datos de ejemplo Northwind bien conocida.
A continuación se muestra una selección de la tabla "Clientes":
CustomerID CustomerName Nombre de contacto Dirección Ciudad Código postal País
1
Alfreds Futterkiste Dirección: Maria Anders Obere Str. 57 Berlin 12209 Alemania
2 Ana Trujillo Emparedados y helados Ana Trujillo Avda. De la Constitución 2222 México D.F. 05021 México
3 Antonio Moreno Taquería Antonio Moreno Mataderos 2312 México D.F. 05023 México
4
Alrededor del Cuerno Thomas Hardy 120 Hanover Sq. Londres WA1 1DP Reino Unido
5 Berglunds snabbköp Más información Christina Berglund Berguvsvägen 8 Luleå S-958 22 Suecia
Ejemplo de columna SELECT
La siguiente instrucción SQL selecciona las columnas "CustomerName" y "City" de la tabla "Customers":
Ejemplo
SELECT CustomerName, Ciudad FROM Customers;
Sentencia SQL SELECT DISTINCT
La instrucción SELECT DISTINCT se utiliza para devolver sólo valores distintos (diferentes).
Título de la página </ title>
</ Head>
<body>
<h1>
Este es un título </ h1>
<p>
Este es un párrafo. </ P>
</ Body>
</ Html>
Inténtalo tú mismo "
Haga clic en el botón "Intentelo usted mismo" para ver cómo funciona.
Ejemplos HTML
Al final del tutorial HTML, puede encontrar más de 200 ejemplos.
Con nuestro editor en línea, puede editar y probar cada ejemplo usted mismo.
Ir a los ejemplos de HTML!
Ejercicios de HTML y prueba de prueba
Pruebe sus habilidades HTML en W3Schools!
¡Comience el examen HTML!
¡Comience los ejercicios del HTML!
Referencias HTML
En W3Schools encontrará referencias completas sobre etiquetas, atributos, eventos, nombres de colores, entidades, conjuntos de caracteres, codificación de URL, códigos de idioma, mensajes HTTP y más.
Editores HTML
❮ Anterior Siguiente ❯
Escribir HTML mediante el Bloc de notas o TextEdit
Las páginas web se pueden crear y modificar utilizando editores HTML profesionales.
Sin embargo, para aprender HTML recomendamos un editor de texto simple como Bloc de notas (PC) o TextEdit (Mac).
Creemos que usar un editor de texto simple es una buena manera de aprender HTML.
Siga los cuatro pasos a continuación para crear su primera página web con Bloc de notas o TextEdit.
Paso 1: Abra el Bloc de notas (PC)
Windows 8 o posterior:
Abra la pantalla de inicio (el símbolo de la ventana en la parte inferior izquierda de la pantalla). Tipo Bloc de notas.
Windows 7 o anterior:
Abra Inicio> Programas> Accesorios> Bloc de notas
Paso 1: Abrir TextEdit (Mac)
Abrir Finder> Aplicaciones> TextEdit
También cambie algunas preferencias para que la aplicación guarde los archivos correctamente. En Preferencias> Formato> elija "Texto sin formato"
A continuación, en "Abrir y guardar", marque la casilla que dice "Ignorar comandos de texto enriquecido en archivos HTML".
A continuación, abra un nuevo documento para colocar el código.
Paso 2: Escribir un poco de HTML
Escribir o copiar algo de HTML en el Bloc de notas.
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera posición </ h1>
<p>
Mi primer párrafo. </ P>
</ Body>
</ Html>
Bloc
Paso 3: Guardar la página HTML
Guarde el archivo en su computadora. Seleccione Archivo> Guardar como en el menú del Bloc de notas.
Asigne un nombre al archivo "index.htm" y establezca la codificación en UTF-8 (que es la codificación preferida para los archivos HTML).
Ver en el navegador
Puede utilizar .htm o .html como extensión de archivo. No hay diferencia, depende de ti.
Paso 4: Ver la página HTML en su navegador
Abra el archivo HTML guardado en su navegador favorito (haga doble clic en el archivo, o haga clic con el botón derecho del ratón - y elija "Abrir con").
El resultado se verá así:
Ver en el navegador
Ejemplos básicos de HTML
❮ Anterior Siguiente ❯
No se preocupe si estos ejemplos usan etiquetas que no han aprendido.
Usted aprenderá sobre ellos en los próximos capítulos.
Documentos HTML
Todos los documentos HTML deben comenzar con una declaración de tipo de documento: <! DOCTYPE html>.
El documento HTML comienza con <html> y termina con </ html>.
La parte visible del documento HTML está entre <body> y </ body>.
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera posición </ h1>
<p>
Mi primer párrafo. </ P>
</ Body>
</ Html>
Inténtalo tú mismo "
Encabezados HTML
Los encabezados HTML se definen con las etiquetas <h1>
a <h6>
.
<h1>
define el encabezado más importante. <h6>
define el encabezado menos importante:
Ejemplo
<h1>
Este es el encabezado 1 </ h1>
<h2>
Este es el encabezado 2 </ h2>
<h3>
Este es el encabezado 3 </ h3>
Inténtalo tú mismo "
Párrafos HTML
Los párrafos HTML se definen con la etiqueta <p>
:
Ejemplo
<p>
Este es un párrafo. </ P>
<p>
Este es otro párrafo. </ P>
Inténtalo tú mismo "
Enlaces HTML
Los enlaces HTML se definen con la etiqueta <a>:
Ejemplo
<a href="https://www.w3schools.com"> Este es un enlace </a>
Inténtalo tú mismo "
El destino del enlace se especifica en el atributo href.
Los atributos se utilizan para proporcionar información adicional sobre elementos HTML.
Imágenes HTML
Las imágenes HTML se definen con la etiqueta <img>.
El archivo fuente (src), el texto alternativo (alt), el ancho y la altura se proporcionan como atributos:
Ejemplo
<img src = "w3schools.jpg" alt = "W3Schools.com" width = "104" height = "142">
Elementos HTML
❮ Anterior Siguiente ❯
Elementos HTML
Un elemento HTML normalmente consiste en una etiqueta de inicio y una etiqueta de fin, con el contenido insertado entre:
<tagname> Contenido aquí ... </ tagname>
El elemento HTML es todo, desde la etiqueta de inicio hasta la etiqueta de fin:
<p>
Mi primer párrafo. </ P>
Etiqueta de inicio Contenido del elemento Etiqueta de finalización
<h1>
Mi primera posición </ h1>
<p>
Mi primer párrafo. </ P>
<br>
Los elementos HTML sin contenido se denominan elementos vacíos. Elementos vacíos no tienen una etiqueta de finalización, como el elemento <br> (que indica un salto de línea).
Elementos HTML anidados
Los elementos HTML pueden anidarse (los elementos pueden contener elementos).
Todos los documentos HTML constan de elementos HTML anidados.
Este ejemplo contiene cuatro elementos HTML:
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera posición </ h1>
<p>
Mi primer párrafo. </ P>
</ Body>
</Inténtalo tú mismo "
Ejemplo explicado
El elemento <html> def Html>
-Tutorial de JavaScript
JavaScript es el lenguaje de programación de HTML y la Web.
JavaScript es fácil de aprender.
Este tutorial le enseñará JavaScript de básico a avanzado.
Ejemplos en cada capítulo
Con nuestro editor "Try it Yourself", puede cambiar todos los ejemplos y ver los resultados.
Ejemplo
Mi primer JavaScript
Haga clic en mí para mostrar la fecha y hora
Inténtalo tú mismo "
Le recomendamos leer este tutorial, en la secuencia que aparece en el menú de la izquierda.
Aprender por Ejemplos
Los ejemplos son mejores que 1000 palabras. Los ejemplos son a menudo más fáciles de entender que las explicaciones de texto.
Este tutorial complementa todas las explicaciones con ejemplos clarificadores "Try it Yourself".
Ejemplos de JavaScript
Si intentas todos los ejemplos, aprenderás mucho sobre JavaScript, en muy poco tiempo.
¿Por qué estudiar JavaScript?
JavaScript es uno de los 3 idiomas que todos los desarrolladores web deben aprender:
1. HTML para definir el contenido de las páginas web
2. CSS para especificar el diseño de las páginas web
3. JavaScript para programar el comportamiento de las páginas web
Este tutorial trata sobre JavaScript y cómo funciona JavaScript con HTML y CSS.
¿Sabías?
JavaScript y Java son lenguajes completamente diferentes, tanto en concepto como en diseño.
JavaScript fue inventado por Brendan Eich en 1995, y se convirtió en un estándar ECMA en 1997.
ECMA-262 es el nombre oficial de la norma. ECMAScript es el nombre oficial del idioma.
Puede leer más sobre las diferentes versiones de JavaScript en el capítulo JS Versions.
Velocidad de aprendizaje
En este tutorial, la velocidad de aprendizaje es su elección.
Todo depende de ti.
Si usted está luchando, tome un descanso, o releer el material.
Siempre asegúrese de entender todos los ejemplos de "Pruebe usted mismo".
Referencias de JavaScript
W3Schools mantiene una referencia completa de JavaScript, incluyendo todos los objetos HTML y del navegador.
La referencia contiene ejemplos para todas las propiedades y métodos, y se actualiza continuamente de acuerdo con los estándares web más recientes.
Referencia Completa de JavaScript
Prueba de JavaScript
Pruebe sus habilidades de JavaScript en W3Schools!
¡Comienza el Quiz JavaScript!
-JavaScript
La etiqueta <script>
En HTML, el código JavaScript debe insertarse entre las etiquetas <script> y </ script>.
Ejemplo
<script>
Document.getElementById ("demo"). InnerHTML = "Mi primer JavaScript";
</ Script>
Inténtalo tú mismo "
Los antiguos ejemplos de JavaScript pueden utilizar un atributo de tipo: <script type = "text / javascript">.
El atributo type no es necesario. JavaScript es el lenguaje de script predeterminado en HTML.
Funciones y eventos JavaScript
Una función JavaScript es un bloque de código JavaScript, que se puede ejecutar cuando se "llama".
Por ejemplo, una función se puede llamar cuando se produce un evento, como cuando el usuario hace clic en un botón.
Aprenderá mucho más sobre funciones y eventos en capítulos posteriores.
JavaScript en <head> o <body>
Puede colocar cualquier número de secuencias de comandos en un documento HTML.
Los scripts se pueden colocar en la sección <body>, o en la sección <head> de una página HTML, o en ambas.
JavaScript en <head>
En este ejemplo, una función JavaScript se coloca en la sección <head> de una página HTML.
La función se invoca (llamada) cuando se hace clic en un botón:
Ejemplo
<! DOCTYPE html>
<html>
<head>
<script>
Function myFunction () {
Document.getElementById ("demo"). InnerHTML = "Párrafo cambiado.";
}
</ Script>
</ Head>
<body>
<h1>
Una página web </ h1>
<p id = "demo">
Un párrafo </ p>
<button type = "button" onclick = "myFunction ()"> Intentelo </ button>
</ Body>
</ Html>
Inténtalo tú mismo "
JavaScript en <body>
En este ejemplo, una función JavaScript se coloca en la sección <body> de una página HTML.
La función se invoca (llamada) cuando se hace clic en un botón:
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Una página web </ h1>
<p id = "demo">
Un párrafo </ p>
<button type = "button" onclick = "myFunction ()"> Intentelo </ button>
<script>
Function myFunction () {
Document.getElementById ("demo"). InnerHTML = "Párrafo cambiado.";
}
</ Script>
</ Body>
</ Html>
Inténtalo tú mismo "
Colocar secuencias de comandos en la parte inferior del elemento <body> mejora la velocidad de visualización, porque la compilación de secuencias de comandos disminuye la visualización.
JavaScript externo
Los scripts también se pueden colocar en archivos externos:
Archivo externo: myScript.js
Function myFunction () {
Document.getElementById ("demo"). InnerHTML = "Párrafo cambiado.";
}
Los scripts externos son prácticos cuando se utiliza el mismo código en muchas páginas web diferentes.
Los archivos JavaScript tienen la extensión de archivo .js.
Para usar un script externo, ponga el nombre del archivo de script en el atributo src (fuente) de una etiqueta <script>:
Ejemplo
<! DOCTYPE html>
<html>
<body>
<script src = "myScript.js"> </ script>
</ Body>
</ Html>
Salida de JavaScript
❮ Anterior Siguiente ❯
Posibilidades de visualización de JavaScript
JavaScript puede "mostrar" los datos de diferentes maneras:
Escribir en un elemento HTML, usando innerHTML.
Escribir en la salida HTML utilizando document.write ().
Escribir en un cuadro de alerta, utilizando window.alert ().
Escribir en la consola del navegador, usando console.log ().
Uso de innerHTML
Para acceder a un elemento HTML, JavaScript puede utilizar el método document.getElementById (id).
El atributo id define el elemento HTML. La propiedad innerHTML define el contenido HTML:
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera página web </ h1>
<p>
Mi primer párrafo </ p>
<p id = "demo">
</ p>
<script>
Document.getElementById ("demo"). InnerHTML = 5 + 6;
</ Script>
</ Body>
</ Html>
Inténtalo tú mismo "
Cambiar la propiedad innerHTML de un elemento HTML es una forma común de mostrar datos en HTML.
Uso de document.write ()
Para fines de prueba, es conveniente utilizar document.write ():
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera página web </ h1>
<p>
Mi primer párrafo. </ P>
<script>
Document.write (5 + 6);
</ Script>
</ Body>
</ Html>
Inténtalo tú mismo "
Utilizando document.write () después de que un documento HTML esté completamente cargado, eliminará todo el HTML existente:
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera página web </ h1>
<p>
Mi primer párrafo. </ P>
<button onclick = "document.write (5 + 6)"> Intentelo </ button>
</ Body>
</ Html>
Inténtalo tú mismo "
El método document.write () sólo debe utilizarse para las pruebas.
Utilizando window.alert ()
Puede utilizar un cuadro de alerta para mostrar datos:
Ejemplo
<! DOCTYPE html>
<html>
<body>
<h1>
Mi primera página web </ h1>
<p>
Mi primer párrafo. </ P>
<script>
Window.alert (5 + 6);
</ Script>
</ Body>
</ Html>
Sintaxis de JavaScript
❮ Anterior Siguiente ❯
La sintaxis de JavaScript es el conjunto de reglas, cómo se construyen los programas de JavaScript.
Programas JavaScript
Un programa de computadora es una lista de "instrucciones" que debe ser "ejecutada" por el ordenador.
En un lenguaje de programación, estas instrucciones del programa se llaman declaraciones.
JavaScript es un lenguaje de programación.
Las sentencias JavaScript están separadas por punto y coma:
Ejemplo
Var x, y, z;
X = 5;
Y = 6;
Z = x + y;
Inténtalo tú mismo "
En HTML, los programas JavaScript son ejecutados por el navegador web.
Declaraciones JavaScript
Las sentencias JavaScript se componen de:
Valores, operadores, expresiones, palabras clave y comentarios.
Valores JavaScript
La sintaxis JavaScript define dos tipos de valores: Valores fijos y valores de variables.
Los valores fijos se llaman literales. Los valores variables se llaman variables.
-Tutorial de SQL
SQL es un lenguaje estándar para acceder a bases de datos.
Nuestro tutorial de SQL le enseñará cómo usar SQL para acceder y manipular datos en: MySQL, SQL Server, Access, Oracle, Sybase, DB2 y otros sistemas de bases de datos.
Ejemplos en cada capítulo
Con nuestro editor de SQL en línea, puede editar las sentencias SQL y hacer clic en un botón para ver el resultado.
Ejemplo
SELECT * FROM Clientes;
Inténtalo tú mismo "
Haga clic en el botón "Intentelo usted mismo" para ver cómo funciona.
Comience a aprender SQL ahora!
Prueba de prueba de SQL
¡Prueba tus habilidades SQL en W3Schools!
¡Comience el examen SQL!
Referencia rápida de SQL
Una referencia rápida de SQL. Imprima y póngalo en su bolsillo.
Referencia rápida de SQL
Tipos de datos SQL
Tipos de datos y rangos para Microsoft Access, MySQL y SQL Server.
Tipos de datos SQL
Introducción al SQL
❮ Anterior Siguiente ❯
SQL es un lenguaje estándar para acceder y manipular bases de datos.
¿Qué es SQL?
SQL significa Structured Query Language
SQL le permite acceder y manipular bases de datos
SQL es un estándar ANSI (American National Standards Institute)
¿Qué puede hacer SQL?
SQL puede ejecutar consultas en una base de datos
SQL puede recuperar datos desde una base de datos
SQL puede insertar registros en una base de datos
SQL puede actualizar registros en una base de datos
SQL puede eliminar registros de una base de datos
SQL puede crear nuevas bases de datos
SQL puede crear nuevas tablas en una base de datos
SQL puede crear procedimientos almacenados en una base de datos
SQL puede crear vistas en una base de datos
SQL puede establecer permisos en tablas, procedimientos y vistas
SQL es un estándar - PERO ....
Aunque SQL es un estándar ANSI (American National Standards Institute), existen diferentes versiones del lenguaje SQL.
Sin embargo, para ser compatible con el estándar ANSI, todos ellos soportan al menos los comandos principales (como SELECT, UPDATE, DELETE, INSERT, WHERE) de una manera similar.
Nota: La mayoría de los programas de base de datos SQL también tienen sus propias extensiones propietarias además del estándar SQL.
Uso de SQL en su sitio web
Para crear un sitio web que muestre datos de una base de datos, necesitará:
Un programa de base de datos RDBMS (es decir, MS Access, SQL Server, MySQL)
Para usar un lenguaje de scripting del lado del servidor, como PHP o ASP
Para usar SQL para obtener los datos que desea
Para usar HTML / CSS
RDBMS
RDBMS significa Sistema de Gestión de Base de Datos Relacional.
RDBMS es la base para SQL y para todos los sistemas de bases de datos modernos como MS SQL Server, IBM DB2, Oracle, MySQL y Microsoft Access.
Los datos en RDBMS se almacenan en objetos de base de datos denominados tablas.
Una tabla es una colección de entradas de datos relacionadas y consiste en columnas y filas.
Sintaxis de SQL
❮ Anterior Siguiente ❯
Tablas de base de datos
Una base de datos a menudo contiene una o más tablas. Cada tabla se identifica con un nombre (por ejemplo, "Clientes" u "Pedidos"). Las tablas contienen registros (filas) con datos.
En este tutorial utilizaremos la conocida base de datos de ejemplo de Northwind (incluida en MS Access y MS SQL Server).
A continuación se muestra una selección de la tabla "Clientes":
CustomerID CustomerName Nombre de contacto Dirección Ciudad Código postal País
1
Alfreds Futterkiste Dirección: Maria Anders Obere Str. 57 Berlin 12209 Alemania
2 Ana Trujillo Emparedados y helados Ana Trujillo Avda. De la Constitución 2222 México D.F. 05021 México
3 Antonio Moreno Taquería Antonio Moreno Mataderos 2312 México D.F. 05023 México
4
Alrededor del Cuerno Thomas Hardy 120 Hanover Sq. Londres WA1 1DP Reino Unido
5 Berglunds snabbköp Más información Christina Berglund Berguvsvägen 8 Luleå S-958 22 Suecia
La tabla anterior contiene cinco registros (uno para cada cliente) y siete columnas (CustomerID, CustomerName, ContactName, Dirección, Ciudad, PostalCode y País).
Sentencias SQL
La mayoría de las acciones que necesita realizar en una base de datos se realizan con sentencias SQL.
La instrucción SQL siguiente selecciona todos los registros de la tabla "Clientes":
Ejemplo
SELECT * FROM Clientes;
Inténtalo tú mismo "
Declaración SQL SELECT
❮ Anterior Siguiente ❯
La instrucción SELECT se utiliza para seleccionar datos de una base de datos.
La instrucción SQL SELECT
La instrucción SELECT se utiliza para seleccionar datos de una base de datos.
El resultado se almacena en una tabla de resultados, denominada conjunto de resultados.
Sintaxis SQL SELECT
SELECT nombre_columna, nombre_columna
FROM table_name;
y
SELECT * FROM nombre_tabla;
Base de Datos Demo
En este tutorial usaremos la base de datos de ejemplo Northwind bien conocida.
A continuación se muestra una selección de la tabla "Clientes":
CustomerID CustomerName Nombre de contacto Dirección Ciudad Código postal País
1
Alfreds Futterkiste Dirección: Maria Anders Obere Str. 57 Berlin 12209 Alemania
2 Ana Trujillo Emparedados y helados Ana Trujillo Avda. De la Constitución 2222 México D.F. 05021 México
3 Antonio Moreno Taquería Antonio Moreno Mataderos 2312 México D.F. 05023 México
4
Alrededor del Cuerno Thomas Hardy 120 Hanover Sq. Londres WA1 1DP Reino Unido
5 Berglunds snabbköp Más información Christina Berglund Berguvsvägen 8 Luleå S-958 22 Suecia
Ejemplo de columna SELECT
La siguiente instrucción SQL selecciona las columnas "CustomerName" y "City" de la tabla "Customers":
Ejemplo
SELECT CustomerName, Ciudad FROM Customers;
Sentencia SQL SELECT DISTINCT
❮ Anterior Siguiente ❯
La instrucción SELECT DISTINCT se utiliza para devolver sólo valores distintos (diferentes).
</title></head></html>
- CSS
! Para aquellos que no saben, una regla importante funciona así:
p {
color: red !important;
}
#thing {
color: green;
}
<p id="thing">Will be RED.</p>
El párrafo se va a ser de color rojo , a pesar de que el selector de ID tiene mayor especificidad. La !importantregla anula esa propiedad en particular.
Stephanie, sin duda debido a la frustración, estaba hablando acerca de cómo postscripting sus valores CSS con !importantpuede ser altamente abusado y para hacer complicado y difícil de mantener CSS. El caso de uso típico lamentable es la siguiente:
- Interrobang ¿Por qué mi CSS Fraggle MECERSE NO FUNCIONA
- (Use! Regla importante)
- Bien, ahora que está funcionando
A continuación, el siguiente tipo viene y trata de hacer nuevos cambios. Se trata de modificar algunas reglas CSS existentes, pero ahora sus cambios no se están comportando la forma en que debería. Se traza el tema de nuevo a las reglas! Importantes, entonces tiene una opción. Se puede tratar de eliminar los e intentar hacer las cosas de nuevo en marcha, o añadir un poco más de su propia para luchar contra ellos y obtener su cambio hecho. Puesto que él no podría saber exactamente por qué se añadieron esas reglas! Importantes, en primer lugar, que podría optar por la segunda opción por miedo a romper algo en otro lugar en el sitio que no es consciente de. Y así el ciclo vicioso comienza.
#Potencialmente buenos casos de uso: clases de utilidad
Por eso, cuando es el! Regla importante realmente útil y una buena idea? En mi opinión, clases de utilidad son un buen caso de uso.
Piense en "botones". Digamos que usted tiene un nombre de clase de .buttonen su sitio y cualquiera que sea el elemento que lo puso en, usted quiere que se vea como elemento de un botón: fuente específica, esquinas redondeadas, fondo y los bordes especial, lo que sea. Por lo que hace esto:
.button {
background: red;
color: white;
padding: 3px;
border-radius: 5px;
border: 1px solid black;
}
<a href="#" class="button">Do Thing</a>
La especificidad de esto es 0,0,1,0. Tan pronto como el elemento tiene otro selector efectuarla que tiene una especificidad más alta, es posible que tenga problemas de estilo. Me gusta:
<section id="content">
<p> text text blah <a href="#" class="button">Do Thing</a> </p>
</section>
#content a {
border-bottom: 1px dotted blue;
}
Ahora esos botones que tienen un diseño específico para tener un borde inferior azul punteada, que no es lo que desea. Aquí hay un violín de que algo suceda escenario.
No creo que esto es culpa de CSS descuidado. Es fácil y con frecuencia perfectamente válido para escribir un selector CSS que tiene un valor mayor especificidad que 0,0,1,0 y accidentalmente un botón de tornillos.
Para hacer su clase de botón súper robusta y no fácilmente burlado, puesto! Reglas importantes en los valores. Y tal vez incluso poner en unos pocos que el botón no es necesario, pero podría meter la pata.
.button {
background: red !important;
color: white !important;
padding: 3px !important;
border-radius: 5px !important;
border: 1px solid black !important;
text-decoration: none !important;
}
Cualquier otra "clase de utilidad" podría beneficiarse de ello. Piense en la popular clase "clearfix" , que utiliza pseudo elementos para hacer su cosa. Pseudo elementos son cada vez más popular y se usan para más cosas, por lo que sería posible tener un selector de anular los elementos pseudo CLEARfix y tienen el claro flotador falle. Es casi seguro que no se lo que quiere, por lo que añadir! Reglas importantes a los que podrían ser útiles.
Incluso he hablado con Nicole Sullivan, quien dijo que le agregará! Reglas importantes a las clases espaciadores que ella utiliza en su marco OOCSS , y ella es difícil de vender en esta idea, ya que su estilo de escritura CSS en realidad hace que escribir selectores con un alto especificidad de 0,0,1,0 tipo de raro.
#Hojas de estilo del usuario
Creo que los casos de uso y la razón original !importantexisten reglas es de estilo de usuario. Es decir, una hoja de estilo personalizada escrita de que usted le dice al navegador web para aplicar a cada página visitada. Esto es particularmente fácil de hacer en un navegador como Safari. Preferencias> Avanzado> Hoja de estilo y seleccione uno. En esta hoja de estilo de usuario, es posible hacer cosas como ocultar los comentarios , se esconden los anuncios , ni intente realizar sus propias mejoras de legibilidad por la configuración de colores y tamaños de fuentes.
Dado que estos estilos se aplican a todos los sitios web, no en sitios Web específicos de, tendrá que escribir selectores bastante genéricos que son los más propensos a aplicarse a todos los sitios, como el body { }. Pero al igual que un selector que tiene muy baja especificidad (0,0,0,1) y es probable que sea golpeado por una web propios estilos. Y así,! Reglas importantes que permiten escribir selectores genéricos, pero todavía tiene el poder de cambiar las cosas.
¿Qué es PHP?
PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de código abierto muy popular especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML.
Bien, pero ¿qué significa realmente? Un ejemplo nos aclarará las cosas:
Ejemplo #1 Un ejemplo introductorio
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<?php
echo "¡Hola, soy un script de PHP!";
?>
</body>
</html>
En lugar de usar muchos comandos para mostrar HTML (como en C o en Perl), las páginas de PHP contienen HTML con código incrustado que hace "algo" (en este caso, mostrar "¡Hola, soy un script de PHP!). El código de PHP está encerrado entre las etiquetas especiales de comienzo y final que permiten entrar y salir del "modo PHP".
Lo que distingue a PHP de algo del lado del cliente como Javascript es que el código es ejecutado en el servidor, generando HTML y enviándolo al cliente. El cliente recibirá el resultado de ejecutar el script, aunque no se sabrá el código subyacente que era. El servidor web puede ser configurado incluso para que procese todos los ficheros HTML con PHP, por lo que no hay manera de que los usuarios puedan saber qué se tiene debajo de la manga.
Lo mejor de utilizar PHP es su extrema simplicidad para el principiante, pero a su vez ofrece muchas características avanzadas para los programadores profesionales. No sienta miedo de leer la larga lista de características de PHP. En unas pocas horas podrá empezar a escribir sus primeros scripts.
Comunicación entre el cliente y el servidor con PHP:
1 - Tipeamos en la barra del navegador la dirección y el archivo a solicitar.
2 - El web browser (navegador) envía el mensaje a través de Internet a la computadora llamada www.lanacion.com solicitando la página (archivo) pagina1.php
3 - El web server (servidor web, que puede ser el Apache, IIS, etc.), recibe el mensaje y al ver que la extension es "php" solicita al interprete de PHP (que es otro programa que se ejecuta en el servidor web) que le envíe el archivo.
4 - El intérprete PHP lee desde el disco el archivo pagina1.php
5 - El intérprete PHP ejecuta los comandos contenidos en el archivo y eventualmente se comunica con un gestor de base de datos (ejemplos de ellos pueden ser MySql, Oracle, Informix, SQL Server, etc.)
6 - Luego de ejecutar el programa contenido en el archivo envía éste al servidor web.
7 - El servidor web envía la página al cliente que la había solicitado.
8 - El navegador muestra en pantalla el archivo que envió el servidor web.
Para aquellas personas que conocen otros lenguajes de programación (C - Java - C# - Pascal etc.) la salida de los resultados normalmente es la pantalla, en PHP la salida es la página HTML (luego ésta viaja por Internet y llega al cliente que la solicitó)
-BOOTSTRAP
¿Cuál es Bootstrap?
- Bootstrap es un marco frontal de extremo libre para el desarrollo web más rápido y más fácil
- Bootstrap incluye plantillas de diseño basadas en HTML y CSS para tipografía, formas, botones, tablas de navegación, modales, carruseles de imágenes y muchas otras, así como complementos opcionales de JavaScript
- Bootstrap también le da la posibilidad de crear fácilmente diseños que responden
¿Cuál es al diseño web?
Diseño web sensible es sobre la creación de sitios web que se ajustan automáticamente para quedar bien en todos los dispositivos, desde teléfonos pequeños y grandes escritorios.
Historia de arranque
Bootstrap fue desarrollado por Mark Otto y Jacob Thornton en Twitter, y lanzado como un producto de código abierto en agosto de 2011 en GitHub.
En junio de 2014 fue el proyecto Bootstrap No.1 en GitHub!
¿Por qué utilizar Bootstrap?
Ventajas de Bootstrap:
- Fácil de usar: Cualquier persona con conocimientos simplemente básicos de HTML y CSS puede comenzar a usar Bootstrap
- Características de respuesta: CSS sensible de Bootstrap ajusta a los teléfonos, tabletas y ordenadores de sobremesa
- Mobile-primer acercamiento: En Bootstrap 3, estilos móviles primer forman parte del marco básico
- Compatibilidad del navegador: Bootstrap es compatible con todos los navegadores modernos (Chrome, Firefox, Internet Explorer, Safari y Opera)
Dónde obtener Bootstrap?
Hay dos formas de iniciar el uso de rutina de carga en su propio sitio web.
Usted puede:
- Bootstrap descarga de getbootstrap.com
- Incluir Bootstrap de un CDN
descarga de Bootstrap
Si quiere descargar y anfitrión Bootstrap mismo, vaya a getbootstrap.com , y siga las instrucciones allí.
bootstrap CDN
Si no desea descargar y albergar Bootstrap a sí mismo, puede incluir desde un CDN (Content Delivery Network).
MaxCDN proporciona soporte para el CDN CSS y JavaScript de Bootstrap. También debe incluir jQuery:
MaxCDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Una de las ventajas de utilizar el Bootstrap CDN:
Muchos usuarios ya han descargado Bootstrap de MaxCDN se encuentra en otro sitio. Como resultado, se cargará desde la memoria caché cuando visitan su sitio, lo que conduce a la descarga más rápida. Además, la mayoría de CDN se asegurará de que una vez que un usuario solicita un archivo de ella, se sirve desde el servidor más cercano a ellos, que también conduce a la descarga más rápida.
Crear la primera página web con Bootstrap
1. Agregar el tipo de documento HTML 5
Bootstrap utiliza elementos HTML y propiedades CSS que requieren el tipo de documento HTML 5.
Siempre incluya el tipo de documento HTML 5 al comienzo de la página, junto con el atributo lang y el juego de caracteres correcto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 3 es móvil por primera
Bootstrap 3 está diseñado para ser sensible a los dispositivos móviles. -Mobile primeros estilos son parte del marco básico.
Para garantizar la prestación adecuada y una función de zoom táctil, agregue la siguiente <meta>etiqueta en el interior del<head>elemento:
<meta name="viewport" content="width=device-width, initial-scale=1">
La width=device-widthparte establece el ancho de la página para seguir la pantalla-anchura del dispositivo (que variará dependiendo del dispositivo).
La initial-scale=1parte fija el nivel de zoom inicial cuando la página se carga por primera vez por el navegador.
3. Envases
Bootstrap requiere también un elemento contenedor para envolver los contenidos del sitio.
Hay dos clases de contenedores para elegir:
- La
.containerclase proporciona una sensible recipiente ancho fijo
- La
.container-fluidclase proporciona un contenedor de ancho total , que abarca toda la anchura de la ventana gráfica
Nota: Los recipientes no son encajables (no se puede poner un recipiente dentro de otro contenedor).
Dos básico Bootstrap Páginas
El siguiente ejemplo muestra el código de una página básica Bootstrap (con un recipiente ancho fijo de respuesta):
Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
¿QUÉ ES JQUERY?
Para simplificar, podríamos decir que jQuery es un framework Javascript, pero quizás muchos de los lectores se preguntarán qué es un framework. Pues es un producto que sirve como base para la programación avanzada de aplicaciones, que aporta una serie de funciones o códigos para realizar tareas habituales. Por decirlo de otra manera, framework son unas librerías de código que contienen procesos o rutinas ya listos para usar. Los programadores utilizan los frameworks para no tener que desarrollar ellos mismos las tareas más básicas, puesto que en el propio framework ya hay implementaciones que están probadas, funcionan y no se necesitan volver a programar.
Nota:si no sabes lo que es Javascript seguramente no te interesará este artículo, pero puedes aprenderlo también en DesarrolloWeb.com: Qué es Javascript
Por ejemplo, en el caso que nos ocupa, jQuery es un framework para el lenguaje Javascript, luego será un producto que nos simplificará la vida para programar en este lenguaje. Como probablemente sabremos, cuando un desarrollador tiene que utilizar Javascript, generalmente tiene que preocuparse por hacer scripts compatibles con varios navegadores y para ello tiene que incorporar mucho código que lo único que hace es detectar el browser del usuario, para hacer una u otra cosa dependiendo de si es Internet Explorer, Firefox, Opera, etc. jQuery es donde más nos puede ayudar, puesto que implementa una serie de clases (de programación orientada a objetos) que nos permiten programar sin preocuparnos del navegador con el que nos está visitando el usuario, ya que funcionan de exacta forma en todas las plataformas más habituales.
Así pues, este framework Javascript, nos ofrece una infraestructura con la que tendremos mucha mayor facilidad para la creación de aplicaciones complejas del lado del cliente. Por ejemplo, con jQuery obtendremos ayuda en la creación de interfaces de usuario, efectos dinámicos, aplicaciones que hacen uso de Ajax, etc. Cuando programemos Javascript con jQuery tendremos a nuestra disposición una interfaz para programación que nos permitirá hacer cosas con el navegador que estemos seguros que funcionarán para todos nuestros visitantes. Simplemente debemos conocer las librerías del framework y programar utilizando las clases, sus propiedades y métodos para la consecución de nuestros objetivos.
Además, todas estas ventajas que sin duda son muy de agradecer, con jQuery las obtenemos de manera gratuita, ya que el framework tiene licencia para uso en cualquier tipo de plataforma, personal o comercial. Para ello simplemente tendremos que incluir en nuestras páginas un script Javascript que contiene el código de jQuery, que podemos descargar de la propia página web del producto y comenzar a utilizar el framework.
El archivo del framework ocupa unos 56 KB, lo que es bastante razonable y no retrasará mucho la carga de nuestra página (si nuestro servidor envía los datos comprimidos, lo que es bastante normal, el peso de jQuery será de unos 19 KB). Además, nuestro servidor lo enviará al cliente la primera vez que visite una página del sitio. En siguientes páginas el cliente ya tendrá el archivo del framework, por lo que no necesitará transferirlo y lo tomará de la caché. Con lo que la carga de la página sólo se verá afectada por el peso de este framework una vez por usuario. Las ventajas a la hora de desarrollo de las aplicaciones, así como las puertas que nos abre jQuery compensan extraordinariamente el peso del paquete.
Ventajas de jQuery con respecto a otras alternativas
Es importante comentar que jQuery no es el único framework que existe en el mercado. Existen varias soluciones similares que también funcionan muy bien, que básicamente nos sirven para hacer lo mismo. Como es normal, cada uno de los frameworks tiene sus ventajas e inconvenientes, pero jQuery es un producto con una aceptación por parte de los programadores muy buena y un grado de penetración en el mercado muy amplio, lo que hace suponer que es una de las mejores opciones. Además, es un producto serio, estable, bien documentado y con un gran equipo de desarrolladores a cargo de la mejora y actualización del framework. Otra cosa muy interesante es la dilatada comunidad de creadores de plugins o componentes, lo que hace fácil encontrar soluciones ya creadas en jQuery para implementar asuntos como interfaces de usuario, galerías, votaciones, efectos diversos, etc.
Uno de los competidores de jQuery, del que hemos publicado ya en DesarrolloWeb.com un amplio manual para programadores, es Mootools, que también posee ventajas similares. Os dejo el enlace al Manual de Mootools, que también puede ser interesante, porque seguramente lo tengamos explicado con mayor detalle que jQuery.
-W3.CSS
W3.CSS Colores
Los w3 color clases están inspirados en colores modernos utilizados en la comercialización, señales de tráfico, y las notas adhesivas:
W3.CSS Contenedores
El w3-contenedor clase es la más importante de las clases W3.CSS. Proporciona la igualdad como:
- márgenes comunes
- rellenos comunes
- alineaciones verticales comunes
- alineaciones horizontales comunes
- fuentes comunes
- Los colores más comunes
La clase W3-contenedores se utilizan típicamente con elementos contenedores HTML, como:
<Div>, <header>, <pie de página>, <artículo>, <section>, <blockquote>, <form>, y mucho más.
Esta es una cabecera
Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón. Este artículo es de color gris claro y el texto es de color marrón.
Se trata de un pie de página.
Paneles W3.CSS, Notas y Cotizaciones
El W3-panel de clase puede mostrar todo tipo de notas y citas:
Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.
Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.
Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.
Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.
"Que sea lo más simple posible, pero no más simple."
Albert Einstein
Alertas W3.CSS
El w3-panel de clase también se puede utilizar para todos los tipos de alertas:
×
¡Peligro!
Rojo indica a menudo una acción peligrosa o potencialmente negativo.
×
¡Advertencia!
Amarillo y naranja a menudo indica una advertencia de que puede ser que necesite atención.
×
¡Éxito!
Verde indica a menudo una acción exitosa o positivo.
×
Info!
Azul a menudo indica un cambio informativo neutral o acción.
-ANGULARJS
AngularJS es un marco de JavaScript . Puede ser agregado a una página HTML con una etiqueta <script>.
AngularJS extiende atributos HTML con las Directivas , y se une a los datos HTML con expresiones .
AngularJS es un framework JavaScript
AngularJS es un marco de JavaScript. Es una biblioteca escrito en JavaScript.
AngularJS se distribuye como un archivo JavaScript, y se puede agregar a una página web con una etiqueta de script:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
Extiende AngularJS HTML
AngularJS extiende HTML con NG-directivas .
El ng-app Directiva define una aplicación AngularJS.
El ng-modelo de directiva se une el valor de los controles HTML (input, select, textarea) para datos de aplicación.
El ng-bind Directiva se une datos de la aplicación a la vista HTML.
Ejemplo AngularJS
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Ejemplo explicó:
AngularJS se inicia automáticamente cuando la página web se ha cargado.
El ng-app directiva indica AngularJS que el elemento <div> es el "dueño" de un AngularJS aplicación .
El ng-modelo de directiva se une el valor del campo de entrada a la variable de la aplicación nombre .
El ng-bind Directiva se une el innerHTML del elemento <p> para la variable de aplicación nombre .
AngularJS Directivas
Como ya se ha visto, AngularJS directivas son atributos HTML con un ng prefijo.
El ng-init Directiva inicializa las variables de aplicación AngularJS.
Ejemplo AngularJS
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Alternativamente con HTML válido:
Ejemplo AngularJS
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Expresiones AngularJS
AngularJS expresiones se escriben entre llaves dobles: {{}} expresión .
AngularJS serán los datos de "salida" exactamente donde la expresión se escribe:
Ejemplo AngularJS
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS expresiones se unen los datos AngularJS a HTML de la misma manera como el ng-bind Directiva.
Ejemplo AngularJS
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Aplicaciones AngularJS
AngularJS módulos definen aplicaciones AngularJS.
AngularJS controladores controlan las aplicaciones AngularJS.
El ng-app Directiva define la aplicación, el ng-controlador directiva define el controlador.
Ejemplo AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});</script>
AngularJS módulos definen aplicaciones:
Módulo AngularJS
var app = angular.module('myApp', []);
AngularJS aplicaciones de control de los controladores:
controlador AngularJS
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
