Scribd
Cargar
33 vistas

HTML

Este documento proporciona una introducción a los elementos básicos de HTML. Explica qué es HTML y su historia. Luego describe elementos comunes como encabezados, párrafos, imágenes, enlaces, listas y tablas. También cubre formularios, incluidos tipos de entrada como texto, contraseñas, botones de radio, casillas de verificación y más. El documento proporciona ejemplos de código HTML para cada elemento.

Cargado por

Rocio Soriano
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
33 vistas

HTML

Este documento proporciona una introducción a los elementos básicos de HTML. Explica qué es HTML y su historia. Luego describe elementos comunes como encabezados, párrafos, imágenes, enlaces, listas y tablas. También cubre formularios, incluidos tipos de entrada como texto, contraseñas, botones de radio, casillas de verificación y más. El documento proporciona ejemplos de código HTML para cada elemento.

Cargado por

Rocio Soriano
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 49

F.4411.316.013 - POEJ/MIXTO/F.

Generation/
Curso JAVA (Online-Nacional) 3ªEd.

Java Bootcamp
Eduardo Corral Muñoz
[email protected]
Introducción a
HTML
Índice
_01 Qué es HTML
_02 Elementos HTML
_03 Formularios
_04 Multimedia
_05 La página web
_06 Buenas prácticas
01

Qué es HTML
Qué es HTML

HTML
HyperText Markup Language
(lenguaje de marcas de hipertexto)

Un lenguaje estándar para componer páginas web


Describe la estructura de un página web
Dispone de un conjunto de “etiquetas” que le indican al
navegador cómo debe mostrar el contenido en cada una de las
partes de la página
Un poco de historia

1989 Tim Berners-Lee inventa www


1991 Tim Berners-Lee inventa HTML
1993 Dave Raggett prepara HTML+
1995 El grupo de tarabajo HTML define HTML 2.0
1997 Recomendación W3C: HTML 3.2
1999 Recomendación W3C: HTML 4.01
2000 Recomendación W3C: XHTML 1.0
2008 WHATWG HTML5
2012 Primer diseño WHATWG HTML5 Living Standard
2014 Recomendación W3C: HTML5
2016 Candidato a Recomendación W3C: HTML 5.1
2017 Recomendación W3C: HTML5.1 2nd Edition
2017 Recomendación W3C: HTML5.2
Qué es HTML
Elem. de
Elementos Marcos Corrector
Versión presentación
HTML (Frameset) XML
u obsoletos

HTML 4.01 Strict 


HTML 4.01 Transitional  
HTML 4.01 Frameset   
XHTML 1.0 Strict  
XHTML 1.0 Transitional   
XHTML 1.0 Frameset    
XHTML 1.1
 
(permite añadir módulos)
HTML 5 No está basado en SGML. No necesita DTD
DTD → Document Type Definition
HTML está basado en SGML (Standard Generalized Markup Language)
XHTML está basado en XML (eXtensible Markup Language)
02

Elementos HTML
Elementos HTML
Describen la estructura de una página
Bloques de contenido para componer una página
Se representan mediante etiquetas (tags)
Los navegadores los usan interpretar el contenido
Elementos HTML

<html> … </html>
Define la página

<head> … </head>
Info para el navegador

<body> … </body>
Contenido visible
Elementos HTML
Estructura básica:

<!DOCTYPE html>

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

<body>
<h1>Esto es un encabezado</h1>
<p>Y esto es un párrafo</p>
</body>

</html>

<etiqueta> contenido </etiqueta>


Elementos HTML
Estructura básica:

Ejemplo_1
<!DOCTYPE html>
<html> <!doctype html>
<head> <html>
<meta charset="utf-8" />
<title>Título de la página</title> <head>
</head> <meta />
<body>
<h1>Esto es un encabezado</h1> <title>
<h3>Subtítulo</h3> <body>
<p>Y esto un párrafo</p>
</body> <h1>..<h6>
</html> <p>
Elementos HTML
Textos y formatos

Ejemplo_2 <br>
<body>
<h1>Esto es un encabezado</h1>
<b>
<p>Y esto un párrafo</p> <strong>
<p>Formatos de texto:<br>
<b>En negrita</b><br>
<i>
<strong>Texto importante</strong><br> <em>
<i>Itálica</i><br>
<em>Énfasis</em><br>
<mark>
<mark>Marcado</mark><br> <small>
<small>Pequeño</small><br>
<del>Tachado</del><br>
<del>
<ins>Insertado</ins><br> <ins>
y un <sub>subíndice</sub><br>
y también <sup>superíndice</sup></p>
<sub>
</body> <sup>
Elementos HTML
Imágenes

Ejemplo_3
…
<img src="montanas.jpg" alt="Una Montaña" title="Una Montaña" width="500"
height="246" />
…

<img src=“ruta imagen” />


Atributos alt | title | width | height
Elementos HTML
Enlaces

Ejemplo_4
…
<a href="http://www.eoi.es">Enlace a otra página </a>
…

<a href=“url destino”>Texto enlace</a>


