Desarrollo web

0

David Rengifo

19/5/2023

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Tecnologías

9637 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

Academia milenario
Desarrollo Web – Curso
28/09/2022
ACADEMIA MILENARIO
1
¿Qué es Milenario?
Academia Milenario
Milenario es una Compañía Formada en Marzo del 2022 con el único propósito de enseñar y reclutar personal para desarrollar Proyectos de Gran Impacto a nivel Internacional, ¿Que hacemos? Damos a conocer una serie de cursos sobre programación tales como Desarrollo de Software, Desarrollo Web, Marketing Digital entre otros cursos…
Milenario es la única Compañía que abre sus puertas a personas que quieran aprender y trabajar de forma segura dentro de nuestra compañía sin poner un solo Centavo.
Tenemos variantes tales como Milenario Start, Milenario Gaming y Milenario Sports.
“Para tener Éxito, tu deseo de éxito debe ser mayor que tu miedo al fracaso”
-Bill Cosby
28/09/2022
ACADEMIA MILENARIO
2
Herramientas necesarias
Damos inicio al Curso de Desarrollo Web 
Como Herramienta principal necesitaremos un Editor de HTML
Para PC o Laptop 
Visual Studio Code
Para móviles 
Learn HTML
28/09/2022
ACADEMIA MILENARIO
3
HTML básico
Crear paginas web usando etiquetas HTML
Temas 
Descubriendo HTML y etiquetas 
Estructuración de texto con etiquetas
Botones de construcción
Creación de enlaces
Potencia tu conocimiento (Examen)
Subtemas
Etiquetas, Títulos, Paginas web
Saltos de línea, Etiquetas de cabeza
Aprender
Aprender
28/09/2022
ACADEMIA MILENARIO
4
Descubriendo HTML y etiquetas
HIPERTEXT MARKUP LANGUAGE 
El LENGUAJE DE MARCADO DE HIPERTEXTO (HTML) es el lenguaje informático que estructura todas las paginas web en internet.
El código HTML les dice a los navegadores web como mostrar contenido como imágenes, enlaces y texto en una pagina web.
28/09/2022
ACADEMIA MILENARIO
5
Descubriendo HTML y etiquetas
Antes de iniciar vamos con una pregunta clave.
¿Qué lenguaje informático estructura todas las paginas web en internet?
HTML
CSS
Java Script
Java
28/09/2022
ACADEMIA MILENARIO
6
Descubriendo HTML y etiquetas
28/09/2022
ACADEMIA MILENARIO
7
ETIQUETAS
En HTML las cosas giran en torno a las etiquetas.
Las etiquetas empiezan con < seguidas de una palabra clave y terminan con >
<html> Etiqueta de apertura
</html> Etiqueta de cierre
Estructura de Etiquetas
 < html > < / html >
Paréntesis Apertura Palabra Clave Paréntesis Cierre Paréntesis Apertura Barra de Cierre Palabra Clave Paréntesis Cierre
Descubriendo HTML y etiquetas
ETIQUETAS EJERCICIO PRACTICO
<button> 
 Etiqueta de Apertura 
