Scribd
Cargar
11 vistas6 páginas

Guía 1 HTML

El documento proporciona una introducción al Lenguaje de Marcas de Hipertexto (HTML), explicando su función en la estructura y presentación de páginas web. Se detalla la estructura básica de una página HTML, así como el uso de elementos como párrafos, títulos, imágenes y hipervínculos. Además, se abordan conceptos como anclas y la apertura de hipervínculos en nuevas pestañas del navegador.

Cargado por

Cristian Casanova
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 PDF, TXT o lee en línea desde Scribd
11 vistas6 páginas

Guía 1 HTML

El documento proporciona una introducción al Lenguaje de Marcas de Hipertexto (HTML), explicando su función en la estructura y presentación de páginas web. Se detalla la estructura básica de una página HTML, así como el uso de elementos como párrafos, títulos, imágenes y hipervínculos. Además, se abordan conceptos como anclas y la apertura de hipervínculos en nuevas pestañas del navegador.

Cargado por

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

INGENIERÍA DE SOFTWARE

INTRODUCCIÓN A LA INGENIERÍA DE SOFTWARE


SEMESTRE I

HTML

El Lenguaje de Marcas de Hipertexto (HTML - HyperText Markup Language)) es el código que se


utiliza para estructurar y desplegar una página web y sus contenidos. HTML no es un lenguaje de
programación; es un lenguaje de marcado o etiquetas que define la estructura de tu contenido.

HTML es el componente más básico de la Web. Además de HTML, generalmente se utilizan otras
tecnologías para describir la apariencia/presentación de una página web (CSS) o la
funcionalidad/comportamiento (JavaScript).

"Hipertexto" hace referencia a los enlaces que conectan páginas web entre sí, ya sea dentro de un único
sitio web o entre sitios web. Los enlaces son un aspecto fundamental de la Web.

Para poder crear una página HTML se requiere un simple editor de texto (Bloc de notas o NotePad).

ESTRUCTURA BÁSICA DE UNA PÁGINA HTML

La estructura básica de una página HTML es:

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body>
Cuerpo de la página.
</body>
</html>

Una página HTML es un archivo que generalmente tiene como extensión los caracteres html.

DOCTYPE informa al navegador que el contenido siguiente se trata de un archivo HTML (todos los
navegadores modernos analizan la presencia del DOCTYPE)

En la cabecera es común inicializar el título de la página dentro de las marcas <title></title>


(normalmente aparece en la barra superior de nuestro navegador y es utilizado por los motores de
búsqueda como Google para indexar la página) El título debe hacer referencia al contenido en sí de la
página.

Dentro de la cabecera disponemos la etiqueta meta donde definimos la propiedad charset con el valor
UTF-8 que es un formato de caracteres ampliamente empleado en internet (si no disponemos este
formato no podemos disponer caracteres acentuados, por ejemplo)
Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es
decir podemos escribirlo como más nos guste, además no requiere que dispongamos cada marca
en una línea (¡podríamos inclusive escribir toda la página en una sola línea! cosa que no
conviene ya que somos nosotros quienes tendremos que modificarla en algún momento).

Salto de línea <br>

Para indicarle al navegador que queremos que continúe en la próxima línea debemos hacerlo con
el elemento HTML <br>.
Cuando aparece la marca <br> el navegador continúa con el texto en la línea siguiente. <br>
viene de la palabra en inglés break

Párrafo <p>

Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo lo que
encerremos entre las marcas <p> y </p> aparecerá separado por un espacio con respecto al
próximo párrafo. Dentro de un párrafo puede haber saltos de línea <br>.
No es correcto tratar de dar formato a un escrito utilizando solo elementos <br>, debemos
utilizar párrafos y dentro de estos si son necesarios saltos de línea.
<p> viene de la palabra paragraph.

Títulos <h1> <h2> <h3> <h4> <h5> <h6>

Se utilizan para identificar títulos, según su importancia. El título de tamaño más grande es el de
nivel 1 <h1>. Requiere la marca de cerrado del título con la barra invertida como se presenta a
continuación: <h1> Nombre_del_Titulo </h1>
<h1> viene de la palabra heading que significa título.

En el archivo anexo “pagina1.txt” se diseña una página que contiene un título de primer nivel
<h1> y luego dos títulos de nivel <h2>. Se define un párrafo para cada título de segundo nivel y
también se evidencia el uso del salto de línea <br>.

Para ejecutar el archivo pagina1.txt en el explorador de internet se debe cambiar la extensión a


html, debe quedar pagina1.html, de esta manera se ejecuta y se debe abrir la siguiente página de
internet:
Énfasis (<em> <strong>)

Enfatizar algo significa realzar la importancia de una cosa, por ejemplo, una palabra o conjunto de
palabras. Así como tenemos seis niveles de títulos para enfatizar un bloque contamos con dos elementos
que son (<em> <strong>)

El elemento de mayor fuerza de énfasis es "strong" y le sigue "em". La sintaxis para strong es
<strong>Texto</strong> y para em es <em>Texto</em>
La mayoría de los navegadores muestran el texto enfatizado con strong con un texto en negrita y para el
elemento "em" utilizan letra itálica (de todos modos, esto no es obligatorio, pero seguramente mostrarán
los textos enfatizados).

<em> viene de emphasis que significa énfasis y <strong> significa fuerte.

Imágenes dentro de una página <img>

Para insertar una imagen dentro de una página debemos utilizar el elemento HTML <img>, la misma no
tiene una marca de finalización (similar a la etiqueta <br>).

Generalmente, la imagen se encuentra en el mismo servidor donde se almacenan nuestras páginas


HTML. Los formatos clásicos son los archivos con extensiones gif, jpg y png.

