HTML Estructura de Estudio
HTML Estructura de Estudio
HTML Estructura de Estudio
Que es el HTML Semántico y porque es importante. No solo nos ayuda con algunos aspectos de
presentación, le agrega significado a nuestro contenido.
Desde el navegador podemos ver cómo está construido el sitio web y si es accesible y entendible
para todos.
1. La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p), encerrado
por paréntesis angulares (< >) de apertura y cierre. Establece dónde comienza o empieza a
tener efecto el elemento —en este caso, dónde es el comienzo del párrafo—.
2. La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una barra de
cierre (/) antes del nombre de la etiqueta. Establece dónde termina el elemento —en este
caso dónde termina el párrafo—.
3. El contenido: este es el contenido del elemento, que en este caso es sólo texto.
4. El elemento: la etiqueta de apertura, más la etiqueta de cierre, más el contenido equivale al
elemento.
Los atributos contienen información adicional acerca del elemento, la cual no quieres que aparezca
en el contenido real del elemento. Aquí class es el nombre del atributo y editor-note el valor del
atributo. En este caso, el atributo class permite darle al elemento un nombre identificativo, que se
puede utilizar luego para apuntarle al elemento información de estilo y demás cosas.
1. Un espacio entre este y el nombre del elemento (o del atributo previo, si el elemento ya
posee uno o más atributos).
2. El nombre del atributo, seguido por un signo de igual (=).
3. Comillas de apertura y de cierre, encerrando el valor del atributo.
Nota: el atributo con valores simples que no contengan espacios en blanco ASCII (o cualesquiera
de los caracteres " ' ` = < >) pueden permanecer sin entrecomillar, pero se recomienda entrecomillar
todos los valores de atributo, ya que esto hace que el código sea más consistente y comprensible.
id
<footer>Pie de pagina
</footer>
</body>
Etiquetas Multimedia
Lossy vs Lossless
Existen dos tipos de imágenes, sin pérdida o con perdida, y esto depende de cómo él
formato maneja las imágenes.
Etiqueta de video
<video src="./Como cortar una cebolla - Chef James.mp4" controls preload="auto">
<track default kind="captions" srclang="en">
</video>
Etiqueta de audio
<figcaption>Almirante & Aspirante</figcaption>
<audio src="./y2mate.com - Almirante x Aspirante No Way Video Oficial.mp3" controls>
</audio>
Formulario1
El mejor formulario es cuando no lo hay.
<body>
<form action="">
<label for="nombre">
<span>¿Cual es tu nombre?</span>
<input type="text" id="nombre" placeholder="Tu nombre">
</label>
<label for="inicio-YapaYop">
<span>¿Desde cuando nos conoces?</span>
<input type="date" id="inicio-YapaYop">
</label>
<label for="Horario">
<span>¿Cual es tu Horario?</span>
<input type="time" id="Horario">
</label>
</form>
</body>
Formulario 2
<body>
<form action="">
<label for="nombre">
<span>¿Cual es tu nombre?</span>
<input type="text" id="nombre" name="nombre" autocomplete="name" required>
</label>
<label for="correo">
<span>¿Cual es tu correo?</span>
<input type="email" id="correo?" name="correo" autocomplete="email" required>
</label>
<label for="pais">
<span>¿Cual es tu pais?</span>
<input type="text" id=pais" name="pais" autocomplete="country" required>
</label>
<label for="cp">
<span>¿Cual es tu codigo postal</span>
<input type="text" id="cp" name="cp" autocomplete="postal-code" required>
</label>
<input type="submit">
</form>
</body>
Calendario
<body>
<form action="">
<label for="calendario">
<span>calendario</span>
<input type="datetime-local" id="calendario" name="calendario">
</label>
</form>
</body>
</html>
Etiqueta de select
<main>
<input list="Cursos">
<datalist id="Cursos">
<option value="JavaScipt"></option>
<option value="html"></option>
<option value="CSS3"></option>
<option value="WebStandares"></option>
</datalist>
</main>
</body>
Input vs Botton
Input usar en los formularios.
Botton usar si se necesita en algún proyecto.
<body>
<input type="submit"/>
<button type="submit">Que color te gusta</button>
</body>