Scribd
Cargar
6 vistas6 páginas

HTML Block

Introducción estuctura HTML

Cargado por

liz.love0179
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 TXT, PDF, TXT o lee en línea desde Scribd
6 vistas6 páginas

HTML Block

Introducción estuctura HTML

Cargado por

liz.love0179
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 TXT, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Estructura HTML

1 <!DOCTYPE html> (IMPORTANTE, indica que es archivo tipo html 5) cuando no lo


detecta , se interpreta quirks mode

2 <html> etiqueta raiz de absolutamente todo documento html

3 <head> se agregan caracteristicas de la web , no necesariamente son visibles para


el usuario . ej: title> *( el titulo de la web actúa en consecuencia del motor de
busqueda del usuario , es importante que sea relevante con el contenido de la web)

4 <body> se va a incluir el contenido de la web

*todo contenido que se aplique sobre cualquier etiqueta tiene que estar identado (4
espacios antes sobre la etiqueta anterior o tabulando)

ejemplos de etiqueta:

5 <h1>* heading : se utiliza para crear un subtítulo al contenido que viene despues
del mismo título de la wen , con la intencion de actuar sobre el motor de busqueda
cual asocia ese contenido .
*solo se pueden usar hasta 6 headings (a medida que enumeremos los mismos , el
subtitulo es mas pequeño); no es prioritario para cambiar el estilo del texto, si
no mas bien para trabajar sobre el motor de busqueda del usuario.

6 <p>* parrafo: sirve para agregar texto con contenido que queramos , en caso de
querer separar los parrafos se efectúa creando otra etiqueta de <p> nuevamente .

7 <hr>* hr: esta etiqueta es una linea horizontan que se aplica para separar
contenido de texto o secciones de aplicaciones.

8 <!-- --> comentario: sirve para agregar textos que no esten a la vista de los
usuarios , dejar asentado un mensaje o información al desarrollador accediendo
desde el código.

9 <span>* span: es una selección silenciosa de una parte del texto, que sirve para
modificar una etiqueta de html dentro de otra.. Por ej: cambiarle el tamaño , darle
estilo (style="") etc. .

10 <br>* : sirve para hacer uno o mas saltos de linea , osea bajar el parrafo del
texto.

.<s>* : sirve para mostrar tachada la palabra

*strong: esta etiqueta es para poner el texto en negrita . Con la strong etiqueta,
el navegador aplica el CSS de font-weight: bold ; al elemento.
ej: <p>El gatito esta <strong>loco</strong>.<p>

*u : Para subrayar el texto, puede utilizar la uetiqueta. Esto se usa a menudo para
indicar que una sección de texto es importante o algo para recordar.

ej: *u : Para subrayar el texto, puede utilizar la uetiqueta. Esto se usa a


menudo para indicar que una sección de texto es importante o algo para recordar.

ej: <p>El<u>gatito</u>está loco</p>

11 <a>* hipervinculo:codigo- <a href="https://sitio web" . .sirve para


redireccionar a otro sitio web