</form> 
Etiqueta de Cierre
<br> 
Etiqueta de Apertura
</html> 
Etiqueta de Cierre
28/09/2022
ACADEMIA MILENARIO
8
Descubriendo HTML y etiquetas
¿Qué crees que muestra este código en un sitio web?
<button>I’m Ready to Code</button>
Respuestas
Un botón con el texto Login in
Una imagen
Un botón con el texto I’m Ready to Code
Un video
28/09/2022
ACADEMIA MILENARIO
9
Descubriendo HTML y etiquetas
TITULOS
En HTML, las palabras clave de algunas etiquetas son obvias, pero hay algunas etiquetas que usan una forma abreviada. 
Por ejemplo, usamos P para un párrafo.
¿Cuál de estas etiquetas HTML crea un párrafo?
<button> 
<h1>
<p>
<video> 
28/09/2022
ACADEMIA MILENARIO
10
Descubriendo HTML y etiquetas
Hagamos un resumen rápido del Capitulo anterior. Codifique un botón que tenga el texto POST.
Button 
</
>
Post
<
>
Button 
28/09/2022
ACADEMIA MILENARIO
11
Descubriendo HTML y etiquetas
Codificar un párrafo es muy similar a codificar un botón. Necesita su etiqueta de apertura, seguida de su texto y una etiqueta de cierre.
¡Codifique un párrafo que muestre Academia Milenario!
Respuestas en el Chat
28/09/2022
ACADEMIA MILENARIO
12
Descubriendo HTML y etiquetas
Podemos crear encabezados en HTML para enfatizar ciertos textos. Hay 6 tamaños de encabezado en HTML, de h1 a h6.
¿Cuál de las siguientes etiquetas crea un encabezado?
<h1>
<button>
<p>
<video>
28/09/2022
ACADEMIA MILENARIO
13
Descubriendo HTML y etiquetas
Codifique un Encabezado que Muestre Academia Milenario
Respuestas en el Chat
28/09/2022
ACADEMIA MILENARIO
14
Descubriendo HTML y etiquetas
Las etiquetas de encabezado enfatizan los textos haciéndolos mas grandes y mas audaces. H1 es el mas grande y mas audaz y H6 es el mas pequeño y menos audaz.
¿Cuál de estas etiquetas HTML crea un Encabezado mas pequeño que <h1>?
<button>
<p>
<h3>
<h4>
28/09/2022
ACADEMIA MILENARIO
15
Descubriendo HTML y etiquetas
PAGINAS WEB
Para crear una pagina web, necesitaremos una etiqueta HTML de apertura y una de cierre. 
--------------------------------- Necesitamos el Editor ------------------------------
<html>
Contenido Pagina Web
</html>
28/09/2022
ACADEMIA MILENARIO
16
Descubriendo HTML y etiquetas
Los elementos HTML y BODY forman la estructura de una pagina web. Colocamos los elementos que queramos mostrar dentro del cuerpo. 
Mas adelante aprenderemos sobre otros elementos que van dentro de <html> </html> para dar estilo a las paginas web y hacerlas interactivas.
--------------------------- Necesitamos el Editor ----------------------------
<html>
<body>
Contenido Pagina Web
</body>
</html>
28/09/2022
ACADEMIA MILENARIO
17
Descubriendo HTML y etiquetas
Debemos colocar contenidos, como encabezados, párrafos, imágenes etc… todo dentro de las etiquetas del cuerpo. 
------------------------------------- Necesitamos el Editor ------------------------------------
<html>
<body>
<h1>Academia Milenario<h1>
</body>
</html>
28/09/2022
ACADEMIA MILENARIO
18
Descubriendo HTML y etiquetas
Codifique un botón de “Login” dentro de los elementos anteriormente expuestos 
---------------------------- Necesitamos el Editor ----------------------------
28/09/2022
ACADEMIA MILENARIO
19
Descubriendo HTML y etiquetas
Codifique un Encabezado “Academia Milenario” dentro de los elementos anteriormente expuestos 
---------------------------- Necesitamos el Editor ----------------------------
28/09/2022
ACADEMIA MILENARIO
20
Descubriendo HTML y etiquetas
Codifique un Encabezado “Academia Milenario” 
Codifique un Párrafo “Academia Milenario” 
Codifique un Botón “Suscríbete” 
Dentro de los elementos anteriormente expuestos 
---------------------------- Necesitamos el Editor ----------------------------
28/09/2022
ACADEMIA MILENARIO
21
ESTRUCTURACION DE TEXTO CON ETIQUETAS
Desarrollo web – curso 
28/09/2022
ACADEMIA MILENARIO
22
ESTRUCTURACION DE TEXTO CON ETIQUETAS
SALTOS DE LINEA
A veces queremos formatear párrafos con saltos de línea.
Por ejemplo, esta canción se vería mejor mucho mejor si aparecieran Raindrops on roses en una línea. Whiskers on kittens en la siguiente, y así sucesivamente.
¿Cómo codificamos un salto de línea en un archivo? para codificarlo necesitaremos una etiqueta vacía <br>, ¿Qué es una etiqueta vacía?
Una etiqueta vacía es aquella que tiene etiqueta de apertura pero no tiene etiqueta de cierre ni contenido. También se les llama etiquetas de cierre automático.
28/09/2022
ACADEMIA MILENARIO
23
ESTRUCTURACION DE TEXTO CON ETIQUETAS
Ejemplo 
<html>
<body>
<h1>My favorite things</h1>
<p>Raindrops on roses<br>
 Whiskers on kittens<br>
 Bright copper kettles<br>
 Warm woolen mitten</p>
