Post on 03-Feb-2016
HTMLBASICO
CLASE 1
QUE ES HTML?
• HyperText Markup Language (Lenguaje de Marcado de Hipertexto)
• Etiquetas con Corchetes Angulares (<>)• Desciende del SGML (Standard Generalized
Markup Language o "Lenguaje de Marcado Generalizado")
• tipo de MIME text/html
Marcado HTML
• ELEMENTOS– etiqueta de inicio (p.ej. <nombre-de-elemento>) – Etiqueta de cierre (p.ej. </nombre-de-elemento>)– <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>
• ATRIBUTOS
DOCTYPES
• 4.01 STRICT <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> (ni font ni frameset)
• 4.01 TRANSITIONAL <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">(incluye font pero no framesets)
• 4.01 FRAMESET <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><HTML> <HEAD> <TITLE>Mi primera pagina</TITLE> </HEAD> <BODY> <CENTER><H1>Mi Primera pagina</H1></CENTER> <HR> <P>Esta es mi primera pagina HTML. Por el momento solo se muestra unas cuantas cosas dentro de poco pondre aqui muchas cosas interesantes. </P></BODY> </HTML>
<HTML></HTML>
• dir=“rtl” o dir=“ltr”• lang=“es”
<HEAD></HEAD>
• <TITLE></TITLE>• <base target="_blank">• <meta name="description“ content="HTML
examples">• <meta name="keywords“ content="HTML,
DHTML, CSS, XML, XHTML, JavaScript, VBScript">• <link rel="stylesheet" type="text/css"
href="theme.css" />
<TITLE></TITLE>
<BODY></BODY>
• <body background="background.jpg">• <body style="background-color:yellow;“ >
PARAGRAPH
• <P>PARRAFO 1</P>• <P>PARRAFO 2</P>
Formato del texto
• <b></b>• <i></i>• <u></u>• <small></small>• <sub></sub>• <sup></sup>• <bdo dir="rtl">Here is some Hebrew text</bdo> (ltr)• <del>twenty</del>
PROBLEMAS CON UN POEMA
• <PRE></PRE>
HEADINGS
• <H1>GRANDE</H1>• <H2>MENOS GRANDE</H2>• <H3>MEDIANO</H3>• <H4>MEDIANO CHICO</H4>• <H5>CHICO</H5>• <H6>MUY CHICO</H6>
SALTOS DE LINEA
• <br />• <hr />
COMENTARIOS
• <!--This comment will not be displayed-->
<IMG />• <img src="constr4.gif" width="144" height="50" />• <img
src="http://www.w3schools.com/images/w3schools_green.jpg" width="104" height="142" />
• <img src="hackanm.gif" align="left" width="48" height="48" />• <a href="default.htm"><img src="smiley.gif" alt="HTML tutorial"
width="32" height="32"/></a>
<A HREF=“”></A>• This a link to <a href="peter.html">Peter's page</a>• <a href="../mary.html">Mary's page</a>• <a href="friends/sue.html">Sue's page</a>• <a href="../college/friends/john.html">John's page</a>• This is a link to <a href="http://www.w3.org/">W3C</a>.• <a href="/"><img src="logo.gif" alt="home page"></a>• Pagina Nueva <a href="lastpage.htm" target="_blank">Last Page</a> • Misma Pagina
– <a href="#C4">See also Chapter 4.</a>– <h2><a name="C4">Chapter 4</a>
• <a href=http://www.w3schools.com/ target="_top">Click here!</a>• <a href="mailto:someone@microsoft.com?subject=Hello%20again">
imagemap<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>
---------------------------------Para ver las cordenadas de la imagen<a href="tryhtml_ismap.htm"><img src="planets.gif“ ismap width="146" height="126"></a>
LISTAS
• <UL></UL>– <ul type="disc">– <ul type="circle">
• <OL></OL>– <ol type="A">– <ol type="a">– <ol type="I">– <ol type=“i">
• <LI>
LISTAS ENLAZADAS(cambian solos los iconos)
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>
<DIV></DIV>
• <div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p></div>
<TABLE></TABLE>
• <TABLE>• <TR> <TD>1</TD> <TD>2</TD> </TR>• <TR> <TD>3</TD> <TD>4</TD> </TR>• </TABLE>
<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>
Row1, cell1 Row1,cell2
Row2,cell1 Row2,cell2
Cabeceras<table border="1">
<tr><th>Heading</th><th>Another Heading</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>
Heading Another Heading
Row1, cell1 Row1,cell2
Row2,cell1 Row2,cell2
colspan y rowspan
<table border="1"><tr> <th>Name</th> <th colspan="2">Telephone</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table>
Name TelephoneBill Gates 555 77 854 555 77 855
colspan y rowspan<table border="1"><tr> <th>First Name:</th> <td>Bill Gates</td></tr><tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td></tr><tr> <td>555 77 855</td></tr></table>
First Name: Bill Gates
Telephone:555 77 854555 77 855
<table border="1" bgcolor="red"><tr> <td>First</td> <td>Row</td></tr> <tr> <td>Second</td> <td>Row</td></tr></table>
First Row
Second Row
<table border="1" bgcolor="red"><tr> <td bgcolor=“green">First</td> <td bgcolor=“blue">Row</td></tr> <tr> <td bgcolor=“red">Second</td> <td bgcolor=“yellow">Row</td></tr></table>
First Row
Second Row
Alinear contenido<table width="400" border="1"> <tr> <th align="left">Money spent on....</th> <th align="right">January</th></tr> <tr> <td align="left">Clothes</td> <td align="right">$241.10</td></tr> <tr> <td align="left">Make-Up</td> <td align="right">$30.00</td></tr> <tr> <td align="left">Food</td> <td align="right">$730.40</td></tr> <tr> <th align="left">Sum</th> <th align="right">$1001.50</th></tr></table>
Money spent on.... January
Clothes $241.10Make-Up $30.00Food $730.40Sum $1001.50
WIDTH
<table border="1" WIDTH="90%"><tr> <td> First</td> <td>Row</td></tr> <tr> <td> Second</td> <td>Row</td></tr></table>
First RowSecond Row
WIDTH
<table border="1" WIDTH=“70%"><tr> <td> First</td> <td>Row</td></tr> <tr> <td> Second</td> <td>Row</td></tr></table>
First RowSecond Row
WIDTH
<table border="1" WIDTH=“70%">
<tr> <td WIDTH=“70%”> First</td> <td>Row</td></tr> <tr> <td> Second</td> <td>Row</td></tr></table>
First RowSecond Row
WIDTH
• FIJOS (WIDTH=“150”)• PORCENTAJE (WIDTH=“90%”)
FORMULARIOS
<form>.input elements
</form>
FORMULARIOS
<form>First name:<input type="text" name="firstname" /><br />Last name:<input type="text" name="lastname" />
</form>
FORMULARIOS<form>
<input type="radio" name="sex" value="male" /> Male<br /><input type="radio" name="sex" value="female" /> Female
</form>
FORMULARIOS
<form>I have a bike:<input type="checkbox" name="vehicle" value="Bike" /><br />I have a car:<input type="checkbox" name="vehicle" value="Car" /><br />I have an airplane:<input type="checkbox" name="vehicle" value="Airplane" />
</form>
FORMULARIOS
<form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select></form>
FORMULARIOS
<form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected="selected">Fiat</option><option value="audi">Audi</option></select></form>
FORMULARIOS
<form action=""><input type="button" value=“boton1!"></form>
FORMULARIOS
<form action=""><textarea rows="10" cols="30">The cat was playing in the garden.</textarea></form>
FORMULARIOS
<fieldset><legend>Health information:</legend><form action="">Height <input type="text" size="3">Weight <input type="text" size="3"></form></fieldset>
FORMULARIOS<form name="input" action="html_form_submit.asp" method="get">
Username:<input type="text" name="user" /><input type="submit" value="Submit" />
</form>
FORMULARIOS<form action="MAILTO:andres_jara_werchau@hotmail.com" method="post"
enctype="text/plain">
Nombre:<br /><input type="text" name="name" value=“nombre" /><br />Mail:<br /><input type="text" name="mail" value=“sumail" /><br />comentario:<br /><input type="text" name="comment" value=“comentario” size="40" /><br /><br /><input type="submit" value=“Enviar"><input type="reset" value=“Limpiar">
</form>
FRAMES
<HTML> <HEAD><TITLE> Título de la página </TITLE></HEAD>
<FRAMESET ROWS=75,*> <FRAME SRC="frames1.htm" > <FRAME SRC="frames2.htm" > </FRAMESET>
<NOFRAMES> <BODY> Lo siento,su navegador no soporta frames. Pulse <a
href="frames1.htm>aquí </A> para acceder a los contenidos de estas páginas. </BODY>
</NOFRAMES> </HTML>
FRAMESContenido del frame1.htm
Contenido del frame2.htm
FRAMES
<FRAMESET COLS=20%,*>
<FRAME SRC="frames1.htm">
<FRAMESET ROWS=20%,*> <FRAME SRC="frames2.htm"> <FRAME SRC="frames3.htm"> </FRAMESET>
</FRAMESET>
FRAMESContenido del frame1.htm
Contenido del frame2.htm
Contenido del frame3.htm
FRAMES
<frameset rows="50%,50%">
<frame src="frame_a.htm“ NAME=“titulo”>
<frameset cols="25%,75%"><frame src="frame_b.htm“ NAME=“menu”><frame src="frame_c.htm“ NAME=“principal”></frameset>
</frameset>
FRAMESFrame A
Frame B Frame C
FRAMES
• TARGET=_top, hace que la página se cargue en la ventana completa del navegador.
• TARGET=_self, hace que la página se cargue en la misma ventana del frame actual.
• TARGET=_parent, hace que la página se cargue en el frame "padre", del que desciende el actual
• TARGET=_blank, hace que la página se cargue en una nueva ventana.
• TARGET=nombre, hace que la página se cargue en el frame llamado nombre. Si no existe se carga en una ventana nueva
FRAMES TARGET=_topFrame A
Frame B Frame C
LINK con Target=“_top”
FRAMES TARGET=_selfFrame A
Frame B Frame C
LINK con Target=“_self”
FRAMES TARGET=_parentFrame A
Frame B Frame C
LINK con Target=“_parent”
FRAMES TARGET=tituloFrame A
Frame B Frame C
LINK con Target=“titulo”
• COLS=*,5* dos columnas, la segunda cinco veces mayor que la primera
• COLS=150,*,150 tres columnas, la primera y tercera de 150 píxels, la segunda ocupa el resto.
• ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.
ATRIBUTOS DE FRAME TAG
• SCROLLING= yes, no , auto . Indica si el frame llevará siempre, nunca o cuando lo necesite, barra de deslizamiento vertical
• BORDERCOLOR="color" . Indica el color del borde • MARGINWIDTH=n . Indica el margen horizontal, tanto
derecho como izquierdo, en píxels• MARGINHEIGHT=n . Indica el margen vertical, tanto
superior como inferior, en píxels• NORESIZE . Indica que el frame no se puede redimensionar.
Si no se pone este atributo colocando el cursor en el borde del frame, permitiría su deslizamiento
ATRIBUTO FRAMESET
• FRAMEBORDER=yes, no
IFRAMES
<iframe src =“iframe1.htm" width=“80%" height="300"> <p>Your browser does not support iframes.</p></iframe>
Contenido Pagina contenedora
Contenido iframe1.htm
IFRAME PROPIEDADES
• SRC• WIDTH• SCROLLING• HEIGHT• NAME• CLASS • ID• FRAMEBORDER (0 o 1)
SCRIPTS
HOJAS DE ESTILO
CARACTERES ESPECIALES
• Caracter Entidad HTML • á á • é é • í í • ó ó • ú ú • ñ ñ • Ñ Ñ