La sintaxis de esta etiqueta es: <img src="foto1.jpg" alt="Pintura geométrica">

Como mínimo, debemos inicializar las propiedades src y alt de la etiqueta HTML "img".

En la propiedad src indicamos el nombre del archivo que contiene la imagen. Como la imagen se
encuentra en el mismo directorio donde se almacena la página HTML, con indicar el nombre de archivo
basta (no es necesario indicar ninguna ruta de carpetas).

En la propiedad alt es un texto alternativo que debe describir el contenido de la imagen.

HIPERVINCULOS
El elemento más importante que tiene una página de internet es el hipervínculo, estos nos permiten
cargar otra página en el navegador. Normalmente un navegador al encontrar esta etiqueta HTML
muestra un texto subrayado, y al hacer clic con el mouse sobre éste el navegador carga la página
indicada por dicho hipervínculo. <a> viene de anchor que significa ancla.

Hipervínculo a otra página del mismo sitio <a>

El elemento de hipervínculo a otra página del mismo sitio tiene la siguiente

sintaxis: <a href="pagina2.html">Noticias</a>

Como vemos, se trata de otro elemento HTML que tiene comienzo de marca y fin de marca. Lo que se
encuentra entre el comienzo de marca y el fin de la marca es el texto que aparece en la página
(normalmente subrayado).
La propiedad href del elemento "a" hace referencia a la página que debe mostrar el navegador si el
visitante hace clic sobre el hipervínculo:

Hipervínculo a otro sitio de internet <a>

La sintaxis para disponer un hipervínculo a otro sitio de internet es:

<a href="http://www.google.com">Buscador Google</a>

Ahora la propiedad href la inicializamos con el nombre del dominio del otro sitio. Algo importante que
hay que anteceder al nombre del dominio es el tipo de protocolo a utilizar. Cuando se trata de una
página de internet, el protocolo es el http. Resumiendo a la propiedad href la inicializamos con el
nombre del protocolo (http) seguida de dos puntos (:) y dos barras (//) luego la cadena (www.) y
finalmente el nombre de dominio del sitio a enlazar. El hipervínculo anterior nos lleva al sitio principal
del buscador Google.

Hipervínculo mediante una imagen <a> y <img>

Para implementar un hipervínculo a través de una imagen y no un texto como se hizo anteriormente,
simplemente se dispone de la etiqueta <img> encerrada entre la marca de comienzo y fin del enlace
(<a>)

<a href="pagina2.html"><img src="foto1.jpg" alt="Pintura Geométrica"> </a>

En la anterior se implementa un hipervínculo desde una imagen (foto1.jpg) a otra página del mismo
sitio (pagina2.html). Y a continuación, se implementa un hipervínculo desde una imagen (logo.jpg) a
otro sitio de internet (http://www.google.com).

<a href="http://www.google.com">"><img src="logo.jpg" alt="Logo de Google"> </a>

Apertura de un hipervínculo en otra pestaña del navegador.

El elemento "a" tiene una propiedad target que nos permite indicar que la referencia del recurso sea
abierta en otra pestaña. Esta propiedad se llama target y debemos asignarle el valor "_blank" para
indicar que la página sea abierta en otra pestaña. Por ejemplo:

<a href="http://www.clarin.com.ar" target="_blank">Periódico Clarin</a>

De esta manera se implementa un hipervínculo que sea abierto en otra pestaña del navegador. A
continuación, se ilustrará el hipervínculo para que se cargue en la misma pestaña y de esta manera poder
observar la diferencia.

<a href="http://www.lanacion.com.ar">Periódico La Nación</a>

En conclusión, lo único que se le deba añadir al hipervínculo es asignarle a la propiedad target=”_blank”


ANCLAS

Anclas llamadas desde la misma página.

Otra posibilidad que nos brinda el HTML es disponer una referencia dentro de la página para poder
posteriormente disponer un hipervínculo a dicha marca. Es una práctica común cuando se navega dentro
páginas de gran tamaño. Se disponen hipervínculos a diferentes anclas, la sintaxis para definir un ancla
es:

<a name="nombreancla"></a>

No debemos confundir un ancla con un hipervínculo, más alla que se utiliza el mismo elemento a. Para
un ancla inicializamos la propiedad name con el nombre del ancla. Un ancla se la define en una parte de
la página que queremos que el operador llegue a partir de un hipervínculo.

Ahora la sintaxis para ir a un ancla desde un hipervínculo es la siguiente:

<a href="#nombreancla">Introducción</a><br>

Se observa que en la propiedad href indicamos el nombre del ancla. Cada hipervínculo hace referencia a
un ancla que se encuentra en la misma página.

Por ejemplo, primero se disponen los hipervínculos a las diferentes anclas, como se muestra a
continuación:

<a href="#introduccion">Introducción</a><br>
<a href="#mostrarbasedatos">show databases</a><br>
<a href="#creaciontabla">Creación de una tabla y mostrar sus campos</a><br> <a
href="#cargarregistros">Carga de registros a una tabla y su
recuperación</a><br>

Luego, la definición de las anclas.

<a name="introduccion"></a>
<h2>Introducción</h2>

Se debe tener en cuenta que la definición del ancla se hace inmediatamente anterior al título donde
queremos que el navegador se ubique cuando se dé clic en el hipervínculo.
Anclas llamadas desde otra página.

También es perfectamente válido la llamada a anclas desde otra página (no importa si se encuentra en el
mismo sitio o en otro). Se debe conocer el nombre de la página a llamar y el nombre del ancla, luego la
sintaxis para la llamada al ancla es:

<a href="pagina2.html#introduccion">Introducción</a>

Es decir, luego del nombre de la página que se llama se dispone el carácter # y seguidamente el nombre
del ancla.

También podría gustarte