Atributo target=“_blank | _self | _top | …”
Imágenes como enlace
Bookmarks
Elementos HTML
Listas
Ejemplo_5
… <ul>
<li> Item uno </li>
<li> Item dos </li>
<li> Item tres </li>
</ul> <ul>
<ol>
<li> Item uno </li>
<li>
<li> Item dos </li> <ol type=“X”>
<li> Item tres </li>
</ol> <dl>
<dl>
<dt> Primero</dt>
<dt>
<dd> - descripción de primero</dd> <dd>
<dt> Segundo</dt>
<dd> - descripción de segundo</dd>
</dl> ...
Elementos HTML
Tablas
Ejemplo_6/a/b/c/d/e
<table width="400" border="1" cellspacing="2" cellpadding="2">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr> <table>
<tr> <thead> <tbody> <tfoot>
<td>Uno</td>
<td>Dos</td> <th>
<td>Tres</td> <tr>
</tr>
<tr> <td>
<td>Cuatro</td> <colspan>
<td>Cinco</td>
<td>Seis</td> <rowspan>
</tr>
</table>
Elementos HTML
Bloques e inline

Ejemplo_7

<div>
<h2>León</h2> <div>
<p>León (pronunciado: /leˈon/) (en leonés,
<span>
Llión)<sup>7</sup> es un municipio<sup>8</sup> y
ciudad <span style="color:red">española </span>ub
icada en el ...
</p>
</div>
03

Formularios
Formularios
Formularios

Ejemplo_8
<form action="procesa_formulario_1.php" method="post" name="formulario"
target="_blank">
Nombre:<br>
<input type="text" name="nombre">
<br>
Apellido:<br>
<input type="text" name="apellido">
<br>
<input type="submit" value="Enviar">
</form>

<form> <input>
Formularios
Elementos de un formulario

Ejemplo_9
<form action="procesa_formulario_2.php" method="post" target="_blank">
<!-- Select -->
Ciudad:
<select name="ciudad"> <select>
<option value="Madrid">Madrid</option>
<option value="León" selected>León</option>
selected
<option value="Cuenca">Cuenca</option> <textarea>
</select>
<!-- Text Area -->
<button>
<br>Mensaje:<br>
<textarea name="mensaje" rows="5" cols="30"></textarea> <br>
<!-- Button -->
<button type="button" onclick="alert('Hola')">Click Aquí</button>
<input type="submit" value="Enviar">
</form>
Formularios
Elementos de un formulario

Ejemplo_10
<form action="procesa_formulario_3.php" method="post">
<!– datalist --> <datalist>
Navegador:
<input list="navegador">
<datalist id="navegador">
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Safari">Safari</option>
</datalist>
</form>
Formularios
Elementos de un formulario

Ejemplo_11
<form action="procesa_formulario_4.php" method="post"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<output>
<input type="text" id="a" name="a" value="0">
+
<input type="text" id="b" name="b" value="0">
=
<output id="x" name="x" for="a b"></output>
<br><br>
<input type="submit" value="Enviar">

</form>
Formularios
Elementos de un formulario – input - Tipos

Ejemplo_12
<form action="procesa_formulario_5.php" method="post">
Texto:<input type="text" id="a" name="a"><br><br> input type:
Password:<input type="password" id="b" name="b"><br><br>
Radio: Blanco<input type="radio" name="c" value="Blanco">
text
Negro<input type="radio" name="c" value="Negro"> password
<br><br>
Checkbox: Bus<input type="checkbox" name="d" value=“Bus">
reset
Tren<input type="checkbox" name="e" value="Tren"> radio
<br><br>
<input type="Reset" value="Reset">
checkbox
<input type="submit" value="Submit"> checked
</form>
Formularios
Elementos de un formulario – input - Tipos

Ejemplo_13
<form action="procesa_formulario_6.php" method="post"> color
Color: <input type="color" name="a"><br><br>
Fecha: <input type="date" name="b"><br><br>
date
Fecha-Hora: <input type="datetime-local" name="c"><br><br> datetime
Hora: <input type="time" name="d"><br><br>
Mes: <input type="month" name="e"><br><br>
time
Semana: <input type="week" name="f"><br><br> month
Numero: <input type="number" name="g" min="1" max="10">
<br><br>
week
Rango: <input type="range" name="h" min="1" max="10"> number
<br><br>
Email: <input type="email" name="i"><br><br>
range
Búsqueda: <input type="search" name="j"><br><br> email
URL: <input type="url" name="k"><br><br>
<input type="submit" value="Submit">
search
</form> url
Formularios
Elementos de un formulario – input - Atributos

Ejemplo_14
<form action="procesa_formulario_7.php" method="post">
Valor:<input type="text" name="a" value=“Hola"><br><br>
Lectura:<input type="text" name="b" value="Hola" readonly><br><br>
Deshabilitado: <input type="text" name="c" value="Hola" disabled>
<br><br>
Tamaño: <input type="text" name="d" value= Hola" size="40"><br><br>
L.Máx.: <input type="text" name="e" value="Eduardo" maxlength="10">
<br><br>
<input type="submit" value="Submit">
</form>

value readonly disabled size maxlength


Formularios
Elementos de un formulario – input - Atributos

