Que es HTML?, Es un lenguaje utilizado en el diseño y desarrollo de Páginas Web. Es la base de la construcción en el mundo Web. Por medio del HTML podemos maquetear o marcar cada una de las secciones que queremos que tenga la página que estemos construyendo y de esta forma definir su presentación. HTML se complementa perfectamente con las Hojas de Estilo en Cascada o CSS, lenguaje por medio del cual podemos dar diseños y estilos profesionales a nuestras creaciones. Estos dos lenguajes serán los objetivos de este Curso de HTML y CSS básico.
HTML Y CSS son esenciales para quienes queremos entrar en el mundo del desarrollo Web, es la puerta de entrada a este mundo.
En Este curso de HTML y CSS básico vamos a adquirir los conocimientos esenciales para crear un pagina Web utilizando HTML y CSS.
- Conoceremos las etiquetas de HTML y HTML5 más comunes y utilizadas.
- Aprenderemos a utilizar estilos CSS y CSS3 para dar diseños profesionales a nuestras creaciones.
- Crearemos secciones o componentes muy utilizados en el diseño de páginas Web por medio de ejemplos y ejercicios prácticos.
Bienvenido, esperamos que te sea de mucha utilidad!
Introducción al curso de HTML y CSS
Disfruta este vídeo introductorio donde te explicaremos en que consiste este curso y que herramientas vamos a utilizar para desarrollar nuestros ejemplos y ejercicios.
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Primeros Pasos: Elementos Raíz y Head
Cunado trabajamos en una página Web, seguramente vamos a necesitar imágenes, estilos CSS, animaciones, entre otros recursos los cuales son útiles para dar diseños elegantes y atractivos a nuestras creaciones. Todos estos recursos los debemos disponer en carpetas las cuales hacen parte del proyecto en el que estemos trabajando, es por eso que debemos crear una estructura adecuada de carpetas y archivos.
En el siguiente vídeo vamos a dar inicio a nuestro proyecto de Página Web en HTML y CSS, veremos como disponer fácilmente todos nuestros archivos del proyecto en una estructura de carpetas sencilla pero adecuada, y de paso empezamos aprendiendo los primeros elementos o etiquetas del HTML.
Veremos:
<!doctype html>: Define que el documento esta bajo el estándar de HTML 5
<html>: Representa la raíz de un documento HTML o XHTML.
<head>: Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo.
<title>: Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada.
<link>: Usada para enlazar JavaScript y CSS externos con el documento HTML actual.
<meta>: Define los metadatos que no pueden ser definidos usando otro elemento HTML.
<script>: Define ya sea un script interno o un enlace hacia un script externo. El lenguaje de programación es JavaScript.
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Maqueteado de Secciones Principales
El Estándar HTML5 nos trae diversas ventajas y mejoras frente a los estándares anteriores. Una de estas mejoras es la incorporación de nuevas etiquetas semánticas que nos permiten realizar el marcado lógico y claro de las secciones principales que componen una página Web.
Es importante tener claro la función especifica de estas nuevas etiquetas por eso en el siguiente vídeo de este Curso de HTML y CSS básico te enseñaremos a utilizarlas. No te lo pierdas.
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Colocando Contenidos
Ya tenemos el marcado principal de la Página, es hora de colocar los contenidos visibles en cada sección, es decir, colocar las imágenes, los textos, los vídeos, los enlaces que los usuarios podrán ver al ingresar a la página.
Contenidos del Header o Encabezado
En el siguiente vídeo de este Curso de HTML y CSS básico veremos cómo colocar el logotipo, nombre de la compañía y enlaces en el encabezado de la página, no te lo pierdas.
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Contenidos en la Sección Principal
A continuación vamos colocar el HTML necesario en la sección ‘main’ (principal) de nuestra página. Recordemos que en esta sección debe ir el contenido principal o articulo con el tema central de la página Web.
No te pierdas el próximo vídeo de este curso, porque veremos varias etiquetas interesantes de HTML.
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Últimos Contenidos – ASIDE y FOOTER
En este punto hace falta colocar en la página que estamos construyendo los contenidos en el menú lateral ‘aside’, en el pie de página ‘footer’ y en dos sección llamadas mejores clientes y redes sociales.
Estas cuatro secciones son sencillas, están basadas en títulos, texto e imágenes, por lo cual podemos verlas claramente en un solo vídeo tutorial y de esta forma ya empezar ahora si a darle una forma elegante a nuestra página por medio de los estilos CSS.
En este vídeo insertaremos rápidamente los contenidos de las cuatros secciones que faltan. No te lo pierdas y prepárate para comenzar con los CSS.
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Introducción a CSS
Amigos, CSS (Hojas de Estilo en Cascada) es el código que vamos a utilizar para dar estilos visuales y atractivos a las páginas Web que construimos utilizando HTML.
A lo largo de este Curso de HTML y CSS Básico hemos estado construyendo una página web, ya logramos por medio de HTML incluir todas las secciones que componen la página e incluimos los contenidos que verá el usuario en cada una de ellas. Pero visualmente tenemos un documento muy plano y poco atractivo.
Entonces es hora de concentrarnos en lo visual y para ello tenemos un gran aliando – Los CSS –. En el siguiente vídeo se presentará una introducción a este lenguaje de diseño gráfico, Aprenderemos a utilizarlo y con esto estaremos preparados para ahora si darle un diseño interesante a la página Web que estamos construyendo en este curso. No te lo pierdas.
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Aplicando Estilos CSS a la Página
Ya tenemos los contenidos en la página Web que estamos construyendo, además ya sabemos como se aplican estilos CSS, pues entonces es hora de comenzar a aplicar estilos profesionales a la página Web.
Vamos a ir paso a paso colocando los estilos CSS desde la cabecera de la página hasta llegar al Footer o pie de la página, con cada vídeo iremos aprendiendo muchas cosas, al final estaremos en capacidad de entender y construir páginas interesantes utilizando HTML y CSS.
Aplicando Estilos CSS a la Cabecera
En el siguiente vídeo le daremos forma a la cabecera de la página que estamos construyendo en este Curso de HTML y CSS Básico. Conoceremos propiedades CSS cómo:
box-sizing
float
line-height
Y muchas másVeremos como se debe centrar textos horizontal y verticalmente dentro de una etiqueta. (Esto será de gran ayuda). Además conoceremos muchas propiedades de CSS más, No te pierdas el siguiente vídeo:
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Aplicando Estilos al Contenido Principal
Continuamos aplicando los Estilos CSS a la página, es el turno de darle forma al contenido principal, donde encontraremos:
Títulos h1, h2, h3...
Párrafos
Vídeos
Tablas HTML
Y muchas etiquetas HTML más...
Anímate, no te pierdas el próximo vídeo.
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Aplicando Estilos al Aside o Menú Lateral
Continuamos aplicando estilos a la página, en esta oportunidad le toca el turno al Aside o menú lateral de la página.
Aplicar estilos a esta sección será muy sencillo y rápido, pero aprenderemos la importancia de generar código estructurado y reutilizable. No te pierdas el siguiente vídeo:
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Aplicando Estilos a las Últimas Secciones
Solo nos queda aplicar estilos a la sección de Clientes de la Semana, Redes Sociales y Footer de la página, con los conocimientos que hemos adquirido será supremamente fácil esta tarea.
En el siguiente vídeo vamos a terminar de aplicar estilos a la página y además aprenderemos las características esenciales de la propiedad display de de CSS.
Display es una propiedad importante en CSS porque es la que define como se deben representar los elementos o etiquetas HTML en una página Web. Aprenderemos como representar elementos en (1). Bloque, (2). En Línea, o (3). Bloque en Línea que es una forma de representación de elementos HTML que toma las ventajas de la representación en bloque y la representación en linea en una sola.
No te pierdas el siguiente vídeo, Anímate:
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Formularios HTML
Si queremos construir un Sitio Web con páginas o secciones donde el usuario o lector de la página pueda interactuar con la página muy seguramente vas a necesitar integra formularios HTML en tu sitio.
Los formularios HTML son uno de los puntos principales de interacción entre un usuario y un sitio web o aplicación. Ellos permiten a los usuarios enviar información a un sitio web.
Un formulario HTML está hecho de uno o más campos de texto (de una linea o multilínea), cajas de selección, botones, checkboxes, o botones de radio. La mayoría del tiempo, estos campos están junto a un label que describe su propósito.
En el siguiente vídeo aprenderás lo necesario para estar en capacidad de integrar formularios HTML en tu sitio Web, Anímate y aprende con el siguiente vídeo:
Amigo! Recuerda ver estos vídeos en PANTALLA COMPLETA y preferiblemente en formato HD para ver correctamente los detalles, Gracias.
Conclusión
Amigos, Hemos llegado al final de este curso de HTML y CSS básico. En este punto ya tenemos los conocimientos fundamentales y conocemos las principales características de HTML y CSS, suficientes para construir nuestra primera página Web con un diseño estático y muy profesional.
Con este curso cada uno de ustedes ha abierto la puerta hacia el desarrollo Web, queda muchas cosas por empezar a aprender, pero con dedicación, práctica y disciplina será un camino muy entretenido y provechoso.
Los invito a cada uno de ustedes entusiastas del desarrollo Web a que continúen aprendiendo más etiquetas HTML y propiedades CSS.
Pronto estaré publicando nuevos cursos y vídeo tutoriales sobre desarrollo Web, por lo tanto si lo desean suscríbanse a mi canal de Youtube para que estén al tanto de los nuevos contenidos que estaré publicando.
Qué sigue ahora?
Amigos, el siguiente paso en el desarrollo Web, es aprender a crear e integrar contenidos creados con JAVASCRIPT en nuestras paginas Web.
Este Lenguaje de programación JAVASCRIPT fue creado principalmente para darle gran dinamismo e interactividad a las páginas Web que construimos y de esta forma hacerlas más llamativas ante los usuarios que la visitan.
Aquí en Videojuegos y Desarrollo tenemos un curso para que aprendan a integrar paso a paso JAVASCRIPT en sus páginas WEB. si alguno de ustedes está interesado en realizar el curso aquí encuentran el enlace: Curso básico de JAVASCRIPT desde Cero. (Recuerden que nuestros cursos son completamente gratis).
Videojuegos y Desarrollo les desea un feliz y continuo aprendizaje. Chao Amigos.
Explora más cursos en:🟢 www.videojuegosydesarrollo.com
🔵 Página en Facebook
