Scribd
Cargar
15 vistas22 páginas

Parte 2 HTML

El documento proporciona una introducción al desarrollo web, incluyendo una variedad de navegadores y pantallas para los que se debe diseñar, consejos sobre velocidad de carga y accesibilidad, y una explicación básica de cómo se organiza un sitio web. También resume los elementos básicos de HTML como etiquetas, atributos, la estructura de un documento HTML, y elementos comunes como encabezados, párrafos, enlaces e imágenes.

Cargado por

Gonzalo Peñiñorey
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
15 vistas22 páginas

Parte 2 HTML

El documento proporciona una introducción al desarrollo web, incluyendo una variedad de navegadores y pantallas para los que se debe diseñar, consejos sobre velocidad de carga y accesibilidad, y una explicación básica de cómo se organiza un sitio web. También resume los elementos básicos de HTML como etiquetas, atributos, la estructura de un documento HTML, y elementos comunes como encabezados, párrafos, enlaces e imágenes.

Cargado por

Gonzalo Peñiñorey
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/ 22

HTML

Desarrollo Web
● Variedad de Navegadores
○ Chrome, Safari, Firefox, Edge
○ Ver soporte (¿Can I use?)
● Variedad de Displays
○ Diseño Adaptable (responsive)
● Velocidad de Transferencia
○ Tratamiento adecuado de imágenes
○ Peso de las páginas
● Escribir un buen HTML (Standard)
○ Validación HTML (W3C validator)
● Accesibilidad, Navegación, Diseño, Contenido,
Seguridad, etc.
3

Organización de un sitio web


● Un sitio web es un conjunto organizado de
directorios (carpetas) y archivos
● Contiene una raíz o documentroot o wwwroot
● Página de inicio (Index.html)
4

Lenguaje de Marcado de
Hipertexto
● Un archivo html es un archivo de texto
enriquecido con instrucciones (marcas) para
que el navegador sepa como y donde mostrar el
texto.
● Permite describir la estructura del texto y todos
los elementos que se muestran en la página.
● Estandard (W3C), universal y leible por
humanos.
● Permite integrar texto, imágenes, sonido y
enlaces en un mismo documento.
5

Historia de HTML
● En 1986 la organización internacional de
Estándares publica el SGML (Standard
Generalized Markup Language)
● En 1990 Tim Berners-Lee crea la WWW y el
HTML con base en un subconjunto del SGML.
● En 1993 se crea el HTML 2.0 (o HTML+)
● En 1995 el W3C (World Wide Web Consortium)
define el HTML 3.0
6

Historia de HTML
● El HTML 3.2 abandona las sugerencias del HTML
3.0 y adopta elementos desarrollados por
Netscape. (Incorpora Tablas, Applets, Texto
alrededor de imágenes)
● En 1997 se define el estándar HTML 4.0
● En 1999 aparece el estándar actual HTML 4.01
● En 2004 surge la primera versión de HTML 5
● Más información en: http://www.w3.org/
7

Elementos
● Permiten organizar el contenido del documento
o acciones que se desencadenan cuando el
navegador interpreta el documento.
● La declaración del elemento consta
generalmente de cuatro partes:
○ Etiqueta de inicio: <NOMBRE_ELEMENTO>
○ Cero o mas atributos
○ Contenido: puede ser otros elementos o
texto
○ Etiqueta de fin: </NOMBRE_ELEMENTO>
8

Atributos
● Son propiedades asociadas a los elementos.
Tienen asociado valores y modifican o extienden
las acciones de los elementos.
● Los pares atributo/valor se colocan antes del
cierre del inicio del elemento.
● Puede haber cualquier número de atributos
separados por espacios en blanco y no tienen
un orden predeterminado.
● La sintaxis es: atributo=”valor”
● <a href=”https://www.google.com”>Google</a>
9

Documento
● <!DOCTYPE html>: informa al navegador que el
contenido siguiente se trata de un documento
HTML.
● <html>: es el elemento raíz.
● <head>: es la cabecera del documento y
contiene metadata.
● <body>: es el cuerpo del documento y donde se
coloca el contenido que se quiere mostrar,
como textos, tablas, listas, imágenes, etc.
10

Elemento head
● Es la cabecera del documento. Contiene
metadatos como el título, el conjunto de
caracteres, scripts y otra información.
● Esta información no se muestra directamente
en el documento.
● Algunos elementos contenidos en <head>
incluyen <title>, <style>, <meta>, <link>,
<script>, y <base>
11

Elemento head
● <title> define el título del documento. Usos:
○ Es el título en la barra de herramientas del
navegador
○ Proporciona un título para la página
cuando se agrega a favoritos
○ Muestra un título para la página en los
resultados del motor de búsqueda
● <style> permite definir un estilo CSS para el
documento.
● <link> permite vincular recursos externos.
Principalmente usado para archivos CSS
<!DOCTYPE html>
<html lang="es"> Es recomendable declarar el idioma
<head>
<title>Mi primer página</title>
<meta charset="utf-8"></meta>
Siempre se debe
declarar la
</head> codificación de
caracteres para
<body> evitar que los
caracteres se
<h1>¡Hola Mundo!</h1> interpreten
</body> incorrectamente
</html>

