HTML Estructura de Estudio

Descargar como docx, pdf o txt
Descargar como docx, pdf o txt
Está en la página 1de 6

HTML

HYPERTEXT MARKUP LANGUAGE (LENGUAJE DE MARCADO DE TEXTO)

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.

HTML no es un lenguaje de programación; es un lenguaje de marcado que define la estructura de


tu contenido. HTML consiste en una serie de elementos que se usará para encerrar diferentes partes
del contenido para que se vean o comporten de una determinada manera. Las etiquetas de encierre
pueden hacer de una palabra o una imagen un hipervínculo a otro sitio, se pueden cambiar palabras
a cursiva, agrandar o achicar la letra, etc. Por ejemplo, toma la siguiente línea de contenido:

Anatomía de un elemento HTML

Explora este párrafo en mayor profundidad.

Las partes principales del elemento son:

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 elementos pueden también tener atributos, que se ven así:

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.

Un atributo debe tener siempre:

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.

Los atributos siempre se incluyen en la etiqueta de apertura de un elemento, nunca en la de cierre.

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

Etiquetas para SEO


<meta name="description" content="Esta pagina Desarrollo Web y PcGamers">
<meta name="robots" content="index,follow">

Etiqueta para enlazar CSS,JAVASCRIPT,ect..


<link rel="stylesheet" href="">

 <body> Texto, imágenes, video, lo que va a ver el usuario </body>


2 tipos de etiquetas
 De contenido (llevan texto, imágenes, videos o cualquier cosa que se vaya a renderizar en el
proyecto)
 Contenedoras (Llevan más etiquetas adentro)
<body>
<header>Encabezado
<nav></nav>Barra de navegación
</header>
<main>Afuera de <header> y bajo de </header> Esto le va a decir al navegador que
después del encabezado, y la barra de navegación, viene el contenido principal.
</main>
 <main>
<section>
<article></article>
</section>
</main>
 <ul></ul> Listas desordenadas
<ul>
<li>Etiqueta de listas </li>
</ul>
 <ol></ol> Listas ordenadas
 <p>Etiqueta de párrafo</p>
 <h1>Etiqueta de Titulo</h1>
 <a href=""></a> Etiqueta de ancla, nos ayuda a crear hipervínculos.

<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.

Lossless (Sin perdida)


Formatos de imagen sin perdida capturan todos los datos de su archivo original. No se
pierde nada del archivo original.

Lossy (Con perdida)


Formatos de imagen con perdida se aproximan a su imagen original.

El tamaño optimo en promedio debe de pesar 70 KB a 100 KB


Etiqueta de imagen
<picture>
<img src="./Wolfdanger.JPG" alt="Esta es la imagen de un lobo" title="Lobo rudo">
</picture>

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>

También podría gustarte