</body>
</html>
28/09/2022
ACADEMIA MILENARIO
24
My favorite things
Raindrops on roses
Whiskers on kittens
Bright copper kettles
Warm woolen mitten
ESTRUCTURACION DE TEXTO CON ETIQUETAS
28/09/2022
ACADEMIA MILENARIO
25
Hay un elemento para dar énfasis al texto, lo pone en cursiva. Se llama elemento em. 
<html>
<body>
<h1>My favorite things</h1>
<p>Raindrops on <em>roses</em><br>
 Whiskers on kittens<br>
 Bright copper kettles<br>
 Warm woolen mitten</p>
</body>
</html>
My favorite things
Raindrops on roses
Whiskers on kittens
Bright copper kettles
Warm woolen mitten
ESTRUCTURACION DE TEXTO CON ETIQUETAS
Para definir textos como importantes. 
Usamos las etiquetas <strong> y </strong>. Pone los textos en negrita.
28/09/2022
ACADEMIA MILENARIO
26
<html>
<body>
<h1>Myfavorite things</h1>
<p>Raindrops on <em>roses</em><br>
 Whiskers on <strong>kittens</strong><br>
 Bright copper kettles<br>
 Warm woolen mitten</p>
</body>
</html>
My favorite things
Raindrops on roses
Whiskers on kittens
Bright copper kettles
Warm woolen mitten
ESTRUCTURACION DE TEXTO CON ETIQUETAS
¿Para que sirve la etiqueta <br>?
Agrega un salto de línea
Da énfasis al texto
28/09/2022
ACADEMIA MILENARIO
27
ESTRUCTURACION DE TEXTO CON ETIQUETAS
¿Cuál de estas etiquetas es una etiqueta vacía o de cierre automático?
</em>
<p>
<br>
</strong>
28/09/2022
ACADEMIA MILENARIO
28
ESTRUCTURACION DE TEXTO CON ETIQUETAS
¿Cuál de estas etiquetas dan énfasis al texto?
<p> y </p>
<em> y </em>
28/09/2022
ACADEMIA MILENARIO
29
ESTRUCTURACION DE TEXTO CON ETIQUETAS
¿para que sirven las etiquetas <strong> y </strong>?
Hacen el texto irrompible por salto de línea
Definen el texto como importante
28/09/2022
ACADEMIA MILENARIO
30
ESTRUCTURACION DE TEXTO CON ETIQUETAS
Agrega un salto de línea a la dirección entre “Internacional y ¿Qué hacemos?”.
Agrega énfasis a la palabra “Milenario”.
Define como importante “Desarrollo Web”.
<html>
<body>
<p>Milenario es una Compañía Formada en Marzo del 2022 con el único propósito de enseñar y reclutar personal para desarrollar Proyectos de Gran Impacto a nivel Internacional. ¿Que hacemos? Damos a conocer una serie de cursos sobre programación tales como Desarrollo de Software, Desarrollo Web, Marketing Digital entre otros cursos</p>
</body>
</html>
28/09/2022
ACADEMIA MILENARIO
31
ESTRUCTURACION DE TEXTO CON ETIQUETAS
ETIQUETAS DE CABEZA
El elemento HTML head, <head> </head>, es una contenedor de información sobre una pagina web, Como un titulo.
Este elemento siempre lo ubicamos después de las etiquetas de HTML y las etiquetas del Cuerpo <body> </body>.
--------------------------------------- Necesitamos del Editor -------------------------------------------
<html>
<head>
</head>
<body>
<h1>Academia Milenario<h1>
<p>Academia Milenario<em>Academia Milenario</em><br>Academia Milenario
<strong>Academia Milenario</strong></p>
</body>
</html>
28/09/2022
ACADEMIA MILENARIO
32
ESTRUCTURACION DE TEXTO CON ETIQUETAS
Para darle un titulo a una pagina web.
Agregamos <title> y </title> dentro de las etiquetas de <head> y </head>.
Tengamos en cuenta que el title no es visible pero proporciona información al navegador.
<html>
<head>
<title>Mi primera pagina web</title>
</head>
<body>
<h1>Academia Milenario<h1>
<p>Academia Milenario<em>Academia Milenario</em><br>Academia Milenario
<strong>Academia Milenario</strong></p>
</body>
</html>
28/09/2022
ACADEMIA MILENARIO
33
ESTRUCTURACION DE TEXTO CON ETIQUETAS
El Doctype le dice al navegador web que versión de HTML estamos usando.
Sin el, es posible que el navegador no muestre la pagina correctamente.
Como estamos usando la ultima versión, usamos <!Doctype html>
 
