Scribd
Cargar
11 vistas4 páginas

HTML

Cargado por

agustin piñeiro
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
11 vistas4 páginas

HTML

Cargado por

agustin piñeiro
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 4

HTML

En HTML se utilizan etiquetas y con estas se creamos elementos, por ejemplo:


<title>
<h1> <h2> <h3> <h4> <h5> <h6> (El <h1> se utiliza 1 vez)
<body> En este escriben todo el código
<p>
<div> Se usa para agrupar contenido en el HTML y que sea más fácil estilarlo
en el CSS, y esto es más fácil de hacer si se le agregan atributos como class o
id, así se lo diferencia de otros div.
<main> Este elemento nos indica que lo que está dentro suyo es el contenido
principal de la página en la que estamos. Sólo puede ser usado una vez por
cada página. O sea, es como lo más importante.
<header> Se usa para identificar contenido que nos sirva de introducción a un
bloque de código de nuestro HTML, puede ser usado por cada sección que lo
necesite.
<footer> Lo utilizamos para indicar información menos importante sobre la
sección en la que estemos, contenido relacionado, datos de la web, etc.
¿Vieron esa info que sale a rriba en una especie de ventanita en las páginas
con algún titulo o algo y que abajo salen cosas como © Copyright 2008 Tu
Vieja La Maneja? Eso son el Header y el Footer, en ese orden.

Esos serían los que vimos en clase, pero no voy a poner más porque es un
poco al pedo.

Luego vienen los atributos, estos le agregan funciones adicionales algunas de


las etiquetas, se escriben junto a la misma y no donde escribirían un texto que
se muestre en pantalla, por ejemplo:

class
id (El id se utiliza 1 vez)
Recordatorio: TODOS LO QUE ESCRIBAN EN EL HTML VA ADENTRO DEL BODY, Y CUANDO DIGO
ADENTRO ES ASÍ: <body> <h1></h1> <p></p> </body>. Para que se entienda mejor voy a poner un
ejemplo abajo y lo explico mejor, pero a noten esto porque si no se lo olvidan.
src
width
heigth

Ejemplo: <p class=”acá escriben la clase que le quieren poner”></p>


<img src=”acá pegan el link para la imagen, y tienen que copiar la
dirección de imagen, no la dirección de enlace, si pegan la de enlace la imagen
no sale”></img>

En estos casos los atributos siempre tienen un = y luego las “” para poder
darle la función, por ejemplo, si yo le pongo src al <img>, por si solo no va a
hacer nada, pero si al src le agrego la información de cual imagen quiero que
muestre, entonces si cumplirá.
<img
src=”https://b.thumbs.redditmedia.com/G1txPq9VfZm_Zrrf5Ji4XyI_sNhCnqE7Fql
Rx_r3mLg.jpg”>

Lo que debería de mostrar:

Lo otro sería la semántica, o sea, la forma en la que escriben el código


también es importante porque a la hora de buscar un error es mucho más fácil
leer y, por otro lado, cuando se pone mal una etiqueta o está fuera de lugar
puede que no funcione, a veces sí funcionan porque, por ejemplo, no hay algo
que le impida mostrarse en pantalla, pero cuando agregan otra etiqueta o algo,
la nueva función le va a impedir que cumpla con la suya.

Esto de acá sería una semántica bien hecha:

Como dato curioso en HTML pueden agregar notas que no influyen en el código con esto
<!-- --> y en el CSS con /**/. Y mi consejo es que cuando estén usando las computadoras,
cambien el teclado a Español (Argentina), eso en el ícono que dice ESP al lado de la hora en la
barra de abajo, porque así las teclas del teclado están más acorde con lo que dicen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Titulo de la página</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<h1>OTRO TITULO DE EJEMPLO</h1>


<img
heigth="500"
width="500"
src="https://eshinchade.com.ar/wp-content/uploads/2021/08/Facundo-
Conte.jpg">

<h2>TITULO DE EJEMPLO</h2>
<h3>TITULO DE EJEMPLO</h3>
<div><p>Texto de ejemplo</p></div>
<h3>EJEMPLO</h3>
<p>texto de ejemplo</p>
<p>Otro ejemplo</p>

<p>Y acá otro texto más de ejemplo</p>


<ol>
<li>Texto de ejemplo</li>
<li>Por cierto, esto, el li significa list item</li>

Como dato curioso en HTML pueden agregar notas que no influyen en el código con esto
<!-- --> y en el CSS con /**/. Y mi consejo es que cuando estén usando las computadoras,
cambien el teclado a Español (Argentina), eso en el ícono que dice ESP al lado de la hora en la
barra de abajo, porque así las teclas del teclado están más acorde con lo que dicen.
<li>Texto de ejemplo</li>
</ol>

<script src="script.js"></script>
</body>

</html>

Acuérdense que mientras más prolijo se vea, mejor, porque es más legible y
cómodo a la vista. Además de que puede que si está desprolijo se les pasen
varios errores.

Como dato curioso en HTML pueden agregar notas que no influyen en el código con esto
<!-- --> y en el CSS con /**/. Y mi consejo es que cuando estén usando las computadoras,
cambien el teclado a Español (Argentina), eso en el ícono que dice ESP al lado de la hora en la
barra de abajo, porque así las teclas del teclado están más acorde con lo que dicen.

También podría gustarte