Introducción A HTML

Autor: Tamara Gisele Herrera
Introducción a HTML
HTML no es un lenguaje de programación, sino un lenguaje descriptivo que utiliza

una serie de etiquetas para crear ciertas estructuras o dibujar ciertos controles. Por
ejemplo, cuando dibujamos un control ASP dentro de Visual Studio vemos lo
siguiente:
Si observamos el código del diseño vamos a poder observar lo siguiente:
Etiquetas HTML
(Generadas
automáticamente
por Visual Studio)
Página 1 de 7
Fijarse que estas etiquetas: <HTML></HTML>, <HEAD> </HEAD>, <BODY>

</BODY> son etiquetas de tipo HTML, que se generaron automáticamente al crear
un formulario web y sirven para poder de alguna manera crear una estructura. Las
etiquetas HTML también permiten crear botones, radiobuttons, checkbox, listados,
títulos con cierto formatos, etc.
Estructura básica de una página web es la siguiente:
<html>
<html> Declara que va a utilizar etiquetas html.
<head> Es la cabecera de la página, se coloca el
<head></head> título de la pestaña de la página, estilos,
metatags, etc. Aquí no se agregan botones, ni
otros controles.
<body></body>
<body> Aquí irán las etiquetas pertenecientes al
diseño de la página web, botones, radiobuttons,
textos, etc. (todo con lo que el usuario podrá
</html>
interaccionar, lo visible).
Importante:
➢ Las etiquetas HTML pueden escribirse en minúscula o en mayúsculas, es

indistinto.
➢ Toda etiqueta que se abre debe cerrarse, sino el navegador puede dar
resultados inesperados. Igualmente hay algunas etiquetas que son
excepciones que no necesitan cerrarse.
Página 2 de 7
HEAD
Dentro de la etiqueta HEAD, se pueden incorporar etiquetas que ayuden a identificar
la configuración de la página y que ayuden a los buscadores o al propio navegador.
En este ejemplo, mediante la etiqueta meta que se encuentra dentro del HEAD
seteamos el idioma de la página (Charset=UTF-8). La etiqueta title muestra la
leyenda que aparecerá en la pestaña del navegador.
Idioma de
la página
BODY
Las siguientes etiquetas se podrán colocar dentro del body y permitirán cambiarle el
formato al texto, realizar listados, incorporar imágenes, etc.
ETIQUETAS DE TIPO TEXTO
Negrita: <b> Este texto está en negrita</b>

Cursiva: <i> Este texto está en cursiva</i>
Subrayado: <u> Este texto está en subrayado</u>
Texto con espaciado simple:<tt>Frase que vamos a escribir espaciada </tt>
Texto tachado (opción 1): <strike> Este texto está tachado</strike>
Texto tachado (opción 2): <s> Este texto también está tachado </s>
ETIQUETAS QUE MODIFICAN EL TAMAÑO DEL TEXTO
Palabra tamaño pequeño: <small>Letra pequeñita</small>

Palabra tamaño grande: <big> Letra más grande</big>
Palabra tamaño más grande: <big><big> Letra aún más grande </big></big>.
Página 3 de 7
ETIQUETAS QUE SIMULAN SUPERINDICES Y SUBINDICES
Subíndice: <sub>Opcion superindice1 </sub>

Superindice: <sup> Opcion superíndice 2</sup>
ETIQUETAS QUE FORMAN PARRAFOS Y SALTOS DE LÍNEAS
Salto de línea: <br> (no necesita cerrarse)

Parrafos: Para indicar que es un párrafo lo que estamos escribiendo debemos
escribirlo entre las siguiente etiquetas <p></p>
ETIQUETA QUE DAN FORMATO DE ENCABEZADOS
En estas etiquetas el tamaño viene predefinido, el encabezado por si solo generá

un salto de linea.
H1: <h1> Texto muy grande</h1>

H2: <h2>Texto grande</h2>
H3: <h3>Texto algo más grande de lo normal</h3>
H4: <h4>Texto normal</h4>
H5: <h5>Texto pequeño</h5>
H6: <h6>Texto muy pequeño</h6>
CARACTERES ESPECIALES
No todos los ordenadores

leen las mismas letras, pero
sí todos leen el mismo
código. Un “ñ” escrita como
tal no se verá en muchos
ordenadores del mundo
pero, si por el contrario,
escribimos ñ (carácter html para la “ñ”), seguro que se muestra
correctamente.
Página 4 de 7
ETIQUETAS PARA FORMAR TABLAS
Para crear tablas utilizaremos las siguientes etiquetas: <table></table>. Luego de

