hola qué tal y bienvenidos a un nuevo

vídeo de contro del profe vamos a seguir

con nuestro proyecto de conectar un
sitio web a una base de datos lo que les
quiero mostrar ahora es lo que queremos
lograr es que conste este proyecto yo
estoy proponiendo les generar una
especie de mini red social de acuerdo
que tenga un perfil unos amigos y te
permita cargar algunas fotos pero toda
esta información deberá también
guardarse en una base de datos listo
va a ser una estructura simple y
sencilla a manera de introducción a lo
que es el html css me voy a preocupar un
poquito más de las cuestiones
funcionales de este proyecto en pantalla
les estoy mostrando lo que sería el
perfil del usuario de nuestra red social
y esto tendría su foto de perfil una
descripción en el perfil mostraría
alguno de los amigos y mostraría también
algunas de las fotos de acuerdo en la
parte superior ahora abre un menú por el
cual podría desplazarse el usuario por
ejemplo empecemos por el menú inicio en
el menú inicio vamos a tener dos
formularios un formulario para las
personas que quieran registrarse a
nuestra mi mi red social donde tendría
que colocar algunos datos no el nickname
la contraseña listo su nombre su
apellido
su email la edad y otra descripción y
esto y eso sería suficiente para que
pudiera registrarse en la red social
toda esta información se guardaría en la
base de datos bueno acá están los
botones para registrarse para abordar
luego de esto una vez que ya esté dentro
de nuestra base de datos recién podría
iniciar sesión y aquí tenemos este otro
formulario donde podría su nickname y su
contraseña
luego de le daría al botón iniciar
sesión y éste le dirigiría a su perfil
esta página que ya les hemos mostrado
de acuerdo que más podríamos ver en el
mismo perfil donde aparece la sección de
los amigos también vamos a ver la forma
en que podamos comunicarnos con el
perfil del del amigo por ejemplo si le
damos clic en el botón ver perfil nos
debería dirigir a un perfil similar al
que tiene el usuario
otra parte del menú superior sería este
la página de los amigos aquí podríamos
ver la lista de todos los amigos
completos de acuerdo su foto de perfil y
un botón que nos guía al perfil del
amigo
luego habría un apartado mis fotos
en mis fotos veríamos todas las fotos
que se han cargado al sitio web que
funcionalidad va a haber aquí aquí vamos
a poder nosotros tener un botón que nos
permita cargar fotos a nuestro sitio web
va a haber un botón examinar dónde vamos
a buscar el archivo de la foto que
queremos cargar para luego esta foto
será almacenada en nuestra base de datos
ay quiero hacer un paréntesis no vamos a
almacenar la imagen en sí en la base de
datos simplemente vamos a imaginar la
ruta de acceso a la imagen listo y estas
fotos se irían cargando y guardando
en esta página y finalmente el último
componente sería buscar amigos aquí
veríamos no solamente
a los amigos
sino también miraríamos perdón perdón
solo miraríamos a las personas que están
registradas en nuestro sitio web y que
no son nuestros amigos visto dónde
podríamos agregarlos como nuestros
amigos esta relación de quiénes son
nuestros amigos y quiénes no también
vamos a guardarla en la base de datos
listo ese sería
un pequeño resumen de lo que vamos a
terminar logrando en todos estos vídeos
que vamos a ir subiendo en el canal
voy a intentar terminar todo este
proyecto antes de tres semanas listo esa
base en mi promesa con ustedes subir
todos los vídeos antes de tres semanas
ahora vamos a empezar a desarrollar esta
página web
habíamos dicho en los vídeos anteriores
que la mascarita a la parte visual se
hacía en html css
y listo
entonces vamos a empezar con html
recordemos que el html es un lenguaje de
marcado que nos da la estructura de la
página web de acuerdo nos indica dónde
van los componentes y el css es el que
le da el formato y el estilo para que
sea más visual nuestra página web son
dos lenguajes diferentes y vamos a ver
el código de uno y el código del otro
pero lo que hay que hacer primero es
saber que yo estoy trabajando con la
aplicación samp el samp es un paquete
que me permite trabajar con diferentes
softwares listo con esto voy a
desarrollar en este proyecto
luego como voy a trabajar con php es muy
importante que los archivos los guarden
una carpeta especial en un vídeo
anterior cuando estábamos trabajando con
php habíamos visto que teníamos que ir a
la ruta samp y htv listo discos e íbamos
a sanz
a la carpeta del sham luego a la carpeta
ht 2 y aquí adentro nosotros y vamos a
guardar todo nuestro proyecto listo y
podríamos crear una carpeta especial
para este proyecto le pueden poner por
ejemplo página web con esto yo le estoy
poniendo en este caso red social y
dentro del red social habría que crear
otras carpetas una carpeta en este caso
del expuesto css donde voy a guardar
todos los archivos de este lenguaje otra
carpeta que le he puesto y m
img qué quiere decir es la abreviación
de imágenes o sea pueden poner la imagen
si quieren el nombre completo y ahí
adentro vamos a borrar todas las fotos o
imágenes que vamos a utilizar para el
desarrollo de nuestra página web
listo ahí
y en general y afuera podemos guardar
todos los html de cuadro todos los
archivos html
muy bien
yo ya cree el notebook recuerden que no
aparte es un editor de texto
de acuerdo y utilizo notepad para
escribir ahí mi código de html
otra cosa muy importante en este
proyecto yo no voy a utilizar ningún
framework o plantilla listo vamos a
hacer todo el código desde cero para
poder entender y conocer mejor estos
lenguajes entonces voy a abrir un editor
de texto que es el notebook o también
podrían trabajar directamente en un bloc
de notas lo importante es que al guardar
el documento ustedes
y le pongan que es de tipo html cuando
guarden su documento lo pueden guardar
como y el archivo lo guardan con la
extensión punto html así tu navegador va
a poder abrirlo listo ahora voy vamos a
empezar
a editar html
estoy abriendo aquí una pestaña que
tengo en blanco que había creado
aquí tenemos nuestro html que habíamos
dicho de html que era este el lenguaje
que nos permite dar una estructura a la
página web nos va a decir qué elementos
va a tener nuestra página web
el html trabaja con etiquetas de acuerdo
etiquetas de marcado marcas que nos dice
aquí está la cabecera aquí vas a poner
una imagen aquí vas a poner una sección
lista son etiquetas en html5 existe
cualquier cantidad de etiquetas que es
muy difícil que lleguemos a conocerlas
todas de hecho ni los más expertos
desarrolladores las conocen todos
entonces en este vídeo yo les voy a
mostrar las más esenciales que nos van a
permitir cumplir con el objetivo de
nuestro proyecto
vamos a hablar entonces de las etiquetas
y vamos a ver qué aspecto tienen estas
primero que saber que las etiquetas
tienen una apertura y un cierre por aquí
tengo el ejemplo de una estructura de
etiqueta
y esta especialidad
una estructura de etiqueta de acuerdo
aquí estoy indicando que estoy abriendo
la etiqueta con este componente y aquí
estoy indicando que la estoy cerrada
y esto la mayoría de etiquetas empiezan
con un nombre y terminan con el mismo
nombre pero con una rayita oblicua
delante esto está marcando el inicio y
el final de esta etiqueta por ejemplo
una etiqueta de este tipo serían las d
las de hipervínculos
por ejemplo este de aquí
para qué sirve esta etiqueta esta
etiqueta me permite hacer o poner
vínculos a otras páginas oa otros
documentos de acuerdo entonces se abre
una y se cierra de esta forma de acuerdo
ahora también existen otro tipo de
etiquetas que no se cierran y se abren
de la misma forma sino por ejemplo tengo
una por aquí la cala de imagen por
ejemplo
la imagen es diferente
la de imagen es una etiqueta que sirve
para poder insertar una imagen nuestro
en nuestra página web se abre de esta
forma con img de imagen obviamente todas
las etiquetas hacen relación a palabras
en inglés imagen se abre esta forma pero
simplemente se cierra de esta forma no
ya no se cierra como habíamos venido
viendo de esta forma con la rayita
oblicua
img listo ya no se cierra de esta forma
entonces tenemos esas dos clases de
etiquetas dos clases de apertura y
desertado de las mismas
qué más debemos saber de las etiquetas
en la parte interior de las etiquetas
esas etiquetas pueden traer atributos de
acuerdo atributos serían algunas
características de esta etiqueta por
ejemplo
en esta etiqueta imagen tenemos los dos
atributos crc y alt de acuerdo para qué
sirve el atributo crc ser ese es la
abreviación de source de acuerdo que en
español significa fuente y en esta en
este atributo nosotros deberíamos
colocar
la fuente de donde nosotros estamos
extrayendo la imagen que vamos a agregar
y en alt que es la abreviación de
alternative sería lo que vamos a poner
en caso la fuente fallase por algún
inconveniente no entonces éste sería un
texto que aparecería en caso no
pudiéramos llamar a la imagen listo
entonces y este es el funcionamiento que
tienen todas las etiquetas en html tiene
una apertura un cerrado y dentro tienen
algún atributo que les ayuda a mejorar
este su uso
muy bien
dicho esto
pasemos ahora
a hablar
de la estructura más más conocida en
html
toda página web
en general tendría en común esta misma
estructura listo eso sería como casi lo
básico
por aquí tengo un código lo voy a pegar
por acá
vamos a eliminar esto de aquí listo
me faltaría cerrar estas etiquetas
de acuerdo este sería como que la
estructura que todas las páginas webs
tienen listo
primero tenemos esta parte de aquí este
dock type que es lo que hace a veces no
es muy necesario colocarlo pero le
indica más que todo el navegador
que el código con el que estamos
trabajando el código de html que estamos
trabajando es la versión 5 o sea el html
5 listo
luego se abren estas dos etiquetas html
y se cierran las html son las etiquetas
más exteriores que indican que vamos a
hacer código de html
y luego las hijas del html vendrían a
ser
la etiqueta head
y esto lo tenemos ahí que se abre y se
cierra y la etiqueta bold listo
que marcan estas etiquetas la etiqueta
set
se usa para envolver esta cierta
información que le vamos a dar al
navegador de acuerdo a esta información
o lo que pongamos dentro de esta
etiqueta no va a ser visible para el
usuario
dentro de esta etiqueta podemos colocar
otras etiquetas que serían como las
hijas de esta etiqueta padre por ejemplo
la etiqueta de título de acuerdo en este
caso yo estoy creando una html que va a
tener el título red social donde va a
aparecer este título este título va a
aparecer en la pestaña de la de la
página que hayamos abierto o la etiqueta
que vemos aquí es la etiqueta meta que
tiene el atributo de hacer esto más que
nada le va a indicar al navegador web
con qué tipo de caracteres vamos a
trabajar le estamos dando el valor de
ute f8 lo que nos va a permitir crear
una gran cantidad de contenido por la
variedad de caracteres que hay
otra etiqueta importante es link y aquí
más que nada la vamos a utilizar para
hacer referencia a nuestros archivos css
listo aquí en link vamos a unir nuestro
nuestro documento html con nuestro
documento css recordar que el html era
la estructura pero para darle formato
darle estilo necesitamos de un cese es
es en esta etiqueta donde los vinculamos
en el atributo h le ponemos la ruta de
acceso a este archivo y en el atributo
red le indicamos qué tipo de relación
hay entre html y este archivo que
estamos conectando en este caso la
relación es una hoja de estilo listo
estas etiquetas están dentro de la
etiqueta head que nos permite darle
información al navegador esa información
oculta que el usuario no va a ver
para colocar información que el usuario
vea la vamos a colocar dentro de la
etiqueta body es aquí donde vamos a
conocer en próximo vídeo
otras etiquetas que nos van a permitir
insertar imágenes vídeos e hipervínculos
enlaces a otras páginas y demás cosas
que el usuario va a poder ver y con las
cuales va a poder interactuar
quiero terminar este vídeo mostrándoles
la diferencia de utilizar un documento
html puro sin el css
listo acá estamos en nuestra página que
estamos que vamos a crear y esto ya
tiene css mezclado con html listo voy a
quitarles ese voy a quitar ese link que
habíamos visto lo voy a eliminar
voy a guardar esto y voy a actualizar
ahora el navegador y aquí vemos html
puro sin css
la diferencia es notoria acá está una
imagen acá hay enlaces otra imagen texto
listo pero no tiene una presentación
este con un formato un estilo no se ve
ordenado es diferente a por ejemplo esta
parte de aquí no que está un poquito más
estructurado que tiene un poquito más de
forma entonces esa es la diferencia
entre utilizar html solo o ponerle una
hoja de estilo css vinculada sería todo
el próximo vídeo vamos a ir diseñando
las demás páginas webs de nuestro
proyecto final sería todo y si no
practicas ahora si no haces
modificaciones a los códigos si no
averigua sobre más etiquetas entonces
cuándo