Tecnologías para la web: HTML

HTML

¿Qué es HTML?

HTML es el lenguaje de marcado estándar para la creación de páginas Web.

HTML significa Hyper Text Markup Language
HTML describe la estructura de las páginas Web usando el marcado
Elementos HTML son los bloques de construcción de páginas HTML
Elementos HTML están representados por etiquetas
HTML etiquetas de la etiqueta de piezas de contenido, tales como "mesa" "la partida", "párrafo", y así sucesivamente
Los navegadores no muestran las etiquetas HTML, pero los utilizan para representar el contenido de la página

Un documento HTML simple

Ejemplo

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

Inténtalo tú mismo "

La <!DOCTYPE html>declaración indica que este documento sea HTML5.
El <html>elemento es el elemento raíz de una página HTML.
El <head>elemento contiene información de metadatos sobre el documento.
El <title>elemento especifica un título para el documento.
El <body>elemento contiene el contenido de la página visible.
El <h1>elemento define un gran encabezado.
El <p>elemento define un párrafo.

Etiquetas HTML

etiquetas HTML son los nombres de elementos rodeados por paréntesis angulares:

<Tagname> contenido va aquí ... </ nombre de etiqueta>

Etiquetas HTML normalmente vienen en pares como <p> y </ p>
La primera etiqueta en un par es la etiqueta de inicio, la segunda etiqueta es la etiqueta de cierre
La etiqueta final se escribe así la etiqueta de inicio, pero con una barra inclinada insertada antes de que el nombre de la etiqueta

Consejo: La etiqueta de inicio también se llama la etiqueta de apertura y la etiqueta final de la etiqueta de cierre .

Navegadores web

El propósito de un navegador web (Chrome, IE, Firefox, Safari) es leer los documentos HTML y mostrarlos.
El navegador no muestra las etiquetas HTML, pero los utiliza para determinar cómo mostrar el documento:

Estructura de páginas HTML

A continuación se muestra una visualización de una estructura de la página HTML:

<Html>

<Head>

<Title> Título de la página </ title>

</ Head>

<Body>

<H1> Este es un encabezado </ h1>

<P> Este es un párrafo. </ P>

<P> Este es otro párrafo. </ P>

</ Body>

</ Html>

Nota: Sólo el contenido dentro de la sección <body> (el área blanca arriba) se muestra en un navegador.

La <! DOCTYPE>

La <! DOCTYPE> representa el tipo de documento, y ayuda a los navegadores para mostrar páginas Web correctamente.
Sólo debe aparecer una vez, en la parte superior de la página (antes de cualquier etiqueta HTML).
La <! DOCTYPE> no distingue entre mayúsculas y minúsculas.
La declaración <! DOCTYPE> de HTML es:

<!DOCTYPE html>

Versiones de HTML

Desde los primeros días de la web, ha habido muchas versiones de HTML:

Version	Year
HTML	1991
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML	2000
HTML5	2014

CSS

¿Qué es CSS?

CSS significa C ascading S tyle S heets
CSS describe cómo los elementos HTML se van a mostrar en la pantalla, papel, o en otros medios
CSS ahorra mucho trabajo . Se puede controlar el diseño de varias páginas web a la vez
Estilo externas se almacenan en archivos CSS
CSS Demo - Una página HTML - Múltiples estilos!
Aquí vamos a mostrar una página HTML que se muestra con cuatro hojas de estilo diferentes.

¿Por qué usar CSS?

CSS se utiliza para definir estilos para sus páginas web, incluyendo el diseño, la disposición y las variaciones en la imagen para los diferentes dispositivos y tamaños de pantalla.

CSS resuelto un problema grande

HTML fue nunca la intención de contener etiquetas para dar formato a una página web!

HTML fue creado para describir el contenido de una página web, como:

<H1> Este es un encabezado </ h1>

<P> Este es un párrafo. </ P>

Cuando se añaden etiquetas como <font> y los atributos de color a la especificación HTML 3.2, que comenzó una pesadilla para los desarrolladores web. Desarrollo de grandes sitios web, en los que se añadieron las fuentes y el color de la información de cada página, se convirtió en un proceso largo y costoso.

Para resolver este problema, el World Wide Web Consortium (W3C) ha creado CSS.

CSS elimina el estilo de formato de la página HTML!

Sintaxis CSS

Un conjunto de reglas CSS consta de un selector y un bloque de declaración:

Los puntos selector para el elemento HTML que desea estilo.
El bloque de declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Una declaración CSS siempre termina con un punto y coma, y los bloques de declaraciones están rodeados por llaves.
En el siguiente ejemplo todos los elementos <p> estarán alineados-centro, con un color rojo texto:

Ejemplo

p {
    color: red;
    text-align: center;}

Inténtalo tú mismo "

Los selectores CSS

