html basico clase 1. que es html? hypertext markup language (lenguaje de marcado de hipertexto)...

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

http://es.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions

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”

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

•

<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:[email protected]?subject=Hello%20again">

http://www.w3schools.com/

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 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:[email protected]" 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



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 • á á • é é • í í • ó ó • ú ú • ñ ñ • Ñ Ñ

html basico clase 1. que es html? hypertext markup language (lenguaje de marcado de hipertexto)...

Documents