Scribd
Cargar
130 vistas

Tutorial HTML

Este documento proporciona una introducción básica a HTML5, incluyendo etiquetas comunes (<html>, <head>, <body>), nuevos elementos en HTML5 (<article>, <aside>, <audio>), formatos de texto (<strong>, <em>, <small>), tablas, enlaces e imágenes. También explica cómo agregar color y cómo colocar un logo en la pestaña del navegador.

Cargado por

Richard Leonardo Diaz Florez
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
130 vistas

Tutorial HTML

Este documento proporciona una introducción básica a HTML5, incluyendo etiquetas comunes (<html>, <head>, <body>), nuevos elementos en HTML5 (<article>, <aside>, <audio>), formatos de texto (<strong>, <em>, <small>), tablas, enlaces e imágenes. También explica cómo agregar color y cómo colocar un logo en la pestaña del navegador.

Cargado por

Richard Leonardo Diaz Florez
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/ 27

CURSO BASICO DE HTML 5

Lenguaje HTML ( Hypertext Markup Lenguaje) , es un formato de texto que se


puede utilizar en cualquier editor .
En html , las etiquetas se pueden escribir en mayúscula o minúscula , las etiquetas
tiene un inicio y un cierre
Inicio <html>

Cierre </html>
Una etiqueta está conformada por:
<Elemento atributo valor>
Ejemplo
<html lang="es">
Ejemplo de MI primera pagina

Para colocar comentarios en el editor lo podemos realizar de la siguiente manera

<!--- comentario con base a la etiqueta --- >

Etiquetas o elementos vacíos

<br> <hr>

CARACTERES ESPECIALES
&lt;
&gt,
&amp;
&nbsp; espacio en blanco
&divide; división
&times;
&pound;
&yen;
Etiquetas o Frases

<strong> para colocar texto en negrilla


<strong > Colombia es un país con variedad de clima</strong>
<em> letra cusiva
<em > Bogota Distito Capital</em>
<small> para colocar el texto más pequeño
<small> Bogota Distito Capital</small>
<mark> para resultar texto
<mark> Bogota Distito Capital</mark>
<blockuote> genera sangria al parrafo
<blockquote> usted puede escribir una parrafo </blockquote>
<q> citar uana frase
<q> Es el mejor país de sur américa</q>
<adress> sirve para citar una dirección

<adress> curso practico html</adress>

Como colocar 3 la 5

<p> <sup>5 </sup></p>


Como colocar

<p>H<sub>2</sub></p>
Como anidados
<h1><center><Font color=”red”> COLOMBIA </Font></center></h1>
Es decir que se debe cerrar de adentro así fuera.
Nuevos Elementos de html5

Nuevo Elemento Descripción

<article> Composición independiente en documento

<aside> Contenido relacionado con el contenido artíulo

<audio> Contenedor de contenido sonido

<canvas> Contenedor de desarrollo grafico

<command> Un comando que puede invocar un usuario

Generador de lista cuando se utiliza con el


<datalist> elemento (input) y su nuevo atributo de lista.

<details> Revela detalles de un elemento

<embed> Contenido o plug-in interactivo externo.

<figcaption> Etiqueta de título para el elemento figure.

Contiene un grupo de contenido multimedia y su


<figure> título.
Contenedor para un pie de página de un
<footer> apartado o pagina
Contenedor para encabezado de un apartado o
<hearder> página.
Un encabezado de una sección con multiples
<hgroup> elementos h1 a h6 en un documento.
Representación de control para general un par
<keygen> de claves privada publica
Una cadena de texto en un
<mark> doceumneto,marcado o resaltado como
referencia en otro documento
Contenedor para un rango de valores
<meter> conocidos(uso de disco)
Representación de un apartado de un
<nav> documento pensado para navegación
Define el progreso de una tarea de cualquier
<output> tipo
Representación del progreso realizado en una
<progress> tarea
Indicador de Ruby(un lenguaje de
<rp> programación) para definir o mostrar en
navegadores que no soportan elemento <ruby>
Marca el componente de texto ruby de una
<rt> anotación ruby

<ruby> Elemento para tramos con anotaciones ruby

Identificador de tema para agrupación de


<section> contenido
Contenedor para múltiples especificaciones de
<source> recursos multimedia

