Construye tus saberes Internet Es un sistema mundial de redes de computadoras que se encuentran interconectadas para compartir informacién. Navegador o explorador web esti seseenne ore etre teytsteteer etneneset vés de Internet o en el propio computador. También facilita desplazarse de una pagina a otra mediante enlaces, como los hipervinculos, que | interconectan las paginas situadas en distintos lugares del mundo. El navegador permite interpretar las etiquetas HTML, en el que estan escrites las paginas web y lo presenta en pantalla permitiendo al usua- rio interactuar con su contenido y navegar hacia otros lugares mediante enlaces 0 hipervinculos. La World Wide Web (WWW) Es un sistema mundial de distribuci6n de paginas web que contie- nen hipertextos relacionados y accesibles via Internet. Lenguaje de Marcas de Hipertexto “HT HTML es un lenguaje basado en etiquetas (tags) que se utiliza para ctear paginas para publicar en internet. Se trata de las siglas que corresponden a "Lenguaje de Marcas de Hipertexto” por sus siglas en inglés (HyperText Markup Language). En la actuali- dad es el lenguaje esténdar para el desarrollo de paginas web, y es el que todos los navegadores actuales han adoptado. 176justura basica de una pagina para internet y organizar la forma en Zum se publicard su contenido " etiquetas en HTML, , que se utllizan para escribir las eliquetas en HTML aw fala mayorla de los casos existen etiquetas de apertura y etiquetas NEG iGierre, Se presentan de la siguiente forma: ANS inde es la etiqueta de apertura y es la etique- | <) fe cierre indicada por la diagonal = of —aat esiructura basica de una pagina web escrita en HTML debe estar elas etiquetas himl> y : Aquf va el cuerpo del documento completo Las letras de la etiqueta pueden estar escritas en maylsculas 0 minds- cules. y : © y , el resultado es el mismo. | Una pégina escrita en HTML esté dividida en dos zonas principales: Sr a opening ag losing ae Dentro dal encabezado se coloca el titulo de! documento, que no se ve enla pantalla principal. Se escribe de la siguiente forma: titulo debe ser breve y representativo de su contenido, es lo que ‘aver quienes afiadan la pagina web a su agenda de direcciones (bookmark). cuerpo de la pagina se escribe dentro de las etiquetas y . En el cuerpo se escribe lo que se va mostrar en pantalla: texto, enes, videos, etc. 17La estructura de una pagina bésica se muestra a continuacién. El cuerpo de la pagina Lo que se escribe dentro de las etiquetas de : y es lo que se muestra por pan- ERuuMEIEMETEEELITS Sn talla. ery ud web Lo que escribo aqui se muestra en la pantalla, Puedes darle formato al texto. Las dos lineas se escriben una a continuacién de otra, no hay un retorno después de la primera linea. La pantalla se muestra de la sigulente forma. aay Organizaci6n del texto ae Crear parrafos Para crear un pérrafo se utiliza la etiqueta

. Esta no tiene una etiqueta de cierre

) = Se antepone la etiqueta

al contenido del parrafo. Se escribe de la siguiente forma..

Las abejas son insectos voladores.

Son conocidas por su pape! de producir la miel.‘Separando pérrafos Laetiqueta

crea una separacién entre parrafos dejando una linea en blanco. Por ejemplo. «

Las abejas son insectos voladores. ‘

Son conocidas por su papel de producir ia miel. En pantalla se vera ast: Separador
La etiqueta
se utiliza para separar texto, imagenes, tablas, etc., sin dejar un espacio en blanco. No tiene una correspondiente etiqueta decierre
. Siescribe los siguientes pérratos separando con la etiqueta
. Las abejas son insectos voladores.
Son conocidas por su papel de producir la miel. En pantalla se verd asi: Centralizar texto Pera centralizar texto 0 imagenes, tablas, ete., se utlizan las etiquetas

y . Por ejemplo. Este texto esté centralizado En pantalla se vera de la siguiente forma:Formato del texto Texto en negrita (Bold) Para destacar una parte de un texto en negrita se utilizan las etiquetas: y Este texto aparece en negrita En pantalla se verd ast: Texto en cursiva (Italic) Cuando queremos que un texto aparezca en cursiva utilizamos las etiquetas y Este texto aparece en cursiva . En pantalla se verd ast Tamaiio de texto Encabezado, para los encabezados, con texto de mayor o menor tamafio, pue- des utilizar las etiquetas:

y

,

y

