Scribd
Cargar
15 vistas42 páginas

Tema3 HTML1

HTML (Hipertext Markup Language) es un lenguaje sencillo para crear documentos hipermedia en la web, utilizando etiquetas para estructurar el contenido. Se basa en un conjunto de marcas que delimitan elementos como párrafos, títulos, listas e hiperenlaces, y su presentación se gestiona mediante CSS. HTML5 es la versión actual que aborda problemas de compatibilidad y permite la inclusión de nuevos elementos.

Cargado por

fernandonavarrosoler
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 vistas42 páginas

Tema3 HTML1

HTML (Hipertext Markup Language) es un lenguaje sencillo para crear documentos hipermedia en la web, utilizando etiquetas para estructurar el contenido. Se basa en un conjunto de marcas que delimitan elementos como párrafos, títulos, listas e hiperenlaces, y su presentación se gestiona mediante CSS. HTML5 es la versión actual que aborda problemas de compatibilidad y permite la inclusión de nuevos elementos.

Cargado por

fernandonavarrosoler
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/ 42

HTML

Principios básicos
HTML
● HTML (Hipertext Markup Language) es un
lenguaje que permite la generación de
documentos hipermedia en la World Wide Web.
● HTML es un lenguaje muy sencillo. La descripción
se basa en especificar en el texto la estructura
lógica del contenido (títulos, párrafos de texto
normal, enumeraciones, definiciones, citas, etc.)
Los diferentes formatos, estructura física que se
quieren dar (especificar los lugares del documento
donde se debe poner cursiva, negrita, o un gráfico
determinado) se realizara mediante CSS; la
presentación final de dicho documento se realiza
por medio del navegador
HTML
HTML
● El World Wide Web Consortium (W3C) es la
organización que desarrolla los estándares para
normalizar el desarrollo y la expansión de la Web y la
que publica las especificaciones relativas al lenguaje
HTML.
● HTML fue concebido como un lenguaje para el
intercambio de documentos científicos y técnicos.
● Resolvió el problema de la complejidad de lenguajes
anteriores sirviéndose de un reducido conjunto de
etiquetas estructurales y semánticas apropiadas para
la realización de documentos.
● La ampliación a nuevos elementos ha traído problemas
de compatibilidad de los documentos entre las distintas
plataformas y programas. En la actualidad se utiliza
HTML5
HTML
● Un documento HTML es un documento de texto en el
que se incluye, además de texto, un conjunto de
marcas, o etiquetas con significado especial que
permiten introducir entre el texto otros elemento como
hipervínculos, imágenes, etc.
● Las marcas especiales, etiquetas siempre van
encerradas entre los símbolos mayor y menor (por
ejemplo: <p> significa principio de párrafo, </p>
significa final de párrafo.
● Otras veces las marcas se emplean de forma única. Por
ejemplo <hr> significa “dibujar una línea horizontal”, y
no tiene etiqueta de cierre.
HTML
CODIGO HTML

<html>
<head>
<title> Este es el título </title>
</head>
<body>
<p> Esto es un párrafo </p>
</body>
</html>
HTML
Componentes de un elemento HTML
• Etiquetas: texto entre los símbolos menor que y
mayor que <title>
• Contenido: texto entre la etiqueta de inicio y final

<title> Este es el título</title>


• Atributo: par nombre-valor dentro de la etiqueta de
inicio de un elemento, indica las propiedades que
lleva asociadas
<img src=”foto.jpg” >
HTML
Elemento HTML
Etiquetas

● Las etiquetas o marcas delimitan cada uno de los


elementos que componen un documento HTML.

● La etiqueta de comienzo está delimitada por los


caracteres < y >, por ejemplo:
<title>

● La etiqueta de final está delimitada por los caracteres


</ y >
</title>

● Entre la etiqueta de apertura y cierre está el


contenido, que puede ser texto u otras etiquetas

<title> Mi primera página </title>


Etiquetas

<html>
<head>
<title> Este es el título de mi página web</title>
</head>
<body>
</body>
</html>
Etiquetas
● Las etiquetas de comienzo pueden tener atributos
La primera palabra que aparece en una etiqueta es el nombre
o identificador seguido de los atributos con sus valores:
<identificador atributo1= "valor“ >

<img src = ”foto.jpg” >


Hay etiquetas que pueden tener varios atributos:

<identificador atributo1= "valor" atributo2= "valor“ >

<img src="Fernan-Caballero.jpg" width=“140” height=“180” >

● Otras no tienen atributos


<title> Este es el título de mi página web</title>
Etiquetas

Si un atributo tiene más de un valor, se escriben


todos los valores dentro de las mismas comillas,
separados por espacios en blanco:
<identificador atributo = "valor1 valor2“ >

Hasta hace poco, lo más usual a la hora de escribir


páginas web era que cada etiqueta tuviera bastantes
atributos, que se referían a propiedades del
formato o representación de los elementos. En la
actualidad al separar el formato del contenido,
atributos aparecen menos, sustituyéndolos por
propiedades de estilo que estudiaremos en el tema
siguiente
Estructura general
Todo documento HTML está contenido entre las
etiquetas <html> </html>.

● Se divide en dos partes: el encabezado y el


cuerpo.

● El encabezado: delimitado por las etiquetas


<head> </head> contiene información sobre el
documento (por ejemplo el título)

● Cuerpo: delimitado por las etiquetas <body>


</body>, en el se encuentra el contenido de la
página, lo que se ve a través del navegador:
texto, imágenes, enlaces…
Estructura general

<html>
<head>
<title>El título </title>
</head>
<body>
<p>esto es un párrafo que está en el
cuerpo del
documento</p>
</body>
</html>
Párrafos y títulos

● El texto de la página estará en el cuerpo del


documento <body>
● El texto debe estar dentro de párrafos.
● Los párrafos se identifican con las etiquetas
<p></p>
● Dentro de los párrafos colocaremos texto e
imágenes, no podemos tener otros párrafos
anidados.
● Los espacios en blanco consecutivos y saltos de
línea no se muestran como en el código fuente. Si
hay varios espacios seguidos, sólo se mostrará
uno y el navegador ignora los saltos de línea
● Para crear un salto de línea dentro de un párrafo,
utilizamos la etiqueta <br />.
● <hr /> muestra una línea horizontal
Párrafos y títulos
<html>
<head>
<title>Esto es el título</title>
</head>
<body>
<p> Esto es un párrafo con blancos y
saltos de línea
que no se muestran
</p>
</body> Si queremos poner varios
</html> espacios seguidos,
utilizaremos el código html
para el espacio, &nbsp;.
Párrafos y títulos

<html>
<head>
<title>Esto es el título</title>
</head>
<body>
<p> Un salto de línea .<br /> dentro de
un párrafo
</p>
</body>
</html>
Párrafos y títulos
● Los encabezados van desde el <h1></h1> de
mayor tamaño, al <h6></h6>, el más pequeño.
● El texto de cada apartado irá contenido en
párrafos <p></p>.

<html>
<head>
<title> Esto es el título </title>
</head>
<body>
<h1> 1. Capítulo I</h1>
<h2> 1.1. Introducción</h2>
<p> En el primer capítulo vamos a ilustrar
el uso de las marcas de párrafo y títulos.</p>
</body>
</html>
Párrafos y títulos
<h1> 1. Capítulo I</h1>
<h2> 1.1. Introducción</h2>
<p> En el primer capítulo vamos a
ilustrar
el uso de las marcas de
párrafo y títulos.</p>
<h2> 1.2. Párrafos</h2>
<p> Al poner una marca de párrafo se
comienza un nuevo párrafo. Al
cerrar el párrafo es cuando se hace
punto y aparte. Si no, aunque
escribamos en distintas líneas,
todas irán en el mismo
párrafo.</p>
<h1> 2. Capítulo II </h1>
<h2> 2.1. Introducción</h2>
<p> En este capítulo ...</p>
Párrafos y títulos
Elementos de marcado de texto
Texto importante
El texto importante se marca con el elemento strong. En general
todos los navegadores marcan el texto strong en negrita (letra más
gruesa), pero que se muestre en negrita es un acuerdo visual que se
puede modificar con el lenguaje CSS. Es decir, no es lo mismo texto
en negrita que texto importante.
<em>

Texto enfatizado
El elemento em marca texto como enfatizado. El resultado visual con
que le dan formato por defecto los navegadores es texto en cursiva.
<mark>
Texto resaltado
Se trata del tercer elemento de HTML5 para remarcar texto. Se hace
a través el elemento mark. En este caso, su efecto visual, suele ser
aplicar en el texto así marcado un fondo de color vivo que simula el
uso de un subrayador.

Elementos nuevos!!!!!
<strong> Elementos de marcado de texto
<em>
<body>

<p> El lenguaje HTML permite marcar algunos


segmentos de texto como <em> muy importantes</em>
y otros segmentos como <strong> los más
importantes</strong>
</p>

</body>

https://uniwebsidad.com/libros/xhtml/capitulo-3/marcado-basico-de-texto
Elementos de marcado de texto
Viñetas y listas
<ul>
Para hacer una lista con viñetas, debemos
encerrar todos los párrafos entre las marcas <ul> y
<li> </ul>. Además, cada párrafo, en lugar de <p> y
</p>, se delimita con <li> y </li>

<p>Algunas de mis escritoras


favoritas:</p>
<ul>
<li>Marcela Serrano.</li>
<li>Almudena Grandes.</li>
<li>Matilde Asensi.</li>
</ul>
Viñetas y listas
<ol>
En lugar de una lista de viñetas, se puede hacer una lista
<li> numerada automáticamente. En ese caso, en vez de
<ul> y </ul> utilizamos las etiquetas <ol> y </ol>

<p> Algunas de mis escritoras


favoritas: </p>
<ol>
<li> Marcela Serrano.</li>
<li> Almudena Grandes.</li>
<li> Matilde Asensi.</li>
</ol>
Viñetas y listas
<ol type=“ “>

Se pueden elegir otros tipos de numeración mediante el atributo


type en la etiqueta <ol> :

● <ol type="I“ >: Numeración romana: I, II, III, IV, etc.


● <ol type="i“ >: Numeración romana en minúsculas: i, ii, iii, iv, etc.
● <ol type="A“ >: Numeración en letras mayúsculas: A, B, C, D, etc.
● <ol type="a“ >: Numeración en letras minúsculas: a, b, c, d, etc.
Hiperenlaces
<a>

Para introducir un enlace se utiliza las etiqueta <a> y </a>


con el atributo href. El siguiente fragmento HTML introduce
un enlace.
<p> Haga clic <a href="http://www.um.es">aquí</a> para
acceder a la web de la Universidad de Murcia.</p>

En fragmento anterior se mostrará en el navegador de la siguiente forma


Haga clic aquí para acceder a la web de la Facultad.

El atributo href indica la dirección (URL) a la que se enlaza. El contenido


del enlace es lo que el usuario ve en la página y que al pulsar sobre él
nos lleva al enlace. Normalmente es texto o una imagen, en el ejemplo es
el texto aquí.
Hiperenlaces
<a>  Si se trata de un archivo que se encuentra en otro servidor
web diferente del que contiene el documento HTML actual, se
indicar su URL completa http://www.um.es, dirección
absoluta.

 Si se trata un archivo dentro de la misma carpeta en que está


el documento HTML, o en otra carpeta del mismo ordenador,
pondremos entre las comillas de HREF="" el nombre del
archivo de que se trate, con la ruta de carpetas a seguir en
caso necesario.

 Por ejemplo: <a href=“ejemplo1.html"> Haga clic </a>


(enlace al archivo enlaces.html, en la carpeta actual, la
misma en la que está el documento HTML). Dirección
relativa.
Imágenes

<img>
Cuando queremos introducir una imagen, lo hacemos con la etiqueta
<img > Los atributos que como mínimo ha de tener esta etiqueta
son los siguientes:

<img src="ubicacion/imagen.gif" alt="texto alternativo" >

src indica cuál es el archivo que contiene la imagen, especificando


su nombre; si se encuentra en otra carpeta, incluiremos la ruta hasta
la carpeta adecuada; y si se encuentra en otro servidor, indicaremos
la URL completa
<img src="Fernan-Caballero.jpg" alt =“No se puede mostrar" >
Imágenes
<img>

<html>
<head>
<title> Este es el título de mi página web </title>
</head>
<body>
<img src="Fernan-Caballero.jpg" alt =“No se puede
mostrar" >
<p> Algunas de mis escritoras favoritas:</p>
<ol>
<li>Marcela Serrano.</li>
<li>Almudena Grandes.</li>
<li>Matilde Asensi.</li>
</ol>
</body>
</html>
Imágenes

<img>
Imágenes
<img>
El tamaño de la imagen viene dado por su tamaño en píxeles,
independientemente de la resolución (puntos por pulgada). No
obstante podemos escalarla a un nuevo tamaño mediante las
opciones width y height y un nuevo tamaño en píxeles. Si sólo
se especifica el ancho o el alto, la otra dimensión se ajusta para
mantener la relación de aspecto (factor de forma). Si se
especifican ambos, se puede deformar la imagen.

<img src="Fernan-Caballero.jpg" width=“140” height=“180” alt


=“No se puede mostrar" >
Tablas
<table>
Las tablas HTML se definen con tres etiquetas: <table> para
crear la tabla, <tr> para crear cada fila y <td> para crear
cada columna.

<table>
En HTML 5 las etiquetas table y tr
<tr>
<td></td> no tienen atributos, aunque hay
<td>Lunes</td> atributos, como por ejemplo el
<td>Martes</td>
atributo border, que reconocen los
<td>Miércoles</td>
<td>Jueves</td> navegadores por estar presentes
<td>Viernes</td> en versiones anteriores de HTML.
</tr>
Es, como siempre, el lenguaje
…….
CSS el que determina la apariencia
</table>
y formato de la tabla.
Tablas
<table>
<table> <tr>
<td>11:30</td>
<tr> <td>Inglés</td>
<td></td> <td>Lenguaje</td>
<td>Lunes</td> <td>Geografía</td>
<td>Martes</td> <td>Química</td>
<td>Miércoles</td> <td>Física</td>
<td>Jueves</td> </tr>
<td>Viernes</td> </table>
</tr>

……..
Tablas
Es muy habitual que las tablas muestren datos y que estos
posean celdas que sirvan para describirlos. Esas celdas
se consideran de cabecera y se marcan con th.
A las tablas se les puede poner un título con ayuda de la
etiqueta caption.

<table>
<caption>Ventas</caption>
<tr>
<th>Hardware</th>
<td>12.190 €</td> Ventas
</tr>
<tr> Hardware 12.190 €
<th>Software</th> Software 9.870 €
<td>9.870 €</td>
</tr>
</table>
Estructura
Un documento HTML es un
árbol de elementos que
descienden de un elemento
<html> y sus dos elementos
secundarios: <head> para
metadatos (literalmente, "datos
sobre datos") y otros
elementos no visibles, y
<body> para el contenido de
la página.
Estructura
• Cualquier elemento que contenga otros elementos se dice
que es el padre de aquellos otros elementos esos son a su
vez sus hijos. Los elementos forman una estructura
arbórea, como un árbol genealógico.

• El elemento <p> tiene dos hijos: el texto "Un párrafo" y un


<em> elemento. El elemento <em> tiene un hijo: el texto
que contiene.
Estructura
• En HTML los elementos son de dos tipos: elementos en línea (inline
elements en inglés) y elementos de bloque (block elements en inglés).

• La diferencia entre los dos tipos de elementos es la forma en la que ocupan el


espacio disponible en la página. Los elementos de bloque siempre empiezan en
una nueva línea y ocupan todo el espacio disponible hasta el final de la línea,
aunque sus contenidos no lleguen hasta el final de la línea. Los elementos en
línea sólo ocupan el espacio necesario para mostrar sus contenidos.
Ejercicios
Escribe el código HTML para que se muestre este resultado

Horario
Ejercicios

● Lee el apartado de marcado de texto del sitio web:

https://uniwebsidad.com/libros/xhtml/capitulo-3/marcado-avanzado-
de-texto

1. Realiza el ejercicio que aparece al final del apartado, la


solución está también disponible.

2. Aplica un marcado similar a un texto propio

● Cree una carpeta para sus proyectos Web, esta carpeta


contendrá un fichero index.html y dos carpetas más: trabajos
e imágenes. La carpeta trabajos contendrá un fichero
index.html, y la carpeta imágenes contendrá al menos dos
imágenes. Genere el código Html para para los dos ficheros
índice. Su estructura será similar a la que aparece en las
figuras. Los títulos y textos son libres, aunque debe aparecer el
nombre del alumno en algún apartado y su foto, o similar.
Ejercicios
Index.tml en carpeta principal Index.html en carpeta trabajos

Imagen
Enlace a
principal

Enlace a
imagen 1

Enlace a
trabajos Enlace a
imagen 2
Recursos

● W3C Recommendation 28 Octubre 2014


http://www.w3.org/TR/html5/

● Recursos para desarrolladores, creados por desarrolladores


de Mozilla https://developer.mozilla.org/es/docs/Web/HTML/

● Uniwebsidad https://uniwebsidad.com/libros/xhtml/capitulo-
1/html-y-xhtml

También podría gustarte