28/09/2022
ACADEMIA MILENARIO
34
<!Doctype html>
<html>
<head>
<title>Mi primera pagina web</title>
</head>
<body>
<h1>Academia Milenario<h1>
<p>Academia Milenario<em>Academia Milenario</em><br>Academia Milenario
<strong>Academia Milenario</strong></p>
</body>
</html>
ESTRUCTURACION DE TEXTO CON ETIQUETAS
¿Para que sirve la etiqueta head?
Es un contenedor de información sobre una pagina web.
Hace que el texto importante, como titulares, se destaquen.
Le dicen al navegador web que versión de HTML usa una pagina web.
Define el titulo de una pagina web.
28/09/2022
ACADEMIA MILENARIO
35
ESTRUCTURACION DE TEXTO CON ETIQUETAS
 ¿Cómo podremos definir el titulo de una pagina web para que aparezca en la pestaña o ventana del navegador?
Con las etiquetas de titulo como <h1> y </h1>
Con las etiquetas de titulo, <title> y </title>
28/09/2022
ACADEMIA MILENARIO
36
ESTRUCTURACION DE TEXTO CON ETIQUETAS
¿Qué hace el <!Doctype html>?
Define el titulo de una pagina web
Le dice al navegador web que versión de HTML usa una pagina web
28/09/2022
ACADEMIA MILENARIO
37
ESTRUCTURACION DE TEXTO CON ETIQUETAS
¿Qué sucede cuando no hay <!Doctype html> en una pagina web?
El navegador web tiene que adivinar la versión HTML
El navegador web se cerrara
28/09/2022
ACADEMIA MILENARIO
38
ESTRUCTURACION DE TEXTO CON ETIQUETAS
Codifique un archivo Index.html con lo anteriormente visto que contenga los siguientes elementos:
Titulo “Mi primera pagina web”
Un encabezado ”Academia Milenario”
Un botón de “Login”
Un párrafo “Gran proyecto”
28/09/2022
ACADEMIA MILENARIO
39
Alan Walker vs Coldplay - Hymn For The Weekend [Remix]
Alan Walker vs Coldplay - Hymn For The Weekend [Remix]
230328.0