Clase 3

Introducción al Desarrollo Web
Unidad 2: HTML
Presentación Nº 3 – HTML primeros pasos
2017 - Segundo Cuatrimestre
Licenciatura en Sistemas
Facultad de Ciencias de la Administración
Universidad Nacional de Entre Ríos
1
Objetivos de la clase
● Analizar qué son y cómo se estructuran los documentos HTML
● Conocer y clasificar los elementos básicos de HTML.
● Entender qué son los atributos.
● Tomar contacto con las herramientas de desarrollo.
2017 – Segundo Cuatrimestre 2

HTML – Lenguaje y estándar
● HTML (HyperText Markup Language) es un lenguaje utilizado
para crear documentos Web.
● La primer versión del estándar fue desarrollada por Tim Berners-
Lee a finales de los 80's.
● Se trataba de un subconjunto simplificado de SGML (Simple
Generalized Markup Language).
● Así como otros estándares relacionados con la Web es
desarrollado bajo la autoría del W3C (World Wide Web
Consortium).
● Tiene varias versiones. En cada una de ellas se han incorporado
y suprimido características, con el fin de hacerlo más eficiente y
facilitar el desarrollo de páginas Web compatibles con distintos
navegadores y plataformas.
– La última especificación es HTML 5.0

Elementos
● Un documento HTML está compuesto por elementos que
definen su estructura.
● Cada elemento tiene su propósito particular. Como mostrar un
encabezamiento, una imagen o información que debe ser
utilizada por el navegador.
● Los elementos:
– Nos posibilitan determinar cómo estará armada la página y sus
secciones.
– Se definen utilizando instrucciones especiales que se conocen con
el nombre de etiquetas o tags. Por lo general, se componen de dos
tags (uno de apertura y otro de cierre).
– Dentro de los elementos podemos ubicar contenido, tales como
texto o más elementos.

Nuestra primera página Web
● A continuación construiremos nuestra primer página Web utilizando HTML.
<!DOCTYPE html>
<html lang="es">

<head>
<title>Mi Primer Página Web</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
Hola Mundo!!!
</body>
</html>
Nuestra primera página Web (2)
● Todo documento HTML comienza con la etiqueta <html> y finaliza con
</html>.
● Se divide en dos secciones: el encabezado o cabecera (head) y el
cuerpo (body).
– Head: Contiene información sobre el documento, tales como el título y
metainformación para describir el contenido.
– Body: Almacena el contenido del documento. Es decir, lo que será mostrado
en la ventana del navegador.
● Cada tag se compone de un nombre seguido (opcionalmente) de una
lista de atributos. Todo esto dentro de los símbolos “<” y “>”.
● Esta información no se muestra en el browser.
● Generalmente, el nombre de un tag es una abreviatura de su
funcionalidad.
● Los nombres de los tags no son case sensitive. O sea, es lo mismo
<BODY> que <body>.
– No obstante algunas versiones del estándar exigen que los nombres de las
etiquetas se escriban en minúsculas.
Elementos contenedores
● Los elementos contenedores o elementos no vacíos, son
aquellos que tienen un tag de inicio o apertura y un tag de cierre.
● El texto comprendido dentro de los tags seguirá las
instrucciones del mismo.
● Un tag de cierre tiene el mismo nombre que su correspondiente
tag de apertura precedido por “/”.
● Los tags de cierre no llevan atributos.
● Por ejemplo:
Es una tarde lluviosa.
Resultará en:
Es una tarde lluviosa.

Elementos independientes
● Algunos pocos tags no tienen su tag de cierre.
– Esto se debe a que su función es ubicar elementos individuales en
la página.
– Por ejemplo: el tag de imagen <img> hace referencia a un gráfico
que se debe mostrar en la página.
– Otros tags independientes son line break (salto de línea) y
<hr> de horizontal rule (regla horizontal).
● Las versiones más restrictivas de HTML exigen que los tags
independientes lleven el símbolo “/” antes de finalizar. Es decir:
 se escribiría .
● Los tags independientes son conocidos también como tags
vacíos.

Atributos
● Los atributos son agregados a un tag para extender o modificar
la acción que este realiza.
● Se pueden agregar múltiples atributos a un único tag. Los
atributos (si existen) se ubican a continuación del nombre del tag
separados por espacios. El orden de aparición no es incidente.
● La mayoría de los atributos toman valores, que se especifican
ubicando el símbolo “=” inmediatamente después de su nombre.
● Los valores están limitados a 1024 caracteres y en ocasiones
son case sensitive.
● Es buena práctica que los valores aparezcan encerrados entre
comillas dobles.
<img src="fcad.jpg" align="right" width="45px" height="60px"/>