......hasta...

y . Observa que cada etiqueta tiene su correspondiente de cierre. El tamafio mayor inicia con la etiqueta

y el tamario més pequefo con la etiqueta

. Por ejemplo si escribe:

Texto Grande

Texto Mediano

ee ee eae

Texto pequefio

En pantalla se vera asf: 180 ‘Texto de tamaio 6 (size="6") Texto de tamafio 7 (size="7")Pégina basica en HTML Miprimara pagina. Escribe el siguiente programa en Notepad de Windows yguarda con la extensién html, de la siguiente forma: *Abejas. htm” Estructura basica Fle Edt Format View. Help — pshtm> cheal> E a chead> = naveusdor ctitlerLas abejas ° ads ws Sala Weseeserereens Ry > ontario gue aparece fpeizheencersLes Abcjas Sol lesa xprxbolas abejas se conocen por su papel de producir 1a mlel. a or «pr ihtt> «ynem> ‘Observa: lo que se ha escrito dentro del cuerpo es lo que aparece en pan- tala Centralize el texto y lo muestra en mayor tamano. $e ha creado un péirafo con el texto en negrita. Se ha creado un pérrafo con texto en cursive, Cuando abres la pagina en un navegador se vera asi: 181Las listas Si nos interesara presentar texto en forma de listas. Se pueden presen: tar de tres formas diferentes: 1. Listas desordenadas (no numeradas). 2. Listas ordenadas (numeradas) (ordered lists). 3. Listas de definicién. Listas desordenadas Las listas desordenadas se escriben dentro de las etiquetas

y

, y a todos los elementos a listar se les coloca la etiqueta

(listitem). Las listas numeradas se escriben dentro de las etiquetas

y , y a todos los elementos a listar se les coloca la etiqueta
1. . Las listas de definicion se esoriben entre las etiquetas y , y a todos los elementos a listar se les coloca la eti- queta
2. . Se utlizan cuando el orden de aparicién no es importante Su estructura es la siguiente: El resultado por pantalla es el siguiente: C/O remeoniren | % Mey Ejemplo de listas HTML, omer custo pasox ano 2 doe gee = =e + Frutas + Cereales + Pan Listas ordenadas Se utilizan para presentar informacién en un orden determinado. Son similares al listado numerado creado en los editores de texto.
   <1i> En primer lugar “Ernesto” <1i> Bn segundo lugar “Manuela”
   1. Bn tercer lugar “Joan”
   182 i soElresutado por pantalla es el siguiente: Ustas de detinicion Las Iistas de detiniclén son adecuadas para crear glosarios (0 defi- riolones de términos), Toda la lista debe ir incluida entre las etiquetas

   y

   . Eneste caso cada rengién de la lista tlene dos partes: 4} El nombre de lo que se desea definir, so utlliza la otiqueta
   (de- inion term). 2} La definiclon del concepto, se utlliza Ia etiqueta
   (definition de- frition). Elresutado por pantalla se muestra asf: 183Escribe el siguiente programa en el editor de texto Notepad de Win- dows. Lo guardas con la extensi6n asi, Listas.htm! Fie Eee Format view Help cheml> etitle> Las Listes

   ch2>Te mostranos tres thpos de listas Desordenadas

   ] Flores
   • Frutas s «14> En primer lugar “Ernesto” En segundo lugar “Hanvele”

«pred rDefininc/4>

Definir: Agua

EL )S una sustancla formada por dos Stomos de hidrégeno y un Stono de oxigeno. |

El resultado por pantalla es el siguiente: 184 Clase2 LISTA NO ORDENADA (Unordered Lis) Ineluye une vinets - Ejemplo de Ista no ordenada

“

Fichere de Video <

Fichere de Fjemplo

