Scribd
Cargar
32 vistas40 páginas

Introducción a HTML y sus Tags

Cargado por

El Gran Arturito
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 PPTX, PDF, TXT o lee en línea desde Scribd
32 vistas40 páginas

Introducción a HTML y sus Tags

Cargado por

El Gran Arturito
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 PPTX, PDF, TXT o lee en línea desde Scribd

CENTRO DE BACHILLERATO TECNOLÓGICO

CBT No 4 Toluca

Introducción
Programación de Web

Miguel Angel Torres Hernández


Introducción HTML

 Definición de HTML; tags inciales y finales, tags


vacíos,
tags anidados, y atributos.

 Estructura de un documento
HTML. Tags <html>, <head>,
<body>.

 Tags <title> y <link>.

 Tags para encabezados: <h1>


a <h6>.

 Tag para párrafos: <p>.


Introducción HTML

 Tag para salto de línea: <br />.

 Comentarios en HTML.

 Tags de formato de texto: <b>, <i>, <u>,


<small>, <big>,
<sub>, <sup>, <em>, <strong>, <ins>,
<del>, <tt>, etc.

 Tag para imágenes: <img>.

 Tag para hyperlink: <a>.

 Tags para tablas: <table>, <tr>, <td>.


HTML

 HTML = Hyper Text Markup Language

 HTML no es un lenguaje de programación.

 HTML es un lenguaje de marcado.

Un lenguaje de marcado es un conjunto de


tags de marcado (etiquetas).

 HTML usa los tags de marcado para generar


páginas web.

 Página web = documento HTML


Tags HTML

 Los tags de marcado HTML son comúnmente


conocidos
como tags HTML (o elementos HTML).

Los tags HTML son palabras reservadas que


están rodeadas por los signos < y >.
Ejemplos:

<html>
<head>
<body>
<h1>
<p>
Tags HTML

 Los tags HTML normalmente se escriben en


pares, los
cuales se denominan: tag inicial y tag final.
Ejemplo:

<b>Carlos Jaimez</b>

tag inicial tag final


 Existen algunos tags HTML que solamente
consisten de tag inicial (no tienen tag final). Son
conocidos como elementos HTML vacíos. Ejemplo:

<img src="[Link]" />


Tags HTML con tag inicial y tag final

La mayoría de los browsers desplegarán


correctamente el documento HTML aunque olvides
escribir el tag final. Ejemplo:

<p>Este es un párrafo sin tag final

El ejemplo de arriba funcionará en la mayoría de


los browsers, pero no te confíes! Si olvidas el tag
final pueden producirse resultados inesperados.

Versiones futuras de HTML no permitirán que


olvides escribir los tags finales.
Tags HTML vacíos

 Los elementos HTML sin contenido son llamados


elementos vacíos. <br> es un elemento vacío.

En XHTML, XML, y en futuras versiones de HTML,


todos los elementos deberán ser cerrados.

La forma correcta de cerrar elementos vacíos es


añadiendo un slash “/” al tag inicial, de la siguiente
forma
<br />. Esta forma es aceptada por HTML, XHTML y
XML.

Aunque <br> funciona en todos los browsers, es


mejor si escribes <br />, ya que así funcionará en
Tags HTML: Mayúsculas o minúsculas?

 Los tags HTML no son case sensitive, es decir que


no
importa si los escribes en mayúsculas o minúsculas.

 <P> es lo mismo que <p>

Actualmente muchos sitios web utilizan tags HTML


en mayúsculas. Nosotros usaremos tags HTML en
minúsculas, ya que el World Wide Web Consortium
(W3C) recomienda minúsculas en HTML 4.

 En futuras versiones de (X)HTML los tags en


minúsculas
serán obligatorios.
Tags HTML

 Un documento HTML contiene tags HTML y texto


plano.

El propósito del browser (Internet Explorer, Firefox,


Opera, etc.) es leer documentos HTML y
desplegarlos como páginas web.

El browser no despliega los tags HTML; utiliza los


tags HTML para interpretar el contenido de la
página.
Atributos HTML

 La mayoría de los tags HTML pueden tener


atributos, los
cuales siempre se especifican en el tag inicial.

Los atributos proporcionan información adicional


acerca del tag HTML (elemento HTML).

Los atributos son definidos mediante pares


nombre/valor, de la siguiente forma: nombre=
"valor". Ejemplo:

<img src="[Link]" height="250"

/> nombre valor nombre


Editor HTML

En nuestro curso usaremos un editor de texto


plano (Notepad, WordPad, etc.) para editar los
archivos HTML. Esa es la mejor forma de
aprender HTML.

 Desarrolladores web profesionales prefieren


utilizar
editores tales como FrontPage, Dreamweaver, etc.

La extensión de un archivo HTML puede ser .htm


o .html. La extensión de tres letras era utilizada en
el pasado cuando el software solamente permitía
tres letras en las extensiones de archivos.
Estructura de un documento HTML

 La estructura básica de un documento HTML


es la
siguiente:
<html>
<head>: Es la parte del
documento HTML que <head>
no es visible (con ....
excepción del tag </head>
<title>).
<body>: Es la parte <body>
del documento HTML ....
que es visible. </body>

</html>
Tag <html>

El tag <html> es el elemento raíz de un


documento HTML. Todos los demás tags en el
documento estarán contenidos en este tag.

 El tag <html> delimita el inicio y el final de un


documento HTML.
<html>
…
 Documento …
HTML …
…
</html>
Tag <head>

El tag <head> es un contenedor de otros tags


HTML, los cuales contienen metadatos e
información de procesamiento del documento
HTML.

 El tag <head> es la sección del documento


HTML que
no es desplegable o visible en el browser.

De todos los tags que pueden ir dentro del tag


<head>, el tag <title> es el único que es visible. Su
contenido es desplegado en la barra de título del
browser.
Tag <title>

<title>: Se escribe dentro del tag <head>.


Especifica el título de la página web, el cual es
desplegado en la barra de título del browser.
Ejemplo:
<title>Mi primer archivo HTML<title>
Tag <link>

<link>: También se escribe dentro del tag


<head>. Especifica ligas o enlaces a otros
documentos. El uso más común de este tag es
para especificar la hoja de estilo (CSS) que
será aplicada al documento HTML.

Ejemplo:

<link rel="stylesheet" type="text/css"


href="[Link]" />
Tag <body>

El tag <body> es un contenedor de otros tags


HTML, los cuales son utilizados para desplegar
información en el browser.

El tag <body> es la sección del documento HTML


que es desplegable o visible en el browser.
Tags <h1> ... <h6>

Los tags <h1>, <h2>, <h3>, <h4>, <h5>, y <h6> son


utilizados para definir diferentes niveles de
encabezados para secciones en un documento
HTML.

El tag <h1> determina el encabezado de más alto


nivel (secciones); <h2> es el encabezado del
siguiente nivel hacia abajo (subsecciones); <h3>
define un nivel abajo de <h2>; y así
sucesivamente hasta <h6>.

La mayoría de los browsers muestran los


encabezados como texto en negrita; aunque esto
puede ser cambiado con CSS.
Tags <h1> ... <h6>

 Ejemplo:
<h1>(h1) Encabezado de primer
nivel</h1>
... ... ...
<h6>(h6) Encabezado de sexto
nivel</h6>

 El browser despliega:
Tag <p>

 El tag <p> es utilizado para crear un párrafo.


Es el
elemento HTML más común para definir un
bloque.

 Ejemplo:

<p>Este es el primer párrafo</p>


<p>Este es el segundo párrafo</p>
<p>Este es el tercer párrafo</p>

Los browsers automáticamente añaden una


línea en blanco antes y después de los
Tag <hr />

 El tag <hr /> es utilizado para crear una


regla
horizontal. Ejemplo:

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

 El browser lo despliega
de la siguiente forma.

 Reglas horizontales
Tag <br />

 El tag <br /> es utilizado para crear un salto de


línea,
sin la necesidad de comenzar un párrafo.
Ejemplo:

<p>Párrafo <br />con <br />saltos <br />de


línea</p>

El browser lo
despliega de la
siguiente forma.

 3 saltos de línea.
Comentarios HTML

Los comentarios son secciones de texto


encerradas entre <!-- y --> que son ignoradas
por el browser, y no serán desplegadas en la
página web. Ejemplo:

<!-- Este es un comentario -->

Los comentarios son utilizados para escribir


notas, y hacer el código del documento HTML
más entendible.
Tags de formato de texto I

 HTML utiliza tags como <b> y <i> para dar


formato al
texto en negritas y cursivas, respectivamente.

 Estos tags son llamados tags de formato de texto.

