PW Contenido 1

SEMANA 1 – PROGRAMACIÓN WEB I
PROGRAMACIÓN WEB I
SEMANA 1
Introducción al HTML
HTMLana
Reservados todos los derechos Instituto Superior de Artes y Ciencias de la Comunicación S.A.. No se permite copiar, reproducir, reeditar, descargar,
publicar, emitir, difundir, de forma total o parcial la presente obra, ni su incorporación a un sistema informático, ni su transmisión en cualquier
Reservados todos
forma o por los derechos
cualquier medio Instituto Superior
(electrónico, de Artes
mecánico, y Ciencias
fotocopia, de la Comunicación
grabación S.A.. No se permite
u otros) sin autorización previa ycopiar, reproducir,
por escrito reeditar,
de Instituto descargar,
Superior de
publicar, emitir, difundir, de forma total o parcial la presente obra, ni su incorporación a un sistema informático, ni su transmisión
Artes y Ciencias de la Comunicación S.A. La infracción de dichos derechos puede constituir un delito contra la propiedad intelectual. en cualquier
forma o por cualquier medio (electrónico, mecánico, fotocopia, grabación u otros) sin autorización previa y por escrito de Instituto Superior de
Artes y Ciencias de la Comunicación S.A. La infracción IACC-2020
de dichos derechos puede constituir un delito contra la propiedad intelectual.
1
APRENDIZAJES ESPERADOS
El estudiante será capaz de:
• Emplear herramientas de prueba y

etiquetas HTML, incorporando reglas de uso
como parte de los elementos de la
programación web.
•
• …
• …
IACC-2020
2
APRENDIZAJES ESPERADOS ................................................................................................................. 2

INTRODUCCIÓN ................................................................................................................................... 4
1. ELEMENTOS DE LA PROGRAMACIÓN WEB ................................................................................. 5
1.1. TERMINOLOGÍA BÁSICA .................................................................................................. 5
1.2. HTML: HISTORIA, CARACTERÍSTICAS ............................................................................... 7
1.3. NOMBRES DE ARCHIVO ................................................................................................... 9
1.4. EDICIÓN DE PÁGINA HTML ............................................................................................ 10
EJEMPLO .................................................................................................................................... 11
1.5. ETIQUETAS HTML .......................................................................................................... 12
1.5.1. ESTRUCTURA DE ORDENAMIENTO Y ANIDAMIENTO DE ETIQUETAS ....................... 13
1.5.2. REGLAS DE USO DE HTML ......................................................................................... 13
1.5.3. ESPACIADO ................................................................................................................ 14
1.5.4. ETIQUETAS CON SALTO DE LÍNEA AUTOMÁTICO...................................................... 16
1.5.5. SÍMBOLOS ESPECIALES .............................................................................................. 17
1.5.6. ATRIBUTOS ................................................................................................................ 19
1.5.7. ETIQUETAS PRINCIPAL O RAÍZ (HTML), ETIQUETAS DE LA CABECERA (HEAD),
ETIQUETAS DEL CUERPO DEL DOCUMENTO (BODY)................................................................. 19
1.5.8. ETIQUETAS DE TEXTO ................................................................................................ 22
COMENTARIO FINAL.......................................................................................................................... 25
REFERENCIAS………………………………………………………………………………………………………………………..………26
IACC-2020
3
INTRODUCCIÓN
El concepto de HTML puede ser utilizado de tecnologías relacionadas a la programación
dos maneras: por una parte, es entendido web, y es considerado el lenguaje más
como el lenguaje de marcas o tags para la importante, por su aporte en el desarrollo y
diagramación de páginas web; y por otro, es crecimiento de la WWW.
la sigla que se utiliza para Hyper Text Markup
Language (lenguaje de marcas de hipertexto). En este documento se revisarán los conceptos
básicos de HTML, que serán la base para el
Un lenguaje de marcas es un conjunto de desarrollo de página web. Además, se
etiquetas que representan elementos, y que instruirá en la implementación de un
permiten dar la estructura a una página web. ambiente que servirá para los ejercicios que
Cada etiqueta HTML describe diferentes posteriormente se desarrollarán. Finalmente,
contenidos o elementos del documento. se avanzará hacia la construcción de una
página básica como parte fundamental de la
En la actualidad, HTML es un estándar avalado programación web.
por el consorcio WWW, llamado W3C (World
Wide Wed Consortium) que se dedica a la
estandarización de casi la totalidad de las
IACC-2020
4
1. ELEMENTOS DE LA PROGRAMACIÓN WEB

Para lograr la programación web se requiere de un conjunto de elementos, ya que la llamada Wolrd
Wide Web (WWW) es un sistema que contiene una cantidad de información casi infinita, por lo que
se debe proporcionar cierto orden o estructura para así facilitar el acceso a los elementos buscados
en ella.
La unidad básica en la que se encuentra contenida dicha información es la denominada página web,
la que se caracteriza por contener texto, imágenes, animaciones y elementos multimedia de audio
y video. Lo anterior, cuenta con una característica principal denominada hipertexto, y que se traduce
en la posiblidad de enlazar contenidos y/o diversas páginas web por medio de enlaces (links), con
los que un usuario, con tan solo pulsar sobre el texto resaltado, podrá acceder a otra página o
contenido.
Cuando se originó el WWW se identificaron ciertas características, tales como :
• Tenía que ser distribuido: la información debía estar repartida en páginas no muy grandes
enlazadas entre sí.
• Tenía que ser hipertexto y debía ser fácil navegar por él.
• Ser compatible con todo tipo de computador(PCs, Macintosh, estaciones de trabajo, etc.) y
con todo tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS, etc.).
• Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.
1.1. TERMINOLOGÍA BÁSICA

El lenguaje HTML es muy relevante en el mundo de la programación web. Sin embargo, no es el
único lenguaje que se requiere para lograr dicho propósito y es por ello que también se debe
considerar el lenguaje de estilo CSS (Cascading Style Sheets), cuya función es gestionar la apariencia
de una página web, entregando detalles como colores, tamaño de textos, posición dentro de la
página, entre otros.
Aunque es posible crear un sitio web únicamente en HTML, no va a ser visible de una manera muy
estética. Esta es la razón por la que CSS siempre lo complementa.
IACC-2020
5
En la creación de las páginas web en lenguaje HTML, se cuenta con una estructura básica de una
página, que consiste en una cabecera (HEAD) y un cuerpo (BODY). En estas dos secciones
incluiremos elementos que le irán dando forma a la página. La estructura se muestra a continuación:
Estructura de una página HTML
Fuente: ACC (2015). Fundamentos de HTML. Programación HTML I. Semana 1
El elemento más importante que debemos conocer es la etiqueta, cuya finalidad es organizar el
lenguaje, para indicar dónde comienza y dónde termina la aplicación de la etiqueta que se está
usando. A continuación se observan algunas de ellas, las que se explican más detalladamente en la
sección 1.5.
HTML indica al navegador que el contenido está escrito en lenguaje HTML, para ello la página
termina y comienza con estas etiquetas o tags:
<HTML>…</HTML>
Dentro de estas dos etiquetas se distinguen dos secciones principales:
La cabecera (<HEAD>...</HEAD>)
El cuerpo (<BODY>...</BODY>)
IACC-2020
6
La cabecera está enmarcada dentro de las etiquetas <HEAD> y </HEAD> y el cuerpo, por las
etiquetas <BODY> y </BODY> señalando el inicio y el fin, respectivamente.
PREGUNTA
¿Cómo explicarías tú la importancia del lenguaje de estilo CSS

(Cascading Style Sheets) en el ámbito de la programación web?
Otro concepto a considerar en el ámbito de la programación web es el de editor de textos, que no

es otra cosa que una aplicación que necesitamos usar para escribir nuestro código en lenguaje
HTML. Para ello, podemos usar desde el simple bloc de notas, hasta herramientas más sofisticadas
y diseñadas exclusivamente para que los desarrolladores cumplan con esta tarea. Existen dos
grandes categorías:
• Los llamados WYSIWYG (lo que ves es lo que obtienes, What you see is what you get), que
se refieren a programas de muy fácil uso, que permiten crear páginas web con muy poco
conocimiento, pero con la gran desventaja que el código HTML que genera tiende a ser
deficiente, por lo que no se recomienda su uso.
• Los editores de texto, que son aplicaciones especialmente diseñadas para la escritura de
código, no solo HTML. En este curso se hará uso de la aplicación Atom, de código libre y
descarga gratuita.
Finalmente, en este apartado de terminología básica debemos mencionar a los navegadores, que
son aplicaciones que nos permiten visualizar los sitios web desde diversos dispositivos, teniendo la
tarea de leer el código HTML para presentarlo en pantalla.
1.2. HTML: HISTORIA, CARACTERÍSTICAS

A continuación, se definen los principales hitos de la historia de HTML:
1980 El físico Tim Berners-Lee propone un revolucionario sistema basado

en hipertexto, con el objetivo de compartir documentos.
Trabajando mancomunadamente con el ingeniero de sistemas
IACC-2020
7
Robert Cailliau, crearon lo que hoy se conoce como World Wide

Web (WWW).
1993 El primer manual del lenguaje HTML fue publicado en 1991 con el
nombre de HTML Tags, pero no sería hasta 1993, por gestión del
organismo IETF (Internet Engineering Task Force), que sería
presentado como candidato para ser el lenguaje oficial para internet.
En los primeros años se consiguieron algunos avances importantes
como la definición de tags para imágenes, formularios y tablas, así
nacieron las versiones llamadas HTML y HTML+, pero estas no
lograron convertirse en estándar oficial.
1995 En septiembre, el IETF publica HTML 2.0, que será el primer estándar
oficial de HTML.
1997 En enero, World Wide Web Consortium (W3C) publica la versión

HTML 3.2, que incorpora los últimos avances de las páginas web
desarrolladas hasta 1996, como applets de Java y texto que fluye
alrededor de las imágenes.
1998 El 24 de abril se publica HTML 4.0, una de las versiones más
recordadas ya que incorpora extraordinarios avances, como el uso de
las hojas de estilo CSS y la posibilidad de incrustar reducidos scripts
de lenguajes como Java dentro del HTML de las páginas web. Además
de mejorar la accesibilidad de las páginas diseñadas, adiciona tablas
y formularios más complejos.
1999 La última especificación oficial de HTML se publicó el 24 de diciembre
y se denomina HTML 4.01. Se trata de una revisión y actualización de
la versión HTML 4.0, por lo que no incluye novedades significativas.
2004 Desde que la W3C HTML 4.01 inicia su actividad se orientó a
desarrollar XHTML. Es por ello que las empresas Apple, Mozilla y
Opera se organizaron en una nueva asociación llamada WHATWG
(Web Hypertext Application Technology Working Group).
2014 WHATWG publicó en octubre la actual versión HTML 5, en la cual
están basados los últimos navegadores que permiten interactuar en
forma mejorada con archivos de audio y video.
Fuente: IACC (2015). Fundamentos de HTML. Programación HTML I. Semana 1.
La principal característica del lenguaje HTML es que se organiza o marca por medio de etiquetas, de
allí que sea llamado lenguaje de etiquetas o lenguaje de marcado. Normalmente, las páginas web
están formadas por cientos de pares de etiquetas, siendo su principal ventaja que es sencillo de leer
y escribir. Sin embargo, la principal desventaja es que pueden aumentar de manera importante el
tamaño del documento, por lo que se recomienda usar etiquetas con nombres cortos.
IACC-2020
8
1.3. NOMBRES DE ARCHIVO

Las páginas web se podrán nombrar con extensión .htm o html. La principal es la denominada
index.htm o index.html.
Adicionalmente, para un funcionamiento correcto de nuestro desarrollo web, es importante

considerar algunas reglas generales a la hora de asignar nombres a los archivos que contienen el
código HTML:
No usar la ñ ni otros caracteres extendidos.
Tampoco utilizar los acentos.
Para unir palabras, usar el guion bajo (no espacio

en blanco).
Emplear minúsculas y nombres cortos.
• Las páginas se nombrarán indistintamente .htm o .html pero

habrá que tener en cuenta si las hemos llamado de una u otra
forma cuando se requiera referirlas, ya que el vínculo no
funcionará si no detallamos exactamente igual su nombre.
IACC-2020
9
1.4. EDICIÓN DE PÁGINA HTML

La edición de páginas HTML es una tarea bastante sencilla, ya que se trata de generar un archivo de
tipo de texto plano, o sin formato enriquecido, por lo que en ocasiones y de una manera inicial,
bastaría el bloc de notas de Windows. Sin embargo, como mencionamos anteriormente, hay
aplicaciones especialmente desarrolladas para realizar la tarea de escribir código en diversos
lenguajes de programación, entre ellos HTML.
Actualmente se cuenta con diversas aplicaciones de este tipo, revisemos a continuación algunas de
las más utilizadas:
Nombre Características Sistema operativo

KompoZer Editor de páginas web de fácil uso y de Linux, Windows, MacOSX, OS/2
código abierto del tipo WYSIWYG.
Brackets Editor de páginas web para Linux, Windows, MacOSX, OS/2

desarrolladores, creado por Adobe. Es de
código abierto.
Visual Editor de código desarrollado por Linux, Windows, MacOSX

Microsoft, es personalizable, gratuito y de
Studio código abierto, pero requiere los datos de
Code uso del programa legalmente.
Atom Editor de código con control de versiones Linux, Windows, MacOSX, OS/2
git integrado, desarrollado por GitHub, de
código abierto, siendo una aplicación de
escritorio construida con tecnologías web
IACC-2020
10
EJEMPLO
A continuación, se muestra la edición de un archivo index.htm desde Atom:
• En el sitio web oficial para descargar el editor de código Atom,

podrás poner en práctica los ejemplos revisados durante esta
semana:
https://atom.io
PREGUNTA
¿Cuál crees que es la importancia de conocer las aplicaciones que

permiten la edición de páginas?
IACC-2020
11
1.5. ETIQUETAS HTML

Se ha mencionado que HTML es un lenguaje basado en etiquetas o marcas, de allí lo importante que
se conozcan en detalle las que podemos utilizar en su código.
En la sección HEAD o cabecera, se detallan un conjunto de datos denominados metainformación, y

que incluyen datos tales como la versión del HTML en que fue desarrollada la página, el título de
ella y notas del autor, además de poder incluir scripts o programas escritos en algún otro lenguaje
para internet (ejemplo: javascript).
Etiquetas en un código HTML
Fuente: IACC (2015). Fundamentos de HTML. Programación HTML I. Semana 1.
La información contenida en la etiqueta de <HEAD>...</HEAD> no se despliega directamente en el

navegador, sino que afecta a las propiedades generales de la página, por esta razón no debe
escribirse ninguna instrucción o comentario ajeno a las etiquetas estandarizadas propias de esta
parte del documento.
La segunda sección es el cuerpo y para definirlo se utilizarán las etiquetas:<BODY> Y </BODY>, esta
sección para algunos navegadores es opcional, pero siempre debería ser incluida. Al interior del
body encontraremos elementos tales como: textos, encabezados, imágenes, tablas, animaciones, y
otros, que poseen sus propios atributos para definir el formato de cada uno de ellos.
IACC-2020
12
1.5.1 ESTRUCTURA DE ORDENAMIENTO Y ANIDAMIENTO DE ETIQUETAS
Dentro del código HTML se debe establecer un orden para las etiquetas, cuidando que cada etiqueta
iniciada tenga su respectiva etiqueta de cierre, ya que se usan como pares. Adicionalmente, se
establece el orden según se deseen aplicar características a la página. Otra consideración relevante
es el anidamiento de etiquetas, lo que se refiere a la posibilidad que una etiqueta se abra y se cierre
dentro de otra etiqueta que la contiene, consiguiendo que se apliquen ambos efectos
proporcionados por cada etiqueta. Veamos el siguiente código para entender mejor este concepto:
Anidamiento de etiquetas en HTML
Fuente: Elaboración propia
PREGUNTA
¿Cómo explicarías la importancia y función de las etiquetas?
1.5.2 REGLAS DE USO DE HTML
En cuanto a las reglas de uso, lo más importante es tener claro que todo documento HTML debe
estar delimitado por la etiqueta de inicio <html> y su correspondiente etiqueta de cierre </html>. A
su vez, ya dentro del documento HTML, existe el encabezado y el cuerpo. El primero, delimitado por
las etiquetas <head> y </head> entre las que publicaremos las etiquetas de índole informativo. En
IACC-2020
13
cuanto al segundo, delimitado en las etiquetas <body> y </body>, se establece el lugar donde se
colocará el texto y demás información a publicar en la página.
Adicionalmente, se deberá tener presente que toda etiqueta tiene su apertura <etiqueta> y su
correspondiente cierre, en el formato </etiqueta>. Es importante saber que HTML no establece
diferencias entre minúsculas y mayúsculas en los nombres de las etiquetas.
1.5.3 ESPACIADO
El espaciado entre líneas en HTML es sencillo. Si deseamos introducir un espacio vertical entre
líneas, se debe usar la etiqueta <br>. De tal manera, que si colocamos varias etiquetas <br> no se
logrará introducir más espacio. Esto se soluciona mediante la inserción de espacios en blanco “ ”
representado por la secuencia &nbsp. En el caso que se deseen introducir tres espacios o líneas
entre líneas se deberá colocar en el código HTML lo siguiente:
<br>
<br>
<br>
Veamos en el siguiente ejemplo su uso:
IACC-2020
14
Genera la siguiente salida:
Visualización en navegador de ejemplo de uso de los caracteres especiales para espaciado en HTML
IACC-2020
15
1.5.4 ETIQUETAS CON SALTO DE LÍNEA AUTOMÁTICO
Existen varias etiquetas, las que, al ser utilizadas, incorporan el salto de línea de manera automática.
La primera de ellas es la etiqueta usada para el título de la página, llamada <title> y que coloca el
texto dentro de ella en el tamaño mayor de letra.
Adicionalmente, se encuentra el grupo de etiquetas para encabezados, las que ayudan a organizar
de mejor manera un documento según se requiera subtitular. Esto se realiza en HTML por medio de
las etiquetas <h>, que permiten generar hasta 6 subniveles, y se especifican así: <h1>, <h2>, <h3>,
<h4>, <h5>, <h6>.
Veamos el siguiente código:
Ejemplo de uso de etiquetas de salto de línea automático
El cual, genera la siguiente salida desde el navegador:
IACC-2020
16
Visualización en el navegador de ejemplo de uso de etiquetas de salto de línea automático
Otras de las etiquetas HTML con salto de línea automático tenemos a la etiqueta para creación de
párrafos <p> y su correspondiente etiqueta de cierre </p>. Recordemos que un párrafo está
compuesto por varias frases sobre un mismo tema, por lo que al señalar la finalización del mismo
se incorpora de manera automática un salto de línea.
1.5.5 SÍMBOLOS ESPECIALES
Los símbolos especiales en HTML se pueden usar simplemente recordando su nombre, o el número
asignado a dicho símbolo en la tabla ASCII. Por ejemplo, para el símbolo del centavo, que está en la
posición 162 de la tabla ASCII, su formato en HTML será ¢ o también, por su nombre &cent.
Veamos el ejemplo:
IACC-2020
17
Ejemplo de uso de símbolos especiales
Que genera la siguiente información en pantalla:
Visualización en pantalla del ejemplo de uso de símbolos especiales
IACC-2020
18
• En el sitio web oficial del código ASCII, podrá obtener la lista de

todos los símbolos especiales reconocidos por el lenguaje
HTML:
https://bit.ly/2rCufFe
1.5.6 ATRIBUTOS
Los atributos son propiedades asociadas a la etiqueta, y que modifican el aspecto de la información
a mostrar en la página web, siendo las más comunes de la etiqueta <BODY> las siguientes:
Atributo Descripción
Bgcolor Define el color del fondo de la página.
Link Color para los links que contiene la página.
Background Sugiere una imagen específica como fondo para la página.
Text Color para texto de la página.
Vlink Color de links ya visitados.
Alink Color que aparece al hacer clic sobre un link.
Topmargin Distancia que existe entre la margen superior del navegador y el
contenido medido en pixeles.
Leftmargin Distancia que existe entre la margen izquierda del navegador y el
contenido medido en pixeles.
Marginheight Tamaño del margen superior e inferior.
Marginwidth Tamaño del margen izquierdo y derecho.
1.5.7 ETIQUETAS PRINCIPAL O RAÍZ (HTML), ETIQUETAS DE LA CABECERA

(HEAD), ETIQUETAS DEL CUERPO DEL DOCUMENTO (BODY)
Las etiquetas válidas a utilizar dentro de la cabecera (HEAD) son las siguientes:
Etiqueta Uso
<TITLE> Define el título de la página. Este texto aparece en la parte superior del
navegador.
IACC-2020
19
<META> Especifica el tipo de contenido, el set de caracteres, etc.

Ejemplo:
Se visualizaría así en el navegador Chrome:
<BASE> Señala la URL de origen o base de todos los links relativos que se usarán en la
página. Este tema será abordado más adelante.
<LINK> Define una referencia a otro documento. Generalmente se ocupa para enlazar
la página a una hoja de estilo (Archivo.css), que contiene información de los
formatos dados a los componentes de la página, por ejemplo: colores y fuentes
para los botones o textos.
link rel="stylesheet" media="screen" href="global.css" type="text/css" >
<STYLE> Define características de formato sobre los elementos de la página. Ejemplo: el

tipo de letra que será utilizado.
<SCRIPT> Permite insertar, junto al HTML, scripts o trozos de código en otros lenguajes
de programación como Javascript, vbscript y otros. Código que vendrá a
complementar la funcionalidad del HTML de la página.
<script type="text/javascript" href="ajaxtcr.js"></script>

Un ejemplo:
IACC-2020
20
La etiqueta <BODY>...</BODY> posee ciertos atributos que definirán cómo se visualizará esta parte
del documento. Entre estos tenemos atributos para definir color y diseño de la página.
Ejemplo:
<BODY bgcolor="white” text="blue" leftmargin="0" topmargin="0" marginwidth="0"

marginheight="0">
..... Este es el cuerpo de mi página
</BODY>
Y se mostraría así en Internet Explorer:
IACC-2020
21
Visualización del ejemplo en navegador Internet Explorer

Recuerda que debes asignar extensión.htm o .html a tus documentos html

para que sean reconocidos como tal y ejecutados desde el navegador de
manera correcta
1.5.8 ETIQUETAS DE TEXTO
Para el control de la apariencia del texto existe <FONT>, aunque cuando se vea el uso de hojas de
estilos en cascada o CSS en las siguientes semanas, nos percataremos que son una mejor alternativa
a esta etiqueta. Veamos qué podemos realizar con ella:
a) Cambiar el tamaño del texto
El tamaño se especifica con su atributo SIZE y afectará al texto que encierren la instrucción de inicio
(<FONT SIZE="">) y de finalización (</FONT>). La forma de especificar el tamaño del texto consistirá
en indicar un tamaño absoluto de 1 a 7, siendo 7 el mayor y 1 el menor. El tamaño por defecto del
texto es el equivalente al tres. Veamos un ejemplo:
IACC-2020
22
Ejemplo de cambio de tamaño del texto
b) Cambiar el color del texto
También podemos cambiar el color de letra, mediante el atributo color de la etiqueta <FONT> cuyo
valor podrá el código hexadecimal del color o indicando el nombre en inglés del color.
Y la forma de usarlo es así:
IACC-2020
23
El resultado es el siguiente:
Visualización en el navegador de ejemplo de cambio de colores en HTML
IACC-2020
24
COMENTARIO FINAL
Actualmente existen pocas empresas que no utilicen páginas web, por lo que cada vez es más
notoria la ventaja que representa para las organizaciones estar en la WWW, logrando extender su
alcance, superando principalmente las barreras geográficas.
Lo anterior, ha traído como consecuencia la necesidad de desarrollar múltiples proyectos cuyo

elemento común es el lenguaje HTML, desde el cual son embebidos o incorporados otros lenguajes
de programación, siendo la base el lenguaje HTML
A través de la revisión del presente contenido, se ha podido conocer los elementos básicos del
lenguaje HTML, iniciando con terminología asociada, su historia y la estructura del documento
HTML, conociendo así, cómo se escribe en este lenguaje y la forma en la que se estructura una
página web.
Todos estos elementos constituyen la base para desarrollar no solo el resto de los contenidos de la
asignatura, sino también, para incorporar conocimientos indispensables para la formación
profesional de quienes se desenvuelven en el área del desarrollo web.
IACC-2020
25
REFERENCIAS
IACC (2015). Fundamentos de HTML. Programación HTML I. Semana 1.
PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:
IACC (2020). Introducción al HTML. Programación web I. Semana 1.
IACC-2020
26
IACC-2020
27

PW Contenido 1

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

PW Contenido 1

Caricato da

Copyright:

Formati disponibili

SEMANA 1 – PROGRAMACIÓN WEB I

• Emplear herramientas de prueba y

APRENDIZAJES ESPERADOS ................................................................................................................. 2

1. ELEMENTOS DE LA PROGRAMACIÓN WEB

Cuando se originó el WWW se identificaron ciertas características, tales como :

1.1. TERMINOLOGÍA BÁSICA

Estructura de una página HTML

Fuente: ACC (2015). Fundamentos de HTML. Programación HTML I. Semana 1

Dentro de estas dos etiquetas se distinguen dos secciones principales:

¿Cómo explicarías tú la importancia del lenguaje de estilo CSS

Otro concepto a considerar en el ámbito de la programación web es el de editor de textos, que no

1.2. HTML: HISTORIA, CARACTERÍSTICAS

1980 El físico Tim Berners-Lee propone un revolucionario sistema basado

Robert Cailliau, crearon lo que hoy se conoce como World Wide

1997 En enero, World Wide Web Consortium (W3C) publica la versión

1.3. NOMBRES DE ARCHIVO

Adicionalmente, para un funcionamiento correcto de nuestro desarrollo web, es importante

No usar la ñ ni otros caracteres extendidos.

Tampoco utilizar los acentos.

Para unir palabras, usar el guion bajo (no espacio

Emplear minúsculas y nombres cortos.

• Las páginas se nombrarán indistintamente .htm o .html pero

1.4. EDICIÓN DE PÁGINA HTML

Nombre Características Sistema operativo

Brackets Editor de páginas web para Linux, Windows, MacOSX, OS/2

Visual Editor de código desarrollado por Linux, Windows, MacOSX

• En el sitio web oficial para descargar el editor de código Atom,

¿Cuál crees que es la importancia de conocer las aplicaciones que

1.5. ETIQUETAS HTML

En la sección HEAD o cabecera, se detallan un conjunto de datos denominados metainformación, y

Etiquetas en un código HTML

Fuente: IACC (2015). Fundamentos de HTML. Programación HTML I. Semana 1.

La información contenida en la etiqueta de <HEAD>...</HEAD> no se despliega directamente en el

1.5.1 ESTRUCTURA DE ORDENAMIENTO Y ANIDAMIENTO DE ETIQUETAS

Anidamiento de etiquetas en HTML

Fuente: Elaboración propia

¿Cómo explicarías la importancia y función de las etiquetas?

1.5.2 REGLAS DE USO DE HTML

Veamos en el siguiente ejemplo su uso:

Fuente: Elaboración propia

Genera la siguiente salida:

Fuente: Elaboración propia

1.5.4 ETIQUETAS CON SALTO DE LÍNEA AUTOMÁTICO

Veamos el siguiente código:

Ejemplo de uso de etiquetas de salto de línea automático

Fuente: Elaboración propia

El cual, genera la siguiente salida desde el navegador:

Visualización en el navegador de ejemplo de uso de etiquetas de salto de línea automático

Fuente: Elaboración propia

1.5.5 SÍMBOLOS ESPECIALES

Ejemplo de uso de símbolos especiales

Fuente: Elaboración propia

Que genera la siguiente información en pantalla:

Visualización en pantalla del ejemplo de uso de símbolos especiales

Fuente: Elaboración propia

• En el sitio web oficial del código ASCII, podrá obtener la lista de

1.5.7 ETIQUETAS PRINCIPAL O RAÍZ (HTML), ETIQUETAS DE LA CABECERA

<META> Especifica el tipo de contenido, el set de caracteres, etc.

Se visualizaría así en el navegador Chrome:

link rel="stylesheet" media="screen" href="global.css" type="text/css" >

<STYLE> Define características de formato sobre los elementos de la página. Ejemplo: el

<script type="text/javascript" href="ajaxtcr.js"></script>

<BODY bgcolor="white” text="blue" leftmargin="0" topmargin="0" marginwidth="0"