<summary> Información de un elemento <details>

<time> Contenedor para una fecha/hora

<video> Elemento para vincular con un archivo de video

Representación de una oportunidad de salto


<wbr> de línea para guiar la separación de las
palabras largas o cadenas de texto

UTILIZAR ETIQUETAS CONTINUADAS DESDE HTML 4

Nuevo Elemento Descripción


<!---…….--- Un comentario
<!DOCTYPE> Tipo documento en html 5
Nuevo Elemento Descripción
<a> Hipervínculo a una pagina
<abbr> Una abreviatura
<address> Contenedor para una dirección
<area> Una área dentro de un mapa de imagen
<b> Texto de negrilla
Una url base para todos los vínculos en una
<base>
pagina
<bdo> Dirección de la visualización de texto
<blockquote> Un bloque de texto
<body> Comienzo de un elemento de cuerpo
<br> Un salto de línea
<button> Un botón el que se puede hacer click
<caption> Un título de tabla
<cite> Contenedor para una cita
<code> Formato para texto de código informático
<col> Define atributos para columnas de tabla
<colgroup> Contenedor para grupos de columnas de tabla
<dd> Contenedor para un valor en el elemento <dt>
<del> Contenedor para texto eliminado.
Representación de la instancia de definición de
<dfn>
término.
<div> Demarcación de división en un documento.
<dl> Encabezado para una lista de asociación.
<td> Especificación de un nombre en grupo.
<em> Texto enfatizado.
Contenedor para un conjunto de controles de
<fieldset>
formulario.
Nuevo Elemento Descripción
<form> Contenedor para formulario.
<h1> a <h6> Encabezado de texto d 1 hasta 6.
Contenedor para primer código a interpetar por
<head>
el navegador.
<hr> Línea Horizontal
<html> Contenedor para un documento HTML
<i> Texto en Cursiva
<iframe> Incorporar una subventana en línea .
<img> Contenedor de Imagen
<input> Campo de entrada de texto, usuario
Contenedor para texto insertado dentro de los
<ins>
límites de párrafo.
<kbd> Contenedor para entrada de teclado del usuario.
Representación de un título en una interfaz de
<label>
usuario
<Legend> Título en un campo de Texto
<li> Indicador de Elemento de fila
<link> Una referencia de recurso ( css)
<map> Contenedor de mapa de imagen.
Texto en un contexto marcado para texto en una
<mark>
ubicación
<menu> Contenedor para una lista de comandos.
<meta> Contenedor para información meta.
<object> Contenedor para objeto.
<ol> Una lista numerada(ordenada)
Un encabezado de agrupación en una lista de
<optgroup>
opciones
<option> Contenedor para opciones individuales en lista
Nuevo Elemento Descripción
desplegable.
<p> Un bloque de párrafo
<param> Parámetros de plug-in
<pre> Formato de texto preformateado.
<q> Texto entre comillas.
<samp> Fragmento o salida de código informático
<script> Contenedor de script para css, JavaScript.
<select> Una lista seleccionada
<small> Texto pequeño.
<span> Selección en línea de un documento.
<strong> Texto fuerte que se parece a negrilla.
<style> Contenedor para una definición de estilo.
<sub> Texto sub índice.
<sup> Texto superíndice
<table> Una definición de tabla.
Demarcación para un bloque de filas o cuerpo de
<tbody>
tabla.
<td> Una celda de tabla.
<textarea> Un contenedor de área de texto
<tfoot> Representación bloque de filas.
<th> Formato de cabecera de tabla.
<thead> Representación bloque de filas
<title> El título del documento, ventana, pestaña
<tr> Demarcación de una fila de tabla.
<ul> Una lista no numerada.
<var> Estilo variable en formula.
Tabla de Colores

Usted puede aplicar a sus páginas web color, de fondo, como la fuente para esto
puede utilizar el nombre del color en inglés o el código

Nombre Ingles código


Blanco white #FFFFFF
Negro black #000000
Rojo red #FF0000
Verde green #2EFE2E
Azul blue #0000FF
Gris grey #A4A4A4
Rosa pink #FE2E9A
Naranja orange #FFBF00
Marron bron #8A4B08
Links

Links locales
<a href =”contacto.html”>CONTACTO </a>
<a href =”contacto.html” target =”_blank”>CONTACTO </a>