Selectores CSS se utilizan para "encontrar" (o seleccionar) elementos HTML en función de su nombre de elemento, de la identificación, clase, atributo, y mucho más.

El selector de elemento

El selector de elementos selecciona elementos basados en el nombre del elemento.

Puede seleccionar todos los elementos <p> en una página como esta (en este caso, todos los elementos <p> estarán alineados-centro, con un color rojo texto):

Ejemplo

p {
    text-align: center;
    color: red;}

Inténtalo tú mismo "

El selctor ID

El selector de ID utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.

La identificación de un elemento debe ser único dentro de una página, por lo que el selector de ID se utiliza para seleccionar un elemento único!

Para seleccionar un elemento con un ID específico, escribe un carácter almohadilla (#), seguido por el id del elemento.

La regla de estilo a continuación se aplica al elemento HTML con id = "párrafo1":

Ejemplo

p.center {
    text-align: center;
    color: red;}

Inténtalo tú mismo "

elementos HTML también puede referirse a más de una clase.

En el ejemplo siguiente, el elemento <p> se diseñó de acuerdo a class = "centro" y para class = "grande":

La agrupación de selectores

Si tiene elementos con las mismas definiciones de estilo, como este:

h1 {
    text-align: center;
    color: red;}

h2 {
    text-align: center;
    color: red;}

p {
    text-align: center;
    color: red;}

Será mejor al grupo de los selectores, para reducir al mínimo el código.

Para selectores de grupo, separar cada selector con una coma.

En el siguiente ejemplo, hemos agrupado los selectores del código anterior:

Ejemplo

h1, h2, p {
    text-align: center;
    color: red;}

Inténtalo tú mismo "

CSS Fondos

Las propiedades de fondo CSS se utilizan para definir los efectos de fondo para los elementos.

propiedades de fondo CSS:

color de fondo
imagen de fondo
background-repeat
background-attachment
background-position

Ejemplo

body {
background-color: lightblue;}
Inténtalo tú mismo "

¿Cuál es W3.CSS?

W3.CSS es un marco CSS moderno, con capacidad de respuesta integrada:
Más pequeño y más rápido que otros marcos de CSS.
Más fácil de aprender y fácil de usar que otros marcos de CSS.
Utiliza el estándar CSS (No librería jQuery o JavaScript).
Acelera y simplifica el desarrollo web.
Es compatible con el diseño de respuesta moderna (primer móvil) de forma predeterminada.
Facilite la igualdad CSS para todos los navegadores. Chrome, Firefox, IE, Safari, y mucho más.
Facilite la igualdad CSS para todos los dispositivos. PC, ordenador portátil, tablet y móvil:

Fácil de usar

Ejemplo

<div class="w3-container w3-teal">

  <h1>My Header</h1>

</div>

<img src="img_car.jpg" alt="Car">

<div class="w3-container">

  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>

</div>

<div class="w3-container w3-teal">

  <p>My Footer</p>

</div>

Inténtalo tú mismo "

Cómo

Para utilizar W3.CSS en su sitio web, sólo tiene que añadir un enlace a "w3.css" de sus páginas web:

Ejemplo

<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">

Inténtalo tú mismo "

O descargar w3.css de w3css_downloads y añadir un enlace a una carpeta en su propio sitio web:

Ejemplo

<!DOCTYPE html>

<html>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/lib/w3.css">

Inténtalo tú mismo "

Los nombres de color

Con CSS, colores se pueden cambiar mediante el uso de nombres de colores:

Ejemplo

Color	Name
	Red
	Orange
	Yellow
	Cyan
	Blue

Inténtalo tú mismo "

Los valores de color CSS

Con CSS, los colores se pueden especificar de diferentes maneras:

Por nombres de colores

Como valores RGB

Como valores hexadecimales

Como los valores HSL (CSS3)

Como valores de HWB (CSS4)

Colores RGB

Valores de color RGB son compatibles con todos los navegadores.

Un valor de color RGB se especifica con: RGB (rojo, verde, azul).

Cada parámetro (rojo, verde, y azul) define la intensidad del color como un número entero entre 0 y 255.

Por ejemplo, rgb (0,0,255) se representa como azul, azul porque el parámetro se establece en su valor más alto (255) y los otros se establece en 0.

Ejemplo

ColorRGBColor
rgb(255,0,0)Red
rgb(0,255,0)Green
rgb(0,0,255)Blue

Color	RGB	Color
	rgb(255,0,0)	Red
	rgb(0,255,0)	Green
	rgb(0,0,255)	Blue

Inténtalo tú mismo "

Tonos de gris a menudo se definen mediante valores iguales para todas las 3 fuentes de luz:

Ejemplo

ColorRGBColor
rgb(0,0,0)Black
rgb(128,128,128)Gray
rgb(255,255,255)White

Color	RGB	Color
	rgb(0,0,0)	Black
	rgb(128,128,128)	Gray
	rgb(255,255,255)	White

Inténtalo tú mismo "

Colores hexadecimales

valores de color hexadecimales también son compatibles con todos los navegadores.

Un color hexadecimal se especifica con: #RRGGBB.

RR (rojo), GG (verde) y BB (azul) son números enteros hexadecimal entre 00 y FF que especifican la intensidad del color.

Por ejemplo, # 0000FF se muestra como azul, debido a que el componente azul se establece en su valor más alto (FF) y los otros se establece en 00.

Ejemplo

ColorHEXRGBColor
#FF0000rgb(255,0,0)Red
#00FF00rgb(0,255,0)Green
#0000FFrgb(0,0,255)Blue

HEX	RGB	Color
#FF0000	rgb(255,0,0)	Red
#00FF00	rgb(0,255,0)	Green
#0000FF	rgb(0,0,255)	Blue

Inténtalo tú mismo "

Tonos de gris a menudo se definen mediante valores iguales para todas las 3 fuentes de luz:

Ejemplo

ColorHEXRGBColor
#000000rgb(0,0,0)Black
#808080rgb(128,128,128)Gray
#FFFFFFrgb(255,255,255)White

HEX	RGB	Color
#000000	rgb(0,0,0)	Black
#808080	rgb(128,128,128)	Gray
#FFFFFF	rgb(255,255,255)	White

Inténtalo tú mismo "

Los nombres de color

CSS es compatible con 140 nombres de colores estándar.

En el siguiente capítulo se encuentra una lista por orden alfabético de los nombres de colores completa con valores hexadecimales:

Color Name	Hex	Color
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4

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

¿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

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>

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>

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

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>

Inténtalo tú mismo "

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-fluid">

  <h1>My First Bootstrap Page</h1>

  <p>This is some text.</p>

</div>

</body>

</html>

Inténtalo tú mismo "

Iconos

Cómo agregar iconos

Para insertar un icono, añadir el nombre de la clase icono a cualquier elemento HTML en línea.

Las <i>y <span>los elementos son ampliamente utilizados para añadir iconos.

Todos los iconos en las librerías de iconos abajo, son iconos vectoriales escalables que pueden ser personalizados con CSS (tamaño, color, sombra, etc.)

Los iconos impresionantes de fuente

Para utilizar los iconos impresionantes fuente, añadir la siguiente línea dentro de la <head>sección de la página HTML:

Nota: No se requiere ninguna descarga o instalación!

Ejemplo

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>

<i class="fa fa-cloud"></i>

<i class="fa fa-heart"></i>

<i class="fa fa-car"></i>

<i class="fa fa-file"></i>

<i class="fa fa-bars"></i>

</body>

</html>

Inténtalo tú mismo "

Los iconos de archivos de inicio

Para utilizar las glyphicons Bootstrap, agregue la siguiente línea dentro de la <head>sección de la página HTML:

Nota: No se requiere ninguna descarga o instalación!

Ejemplo

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<i class="glyphicon glyphicon-cloud"></i>

<i class="glyphicon glyphicon-remove"></i>

<i class="glyphicon glyphicon-user"></i>

<i class="glyphicon glyphicon-envelope"></i>

<i class="glyphicon glyphicon-thumbs-up"></i>

</body>

</html>

Inténtalo tú mismo "

Gráficos HTML

Mapas de Google

SVG

El elemento HTML <svg> permite gráficos de vectores basados en HTML:

HTML Canvas

Los HTML elemento <canvas> se pueden utilizar los gráficos de dibujo en una página web:

El gráfico a continuación se crea con <canvas>:

miércoles, 15 de febrero de 2017

HTML

HTML

¿Qué es HTML?

Un documento HTML simple

Ejemplo

Etiquetas HTML

Navegadores web

Estructura de páginas HTML

La <! DOCTYPE>

Versiones de HTML

CSS

¿Qué es CSS?

¿Por qué usar CSS?

Sintaxis CSS

Ejemplo

Los selectores CSS

El selector de elemento

Ejemplo

El selctor ID

Ejemplo

La agrupación de selectores

Ejemplo

CSS Fondos

Ejemplo

¿Cuál es W3.CSS?

Fácil de usar

Ejemplo

Cómo

Ejemplo

Ejemplo

Los nombres de color

Ejemplo

Los valores de color CSS

Colores RGB

Ejemplo

Ejemplo

Colores hexadecimales

Ejemplo

Ejemplo

Los nombres de color

Bootstrap

¿Por qué utilizar Bootstrap?

Dónde obtener Bootstrap?

Bootstrap CDN

MaxCDN:

Crear la primera página web con Bootstrap

Envases

Ejemplo

Ejemplo

Iconos

Cómo agregar iconos

Ejemplo

Los iconos de archivos de inicio

Ejemplo

Gráficos HTML

SVG

HTML Canvas

No hay comentarios:

Publicar un comentario