DEMO
12
13

Comentarios
DEMO
● Si se desea introducir algún comentario a un
documento HTML la sintaxis es:

<!-- Única forma de comentar -->


<!-- Primera línea del Comentario
segunda línea del Comentario -->

● Los comentarios serán ignorados por el


navegador
14

Titulares, párrafos y texto


Titulares
● <h1>, <h2>, <h3>... <h6>: Titulares. Sirven para
dividir el texto en párrafos. Se pueden definir Párrafos
seis niveles de titulares.
Entidades
● <p>: Párrafos.
● Acomodan el texto al tamaño de la ventana. Símbolos
● Sucesiones de espacios, tabulaciones y saltos de
líneas, no se visualizan en el navegador.
● Si se quieren agregar espacios se debe agregar
la entidad “&nbsp;” para formatear el texto.
● Para introducir una nueva línea dentro de un
párrafo, se usa el elemento de línea <br>
● Para cambiar de tema se suele usar <hr/>
15

Formato de texto
DEMO
● Los siguientes elementos permiten dar formato
al texto: <strong> vs <b>
○ <b>negrita</b> <em> vs <i>
○ <strong>importante</strong>
○ <i>itálica o cursiva</i>
○ <em>enfatizado</em> Si es solo para dar
○ <mark>marcado</mark> formato, preferible
usar CSS.
○ <small>pequeño</small>
○ <ins>insertado/nuevo</ins> Si el uso es
○ <del>eliminado/viejo</del> semántico, usar
elementos.
○ <sub>subíndice</sub>
○ <sup>superíndice</sup>
16

Enlaces
DEMO
● El elemento <a> (“anchor”, ancla) se utiliza para
crear hipervínculos.
● El atributo href especifica el destino.
● El atributo target dice donde abrirlo
○ _self: misma ventana/pestaña (default)
○ _blank: nueva ventana/pestaña
○ _parent: ventana/pestaña padre
○ _top: ventana/pestaña raíz o tope
● Utilizando “#” (hash), se especifica el id del
elemento a navegar. Útil como marcador.
● https://es.wikipedia.org/wiki/HTML#Elementos
17

URL absoluta y relativa


● Uniform Resource Locator (Localizador
Uniforme de Recursos).
● Una URL absoluta contiene toda la información
necesaria para localizar un recurso. Ejemplo:
http://www.ulp.edu.ar/images/logo-ulp.png
● A diferencias de las URL absolutas, las relativas
no incluyen el dominio. Si la dirección comienza
con una barra “/”, será relativa al dominio. Si no,
será relativa a la página.
● carpeta/otra/archivo.html
● ../padre.html
18

Imágenes
Imágenes
● <img> permite mostrar imágenes.
● Sus principales atributos son: DEMO
○ src: especifica la fuente de la imagen.
○ alt: es el texto alternativo.
○ width: ancho de la imagen
○ height: alto de la imagen
● Si bien permite establecer tamaño por atributo,
es preferible usar CSS.
● Si colocamos un <img> dentro un <a> la imagen
funcionará como un enlace.
19

Listas
Lista ordenada
● Las listas permiten organizar conjuntos de datos
relacionados. Lista sin orden
● Para listas ordenadas usamos <ol>.
Lista de descripciones
● Para listas sin orden usamos <ul>.
● Para ambas, un elemento de la lista es <li>. Listas anidadas

● También existe el elemento <dl> que se usa


para listas de descripciones.
● Ésta última utiliza elementos <dt> y <dd> para el
término de la definición y su descripción
respectivamente.
20

Tablas
Tablas
● Las tablas permiten organizar datos en filas y
columnas. Encabezados
● La etiqueta <table> define una tabla HTML.
● Cada fila se define con etiquetas <tr>.
● Los encabezados se definen con etiquetas <th>. ¡No usar para
● Los datos se definen con <td>. maquetado!
● Los atributos colspan y rowspan, permiten a
una celda ocupar más de una columna y más de
una fila, respectivamente
● Por defecto, los encabezados van en negrita, el
resto de las celdas en forma regular y todos los
textos alineados a la izquierda.
21

Tablas (partes)
Leyenda
● El elemento <caption> permite colocar un título
o leyenda a una tabla. Debe venir Encabezado
inmediatamente luego de <table>.
Cuerpo

Pie
● Los elementos <thead>, <tbody> y <tfoot>
permiten especificar el encabezado, cuerpo y
pie de una tabla.
¡Gracias!
¿Preguntas?

22

También podría gustarte