Links Remotos
<a href=” http://www.sena.edu.co”>SENA</a>
<a href =http://www.sena.edu.co”target=”_blank”>SENA</a>
Link de Correo
<a href=”maito:[email protected]”>ENVIAR CORREO A FOX</a>

Link anclados

Dentro del mismo documento


<a id =” Monserrate”> Monserrate</a>

COMO COLOCAR UN LOGO O IMAGEN EN EL NOMBRE DE LA VENTANA O


PESTAÑA

Ejemplo codigo en html

<!DOCTYPE html>
<html>
<head>
<title>CASA</title>
<link rel ="shortcut icon" href="C:\Users\End
User\Desktop\PODER\img\b1.jpg" alt ="arbol">
</head>
Como Intentar una imagen a la página web

Ejemplo del Codigo en Html

<body>
<H1>Mi primera Página</H1>
<hr>
<img src="C:\Users\End User\Desktop\PODER\img\b1.jpg" width="400"
height="400" alt ="arbol"/>
<hr>
</body>
Como colocar una Imagen de fondo de la página web

CODIGO en html

</head>
<body background="img/a1.jpg">
<H1>Mi primera Página</H1>
<hr>
</body>
</html>
TALLER DE LISTAS
Código de HTML
<!DOCTYPE html>
<html>
<head>
<title>LISTAS</title>
</head>
<body>
<P> LISTAS NO ORDENADAS</P>
<ul>
<li> pedro</li>
<li> Carlos</li>
</ul>
<ul>
<li type ="circle">COLOMBIA</li>
<li type ="circle">SENA</li>
</ul>
<UL>
<li type ="disc">BOGOTA</li>
<li type ="disc">CHAPINERO</li>
</ul>
<P> LISTA DE ORDENADA</P>
<ol>
<li value="10"> pedro </li>
<li> Jaun</li>
<li> Ines</li>
<li> Teresa</li>
</ol>
<P> LISTA DESPLEGABLE</P>
<select name ="localidad">
<option> USAQUEN</option>
<option> CHAPINERO</option>
<option> SANTA FE </option>
<option> SAN CRISTOTAL</option>
</select>
<Hr>
<P> SELECCION UNICA</P>
<input type ="radio" name ="localidad" value="1"> USME<br>
<input type ="radio" name ="localidad" value="2">TUNJUELITO<br>
<input type ="radio" name ="localidad" value="3">BOSA<br>
<hr>
<input type ="checkbox" name ="ciudad" value ="1">BOGOTA<br>
<input type ="checkbox" name ="ciudad" value ="2">CALI<br>
<input type ="checkbox" name ="ciudad" value ="3">MEDELLIN<br>
<input type ="checkbox" name ="ciudad" value ="4">CARTAGENA<br>
<hr>
</body>
</html>

TALLER DE FORMULARIOS

Código en HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body bgcolor=#82E0AA>
<H3> datos Basicos</H3>
<form action="proyecto.thm" method="post">

<center><table>
<tr>
<td>Nombres</td>
<td>Apelliodos</td>
<td>Contraseña</td>
</tr>
<td> <input type="text" name="nombres"></td>
<td> <input type="text" name=apellidos"></td>
<td><input type="password" name="password"></td>
</tr>
</table>
</center>
<hr>
<h4> comentarios</h4>
<textarea name="comentario"cols="20"rows="5"></textarea>
<br>
<input type ="submit" value ="Enviar"><br>
<input type ="reset" value ="Borrar"><br>
<hr>
<p>mi sitio de ubicación</p><br>
<iframe src=""></iframe>
</body>
</html>

Usted puede tener en cuenta que el formulario puede usar el método post o get
Además para defir textbox

Se puede dar el tamaño de los caractereste que este va recibir


Ejemplo

<input type=”text” name=”nombre” size=”10”maxleng=”10”>

Taller 2 de Formulario
Codigo en Html

<!DOCTYPE html>
<html>
<head>
<title>FORMULARIO</title>
<link rel="stylesheet" type="text/css" href="estilos/FORMULARIO.css">
</head>
<body bgcolor="#81F79F">
<form>
<fieldset>
<legend>Datos Basicos</legend>
<div>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" />
</div>
<div>
<label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" size="50" />
</div>
<div>
<label for="telefono">Telefono</label>
<input type="text" id="dni" size="10" maxlength="9" />
</div>