Las siguientes dispositivas muestran una lista


de los tags HTML para formato de texto.

 Para ejemplos de estos tags puedes consultar


la página
web que realizamos durante la clase.
Tags de formato de texto II

Tag Descripción Ejemplo

<b> Texto en negritas <b>Texto en negritas</b>

<i> Texto en cursivas <i>Texto en cursivas</i>

<u> Texto subrayado <u>Texto subrayado</u>

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


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

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

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


Tags de formato de texto III

Tag Descripción Ejemplo

<em> Texto enfatizado <em>Texto enfatizado</em>


(similar a cursivas)
<strong Texto fuerte <strong>Texto fuerte</strong>
> (similar a
negritas)
<ins> Texto insertado <ins>Texto insertado</ins>
(similar a
subrayado)
<del> Texto borrado <del>Texto borrado</del>

<tt> Texto <tt>Texto computadora</tt>


teletype
(computador
a)
Tags de formato de texto - Ejemplos
Tag <img>

 El tag <img> es utilizado para insertar imágenes


en el
documento HTML.

El nombre de la imagen es proporcionado


mediante el atributo src. El nombre incluye la
ruta o URL donde se encuentra la imagen.

El tamaño de la imagen es proporcionado


con los atributos height (alto) y width
(ancho).

El atributo alt proporciona un texto alternativo


en caso de que la imagen no pueda ser
Tag <img>

 Ejemplo:

<img src="[Link]" alt="Este es un


perrito"
height="283" width="245" />

El browser la
despliega de la
siguiente forma.

En Internet Explorer, el


texto contenido en el
atributo alt es desplegado
como tooltip cuando el
Tag <img>

Si la imagen no puede ser


desplegada, el texto del
atributo alt es mostrado
junto a una x.

Modificando los valores de


los atributos height y width
pueden lograrse diferentes
tamaños de imágenes.

height="141"
width="122"
height="70"
width="61"
Tag <a>

 El tag <a> es utilizado para crear enlaces


(hyperlinks)
a otros documentos HTML.

También puede ser utilizado para definir anclas


(anchors), en ciertas partes de un documento
HTML (las anclas las veremos más adelante en el
curso).

El tag <a> contiene el atributo href, el cual es


utilizado para especificar la dirección del enlace
(hyperlink).

En la mayoría de los browsers,


Tag <a>

 Ejemplo:

<a href="[Link] a
Google</a>

 El browser despliega:
Tag <table>, <tr>, <td>

 Las tablas en HTML son definidas con el tag


<table>.

 Una tabla es dividida en renglones, con el tag


<tr>.

 Cada renglón es dividido en celdas, con el tag


<td>.

Es en los tags <td> donde realmente estará


contenida la información. Cada celda <td>
puede contener texto, imágenes, listas, párrafos,
formas, saltos de línea, reglas horizontales, tablas,
etc.
Ejemplo de una tabla sencilla

<table border="1">
<tr>
<td>Nombre</td>
<td>Email</td>
<td>Direcci&oacute;n</td>
</tr>
<tr>
<td>Carlos Jaimez</td>
<td>
[Link]@[Link]</td>
<td>Constituyentes No.
1054</td>
</tr>
<tr>
<td>Erika L&oacute;pez</td>
<td>erika_lopez@[Link]
</td>
<td>Av. Reforma No. 520</td>
</tr>
Ejemplo de una tabla sencilla

 El browser desplegará la tabla de la forma


siguiente:

Si no se especifica el atributo border del tag


<table>, la tabla será desplegada sin bordes:
Tags anidados

 Es posible anidar tags HTML.

 Ejemplo 1:

<b><i><u>Texto negritas, cursivas y subrayado</u></i></b>

El efecto que tendrá el código anterior será que


el texto será desplegado en negritas, cursivas,
y subrayado.
Tags anidados

 Ejemplo 2:

<a href="[Link]
<img src="[Link]" /><br />Ir a Google
</a>

El efecto que tendrá el código anterior será que


la imagen y el texto que se encuentran dentro del
tag <a> tendrán un enlace al URL
[Link]
Código HTML

 Cómo se puede ver el código de una página


HTML?
Código HTML

 Cómo se puede ver el código de una página


HTML?

Si das click derecho sobre la página web, y


seleccionas “View Source”, o “Ver Código Fuente”,
se abrirá una ventana que te mostrará el código
de esa página HTML.

También podría gustarte