Source: https://codingvideos.net/curso-html-para-principiantes/
Timestamp: 2019-08-18 01:50:13+00:00

Document:
Curso HTML para Principiantes | Coding Videos
00:00 hey covers bienvenidos al curso de html
00:02 uno de los lenguajes fundamentales de la
00:05 web si estás interesado en crear
00:07 aplicaciones web páginas web o sitios
00:09 web de manera en general html te
00:11 permitirá lograr estos objetivos sitios
00:13 web que visitamos a diario como blogs
00:15 sitios web de noticias tiendas virtuales
00:17 perfiles de redes sociales y muchos
00:20 otros sitios más utilizan este lenguaje
00:22 para poder ser creados utilizan otras
00:25 tecnologías más de hecho pero el
00:27 aprender html es un buen inicio para
00:29 poder llegar a crear estos tipos de
00:31 sitios web y empezar a hacer un
00:32 desarrollador web así que si estás
00:35 interesado en ser un desarrollador web y
00:37 conocer el lenguaje que da vida a los
00:39 sitios web que visitamos a diario pues
00:41 vamos a empezar
00:45 antes de empezar voy a mencionar un poco
00:47 los requerimientos y consideraciones que
00:49 he tenido al momento de grabar este
00:50 vídeo uno de los requerimientos
00:52 principales para poder dominar html es
00:55 ninguno en realidad html es uno de los
00:58 primeros temas o primeros conceptos o
01:01 tecnologías que debes aprender para
01:02 poder ser un desarrollador web esto
01:04 quiere decir que no hay un tema previo
01:06 antes de html o no hay algo importante
01:09 aparte de html para poder empezar es un
01:12 buen inicio si quiere ser un
01:13 desarrollador web
01:15 esto es para iniciantes ahora para
01:17 aprender html yo te recomendaría que
01:19 también investigues mucho más por tu
01:21 cuenta de otros temas como por ejemplo
01:23 cómo funciona la web cómo funciona un
01:26 navegador cómo funciona internet todo
01:28 esto al final te va a ayudar a poder
01:29 entender mucho mejor cómo funcionan las
01:31 aplicaciones web recuerda que html es
01:33 tan solo un inicio no tan sólo
01:35 aprendiendo html vas a poder crear
01:37 aplicaciones web como facebook o youtube
01:39 pero es un buen inicio porque tanto las
01:41 aplicaciones grandes y pequeñas utilicen
01:44 este lenguaje así que si o si tienes que
01:46 aprender este lenguaje si quieres ser un
01:48 buen desarrollador web
01:50 en cuanto a memorizar algunas cosas vas
01:53 a tener que hacerlo porque html es un
01:56 lenguaje piénsalo de esa manera es como
01:58 aprender un lenguaje nuevo un lenguaje
01:59 natural nuevo y cuando aprendemos un
02:01 lenguaje nuevo tenemos que aprender
02:03 vocabulario y html también es un
02:05 lenguaje pero es un lenguaje para poder
02:07 crear páginas y sitios web y vas a tener
02:10 que memorizar cosas pero no es algo
02:12 complicado y de hecho es uno de los
02:13 lenguajes más sencillos de aprender de
02:16 hecho hay muchas personas que cuando
02:17 aprenden programación web o aprenden a
02:19 crear aplicaciones web html es la
02:22 tecnología más fácil que pueden aprender
02:24 aparte de esto en cuanto a las
02:27 consideraciones que ha tenido para este
02:28 vídeo
02:29 yo te recomiendo de que sigas mis pasos
02:32 que no solamente veas lo que hago sino
02:34 que veas y luego hagas es decir hay
02:37 muchas personas que ven cursos de
02:39 programación y tan solo los ven y lo
02:40 entienden y está bien lo han entendido
02:43 pero no se te va a grabar nada o no vas
02:45 a aprender o no vas a poder hacerlo
02:47 luego desde cero sin ver un vídeo es
02:50 mejor que mires mi vídeo y luego
02:52 intentes escribir tu mismo lo que estoy
02:55 haciendo esto te va a ayudar
02:57 a memorizar las cosas y que luego sea
02:59 mucho más sencillo para ti así que no
03:01 copies ips el código tampoco y trata de
03:04 entenderlo principalmente trata de ir
03:06 escribiendo y entendiendo qué es lo que
03:08 estás haciendo esto al inicio parece
03:10 complicado pero vas a ver que a medida
03:12 que lo repitas va a ser mucho más
03:14 sencillo para ti también te recomiendo
03:16 obtener ayuda sin caso o tienes alguna
03:18 dificultad en algún tema o te trabas en
03:21 algún punto hay una comunidad en
03:23 dischord que creado hace poco en donde
03:25 hay muchas personas allí allí hay una
03:27 sección específica para html así que
03:30 siéntete libre de dejar tus dudas todos
03:31 estamos aprendiendo al fin y al cabo
03:33 entonces siente libre de dejar cualquier
03:35 duda sea complicada o simple allí hay
03:38 muchas personas que pueden contestarte y
03:40 a veces también paso muy seguido por
03:41 allí y si veo tu pregunta trataré de
03:43 responderla sé paciente en cuatro cursos
03:45 yo sé que es un vídeo bastante largo
03:47 pero es mejor tener los conceptos claros
03:49 y luego vamos a consolidar nuestros
03:51 temas que hemos aprendido utilizando un
03:54 ejemplo práctico y va a crearte mucho
03:56 más claro html además recuerda que esto
03:59 es tan sólo una de las tecnologías
04:01 principales de toda la web hay una
04:02 tecnología que se
04:04 con html css pero lo vamos a hablar en
04:06 el curso cuando estemos escribiendo el
04:08 código así que vamos a empezar voy a
04:11 empezar contestando una pregunta muy
04:12 típica de las personas que empiezan a
04:14 aprender html y le pregunté es porque
04:17 necesito aprender html y para hacerlo
04:20 voy a utilizar una serie de puntos el
04:22 primer punto es el siguiente el empezar
04:24 a aprender html te va a ayudar en el
04:26 campo del desarrollo web el desarrollo
04:28 web en sí es un campo bastante grande
04:30 hay muchos temas y una enorme cantidad
04:32 de profesionales que se dedican a
04:34 aprender estos temas y algunos pueden
04:36 ser complicados otros muy sencillos pero
04:38 son muchos temas al fin y al cabo el
04:40 aprender html es un buen inicio porque
04:42 es un tema principal y sobre todo muy
04:44 sencillo hay muchas personas que
04:46 aprenden html ganan la confianza y luego
04:48 pueden empezar a desarrollar sitios web
04:50 tan solo van a desarrollar páginas web
04:52 en realidad pero luego pueden empezar a
04:54 aprender otro tema pero como ya conocen
04:57 html va a ser mucho más sencillo para
04:59 ellos y es un buen inicio por esta razón
05:01 además si quiere ser un desarrollador
05:04 web el aprender html te va a dar una
05:06 idea de cómo funciona el desarrollo web
05:09 de manera en general porque es una
05:10 tecnología
05:11 fundamental de nuevo las aplicaciones
05:13 grandes y aplicaciones pequeñas utilizan
05:15 este lenguaje así que aunque no te
05:17 dediques a escribir páginas web o
05:19 quieras desarrollar aplicaciones
05:20 utilizando lenguajes de programación o
05:22 base de datos el aprender html también
05:25 te va a dar una idea de cómo funcionan
05:26 las aplicaciones web que vas a
05:28 interactuar en otros entornos además de
05:31 esto es una de las tecnologías
05:32 importantes actualmente hoy en día vemos
05:35 que la web ya no solamente es para
05:37 mostrar páginas web utilizamos
05:39 aplicaciones web dentro del navegador
05:40 por ejemplo antes si queríamos tener un
05:43 programa de decisión fotográfico tan
05:45 solo teníamos opciones como photoshop
05:47 por ejemplo pero hoy en día hay opciones
05:49 en la web entre es un sitio web y puedes
05:52 subir tu foto y editarlo allí o puedes
05:54 hacer otras cosas más como jugar o
05:56 puedes tener videollamadas o puedes
05:58 hacer otro tipo de funcionalidad que
06:00 antes tan solo se podía hacer desde un
06:01 computador en el sistema operativo hoy
06:04 en día el navegador permite hacer muchas
06:05 más cosas y para aprender a crear todas
06:08 estas cosas html es un buen inicio para
06:10 poder empezar además te ayudará a
06:13 entender cómo la web funciona si estás
06:16 empezando un sitio web porque quieres
06:17 tener
06:18 ox tu tienda virtual o tu negocio online
06:21 o cualquier otra manera de poder crear
06:24 contenido en la web el aprender html te
06:27 va a ayudar a entender cómo va a
06:29 funcionar tu negocio cómo va a funcionar
06:31 tu sitio web tanto si es para negocio o
06:34 si esto es sólo por los personal o si
06:36 quieres ser un blogger o una persona que
06:38 es su principal medio de comunicación es
06:40 la web el aprender html también es
06:42 bastante importante es un tema que te va
06:44 a ayudar a poder mejorar tu contenido
06:46 hay muchas personas por ejemplo que
06:47 suben vídeos a youtube o que crean blogs
06:49 y ayuda a algunas personas que sabiendo
06:52 html saben cómo posicionar mejor su
06:54 contenido de cualquier manera el saber
06:57 algo siempre ayuda a poder mejorar en
06:59 cualquier otra área aunque no lo veamos
07:01 bastante claro al inicio así que el
07:04 resumen es de que html es un buen inicio
07:07 para el desarrollo web y para cualquier
07:08 tema relacionado a la web tanto si es tu
07:10 negocio online o si quiere ser un
07:12 desarrollador o si quieres aprender más
07:14 de la web html es una tecnología que va
07:17 a ayudarte con todos estos temas pero
07:19 que es html
07:22 el nombre html viene de las siglas en
07:24 inglés hyper text markup language que en
07:27 español significa el lenguaje de marcado
07:29 de hipertexto suena como un hombre
07:31 bastante complicado pero lo único que
07:33 significa que es un lenguaje que nos
07:35 ayuda a interconectar textos por darte
07:39 un ejemplo cuando visitamos la web y
07:41 visitas tu sitio web de noticias
07:43 favoritos vamos a ver una enorme
07:44 cantidad de enlaces quizás cuando das un
07:47 clic en este enlace te envía a otra
07:48 página y si lo piensas de una manera
07:51 bastante sencilla es una página
07:53 conectada a otra página luego en esa
07:55 otra página también puede haber un
07:56 enlace y cuando das un clic te envía a
07:58 otra página
07:59 todas estas páginas se le conocen como
08:01 hipertexto porque son textos pero que
08:04 están conectados es así de sencillo pero
08:07 para poder llegar a crear estos textos
08:09 necesitamos conocer este lenguaje es por
08:11 eso que html se le conoce como el
08:13 lenguaje de marcado de hipertexto el
08:15 lenguaje que nos permite crear estos
08:17 textos interconectados de la web
08:19 ahora es un lenguaje de etiquetas en
08:21 realidad ya sabemos que es un mercado de
08:24 hipertexto que nos permite crear
08:25 hipertexto pero para hacerlo utiliza
08:27 unas etiquetas estas etiquetas que él
08:30 llama son algunas palabras claves o
08:33 algunos nombres que vas a tener que
08:34 memorizar para poder decirle a tu texto
08:36 esto es el título este es el contenido
08:39 este es un párrafo esta es una imagen
08:42 este es un enlace y cosas así es decir
08:44 que vamos a escribir un texto el texto
08:46 que queremos que sea nuestro sitio web
08:48 pero para cada parte de nuestro sitio
08:50 web
08:51 vamos a utilizar estos nombres clave que
08:53 html conoce como etiquetas todo esto lo
08:56 vamos a ver en la práctica pero esta es
08:58 una idea simplemente ahora html no es un
09:01 lenguaje de programación no te confundas
09:03 no es un lenguaje complicado que
09:05 necesitas conocer
09:07 temas matemáticos o algo por el estilo
09:09 hay muchas personas que piensa que html
09:11 es un lenguaje de programación cuando
09:13 empiezan pero no es así es un lenguaje
09:15 muy sencillo de hecho tan solo vas a
09:18 tener que memorizar algunos nombres y
09:19 luego vas a poder crear tu sitio web
09:21 ahora el lenguaje sirve para crear
09:24 sitios web y páginas web pero también
09:27 puede ser utilizado en aplicaciones
09:28 mucho más grandes como por ejemplo
09:30 facebook youtube instagram y otras redes
09:33 sociales más utilizan html pero para
09:35 hacerlo utilizan otras tecnologías más
09:37 así que ten en mente que con html solo
09:41 no vas a poder llegar a hacer esas
09:42 aplicaciones pero de nuevo como ya te
09:44 había comentado es un buen inicio ahora
09:47 html es un estándar esto quiere decir
09:49 que no importa desde qué navegador que
09:52 el sistema operativo estés ejecutando
09:54 siempre vas a ver html el mismo html que
09:57 estás aprendiendo en este vídeo es decir
10:00 si entras por ejemplo a tu sitio web de
10:03 noticias o entras a facebook por ejemplo
10:05 desde mac en un navegador safari vas a
10:09 ver el mismo facebook
10:10 si entras desde un navegador chrome en
10:12 windows
10:14 esto hace que la web a través de un solo
10:17 lenguaje pueda ejecutarse en cualquier
10:18 sitio y eso es uno de los puntos fuertes
10:20 de la web
10:21 si entras desde tu dispositivo móvil a
10:23 tu sitio web de noticias sigue siendo el
10:26 mismo código y esto es lo que ha ayudado
10:28 a que la web sea muy extensa porque
10:30 utiliza el mismo código estándar no
10:33 importa si aparece otra empresa nueva de
10:36 tecnología va a tener que utilizar html
10:38 mismo ahora hay otras tecnologías
10:40 relacionadas con html por lo general
10:42 cuando estás iniciando crear páginas web
10:44 te hablan de tres tecnologías html css y
10:48 javascript son estas tecnologías que las
10:51 que te permiten crear una aplicación del
10:53 navegador
10:54 un sitio web completo entonces html y
10:57 css van muy unidos van a la par html
11:01 sirve para decirle al navegador que es
11:02 el contenido y css para que ese
11:04 contenido se vea bien agregarle colores
11:06 agregarle alguna imagen etcétera y
11:10 javascript es un lenguaje de
11:11 programación que funciona en el
11:13 navegador un lenguaje de programación
11:14 para nosotros poder agregar algunas
11:16 cosas por ejemplo cuando un usuario está
11:18 tipeando en nuestro sitio web
11:19 queremos que
11:20 y anime alguna algún elemento o queremos
11:23 que la página haga algo complicado como
11:26 guardarse en una base de datos o guardar
11:28 datos en el navegador es un lenguaje de
11:31 programación
11:32 eso ya requeriría un tema y un vídeo por
11:34 aparte pero en este vídeo vamos a
11:36 enfocarnos en html y css voy a hablarte
11:39 un poco también de javascript
11:41 pero recuerda que es un vídeo dedicado a
11:43 html finalmente el estándar que te había
11:46 comentado que es html está manejado por
11:48 una organización llamada la world wide
11:51 web consortium lado también abreviado la
11:53 w3c esta organización se encarga de
11:56 definir cómo va a funcionar html y las
11:59 reglas que deben seguir todas las
12:01 empresas es decir que no importa si es
12:03 microsoft apple o google al final todas
12:06 esas empresas tienen que seguir estas
12:08 reglas para poder llegar a desarrollar
12:10 sitios y aplicaciones web recuerda que
12:13 tanto google microsoft y apple por
12:16 ejemplo tienen navegadores estos
12:17 navegadores tienen que leer html y esta
12:20 organización es la que le determinan las
12:21 reglas es una organización sin fines de
12:23 lucro y se encarga de definir cómo la
12:25 web funciona defienden
12:27 leyes de internet y como la web funciona
12:29 actualmente te voy a comentar de manera
12:31 rápida porque ya te había explicado un
12:33 poco del hipertexto uno de los puntos
12:35 fuertes de la web es que tenemos una
12:36 enorme cantidad de documentos
12:37 interconectados esta fue la idea inicial
12:40 de la web de poder subir algún artículo
12:43 subir algún texto y poder rápidamente
12:45 acceder a otros simplemente a través de
12:47 un enlace a través de un clic y en lo
12:49 que hacemos a diario en la web cuando
12:51 buscas algo en google google vas a ver
12:53 una enorme cantidad de enlaces en
12:55 realidad cuando buscas algo en google te
12:56 da una página web con un enorme cantidad
12:58 de enlaces cuando das un clic en uno de
13:00 esos enlaces te lleva a otra página web
13:02 y estás navegando entre páginas estas
13:04 páginas se le conoce como hipertexto es
13:07 una referencia de una página a otra y en
13:09 lo que vamos a estar haciendo cuando
13:11 escribamos páginas web vamos a estar
13:12 referenciando simplemente es decir que
13:15 un sitio web está conformado por una
13:17 enorme cantidad de páginas web es así de
13:19 sencillo por ejemplo imagínate facebook
13:21 cuántas páginas web de existiría allí
13:23 cada persona tiene su propia página su
13:25 propia página de perfil o puede unirse a
13:28 un grupo ese grupo también es una página
13:30 y cada vez que se navega en una pestaña
13:33 distinta en una
13:34 social el navegador pinta una nueva
13:36 página es decir que en la web hay una
13:39 enorme cantidad de información y la
13:41 manera de mostrar las informaciones a
13:42 través de páginas estas páginas están
13:44 referenciadas y es por eso que se le
13:46 conoce con el nombre de hipertexto ahora
13:49 vamos a nuestro asunto de poder
13:51 desarrollar nuestra página web vamos a
13:53 empezar a desarrollar una página muy
13:55 sencilla debes pensar algo no hay una
13:58 regla que te diga cómo crear una página
14:00 web hay tendencias hay desarrolladores
14:03 que dicen estas son el diseño de los
14:06 últimos años esto hace que el el usuario
14:08 se siente a gusto en mi página pero no
14:10 hay una regla de decirte cómo debes
14:11 crear tu página por ejemplo aquí te voy
14:13 a mostrar un esquema muy típico de
14:15 algunas páginas web por ejemplo hay una
14:17 enorme cantidad de páginas que tienen
14:19 este esquema tiene una cabecera en donde
14:21 muestran el logo y el nombre de su
14:23 página luego una navegación luego la del
14:26 contenido principal y si es un blog por
14:29 ejemplo equipo irían los artículos y al
14:31 lado iría la información relacionada a
14:33 esos artículos cuando se publicaron
14:34 quién es el autor del blog por ejemplo y
14:37 finalmente al último de la página
14:39 tenemos una barra
14:40 institucional un pie de página en donde
14:43 veríamos quién es el creador del blog
14:44 desde cuándo empezó sus derechos de
14:48 autor etcétera esto es cómo crear un
14:50 texto típico o un texto o como si
14:52 estuviéramos creando lo en word etcétera
14:54 en un editor de texto pero estamos
14:57 hablando de una página web y para
14:59 decirle al navegador cómo es que tiene
15:01 que mostrar esta página web vamos a
15:03 utilizar las etiquetas de html etiquetas
15:06 como decirle a esto que es una cabecera
15:08 del inglés header como decirle que esto
15:11 es una navegación del inglés navigation
15:13 o abreviado now y todo esto lo vamos a
15:15 aprender cuando estemos escribiendo
15:17 código así que no te asustes hoy vamos a
15:20 ver mucho más detalle esto del blog por
15:23 ejemplo aquí tenemos un blog muy típico
15:24 tenemos el título la cabecera la
15:27 navegación el que es el número dos el
15:29 número tres sería en realidad como el
15:32 contenido principal dentro del número
15:34 tres podríamos encontrar tanto un
15:37 artículo que es este recuadro y otro
15:39 artículo cada artículo tiene su fecha su
15:41 título un párrafo y todas estas partes
15:44 que estoy comentando título párrafo
15:46 artículo secciones todo eso lo vamos a
15:49 inscribiendo en html al lado de nuestro
15:52 contenido principal del número 3 que
15:53 engloba todos nuestros artículos
15:55 tenemos un contenido relacionado no es
15:58 un contenido principal porque no sólo
16:00 dice fechas pero estas fechas están
16:02 relacionadas a nuestros artículos
16:04 entonces es como un contenido
16:06 relacionado al contenido principal y
16:08 esto también lo vamos a hacer en html
16:11 vamos a diseñar esta página de hecho
16:12 esta página que ves aquí en un esquema
16:14 vamos a hacerla en la realidad vamos a
16:17 entenderla vamos a crear la desde cero
16:18 vamos a crear carpetas archivos vamos a
16:20 escribir algo de código html y al final
16:23 vamos a tener este esquema que ves aquí
16:25 pero en la realidad muy bien y el número
16:28 cinco el pie de página como aquí ves
16:30 dice derechos reservados desde el 2010
16:31 al 2011 es un blog bastante antiguo pero
16:34 es para darte una idea de cómo se crean
16:35 las páginas web ahora esa página es el
16:38 esquema de cómo lucirían de nuestro
16:41 sitio web
16:42 pero en html va a lucir algo como esto
16:43 la cabecera tendrá unas etiquetas o unas
16:47 palabras que se llaman header este para
16:49 decirle que aquí dentro vamos a colocar
16:51 el título de nuestra cabecera aquí iría
16:53 hombre de nuestro sitio web por ejemplo
16:55 en mi blog podría colocar aquí por
16:56 ejemplo luego tendríamos unas palabras
16:58 llamada now de navigation de navegación
17:01 y aquí podríamos colocar las distintas
17:04 pestañas que tendrían nuestra página
17:06 aquí en estas etiquetas sección
17:08 colocaríamos los artículos en donde
17:10 iríamos escribiendo los párrafos y los
17:13 títulos que hemos visto anteriormente
17:14 estos párrafos y títulos y también
17:17 tendríamos nuestro barra de información
17:20 lateral la información relacionada en
17:22 donde colocaríamos las fechas por
17:24 ejemplo aquí lo escribiríamos y el
17:26 führer que es para nuestro derecho
17:29 reservados o información institucional o
17:32 el pie de página por así decirlo de
17:34 hecho footer podríamos decirle que es el
17:36 pie de página y es así como va a lucir
17:38 en html realidad esto lo vamos a tener
17:41 que escribir en un texto pero aquí te lo
17:44 estoy tratando de mostrar lo más
17:45 relacionado posible al esquema esto será
17:47 un header navegación el contenido
17:50 principal barra lateral etcétera aún no
17:52 estamos escribiendo nada de código pero
17:54 tan solo te estoy dando la idea otra
17:56 tanda de arte más ejemplo para que
17:58 puedas entenderlo entonces como yo sé
17:59 que puedes
18:00 bastante complicado el inicio de la
18:01 tarde entenderlo mejor vamos a
18:03 escribirlo en la realidad vamos a
18:05 empezar desde cero vamos a instalar
18:07 nuestros programas que necesitamos y
18:09 luego empezar a escribir lo que
18:10 necesitamos para empezar con html dos
18:13 cosas muy sencillas un navegador que
18:16 probablemente ya lo tienes instalado
18:17 porque estás viendo este vídeo desde un
18:19 navegador
18:19 quizás lo estás viendo desde google
18:21 chrome mozilla firefox o cualquier otro
18:24 navegador no hay ningún problema en este
18:26 vídeo yo voy a utilizar google chrome
18:28 porque utilizo google chrome porque es
18:30 un navegador que es bastante popular en
18:32 el desarrollo web es un navegador que
18:34 tiene muy buenas características y
18:36 google se preocupa mucho de darle
18:38 herramientas para desarrolladores
18:39 bastante óptimas entonces google chrome
18:41 es un buen entorno de desarrollo para
18:43 páginas web
18:44 puedes utilizar también otro pero si
18:46 conoces cómo hacer lo que yo te voy a
18:48 mostrar en google chrome te recomiendo
18:50 que utiliza es el mismo editor y en las
18:51 mismas herramientas para que encuentren
18:53 los menos pues la menor cantidad de
18:55 problemas posibles otra herramienta
18:57 aparte del navegador será nuestro editor
18:59 de código que es el editor de código es
19:02 un programa que vamos a instalar que es
19:04 muy parecido al bloc de notas pero
19:06 ayuda a escribir código html y poder
19:10 resaltarlo de hecho no tan solo sirve
19:12 para escribir código html sirve para
19:13 escribir otro tipo de lenguajes pero en
19:16 este vídeo vamos a utilizarlo para html
19:18 obviamente así que el editor de código
19:20 que vamos a utilizar se llama visual
19:21 studio code no voy a enseñarte a
19:23 instalar google chrome pero si visual
19:26 studio code visión es único es gratuito
19:28 es abierto es multiplataforma esto
19:31 quiere decir que tanto si estás en mac
19:32 en windows o linux vas a poder
19:34 instalarlo siempre trato de hacerlo
19:36 vídeo lo más sencillo posible de que
19:38 puedan ser vistos desde cualquier lugar
19:40 o desde cualquier plataforma me refiero
19:42 entonces vamos a empezar instalando
19:44 visual studio code y luego vamos a
19:46 empezar a crear nuestra primera página
19:47 web para entender html muy bien aquí
19:50 estoy en la página oficial de visual
19:52 studio code que me permite descargarlo
19:55 la página es code puntos visual studio
19:57 puntocom y el propio sitio web te da el
20:00 instalador que necesitas es decir si lo
20:02 estás visitando desde un computador mac
20:05 te da el instalador para max y estabas
20:07 en link nos te da el instalador para él
20:08 y linux y en este caso como estoy en
20:10 windows me da el listado para win
20:12 así que lo voy a descargar doy un clic
20:14 en este botón que dice descargar para
20:16 windows me da una redirección o una
20:19 página mostrándome algo del editor pero
20:23 a su vez también está cargando el
20:25 instalador de visual studio code para
20:28 windows y observa que aquí está
20:30 empezando a la descarga pesa
20:32 aproximadamente 50 megas 44 cuenta y 550
20:35 medios más o menos así como esto puede
20:37 demorar voy a esperar a que esto termine
20:39 y luego continuamos muy bien aquí el
20:41 programa ha terminado de descargarse lo
20:43 primero que voy a hacer es dar un clic
20:44 simplemente y así de sencillo el
20:47 instalador va a empezar a ejecutarse va
20:49 a pedir permiso le damos que sí y luego
20:51 un típico instalador de windows le damos
20:53 siguiente aceptar los términos y
20:55 siguiente hasta el final aquí tan sólo
20:58 decían que todo está configurado
21:01 y muy bien esa instalación es bastante
21:03 rápida de hecho es un editor bastante
21:05 sencillo de instalar no requiere muchas
21:08 cosas y sobre todo es bastante útil
21:11 cuando estamos desarrollando en
21:12 distintas plataformas porque el mismo
21:14 editor al momento que lo establece en
21:15 linux y mac va a ser el mismo en tanto
21:18 en la misma interfaz y no va a cambiar
21:20 nada en su funcionalidad muy bien aquí
21:22 va a tomar su tiempo de instalación así
21:23 que voy a esperar a que termine de
21:24 instalarse y luego te voy a mostrar el
21:26 editor y cómo vamos a utilizarlo para
21:28 crear nuestra primera página web muy
21:30 bien aquí ha terminado de instalarse lo
21:32 único que voy a hacer es darle finalizar
21:33 y automáticamente se va a abrir el
21:35 editor aquí lo tenemos está abriendo
21:38 visual studio code y este es el editor
21:40 que vas a utilizar muy a menudo cuando
21:41 quieres sitios web si vas a a partir de
21:45 este vídeo puedes utilizar cualquier
21:47 otro editor no hay ningún problema no
21:48 significa que porque utilices otro
21:50 editor no va a funcionar tu sitio web
21:51 utiliza el que más te guste en este caso
21:53 vamos a utilizar este porque es gratuito
21:55 multiplataforma y hoy en día es uno de
21:57 los editores más populares muy bien
21:59 entonces vamos a hacerlo todas esas
22:01 bienvenidas vamos a minimizar esta
22:03 página y vamos a ir al escritorio aquí
22:06 en el escritorio antes
22:07 escribir nuestra primera página web y
22:09 empezar a explicarte cómo es que se
22:11 pueden crear primero necesito explicarte
22:13 algunos conceptos muy básicos así que
22:16 voy a minimizar visual estudio code por
22:17 ahora y explicarte lo siguiente cuando
22:20 nosotros estamos trabajando con archivos
22:23 en nuestro sistema operativo él
22:25 determina de alguna manera con qué
22:27 programa abrirlo por ejemplo nosotros
22:29 cuando creamos o tenemos un archivo mp3
22:32 el sistema operativo decide abrirlo con
22:34 un reproductor de música cuando creamos
22:37 un un archivo de vídeo o una película
22:40 por ejemplo el sistema operativo
22:41 determina que lo debe abrir con un
22:43 reproductor de vídeo y lo mismo para un
22:45 archivo de página web cuando nosotros
22:49 queremos crear una página web vamos a
22:51 crear un archivo con una extensión punto
22:54 html es decir al igual que el audio
22:56 punto mp3 el vídeo punto mp4 la página
22:59 web html y esto le ayuda al sistema
23:02 operativo a saber que debe abrirlo con
23:04 un navegador vamos a comprobarlo de una
23:07 manera muy sencilla vamos a abrir un
23:08 programa muy simple llamado el bloc de
23:10 notas todos los vicios operativos tienen
23:12 un programa bastante parecido a bloc de
23:13 notas así
23:14 utiliza cualquiera que se le parezca en
23:17 el bloc de notas nosotros no vamos a
23:19 hacer nada impresionante vamos a
23:20 escribir por ahora el primer texto vamos
23:23 a escribir la o puede tener cualquier
23:24 cosa en realidad vamos a guardarlo esto
23:27 sí es lo importante al guardar lo vamos
23:29 a guardarlo en el escritorio del sistema
23:32 operativo en el escritorio de nuestro
23:34 sistema de aquí en el escritorio
23:37 lo importante es guardarlo con un nombre
23:39 vamos a colocarle texto este es el
23:41 nombre del archivo pero voy a guardarlo
23:43 con una extensión llamada punto txt y
23:47 observo aquí al guardar lo lo que me
23:48 cree es un archivo de texto esto no es
23:50 nada sorprendente porque quizás ya lo
23:51 sabes pero esto es lo importante vamos a
23:54 volver a guardarlo y en este caso ya no
23:57 lo vamos a guardar con texto con el
23:58 nombre de texto punto txt sino texto
24:00 punto mp3 y el guardarlo espero que se
24:03 crea un archivo de audio tienen el
24:05 nombre texto pero es un archivo de audio
24:06 de hecho el si le damos propiedades y
24:08 vemos sus detalles
24:11 y aquí está el nombre es el tipo de
24:14 elemento desde un archivo mp3 y lo mismo
24:16 vamos a hacer para guardar en otros
24:18 tipos de archivo por ejemplo texto punto
24:19 mp4 guardamos y ahora es un archivo de
24:22 vídeo esto es lo que he tratado de decir
24:24 pero recuerda que en este caso queremos
24:26 crear una página web entonces cada vez
24:28 que nosotros queramos crear una página
24:30 web vamos a tener que crear un texto y
24:33 guardarlo con la extensión punto html al
24:37 guardarlo con la extensión punto html
24:39 observe que el sistema operativo al
24:40 igual que determinó con el resto de
24:43 archivos que con qué programa abrirlo en
24:45 este caso lo ha detectado y me ha dado
24:47 un icono de chrome esto quiere decir que
24:49 él intentará abrir las páginas con
24:51 google chrome o con el navegador por
24:53 defecto que tengas instalado que se hace
24:54 de mozilla firefox o internet explorer
24:57 de cualquier otro en este caso vamos a
24:59 dar un doble clic aquí en google chrome
25:02 en este icono yo creo que es primer
25:04 texto y aquí está la dirección de donde
25:07 está el archivo que he creado esto
25:10 aunque parece muy simple este la manera
25:12 en la que vamos a estar creando nuestras
25:14 páginas web al inicio es una manera muy
25:16 sencilla y hacer lo que hemos creado un
25:18 simple archivo html y ya está leyendo
25:20 nuestra página web entonces a partir de
25:23 aquí debes entender que cada vez que
25:25 vamos a crear páginas web necesitas
25:26 tener los el archivo como extensión el
25:30 nombre punto html puede tener cualquier
25:32 nombre no texto puede tener cualquier
25:34 nave que tú dices pero lo importante es
25:35 que termine en punto html muy bien
25:38 entonces vamos a eliminar este resto de
25:40 archivos y de hecho vamos a cerrar los
25:42 de notas ya hemos creado nuestra primera
25:44 página web y esta página web necesitamos
25:47 editarla de alguna manera si lo
25:49 hiciéramos con el bloc de notas podría
25:51 podría funcionar porque el bloc de notas
25:53 son solo al final que nos permite
25:54 escribir texto así que no hay ningún
25:56 problema pero él sirvió una página web
25:58 completa en el bloc de notas puede ser
26:00 un problema es por eso que hemos
26:01 instalado visual studio code él nos va a
26:03 ayudar a poder escribir código html
26:05 tienen una buenas herramientas y nos va
26:08 hacer el trabajo mucho más sencillo así
26:10 que vamos a utilizarlo vamos a abrir
26:12 nuestra página que hemos creado dentro
26:14 del visual studio code y observa que
26:16 automáticamente simplemente arrastrando
26:19 la página dentro del editor ya lo ha
26:21 abierto y aquí vamos a ver un icono que
26:24 dice explorador si damos un clic aquí
26:26 vamos a ver el archivo abierto muy bien
26:28 de hecho por ahora deberíamos crear un
26:30 proyecto nuevo una carpeta donde vamos a
26:32 almacenar toda nuestra página web así
26:34 que vamos a cerrar este archivo y vamos
26:37 a crear una carpeta
26:39 esta carpeta vamos a llamarla por
26:41 ejemplo 1er
26:43 sitio primer sitio web
26:46 voy a colocarle el nombre correcto el
26:49 primer sitio web y vamos a colocar el
26:52 archivo dentro de esta carpeta muy bien
26:54 eso es lo que voy a abrir aquí dentro de
26:55 visual studio code
26:57 una vez abierto ahora si tenemos todo
27:00 nuestro proyecto dentro de una sola
27:02 carpeta muy bien aquí vamos a cambiar el
27:05 archivo texto punto html por un nombre
27:07 un poco más indicativo de que éste es
27:10 nuestro nuestra página que debería verse
27:12 en el navegador o en nuestro sitio web
27:14 por lo general hay un nombre que siempre
27:16 le dan a las páginas a la página inicial
27:19 de tu sitio web es decir tu sitio web
27:21 tendrá muchas páginas pero la página que
27:23 el usuario va a ver primero cada vez que
27:25 visite tu sitio web
27:26 por lo general le colocan el nombre
27:28 index html de hecho cuando subas tu
27:31 página a un servidor real a un
27:34 computador real pues el computador va a
27:37 estar buscando el nombre index html o
27:39 index algo entonces es bastante
27:42 recomendado utilizar este nombre muy
27:44 bien aún tenemos nuestro archivo primer
27:46 texto y aquí es donde voy a explicarte
27:48 un concepto importante que es el de las
27:50 etiquetas html que te mencioné en la
27:53 teoría las etiquetas html nos permiten
27:56 decirle al contenido de html que estamos
27:59 creando que es cada cosa por ejemplo
28:01 vamos a crear un texto muy sencillo
28:04 vamos a colocarle
28:04 título del texto
28:07 y del texto y debajo vamos a escribir un
28:10 texto con el nombre en mi primer párrafo
28:15 de html y vamos a guardarlo como lo
28:19 guardamos en visores ubicados de dos
28:21 formas uno archivo guardar como un
28:23 perdón guardar porque guardar como es
28:25 para crear un archivo o de una manera
28:27 mucho más rápida simplemente cada vez
28:29 que escribe es un texto escribes control
28:31 ese y se guarda automáticamente aquí
28:34 puedes ver por ejemplo por qué cuando
28:36 aparece un punto significa que el
28:37 archivo no está guardado pero cuando
28:39 presionas controle se observa que
28:41 aparece la equis porque ya el archivo
28:43 estado ya está guardado muy bien vamos a
28:45 abrir nuestra página como la abrimos
28:47 vamos a dar la carpeta le damos un doble
28:49 clic el archivo muy bien observa que
28:51 nosotros hemos creado un espaciado o sea
28:54 demos crea un título y al darle un enter
28:57 hemos creado una línea sin ningún texto
28:59 para separar el contenido del párrafo
29:01 pero este html no lo sabe observa que
29:03 html lo ha colocado el título y el
29:05 párrafo juntos por qué pasa esto no es
29:08 un error ni nada por el estilo lo que
29:10 pasa es que nosotros tenemos que decirle
29:12 a html explícitamente
29:14 qué es cada cosa le tenemos que decir y
29:16 esto es un encabezado y esto es un
29:19 párrafo y así vamos a estar diciéndole
29:21 con cada cosa que queremos mostrar
29:23 nuestro sitio web por ejemplo a futuro
29:25 quisiéramos tener imágenes o vídeos
29:27 también tenemos que decirle a html y
29:30 esto es un esto es una imagen esto es un
29:32 vídeo y cosas por el estilo en ese
29:35 momento vamos a ir separando algunas
29:37 cosas vamos a empezar con algo muy
29:38 sencillo vamos a crear una etiqueta html
29:41 que nos permite colocarle un nombre aquí
29:43 un título esto se le conoce como título
29:46 de la página algo importante con html es
29:49 que para hacerlo tenemos que escribir
29:51 una etiqueta y para escribir la etiqueta
29:53 vamos a hacer lo siguiente las etiquetas
29:56 de html están en inglés y por ejemplo si
29:59 quiero colocarle un título aquí está
30:02 este navegador a esta pestaña del
30:03 navegador vamos a escribir title pero
30:06 las etiquetas html lucen así el nombre
30:09 de la etiqueta y entre un símbolo de
30:12 mayor y menor de hecho aquí el propio
30:16 visual studio como tú me lo auto
30:18 completa
30:19 tiene un símbolo de mayor y menor pero
30:22 para que funcione la etiqueta tiene un
30:24 par que es igual
30:27 el que es igual pero con un es las antes
30:31 del nombre esto lo que quiere decir es
30:33 que nosotros aquí dentro esta etiqueta
30:36 está iniciando y aquí termina significa
30:38 que si nosotros queremos colocar el
30:40 título a esta a este archivo
30:42 tenemos que colocarle aquí adentro
30:44 entonces aquí le voy a decir
30:46 título de mi primer vamos a colocarle
30:49 primera página web primer página web
30:53 y vamos a abordar los controles eo
30:55 archivo guardar vamos a ir al navegador
30:57 y refrescar y observa que ahora aparece
31:00 el nombre primer página web es la manera
31:03 en la que nosotros hemos utilizado una
31:05 etiqueta html esta es una de las
31:07 primeras etiquetas y todas las etiquetas
31:09 lucen muy similar por ejemplo luego
31:12 cuando quieras tener un párrafo en este
31:14 caso aquí tenemos un párrafo por ejemplo
31:15 vamos a utilizar una etiqueta html
31:17 llamada pd para graf o en o de una
31:20 manera abreviada simplemente se llama p
31:22 entonces esta es una etiqueta html y el
31:25 cierre va al final cuando termina mi
31:28 párrafo este es para decirle aquí
31:30 empieza mi párrafo y hasta aquí llega
31:33 entonces aquí le estoy diciendo eso es
31:35 un párrafo y ese es el contenido
31:37 entonces ya tenemos dos etiquetas html
31:39 una etiqueta título y una etiqueta p
31:42 vamos a guardar lo vamos a refrescar y
31:45 observa que sin siquiera decirle que
31:47 esto es un encabezado en el párrafo y lo
31:49 coloca por separado porque esta es la
31:50 manera por defecto que el navegador toma
31:53 para colocar los párrafos y aquí estamos
31:56 abriendo muy rápido las etiquetas pero
31:58 quisiera que eso también sea un título
31:59 un título
32:00 general está en negrita y tienen un
32:02 tamaño poco más grande que el párrafo
32:04 para que resalte entonces vamos a
32:06 colocar un encabezado en html nosotros
32:09 tenemos distintos tipos de encabezado
32:11 por ejemplo un encabezado como se
32:13 escribe inglés escribe como redding pero
32:15 en html tiene el nombre de h simplemente
32:18 y el número de tamaño por ejemplo vamos
32:21 a colocarle un encabezado de tipo 1 un h
32:23 1 y vamos a colocar los símbolos de
32:26 mayor y menor para que esto parezca una
32:28 etiqueta y también tiene que ir cerrado
32:31 como una etiqueta html exactamente igual
32:33 como las demás etiquetas archivo guardar
32:37 vamos al navegador refrescamos y observa
32:40 que ahora nuestro título tiene un
32:42 digamos un estilo en negrita y con un
32:44 tamaño de fuente más grande que el
32:47 párrafo así es como nosotros vamos a ir
32:49 creando nuestras páginas estas son las
32:51 etiquetas existen muchas y cada una
32:54 necesita un poco de tiempo de estudio en
32:56 este caso voy a enfocarme en lo que
32:58 necesitamos no voy a explicar todas las
32:59 etiquetas que existen existieron y
33:01 existirán sino las etiquetas más
33:03 importantes que utilizamos a diario por
33:05 ejemplo los encabezados tenemos
33:07 tamaños por ejemplo si nosotros queremos
33:09 tener un subtítulo subtítulo del texto y
33:14 quiero decirle a mi documento que esto
33:16 es un subtítulo vamos a utilizar una
33:17 etiqueta de encabezado tipo 2 por
33:19 ejemplo
33:21 el encabezado de tipo 2 vamos a guardar
33:24 lo vamos a reflejar nuestra página y
33:26 observe que es muy parecido al título
33:28 pero con un tamaño más pequeño eso
33:29 significa que es un subtítulo y no es el
33:32 único tamaño hay seis tipos de tamaños
33:34 eso significa que no tenemos tan solo h1
33:36 y x2 y no h 384 h 5 y 86 y para
33:40 cambiarlo simplemente vamos a colocarle
33:42 h3 h4 h 5 h 6
33:46 vamos a guardar lo íbamos a refrescar
33:48 nuestra página observa que los distintos
33:51 tipos de tamaños de encabezados aquí lo
33:52 podemos ver esto depende de qué de cómo
33:56 lo puedas utilizar para que lo necesites
33:57 tienes de libro de utilizar las
33:59 etiquetas que veas necesario recuerda
34:02 que cada vez que creas una página trata
34:04 de darle la mayor cantidad de
34:05 información al navegador utilizando
34:07 estas etiquetas es decir si tiene su
34:09 subtítulo colocarlo entre etiquetas h2
34:11 para que el navegador sepa que es un
34:13 subtítulo si tienes un párrafo coloca la
34:15 mente de etiquetas para que el navegador
34:17 sepa que es un párrafo y lo mismo para
34:19 el resto de contenido esto vas a ir
34:21 haciéndolo cada vez que aprendas más
34:23 etiquetas son muy pocas en realidad no
34:25 son tantas tampoco y va a seguir
34:27 aprendiendo las a medida que las vayas
34:29 escribiendo muy a menudo
34:30 así que práctica con muchos sitios web
34:32 al final de este vídeo voy a dejarte
34:34 algunos ejemplos de sitios web para que
34:36 puedas empezar a practicar html y en
34:38 este caso vamos a dejarlo simplemente
34:40 con un h1
34:42 muy bien vamos a guardar lo vamos a
34:45 refrescar y ahora tenemos lo que
34:46 teníamos antes hacia este momento
34:48 nosotros le estamos diciendo tan solo
34:50 que tenemos un título un archivo uno y
34:52 una etiqueta p
34:53 pero algo estándar en el lenguaje html
34:56 es decirle en qué tipo de versión
34:58 estamos escribiendo html es decir desde
35:01 que surgió la web han habido una enorme
35:03 cantidad de versiones de html en
35:04 realidad 4 aproximadamente 4 versiones y
35:07 varían entre ellas de html en este caso
35:11 nosotros vamos a utilizar la última
35:12 versión de html que html5 como le
35:15 podemos decir a nuestro documento de
35:17 aquí que es una versión de html 5 bueno
35:19 a través de una etiqueta también
35:21 recuerda que gracias a esas etiquetas es
35:23 como nosotros vamos a escribir el
35:24 documento entonces antes de que empiece
35:27 a escribir todo esto de aquí voy a
35:29 decirle que eso es un documento de html
35:32 5 como le puedo decir eso a través de
35:34 una etiqueta llamada dope type
35:38 esta etiqueta top time es para decirle
35:40 que mi documento es de tipo y hemos
35:43 hecho buen escribir todo en mayúsculas
35:44 dope type y tiene que empezar con un
35:46 signo de interrogación esto de
35:50 exclamación perdón
35:51 esto es símbolo le dice que esta
35:53 etiqueta adopta y debe tener una
35:55 propiedad y aquí le vamos a decir html
35:58 yo sé que este ticket es algo complicada
36:00 pero no es necesario entenderla muy bien
36:03 del todo lo único que tienes que
36:04 entender es que gracias a esta etiqueta
36:06 nosotros le estamos diciendo a nuestro
36:07 documento que esto es un documento de
36:10 html5 que es de las últimas versiones de
36:12 html5 de html
36:15 a otras versiones antiguas también había
36:17 html 4 html 4 punto algo y antes también
36:21 había no había antes que parezcan todas
36:23 estas versiones habían otras versiones
36:24 de html así que es necesario siempre
36:26 utilizar la última versión y darle de
36:28 nuevo más información al navegador ok
36:31 aparte del html del tipo de documento
36:34 todo nuestro contenido que vamos a crear
36:37 también le debemos que decir que vamos a
36:40 colocarlos dentro de etiquetas hay algo
36:42 muy importante cuando escribimos
36:43 documentos de html y es que tienen una
36:46 especie de jerarquía que es esto de
36:49 jerarquía que nosotros en un documento
36:52 por ejemplo si aquí lo vemos
36:53 tenemos dos partes en el navegador esta
36:55 parte que ves aquí donde está el título
36:57 y ves en la barra de direcciones se le
37:00 conoce como la cabeza de nuestro
37:01 contenido y esta parte donde ves el
37:04 lienzo en blanco con el encabezado y el
37:06 párrafo se le conoce como el cuerpo
37:08 entonces nosotros tenemos que separar
37:11 nuestra página html en cabeza en cabeza
37:13 y cuerpo ahora cómo lo vamos a hacer de
37:16 nuevo con etiquetas html entonces vamos
37:19 a escribir una etiqueta llamada html
37:22 y esta es la estructura bastante típica
37:24 que vas a tener en todos tus proyectos
37:26 en todos tus proyectos le vas a decir la
37:28 versión y le vas a decir que tu
37:31 contenido html irá dentro de estas
37:33 etiquetas siempre irán dentro de estas
37:35 etiquetas ahora aquí dentro vamos a
37:37 escribir dos secciones cabeza y aquí
37:40 observa que el propio editor de código
37:42 me ayude con el autocompletado
37:44 simplemente escribiendo la primera
37:45 etiqueta del hielo auto completa de 7 me
37:47 le coloque color es algo que no está
37:49 bien mencionado pero quizás ya te habías
37:50 dado cuenta luego tenemos a escribir la
37:54 otra sección cuerpo llamada bad inglés
37:56 entonces si yo quiero colocar por
37:59 ejemplo este contenido en el cuerpo ya
38:01 te estarás dando cuenta que esto de aquí
38:04 debería ir aquí adentro del cuerpo de
38:07 esta manera y observa que le estoy dando
38:09 como una especie de espaciado y esto
38:11 ayuda a poder leer el código pero vamos
38:15 a terminar vamos a colocar el título
38:16 también dentro de la cabeza
38:21 observa que ahora tenemos dos secciones
38:23 si nosotros tratamos de leer esto
38:26 podemos hacerlo debido a la manera en la
38:28 que lo hemos escrito voy a guardar lo
38:30 que estamos diciendo o cuando el
38:32 navegador lea esto en dir algo como esto
38:36 esto es una página html5 aquí está el
38:39 contenido del html tiene dos secciones
38:41 una cabeza que es lo que voy a pintar
38:43 aquí arriba y aquí está el título ok
38:46 entonces voy a pintar mi primer página
38:48 web aquí en el título luego tiene una
38:51 sección de cuerpo ok estuviera aquí en
38:53 esta parte en blanco tiene un encabezado
38:56 este aquí lo coloco y tiene un párrafo
38:58 aquí lo coloco esta es la manera en la
39:00 que el navegador va a ir leyendo las
39:02 cosas y observa que todo es bastante
39:03 descriptivo le estás diciendo mucha
39:06 información al navegador esto es un
39:08 título esto es un párrafo o esto es un
39:09 encabezado todo eso ayuda a que tu sitio
39:12 web
39:12 no solamente el navegador pueda
39:14 pintarlos sino que también cuando las
39:16 personas intenten buscarlo desde un
39:18 buscador como google por ejemplo
39:20 el propio buscador pueda leer tu
39:22 contenido y pueda saber exactamente lo
39:25 que las personas están buscando eso es
39:27 un concepto avanzado o intermedio quizás
39:28 no estando tampoco pero es mejor
39:31 utilizar siempre las etiquetas html
39:32 porque ayudan a describir el contenido y
39:35 hablando de describir el contenido
39:36 recuerda que en la web
39:38 nosotros no tan solo vamos a tener
39:40 contenido en español en la web es una
39:43 red mundial entonces vas a encontrar
39:45 contenido tanto en inglés en español en
39:48 francés ruso italiano y una enorme
39:49 cantidad de idiomas que si quieras
39:51 conocer entonces nuestra información
39:54 estará allí junto a todas estas páginas
39:57 web que existen entonces es por eso que
39:59 nosotros tenemos que decirle más
40:01 información por ejemplo el lenguaje y es
40:04 por eso que vamos a conocer otro
40:05 concepto de html llamado el atributo el
40:09 atributo de las etiquetas html esta
40:11 etiqueta html que vemos aquí sirve para
40:15 decirle que esto es un texto de html
40:17 pero vamos a tratar de darle más
40:19 información diciéndole de qué tipo de
40:22 lenguaje o qué lenguaje es el que vamos
40:24 a escribir para eso vamos a utilizar una
40:26 palabra llamada lang
40:27 qué es un atributo si sabes un poco
40:30 inglés ya que viene desde el language
40:32 entonces aquí estamos diciéndole que el
40:34 lenguaje que vamos a utilizar le decimos
40:36 igual y doble comilla y dentro de esas
40:39 dobles comillas le decimos el lenguaje
40:41 que vamos a utilizar en este caso es
40:42 español entonces le decimos s si es en
40:45 inglés le doy colocas n por ejemplo
40:47 entonces aquí le estoy diciendo estoy
40:49 creando un documento html y el contenido
40:51 del html es de el lenguaje español esto
40:55 ayuda a que cuando busquen tu
40:56 información si escriben por ejemplo en
40:58 el buscador una palabra como primer
41:01 página web tu página quizás aparezca en
41:04 de hecho hay una enorme cantidad de
41:05 sitios web que tienen ese nombre pero tú
41:07 le estás dando más información gracias a
41:09 que también el túpac quien está en
41:12 español entonces si buscan algo en
41:13 español tu página que está en español
41:15 también podría hacer una respuesta pero
41:17 además del lenguaje cuando busquen
41:19 nuestra página sería mucho mejor darle
41:21 una pequeña descripción de que es
41:22 nuestra página y también podríamos
41:24 incluso darle palabras claves o el
41:26 nombre del autor para eso vamos a
41:29 utilizar una nueva etiqueta html que va
41:31 dentro de la cabeza algo importante con
41:34 la cabeza es que
41:34 la única etiqueta que es visible la
41:37 única etiqueta que de la cabeza que
41:39 podemos ver es la etiqueta title el
41:41 resto de etiquetas que vamos a colocar
41:42 dentro en la cabeza de nuestro contenido
41:44 de en realidad no se ven pero sirven
41:47 para nosotros dar más información al
41:49 navegador simplemente entonces aquí
41:51 debajo del título vamos a escribir una
41:52 etiqueta llamada meta esta etiqueta
41:55 mente tiene algo peculiar no tiene un
41:57 par es decir que no se cierra al igual
42:00 que las etiquetas el resto etiquetas que
42:02 hemos escrito por ejemplo va de h1 todas
42:04 cierran con una etiqueta muy parecida
42:06 con slash pero la etiqueta meta no la
42:08 etiqueta mente es una sección porque no
42:10 cierra pues porque adentro no vamos a
42:13 colocar nada es decir que la etiqueta
42:16 meta en este caso no vamos a colocar
42:18 contenido que dentro entonces no es
42:19 necesario que lo cerremos y de hecho no
42:21 se escribe de esta manera pero para
42:23 escribirlo nosotros podemos darle un
42:25 cierre aquí mismo esto es para decirle
42:27 que la etiqueta meta no tiene un par
42:29 ahora entonces para qué vamos a utilizar
42:31 la etiqueta meta para utilizar sus
42:33 atributos al igual que lo hicimos con la
42:35 etiqueta html la etiqueta mente tiene
42:37 sus atributos por ejemplo the name este
42:40 para decirle qué es lo que información
42:43 vamos a darle al navegador en este caso
42:45 voy a darle la información de la
42:46 descripción de mi sitio web por ejemplo
42:48 aquí podría escribir name descripción y
42:51 aquí le estoy diciendo voy a dar más
42:53 información de mi sitio web de la
42:54 descripción de mi sitio web
42:56 entonces el contenido
42:58 el content que es un atributo también de
43:02 hecho voy a cerrar esto de aquí voy a
43:04 maximizar esto en el contenido que
43:06 también es otro atributo de la etiqueta
43:08 meta es para decirle ok esto es para
43:10 hacer una descripción que descripción
43:12 quiere mostrar aquí puede escribir
43:14 cualquier cosa que yo quiero
43:15 describiendo mi sitio web por ejemplo
43:17 puedes ir este esta es mi primer página
43:20 web
43:23 y si guardamos y vamos al navegador y
43:27 refrescamos observa que no ha pasado
43:30 nada así exactamente igual porque de
43:32 nuevo la única etiqueta visible de la
43:35 cabeza es la etiqueta title el resto
43:37 sirve para dar más información
43:38 simplemente aunque esto no se vea esto
43:41 ayuda mucho a que puedan encontrar tu
43:43 sitio web con más facilidad porque estás
43:44 dando más información es así de sencillo
43:47 ahora no es la única etiqueta que nos
43:49 sirve también podríamos utilizar una
43:51 otra etiqueta llamada autor por ejemplo
43:53 podríamos decir etiqueta meta
43:56 name autor y aquí podríamos decir que
44:00 como contenido del autor vamos a colocar
44:02 el nombre del autor que en mi caso voy a
44:03 colocar solo mi nick name tu puedes
44:05 colocar su nombre no hay ningún problema
44:06 a nombre de tu empresa el nombre de la
44:08 empresa que lo creado etcétera eso de
44:10 nuevo es para dar más información
44:11 finalmente vamos a conocer a otra
44:13 etiqueta meta esta etiqueta meta será
44:15 para dar unas palabras clave de nuestra
44:18 de nuestro sitio web vamos a llamarlo
44:20 keywords es así como tienes que
44:23 colocarle al decirle esta etiqueta mente
44:26 llamada keywords de hecho es en plural
44:29 el contenido debe tener por ejemplo
44:31 algunas palabras claves muy frecuentes
44:33 que va a encontrar en tu sitio por
44:34 ejemplo mi primer sitio es una palabra
44:37 clave en mi primer página sería otra
44:40 palabra clave y así página web etcétera
44:43 eso serían algunas palabras claves por
44:45 ejemplo si tuvieras otro tipo de sitio
44:48 web por ejemplo un blog podrías escribir
44:51 blogs podrías escribir de qué trata tu
44:53 blog si es por ejemplo no sé de cocina
44:55 de diseño de desarrollo web podrías
44:58 escribir esas palabras aquí simplemente
45:00 para que cuando busquen esas palabras en
45:02 el buscador pueden
45:04 hoy en día los buscadores no utilizan
45:07 mucho las palabras claves pero esto
45:09 ayuda mucho más a dar más información
45:11 simplemente de nuevo siempre trata de
45:12 dar más información simplemente para que
45:14 puedan encontrar su sitio web porque
45:16 recuerden que en la web hay una enorme
45:18 cantidad de sitios web entonces a más
45:20 información de es más posicionamiento te
45:22 van a dar en los buscadores y tu página
45:24 va a ser encontrada más fácilmente muy
45:27 bien entonces vamos a escribir
45:29 finalmente otra etiqueta meta que ya nos
45:32 sirve para dar información de de que es
45:34 nuestro contenido pero si para decirle
45:36 de qué tipo de codificación de
45:39 caracteres estamos utilizando es decir
45:41 nosotros estamos utilizando aquí algunos
45:44 algunas palabras pero algunas por
45:46 ejemplo llevan tilde
45:48 y si refrescamos bueno vamos a colocar
45:50 en el título el título
45:53 nos refrescamos podemos verlo porque el
45:55 navegador sabe que estamos en un
45:58 contenido en español pero cuando lo
46:01 abren en distintos navegadores es mucho
46:03 mejor decirle de qué tipo de
46:05 codificación estamos utilizando esto se
46:08 le conoce como codificación de
46:10 caracteres y para utilizarlo vamos a
46:11 escribir aquí una etiqueta meta también
46:13 de hecho como escribió antes del título
46:14 no tiene mucha importancia pero vamos a
46:16 escribir lo de antes del título vamos a
46:19 decirle meta name y aquí vamos a decirle
46:22 bueno no es metal name sino metal char
46:24 set el metal charset es para decirle
46:27 aquí la codificación de caracteres
46:30 ciudad de munich out de del tipo 8
46:34 esto es para decirles simplemente que
46:35 adentro vamos a utilizar títulos para
46:36 nuestros para nuestras palabras o
46:39 incluso sirve para poder mostrar otro
46:42 tipo de lenguajes dentro de nuestra
46:44 misma página esto al momento quizás no
46:46 lo entiendas pero el propio el propio
46:49 tema de codificación de caracteres es un
46:51 tema por aparte voy a dejarte un
46:52 artículo de la wikipedia para que pueda
46:54 echarle un ojo pero estos son solo para
46:56 utilizar distintos caracteres que van
46:59 mucho más allá
47:00 solo colocar letras en nuestra página
47:01 quizás quieres colocar emoticones quizás
47:04 quieres colocar algunos símbolos y
47:05 gracias a que le hemos dicho que estamos
47:07 utilizando este codificación de
47:08 caracteres luego vamos a poder
47:09 utilizarlo en nuestras páginas entonces
47:11 es muy importante también utilizarlo la
47:13 mayoría de páginas utilizan esta
47:14 codificación así que que nuestra página
47:17 también utilice es algo favorable muy
47:20 bien en nuestro cuerpo que es aquí en el
47:24 contenido principal
47:25 vamos a ir detallando mucho mejor
47:27 nuestro contenido de nuestro blog para
47:29 ayudarte un poco entender que es lo que
47:30 vamos a ir escribiendo he traído la
47:33 imagen del blog que intentamos crear
47:34 esto lo que vamos a intentar crear vamos
47:37 a intentar colocar los colores vamos a
47:38 intentar hacer que luzca como lo estás
47:40 viendo para eso le recuerda que no
47:43 necesitamos un solo html sino otra
47:45 tecnología como css en este caso tan
47:48 solo estamos hablando de html pero vamos
47:50 a hidratar dejar la estructura de como
47:52 el navegador va a entender esto a través
47:54 de html eso sería la cabecera eso sería
47:57 la navegación en la sección principal
47:59 los artículos una barra lateral y el
48:02 feder o el pie de página vamos a empezar
48:05 con la cabeza
48:06 el navegador este título no esté
48:09 encabezado que ves aquí tiene el nombre
48:10 de mi blog y es o pertenece a la
48:13 cabecera entonces vamos a el título
48:16 vamos a cambiarlo vamos a decirle mi
48:18 blog
48:20 y esto vamos a colocarlo dentro de una
48:23 etiqueta nueva de html llamada heather
48:25 estas etiquetas que voy a ir colocando
48:28 no van a alterar como luce nuestro sitio
48:30 web pero de nuevo ya seco repetido
48:33 bastantes para dar más información al
48:34 navegador y luego vas a ver ok esto
48:37 pertenece a la cabeza vamos a ver qué
48:39 otra cosa más necesitamos una navegación
48:41 si nosotros vemos nuestra navegación
48:43 tiene unos cuantos ítems tiene un ítem
48:46 principal un y tengo ayuda un ítem
48:48 contacto estos ítems son en realidad
48:50 pestañas de una navegación qué quiere
48:53 decir que cada vez que un usuario dé un
48:54 clic en estas pestañas lo va a enviar a
48:56 otra página pero si te estás preguntando
48:59 cómo es que lo puede enviar a otra
49:00 página tendríamos que crear la otra
49:01 página en este caso tan solo vamos a
49:03 crear esta página principal pero vamos a
49:06 enfocarnos en cómo podemos diseñar esta
49:07 navegación esta navegación está en
49:10 formato horizontal es decir que un está
49:12 al lado de la otra
49:13 por lo general navegador tenemos una
49:15 manera de decirle que vamos a crear una
49:16 lista y cada una de estas listas tendrá
49:19 una de esas pestañas voy a mostrar otro
49:21 vamos a colocarla debajo de todo por
49:25 ahora para ver de qué se trata una nueva
49:27 etiqueta llamada
49:28 que en inglés vendría desde un border
49:32 list de lista desordenada en español
49:35 esta lista desordenada tiene un elemento
49:37 html dentro que nos permite agregar un
49:40 item de esta lista desordenada por
49:42 ejemplo vamos a escribir aquí una
49:44 etiqueta l
49:46 estas etiquetas de ley de simplemente el
49:48 lista ayten o ítem de la lista general
49:51 para colocar aquí un ítem de esta lista
49:53 desordenada por ejemplo en este caso
49:56 quisiéramos tener la pestaña principal
49:59 vamos a escribir principal
50:01 y vamos a copiarlo una o dos veces más
50:03 porque recuerda que tenemos dos ítems
50:05 más estos tienen el nombre de ayuda y
50:07 contacto muy bien ayuda contacto vamos a
50:11 ver lo vamos a guardarlo con controles e
50:13 vamos al navegador si refrescamos lo que
50:16 tenemos esta lista está lista en
50:18 realidad aunque aquí lo vemos con unos
50:20 puntos es porque pertenecen a una
50:23 etiqueta huele la etiqueta huele le
50:25 determina que estos ítems pertenecen una
50:28 misma lista por así decirlo de hecho
50:31 podríamos crear cuántas listas que
50:32 veamos por ejemplo copiamos esto y luego
50:34 pegamos aquí debajo y vamos a tratar de
50:37 ordenar un poco vamos a retroceder
50:40 vamos a tratar de ordenarlo eso también
50:42 se podría ordenar más rápido con el
50:43 editor pero no quiero complicar temas
50:45 las cosas vamos a abordarlo y aquí vamos
50:47 a cambiar algunas cosas por ejemplo si
50:49 no habláramos de una lista de una
50:50 navegación sino una lista por ejemplo de
50:52 ingredientes supongamos que tu blog se
50:54 trata de cocina pues aquí puedo lucrar y
50:56 'nos de agua otro ingrediente
51:00 y otro ingrediente más aquí podría decir
51:03 listando cómo vas a ir describiendo los
51:07 ingredientes de por ejemplo una receta
51:09 que está mostrando en tu blog vamos a
51:11 guardarlo refrescar y observa que
51:14 aparecen como separados la razón de que
51:15 parezcan separados porque esto está
51:17 dentro de ti que te huele y esto está
51:19 dentro de otra etiqueta huele y cada uno
51:21 tiene una etiqueta ley que es para
51:22 decirle que es un ítem ok entonces es la
51:26 manera de crear listas desordenadas
51:27 recuerda que estas listas no solamente
51:29 sirven para la navegación ni tan solo
51:31 para decir el contenido puedes
51:32 utilizarlo para cualquier cosa que tú
51:33 desees cuando hablamos por ejemplo de
51:35 múltiples ítems o por ejemplo necesitas
51:38 nombrar no lo sé quieres colocar países
51:40 por ejemplo existen muchos países y
51:43 quieres nombrarlos pues aquí en cada
51:45 etiqueta ley sería el nombre de un país
51:46 el nombre de otro país yo no vería otro
51:48 país acceder a esto es tan sólo una idea
51:50 recuerda que html es tan sólo una manera
51:53 de escribir un documento el documento al
51:55 final del contenido tú decides que
51:56 colocar en el documento quizás podría
51:58 ser de nuevo un bloque de cocina un blog
52:00 de desarrollo o un blog de no lo sé
52:03 manualidades o el tema que tú desees
52:06 cabida a nosotros crear cualquier tipo
52:08 de contenido muy entonces vamos a cerrar
52:11 esto de aquí o eliminarlo y esta lista
52:15 desordenada que hemos creado en realidad
52:16 pertenece la navegación entonces vamos a
52:18 cortarle y pegarla dentro de la etiqueta
52:20 now entonces de alguna manera gracias a
52:23 que he colocado esto de hecho voy a
52:24 ordenarlo un poco
52:26 de alguna manera como ya lo he escrito
52:28 esta lista desordenada simplemente
52:30 colocándolos dentro de esta etiqueta no
52:32 le estoy diciendo mi navegación tiene
52:34 como el list una lista desordenada y
52:38 aquí vamos a colocar estas pestañas de
52:40 hecho vamos a guardarlo y vamos a
52:42 reflejar lo y ahora si tenemos nuestro
52:45 nuestro encabezado luego en nuestra
52:47 navegación pero nuestra navegación no
52:49 luce como aquí se ve de hecho no luce
52:53 nada igual porque el propio navegador
52:55 tiene unos estilos por defecto tiene una
52:57 manera de agregarle estilos a lo que
52:59 creamos es decir apenas creamos un
53:00 elemento él le agrega él le da el cómo
53:03 va a lucir luego nosotros podemos
53:05 cambiarle cómo va a lucir para que luzca
53:07 de esta manera pero de nuevo eso con css
53:09 te voy a hablar de eso mucho más
53:11 adelante por ahora empecemos sigamos con
53:13 la estructura que estamos creando muy
53:16 bien entonces ahora tenemos una sección
53:18 principal
53:20 esta y ya estamos en el número 2 que es
53:23 la navegación vendría el número 3 que es
53:24 la parte principal de todo nuestro
53:26 contenido y luego la parte 4 que es una
53:28 barra lateral y finalmente un fútbol
53:31 vamos a escribir estas tres partes que
53:34 detallan el contenido
53:36 vamos a empezar con la sección principal
53:37 si esta es una sección principal vamos a
53:40 utilizar una etiqueta conocida como
53:42 section
53:46 esta etiqueta sección que tiene su parte
53:48 de abrir y cerrar es decir tiene que
53:52 empezar con etiqueta de abrir y otra
53:54 etiqueta para cerrar y aquí adentro
53:56 vamos a colocar contenido es así que la
53:59 sección sirve para nosotros colocar en
54:01 nuestro contenido principal adentro
54:03 por ejemplo en este caso tenemos un blog
54:05 con múltiples artículos ambos artículos
54:08 pertenecen a una misma sección la
54:09 sección principal entonces aquí vamos a
54:12 decir estos dos artículos pertenecen a
54:14 una misma etiqueta section entonces eso
54:17 significa que aquí dentro de esa
54:18 etiqueta sección vamos a escribir estos
54:20 dos artículos hay una etiqueta de html
54:24 para detallar los artículos los
54:27 distintos tipos de digamos contenidos
54:30 que se parecen por ejemplo en la sección
54:33 se encarga de poder almacenar el
54:35 contenido principal mientras que los
54:37 artículos se van a ir repitiendo observa
54:39 que aquí tenemos un artículo aquí
54:40 tenemos otro entonces aquí le vamos a
54:42 decir una etiqueta artículo
54:45 y como tenemos dos artículos vamos a
54:47 copiarlo otra vez debajo y aquí tenemos
54:51 otra etiqueta ártico en las etiquetas
54:54 artículos sirven para nosotros poder
54:56 detallar el contenido dentro contenido
54:57 que va a ser bastante repetitivo o un
55:01 contenido bastante común en nuestro en
55:03 nuestra página el artículo por ejemplo a
55:05 su vez tiene algunas características por
55:08 ejemplo tiene una fecha este primer
55:10 artículo tiene una fecha tiene también
55:11 un título y un párrafo el otro artículo
55:14 que es el casi lo mismo sólo que con
55:15 distinto párrafo y título etcétera
55:17 también tiene una fecha un título y un
55:19 párrafo entonces si te das cuenta todos
55:21 mis artículos van a tener esa estructura
55:23 vamos a empezar con colocándole un
55:26 título y un párrafo que ya lo habíamos
55:27 hecho recuerda que habíamos probado con
55:29 el encabezado tipo a h1 y la etiqueta p
55:33 entonces vamos a decir lo siguiente
55:35 vamos a decir un título
55:38 título h uno que diga título del 1er
55:43 del primer artículo
55:46 y lo mismo para el segundo artículo
55:48 vamos a decirle aquí
55:51 y aquí vamos a decirle un poco ordenado
55:53 título del segundo artículo vamos a
55:56 abordarlo vamos a refrescar y observa
55:58 que ahora aparecen con sus tipos de
56:00 encabezados de nuevo no lucen nada igual
56:02 al blog eso lo vamos a hacer luego pero
56:04 al menos ya le estamos diciendo que
56:05 quiere dos artículos de hecho si
56:07 quisieras ver el código fuente de la
56:09 página en tu navegador chrome das un
56:11 clic derecho ver código fuente de la
56:13 página yo creo que aquí está todo el
56:15 código que hemos venido escribiendo aquí
56:17 que aquí está el artículo y aquí está el
56:20 otro artículo y todo el contenido
56:21 restante vamos a continuar nuestros
56:25 artículos también tienen un párrafo
56:26 debajo del título entonces vamos a
56:28 colocar un párrafo vamos a ir a nuestro
56:31 contenido vamos a decirle debajo hay un
56:33 párrafo hay una manera de colocar texto
56:36 de ejemplo por ejemplo si vamos a la
56:38 imagen aquí estos textos no tiene ningún
56:40 sentido son textos en latín la razón de
56:43 que coloquen estos textos es porque no
56:45 han no saben de qué va a ir el contenido
56:48 del blog son solo saben que debe tener
56:49 esa estructura pero necesitan colocar
56:51 párrafos de prueba para ver cómo van a
56:53 lucir los artículos entonces aquí han
56:54 colocado un texto de prueba nosotros
56:56 también podemos hacer eso con nuestro
56:58 estudio escribiendo loren
57:01 y el número de letras que queremos por
57:04 ejemplo vamos a colocar unas 30 palabras
57:07 30 loren 30 damos un enter y observa que
57:10 se tengo un texto de prueba así de
57:14 rápido vamos a guardarlo con controles
57:16 vamos al navegador refrescamos y aquí
57:18 está nuestro texto de prueba y vamos a
57:21 copiar lo mismo para el segundo vamos a
57:22 escribir artículo debajo vamos a crear
57:24 una etiqueta para la etiqueta para
57:26 adentro vamos a escribir loren de 30
57:30 y observa que escribimos un texto de
57:33 ejemplo guardamos refrescamos y
57:36 exactamente lo mismo estos textos de
57:38 ejemplo son parte del editor no son
57:39 parte de html o algo por el estilo son
57:42 parte del editor para ayudarnos a
57:44 escribir texto de prueba simplemente
57:45 para que cuando estamos diseñando un
57:47 sitio y no sabemos que poner pero
57:49 queremos que beber o algún texto en
57:51 pantalla coloquemos ese texto de prueba
57:53 pero eso es tan solo un título y un
57:54 párrafo quisiera colocarle también en la
57:57 fecha ya que nuestro diseño tenemos la
57:59 fecha y de hecho voy a variar un poco el
58:01 diseño voy a colocar la fecha debajo del
58:02 título para hacer eso vamos a ir aquí
58:04 debajo del título de la primera
58:06 publicación y vamos a escribir una nueva
58:07 etiqueta llamada time
58:09 en este que está time aquí dentro vamos
58:11 a escribirle lo que queremos mostrar en
58:13 pantalla por ejemplo aquí podríamos
58:14 escribir domingo 10 de julio 2011 te
58:16 vamos a cambiar la fecha vamos a
58:17 colocarle por ejemplo publicado el 12
58:20 del 10 del 2018 pero de nuevo para dar
58:23 más información al navegador vamos a
58:25 escribir un atributo llamado day time
58:28 este day time aquí adentro vamos a
58:31 escribirle como valor la fecha el 12 del
58:34 10 del 2018 muy bien entonces lo mismo
58:38 vamos a pegarle para el segundo artículo
58:40 debajo del título guardamos vamos a
58:42 nuestro navegador y aquí tenemos las
58:45 fechas debajo del título esto lo vamos a
58:47 arreglar de nuevo con css pero al menos
58:50 por ahora estamos dando mucha
58:51 información de los artículos ya tenemos
58:52 la fecha el título y el párrafo a lo
58:55 importante también es que cada uno
58:57 podría tener una sección de comentarios
58:59 por ejemplo aquí en el diseño no está
59:02 pero podría tener cada una su propia
59:04 sección de comentarios
59:05 entonces si cada artículo tiene su
59:07 sección de comentarios luego podríamos
59:09 colocar una caja etcétera todo eso lo
59:12 vamos a ir arreglando entre unos minutos
59:13 por ahora vamos a continuar con la otra
59:15 parte principal que de mi contenido
59:18 recuerda que mi contenido tiene dos
59:19 partes una de la sección principal y
59:21 otra en una sección no tan importante
59:24 pero que hace referencia al contenido
59:26 principal esto lo podemos ver porque
59:28 aquí estando las fechas del contenido
59:29 principal obviamente las fechas no es
59:31 tan importante como el contenido
59:33 principal pero tiene relación con el
59:35 contenido
59:36 y aquí podés colocar otra cosa no tan
59:38 solo las fechas podrías colocar por
59:40 ejemplo quién es el autor del blog por
59:42 ejemplo aquí está cerca de aquí coloca
59:44 por ejemplo el autor del blog o podrías
59:46 colocar también quienes los últimos
59:49 modificaciones que hicieron la compañía
59:51 dueña del blog etcétera información
59:53 relacionada simplemente para decirle que
59:55 a nuestro html que éste es una parte
59:57 relacionada vamos a escribir una nueva
59:59 etiqueta al lado de sección recuerda que
00:00 estaba al lado de section llamado a site
00:04 esta etiqueta site es para colocar de
00:06 nuevo contenido relacionado pero que no
00:08 es tan importante vamos a escribir aquí
00:10 dentro de estas hay por ejemplo dos
00:12 mensajes como dos recuadros aquí hay dos
00:13 recuadros vamos a decir vamos a dejarlo
00:15 como mensaje 1 mensaje dos simplemente
00:17 también podríamos escribir archivo
00:20 luego las fechas por ejemplo aquí te das
00:22 cuenta que esto es una etiqueta
00:24 desordenada y aquí hay una fecha y otra
00:26 fecha y luego dos textos aquí también
00:29 este es otro mensaje vamos a colocarle 1
00:31 archivo y el otro y vamos a colocarle el
00:35 texto acerca de
00:37 acerca de por ahora vamos a abordarlo y
00:40 vamos a dejarlo así simplemente así como
00:43 están luego lo vamos a arreglar
00:45 tenemos ya nuestro contenido principal
00:47 nuestra barra lateral vamos a terminar
00:49 con el fútbol de hecho se ha notado la
00:51 barra lateral no ha aparecido al lado
00:53 porque por defecto las etiquetas tan
00:55 solo describen el contenido no como luce
00:57 vamos a agregar entonces nuestro pie de
01:00 página el fútbol
01:03 de la etiqueta footer en la side es para
01:05 contenido lateral y el futuro es para
01:08 decirle el pie de páginas de hecho de su
01:09 nombre es bastante descriptivo también
01:11 se conoce un poco de inglés entonces el
01:13 pie de página tiene la palabra derecho
01:15 reservado 2010-2011 vamos a cambiarlo y
01:18 vamos a colocarle por ejemplo derechos
01:20 reservados
01:23 reservados 2010 2018 vamos a colocarle y
01:28 aquí tenemos el fútbol de hecho si
01:30 guardamos y refrescamos aquí tenemos
01:33 derechos reservados y mi primer párrafo
01:36 html vamos a eliminar lo que habíamos
01:38 colocado por aquí un texto este es el
01:40 texto que habíamos escrito antes vamos a
01:42 eliminarlo vamos a dejarlo tan sólo lo
01:44 que necesitamos guardamos refrescamos y
01:47 ahora sí con este código html tengo una
01:50 estructura bastante típico a la imagen
01:51 pero voy a ir cambiando algunas cosas
01:54 para enseñarte a su vez otras etiquetas
01:56 html vamos a enfocarnos por ahora en el
01:59 artículo en el artículo nosotros tenemos
02:01 un h1 pero qué pasa luego si queremos
02:03 tener un subtítulo recuerda que tan sólo
02:05 podríamos utilizar otra etiqueta h de
02:07 distinto tamaño por ejemplo un h2s hd2
02:11 vamos a colocarle el subtítulo subtítulo
02:14 del primer artículo
02:17 y también vamos a darle una estructura
02:18 parecida al segundo entonces el segundo
02:20 artículo también tendrá un subtítulo
02:23 pero este es el segundo artículo
02:26 muy bien ahora si te das cuenta el
02:28 navegador utiliza las los encabezados
02:31 para mostrar información para determinar
02:34 la información principal pero tenemos
02:36 muchos h unos tenemos un 81 aquí en el
02:38 encabezado tenemos otra vez el h 1 en el
02:41 artículo y otra vez en el h un en un
02:43 artículo en un segundo artículo para
02:47 determinar el nivel de jerarquía y
02:50 decirle que este h 1 es el título de mi
02:52 página mientras que estos son secciones
02:55 o encabezados que pertenecen a artículos
02:57 vamos a englobar lo también dentro de
02:59 otra etiqueta h html en esta etiqueta se
03:02 llama la etiqueta h group
03:06 esto es tan solo para agrupar
03:08 encabezados para no tratar de darle el
03:11 mismo nivel de jerarquía que el resto de
03:13 h1 porque el otro h1 si es el título y
03:15 lo mismo vamos a utilizar en el segundo
03:17 artículo como tenemos mucho a muchos h
03:20 aquí y vamos a englobar lo dentro de un
03:22 h group
03:25 el h1 y el h2 vamos a colocarlo dentro
03:30 muy bien entonces aquí tenemos nuestros
03:32 encabezados agrupados esto se servirá
03:34 para luego cuando tengas mucha
03:35 información y detallando mucho mejor la
03:38 estructura de tu proyecto o de tu sitio
03:41 web ahora no tan solo quisiera tener una
03:43 chequera iniciada también tener una
03:45 sección en donde pudiera colocar
03:48 comentarios como te mencioné antes esta
03:50 sección sería como una especie de pie de
03:52 página de mi artículo y recuerda que
03:55 habíamos conocido la etiqueta llamada
03:56 footer la etiqueta footer no está
03:58 relacionada tan sólo con el pie de
04:00 página de todo el sitio web sino hace
04:01 relación al pie de página de un elemento
04:04 por ejemplo el artículo puede tener un
04:06 pie de página entonces aquí dentro el
04:08 artículo puede escribir un footer
04:11 recuerda incluso que el propio editor
04:12 también me auto completa el código decir
04:14 ciertas partes de código por ejemplo si
04:16 escribo footer
04:18 y presiona la tecla tab el auto completa
04:21 de esta manera muy bien entonces tengo
04:23 un pie de página de este artículo
04:25 simplemente y lo mismo puede hacer cual
04:27 segundo artículo este otro artículo
04:29 también puede tener un pie de página
04:31 footer
04:33 muy bien que voy a colocar dentro del
04:35 fútbol voy a colocar por ejemplo un
04:36 párrafo que diga comentarios y el número
04:38 de comentarios voy a colocar aquí una
04:40 etiqueta de párrafo y aquí adentro puedo
04:42 decirle comentarios y por ahora vamos a
04:45 colocar el comentario cero por ahora
04:47 para decirle que no hay ningún
04:49 comentario y lo mismo para el segundo
04:51 una etiqueta que diga comentarios en
04:54 este caso vamos a colocar los
04:55 comentarios 10 por ejemplo así de
04:58 sencillo muy bien esto es tan sólo para
05:00 diseñarlo vamos a verlo vamos a verlo en
05:02 pantalla no ha cambiado mucho en nuestra
05:04 página sigue luciendo exactamente igual
05:06 pero al menos tenemos más información
05:10 ahora en cuanto a los artículos
05:12 podríamos dejarlo así y de hecho lo voy
05:14 a hacer pero supongamos que queremos
05:16 conocer más etiquetas supongamos que
05:18 nuestra nuestra página en el aceite no
05:22 queremos colocar archivo de iu acerca de
05:24 si no queremos colocar citas de autores
05:26 o visitas que hemos encontrado algún
05:28 libro etcétera pero que está relacionada
05:30 con el blog que estamos creando entonces
05:34 vamos a escribir una cita de un libro
05:35 por ejemplo para eso se utiliza también
05:37 una etiqueta html conocida como blow
05:39 code
05:40 y como quiero colocar dos citas aquí
05:42 dentro de la side vamos a colocar dos
05:45 blow court cada cita aquí podríamos
05:48 escribirla aquí adentro pero por ahora
05:49 voy a escribir simplemente mensaje 1
05:53 y aquí voy a escribir mensaje 2
05:57 mensaje 2
05:59 si queremos decirle de donde hemos
06:01 tenido estas citas quizás no es una cita
06:02 de un libro o es una cita de por ejemplo
06:05 un sitio web lo hemos sacado de esta
06:08 frase de un sitio web aquí vamos a
06:09 escribir por ejemplo site y la dirección
06:12 de ese sitio web por ejemplo supongamos
06:14 que la han sacado de mi sitio web vamos
06:15 a colocarle a http dos puntos slice en
06:18 las fas web.com de aquí lo han sacado
06:21 por ejemplo la asistencia sería un
06:22 ejemplo o podrían haber sacado la citada
06:25 no lo sé de una página de facebook http
06:28 dos puntos las elas facebook.com las fas
06:32 web por ejemplo de esta página acerca de
06:35 la cita eso es tan sólo un ejemplo
06:36 podrían colocar es simplemente la url
06:39 desde donde están colocando el párrafo
06:41 pero quisiera enseñarle también otras
06:43 etiquetas muy importantes por ejemplo
06:45 qué pasa si de nuestra página que hemos
06:47 creado
06:48 queremos enviarlo a otra página por
06:51 ejemplo oxida un clic en un enlace que
06:52 le envía google por ejemplo vamos a
06:55 intentarlo vamos a ir a un en un
06:56 artículo en nuestro primer artículo y
06:59 debajo del fútbol vamos a crear un
07:00 enlace para probar simplemente vamos a
07:02 escribir aquí un enlace como creamos un
07:04 enlace también
07:06 etiqueta html llamada la etiqueta a esta
07:09 etiqueta que luce de esta manera la
07:12 etiqueta tiene un atributo llamado h ref
07:16 esteche rev le colocamos un igual y
07:18 entre con dobles comillas le colocamos
07:19 la dirección de a donde queremos que le
07:21 envíe por ejemplo quisiéramos que lo
07:23 envíe a google http dos puntos en las
07:26 elas google.com por ejemplo o quisiera
07:30 que lo envíe a mi propio sitio por
07:32 ejemplo mi sitio web es fastweb puntocom
07:34 y aquí podría colocarle a dentro de la
07:37 etiqueta le voy a colocar el texto que
07:40 quiero que vea el usuario no quiero que
07:42 ve el enlace esto es a dónde irá pero
07:44 quisiera que vea un título por ejemplo
07:46 le podría dar visita
07:48 mi sitio web
07:52 vamos a colocarlo bien y vamos a
07:54 abordarlo lo guardamos con controles y
07:56 vamos al navegador y observa que el
07:59 propio navegador le coloca un estilo
08:01 como de subrayado este subrayado sirve
08:04 para decirle al usuario y esto es un
08:06 enlace y de hecho aparece la mano cada
08:08 vez que lo posiciona el curso de encima
08:10 de este enlace y si doy un clic
08:13 observa que me lleva a mi página web de
08:17 hecho puede enviarte a cualquier sitio
08:18 no solamente mi página web a google a
08:20 cualquier dirección de internet que te
08:21 imagines por ejemplo google.com
08:24 vamos a volver vamos a refrescar y por
08:27 ejemplo le digo visita mi sitio web
08:29 vamos a cambiarlo vamos a decirle visita
08:30 google por ejemplo
08:33 guardamos refrescamos nuestra página con
08:37 este voto no también podríamos con
08:39 controller
08:40 efe 5 damos un clic
08:43 y observa que me está llevando a google
08:45 muy bien entonces con esto tenemos la
08:48 manera de enlazar eso se llama esos son
08:51 conocidos como los hiperenlaces recuerda
08:53 que te había mencionado que las páginas
08:55 html no son más que textos enlazados con
08:57 otros se pueden enlazar gracias a estas
08:59 etiquetas y es así de sencillo muy bien
09:03 no es lo único que quisiera colocar por
09:05 ejemplo qué pasa si quisiera tener o
09:08 colocar una dirección en mi página y
09:10 quisiera que el navegador se entere de
09:12 que es una dirección también hay una
09:14 etiqueta html de hecho esta dirección de
09:18 google.com podría ser considerada como
09:21 una dirección de internet entonces voy a
09:23 colocarlo dentro de una etiqueta llamada
09:24 address
09:27 y esto aunque no va a afectar en nada a
09:29 cómo luce mi sitio tan solo es para
09:32 decir la navegador y este visita a
09:34 google es una dirección de internet de
09:36 hecho aquí le colocan como un un estilo
09:39 de cursiva a mi texto para decirle que
09:42 está dentro de una etiqueta address
09:44 ahora en nuestra página no tenemos
09:46 imágenes como podemos colocar la
09:48 imágenes de nuevo con una etiqueta html
09:50 etiquetas se llama img y esa etiqueta
09:53 img no tiene una etiqueta de cerrado de
09:56 hecho tan solo se le coloca como las
09:58 etiquetas meta que habíamos escrito
09:59 antes otras etiquetas que no tienen un
10:02 par de cerrado porque esto es así porque
10:04 tiene un atributo que nos permite
10:06 colocar la dirección de internet con la
10:08 dirección de en donde va a encontrar la
10:10 imagen vamos a probarlo esta etiqueta
10:12 tiene un atributo llamado h perdón src
10:17 no es h refino ese reciente source
10:20 esta etiqueta o este atributo de la
10:22 etiqueta nos permite decirle en dónde va
10:24 a tener que encontrar la imagen en estos
10:27 momentos nosotros íbamos a nuestro
10:29 escritorio
10:30 tenemos nuestra carpeta nuestra carpeta
10:34 de primer sitio web y adentro tenemos
10:36 tan solo un archivo html vamos a colocar
10:39 una imagen en este caso voy a colocar mi
10:41 logo en mi logo de mi sitio web voy a
10:44 colocarlo dentro de esta carpeta voy a
10:47 renombrar lo de hecho voy a cambiar el
10:49 nombre voy a llamarlo el logo esta
10:52 imagen tiene voy a ver de qué tipo de
10:54 imágenes es una imagen
10:57 png puedes colocar cualquier otro tipo
10:59 de imagen jpg png gif etcétera en este
11:03 caso tengo una imagen png vamos a
11:05 colocarla dentro de la carpeta y observa
11:07 que como tengo abierta esta carpeta
11:09 dentro de visual studio coach en la
11:11 imagen también ahora aparece en mi
11:14 primer sitio en lo está leyendo sabe que
11:16 aquí dentro de esa carpeta también hay
11:17 una imagen dice el lobo png si damos un
11:20 clic de hecho también podemos ver la
11:22 imagen dentro del propio editor pero no
11:24 es lo importante verlo dentro del editor
11:26 sino llamarlo dentro de mi carpeta tengo
11:29 el índice html y el logo la imagen voy a
11:33 utilizarlo desde img el su atributo src
11:37 le voy a decir tomar la imagen de nombre
11:40 logo punto png de hecho que también me
11:43 está apunto un auto completado el editor
11:45 vamos a guardarlo y vamos a ir a nuestra
11:48 nuestra página vamos a refrescar lo y
11:52 observa que está leyendo la imagen por
11:54 qué porque está esta imagen está dentro
11:56 de la misma carpeta ya que le he dicho
11:57 el origen es una imagen llamada el logo
12:00 png es así de sencillo
12:03 luego cuando tengamos múltiples páginas
12:05 son múltiples imágenes quisiéramos más
12:07 orden no importa podríamos crear una
12:09 carpeta aquí hay una opción de dice
12:11 nueva carpeta damos un clic y aquí por
12:13 ejemplo yo quisiera guardar todas mis
12:14 imágenes voy a decirle y aquí voy a
12:17 abordar todas mis imágenes entonces el
12:19 logo punto png lo voy a arrastrar hasta
12:21 dentro de la carpeta dice está seguro de
12:24 qué desea mover el logo le digo mover y
12:27 ahora el logo está dentro de la carpeta
12:28 de imágenes o imágenes en inglés
12:31 entonces si yo refresco mi navegador ya
12:35 no aparece pero parece un icono de
12:36 imagen como diciendo aquí debería ir una
12:38 imagen el problema es que ahora ya no
12:41 está dentro de la misma carpeta sino sea
12:43 dentro de otra carpeta llamada imágenes
12:45 entonces voy a decirle dentro de la
12:47 carpeta imágenes toma el archivo logo
12:50 punto png guardo voy al navegador y aquí
12:53 aparece de nuevo es la manera en la que
12:56 puedes ir agregando imágenes de hecho no
12:58 tan sólo puede ser la imagen que tienes
13:00 aquí localmente podría colocar una
13:02 dirección de internet de otra imagen por
13:04 ejemplo si tienes una imagen subida
13:05 pinter es a facebook a instagram puedes
13:08 copiar la dirección de internet
13:09 simplemente y colocarla
13:11 y eso ya depende de qué es lo que
13:12 quieres mostrar en tu página finalmente
13:15 dentro de las etiquetas también podemos
13:17 utilizar otras etiquetas html que
13:19 permiten decirle al párrafo algunas
13:24 partes importantes por ejemplo
13:26 supongamos que este es un párrafo
13:27 importante por alguna razón queremos
13:30 colocar algunas palabras que resalten
13:32 dentro de este párrafo por ejemplo si
13:34 por ejemplo esto fuera una cita aquí
13:37 quisiéramos resaltar una palabra en
13:39 específico o una frase en específico
13:41 para eso también podemos decirle al
13:43 navegador más información a través de
13:44 etiquetas de html
13:46 por ejemplo nosotros quisiéramos cambiar
13:48 el tamaño a un tamaño pequeño de ésta de
13:51 este texto de aquí vamos a cortarlo y
13:53 vamos a colocarlo dentro una etiqueta
13:54 llamada small
13:57 tiene un par y adentro le colocó el
13:59 texto si guardo y refresco mi página
14:03 observa que aquí está el texto y aquí
14:05 está esa etiqueta small con el texto
14:09 dentro observa que el texto es más
14:10 pequeño que el resto de texto que está
14:12 al lado y podríamos tener otros
14:14 etiquetas también no solamente la
14:15 etiqueta small por ejemplo tenemos una
14:17 etiqueta bastante conocida como site que
14:20 ya habíamos probado pero aquí también
14:21 podríamos utilizarla por ejemplo vamos a
14:23 probar esta de aquí podemos ir site
14:28 y adentro le colocamos ese texto
14:30 guardamos refrescamos y aquí está esto
14:33 es una cita observa que el texto aparece
14:35 como en cursiva
14:37 y de esta manera también podríamos tener
14:38 otros por ejemplo podríamos tener otra
14:41 etiqueta conocida como spam vamos a
14:43 buscar un texto por aquí vamos a buscar
14:45 dentro de la etiqueta de spam
14:49 este tiquete expansys refrescamos vamos
14:51 a buscar este texto de kim que está
14:53 justo después de smolt aquí es small y
14:57 porque vamos a encontrar la utilidad
14:59 observa que no ha afectado en nada
15:00 porque porque esta etiqueta spam no es
15:02 para tratar de cambiar el contenido sino
15:05 es para luego poder alterarlo a través
15:07 de ccs o poder hacer algún cambio con
15:10 esto es lo que puedes hacer con html de
15:13 nuevo hay más elementos html más
15:15 etiquetas y estas son las etiquetas más
15:18 utilizadas y hay otras que puedes
15:20 utilizar dependiendo de qué es lo que
15:22 necesites pero eso ya depende de cómo
15:25 vas creando sitios web te recomiendo que
15:27 aprendan las etiquetas mientras vas
15:28 creando sitios web de esa manera no se
15:30 te van a olvidar porque la estás
15:31 utilizando al final de este vídeo voy a
15:34 dejarte enlaces a dos páginas muy
15:37 utilizadas llamada la mozilla de belo
15:39 pair network en donde hay tutoriales de
15:42 html de etiquetas específicas para html
15:44 y otro llamado la w3c que es mucho más
15:47 sencillo incluso y te da ejemplos y
15:49 mientras te va enseñando las etiquetas
15:51 ambos enlaces te lo voy a dejar la
15:53 descripción
15:55 así es como hemos terminado html ahora
15:58 sabes que esto no luce nada bien sabes
16:01 que esta página no luce nada bien pero
16:03 en realidad le estamos dando mucha
16:05 información al navegador sabe como el
16:07 navegador en nuestro contenido sabe que
16:09 esto es un comentario o sabes que este
16:10 es un párrafo es así como el navegador
16:12 se entera de que contenido es el que
16:14 tiene dentro pero al final esto tiene
16:17 que ser visto por un usuario y es por
16:19 eso que html va complementado con otra
16:22 tecnología va complementado con css por
16:26 eso al final de este vídeo he dejado el
16:28 curso de css que está ha anexado este
16:30 vídeo es decir que en este curso vamos a
16:32 estilizar esta aplicación este es un
16:35 curso de css para principiantes para
16:37 personas que no saben absolutamente nada
16:38 css así que luego de este vídeo te
16:42 recomiendo que veas ese para que
16:43 termines este sitio web y luzca justo
16:45 como el diseño mientras que html tan
16:48 solo le dice al navegador este es mi
16:49 contenido css se encarga de pintarlo de
16:52 arreglarlo y tenemos que escribirlos
16:54 nosotros mismos nosotros mismos tenemos
16:56 que escribir código de css es decir que
16:59 cuando creé sitios web necesitas
17:01 aprender tanto html
17:02 ss para que al final luzca un sitio web
17:04 profesional o al menos un sitio web que
17:06 luzca bien en este vídeo es así como
17:09 hemos terminado con html te recomiendo
17:11 seguir el curso de css para que puedas
17:13 terminar este sitio web así que eso ha
17:16 sido todo por este vídeo
Tags: curso, principiantes
11. Imágenes ǀ Curso de Html5
Curso Completo de HTML5, CSS3 y JavaScript Parte VII

References: in fine
 artículo
12
 artículo
54
 artículo
55
 artículo
55
 artículo
55
 artículo
58
 artículo
02
 artículo
02
 artículo
04
 artículo
04