ITI7 Programación Web · ITI7 –Programación Web Etiqueta: a Navegador Descripción Define un...

Post on 10-Oct-2020

0 views 0 download

Transcript of ITI7 Programación Web · ITI7 –Programación Web Etiqueta: a Navegador Descripción Define un...

ITI7 – Programación Web

ITI7 – Programación Web

NavegadorEtiqueta: h1

Descripción

Define encabezados.

<h1>Este es un h1</h1><h2>Este es un h2</h2><h3>Este es un h3</h3><h4>Este es un h4</h4><h5>Este es un h5</h5><h6>Este es un h6</h6>

ITI7 – Programación Web

NavegadorEtiqueta: p

Descripción

Define párrafos.

<p>Este es un párrafo</p>

ITI7 – Programación Web

NavegadorEtiqueta: a

Descripción

Define un enlace.

El atributo href para la ruta del enlace.

El atributo target con valor de _blank para

abrir una nueva pestaña.

<a href="http://tolinware.com/"target="_blank">

Este es un enlace a tolinware.com</a>

ITI7 – Programación Web

NavegadorEtiqueta: img

Descripción

Define una imagen.

El atributo src para la ruta de la imagen.

El atributo alt para describir la imagen.

El atributo width para el ancho.

El atributo height para el alto.

<img src="http://tolinware.com/resources/tolinware-mayo-2020.png" alt="tolinware" width="100"height="100">

ITI7 – Programación Web

NavegadorEtiqueta: b

Descripción

Define texto en negritas.

<b>Esta es una nagritas</b>

ITI7 – Programación Web

NavegadorEtiqueta: br

Descripción

Define un espacio entre texto.

<p>Esta es un párrafo, <br> este esotro párrafo</p>

ITI7 – Programación Web

NavegadorEtiqueta: pre

Descripción

Define un texto preformateado.

<pre>Hola ke aseMuy bien y ustedBien también

</pre>

ITI7 – Programación Web

NavegadorEtiqueta: p con estilo

Descripción

Define un estilo con el atributo style.

La propiedad color da un color a un texto.

La propiedad font-size da un tamaño a un

texto.

<p style="color:brown;">Este es un párrafo color brown

</p><p style="font-size: 50px;">

Este es un párrafo más grande</p>

ITI7 – Programación Web

NavegadorEtiqueta: div

Descripción

Define una etiqueta vacía y a través del

atributo style define un ancho, alto y un

color con la propiedad background-color.

<div style="width: 500px;height: 500px; background-color: chartreuse;"></div>

ITI7 – Programación Web

NavegadorEtiqueta: strong

Descripción

Define un texto importante.

<strong>Esta es una etiqueta para texto importante</strong>

ITI7 – Programación Web

NavegadorEtiqueta: i

Descripción

Define un texto en cursiva.

<i>Texto Italic</i>

ITI7 – Programación Web

NavegadorEtiqueta: em

Descripción

Define un texto enfatizado.

<em>Texto enfatizado</em>

ITI7 – Programación Web

NavegadorEtiqueta: mark

Descripción

Define un texto marcado.

<mark>Texto marcado</mark>

ITI7 – Programación Web

NavegadorEtiqueta: small

Descripción

Define un texto más pequeño.

<small>Texto más pequeño</small>

ITI7 – Programación Web

NavegadorEtiqueta: del

Descripción

Define un texto eliminado.

<del>Texto eliminado</del>

ITI7 – Programación Web

NavegadorEtiqueta: ins

Descripción

Define un texto insertado.

<ins>Texto insertado</ins>

ITI7 – Programación Web

NavegadorEtiqueta: sub

Descripción

Define un texto de subíndice (para bases).

<sub>Texto de subíndice</sub>

ITI7 – Programación Web

NavegadorEtiqueta: sup

Descripción

Define un texto de superíndice (para

exponentes).

<sup>Texto en superíndice</sup>

ITI7 – Programación Web

NavegadorEtiqueta: blockquote

Descripción

Define una sección que se cita de otra

fuente.

<blockquote cite="http://tolinware.com">

Este es un párrafo tomado de tolinware.com</blockquote>

ITI7 – Programación Web

NavegadorEtiqueta: q

Descripción

Define una breve cita.

<q>Esta es una breve cita</q>

ITI7 – Programación Web

NavegadorEtiqueta: abbr

Descripción

Define una abreviatura.

<p>En <abbr title="Tolinware°">TW°</abbr> encontrarás información sobre tus cursos.</p>

ITI7 – Programación Web

NavegadorEtiqueta: address

Descripción

Define una dirección.

<address>Escrito por Aarón Salazar.<br>Visitanos en:<br>tolinware.com<br>SN, Gómez Palacio<br>México

</address>

ITI7 – Programación Web

NavegadorEtiqueta: cite

Descripción

Define el título de una obra creativa.

<p><cite>La creación</cite> esuna obra de Miguel Ángel.</p>

ITI7 – Programación Web

NavegadorEtiqueta: bdo

Descripción

Cambia de dirección el texto según el

atributo Dir.

<bdo dir="rtl">Cambia de direcciónel texto</bdo>

ITI7 – Programación Web

NavegadorEtiqueta: comentario en html

Descripción

Escribe un comentario dentro de un

documento html.

<!-- Este es un comentario -->

ITI7 – Programación Web

NavegadorEtiqueta: button como enlace

Descripción

Al darle clic te redirecciona a una página

web.

<button onclick="document.location='http://tolinware.com'">tolinware°</button>

ITI7 – Programación Web

NavegadorEtiqueta: enlace para enviar correo

Descripción

Al darle clic te abre un correo electrónico.

<a href="mailto:alguien@ejemplo.com">Enviar correo</a>

ITI7 – Programación Web

NavegadorEtiqueta: table

<table style="width:100%" border=""><tr>

<th>Nombre</th><th>Apellido</th><th>Edad</th>

</tr><tr>

<td>Carlos</td><td>Macías</td><td>20</td>

</tr><tr>

<td>Avelina</td><td>McDonalds</td><td>40</td>

</tr><tr>

<td>Pedro</td><td>Santander</td><td>28</td>

</tr></table>

ITI7 – Programación Web

Etiqueta: tableDescripción

• Usa el <table> para definir una tabla

• Utilice el <tr> para definir una fila de la

tabla

• Utilice el <td> para definir los datos de

una tabla

• Utilice el <th> para definir un

encabezado de tabla

• Utilice el <caption> para definir un título

de tabla

ITI7 – Programación Web

NavegadorEtiqueta: ul

Descripción

Define una lista desordenada.

<ul><li>Café</li><li>Té</li><li>Leche</li>

</ul>

ITI7 – Programación Web

NavegadorEtiqueta: ol

Descripción

Define una lista ordenada.

<ol><li>Café</li><li>Té</li><li>Leche</li>

</ol>

ITI7 – Programación Web

NavegadorEtiqueta: dl

Descripción

Define una lista con descripción.

<dl><dt>Frapé</dt><dd>- Bebida fria</dd><dt>Café</dt><dd>- Bebida con cafeína</dd>

</dl>