Scribd
Cargar
12 vistas5 páginas

Web I - HTML

El documento describe la estructura y sintaxis de HTML, incluyendo elementos como doctype, html, head y body, así como buenas prácticas para su uso. Se explican etiquetas específicas para párrafos, encabezados, imágenes, listas, enlaces, tablas y formularios, además de introducir elementos de HTML5 como figure y video. También se menciona el uso de atributos para personalizar el comportamiento de estos elementos.

Cargado por

Pedro Petersen
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 DOCX, PDF, TXT o lee en línea desde Scribd
12 vistas5 páginas

Web I - HTML

El documento describe la estructura y sintaxis de HTML, incluyendo elementos como doctype, html, head y body, así como buenas prácticas para su uso. Se explican etiquetas específicas para párrafos, encabezados, imágenes, listas, enlaces, tablas y formularios, además de introducir elementos de HTML5 como figure y video. También se menciona el uso de atributos para personalizar el comportamiento de estos elementos.

Cargado por

Pedro Petersen
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 DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

HTML (Hyper Text Markup Language) fue creado para dar estructura y contenido.

HTML: Estructura y sintaxis

Estructura básica:

doctype
html
head
body

DOCTYPE: Es usado para darle al navegador que versión de HTML va a usar el


documento.

Siempre va al inicio del documento.


No es un tag de html.
En HTML5 es siempre el mismo <!DOCTYPE html>

HTML: Va seguido del doctype.


Indica el comienzo y fin del documento.
Es el elemento raíz (root).

<!DOCTYPE html>
<html>
…
…
</html>

HEAD: Es utilizado para colocar la metadata de la página.


El título del documento.
Parte no visible de la página.
Es usado para indicar el encoding que usa la página <meta charset=”UTF-8” />

Etiquetas dentro del head

<meta name=”description” “content=””> Descripción del contenido del sitio.


<meta name=”keywords” “content=””> Palabras claves del sitio.

<title></title> Título del documento.

BODY: Es utilizado para poner todo el contenido visible de la página web.


Puede haber solo uno por archivo html.

Etiquetas dentro de body


Buenas prácticas

Todos los tags se escriben en minúscula <body>, <p>, <head>


Escribir solo un elemento por línea.

Comentarios

No se muestran en el navegador
<!-- comentario -- >

Contenedores de texto - Párrafo

Los párrafos se definen con el tag <p></p>.


Son usados para escribir texto.
No usar <br> para separar párrafos.

Encabezados - Títulos

Se definen con los tags <h1> hasta <h6>


Hay que usarlo solo para títulos.
Hay que evitar saltar niveles siempre empezar con h1, seguir con h2, etc.

<h1>Titulo 1</h1>
<h2>Titulo 2</h2>

Elementos HTML - Imágenes

Se definen con el tag <img />


Sirve para insertar una imagen.

Atributos

src: En este atributo va el link de la imagen.

alt: Este atributo se usa para poner un texto, por si la imagen no se puede mostrar.

Listas en HTML

Listas ordenadas

<ol>
<li>Elemento 1</li>
</ol>

Listas desordenadas

<ul>
<li>Elemento 1</li>
</ul>

Elementos HTML - DIV y SPAN

Son simples contenedores de HTML

Los DIV y SPAN como todos los elementos, tienen las propiedades class o id.

DIV

Es un elemento que define un bloque, generalmente para secciones largas del sitio.
Puede incluir varios elementos.
Nos ayuda a construir el layout y el diseño.

SPAN

Es un elemento “inline”.
Usado para agrupar texto, palabra o frases.
Su ancho depende del contenido que tengan.

Box model

Cada elemento en una página se representa mediante una caja rectangular.

CSS: Permite controlar el aspecto y ubicación de las cajas.

HTML: Todos los elementos HTML están presentes como cajas.


Elementos HTML - Hyperlink

Links: Los links sirven para transportarse a otro sitio.

Se define con el tag <a>

Atributos

El atributo más importante del tag <a> es el href, este atributo indica el destino del link
<a href=”www,google.com.ar”>Ir a google</a>

Otro atributo es target: especifica donde se va a abrir el link.

_blank: Abre en una nueva ventana.


_parent: Abre la ventana en el frame padre.
_self: Es el default (como no ponerlo) abre en la misma página.

Elementos HTML - Tablas

Las tablas se definen con el tag <table>

Las tablas se dividen en:

Filas con el tag <tr>


Celdas con el tag <td>

Dentro del tag <td> se puede colocar texto, imágenes, etc.

Podemos indicar que una fila es el encabezado de la tabla <thead>

<table>
<thead>
<tr>
<th> Mes </th>
<th> Ahorro </th>
</tr>
</thead>
</table>

Elementos HTML - Forms

Son usados para pasar información al servidor

Se utiliza el tag <form> para definirlo.

Dentro de ese tag se pueden tener diferentes tags <input>


Texto, password, checkbox, radio, botones.

Todos los input utilizan el mismo tag <input>

El atributo type es el que hace que se diferencien.

Cada tipo de input puede tener algún atributo especial:


Por ejemplo: checkbox o radio button, el atributo checked.

HTML5 - Figure & Figcaption

El elemento HTML <figure> representa contenido independiente, a menudo con un


título.Si bien se relaciona con el flujo principal, su posición es independiente de éste. Por lo
general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un
esquema al que se hace referencia en el texto principal.

<figure>
<figcaption>
</figcaption> Descripción/pie de imagen.
</figure> Insertar imágenes en una noticia

HTML5 - Video

Etiquetas <video> </video>

Atributos

src
autoplay
controls
loop
poster

También podría gustarte