* para seleccionar el hipervínculo (<a href=") y abrirlo en otra ventana, agregar


el comando (target="_blank") ej : <a target="_blank" href="https://sitio web"> +
nombre de web.

<img/>: esta etiqueta es para agregar imagenes a la web , puede extraerlas tanto
de.. 1 sitio web en particular , ej: <img src="https://www.sitioweb.com/img.png"/>
2 de una imagen sacada del disco duro , se mueve el archivo a la carpeta de
INDEX.HTML y se coloca el nombre de la imagen sobre la etiqueta ej: <img
src="nombredeimagen.png"/>

*si ubicamos la imagen dentro de una carpeta del editor, para seleccionarla se
agrega el nombre del archivo seguido de / ej: <img src="img/nombre de imagen.jpg"/>

*tiene la particularidad de no necesitar cierre de etiqueta . ejemplo: <img


contenido/>

*whidth="" y height="" (alto y ancho de imagen): es otra propiedad de la etiqueta


<img/> ; hay que aplicar los 2 valores tanto de ancho como de largo ,
de lo contrario basta solo con 1 valor para abarcar los 2 . ej: whidth="300"
heigth="100" .

*alt="" : alt text describe el contenido de la imagen y proporciona una


alternativa de texto para ella .Un altatributo ayuda en los casos en que la imagen
no se carga o el usuario no puede verla . También es necesario para usuarios con
discapacidad visual para poder convertir el contendo en audio. ej:
<img src="karacola1v9.jpeg" alt="karacola jugando lolcito">

Si la lectura anterior a la imagen describe la misma, el atributo "alt" sigue


siendo necesario, pero se puede establecer la cadena vacía.(Aunque siempre es
recomendable , también ayuda con los motores de búsqueda Ej:
<img src="karacolaViolenta.jpeg" alt="">

***

12 <form> form: *etiqueta para interactuar con usuarios (campo a llenar para
filtrar informacion o llenar datos)

*<label> : esta propiedad que es para darle nombre al campo el cual llenar de la
web, por ej de un imput : <label>Nombre</label>
*<label for="" : propiedad para seleccionar el campo clickeando la palabra ej :
<label for="nombre">nombre</label>

<input id="nombre"/> (comando para redireccionar al input a la hora de clickear


palabra"

13 <input/> etiqueta que sirve de campo para llenar datos en la web.

*for="" : redirecciona clickeando palabra al imput o campo a llenar .

*name="" : propiedad de imput que remarca el contenido que se envia en el campo a


llenar , importante siempre agregar esta etiqueta para dar un destino al campo
llenado por el usuario ej: <input id="nombre" name="nombre" />

*placeholder="" : valor que se visualiza ligeramente sobre el imput , para indicar


al usuario que informacion llenar en el campo .

*type="" : modifica la función del imput dependiendo del valor que contenga esta
propiedad , que ya por defecto tiene el valor de "text" . hay distintos tipos de
esta propiedad .

_type="submit" : el imput se convierte en un boton.

_type="email" : recepta correo electronico.

_type="password" : oculta el valor que el usuario llena en el imput.

_type="radio" : boton de radio para seleccionar opcion.

_type="checkbox" : casila para tildar al seleccionar

_type="file" : para seleccionar archivo .

_type="date" : fecha de nacimiento

_type="text" required> Puedes requerir campos específicos de un formulario para que


tu usuario no pueda enviarlo hasta que no los haya rellenado. ej: <input
type="text" required>

14 <textarea> : campo mas grande , principalmente para poner comentarios con


propiedades similares por ej. imput.

* id="",name="",placeholder="",

*propiedades de valor de tamaño de textarea: rows="" , cols=""(columnas) ,

15 propiedades de form : es necesario en esta etiqueta , seleccionar el destino que


contenga los campos utilizados por los usuarios .

ej: 1 <form action="formulario" (formulario , servidor o destino )

ej: 2 method=" método de transferencia de datos . method="GET" primera opción


"GET" usa la URL para enviar los valores que se llenan en los campos

segunda opción "POST"


envia datos por cabecera, en vez de url. .(???)
*propiedad value="" : propiedad que sirve para llenar un campo y agregar un valor ,
ej: <input value="juancito" type="text" id="nombre" name="nombre" . No se puede
aplicar sobre etiqueta de textarea ( en este caso se agrega el valor sobre la
etiqueta misma)

ej: <textarea>valor por defetco</textarea>

*<button> : es una propiedad mas personalizable del input ; donde tambien podemos
incluir mas etiquetas de html dentro del mismo ej:(src="img/imagen.png", tambien
contando con 3 tipos diferentes para distintas funciones

ej: <button type="button">Tipo boton</button> se configura función con java


script
<button type="reset">tipo reset</button> resetea el valor dentro del
campo
<button type="submit">tipo submit</button> envia valor al servidor
mediante el (method="")

16 <ul> etiqueta que sirve para armar lista NO ordenada . ej .<ul>


°<li>elemento
1</li>
°<li>elemento
2</li>
°<li>elemento
3</li>
*<li>(lista): propiedad de lista , enumerar contenido.

17 <ol>(lista ordenada) etiqueta que sirve para armar lista ordenada , tambien se
puede agregar valor del orden que tenga desde el comienzo y crear mas listas dentro
de las mismas con su respectivo estilo de lista.

ej: <ol>
<li value="25">elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
<ol>
<li style="list-style-type: lower-alpha"; >sub lemenento 1</li>
<li style="list-style-type: lower-alpha">sub elemento 2</li>
<li style="list-style-type: lower-alpha">sub elemento 3</li>

</ol>

* la propiedad de (value="") le da un valor para arrancar a enumerar la lista

* la propiedad de (style="list-style-type:estilo) es para elegir el formato de


lista , ej: (números , letras , números romanos) *se debe agregar a todas las
listas .

18 <table> : etiqueta sirve para armar tablas , con respectivas columnas y


cabeceras.

*<tr> table row(fila de tablas)

*<th> table head(tabla de cabecera) se colocan centrados


*<td> define los elemento estandares que van dentro de las celdas de las tablas .
arrancan colocandose a la izquierda .

19 <thead> sirve para agrupar elementos que se encuentran en las cabeceras(titulos)


de nuestras tablas

*<tbody> es para identificar o agrupar todas las pilas que pertenezcan al cuerpo de
olas tablas (contenido) .

*<tfoot> sirve para agregar el valor final a la suma de las columnas de una
tabla .ej <tfoot>

<td></td>

<td> total 150$</td>

</tfoot>

20 <header> esta etiqueta sirve para agrupar links ,imagenes o logos de nuestra
paginas.
(Se pueden crear varias de estas mismas siemrpe y cuando no este una dentro de otra
etiqueta de header ni tampoco dentro de una etiqueta de <footer>. generalmente ,
van los heading <h1>

*<section> es para definicr secciones de nuestra app o web . se aplican varias


secciones o etiquetas con contenido . Por ejemplo, si un libro es el "article",
entonces cada capítulo es un "section". Cuando no haya una relación entre los
grupos de contenido, utilice un div.

*<article> se utiliza para definire identificar contenido de forma independiente


ej: como post con caracteristias , historias , publicaciones o imagenes .

21 <footer> se utiliza para colocar el pie de página de nuestra web , se puede usar
multiples de estas . generalmente contienen el
copyright, informacion de contacto o sitio , como navegar dentro del sitio , links
para volver al principio de la web , info del autor . etc .

ej: <a href="[email protected]">contactame por aquí a/>

*<a> : link para contacto ej: <a


href="mailto:[email protected]">contactame aquí</a>

22 <div> : tiene la misma funcionalidad que la etiqueta de <section> y tambien


divir el contenido y agruparlo .

* Los atributos (id="") y (class="") se utilizan para identificar los elementos que
luego pueden ser seleccionados por otros idiomas .

23 <fieldset> esta etiqueta es para encuadrar todo su contenido cual cubre la


etiqueta , generalmente se encuentra sobre <form>
24 <legend> se ubica dentro de fieldset , para agregar texto al recuadro .

25 <main> esta etiqueta se usa para envolver el contenido principal , sólo debe
haber uno por página .Su única función es rodear la infomración que es el tema
principal de la página.
Si alguna vez ha visto un enlace "Saltar al contenido principal" en la parte
superior de una página, el uso de la "main" etiqueta proporciona automáticamente
esa funcionalidad .

26 <nav> El nav elemento es otro elemento HTML5 con la función para facilitar la
navegación del lector de pantalla. Esta etiqueta está destinada a envolver los
principales enlaces de navegación en su página. Si hay enlaces de sitios repetidos
en la parte inferior de la página, no es necesario marcarlos con una nav etiqueta
también.

27 <audio> El elemento de HTML5 audiootorga un significado semántico cuando


envuelve contenido de transmisión de audio o sonido en su marcado. El contenido de
audio también necesita una alternativa de texto para ser accesible a las personas
sordas o con dificultades auditivas.Esto se puede hacer con texto cercano en la
página o un enlace a una transcripción.
La audioetiqueta admite el controlsatributo. Esto muestra la reproducción, la
pausa y otros controles predeterminados del navegador, y es compatible con la
funcionalidad del teclado. Este es un atributo booleano, lo que significa que no
necesita un valor, su presencia en la etiqueta activa la configuración. ej:

<audio id="meowClip" controls>


<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3"
type="audio/mpeg">
</audio>

<i> : La <i> etiqueta define una parte del texto en una voz o estado de ánimo
alternativo. El contenido interior normalmente se muestra en cursiva .
La <i>etiqueta se usa a menudo para indicar un término técnico, una frase de
otro idioma, un pensamiento, el nombre de un barco, etc.

Use el <i>elemento solo cuando no haya un elemento semántico más apropiado, como:
<em> (texto enfatizado)
<strong> (texto importante)
<mark> (texto marcado/resaltado)
<cite> (el título de una obra)
<dfn> (un término de definición)

También podría gustarte