Aqui tienen todos las etiquetas con sus atributos –

http://www.w3schools.com/tags/default.asp

Estructura básica

<html>
<body>

<h1>My First Heading

<p>My first paragraph.</p>

</body>
</html>

Títulos de texto

<h1>This is a heading</h1>
<h2>This is a heading
<h3>This is a heading</h3>

párrafos

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<P> Se utiliza para que los párrafos queden separados por una línea en blanco. Si solo quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final son <P></P>. La etiqueta <P> admite los atributos:

ALIGN=”left” , ALIGN=”right” , ALIGN=”center” y ALIGN=”justify” para alinearlo a la izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto está alineado a la izquierda.

Formatos (para texto)

Etiqueta Se ve
  • Texto en Negrita
  • <I>Itálica</i>
  • Negrita e Itálica
  • <U>Subrayado</u>
  • <EM>Enfatizado</em>
  • <STRONG>Fuerte</strong>
  • <CODE>Code Texto</code>
  • <CITE> Citation Text</cite>
  • <KBD>Keyboard Text</kbd>
  • <SAMP>Sample Text</samp>
  • <TT>Teletype Text</tt>
  • <VAR>Variable Element Text</var>
  • Texto grande
  • Texto pequeño
  • <SUB>Subindice</SUB>
  • <SUP>Superíndice</SUP>
  • Texto intermitente
  • Texto tachado
  • Texto en Negrita
  • Itálica
  • Negrita e Itálica
  • Subrayado Solo Explorer
  • Enfatizado
  • Fuerte
  • Code Texto
  • Citation Text
  • Keyboard Text
  • Sample Text
  • Teletype Text
  • Variable Element Text
  • Texto grande
  • Texto pequeño
  • Subíndice Solo Explorer
  • Superíndice Solo Explorer
  • Texto intermitente Solo Netscape
  • Texto tachado

Vínculos

<a href=”http://www.w3schools.com”>This is a link</a>
<a href=”http://www.w3schools.com/&#8221; target=”_blank”>Visit W3Schools!</a>
—-
<a name=”tips”>Useful Tips Section</a>
<a href=”#tips”>Visit the Useful Tips Section</a>
—-
<a href=”http://www.w3schools.com/html_links.htm#tips”&gt;
Visit the Useful Tips Section</a>
Vinculo Mail

<html>
<body>

<p>
This is an email link:
<a href=”mailto:someone@example.com?Subject=Hello%20again”>
Send Mail</a>
</p>

<p>
Note: Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>

</body>
</html>

Imágenes
<img src=”w3schools.jpg” alt=”Big Boat” width=”104″ height=”142″ />

<html>
<body>

<p>
<img src=”smiley.gif” alt=”Smiley face” align=”left” width=”32″ height=”32″ />
A paragraph with an image. The align attribute of the image is set to “left”. The image will float to the left of this text.
</p>

<p>
<img src=”smiley.gif” alt=”Smiley face” align=”right” width=”32″ height=”32″ />
A paragraph with an image. The align attribute of the image is set to “right”. The image will float to the right of this text.
</p>

</body>
</html>

Imágenes con zonas de vinculo

<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap” />

<map name=”planetmap”>
<area shape=”rect” coords=”0,0,82,126″ alt=”Sun” href=”sun.htm” />
<area shape=”circle” coords=”90,58,3″ alt=”Mercury” href=”mercur.htm” />
<area shape=”circle” coords=”124,58,8″ alt=”Venus” href=”venus.htm” />
</map>

</body>
</html>

Atributos
– siempre entre comillas
– en minúscula
No se usa ya la etiqueta font (
<p>
arial” color=”red”>
This paragraph is in Arial, size 5, and in red text color.
</font>
</p><p>
verdana” color=”blue”>
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>
)
Usando CSS – Basico

<html>
PowderBlue;”>

<h1>Look! Styles and colors</h1>

verdana;color:red;”>

This text is in Verdana and red

<p style=”font-family:times;color:green;”>
This text is in Times and green</p>

30px;”>This text is 30 pixels high

</body>
</html>

CSS se añade en 3 formas

  • Archivos css (*.css)
  • Usando el elemento <style> dentro del
  • Usando el atributo style en elemento HTML
<html><body style=”background-color:yellow;”>
<h2 style=”background-color:red;”>This is a heading</h2>
<p style=”background-color:green;”>This is a paragraph.</p>
</body></html>
————————————————————————————-
<html><body>

verdana;”>A heading

20px;”>A paragraph.

</body>

</html>

————————————————————————————–
Tablas
<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Cabeceras de tablas
<table border=”1″>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Atributo para tablas

<html>
<body>

<p>
<b>Note:</b>
If you see no frames/borders around the tables below, your browser does not support
the “frame” attribute.
</p>