>P- <<< {ey

Frutas

Ordenada’ > > En primer lugar “Ernesto” En segundo lugar “Manuela” gua El aguaes una sustancia formada por dos étomos de hidré geno mo de oxigeno. Losenlaces Lacaracterlstica que mas ha influido en el desarrollo y expansién dela Web (www.) es la navegacién en Internet por medio de hipervinculos: {links 0 enlaces). Esta conexién entre archivos permite @ los usuarios compartir documentos repartidos por todo el mundo. Estructura de los enlaces \ En general, los enlaces tienen la siguiente estructura: sy [FE BreferDireceién~>texto roprosontativo det enlace at $ En “Direcclén" es donde se escribe la ubicacion (direccién) del archivo © de destino que puede estar en la misma carpeta que esta el archivo que lo esta convocando, en otra carpeta del mismo sitio 0 en otro sitio Pe web Eltexto representativo es el que nos permits hacer el enlace, a veces aparece con un color especial y subrayado, Tipos de enlaces Vamos a distinguir cuatro tipos de enlaces: ite’ Estructura basica Lenguaje htm! 185Enlace dentro de la misma pagina A veces, en el caso de documentos (0 paginas) muy extensos, nos puede interesar dar un salto desde una posicién a otra determinada. Por ejemplo, ir de la parte superior a la parte inferior de nuestra pagina. Si queremos ir a la parte inferior de una pagina lo hacemos de /a si- guiente forma. La pare inferior la marcamos con la expresion inferior, la palabra des- pués de # puede ser cualquiera. Esta marca sustituye el enlace. El texto ‘a mostrar fo escribimos como “Ir abajo’. La estructura para crear un enlace dentro de una misma pagina se muestra a continuacion. La etiqueta a escribir para ir a la parte interior es |a siguiente: Yenel sitio exacto a donde queremos saltar, deberios poner la siguien- te etiqueta: Enlaces con otra pagina nuestra Puede ser que nuestto sitio web esté formado por una sola pagina. Pero lo mas normal es que un sitio web esté compuesto por varias pé- ginas, la principal y otras enlazadas a ella Si deseamos enlazar desde la pagina principal con la pagina produc- tos.html ubicada en el mismo sitio web, lo escribimos de la siguiente forma: ‘Al hacer clic sobre la palabra “Productos” inmeciatamente nos lleva a la pagina “productos.htm” que forma parte de nuestro propio sitio web. Enlaces con una pagina en otro sitlo web i queremos enlazar con una pégina que esté fuera de nuestro sitio web, es necesario conocer su direccién completa, o URL (Uniform Re- source Locator). Un localizador de recursos uniforme (URL) es la direccién de un recur- 0 en Interet. Una URL indloa la ubicacién de un recurso, asi como el protocolo utilizado para acceder a él. 186Cada dlreccién web o URL es diferente. En general la estructura de un dominio: http./Awmw.nombre def dominio.com/ ‘Siqueremos enlazar con la pagina de Google la etiqueta serfa: Gn ee : Si queremos enlazar con la pagina de Amazon la etiqueta seria: aie } Tit coe Enlaces con una direccién de correo electrénico (emall) En este caso, sustituimos "Direccién” por mailto: email. La estructura de la etiqueta es: seguido de la direccion de Exislen algunos navegadores que no reconocen este tipo de enlace, en ese: caso lo puedes escribir de la ee forma: es conveniente, por [a razén dicha anteriormente, poner tamblén en e| texto del enlace la direccién de email. 187Imagenes La etiqueta que nos sirve para Incluir imagenes en nuestras paginas web es muy similar a la de enlaces a otras paginas La estructura de la etiqueta es: El comando “Img scr” significa fuente de la imagen (image source). In- dica el nombre y Ia localizacién de la carpeta que contiene una imagen. En un sitio web grande con muchas Imagenes se recomienda crear una carpeta exclusive para las Imagenes. Si el docurnentc html y la imagen (pollito jog) estén en la misma carpe- ta escribimos fa siguiente etiqueta Es importante que la Imagen y ol documento estén en la misma carpeta, de lo contrario se debe especificar la ruta hasta la carpeta donde esta ubicada la imagen ‘Si se ha creado una carpeta para las Imagenes, por ejemplo “mi_|ma- genes", la etiqueta se escribe de la siguiente forma. Esto significa que la imagen pollito jpg esta ubicada en la carpeta “mi_imagenes" Debes cuidar que las imagenes tengan un tamafto aproplado para evi- tar que la carga y descarga sea muy lenta, Uso de Ia Imagen como enlace Ctra posibilidad muy interesante es la de utilizar una Imagen como enlace a otra pfigina. Para estos casos se utllizan generalmente Ima- genes pequefas (iconos), aunque se puede usar cualquier tipo de ima- gen Segin vimos en el capitulo anterior, la estructura general de un enlace es: Utilizar la imagen (abeja jpg) para acceder a la pagina “miel.htm!" 188 Clic aquiClic sobre la abeja: — AOR Con este tino de enlace, al pulsar sobre la imagen, de inmediato se eflaza la pagina que indica la direccién. Es recomendable que la imagen y el documento estén en la misma carpet. Fondos de paginas Como fondo de una pagina se puede poner un color uniforme o una imagen. Una pagina con fondo de color uniforme se logra agregando el atributo “bgcolor” dentro de la etiqueta de la sigulente manera: Puedes utilizar el nombre de color (en inglés) o un numero hexadecimal que lo representa, Sody bgcolo "green"> Numero hexadecimal: | Rojo: #FFO000 Ivers: #0000, | ‘Azul: #0000FF ‘ Negro: #000000, Amarillo: #fff00 También puedes utilizar una gran cantidad de colores utiizando la tabla de colores. Colores para el texto Elcolor del texto para toda la pagina lo puedes especificar dentro de la eliqueta . PALETA SEGURA —“cédige | Nombre | Color | ‘White Tabla de colores HTML 189Una pagina con el color rojo de fondo y el texto en azul, la etiqueta se scribe de la siguiente forma: Con numero hexadecimal se escribe ast: Colorea una parte del texto En ocasiones solo interesa colorear una parte del texto dentro de una pagina. En ese caso se utiliza la etiqueta de la siguiente forma | Por ejemplo, un texto de color azul En hexadecimal Se ae Color para los enlaces El color que tomaran los enlaces se especifica dentro de la etiqueta . 2 Existen tres posibilidades: 4 link = color de los enlaces 4 vlink = color de los enlaces visitados a alink = color que toma el enlace al ser presionado. ja a Una pagina de fondo azul y diferentes colores para los enlaces. Imagen como fondo de pagina | Una imagen se puede utilizar como fondo de pagina. La imagen selec- cionada se repite en toda la pagina creando el fondo deseado. Se uti- liza el atributo “background” en luger del bgcolor que utlizamos para ne los colores uniformes. 7. 190$e pueden utilizar los formatos de imagenes siguientes: jpg. gif o png Cuando utiizamos “background” también se puede agreger a esta eliqueta los comandos para cambiar los colores del texto y de los enla- ce, Debe haber contraste entre el fondo y el texto para que sea legible. Es buena practica utilizar “background” y “bgcolor” juntos dentro de la misma etiqueta. En este ejemplo, usa una imagen como fondo y al mismo tiempo se- lecciona el azul como color uniforme de fondo. Antes de que cargue la imagen la pagina tendra un color azul de fondo, Tablas Las tablas son de gran ayuda para organizar el texto y las imagenes dentro de una pagina. Una tabla est formada por filas y celdas con su correspondiente eti- queta cada una. Una tabla formada por tres etiquetas fundamentales: Lactiqueta

debe tener el atributo border para poder visualizar los bordes de la tabla en pantalla. 191La estructura general de una tabla es Ia siguiente: inicio y cierre de la tabla y . Dentro de estas etiquetas van las corres pondientes alas filas y , y dentro de esta ultima van las etiquetas correspondientes a las celdas

y

Celda /td>

El siguiente ejemplo crea una tabla formada por dos filas y cuatro cel- das,

Las tablas en Html Las tablas en HTML CeldaO1 | | Celda 02

Celda 01	Celda 02
Celda 03	Celda 04

Celda 03] [Celda 04 El resultado por pantalla se muestra a la derecha, Titulo de la tabla Se puede afiadir un titulo a la tabla, es decir, un texto situado encima de la tabla que indica cual es su contenido. Se consigue con las etiquetas y . Encabezado de tabla.

Celda 01

celda 02

El resultado por pantalla. Encabezado de tabla Modificar el borde Celda 01 E\ borde se puede modificar especificando un valor del grosor que de- ‘seamos, s¢ asigna un valor al borde. 192 h t f t / ? — ! eee <=un valor de 4 Enelejempio anterior, modificando el borde asignamos eaptionsincabezado de tabla ‘table border ~4> en ktd> Celda 01

Celda 02

Observa el borde de ia nueva tabla Encabezado de tabla [ Ceida ot | | Celd oa] Color de fondo para tabla 8\londo de la tabla se puede cambiar a color deseado utllizando ol atri- bulo bgcolor dentro de la etiqueta . Para una tabla con fondo color verde se escribe la etiqueta asi: Ktsble border bgcolor="#00m00"> to

Tabla con fondo color verde

Celda 01

Celda 02 Kft ae

Celda 03

Celda 04

Color para las filas Puedes colorear de forma individual una fila 0 una celda. En el siguiente ejemplo la primera fila tiene fondo rojo y la segunda azul. gaption>Filas con diferentes colores able border > bgcolor="#£0000"> Celda 01 Celda 02 Sex> bgcolor="#00008"> Celda 03 Celda 04 ex> Tabla con fondo color verde Filas con diferentes colores 193Insertar imagen HTML imagen se puede elegir como fondo de una tabla o de una lar f Para colocar una imagen como fondo de una tabla utiliza e! atri background. celda en Colocar la imagen “abeja.jpg” como fondo en una tabla Imagen de fondo de tabla Imagen de fondo de tabla

Celda 01	Celda 02
Celda 03	Celda 04

La imagen se puede colocar como fondo de una celda, utiliza la si- guiente etiqueta Imagen en una celda Ejemplo, colocar la imagen abeja.jpg en la celda 01 Imagen de fondo de una celda Imagen de fondo de una celda

	Celda 02
Celda 03	Celda 04

Celda 02 Celda 03 Celda 04 194Tablas anidadas EnHIML es posible colocar una tabla dentro de otra tabla, (Colcar la tabla de fondo ve de dentro de la celda 04 en la tabla principal. Latebla de fondo verde aparece en la celda 04 de la tabla principal ‘Tamafio de las tablas Nommalmente el tamanio de ia tabla se acomoda a la pagina de acuerdo con einavegador que se esté utilizando. En ocasiones es necesario especificar éltamafo de la tabla, de una fila o una celda. las dimensiones de la tabla se obtienen con los atributos width (ancho) y height (ato). La dimension se especifica en porcentaje (%) 0 en pixels. El porcentaje se especifica de la siguiente forma: ; y en pixel de esta forma: . Tabla principal Celda 01 Celda 02 Celda 03 195,

celda 01	celda 02
Celda 01	Celda 02

La tabla se vera de la siguiente forma. Ocupa un 60% del ancho de la pagina web. |(Celda 01 [Celdaoz |Celdn 03, |iCetda 04 Formularios Cuando tenemos una pagina web que es visitada por un cierto publico, en ocasiones, necesitamos que quienes visitan nuestra pagina nos dejen comentarios 0 respondan a ciertas preguntas. Los formularios permiten que quienes visiten nuestra pagina nos envien directamente {a informa- cién que deseamos recabar. Se pueden crear paginas web que dispongan de los elementos necesa- rios para recogen informacién a través de caja de texto, lista de selec cin, botones de radio, etc. Estructura de un formulario Todos los formularios HTML comienzan con el elemento

de la siguiente forma: cuerpo del formulario

cuerpo del formulario......

La etiqueta

soporta algunos atributos especificos para con- figurar la forma en que el formulario se comporta. Todos sus atribu- tos son opcionales, pero se considera una buena prdctica que siem- pre al menos los atributos action y method se encuentren presentes. 196 CotizadorElcuerpo de! formulario contiene los distintos elementos para poder inroducir los datos. Flatributo “act ion” indica la accion que se debe efectuar. latibutomethod=post indica que los datos se envian por correo a la direccién de Email, Introducir texto con input Enel siguiente ejemplo: solicitamos el nombre y el apellido del usuario. para ver el resultado copia los cédigos en Notepad con el nombre “formulario01” y con la extensi6n html. chead>Formulario

y la de cierre Las diferentes opciones se eligen con la etiqueta . Escribe tu nombre: Escribe tu apellido: Enviar | [ Borrar J} 199Con el siguiente ejemplo se crea un mend de opciones para que el usuario elija su fruta preferida. Pera Guineo Mango Naranja ‘Al hacer clic sobre el menti se abre el cuadro de opciones. Uso del checkbox Para hacer que un usuario eliia una opeién especttica se utiliza ol formu- lario de contirmacién con la etiqueta checkbox. En el siguiente ejemplo haz click sobre la opcion que prefieras.

Prefiero el Azul

preferido"> El resultado es el sig rte: 200 Fruta preferida? Pera -potones de radio pea elegir una Unica opcién entre varias, se utiliza el botén de radio. petiqueta a utiizar es la siguiente: Goput. type="radio” name="nombre de 1a variable” yalue="nonbre de las opciones"> En@l ejemplo que sigue solicitamos al usuario que indique su color pleco, Elresuttado es el siguiente: Big t color preferido © Verde ©Azul O Blanco adio Button & Checkbox _ Personalizados © Mujer O Alien deka * “ea «0 checkbo O Android O PHP © Blogger O HTML 201