HTML

Prof: Ing José Marval
WEBMASTER
• Un webmaster (contracción de las palabras inglesas web y master) es la
persona responsable de mantenimiento o programación de un sitio web.
• De acuerdo a la definición del Diccionario de Oxford, el webmaster es la

persona responsable por un servidor de Internet, sin embargo en la jerga
informática se puede indicar que el webmaster es el dueño del sitio web o
el encargado de mantener el sitio web habilitado.
• El Día Internacional del webmaster se celebra el 29 de abril, a partir del

año 2008

WEBMASTER
Conocimientos básicos que debe tener un WEBMASTER.
• Conocimiento del Lenguaje de Marcado de Hipertexto (HTML).

• Debe de hacer el uso y aplicación de los estandares propuestos por la W3C
como lo son: XHTML y CSS
• Principios de programación en algún lenguaje para CGI (Perl, PHP, ASP).
• Manipulación de imagenes digitales.

HTML( HiperText Markup Language )
HTML(Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado
predominante para la elaboración de páginas web. Es usado para describir la
estructura y el contenido en forma de texto, así como para complementar el texto
con objetos tales como imágenes.
Breve Historia: Creador : Tim Berners-Lee.
• 1993: 1ra Propuesta HTML 1.0 (Internet Engineering Task Force)

• 1995: 2da Propuesta HTML 2.0 (Internet Engineering Task Force)
• 1997: 3ra Propuesta HTML 3.2 (World Wide Web Consortium)
• 1998: 4ta Propuesta HTML 4.0 (World Wide Web Consortium)
• 1999: 5ta Propuesta HTML 4.1 (World Wide Web Consortium)
• 2010: 2da Propuesta HTML 5.0 (?)

Estructura Básica del documento HTML
<html>
<head>
<TITLE>Nuestra primera pagina</TITLE>
</head>
<body>
<H1>Nuestra primera pagina</H1>
<P>Este es el primer parrafo </P>
<P>Este es el segundo parrafo.</P>
</body>
</html>
Que necesito para crear un documento HTML.

• Lo primero que debes tener claro es qué contenidos va a tener tu página.
• Un navegador web, como por ejemplo internet explorer o el firefox
• Un editor de Html como el block de notas de windows, o uno parecido.
• Hacer las fotos e imágenes que vas a poner y escanearlas ( esto suele llevar bastante
tiempo si no se ha hecho antes)

Etiqueta <HEAD>
Define la cabecera del documento HTML, esta cabecera suele contener información sobre
el documento que no se muestra directamente al usuario. Como por ejemplo el título de la
ventana del navegador.
Dentro de la cabecera <head> </head> podemos encontrar:
• <title>: define el título de la página: < title>Página de Inicio</ title>.
• <link>: para vincular el sitio a hojas de estilo:<link rel="stylesheet" href="/style.css"
type="text/css">
• <style>: para colocar el estilo interno de la página; ya sea usando CSS, u otros lenguajes
similares.
• <script>: para incluir código javascript.
• <meta>: para incluir meta datos:
<meta name="description" content=“Curso presencial de WEBMASTER">
<meta name="keywords" content="educación,curso,webmaster,html,php">

Etiqueta <BODY>
El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde
debemos colocar el contenido de nuestra página: texto, fotos, etc..
Está delimitado por las etiquetas <body> y </body>.

Atributos:
• BGCOLOR parámetro usado para especificar el color de fondo de la página. El color se define como
una terna de números (#rrggbb).
Sintaxis: <BODY BGCOLOR=#0000FF>
• TEXT, parametro usado para definir el color del texto por omisión.
• LINK, VLINK, ALINK, parámetros usados para especificar el color por omision de: texto con enlace,
enlace ya visitado y enlace activo.
• BACKGROUND, parámetro usado para especifica la ruta y nombre de archivo (URL) de la imagen
que será usada como fondo del documento. Esta se verá como mosaico para cubrir toda la ventana
si es pequeña (lo habitual).
• Sintaxis: <BODY BACKGROUND="ruta/archivo.gif">

Formato de textos
Títulos
Los títulos o encabezamientos se emplean al comienzo de una sección.
Las etiquetas que se usan son:
Etiqueta Se ve
<h1> Título </h1> Título


Formato de textos
Estilos de fuentes
Como ves en la tabla es muy sencillo conseguir los efectos deseados, solamente
tienes que colocar el texto entre las etiquetas adecuadas.
Etiqueta Se ve
<B>Texto en Negrita</b> Texto en Negrita

<I>Itálica</i> Itálica
<B><I>Negrita e Itálica</i></b> Negrita e Itálica
<U>Subrayado</u> Subrayado Solo Explorer
<EM>Enfatizado</em> Enfatizado
<STRONG>Fuerte</strong> Fuerte
<BIG>Texto grande</big> Texto grande
<SMALL>Texto pequeño</small> Texto pequeño
<SUB>Subindice</SUB> Subíndice Solo Explorer
<SUP>Superíndice</SUP> Superíndice
Solo Explorer
<BLINK> Texto intermitente</blink> Texto intermitente Solo Netscape
<STRIKE>Texto tachado</STRIKE> Texto tachado

Caracteres Especiales
Á Á
É É
Í Í
Ó Ó
Ú Ú
á á
é é
í í
ó ó
ú ú
Ñ Ñ
ñ ñ

Parrafos y Bloques
Para definir y separar bloques de texto se emplean una serie de etiquetas que definen los párrafos, texto
preformateado o bloques con significado especial como direcciones o citas.
Etiquetas de bloques:
<P> Se utiliza para que los párrafos queden separados por una línea en blanco. Las marcas inicial y
final son <P> y </P>. La etiqueta <P> admite los atributos:
ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify".
<PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el navegador
respetando el formato con el que fue escrito en el fichero fuente HTML.
<ADDRESS> empleada para indicar que un texto representa una dirección o una firma. Generalmente
se presenta en cursiva y tabulado.
<BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha,>, de ese modo se consigue

que el texto se presente con márgenes a ambos lados.

Saltos y Linea Horizontal
<BR> Este elemento sólo tiene marca inicial e indica un salto de línea, es decir un punto y aparte sin
separar el párrafo. Esta etiqueta no tiene su correspondiente de cierre
<HR> Se emplea para representar una línea horizontal. Tampoco tiene pareja de cierre. Se pueden
emplear los atributos
ALIGN="left" , ALIGN="right" , para alinearla a la izquierda o a la derecha. Por defecto aparece centrada
WIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en píxels
COLOR="#0000FF" , para especificar el color

Listas
Listas con viñetas desordenadas
He aquí el ejemplo más sencillo de una de estas listas:
escribimos en html se verá como
<ul>
<li>Primer término de la lista  Primer término de la lista
<li>Segundo término  Segundo término
<li>Tercer término  Tercer término
</ul>
Como ves, la lista se declara con la etiqueta <UL> y finaliza con el cierre de la misma </UL>. También
podemos modificar las viñetas por medio del atributo TYPE= circle, disc o square (círculo, disco o
cuadrado) y añadir sublistas.

Listas
Listas con viñetas ordenadas
Estas listas se caracterizan porque aparecen números o ciertos caracteres que ordenan sus elementos. La
etiqueta usada es <OL> junto con su correspondiente de cierre </OL>. El atributo TYPE toma ahora los
valores 1, a, A, i, I. Un ejemplo de estas listas es el siguiente
<ol type=i>
<li >Primer término de la lista i. Primer término de la lista
<li >Segundo término ii. Segundo término
<li>Tercer término iii. Tercer término
<li>Cuarto iv. Cuarto
<li>Quinto v. Quinto
</ol>

Listas
Listas de definición
Estas listas se forman con el elemento que se define y su definición. Las etiquetas son <DL> y </DL> para la
lista y <dt> y <dd> para los elementos y sus definiciones. Un ejemplo:
<dl>
<dt >Término 1º Término 1º
<dd>Definición del elemento 1º Definición del elemento 1º
<dt>Término 2º Término 2º
<dt>Término 3º Término 3º
</dl>

Ejemplo

Ejemplo
<HTML>
<HEAD>
<TITLE>Mi primer ejemplo</TITLE>
</HEAD>
<BODY>
<H1>Mi primer ejemplo(h1)</H1>
<P>Hola, Bienvenido al curso de WEBMASTER, Este es mi primer ejemplo de HTML.(p)</P>
<H2>Enlaces favoritos:(h2)</H2>
<OL>
<LI>Google </LI>
<LI>SAIT </LI>
<LI>Facebook</LI>
</OL>
<ADDRESS>
José Marval, Curso WEBMASTER, marzo 2002.(addres)
</ADDRESS>
</BODY>
</HTML>

Enlaces
<A HREF="URL"> Texto del enlace</A>
El texto del enlace es lo que se visualizará en el navegador. La URL es la dirección donde apunta el enlace y puede ser de estos
tipos:
Enlace a otro lugar del mismo documento
<A HREF="#inicio"> Ir al Inicio</A>
Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta:
<A NAME="inicio"> </A>
Enlace a otra página local
<a href="pagina2.htm">Ir a pagina2</a>
Enlace a una dirección de Internet
<A HREF="http://www.sait.com.ve">Página principal de S.A.I.T. R.L.</A>
Enlaces usando imágenes
<A HREF=" #inicio"><img src="gifs/imagen.gif"></A>
Enlace con una dirección de correo
<A HREF="mailto: sait@yahoo.es"> sait@yahoo.es </A>
Enlace para descargar un fichero
<A HREF="../zip/imagenes.zip">imagenes.zip</A>

Ejemplo
<OL>
<LI><a href="http://www.google.com">Google</a></LI>
<LI><a href="http://www.sait.com.ve">SAIT</a></LI>
<LI><a href="http://www.facebook.com">Facebook</a></LI>
</OL>

Imagenes
La etiqueta para incluir una imagen es la siguiente:
<IMG SRC="URL"> (no tiene etiqueta de cierre)
donde URL es la dirección de la imagen. La URL puede ser relativa o absoluta.
Atributos de IMG
Los atributos de la imagen pueden ser los siguientes:
ALT="Texto que aparece al situar el cursor sobre la imagen“.
ALIGN= Nos indica la posición de la imagen respecto del texto.
TOP, MIDDLE, BOTTOM, LEFT, RIGHT.
WIDTH, HEIGTH Indican la anchura y altura de la imagen en píxels.
BORDER Añade un borde.
HSPACE , VSPACE Especifican el espacio horizontal y vertical que separa la imagen del texto que la
rodea.

Insertar audio y video
Etiquetas <embed> y <object>
<embed name="mi_video" src="archivo_de_video.avi"
type="application/x-mplayer2"
width="340" height="335"
showcontrols="1"
showstatusbar="1"
loop="False"
autoplay="true"
enablecontextmenu="true"
displaysize="0"
pluginspage="http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/">
</embed>
<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" width="0" height="0" >
<object data="mi_archivo.wav" type="sound/wav" autostart="false" width="200" height="40">

</object>
<object data="t-rex.wav" type="audio/mp3" autostart="false" width="200" height="40">

</object>

Tablas
Las tablas se usan con profusión en las páginas Web, muchas veces debido a que son el único
instrumento con el que se cuenta, para asegurarse que las cosas estarán en su sitio. Para definir una
tabla se usan las etiquetas:
<TABLE> y </TABLE> son las etiquetas donde está contenida la tabla
<TR> y </TR> son las etiquetas que indican el comienzo y fin de una fila (<th> y </th> si es una fila de
cabecera)
<TD> y </TD> señalan una celda.
La tabla se va definiendo declarando una fila y a continuación las celdas que contiene esa fila, luego otra
fila y sus celadas, etc. No es necesario que todas las filas contengan el mismo número de celdas.
La tabla (2x2) más sencilla que podemos hacer es la siguiente
<TABLE >
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>

Tablas
Atributos de la etiqueta TABLE
Todos los atributos son opcionales
BORDER="4". Indica el tamaño del borde en píxels, en este caso 4. Si no se indica nada carece de borde
WIDTH="5" o WIDTH="50%". Es el ancho de la tabla, puede especificarse en valor absoluto (5 píxels) o
como un porcentaje (50% del ancho disponible)
CELLSPACING="2". Es el espacio entre las celdas, por defecto es 2
CELLPADDING="5". Es el espacio entre el contenido de las celdas y el borde de las mismas, por defecto
es 1
ALIGN=" left", "right", "center". Alinea la tabla a la izquierda , derecha o en el centro.
<TABLE BORDER="3" CELLSPACING="5"

WIDTH="150">
<TR>
<TD>1 </TD> <TD> 2 </TD>
</TR> <TR>
<TD>3 </TD> <TD> 4</TD>
</TR>
</TABLE>

Tablas
Atributos de la etiqueta TD
WIDTH="30". Ancho de toda la fila o celda. También se puede dar en %

ALIGN=" left", "right", "center". Alinea el contenido a la izquierda, derecha o centro
VALIGN="top" , "middle" o "bottom". Alinea el contenido verticalmente arriba, en medio o abajo
BGCOLOR="#AACCEE". Pone un fondo del color especificado a la celda o fila
COLSPAN=3. Especifica el número de columnas que abarca la fila
ROWSPAN=2. Especifica el número de filas que abarca la columna

Formularios
<FORM ACTION="mailto:tulogin@tuservidor.pntic.mec.es" METHOD="post" ENCTYPE="text/plain">
...
</FORM>
Entre las etiquetas anteriores deben ir todas las etiquetas que generan los botones, casillas, campos,
etc. y también todas las etiquetas de HTML que permitan dar forma al formulario (tablas, colores, etc)
El atributo ACTION nos indica la dirección de correo a la cual se van a enviar los datos del formulario.
Así pues debes sustituir tulogin@tuservidor.pntic.mec.es por tu dirección de correo.
Los atributos METHOD y ENCTYPE indican cómo se transferirán los datos (post, correo) y la
codificación del texto

Formularios
Entrada de texto de una línea
<INPUT TYPE="text" SIZE="25" NAME="Nombre">
Esta etiqueta produce un campo similar al que se muestra debajo, para introducir
texto (en este caso el nombre), de una longitud de 25 caracteres.
Cuando nos llegue al buzón de correo el texto de este campo aparecerá asociado a
la palabra que pongamos en NAME (en este caso a Nombre).
Puede incluirse otro atributo opcional VALUE="Pon aquí tu nombre", en este caso
aparecería Pon aquí tu nombre dentro del campo

Formularios
Entrada de texto de varias líneas
<TEXTAREA NAME="comentario" ROWS=3 COLS=50>
Introduzca aquí sus comentarios
</TEXTAREA>
Este código produciría el siguiente resultado:

Formularios
Lista de opciones o menú desplegable
<SELECT NAME="estudios">
<OPTION SELECTED> ESO
<OPTION> Bachillerato
<OPTION> Ciclos Formativos
<OPTION> Garantía Social
</SELECT>
Que produciría un campo similar al siguiente:
donde ESO aparece seleccionada por defecto.

Una variante de las listas de opciones son los menús con barras de desplazamiento
<SELECT NAME="americanos" SIZE=6> <OPTION>España
<OPTION>México
<OPTION>Argentina
<OPTION>Costa Rica
<OPTION>Panamá
<OPTION>Belice
<OPTION>Honduras
<OPTION>Bolivia
<OPTION>Chile
<OPTION>Paraguay
</SELECT>
que da como resultado una entrada del tipo
Formularios
Casillas de verificación o Checkboxes
< INPUT TYPE="checkbox" NAME="nivel" VALUE="eso"> ESO <BR>
< INPUT TYPE="checkbox" NAME="nivel" VALUE="bachiller"> Bachillerato <BR>
< INPUT TYPE="checkbox" NAME="nivel" VALUE="primaria"> Primaria <BR
Nos permite elegir entre varias posibilidades una o más casillas. Recibiremos como dato el valor de la
casilla señalada, asociada en este caso a nivel. Produciría un resultado como el siguiente:

Formularios
Botones de radio o de opción
< INPUT TYPE="radio" NAME="sexo" VALUE="hombre" CHECKED> Hombre
< INPUT TYPE="radio" NAME="sexo" VALUE="mujer" > Mujer
Similar al anterior, con la diferencia de que solo nos permite seleccionar una de las
opciones mostradas, se utiliza para mostrar opciones excluyentes entre si. Luce como:

Formularios
Botones envío y borrado
Se utilizan las siguientes etiquetas para hacer los botones de Enviar y Borrar
< INPUT TYPE="submit" VALUE="Enviar">
< INPUT TYPE="reset" VALUE="Borrar">
Producirán uno botones como estos:
Cuando presionemos "Enviar" se transferirá el contenido de los campos a la

dirección de correo indicada, por lo que necesitamos estar conectados a Internet
para comprobarlo.
Si presionamos Borrar se borrará el contenido de los campos

Etiqueta <iframe> (Marco)
<iframe src="pagina_fuente.html" width=290 height=250>Texto para
cuando el navegador no conoce la etiqueta iframe</iframe>
Atributos:
• src: Para indicar la página web que se mostrará en el espacio del frame flotante.
• width: Para definir la anchura del recuadro del iframe
• height: Para definir la altura del iframe
• name: Para especificar el nombre del frame, que podemos utilizar luego para referirnos a él con el target
de los links.
• frameborder: para definir si queremos o no que haya un borde en el frame. Los valores posibles son 0 |
1.
• scrolling: indica si se quiere que aparezcan barras de desplazamiento para ver los contenidos del
iframe completo, Los valores posibles son: yes | no | auto.
• marginwidth: Para definir el margen a izquierda y derecha que debe tener la página que va dentro del
iframe.
• marginheight: lo mismo que marginwidth, pero en este caso para el tamaño del margen por la parte de
arriba y abajo.

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

Prof: Ing José Marval

• De acuerdo a la definición del Diccionario de Oxford, el webmaster es la

• El Día Internacional del webmaster se celebra el 29 de abril, a partir del

Prof: Ing José Marval

• Conocimiento del Lenguaje de Marcado de Hipertexto (HTML).

Prof: Ing José Marval

Breve Historia: Creador : Tim Berners-Lee.

• 1993: 1ra Propuesta HTML 1.0 (Internet Engineering Task Force)

Prof: Ing José Marval

Que necesito para crear un documento HTML.

Prof: Ing José Marval

Prof: Ing José Marval

Está delimitado por las etiquetas <body> y </body>.

Prof: Ing José Marval

<h1> Título </h1> Título

<h6> Título </h6> Título

Prof: Ing José Marval

<B>Texto en Negrita</b> Texto en Negrita

Prof: Ing José Marval

Prof: Ing José Marval

<BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha,>, de ese modo se consigue

Prof: Ing José Marval

Prof: Ing José Marval

escribimos en html se verá como

Prof: Ing José Marval

escribimos en html se verá como

Prof: Ing José Marval

escribimos en html se verá como

Prof: Ing José Marval

Prof: Ing José Marval

Prof: Ing José Marval

Prof: Ing José Marval

Prof: Ing José Marval

Prof: Ing José Marval

<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" width="0" height="0" >

<object data="mi_archivo.wav" type="sound/wav" autostart="false" width="200" height="40">

<object data="t-rex.wav" type="audio/mp3" autostart="false" width="200" height="40">

Prof: Ing José Marval

Prof: Ing José Marval

<TABLE BORDER="3" CELLSPACING="5"

Prof: Ing José Marval

WIDTH="30". Ancho de toda la fila o celda. También se puede dar en %

Prof: Ing José Marval

Prof: Ing José Marval

Prof: Ing José Marval

Prof: Ing José Marval

donde ESO aparece seleccionada por defecto.

Prof: Ing José Marval

Prof: Ing José Marval

Cuando presionemos "Enviar" se transferirá el contenido de los campos a la

Prof: Ing José Marval

You might also like