Análisis de documentos HTML

Análisis de documentos HTML
● El estándar HTML exige que el documento esté comprendido en
el contenedor <html>.
● A pesar de ello, la mayoría de los browsers pueden desplegar
los contenidos de un documento incluso si estos tags se omiten.
● Todos los documentos HTML están compuestos por dos
estructuras principales: head y body.
– La excepción ocurre cuando el documento contiene un frameset en
lugar del body.
● No obstante la primera línea de nuestro documento no es <html> es
<!DOCTYPE html>

DOCTYPE
● La declaración DOCTYPE no es un tag HTML.
● Se trata de una instrucción que informa al browser la versión del
lenguaje de marcado en el cual la página está escrita.
● DOCTYPE debería aparecer al principio de todo documento
HTML. Antes del tag <html>.
● DOCTYPE se refiere a un Document Type Definition (DTD).
– Un DTD especifica las reglas para el lenguaje de marcado,
para que los browsers puedan mostrar el contenido
correctamente.
● Cuando abre una página Web, nuestro navegador:
– Buscará la declaración DOCTYPE.
– La examinará para determinar qué estándares usa la página Web.
– Esta información determinará cómo el código HTML es interpretado
y cómo la página será mostrada en la pantalla.

DOCTYPE (2)
● Con algunas de estas declaraciones DOCTYPE podemos encontrarnos al
analizar un documento HTML.
– HTML 4.01:
● <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
– XHTML 1.0:
● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
● Sin embargo, durante el curso trabajaremos siempre con HTML5:
● <!DOCTYPE html>

Head
● El encabezado de un documento HTML está definido por el tag
<head>, contiene información que describe un documento HTML.
● <head> no tiene atributos, sirve como contenedor de otros tags
que ayudan a definir y administrar los contenidos del
documento. Algunos de esos tags son:
– <title>: provee una descripción del contenido de la página.
Es importante incluirlo (Se muestra en Favoritos y Motores de
búsqueda).
– <link>: define una relación entre el documento actual y otro.
Principalmente se lo utiliza para vincular el documento con
Hojas de Estilo en Cascada (CSS).
– <script>: Scripts JavaScript y VBScript pueden ser
agregados al documento dentro de su encabezado.
– <meta>: proveen información sobre el documento. Por ejemplo:
palabras claves y descripciones que usan los motores de
búsqueda.
Body
● El cuerpo de un documento HTML está delimitado por los tags
<body> y </body>.
● Incluye los contenidos de un documento. Es decir lo que se
quiere mostrar en la ventana del browser.
● El contenedor <body> puede consistir en unos pocos párrafos
de texto, una imagen simple o complejas combinaciones de
texto, imágenes , tablas y objetos multimedia.

Etiquetas de Texto
● Los Párrafos y Encabezamientos (Headings) son considerados
junto con las listas y enumeraciones elementos de nivel de
bloque o Block-Level Elements.
● Son siempre formateados por el browser con un salto de línea
antes y después, agregando espacios adicionales arriba y
debajo del elemento.
● Las etiquetas de texto son: párrafos, los encabezados y las
citas (blockquotes).
● Las etiquetas de texto se encuentran relacionadas con fuentes,
diferentes formas de representación de texto (tamaño, negritas,
subrayados, etcétera) y también en lo referente a acrónimos y
abreviaturas entre otras características de HTML.
● Sin embargo, muchas etiquetas han sido reemplazadas por
propiedades CSS y su uso es desaconsejado

Etiquetas de Texto (2)
● Párrafos: Los tags y denotan el principio y final de
un párrafo cuando es usado como contenedor.
– Muchos browsers permiten que el tag sea usado sin su
correspondiente tag de cierre abriendo un nuevo párrafo.
– El método de usar contenedores es recomendado, sobre todo
cuando se usan Hojas de Estilo.
● Headings: Son mostrados en negrita, saltos de línea
automáticos y un espacio extra abajo y arriba.
– Existen seis niveles de encabezados HTML que van desde h1 hasta
h6.
– Los browsers muestran los encabezados con un tamaño de fuente
descendente. Es decir, h1 tiene fuente más grande que h2, h2 que
h3, etc.