definir la tabla definiremos las filas mediante las etiquetas: <tr></tr>. Las columnas
las definiremos mediante las etiquetas: <td></td>
Para agregar un formato distinto al nombre de la cada columna utilizaremos las
etiquetas: <th> </th>. El contenido que esté dentro de una etiqueta <th> está
considerado como el encabezado de la tabla, por lo que se creará en negrita y
centrado sin que nosotros se lo indiquemos.
Resultado en pantalla:
Ejemplo de TABLA en HTML:
<table>
<tr>
<th>Encabezado 1</th>
</tr>
<tr>
<td>Contenido 1</td>
</tr>
</table>
Página 5 de 7
ETIQUETAS PARA REALIZAR LISTADOS NO NUMERADOS: <ul>

Para realizar listados utilizaríamos las etiquetas <ul></ul>. Para agregar ítems,
adentro del listado deberos agregar la etiqueta <li> <li>.
<ul> Resultado en pantalla:

<li type="circle">Esto es un tipo de punto.</li>
<li type="square">Este es otro.</li>
<li type="disc">Y este es otro diferente.</li>
</ul>
ETIQUETAS PARA LISTAS NUMERADAS

Las listas numeradas van enmarcadas dentro de las etiquetas <ol></ol>. Cada ítem
dentro de la lista lo agregaremos con la etiqueta <li> </li>. Estas listan están
ordenadas de manera numérica.
<ol> Resultado en pantalla:
<li value="20">Este será el número 20. </li>

<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>
</ol>
ETIQUETAS PARA MENU

Para realizar un menú se puede utilizar la etiqueta <ol> o <ul>, la única diferencia
es que se le agrega adentro una etiqueta <a> para redirigir a otro formulario.
<ul> Resultado en pantalla:
<li> <a href="Home.aspx ">Home</a></li>

<li> <a href="About.aspx">About</a></li>
</ul>
Página 6 de 7
Fijarse que dentro de la etiqueta <a> se encuentra el atributo HREF que me

permite redirigir a otra página.
ETIQUETAS PARA IMAGENES.

El tag básico para colocar una imagen es "img". Este tag, a diferencia de la gran
mayoría de los tags de html, no necesita un cierre.
<img src="html/imagenes/prueba.jpg" width="400" height="300">
Página 7 de 7

Introducción A HTML

Cargado por

Copyright:

Formatos disponibles

Introducción A HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introducción A HTML

Cargado por

Copyright:

Formatos disponibles

Autor: Tamara Gisele Herrera

HTML no es un lenguaje de programación, sino un lenguaje descriptivo que utiliza

Si observamos el código del diseño vamos a poder observar lo siguiente:

Fijarse que estas etiquetas: <HTML></HTML>, <HEAD> </HEAD>, <BODY>

Estructura básica de una página web es la siguiente:

➢ Las etiquetas HTML pueden escribirse en minúscula o en mayúsculas, es

ETIQUETAS DE TIPO TEXTO

Negrita: <b> Este texto está en negrita</b>

ETIQUETAS QUE MODIFICAN EL TAMAÑO DEL TEXTO

Palabra tamaño pequeño: <small>Letra pequeñita</small>

ETIQUETAS QUE SIMULAN SUPERINDICES Y SUBINDICES

Subíndice: <sub>Opcion superindice1 </sub>

ETIQUETAS QUE FORMAN PARRAFOS Y SALTOS DE LÍNEAS

Salto de línea: <br> (no necesita cerrarse)

ETIQUETA QUE DAN FORMATO DE ENCABEZADOS

En estas etiquetas el tamaño viene predefinido, el encabezado por si solo generá

H1: <h1> Texto muy grande</h1>

No todos los ordenadores

ETIQUETAS PARA FORMAR TABLAS

Para crear tablas utilizaremos las siguientes etiquetas: <table></table>. Luego de

ETIQUETAS PARA REALIZAR LISTADOS NO NUMERADOS: <ul>

<ul> Resultado en pantalla:

ETIQUETAS PARA LISTAS NUMERADAS

<ol> Resultado en pantalla:

<li value="20">Este será el número 20. </li>

ETIQUETAS PARA MENU

<ul> Resultado en pantalla:

<li> <a href="Home.aspx ">Home</a></li>

Fijarse que dentro de la etiqueta <a> se encuentra el atributo HREF que me

ETIQUETAS PARA IMAGENES.

<img src="html/imagenes/prueba.jpg" width="400" height="300">

También podría gustarte