Introducción HTML
Introducción HTML
Embedded Files
Presentacion_HTML.pdfPráctica 1
Imagenes y backgraund color
Práctica 1
Imagenes y backgraund color
Agregar imagenes
<img src="https://www.ionos.es/digitalguide/fileadmin/_processed_/0/d/csm_html-tagst_f8b3a06d84.webp">
Centrar <center> </center>
Color de fondo <body bgcolor = #000000">
Debes presentar un documento html con las siguientes caracteristicas
Cambiar color de fondo que no sea blanco
Deber agregar 10 titulos
Debes agregar 10 parrafos
Debes agregar 1 imagen por cada titulo
Utiliza la etiqueta de centrar para los titulos
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> noveno </title>
</head>
<body bgcolor="#25d366">
<center>
<h1> patitos </h1>
<h2> pato 1 </h2>
<img src="link de la imagen" >
</center>
<p>este es un patito </p>
</body>
</html>
Luego de escribir esto debes guardarlo con tu nombre.html
links html.pdf<html>
<head>
<title> noveno </title>
</head>
<body bgcolor="#25d366">
<center>
<h1> patitos </h1>
<h2> pato 1 </h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Anas_platyrhynchos_qtl1.jpg/1200px-Anas_platyrhynchos_qtl1.jpg" width="10%" height="10%" >
<a href="https://www.youtube.com/watch?v=t5EUFE9PYdI" target="_blank"> Cancion </a>
</center>
<hr>
<p>este es un patito </p>
</body>
</html>
04-HTML-Tablas.pdftablas html de 9°.pdf<CENTER>
<table border="1" bordercolor="blue">
<tr>
<th>HORA</th>
<th>LUNES</th>
<th>MARTES</th>
<th>MIERCOLES</th>
<th>JUEVES</th>
<th>VIERNES</th>
</tr>
<tr>
<td>UNO</td>
<td>DOS</td>
<td>TRES</td>
<th></th>
</tr>
</table>
</CENTER>
tablas rowspan y colspan 2 html de 9°.pdftablas rowspan y colspan html de 9°.pdfEJEMPLO DE CLASE 10 - 03 - 2025
<html>
<head>
</head>
<body>
<CENTER>
<table border="1" bordercolor="blue">
<tr>
<th ROWSPAN="3"> RECURSOS </th>
<th COLSPAN="4">FACTURACION </th>
</tr>
<tr>
<th>DISCOS DUROS</th>
<th>23000 </th>
<th>27200</th>
<th>26000</th>
</tr>
<tr>
<th>CPU</th>
<th>73000 </th>
<th>67300</th>
<th>51000</th>
</tr>
</table>
</CENTER>
</body>
</html>
<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 tablas y listasdo html de 9°.pdf<html>
<head>
<title> noveno </title>
</head>
<body bgcolor="#25d366">
<center>
<h1> patitos </h1>
<h2> pato 1 </h2>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Anas_platyrhynchos_qtl1.jpg/1200px-Anas_platyrhynchos_qtl1.jpg" width=50px height="25px">
</center>
<p>este es un patito </p>
<ul>
<li>America</li>
<ol>
<li>norte</li>
<ul>
<li>canada</li>
</ul>
<li>centro</li>
<ul>
<li>mexico</li>
</ul>
<li>sur</li>
<ul>
<li>Colombia</li>
</ul>
</ol>
</ul>
<label for="nombres"> noveno </label>
<select name="nombres" id="nombres">
<option>Tomas</option>
<option>Camilo</option>
<option>Pedro</option>
<option>Nicolas</option>
<option>Karla</option>
<option>Claudia</option>
</select>
<label for="nombres"> Año nacimiento</label>
<select name="año" id="año">
<option>2000</option>
<option>2001</option>
<option>20003</option>
</select>
</body>
</html>
STYLE
STYLE
<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>
<html>
<head>
<title>Ejemplo de fondo</title>
<style>
.navbar {
display: flex;
justify-content: space-around;
background-color: black;
}
.navbar a {
color: BLUE;
text-decoration: none;
padding: 10px;
}
.card-container {
display: flex;
gap: 20px;
justify-content: center;
}
.card {
width: 200px;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
border-radius: 10px;
background-color: #ff0;
}
</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">Tarjeta 1</div>
<div class="card">Tarjeta 2
<h4><b>John Doe</b></h4>
<img src="img_avatar.png">
<img src="img_avatar.png">
<p>Resumen de la pelicula</p>
<a href="#">Ver trailer</a>
</div>
<div class="card">Tarjeta 3</div>
<div class="card">Tarjeta 1</div>
<div class="card">Tarjeta 2</div>
<div class="card">Tarjeta 3</div>
</div>
</body>
</html>
Page updated
Google Sites
Report abuse