Ejemplo_15
<form action="procesa_formulario_8.php" method="post" autocomplete="on">
Autofocus: <input type="text" name="a" autofocus><br><br>
Archivos: <input type="file" name="b" multiple><br><br>
Patrón: <input type="text" name="c" pattern="[A-Za-z]{3}"><br><br>
Descripcion: <input type="text" name="d" placeholder="Nombre"><br><br>
Requerido: <input type="text" name="e" required><br><br>
Paso: <input type="number" name="f" step="3"><br><br>
<input type= "submit" value= "Enviar">
</form>

autocomplete autofocus multiple pattern


placeholder required step
04

Multimedia
Multimedia
Audio

Ejemplo_16
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Multimedia - Audio</title>
</head> audio
<body>
<audio loop>
<source src="sonido.ogg" type="audio/ogg">
<source src="sonido.mp3" type="audio/mpeg">
El navegador no soporta el elemento audio
</audio>
</body>
</html>
Multimedia
Vídeo

Ejemplo_17
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Multimedia - Vídeo</title>
</head> video
<body>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mpeg">
<source src="video.ogg" type="video/ogg">
El navegador no soporta el elemento video
</audio>
</body>
</html>
05

La página web
La página web
Diseño de página web

Cabecera

Menú de navegación

Contenido
Contenido Contenido
principal

Pie
La página web
Elementos semánticos HTML5

Cabecera = <header>

Menú de navegación = <nav>

Sección = <section>

Aparte =
<aside>
Artículo= <article>

Pie = <footer>
La página web
Elementos semánticos HTML5

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<figure> <figcaption>

<details> <summary>
La página web
Diseño de página web - home

Curso de Desarrollo de
logo
Aplicaciones Web

HTML CSS Javascript SEO Java Información

Datos
convocatoria

Descripción
del curso

Pie
La página web
Diseño de página web - contenido

Curso de Desarrollo de
logo
Aplicaciones Web

HTML CSS Javascript SEO Java Información

Ejemplo 1
Ejemplo 2
Contenido Ejemplo 3
principal ---

Pie
La página web
Diseño de página web - info

Curso de Desarrollo de
logo
Aplicaciones Web

HTML CSS Javascript SEO Java Información

Nombre Apellidos email Nacimiento

Nos conociste: Conocimientos: Comentarios:


Tv Ninguno
Radio HTML/HTML5
Prensa CSS/CSS3
Escuela Javascript
Oficina empleo Node JS
radio select

Pie
06

Buenas Prácticas
Buenas Prácticas

Objetivos

Facilitar la legibilidad del código y su modificación

Reducir al máximo la posibilidad de error

Asegurar el funcionamiento en todos los navegadores


Buenas Prácticas
Define todas las etiquetas en minúsculas

<DIV>
<P>¡No hagas esto!</P>
</DIV>

<div>
<p>¡Haz esto en su lugar!</p>
</div>
Buenas Prácticas
Cierra siempre las etiquetas y no utilices barras inclinadas en los
elementos de autocierre

<ul>
<li>¡No hagas
<li>esto!<img src= “incorrecto.png” />
</ul>

<ul>
<li>¡Esto es lo que tienes </li>
<li>que hacer!<img src= “correcto.png”></li>
</ul>
Buenas Prácticas
Utiliza comillas dobles para todos los atributos

<div id= ‘incorrecto’>


<p class= ‘a_si_no’>¡No hagas esto!</p>
</div>

<div id= “correcto”>


<p class= “a_si_si”>¡Haz esto!</p>
</div>
Buenas Prácticas
Los atributos booleanos (disabled, selected, checked…) no
necesitan un valor. Basta con que estén

<p hidden> ¡Párrafo oculto!</p>

<form>
<input type= “text” name=”deshabilitado” disabled>
</form>
Buenas Prácticas
Evita utilizar CSS en línea, llama a archivos externos.

<!doctype html>
<html>
<head>
…
<link rel= “stylesheet” href= “estilo.css”>
…
</head>
<body>
<h1>Esto es un encabezado </h1>
<p>Y esto es un párrafo</p>
</body>
</html>
Buenas Prácticas
Carga el javascript al final de la página antes de </body>

<!doctype html>
<html>
<head>
…
<link rel= “stylesheet” href= “estilo.css”>
…
</head>
<body>
…
<script src=“miscript.js”></script>
</body>
</html>
Buenas Prácticas
Utiliza “alt” en las imágenes, ayuda a los lectores de pantalla y
mejora la indexación

<img src= “logo.png” alt= “Mi empresa”>


Buenas Prácticas
Utiliza listas para los menús de navegación

<nav>
<ul>
<li>Inicio</li>
<li>Sección 1</li>
<li>Sección 2</li>
</ul>
</nav>
Buenas Prácticas
No abuses del <div>, emplea los elementos estructurales

<div id= “header”> <header>


¡No debes ¡Esto es
</div> </header>

<div id= “main”> <section id= “main”>


hacer cosas lo que debes
</div> </section>

<div id= “footer”> <footer>


como esta! de hacer!
</div> </footer>
...

También podría gustarte