Este es el Tutorial 1 sobre como crear una pagina web con html, php y mysql desde cero, aquí te mostrare la introducción del entorno en el cual trabajaremos, así como también te indicare los primeros pasos que seguiremos para crear nuestra primera pagina web.
Lo que necesitaremos es descargar el programa XAMPP que contiene los servidores que necesitaremos para emular y probar nuestras paginas web y base de datos que vayamos creando a lo largo de este curso de html, php y mysql desde cero.
También es necesario descargar el editor de texto Notepad++, que nos servirá para ir agregando y editando el código necesario para crear el diseño de nuestras paginas web, así como el código necesario para la programación de los botones, cuadros de texto y base de datos de nuestra pagina web.
XAMPP es un paquete de software libre y Gratuito, que consiste principalmente en el sistema de gestión de bases de datos MySQL, el servidor web Apache y los intérpretes para lenguajes de script PHP y Perl. El nombre es en realidad un acrónimo: X, Apache, MariaDB/MySQL, PHP, Perl.
Los componentes mínimos que instala XAMPP son el servidor Apache y el lenguaje PHP, pero XAMPP también instala otros elementos. En la pantalla de selección de componentes puede elegir la instalación o no de estos componentes. Para seguir estos apuntes se necesita al menos instalar MySQL y phpMyAdmin.
Si se ha iniciado el servidor Apache, para comprobar que todo funciona correctamente, hay que escribir en el navegador la dirección http://localhost y XAMPP abrirá el nuevo panel de administración web (dashboard).
¿Cuáles son los requisitos para instalar XAMPP en Windows 10?
Los requisitos mínimos recomendados son 256 MB de RAM para un sitio web de un único ordenador y 85 MB de almacenaje, aunque esto no baste para un sitio público frecuentado o un sitio con subidas de archivos habilitadas.
Notepad++ es un editor de texto y de código fuente libre con soporte para varios lenguajes de programación. Con soporte nativo para Microsoft Windows. Se parece al Bloc de notas en cuanto al hecho de que puede editar texto sin formato y de forma simple.
¿Por que usar Notepad++?
Notepad++ nos permite localizar y editar con rapidez la línea aludida.
Nos permite trabajar con múltiples archivos abiertos en diferentes pestañas pero en una sola ventana. Con el bloc de notas necesitaríamos por el contrario numerosas ventanas.
¿Cómo usar Notepad++ con HTML?
La forma fácil, es que le des al menú de inicio, escribas notepad++, y hagas clic derecho sobre el icono > abrir ubicación (se abrirá la carpeta con el acceso directo, otra vez clic derecho y abrir ubicación).
Aquí podrás descargar la versión mas reciente de Notepad++ para Windows de 32 y 64bits. Simplemente descarga y ejecuta el instalador.
¿ Cuales son las Características de Notepad++?
Coloreado y envoltura de sintaxis: si se escribe en un lenguaje de programación o marcado, Notepad++ es capaz de resaltar las expresiones propias de la sintaxis de ese lenguaje para facilitar su lectura.
Pestañas: al igual que en muchos navegadores, se pueden abrir varios documentos y organizarlos en pestañas.
Resaltado de paréntesis e indentación: cuando el usuario coloca el cursor en un paréntesis, Notepad++ resalta este y el paréntesis correspondiente de cierre o apertura. También funciona con corchetes y llaves.
Grabación y reproducción de macros.
Soporte de extensiones: incluye algunas por defecto.
MIRA EL VIDEO DE LA EXPLICACIÓN COMPLETA A CONTINUACIÓN:
¿Como Crear mi Primera Página con Html?
Para crear tu primera pagina web en html, debes crear un nuevo documento, para ello ingresa a notepad++ y da clic en archivo y luego clic en Nuevo.
Para guardar tu documento, selecciona la siguiente ubicación: c/xampp/htdocs/ y crea una nueva carpeta para tu proyecto, por ejemplo "Mi primera Pagina".
Abre la carpeta creada y dentro de ella, guarda el documento con el nombre de index.html
Ahora si puedes empezar a colocar el código de tu primera pagina como muestro a continuación:
<html>
<head>
<h1>Mi primera Pagina</h1>
</head>
<body>
<h2>Gracias por leer este articulo y recuera suscribirte a mi canal de youtube PC fácil Digital</h2>
</body>
</html>
Ingresado el código ya puedes probar tu pagina con el servidor apache:
Inicia el servidor Apache, para comprobar que todo funciona correctamente,
Escribe en el navegador la dirección http://localhost/Mi primera Pagina/index.html y veras la página que acabas de crear.
Recuerda que este es el Tutorial 1 de introducción de este curso que tendrá mas tutoriales que puedes encontraros en la pestañaHTML, PHP Y MYSQL DESDE CERO.
En este articulo te muestro el listado de las etiquetas html que puedes usar al momento de escribir y diseñar tu propia pagina web.
La
programación web es una decisión que cada vez más personas toman, conscientes
de las oportunidades profesionales que supone contar con este tipo de
conocimientos tan valorados por las empresas de hoy en día. Comprender el
significado y la composición de las etiquetas HTMLes uno de
los primeros pasos que cualquier profesional que aspire a convertirse en
desarrollador o ingeniero web debe dar.
Con el objetivo de que entiendas qué es una
etiqueta HTML, queremos enseñarte cómo funciona la capa más
básica de una web y que puedas diseñar tus propias paginas web sin miedo.
HTML, siglas en inglés de HyperText Markup Language, hace referencia al lenguaje de marcado para la elaboración de páginas web.
En otras palabras, el
texto en una página web que está «marcado» con estos códigos para dar instrucciones
al navegador web sobre cómo mostrar el texto. Estas etiquetas de
marcado son las propias etiquetas HTML.
Un elemento de HTML es un tipo de componente de documento de HTML, uno de los diversos tipos de nodos de HTML. El documento de HTML está compuesto de un árbol de nodos HTML sencillo, como nodos de texto, y elementos de HTML, los cuales añaden semántica y formato a partes del documento.
Cuando escribes código
en HTML, estás escribiendo etiquetas HTML.
Las etiquetas HTML
están hechas con un número de partes específicas, incluyendo:
El carácter “menor
que” <
Una palabra o carácter que
determina qué etiqueta se está escribiendo
Cualquier número de
atributos HTML que se quiera usar, escritos de la forma nombre
=”valor”
El
carácter “mayor que” >
El hipertexto
(HTML) es un lenguaje informático que forma la mayoría de las páginas
web y plataformas online. HTML no se considera un lenguaje de programación, ya
que no puede crear una funcionalidad dinámica. Sin embargo, los usuarios web
pueden crear y estructurar secciones, párrafos y enlaces usando elementos,
etiquetas y atributos.
En la actualidad existen
142 etiquetas HTML disponiblesque permiten la creación de varios
elementos. A pesar de que algunos ordenadores nuevos ya no admiten algunas de
estas, es importante tener constancia de la existencia de ellas.
Sin embargo, el HTML
ha ido evolucionando los últimos años. Para que nos hagamos una idea, la
primera versión contaba solamente con 18 etiquetas. Desde entonces, cada nueva
versión ha traído nuevas etiquetas y atributos. La actualización más importante
fue la introducción en 2014 delHTML5. La principal diferencia entre ambas es que la nueva
admitía nuevos tipos de controles de formularios. También incluía diversas
etiquetas semánticas que describían mejor el contenido, como <article>,
<headers> y <footer>.
¿Cómo funcionan las
etiquetas HTML?
La mayoría de páginas
web tienen varias páginas HTML diferentes. Por ejemplo, una página de inicio,
otra de producto, otra de contacto, etc. Cada una de estas tiene HTML
separados. Los documentos HTML son archivos que acaban con .html, luego un navegador lee el archivo y muestra su contenido para los internautas puedan
verlo.
Como hemos comentado
anteriormente, todas las páginas HTML contienen una serie de elementos HTML que
a la vez disponen de diferentes etiquetas y atributos. Es decir, los elementos
HTML son los componentes básicos de una página web. Una etiqueta contiene mucha
información. Le indica al navegador dónde empieza y dónde termina cada
elemento, mientras que un atributo describe las características.
Los elementos HTML
suelen dividirse en tres partes. Esta combinación de las tres crea un elemento
HTML.
Etiqueta de apertura: Se utiliza para indicar dónde empieza un elemento. Está
envuelta en corchete de apertura y cierre. Por ejemplo puedes usar la
etiqueta de inicio <p> para crear un párrafo.
Contenido: El contenido es el resultado que ve la audiencia.
Etiqueta de cierre: Es lo mismo que la etiqueta de apertura pero con una barra
inclinada delante del nombre del elemento. Es decir, </p> para
finalizar un párrafo.
Otra parte fundamental
de un elemento HTML son los atributos. Estos tienen dos secciones:
Nombre: El nombre identifica la información adicional que un usuario
quiere agregar.
Valor del atributo: Da más detalles que el anterior.
<
style="background: white; line-height: normal; text-align: justify;">¿Cuáles son las
etiquetas HTML básicas?
Hay una serie de
etiquetas que son las más usadas para crear cualquier documento HTML, a
continuación las explicamos:
<html> para iniciar el contenido.
<head> es la cabecera de la pagina web que se usa para mostrar la información sobre el documento.
<body> para el contenido del cuerpo de la pagina web.
<div> división
dentro del contenido
<a> para
enlaces
<strong> para poner el texto en negrita
<br> para
saltos de línea
<H1>…<H6> para títulos dentro del contenido
<img> para añadir imágenes al documento
<ol> para listas ordenadas, <ul> para
listas desordenadas, <li> para elementos dentro de
la lista
<p> para párrafos
<span> para estilos de una parte del texto
<head></head>
La parte superior del documento HTML, es donde podremos indicar los metadatos: título del documento, hojas de estilos, javaScript, CSS…
<body>
</body>
Indica la parte del
cuerpo del contenido de un documento HTML. Es una etiqueta esencial para
cualquier documento ya que indica donde empieza el contenido visible del
documento.
<div>
</div>
Un elemento que es
usado mayoritariamente para agrupar otros elementos y actuar como plantilla de
otros controles. La etiqueta <div> nos ayuda a estructurar el documento
en secciones.
<a> </a>
Es una etiqueta que
nos ayuda a poder crear un enlace a una página web. El atributo principal de la
etiqueta HTML es href, donde pondremos el enlace al que queremos conectar. Otro
atributo muy usado es target, el cual nos sirve para indicar si el enlace se
abrirá en una nueva ventana o en la misma.
Ejemplo HTML:
Pulsa <a
href=”https://www.nombredelaweb.com/” target=”_blank”>aquí</a> para
visitar un Dominio o pagina web.
<strong>
</strong>
Si tienes mucho texto,
es importante poder dar énfasis a una parte en concreto, con la etiqueta strong
lo podemos hacer.
Ejemplo HTML:
Quiero destacar solo
<strong>esta palabra</strong>.
<br>
Con esta etiqueta HTML
le podemos decir al navegador que viene un salto de línea. Nos sirve para hacer
el texto más leíble.
<H1> </H1>
…. <H6> </H6>
Hay diferentes niveles
de títulos, del 1 al 6. Las etiquetas <H + número> nos permiten indicar
la importancia del título y para estructurar el contenido, de esta forma
ayudamos a los bots a entender la importancia del contenido.
<IMG>
</IMG>
Usamos la etiqueta IMG
para mostrar imágenes dentro del contenido. Necesita el atributo src para
funcionar, ya que será donde indicaremos desde donde tiene que mostrar la
imagen.
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
<OL>
<li></li> <OL> | <UL> <li></li> <UL>
Las etiquetas OL y LI
nos sirven para crear listas, OL para listas ordenadas y UL para listas sin
orden. Dentro de las listas, los elementos se identifican con la etiqueta LI.
Ejemplo HTML:
<ul>
<li>Primer
elemento</li>
<li>Segundo
elemento</li>
<ul>
<P> </P>
Etiqueta que nos sirve
para agrupar texto dentro de un párrafo. El propósito es poder hacer el
contenido más fácil de leer y organizado.
<SPAN>
</SPAN>
Con la etiqueta
podemos personalizar el estilo de solamente una parte del texto.
Ejemplo HTML:
Solo <span
style=”color: red;”>esta palabra</span> en rojo.
MIRA EL VIDEO DE LA EXPLICACION COMPETA A CONTINUACION:
¿Qué es input type en HTML?
El elemento HTML <input> se usa para crear controles interactivos para formularios basados en la web con el fin de recibir datos del usuario. Hay disponible una amplia variedad de tipos de datos de entrada y widgets de control, que dependen del dispositivo y el agente de usuario (user agent).
Los
atributos de INPUT son:
TYPE determina el tipo de
entrada que se va a utilizar y sus valores pueden ser uno de los
siguientes:
text, muestra una caja donde
introducir texto. Es el tipo por defecto de INPUT.
password,
muestra una caja donde se tecleará texto cuyo eco será sustituido por
asteríscos.
checkbox, un
botón que sólo puede tener dos estados, (on, off).
radio, un botón que sólo puede
tener dos estados, (on, off), pero que a diferencia de
los checkbox, puede agruparse con otros botones de
tipo radio con el mismo nombre y obtener así un
comportamiento "uno de muchos''.
submit, un botón que produce que el
formulario actual sea enviado al URL especificado en el atributoACTION del formulario.
reset, un botón que produce que
todos los elementos del formulario pasen a su estado por defecto.
hidden, es una entrada que no se
muestra en el browser y que sirve para pasar información
desde el formulario al servidor que no se quiere que el usuario vea.
button,define un botón de entrada: Ejemplo:<input type="button" onclick="alert('Hello World!')" value="Click Me!">
color, para campos de entrada que deben contener un color.
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de color en el campo de entrada. Ejemplo: <input type="color" id="favcolor" name="favcolor"><label for="favcolor">Select your favorite color:</label>
date,para campos de entrada que deben contener una fecha.
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de fecha en el campo de entrada.Ejemplo> <label for="birthday">Birthday:</label><input type="date" id="birthday" name="birthday">
datetime-local,un campo de entrada de fecha y hora, sin zona horaria. Dependiendo de la compatibilidad del navegador, puede aparecer un selector de fecha en el campo de entrada. Ejemplo:<label for="birthdaytime">Birthday (date and time):</label> <input type="datetime-local" id="birthdaytime" name="birthdaytime">
email,para campos de entrada que deben contener una dirección de correo electrónico.Dependiendo de la compatibilidad del navegador, la dirección de correo electrónico se puede validar automáticamente cuando se envía. Algunos teléfonos inteligentes reconocen el tipo de correo electrónico y agregan ".com" al teclado para que coincida con la entrada del correo electrónico. Ejemplo:<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
file,Define un campo de selección de archivos <input type="file"> y un botón "Examinar" para cargar archivos. Ejemplo:<label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile">
month, permite al usuario seleccionar un mes y un año.
number, define <input type="number">un campo de entrada numérico .
También puede establecer restricciones sobre qué números se aceptan.
El siguiente ejemplo muestra un campo de entrada numérico, donde puede ingresar un valor del 1 al 5: Ejemplo: <label for="quantity">Quantity (between 1 and 5):</label>
range,define un control para ingresar un número cuyo <input type="range">valor exacto no es importante (como un control deslizante). El rango predeterminado es de 0 a 100. Sin embargo, puede establecer restricciones sobre qué números se aceptan con los atributos min, maxy :step. Ejemplo: <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50">
search,se utiliza para los <input type="search">campos de búsqueda (un campo de búsqueda se comporta como un campo de texto normal).
tel,El <input type="tel">se utiliza para campos de entrada que deben contener un número de teléfono. Ejemplo: <label for="phone">Enter your phone number:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
time,El <input type="time">permite al usuario seleccionar una hora (sin zona horaria).
Dependiendo de la compatibilidad del navegador, puede aparecer un selector de tiempo en el campo de entrada.
url, se utiliza <input type="url">para campos de entrada que deben contener una dirección URL. Dependiendo de la compatibilidad del navegador, el campo de URL se puede validar automáticamente cuando se envía. Algunos teléfonos inteligentes reconocen el tipo de URL y agregan ".com" al teclado para que coincida con la entrada de URL. Ejemplo:<label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage">
NAME es el nombre simbólico al
que se le va asociar el valor introducido en ese elemento por el usuario.
Debe estar presente en todos los elementos excepto en submity reset.
VALUEtiene varios significados
dependiendo del elemento que se trate. Para campos texto o password especificará
el valor por defecto. En botones de tipo radio o checkbox especificará
el valor que tendrá el botón cuando sea presionado (el defecto es on).
Para los botones submit y reset el valor se puede
utilizar para especificar la etiqueta del botón. En los campos ocultos
especifica el valor que se pasa al servidor.
SIZEes el tamaño físico del
campo de entrada en elementos texto o password (por
defecto es 20).
MAXLENGTH es
el número máximo de caracteres que se permiten en un elemento de tipo
texto o password (ilimitado por defecto).
CHECKEDespecifica si ese
botón, radio o checkbox estará
activado por defecto.
Ventajas y desventajas
del HTML
Como todo lenguaje
informático, el HTML tiene sus ventajas y sus desventajas. Entre las ventajas,
podríamos destacar que es apto para principiantes, que tiene una curva de
aprendizaje poco profunda y que es accesible. Además, es de código
abierto y completamente gratuito y se ejecuta de forma nativa en todos
los navegadores web.
Por otro lado, entre
las desventajas, se encuentra que para una funcionalidad dinámica es posible
que haya que utilizar JavaScript o un lenguaje back-end como PHP. Además, los
usuarios deben crear páginas web individuales para HTML, incluso si los elementos
son los mismos y es posible que los navegadores más antiguos no muestren las
etiquetas más nuevas.
Si te ha parecido interesante este artículo sobre etiquetas HTML, puedes dejar tu comentario.
La mayoría de personas piensan que si olvidan la información de su perfil de
facebook, ya no podrán recuperar el acceso nuevamente, pero esto es falso.
Los requisitos para recuperar tu cuenta de facebook son:
1) Ingresar desde un celular, pc o laptop que hayas utilizado para ingresar a tu perfil de facebook antes de que pierdas el acceso.
2) Seguir los pasos que muestro en el video que adjuntare mas abajo.
Algo
importante que debes tener en cuenta es que este proceso es totalmente legal y solamente funciona si tu eres el dueño legitimo de ese perfil, ya que no es posible vulnerar las cuentas de otras personas.
2) Sigue los pasos que muestro en el siguiente video:
¡¡¡NOTA IMPORTANTE!!!
Este
articulo tiene fines educativos y no promueve el robo de cuentas, el propósito de este articulo es simplemente brindar ayuda a la personas que necesitan recuperar el acceso a su perfil de facebook.
Por ultimo quiere decirles que yo soy una persona que les brinda la informacion necesaria para que puedan aplicarlo segun su caso y recuperar el acceso a su cuenta de facebook, pero no realizo trabajos personalizados.
Cualquier consulta puedes escribir aquí abajo en la caja de comentarios o en mi canal de youtube PC Fácil Digital.
Seguramente si utilizas Windows, sabrás que llena rápidamente su espacio de almacenamiento, esto se da por que instalamos muchos programas en nuestra computadora, y esto acumula archivos basura que deben ser eliminados para mejorar el rendimiento de la unidad y optimizar su pc.
Mantener su computadora libre de archivos que no sirven, es una de las formas de mejorar el rendimiento y la estabilidad de tu computador.
Con solo limpiar los archivos basura, puede liberar toneladas de espacio en disco. Además, Windows 10 y 11 ofrecen varias utilidades integradas de limpieza de basura del sistema para liberar espacio de almacenamiento.
A continuación muestro 2 métodos que se ejecutan desde CMD:
1. Desfragmentar el disco duro desde CMD
La desfragmentación es el proceso mediante el cual se acomodan los archivos en un disco para que no se aprecien fragmentos de cada uno de ellos, de tal manera que quede contiguo el archivo y sin espacios dentro del mismo.
En este método, voy a desfragmentar el disco duro mediante CMD.
Este método limpiará todos los archivos basura almacenados en las unidades seleccionadas.
1.1. En primer lugar, haga clic en el botón Inicio de Windows y escriba” CMD “.
A continuación, haga clic con el botón derecho en el símbolo del sistema y seleccione ‘Ejecutar como administrador’.
1.2. En el símbolo del sistema, ingrese el comando: defrag C:
El comando anterior desfragmentará la unidad C:
Si desea desfragmentar otra unidad, cambie la letra de la unidad, por ejemplo defrag D:
El comando anterior desfragmentará la unidad D:
1.3. Ahora la herramienta de desfragmentación de disco escaneará la unidad seleccionada y eliminará los archivos basura y temporales.
En este método, ejecutaremos la utilidad Liberador de espacio en disco incorporada de Windows 10 y 11 (Cleanmgr) para liberar espacio de almacenamiento.
¿Qué es el Cleanmgr?
Cleanmgr.exe está diseñada para borrar los archivos innecesarios del disco duro de su equipo. Puede utilizar opciones de línea de comandos para especificar que Cleanmgr.exe limpie ciertos archivos.
2.1. En primer lugar, haga clic en el botón Inicio de Windows y escriba ”CMD“.
A continuación, haga clic con el botón derecho en el símbolo del sistema y seleccione ‘Ejecutar como administrador’.
2.2. En el símbolo del sistema, escriba cleanmgr y presione el botón Enter.
2.3. Esto iniciará la utilidad Liberador de espacio en disco. Seleccione la unidad que desea limpiar y haga clic en el botón "Aceptar".
Debe seleccionar los archivos que desea eliminar, después de ejecutar el comando anterior.