<div>
<label for="contrasena">Contraseña</label>
<input type="password" id="contrasena" />
</div>
<div>

<input class="btn" type="submit" value="Enviar" /><br><br>


<input class="btn" type="reset" value="Borrar" /><br><br>
</div>
</fieldset>
</form>
</body>
</html>

TALLER DE TABLAS

Código en Html

<!DOCTYPE html>
<html>
<head>
<title>MI TABLA</title>
</head>
<body bgcolor=#82E0AA>
<CENTER><h2> MI TABLA</h2></CENTER>
<table border="2" width="400"cellspacing="4" cellpadding="6">
<caption>Listado de Tg Noche</caption>
<thead>
<tr>
<th>Nombres</th>
<th>Apellidos</th>
<th>No Teléfono</th>
</tr>
</thead>
<tbody>
<tr>
<td> Ines </td>
<td> Castro</td>
<td> 321 346 56 68</td>
</tr>

<tr>
<td> Gloria </td>
<td> Perez</td>
<td> 310 338 56 68</td>
</tr>
</tbody>
</thead>
</body>
</html>

CELLSPACING : sirve para dar Espacio entre celdas


CELLPADDING: es la cantidad de espacio entre el borde interior de la celda y el
contenido de la celda.
<td rowspan=”2”> en teste caso vamos a combinar dos filas
<td colspan=”2”> en este caso vamos a combinar dos columnas

Divisiones o Marcos
Codigo en Html

<!DOCTYPE html>
<html>
<head>
<title> DIVISIONES </title>
</head>
<body>
<hr>
<a href="http://www.sena.edu.co"target="ventana"> MI SENA</a><br>
<a href="https://noticias.caracoltv.com"target="ventana">CARACOL TV</a><br>
<hr>
<iframe src="http://www.pedrocastaneda.net" width="500" height="400"
name="ventana" sandbox="no" frameborder="1">
</iframe>
<iframe width="500" height="400" src="noticia.html" scrolling="0"></iframe>
</body>
</html>

Sonido

La etiqueta que nos sirve en html5 para, colocar sonido a la página web es
<audio>, este nos permite reproducir

Formatos de audio
Formato MP3
Formato OGG
Formato WAV

Atributos de audio

Controls: Indica si se deben mostrar los controles de reproducción ( play,


stop,volumen).
Autoplay: Indica si el audio inicia automanicamente al cargar la página .
Loop: Reproduccion en bucle, acabar el audio, la reporduccion volverá a
empezar una y otra vez.
Preload: Inicia si el audio se empeiza a cargar cuando el navegador carga la
pagina. Html =”none” en galería de audios.
Muted : sin audio
Src: especidica la url del audio a repeoducir.

Enlace de una pagina donde podrás bajar una canción

http://recursostic.educacion.es/bancoimagenes/web/

Ejemplo

<audio src=”jazz.mp3”></audio>

El atributo autoplay , en cuanto se abre la pagina empieza a sonar

<audio src=”jazz.wav” autoplay ></audio>


Ejemplo 1

<hr>
<audio src="musica/tu..wva" controls autoplay loop>
<p>Tu navegador no implementa el elemento audio</p>
</audio>
<hr>
Ejemplo 2

<audio controls autoplay>


< source src=”tu.mp3” type =” audio/mpeg” />
< source src=”tu.ogg” type =” audio/ogg” />
</audio>

Etiquette de Video

<video width=”400px” height=”200px” controls>


<sourse src=” vecente.mp4” />
<sourse src=” vecente.ogg” />
</video>
Utilización y presentación de Un párrafo.

Fuentes

Existen varias fuentes que usted puede utilizar en ese caso para el ejemplo
usaremos:

Arial rod
Ahoroni tahoma
Batang verdana
Georgia times new roman
Ejemplo:

<P ALIGN="CENTER"><Font face= ”arial” size=50 color= ”TEAL”> SENA


</Font></P>

Alineación

<p align =”left> Izquierda </p>


<p align= “center”> Centrar </p>
<p align=”right”> Drecha </p>
<p align=”justify”> Justificar </p>

También podría gustarte