Curso de programación web
Clase 1
Introducción:
No voy a alargar mucho la cuestión, ya que a todos les interesa solo programar.
Este es un curso de distintos post, todos estarán numerados por clase (como el mismo). En el transcurso de estos ciertos post van a ir aprendiendo cómo crear su propia página web.
Importante:Pueden hacerme cualquier pregunta que quieran en los comentarios pero siempre en relación al post, sin algún conocimiento más "avanzado". Esto más que nada es porque voy a ir explicando de a poco y como ando estudiando, espero que sepan entender mi disponibilidad de tiempo.
Antes de empezar: Pueden descargarse el Visual Studio Code para programar con más comodidad, o sino hacerlo desde el bloc de notas, pero es muy poco recomendable la verdad.
https://code.visualstudio.com/download
Sin más que aclarar empecemos.
Este es un lenguaje de programación que sirve para crear el "boceto de la página", si crearon un post en T! alguna vez, van a entenderlo mejor, ya que los códigos que aparecen cuando seleccionamos alguna propiedad son muy similares a los que estamos por aprender.
Por ejemplo:
Cuando seleccionamos un color para una palabra nos aparece esto {color=#FF0000}Importante:{/color}
Solo que con corchetes, no con llaves (lo copie así para que me deje escribirlo la plataforma).
Hagamos un "Hola mundo". Una página web en blanco que solo diga eso, "Hola mundo" (Si, por algo se empieza).
1. Creamos una carpeta con el nombre que queramos, en mi caso se llama "Proyecto".
2. Abrimos el Visual Studio Code (desde ahora le voy a decir VSC), creamos un archivo nuevo y lo "Guardamos como". Pongan el nombre que quieran, lo importante es que sea .html no se olviden de eso.
3. Copiaremos el formato básico de una página web. En este sencillo caso no es necesario pero servirá que ya lo sepan.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Pueden copiar y pegar si quieren.
Todo lo que tengan los signos <> se le llaman tags, en ese momento solo copiamos tags, la página sigue en blanco. Pero si copian algo en cualquier parte saldrá en su página.
Ahora van a copiar Hola mundo entre los tags <body> </body> solo por proligidad. Quedaría así el código.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hola mundo
</body>
</html>
El <!DOCTYPE html> Se utiliza para decirle al navegador que la página está escrita en el HTML más avanzado, en este caso el HTML5
Tag <html></html> Se utiliza por convención (prolijidad).
<head></head> En la cabeza de la página irían todas las especificaciones (explicaré después).
<body></body>Va todo el código para nuestra página, es el "cuerpo".
Un código muy importante es la inserción de las imágenes, qué sería una web sin ellas.
<img src"link de la imagen que quieras en tu pagina">
Así podrán subir cualquier imagen de internet que deseen.
<p></p> Copian párrafos.
<br> Salto de línea.
Tal y como en el word existen tipos de letras predeterminados de distintos niveles. Van desde más grande a más chico, siendo el mayor el 1.
<h1></h1>
<h2></h2>
<h3></h3>
Para hacer una lista "desordenada".
<ul>
<li>clase</li>
<li>clase</li>
<li>clase</li>
</ul>
Una lista "ordenada".
<ol>
<li>clase</li>
<li>clase</li>
<li>clase</li>
</ol>
Ingresar un link
<a href"link que se quiera">Acá se copia el texto que se quiera ver</a>
Nunca se olviden que los tags se cierran de esta manera </"nombre del tag>
Entre los tags <head></head>
Se encuentra el titulo de la pagina que aparecerá en la solapa por ejemplo
Se escribe de esta manera:
<title>Nombre de la pagina</title>
También se debe escribir el tipo de código en el que escribimos, por ejemplo, las tildes no se verían en nuesstra página si no escribimos el siguiente código.
<meta charset="UTF-8">
Es obligatorio escribir eso si no quieren que en vez de "Buen día" les salga algo como esto "Buen d&a"
Bueno gente, hasta acá llegó el post, espero que les haya gustado y que estén atentos para el próximo.
El siguiente será sobre el diseño sobre CSS. Todo lo feo que ven ahí va a quedar bonito en la próxima jajaja. Con textos centrados, colores y demás.
Clase 1
Introducción:
No voy a alargar mucho la cuestión, ya que a todos les interesa solo programar.
Este es un curso de distintos post, todos estarán numerados por clase (como el mismo). En el transcurso de estos ciertos post van a ir aprendiendo cómo crear su propia página web.
Importante:Pueden hacerme cualquier pregunta que quieran en los comentarios pero siempre en relación al post, sin algún conocimiento más "avanzado". Esto más que nada es porque voy a ir explicando de a poco y como ando estudiando, espero que sepan entender mi disponibilidad de tiempo.
Antes de empezar: Pueden descargarse el Visual Studio Code para programar con más comodidad, o sino hacerlo desde el bloc de notas, pero es muy poco recomendable la verdad.
https://code.visualstudio.com/download
Sin más que aclarar empecemos.
HTML5
Este es un lenguaje de programación que sirve para crear el "boceto de la página", si crearon un post en T! alguna vez, van a entenderlo mejor, ya que los códigos que aparecen cuando seleccionamos alguna propiedad son muy similares a los que estamos por aprender.
Por ejemplo:
Cuando seleccionamos un color para una palabra nos aparece esto {color=#FF0000}Importante:{/color}
Solo que con corchetes, no con llaves (lo copie así para que me deje escribirlo la plataforma).
Hola mundo
Hagamos un "Hola mundo". Una página web en blanco que solo diga eso, "Hola mundo" (Si, por algo se empieza).
1. Creamos una carpeta con el nombre que queramos, en mi caso se llama "Proyecto".
2. Abrimos el Visual Studio Code (desde ahora le voy a decir VSC), creamos un archivo nuevo y lo "Guardamos como". Pongan el nombre que quieran, lo importante es que sea .html no se olviden de eso.
3. Copiaremos el formato básico de una página web. En este sencillo caso no es necesario pero servirá que ya lo sepan.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Pueden copiar y pegar si quieren.
Todo lo que tengan los signos <> se le llaman tags, en ese momento solo copiamos tags, la página sigue en blanco. Pero si copian algo en cualquier parte saldrá en su página.
Ahora van a copiar Hola mundo entre los tags <body> </body> solo por proligidad. Quedaría así el código.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Hola mundo
</body>
</html>
Explicación
El <!DOCTYPE html> Se utiliza para decirle al navegador que la página está escrita en el HTML más avanzado, en este caso el HTML5
Tag <html></html> Se utiliza por convención (prolijidad).
<head></head> En la cabeza de la página irían todas las especificaciones (explicaré después).
<body></body>Va todo el código para nuestra página, es el "cuerpo".
Imagenes
Un código muy importante es la inserción de las imágenes, qué sería una web sin ellas.
<img src"link de la imagen que quieras en tu pagina">
Así podrán subir cualquier imagen de internet que deseen.
Texto
<p></p> Copian párrafos.
<br> Salto de línea.
Tal y como en el word existen tipos de letras predeterminados de distintos niveles. Van desde más grande a más chico, siendo el mayor el 1.
<h1></h1>
<h2></h2>
<h3></h3>
Para hacer una lista "desordenada".
<ul>
<li>clase</li>
<li>clase</li>
<li>clase</li>
</ul>
Una lista "ordenada".
<ol>
<li>clase</li>
<li>clase</li>
<li>clase</li>
</ol>
Ingresar un link
<a href"link que se quiera">Acá se copia el texto que se quiera ver</a>
Nunca se olviden que los tags se cierran de esta manera </"nombre del tag>
HEAD
Entre los tags <head></head>
Se encuentra el titulo de la pagina que aparecerá en la solapa por ejemplo
Se escribe de esta manera:
<title>Nombre de la pagina</title>
También se debe escribir el tipo de código en el que escribimos, por ejemplo, las tildes no se verían en nuesstra página si no escribimos el siguiente código.
<meta charset="UTF-8">
Es obligatorio escribir eso si no quieren que en vez de "Buen día" les salga algo como esto "Buen d&a"
Bueno gente, hasta acá llegó el post, espero que les haya gustado y que estén atentos para el próximo.
El siguiente será sobre el diseño sobre CSS. Todo lo feo que ven ahí va a quedar bonito en la próxima jajaja. Con textos centrados, colores y demás.