Etiquetas de Texto (3)
● Otras etiquetas de texto:
– ...: permite definir un texto en negrita. No usar.
– ...: define un texto en cursiva. No usar.
– ...: define un texto en subrayado. No usar.
– <ins>...</ins>: define un texto insertado. No usar.
– <del>...</del>: define un texto eliminado. No usar.
– ...: permite definir un subíndice. No usar.
– ...: permite definir un superíndice. No usar.
– ...: permite destacar con énfasis un texto.
– ...: permite destacar con énfasis fuerte un texto.
– <acronym>...</acronym>: se emplea para definir acrónimos.
– <pre>...</pre>: Las líneas contenidas entre los tags se muestran
como están en el archivo HTML fuente (incluye espaciados multiples y
saltos de línea). Generalmente es mostrado en una fuente
monoespaciada como por ejemplo Courier.

Listas y Enumeraciones
● La especificación original de HTML incluyó tags para 5
diferentes tipos de listas: Listas ordenadas, listas no
ordenadas (viñetas), listas de definiciones, menúes, listas de
directorios.
● Las listas de directorio (<dir>) y de menú (<menu>) se han
declarado obsoletas en las nuevas versiones del estándar.
● Las listas y los ítems que contienen son Block-Level
Elements, esto quiere decir que espacios de línea serán
agregados automáticamente antes y después de ellos.

Listas no ordenadas
● Una lista no ordenada se utiliza para mostrar una colección de
ítems relacionados que no deben aparecer en un orden
particular.
● Las listas son dibujadas con una identación precedidas de una
viñeta por cada ítem (Lo hace el browser).
● El tipo de viñeta se puede cambiar a través del atributo type.
● Los items se especifican a través de los tags <li>y </li>.
HTML Browser
<ul> ●
Item 1
<li>Item 1 </li>
<li>Item 2 </li>
●
Item 2
</ul>

Listas ordenadas (Enumeraciones)
● Las listas ordenadas son usadas cuando mantener la
secuencia de los ítems es importante.
● Son mostradas en una identación con un número
(automáticamente insertado por el browser) precediendo a cada
ítem de la lista.
● Este tipo de listas siguen la misma estructura básica que las
listas desordeandas: la lista completa está contenida por los
tags <ol> y </ol> y cada ítem individual se indica usando el
tag <li> y </li>.
● El esquema de números puede ser modificado.
HTML Browser
<ol> 1.Item 1
<li>Item 1</li>
<li>Item 2</li> 2.Item 2
</ol>

Enlaces - Links
● Los enlaces son un conjunto de tags que permiten enlazar un
documento con otro. Este conjunto está comprendido por: Tag
anchor, Area, Map.
● El tag anchor es el de uso más común.
● Se define mediante los tags <a>...</a>.
● Además de permitir vincular un documento con otro, un anchor
tag sirve también para rotular un fragmento (también llamado
anchor nominado), que es usado como una referencia para
vincular un punto en particular de un documento HTML.

Enlaces – Links (2)
● Los atributos más importantes del tag anchor.
– href="url": Especifica la URL de un objetivo destino.
– name="texto": Ubica un identificador de fragmento en un
documento HTML.
– title="texto": Establece un título al documento destino.
– target="texto": Especifica el nombre de una ventana o frame
en el cual el documento destino debe ser mostrado.
– accesskey="character": Asigna una tecla (atajo de teclado) al
enlace.
– tabindex="number": Especifica la posición del elemento actual
en el orden de tabulación del documento actual. Debe tener un valor
entre 0 y 32767.

URL (Uniform Resource Locator)
● Un URL es una secuencia de caracteres, de acuerdo a un
formato modélico y estándar, que se usa para nombrar recursos
en Internet para su localización o identificación, como por
ejemplo documentos textuales, imágenes, videos,
presentaciones digitales, etc.
● Un URL es un tipo especial de URI (Uniform Resource Identifier).
● Un URL se clasifica por su esquema, que generalmente indica el
protocolo de red que se usa para recuperar, a través de la red, la
información del recurso identificado.
● Ejemplos de esquemas:
● http: recursos HTTP.
● https: HTTP sobre SSL.
● ftp: File Transfer Protocol.
● file - recusos disponibles en el sistema local, o en una red local

