Download - HTML

Transcript
Page 1: HTML

HTMLPor Yamil Lambert

Page 2: HTML

HTMLHyperText Markup Language Lenguaje de marcado para la

elaboración de páginas web.Es un estándar que, en sus diferentes

versiones, define una estructura básica y un código (denominado código HTML) para la definición de contenido de una página web, como texto, imágenes, etc.

Es un estándar a cargo de la W3C

Page 3: HTML

Marcas esencialesEl contenido de una pagina Web debe

estar rodeado por las marcas <html> y </html>

Estas marcas le dicen al navegador Web que el contenido es una pagina HTML.

Las marcas <head> y </head> tienen información sobre la pagina.Las marcas <title> y </title> muestran el titulo de la pagina.

Entre las marcas <body>y </body> se encuentra todo el contenido visible.

Page 4: HTML

Estructura Básica

<html> <head> <title>Mi Primera Página</title> </head> <body> <p>ejemplo1</p> </body> </html>

Page 5: HTML

Texto, Cabeceras, Formato<h1> a <h6>: encabezados o

títulos del documento con diferente relevancia.

<p> bloques de párrafos.<br> Retorno de carro o enter.<pre> texto PREformatedAtributo Aling, Center, justify, left

y right<blockquote> Sangría.

Page 6: HTML

Negrita, Cursiva, Subrayado y Tachado<b>: texto en negrita. Se

recomienda usar la etiqueta <strong>).

<i>: texto en cursiva. Se recomienda usar la etiqueta <em>).

<s>: texto tachado. Se recomienda usar la etiqueta <del>).

<u>: texto subrayado. <center> centrar bloques.

Page 7: HTML

La tilde, Eñe y los caracteres especialesEntidad Numerada o entidad

numerada:◦Formato: &Entidad;◦Formato: &#Num;

Tildes: &aacute;La letra Ñ: &ntilde;&nbsp; espacio en blanco.&pound; signo de libra.&copy; signo de derecho de autor.&reg; Marca Registrada.Otros: &yen; &lt; &gt; http://aprendiendoweb.com/caracteres-

especiales

Page 8: HTML

Listas<ul> Listas NO Ordenas.<ol> Listas Ordenadas.<li> Elemento de lista.<dl> <dt> <dd>, Listas de

definición para términos o conceptos.

Considerar el anidamiento de listas.

Page 9: HTML

La Marca <FONT>Face, tipo de letra, considerar

tipografías estándares.Size, tamaño de la letra, puede

estar comprendido entre 1 y 7 (mayor dimensión cuanto más cercano al 7)

Color, color de la letra en nombre o en valor HEX.

Page 10: HTML

ColoresRGB (en inglés Red, Green, Blue,

en español rojo, verde y azul) es la composición del color en términos de la intensidad de los colores primarios de la luz.

Atributo bgcolor="#Color"El sistema numérico hexadecimal

Page 11: HTML

EnlacesPara crear un enlace es necesario

utilizar la etiqueta de ancla <a> junto con el atributo href, que establecerá la dirección URL a la que apunta el enlace.

Atributos: title y target.Rutas relativas y rutas absolutas para el

atributa href. «../»Enlaces Externos, locales, Recursos y

AnclasEnlaces de correo: mailto

Page 12: HTML

Imágenes<img>: imagen. Requiere del atributo

src, que indica la ruta en la que se encuentra la imagen. Por ejemplo:

<img src="./imágenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner

un atributo alt="texto alternativo".Imagen como enlace: <a

href=”enlace”><img src="imagen” /></a>.

Atributo background de la marca <Body>

Page 13: HTML

Tablas<table>: define una tabla.<tr>: fila de una tabla.<td>: celda de una tabla (debe

estar dentro de una fila).Atributos de Table: width, height,

border, cellpadding, cellspacing, background.

En las celdas: rowspan, colspan, bgcolor.

Page 14: HTML

CSSCascading Style SheetsLenguaje de hojas de estilos

usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas.

Su aplicación más común es dar estilo a páginas webs escritas en lenguaje HTML y XHTML.

Definir dentro del elemento <head>

Page 15: HTML

CSS<style> Para definir un estilo que será

usado con el atributo class; se debe especificar type="text/css".

Para definir estilo con nombre:<style type="text/css">.NombredelEstilo{}

Para redefinir estilo en marcas HTML:<style type="text/css">h1 {}

Atributos a nivel de texto: font-family, font-size y color

Page 16: HTML

CSS con archivos externos<link> para enlazar a un archivo

extrnboAtributos :

◦href="Archivo.css" ◦rel="stylesheet"◦type="text/css"

Archivo externo se recomiendo empezar con @charset "utf-8 ";

Defina los estilos directamente con nombre empezando con ". " o con una marca a redefinir.

Page 17: HTML

FormulariosNos permiten dentro de una página

Web solicitar información al visitante y procesarla.

La marca que define uno es <form>.Atributos : action, method Sentencias de Entrada<INPUT>, Atributos type:

◦ text, number, password, tel, date, email, time, url

Principal Atributo donde se almacena los datos es «Value» 

Page 18: HTML

HTML5<Audio> permite reproducción

de audio sin necesidad de complementos mp3/ogg/wav.◦Propiedades: src, autoplay, loop,

controls.<video> permite reproducción

de video sin necesidad de complementos mp4/ogv/ webm.◦Propiedades: src, poster, autoplay,

loop, controls, type, codecs,