9° Computers 

1° Periodo

Presentacion_HTML.pdf

1° Práctica

En esta clase aprenderemos a crear una primera aproximación a una pagina web creada con el bloc de notas.


Abrir bloc de notas y escribir las siguiente lineas 


<HTML>

<HEAD>

<TITLE> NOMBRE DE PESTAÑA </TITLE>

</HEAD> 

<BODY>

<H1> TITULO DE LA PAGINA </H1>

<HR>

<P> Aqui va un texto en forma de parrafo </P>

</BODY>

</HTML>


Luego de escribir esto debes guardarlo con tu nombre.html

2° Práctica

<img src="https://www.ionos.es/digitalguide/fileadmin/_processed_/0/d/csm_html-tagst_f8b3a06d84.webp">


links html.pdf

Tablas en HTML

04-HTML-Tablas.pdf
tablas html de 9°.pdf
tablas rowspan y colspan html de 9°.pdf
tablas rowspan y colspan 2 html de 9°.pdf

<html>

<head> 

</head>

<body>

<center>

<h1>HORARIO 9° </h1>

<html>

<head> 

</head>

<body>

<center>

<h1> LISTAS  </h1>

<ol type="A">

  <li>Julio</li>

  <li>Carmen</li>

  <li>Ignacio</li>

  <li>Elena</li>

</ol>

<label for="nombres"> noveno </label>

<select name="nombres" id="nombres"> 

<option>Dave1</option>

<option>Dave2</option>

<option>Dave3</option>

<option>Dave4</option>

<option>Dave5</option>

<option>Dave6</option>

</select>

</center>

</body>

</html>

</body>

taller final 1° html de 9°.pdf

<html>

<head>

<title>Ejemplo de fondo</title>

<style>

body {

background-image: url(link de imagen);

margin-left:10px;

padding-left:10px;

}

h1 {

      color: red;

      background - color: blue;

      }

    p{

    color: blue

    };

</style>

</head>


<body>

<h1>Hola!!</h1>

<p>Esta página tiene un fondo</p>

</body>

</html>

Taller de barra de navegación y cards


<html>


<head>


<title>Ejemplo de fondo</title>


<style>


.navbar {

  display: flex;

  justify-content: space-around;

  background-color: black;

}


.navbar a {

  color: white;

  text-decoration: none;

  padding: 10px;

}

  

  .card-container {

  display: flex;

  justify-content: space-around;

  flex-wrap: wrap;

}


.card {

  width: 200px;

  padding: 20px;

  margin: 10px;

  background-color: lightblue;

    

</style>


</head>



<body>

  

<nav class="navbar">

  <a href="https://www.canva.com/design/DAGGYejZfqo/NJip00j7W7Z2TeLOzribBw/edit">Home</a>

  <a href="#">About</a>

  <a href="#">Services</a>

  <a href="#">Contact</a>

</nav>

  

  <div class="card-container">

  <div class="card">Pelicula 1 </div>

  <div class="card">Card 2</div>

  <div class="card">Card 3</div>

</div>

  

</body>


</html>

<html>

<head>

<title>Ejemplo de fondo</title>

<style>

.navbar {

  display: flex;

  justify-content: space-around;

  background-color: black;

}

.navbar a {

  color: white;

  text-decoration: none;

  padding: 10px;

}

  .card-container {

  display: flex;

  justify-content: space-around;

  flex-wrap: wrap;

}

.card {

  width: 200px;

  padding: 20px;

  margin: 10px;

  background-color: lightblue;  

</style>


</head>

<body>  

<nav class="navbar">

   <a href="https://www.canva.com/design/DAGGYejZfqo/NJip00j7W7Z2TeLOzribBw/edit">Home</a>

   <a href="#">About</a>

   <a href="#">Services</a>

   <a href="#">Contact</a>

</nav>

  

  <div class="card-container">

   <div class="card">

   <h4><b>John Doe</b></h4>

   <img src="img_avatar.png"

     style="width:100%">

     <p>Resumen de la pelicula</p>

    <a href="#">Ver trailer</a>

</div>

 </div>  

</body>

</html>