URL (Uniform Resource Locator) - Sintaxis
● Los URL, deben seguir una sintaxis general, esto les permite
representar la dirección de un recurso, independientemente de la
forma original de los componentes de la dirección.
● Una URL tiene la siguiente sintaxis
esquema://autoridad/ruta?consulta#fragmento
– La autoridad consiste usualmente en el nombre o Dirección IP de un
servidor o (host), seguido a veces de “:” y un número de Puerto TCP.
Puede incluir nombre de usuario y password.
– La ruta es la especificación de una ubicación en alguna estructura
jerárquica, usando “/” como delimitador entre componentes.
– La consulta habitualmente indica parámetros de una consulta dinámica a
alguna base de datos o proceso residente en el servidor.
– El fragmento identifica a una porción de un recurso, habitualmente una
ubicación en un documento.
● Ejemplo: http://www.fcad.uner.edu.ar

URLs Absolutas
● Una URL absoluta está formada por:
– Un esquema (opcional).
– El nombre del host.
– Una ruta.
– Un nombre de archivo específico (opcional).
● Cuando se vincula un documento con otros servidores se
necesita usar una URL absoluta.
● El siguiente es un ejemplo de un link con una URL absoluta:
<a href="http://www.littlechair.com/web/index.html“>...</a>

URLs Relativas
● Un URL relativo provee un puntero a otro documento relativo a la
localización del documento actual.
● La sintaxis está basada en estructuras de rutas relativas del
sistema operativo Unix.
● Ejemplo: <a href="index.html">...</a>

Tablas
● A pesar de que no existe una clasificación las tablas pueden
usarse de las siguientes formas:
– Tabla de Datos: este tipo de tabla es la más básica y es el propósito
con el cual fue diseñado el tag por los creadores de HTML.
Contiene filas y columnas con datos textuales.
– Alineamiento del Texto: Las tablas son frecuentemente usadas para
crear efectos como columnas identación y espacio libre. No
recomendable.
– Plantilla de página: Muchos diseñadores Web usan grandes
estructuras de tablas como contenedor para darle estructura a su
página. No recomendable.
– Contenedor multiparte de imágenes: Las tablas pueden ser usadas
para mantener un gran gráfico que ha sido dividido en secciones
para generar animaciones y efectos. No recomendable.

Tablas – Estructura básica
● En su forma más básica las tablas están formadas por celdas,
organizadas en filas y columnas.
● Se pueden controlar las características de toda la tabla a
distintos niveles (de tabla, filas y celdas individuales).
– Actualmente no existe forma de controlar las columnas como
grupo.
● Las etiquetas que se utilizan para describir una tabla son
<table>, <tr>, <th> y <td>.

Bibliografía
● Libro: Web Design in a Nutshell (1ra Edición) (Caps: 1, 5, 6, 7, 8, 9, 10).
– Jennifer Niederst. O’Reilly. 2008
● Libro: Creating Web Sites Bible 3rd Ed.
– Philip Crowder, David A. Crowder. Wiley Publishing Inc. 2008.
● Web: W3schools
– http://www.w3schools.com.
● Libro: HTML5 Foundations, 2013
– Matt West. Wiley. 2013
● Libro: Randy Connolly, Ricardo Hoar. Fundamentals of Web Development,
Global Edition. Pearson. 2015.

Clase 3

Cargado por

Copyright:

Formatos disponibles

Clase 3

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

Clase 3

Cargado por

Copyright:

Formatos disponibles

Introducción al Desarrollo Web

2017 – Segundo Cuatrimestre 2

2017 – Segundo Cuatrimestre 3

2017 – Segundo Cuatrimestre 4

2017 – Segundo Cuatrimestre 7

2017 – Segundo Cuatrimestre 8

2017 – Segundo Cuatrimestre 9

2017 – Segundo Cuatrimestre 10

2017 – Segundo Cuatrimestre 11

2017 – Segundo Cuatrimestre 12

2017 – Segundo Cuatrimestre 13

2017 – Segundo Cuatrimestre 15

2017 – Segundo Cuatrimestre 16

2017 – Segundo Cuatrimestre 17

2017 – Segundo Cuatrimestre 18

2017 – Segundo Cuatrimestre 19

2017 – Segundo Cuatrimestre 20

2017 – Segundo Cuatrimestre 21

2017 – Segundo Cuatrimestre 22

2017 – Segundo Cuatrimestre 23

2017 – Segundo Cuatrimestre 24

2017 – Segundo Cuatrimestre 25

2017 – Segundo Cuatrimestre 26

2017 – Segundo Cuatrimestre 27

2017 – Segundo Cuatrimestre 28

2017 – Segundo Cuatrimestre 29

2017 – Segundo Cuatrimestre 30

También podría gustarte