<h4>With frame=”border”:</h4>
<table frame=”border”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame=”box”:</h4>
<table frame=”box”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame=”void”:</h4>
<table frame=”void”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame=”above”:</h4>
<table frame=”above”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame=”below”:</h4>
<table frame=”below”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame=”hsides”:</h4>
<table frame=”hsides”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame=”vsides”:</h4>
<table frame=”vsides”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame=”lhs”:</h4>
<table frame=”lhs”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

<h4>With frame=”rhs”:</h4>
<table frame=”rhs”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

</body>
</html>

Formularios
<form>
First name: <input type=”text” name=”firstname” />Last name:
</form>
<form>
Password: <input type=”password” name=”pwd” />
</form>
<form>
<input type=”radio” name=”sex” value=”male” /> Male Female
</form>
<form>
<input type=”checkbox” name=”vehicle” value=”Bike” /> I have a bike I have a car
——– escogiendo uno o mas !
input” action=”html_form_action.asp” method=”get”>
Username: <input type=”text” name=”user” />
<input type=”submit” value=”Submit” />
</form>
Frameset – no se suele usar mas !

<html>

<frameset cols=”25%,50%,25%”>

<frame src=”frame_a.htm” />
<frame src=”frame_b.htm” />
<frame src=”frame_c.htm” />

 

</html>

<html>

<frameset rows=”25%,50%,25%”>

<frame src=”frame_a.htm” />
<frame src=”frame_b.htm” />
<frame src=”frame_c.htm” />

</frameset>

</html>

Iframe

Colores en HTML
Disposición de pagina
en tabla – 
<html>
<body><table width=”500″ border=”0″>
<tr>
FFA500;”>
<h1>Main Title of Web Page</h1>
</td>
</tr><tr valign=”top”>
FFD700;width:100px;text-align:top;”>
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
EEEEEE;height:200px;width:400px;text-align:top;”>
Content goes here</td>
</tr>

<tr>
FFA500;text-align:center;”>
Copyright © 2011 W3Schools.com</td>
</tr>
</table>

</body>
</html>

En DIV – se usa para agrupar varios elementos de HTML
<html>
<body><div id=”container” style=”width:500px”>

<h1 style=”margin-bottom:0;”>Main Title of Web Page</h1></div>

<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

EEEEEE;height:200px;width:400px;float:left;”>

Content goes here</div>

Copyright © 2011 W3Schools.com</div>

</div>

</body>
</html>

Elementos META – dentro del HEAD !
Description

<html>
<head>
<meta name=”author” content=”Hege Refsnes” />
<meta name=”revised” content=”2010/06/20″ />
</head>

<body>
<p>The meta elements on this page identifies the author and the revise date.</p>
</body>
</html>

Keywords

<html>
<head>
<meta name=”description” content=”Free Web tutorials on HTML, CSS, XML”>
<meta name=”keywords” content=”HTML, CSS, XML”>
</head>

<body>

The meta elements on this page defines a description of the page, and its keywords.
</body>
</html>

Rdirect

<html>
<head>
url=http://www.w3schools.com” />
</head>

<body>
<h1>Sorry! We have moved!</h1>
<h2>The new URL is: <a href=”http://www.w3schools.com”>http://www.w3schools.com</a></h2&gt;

You will be redirected to the new address in five seconds.
<p>If you see this message for more than 5 seconds, please click on the link above!</p>
</body>
</html>

Caracteres especiales

Result Description Entity Name Entity Number
non-breaking space &nbsp;
< less than &lt; <
> greater than &gt; >
& ampersand &amp; &
¢ cent &cent; ¢
£ pound &pound; £
¥ yen &yen; ¥
euro &euro;
§ section &sect; §
© copyright &copy; ©
® registered trademark &reg; ®
trademark &trade;
Música

<!–DOCTYPE HTML>
<html>
<body>

<audio controls=”controls”>
mpeg” />
<source src=”song.ogg” type=”audio/ogg” />
http://song.mp3
</audio>

</body>
</html>

Música con HTML5

<!–DOCTYPE HTML>
<html>
<body>

<audio controls=”controls”>
<source src=”song.ogg” type=”audio/ogg” />
mpeg” />
Your browser does not support this audio
</audio>

</body>
</html>

Video con HTML5

<!–DOCTYPE HTML>
<html>
<body>

<video width=”320″ height=”240″ controls=”controls”>
mp4″ type=”video/mp4″ />
<source src=”movie.ogg” type=”video/ogg” />
webm” type=”video/webm” />
Your browser does not support video
</video>

</body>
</html>

otra forma para Video –

<video width=”320″ height=”240″ controls=”controls”>
<source src=”movie.mp4″ type=”video/mp4″ />
<source src=”movie.ogg” type=”video/ogg” />
<source src=”movie.webm” type=”video/webm” />
<object data=”movie.mp4″ width=”320″ height=”240″>
http://movie.swf
Your browser does not support video
</embed>
</object>
</video>

 

Descargar “handbrake” aqui – http://handbrake.fr/downloads.php