Introducción al HTML y CSS
4.7 (13 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.
427 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Introducción al HTML y CSS to your Wishlist.

Add to Wishlist

Introducción al HTML y CSS

Curso básico para construir páginas web con HTML y CSS
4.7 (13 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.
427 students enrolled
Last updated 12/2013
Spanish
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 7.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • El objetivo del presente curso es que aprendas a realizar tu página con estilos en cascada.
View Curriculum
Requirements
  • Contar con una computadora con procesador de texto y un navegador.
  • Tener conocimientos básicos de computación.
Description

¡Curso completamente descargable!

Tanto el lenguaje HTML como los estilos en cascada, CSS, son fundamentales para la creación de páginas web en la actualidad. Para el presente curso, no es necesario que seas experto en programación. Con que tengas una computadora con un editor de textos y una navegador (y la mayoría los tiene), puedes iniciar a aprender estos fundamentales lenguajes.

Aquí aprenderemos desde las etiquetas básicas, las principales reglas de estilo en cascada, los selectores, unidades y validadores CSS. También analizaremos los formatos de márgenes y el modelo de caja. La navegación y formularios, asi como el flujo y posicionamiento de elementos.

SECCIÓN 1 ¿De qué está hecha la web?

  • Breve historia de Internet
  • Breve historia del HTML


SECCIÓN 2 Principios de HTML

  • ¿Qué es una etiqueta?
  • La directiva DOCTYPE
  • Los metadatos
  • Comentarios en HTML


SECCIÓN 3 Las principales etiquetas de HTML

  • El manejo de párrafos con la etiqueta de párrafo < p >
  • Los encabezados, etiquetas h1, h2, h3, h4, h5 y h6
  • Enfatizar un enunciado: strong y em
  • Listas ordenadas y sin orden
  • Listas de definición
  • Hipervínculos
  • Navegar dentro de la misma página: anclas
  • Manejo de imágenes, etiqueta img
  • Tablas en HTML
  • Otras etiquetas
  • Divisiones, la etiqueta < div >


SECCIÓN 4 Formatos y colores con los estilos en cascada

  • Principios de los estilos es cascada
  • Manejo de colores con Estilos en cascada
  • Manejo de fuentes con CSS
  • Modificar los links o hipertextos
  • Lugares donde se pueden escribir estilos y sus reglas


SECCIÓN 5 Selectores y unidades de los estilos en cascada

  • Los selectores básicos
  • Selectores compuestos, el !important y el selector global
  • Unidades flexibles y fijas en CSS
  • Validar estilos en cascada


SECCIÓN 6 El modelo de caja

  • Los márgenes
  • Los bordes
  • El padding
  • La propiedad auto
  • El fondo de la caja: la propiedad background


SECCIÓN 7 Navegación e impresión con Estilos en cascada

  • Crear un menú de navegación con CSS
  • Simular tabuladores con CSS
  • Modo de impresión


SECCIÓN 8 Posicionamiento y flujo

  • El flujo natural de las cajas
  • Hacer que las cajas floten
  • Posicionamiento absoluto
  • Posición fija:fixed


SECCIÓN 9 Formato de páginas con CSS

  • Formatos de páginas fijos
  • Introducir los contenidos y los estilos en formato fijos
  • Formatos flexibles
  • Tamaños máximos y mínimos
  • Formatos responsivos para teléfonos inteligentes y tabletas
  • Conclusión
Who is the target audience?
  • Este curso lo puede tomar cualquier persona que tenga una computadora con un editor de texto y un navegador.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 45 Lectures Collapse All 45 Lectures 07:39:22
+
¿De qué está hecha la web?
2 Lectures 15:21
El Internet es el invento del siglo. No podemos vivir sin él. Estaríamos prácticamente "incomunicados"!!! Aquí mostramos una breve historia.
Preview 08:55

Saber la evolución de nuestra herramienta de trabajo siempre es útil, aunque el HTML es un lenguaje relativamente reciente.
Breve historia del HTML
06:26
+
Principios de HTML
4 Lectures 35:13
El centro del HTML son las etiquetas. Es fundamental entender qué es una etiqueta para dominar este lenguaje.
Preview 13:06

La directiva DOCTYPE le indica al navegador las reglas que seguirá para interpretar las etiquetas HTML. Si no existe, el navegador las interpretará

La directiva DOCTYPE
07:05

De acuerdo con la especificación de HTML 4, los elementos META se utilizan para especificar información sobre el propio documento (de ahí su nombre). La sintaxis del elemento META es la siguiente:



o bien:



Los elementos META forman parte del contenido del elemento HEAD del documento.
Los metadatos
07:26

Una práctica muy importante en cualquier lenguaje de programación es el de comentar nuestro código, ya que al transcurrir el tiempo, ni nosotros mismos sabemos lo que hicimos (creame, pasa muy seguido).

Los comentarios no son tomados en cuenta con por los navegadores: unicamente sirven para los programadores. Sin embargo, los comentarios en HTML si los puede ver dentro del código. Para hacer comentarios necesitamos las llaves
Comentarios en HTML
07:36
+
Las principales etiquetas de HTML
11 Lectures 01:39:30

La etiqueta

se utiliza para representar un párrafo. La etiqueta p es soportada por todos los navegadores (gracias a Dios).

Preview 16:23

La etiqueta de encabezado H1 y sus hermanas menores son una de las herramientas más potentes con las que contamos a nivel de SEO para decirle a los buscadores de qué va el contenido de nuestra página web. Sin embargo, y aunque su concepto es en origen sencillo, darles un uso adecuado no es algo conocido por todos.

Las etiquetas de encabezados han tenido una importancia vital en el posicionamiento en buscadores desde sus orígenes, y con pequeñas variaciones en el peso de su influencia se han ido manteniendo en el tiempo como algo que definitivamente hay que cuidar, desde la fase de maquetación del diseño web hasta la creación de contenidos para un portal en funcionamiento. Estas nociones básicas deben ser pues conocidas por diseñadores, programadores y personas encargadas de la redacción de texto para web.
Los encabezados, etiquetas h1, h2, h3, h4, h5 y h6
05:14

Esta etiqueta se usa para reforzar el texto en html. El caso es que prácticamente todos los navegadores la interpretan de la misma forma poniendo el texto que las engloba en negrita, ¿entonces cual uso?.
Hay muchos webmaster que se inclinan por la etiqueta porque afirman que es mejor para el posicionamiento ya que google las interpreta como palabras clave, otros nos comentan que además aportan semántica al contenido a través de CSS y por tanto mejor accesibilidad.
Enfatizar un enunciado: strong y em
06:31

Una lista permite organizar la totalidad o parte de un documento HTML estructurándolo de la forma más clara posible para hacerlo más perceptible al lector. Las listas se utilizan para dividir el documento asi como para efectuar numeraciones de objetos, pero la diferencia con los procesadores de texto es que no permite la numeración automática para niveles jerárquicos diferentes:

  Ficheros HTML
  Ficheros de texto
  Ficheros de imágenes

es posible automáticamente...    

  Ficheros de sonido
  1.1 Ficheros WAV
  Ficheros de imágenes
  2.1 Ficheros GIF
  2.2 Ficheros BMP

  no es posible automáticamente...
Listas ordenadas y sin orden
08:02

El uso de las listas de difinición están cayendo en desuso. El funcionamiento de las listas de definición es similar al de un diccionario, por un lado el término y por el otro la definición de ese término o palabra. La etiqueta

crea la lista de definición y las etiquetas
y
definen respectivamente el término y la descripción de cada elemento de la lista.

<dl>
  <dt>Byte</dt>
  <dd>Conjunto de 8 bits con significado</dd>
Listas de definición
02:30

Dentro de una página web, los hipervínculos son las palabras, párrafos o imágenes que al darles click, te llevarán a otro lugar, ya sea a otra página, o a una sección en específico dentro de la misma página; desempeñan una función muy útil, por ello saber cómo aprender a programar hipervínculos a la hora de crear un sitio web es muy importante. 

Otra de las características que tienen los hipervínculos es que al pasar el cursor sobre ellos, el ícono del cursor cambia y se convierte en una mano.
Hipervínculos
05:14

Sirve para definir posiciones dentro de un documento y se puede usar como destino de hiperenlaces. Para crear un ancla (anchor) se procede de la siguiente manera:

Texto del elemento ancla

Visualmente est elemento no tiene niun efecto, pero si lo tiene en forma interactiva con el usuario. Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:

Texto del hiperenlace

De esta manera accederemos a la posición donde hayamos puesto el ancla Por ejemplo al final de este documento hemos puesto la siguiente ancla:

Este es el final del documento!!

Y para acceder a esa posición usamos el siguiente hipernlace:

Vamos al final del documento
Navegar dentro de la misma página: anclas
11:21

La etiqueta te servirá para situar imágenes en una página. Es una etiqueta "verdadera", pues no tiene etiqueta de cierre:

La etiqueta requiere un origen de datos obligatorio dado por el atributo SRC=. Indica la imagen en cuestión:



Tan sólo el código anterior es necesario para añadir una imagen a tu página, mostrando la imagen situada en el mismo directorio del documento HTML.
Manejo de imágenes, etiqueta img
11:04

Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve escencial.

En las próximas líneas intentaremos cubrir todas las características de las tablas para estar listos para utilizarlas cuando se necesite.

Tablas en HTML
08:49

Dentro de HTML tendremos otras etiquetas, por ejemplo:


Para un salto de linea

Dibuja una línea
una dirección física

Etcétera
Otras etiquetas
13:34

La etiqueta

se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.

El uso de la etiqueta div es sencillo. Observemos este ejemplo:


Índice


Página principal

Material multimedia

Autores

Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de contenidos. Visualmente la etiqueta no provoca ningún cambio, pero en la estructura interna del documento hemos aplicado una división muy importante. La figura muestra el texto del ejemplo; no hay ninguna diferencia visible.

Divisiones, la etiqueta < div >
10:48
+
Formatos y colores con los estilos en cascada
5 Lectures 52:16

Las hojas de estilo en cascada (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentos XML, incluyendo SVG y XUL.

La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "