2.0 - Conceptos Básicos y Elementos Estructurales

Desarrollo de Software
Magister. Carlos Adolfo Beltrán Castro

3FFE:3800::/24
GENERALIDADES Y CONCEPTOS
• Navegador web
• URL.
• DOMINIO
• HOSTING
• FTP
• SITIO WEB

3FFE:3800::/24

3FFE:3800::/24
ACCESO

3FFE:3800::/24
Los navegadores tienen un motor (engine), el cual es un

programa que se encarga de interpretar contenido
representado en html, asignarle un look & feel gráfico usando
css y agregando interacción por medio de js

3FFE:3800::/24
ACCESO

3FFE:3800::/24
ACCESO

3FFE:3800::/24
NAVEGA FELIZ

3FFE:3800::/24

3FFE:3800::/24
¿QUÉ ES UNA URL?

• La URL es la dirección específica que se asigna a cada
uno de los recursos disponibles en la red con la
finalidad de que estos puedan ser localizados o
identificados.
• Hay un URL para cada uno de los recursos (páginas,
archivos, carpetas) que hay en la World Wide Web.
• El URL sirve para que podamos encontrar aquello que
estamos buscando en la red: una página, un sitio, un
archivo, un documento, etc.
fuente: significados.com
3FFE:3800::/24
URL o ruta absoluta: Incluyen todas las partes de la URL

(protocolo, servidor y ruta) por lo que no se necesita
más información para obtener el recurso enlazado.
URL o ruta relativa: Prescinden de algunas partes de las
URL para hacerlas más breves.
fuente: concepto de y uniwebsidad

3FFE:3800::/24

3FFE:3800::/24
¿QUÉ ES UN DOMINIO?
Los dominios son los «nombres» de las páginas en
Internet así de simple. Cuando quieres entrar a una
página, normalmente escribes el nombre.
Por ejemplo: https://www.unbosque.edu.co/

3FFE:3800::/24
El nombre de dominio está compuesto por dos partes:

El nombre: El nombre que llevará tu página
TLD: La terminación. Que puede ser .com, .org, .net, .tv y
muchas otras opciones. Ésta terminación ayuda a indicar
el giro de tu empresa y ubicación: .com-> comercial;
.com.mx -> comercial en México; .org-> asociación civil u
organización sin fines de lucro; .tv -> canal de televisión
fuente: webhosting.com.bo

3FFE:3800::/24
¿QUÉ ES UN HOSTING?
El alojamiento web (en inglés web hosting) es el
servicio que provee a los usuarios de Internet un
sistema para poder almacenar información,
imágenes, vídeo, o cualquier contenido accesible
vía web. Es una analogía de «hospedaje o
alojamiento en hoteles o habitaciones» donde uno
ocupa un lugar específico

3FFE:3800::/24
¿QUÉ ES FTP?
Es un protocolo de intercambio de archivos, se usa
con un programa SFTP te permite subir archivos
para tu página web a tu espacio web. También
puedes crear una copia de seguridad del sitio web
con SFTP. Para ello, copia los datos del espacio
web localmente en tu ordenador.
Con un programa SFTP también puedes borrar
ficheros y/o carpetas enteras. Si borras contenidos,
estos ya no aparecerán para los visitantes de tu
página web. 3FFE:3800::/24
¿QUÉ ES FTP?

3FFE:3800::/24
ESTRUCTURA DE UN DOCUMENTO WEB

Recomendaciones:
• No usar caracteres especiales (ñ,tildes, simbolos,
espacios) para nombras carpetas o archivos.
• Nombras los archivos usando minúscula
• Usar nombres nemotécnicos, es decir que tengan
implícito su significado
• Utilice rutas relativas, cuando trabaja de manera
local
3FFE:3800::/24
ESTRUCTURA DE UN DOCUMENTO WEB

3FFE:3800::/24
RUTA ABSOLUTA
• Teniendo en cuanta la estructura de archivos del
ejemplo anterior, cuando se ubica un recurso desde la
raíz del disco, se debe especificar todo el recorrido hasta
llegar a él.

3FFE:3800::/24
RUTA ABSOLUTA
• El recorrido realizado para encontrar el recurso, se
indica por medio de los números.

3FFE:3800::/24
RUTA RELATIVA
• La ruta relativa, se calcula con base a una
ubicación actual, para este caso se usa la carpeta
sitio, esto facilitará subir la estructura de carpetas
a un servidor y no habrán problemas de rutas.

3FFE:3800::/24
INTRODUCCION
HTML y CSS son dos "lenguajes" que necesitas saber para elaborar sitios web. Es el
navegador web el que hará la traducción (intérprete) entre los lenguajes de
programación y lo que se ve en la pantalla.
Para crear un sitio web, debes dar instrucciones al ordenador. No basta con escribir
el texto que se ha incluido en el sitio (como lo haría en un procesador de textos),
también se debe indicar dónde colocar este texto, insertar imágenes, crear enlaces
entre páginas, etc.
• HTML (HyperText Markup Language): apareció por primera vez en 1991 en el
lanzamiento de la Web. Su función es la gestión y organización del contenido. Así
que en HTML puedes escribir lo que deseas mostrar en la página: texto, enlaces,
imágenes … Se podría decir: "Este es mi título, este es mi menú, aquí está el
texto principal de la página, aquí hay una visualización de la imagen, etc. ".
• CSS (Cascading Style Sheets, también conocidas como hojas de estilo): su papel
es gestionar la apariencia de la página web (diseño, posicionamiento, colores,
tamaño de texto ...). Este lenguaje ha complementado el código HTML desde
1996. También puedes haber oído hablar de XHTML. Esta es una variante de
HTML que es más rigurosa y que es un poco más complicada de manejar..

3FFE:3800::/24
INTRODUCCION
Se puede crear un sitio web únicamente en HTML, pero no va a quedar muy estético
por la forma como aparecerá la información. Esta es la razón por la que CSS siempre
lo completa.
CCS permite organizar el contenido y definir la presentación: el color, la imagen de
fondo, los márgenes, el tamaño del texto … Como te puedes imaginar, CSS necesita
una página HTML para funcionar. Es por eso que lo primero que se aprende son los
conceptos básicos de HTML antes de lograr el cuidado de la decoración en CSS.
HTML5 provee básicamente tres características: estructura, estilo y funcionalidad.
Nunca fue declarado oficialmente pero, incluso cuando algunas APIs (Interface de
Programación de Aplicaciones) y la especificación de CSS3 por completo no son
parte del mismo, HTML5 es considerado el producto de la combinación de HTML,
CSS y Javascript.
Estas tecnologías son altamente dependientes y actúan como una sola unidad
organizada bajo la especificación de HTML5. HTML está a cargo de la estructura,
CSS presenta esa estructura y su contenido en la pantalla y Javascript hace el
resto que (como veremos más adelante) es extremadamente significativo.

3FFE:3800::/24
Sintaxis de las Etiquetas

La forma de escribir una etiqueta básica es <ETIQUETA>; además la gran mayoría de estas
se deben "cerrar" de esta manera: </ETIQUETA>.
Los atributos de una etiqueta definen como va a afectar a lo que se encuentre dentro de
ella. Existen varios atributos y estos se incluyen de la siguiente manera dentro de una
etiqueta:
<ETIQUETA ATRIBUTO>
Muchas etiquetas tienen varios atributos que pueden ser utilizados en la etiqueta de la
siguiente manera: <ETIQUETA ATRIBUTO1 ATRIBUTO2>. Para cerrar una etiqueta con
atributos se utiliza solo la etiqueta de cierre, esto es sin atributos.
El valor de un atributo dentro de una etiqueta se expresara de la siguiente manera
<ETIQUETA ATRIBUTO="VALOR">.
Muchos atributos no requieren de un valor especifico. Si en algún tema se muestra, en un
ejemplo, solo el nombre del atributo y no un valor, entonces damos por entendido que no
es necesario.
Por último, las etiquetas pueden estar escritas en minúsculas o mayúsculas esto es, la
etiqueta <ETIQUETA> es igual a la etiqueta <etiqueta>.

3FFE:3800::/24
Estructura Global
Los documentos HTML se encuentran estrictamente organizados. Cada parte del
documento está diferenciada, declarada y determinada por etiquetas específicas.
En primer lugar necesitamos indicar el tipo de documento que estamos creando.
Esto en HTML5 es extremadamente sencillo:
IMPORTANTE: Esta línea debe ser la primera línea del archivo, sin espacios o
líneas que la precedan. De esta forma, el modo estándar del navegador es
activado y las incorporaciones de HTML5 son interpretadas siempre que sea
posible, o ignoradas en caso contrario.

3FFE:3800::/24
Estructura Global
Luego de declarar el tipo de documento, debemos comenzar a
construir la estructura HTML.
Como siempre, la estructura tipo árbol de este lenguaje tiene su
raíz en el elemento .
Este elemento envolverá al resto del código:
El atributo lang en la etiqueta de apertura es el único atributo

que necesitamos especificar en HTML5.
Este atributo define el idioma humano del contenido del
documento que estamos creando, en este caso es por español.

3FFE:3800::/24
Estructura Global
HTML usa un lenguaje de etiquetas para construir páginas web. Estas etiquetas
HTML son palabras clave y atributos rodeados de los signos mayor y menor
En este caso, html es la palabra clave y lang es el atributo con el valor es.
La mayoría de las etiquetas HTML se utilizan en pares, una etiqueta de apertura y
una de cierre, y el contenido se declara entre ellas.
En nuestro ejemplo, se indica el comienzo del código HTML y indica el final.
Compare las etiquetas de apertura y cierre y verá que la de cierre se distingue

por una barra invertida
antes de la palabra

3FFE:3800::/24
Estructura Global
Continuemos construyendo nuestra plantilla. El código HTML insertado entre las
etiquetas tiene que ser dividido entre dos secciones principales. Al igual que en
versiones previas de HTML, la primera sección es la cabecera y la segunda el
cuerpo.
Dentro de las etiquetas <head> definiremos el título de nuestra página web,

declararemos el set de caracteres correspondiente, proveeremos
información general acerca del documento e incorporaremos los archivos
externos con estilos, códigos Javascript o incluso imágenes necesarias para
generar la página en la pantalla.

3FFE:3800::/24
Estructura Global
La siguiente gran sección que es parte principal de la organización de un
documento HTML es el cuerpo. El cuerpo representa la parte visible de todo
documento y es especificado entre etiquetas <body>. Estas etiquetas tampoco
han cambiado en relación con versiones previas de HTML:
El código HTML no está formado por un conjunto de instrucciones

secuenciales. HTML es un lenguaje de etiquetas, un listado de elementos que
usualmente se utilizan en pares y que pueden ser anidados (totalmente
contenidos uno dentro del otro).

3FFE:3800::/24
Estructura Global
Es momento de construir la cabecera del documento. Algunos cambios e
innovaciones fueron incorporados dentro de la cabecera, y uno de ellos es la
etiqueta que define el juego de caracteres a utilizar para mostrar el documento.
Ésta es una etiqueta que especifica cómo el texto será presentado en pantalla:
Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar
información general sobre el documento, pero esta información no es
mostrada en la ventana del navegador, es solo importante para motores de
búsqueda y dispositivos que necesitan hacer una vista previa del documento
u obtener un sumario de la información que contiene.

3FFE:3800::/24
Estructura Global
Las referencias a entidades permiten incluir caracteres que no pueden aparecer
directamente en el documento, normalmente debido a alguna de estas razones:
es un carácter reservado (<, >, &), el editor no es capaz de representarlo, o el
sistema de codificación del documento no lo permite.
Para escribir en castellano es, sin embargo, más cómodo declarar el sistema de
codificación de caracteres ISO Latin 1 (ISO-8859-1), que permite utilizar todos los
caracteres de los lenguajes de Europa occidental, sin necesidad de utilizar
entidades. Para ello, se puede introducir en head el siguiente elemento:

3FFE:3800::/24
Texto
El texto de un documento HTML se introduce como contenido de aquellos
elementos que lo permitan. Los caracteres de fin de línea son tratados como
espacios en blanco.
Por otra parte, dos o más espacios en blanco consecutivos son tratados como un
único espacio en blanco. Los navegadores se encargan de dividir el texto en
líneas dependiendo del ancho de la ventada de representación, tamaño de letra,
etc.
Si se desea forzar un cambio de línea, puede recurrirse al elemento br (marca <br
/>), pero solo en situaciones justificadas. En la mayoría de las ocasiones, basta
con dividir el texto en párrafos (es decir, englobar cada párrafo dentro de un
elemento p). Por ejemplo:

3FFE:3800::/24
Comentarios
Los comentarios permiten incluir cualquier texto en el documento que los
navegadores deben ignorar. Así, por ejemplo, el creador del documento puede
dejar indicaciones ´útiles para la siguiente vez que tenga que modificarlo, ocultar
temporalmente texto o elementos, etc.

3FFE:3800::/24
Títulos
Normalmente, un documento HTML debe tener un titulo, que se suele mostrar
en la barra superior de la ventana del navegador. Este se especifica mediante el
elemento title, dentro de la cabecera:
Por otra parte, es muy frecuente la necesidad de estructurar un documento

en secciones (capítulos, apartados, etc), y que cada una de estas tenga un
título. En HTML se pueden utilizar los elementos h1, h2,. . . , h6. Estos
elementos, de tipo bloque, aceptan como contenido el titulo de la sección.
Cuanto menor es el numero del nombre del elemento, de más alto nivel
será la sección, como se puede ver en el siguiente ejemplo:

3FFE:3800::/24
Ejemplo
<body>
<h1>Noticias de última hora</h1>
<h2>Nacional</h2>
<h3>Palacio asegura no haber recibido ninguna...</h3>
<p>
Ayer, Marruecos acusó a España en la prensa...
</p>
<h3>...</h3>
<p>
El ministro de...
</p>
<h2>Internacional</h2>
<h3>...</h3>
<p>
Ayer se celebró en...
</p>
</body>

3FFE:3800::/24
Imágenes
Las imágenes se insertan mediante el elemento en línea img. La mayoría de los
navegadores son capaces de representar imágenes GIF, JPEG y PNG. Este elemento no
puede tener contenido, y en él se especifica mediante atributos la siguiente información:
Fuente de la imagen (src): URL, absoluta o relativa, de la imagen (atributo obligatorio).
Texto alternativo (alt): texto descriptivo de la imagen, pensado para navegadores
incapaces de representar imágenes y para navegadores que representen el documento
mediante sonido (atributo obligatorio).
Tamaño de la imagen (width y height): ambos son atributos opcionales que permiten al
navegador conocer el tamaño de las imágenes sin necesidad de descargarlas.
Su utilización facilita a los navegadores el ir representando la página mientras descarga las
imágenes, permitiendo así al usuario ver la página mientras se realiza la descarga.

3FFE:3800::/24
Enlaces
Los enlaces a otras páginas se pueden realizar mediante el elemento en línea a. Su
contenido es el texto (o imágenes) que en el que el usuario puede dar click para activar el
enlace. El destino del enlace se especifica mediante el atributo href. El siguiente ejemplo
muestra un enlace a otra página dentro de un párrafo:
Al igual que en el caso de las imágenes, el destino puede ser codificado de forma
absoluta o relativa. También se puede asociar un enlace a una imagen, como se
refleja en el siguiente ejemplo:

3FFE:3800::/24
Listas
Las listas permiten estructurar información en puntos, comenzando cada punto en una
nueva línea.
Existen tres elementos, todos de tipo bloque, para especificar listas, uno para cada uno de
los tipos de lista permitidos: listas ordenadas, listas no ordenadas y listas de definiciones.
• Las listas ordenadas (elemento ol) asignan automáticamente un número a cada ítem
de la lista. El contenido de este elemento es uno o más ítems de lista (elemento li).
• Las listas no ordenadas (elemento ul) son como las anteriores, pero no asignan
números a los ítems.
• Las listas de definiciones (elemento dl) tienen como contenido elementos dt y dd. El
primero permite especificar el término a definir, y el segundo, la propia definición.

3FFE:3800::/24
Ejemplo Listas
A continuación se muestran ejemplos de listas, y cómo se verían en un navegador:

3FFE:3800::/24

2.0 - Conceptos Básicos y Elementos Estructurales

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

2.0 - Conceptos Básicos y Elementos Estructurales

Cargado por

Copyright:

Formatos disponibles

Desarrollo de Software

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Los navegadores tienen un motor (engine), el cual es un

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

¿QUÉ ES UNA URL?

URL o ruta absoluta: Incluyen todas las partes de la URL

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

El nombre de dominio está compuesto por dos partes:

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

ESTRUCTURA DE UN DOCUMENTO WEB

ESTRUCTURA DE UN DOCUMENTO WEB

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Sintaxis de las Etiquetas

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

El atributo lang en la etiqueta de apertura es el único atributo

Magister. Carlos Adolfo Beltrán Castro

En nuestro ejemplo, se indica el comienzo del código HTML y indica el final.

Compare las etiquetas de apertura y cierre y verá que la de cierre se distingue

Magister. Carlos Adolfo Beltrán Castro

Dentro de las etiquetas <head> definiremos el título de nuestra página web,

Magister. Carlos Adolfo Beltrán Castro

El código HTML no está formado por un conjunto de instrucciones

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Por otra parte, es muy frecuente la necesidad de estructurar un documento

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

Magister. Carlos Adolfo Beltrán Castro

También podría gustarte