Vamos a comenzar con el código estaremos escribiendo código desde ya para comenzar a aprender un poco
más sobre las tecnologías web y comenzaremos escribiendo código HTML y después un poco de CSS y de ahí
estaremos complementando todo.
La idea es construir este proyecto aquí tengo los diseños es un sitio web con 7 secciones así que estaremos
viendo cómo construirla no va a tener así nada de PHP de momento ni JavaScript.
Iremos paso a paso aprendiendo lo que es cada tecnología.
Primero estaremos construyendo lo que es el john Peach la página principal de estos archivos los vas
a encontrar para descarga en este video así que los puedes descargar para tenerlos como referencia y
puedes ver que tenemos este diseño.
La idea es convertir esta imagen a un sitio web y lo estaremos haciendo paso a paso.
Primer paso vamos a crear una nueva carpeta y voy a nombrar aquí bienes raíces así se llama el proyecto
y lo vamos a crear.
Voy a estar utilizando Visual Studio Kot para esta parte así que vamos a abrir estudio y vamos a crear
nuestro primer archivo siempre.
Todo archivo principal.
Cuando abres un sitio web el archivo que se carga tienen que tener un nombre en específico y siempre
se llama índex apuntó HTML.
Si utilizas PHP obviamente será en PHP.
Usualmente va a ser indexando HTML a crear índex HTML.
De esa forma se va a cargar por default que viene siendo este archivo y sus contenidos son muy importantes
siempre tiene que llamarse así el archivo principal al menos cuando creas un sitio web en HTML siguientes
pasos tenemos utilizando una extensión puedes instalar extensiones en este botón que está aquí en este
cuadrado Boscán que se llama Live Server.
La recomiendo mucho.
Estaremos utilizando esta extensión particular si no está instalada solamente aquí por ejemplo install
te va a pedir que se vuelva a reiniciar lo que viene haciendo estudio para que tomen los cambios Dale
reiniciar y con eso es suficiente.
Una vez que se instala esta extensión puedes dar botón derecho Akita aparece esta opción que dice Abrir
con laisser ver eso nos va a crear un pequeño servidor que nos va a permitir por ejemplo ir haciendo
o escribir algo voy a cerrar esta parte de aquí que nos va a permitir agregar HTML nos permitirá agregarse
CSS y los cambios se van ir o van a irse tomando automáticamente vas a guardar cambios si no vas a tener
que hacer nada se van a reflejar automáticamente esas extensiones recomiendo mucho.
Una vez que finalizamos esta parte siempre puedes tener el servidor aquí.
Eso va a detener el servidor por ejemplo sin tratar de abrirlo puede ser que nos marca un error y para
volverlo a ejecutar digamos un día siguiente vuelves a abrir el curso.
Quieres continuar.
Siempre botón derecho open world Server y va a abrir el servidor nuevamente.
Puede ser que tenga unos errores nos dice que no puede funcionar si no hay un body sino un jet.
Estas son se le conoce como etiquetas son básicas en HTML son las que le dan estructura a tu sitio web.
Si estás utilizando estudio con solamente presiona o genera lo que viene siendo este signo de exclamación
puede ser que Kilis abreviación de Emet.
Enseguida vemos que es MKT y presiona Tab al presionar TAB se te autocompletar y te genera lo que viene
siendo un jeep.
También el jeep la apertura y el cierre.
Y lo que viene siendo un body orita vemos la diferencia en ambos.
Todos rodeando lo que viene siendo un HTML.
Puedes ver que lo que viene siendo HTML tiene estas animaciones es decir tenemos este HTML y luego acá
abajo tenemos la etiqueta que cierra los HTML.
Dentro tenemos este ya quisiera el jeep y luego el body y así vas a estructurar la mayoría de tus sitios
web vaciarán y dando elementos es decir vas a poder colocar digamos una sección y dentro vas a colocar
una imagen algunos enlaces algún texto todo eso lo iremos viendo paso a paso pero muy importante conocer
que hay etiquetas de apertura y etiquetas de cierre pero puedes ver que en este caso hay otras etiquetas
que solamente son de apertura como éstas que dicen meta las que dicen meta puedes ver que no existe
una etiqueta meta de cierre puedes ver que estas solamente se queda abierta y así es como funciona algunas
tienen otras no desiertas así como las vas a identificar por esto que estas tienen cierre y otras no.
No hay una regla pero la mayoría tienen apertura y cierre las estaremos viendo a detalle en esta parte.
En este proyecto HTML algo más puedes ver que tenemos dos secciones el Eger y el body.
Básicamente lo que está en el jefe es lo que se comunica con lo que viene siendo el navegador.
Puedes ver que existen estas etiquetas meta esto es lo único que le dicen es como debe de verse el sitio
web y bueno aquí viene siendo lo que se le conoce como leñes es decir utiliza la nueva versión de para
poder mostrar lo que tenemos aquí aparece.
Este taller es lo mismo que está aquí arriba por ejemplo si aquí le pongo bienes raíces y guardo cambios
recargamos a equipos de bienes raíces.
Entonces esta parte lo que está en el Jet es lo que se comunica es la parte por así decirlo interna
de tu sitio web lo que está dentro del Bodies lo que es visible o se recomienda que sea visible digamos
un H1.
No te preocupes que no sabes qué es un H1 pero digamos que ponemos aquí al mundo el típico ejemplo de
Hola mundo en cualquier lenguaje de programación HTML no es un lenguaje de programación pero sí es un
lenguaje entonces aquí tenemos Hola mundo puedes ver que lo que tengo en el bodhi es lo que se ve en
pantalla mientras que lo que tengo en el Jet no se ve en pantalla eso se ve en el navegador como puede
ser este bienes raíces ahora algo importante HTML es muy flexible demasiado flexible que por ejemplo
tú puedes cortar esta parte y ponerla aquí y este H1 ponerlo aquí arriba.
Y si guardas cambios puedes ver que se siguen viendo es decir HTML no te va a decir que hay un error
este Tirol debería estar en el Jet este H1 debería estar en el body y no te lo va a decir entonces eso
es algo importante si has programado en una escuela digamos que aprendiste qué aprendiste IAVA o sisar.
Algunos de estos lenguajes que si hay un error no compilan HTML no es así.
Algo importante voy a deshacer y colocar todo como estaba anteriormente también HTML es muy flexible
que puedes crear por ejemplo una etiqueta llamada Pablo o en este caso por ejemplo y darle recargar
y puede que hizo el mundo esta etiqueta si bien funciona y muestra algo no es una etiqueta que exista
por lo tanto es importante escribir código HTML reconozca códigos que HTML sea parte de su estándar
y eso es lo que estaremos haciendo en este capítulo.
Mencioné anteriormente que solamente con escribir este signo de exclamación y presionar TAB se auto
completaba.
Esto se conoce como EMET y no lo tienes que aprender ya pero puedes volver a ver este video una vez
que finaliza la parte de HTML M te va a ayudar a salvar mucho tiempo cuando escribas código HTML.
Digamos que quieres crear tres párrafos puedes poner P por 3 y te va a generar 3 párrafos.
Es una herramienta que te va a salvar mucho mucho tiempo y es por eso que es una de las razones que
hoy en día utilizo estudio Coupet Emet lo puedes instalar en Atom blindex y también en brackets pero
por default ya viene cargado en estudio a diferencia de los otros tres entonces eso lo hace una excelente
opción si guardamos cambios puedes ver que no hay nada que mostrar pero el siguiente paso es en los
archivos del curso vas a encontrar también los diseños pero también en esta carpeta de imágenes contiene
todas las imágenes que vamos a utilizar para este proyecto habrá lo que viene siendo bienes raíces y
arrastra esta carpeta hacia acá o arrastrar así y en esta carpeta con todas las imágenes es importante
que esté dentro tengamos índex HTML y una carpeta llamada M.G..
Aún no estaremos utilizando imágenes pero más vale ya tenerlas copiadas como está aquí.
Entonces bueno al final no escribimos mucho HTML puedes ver que esto es lo que nos generó EMET y estudio
Kopp.
Pero a partir del siguiente video estaremos ya escribiendo un poco de código y comenzaremos con los
textos.
Comenzaremos con la parte visible del sitio web que es el contenido así que veámoslo en el siguiente
video.