Scribd
Cargar
58 vistas40 páginas

HTML

El documento habla sobre HTML y proporciona instrucciones básicas sobre este lenguaje de marcado. Explica elementos como etiquetas, texto y cómo crear páginas web sin necesidad de programar.

Cargado por

Jair Valenz
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
58 vistas40 páginas

HTML

El documento habla sobre HTML y proporciona instrucciones básicas sobre este lenguaje de marcado. Explica elementos como etiquetas, texto y cómo crear páginas web sin necesidad de programar.

Cargado por

Jair Valenz
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 40

HTML

V BIMESTRE
Unidad 1. HTML
 El lenguaje de formato denominado Hiper Text Markup Lenguage
o HTML, es muy semejante a los que se utilizan en los
procesadores de texto.

 Característica de HTML WYSIWYG, What You See Is What You


Get; lo que ves es lo que obtienes, es decir que si un texto se ve
mas grande que otro de esa manera se imprimirá.
Como crear código HTML
 Con cualquier procesador de texto que tenga la capacidad de
guardar el documento como ASCII, Edit del MS-DOS, el Bloc de
notas de Windows, Teach Text de Macintosh.
No se necesita saber programar
 Construir una pagina web con las herramientas que existen
actualmente, no es cosa difícil; sin embargo, como todo lo nuevo,
al principio te parecerá un poco complejo.

 C:\Users\Ecasystem\Pictures\clase.html
Instrucciones básicas del lenguaje HTML
 Una pagina WEB se estructura en dos partes: el encabezado,
donde se coloca el título, y el cuerpo, en la cual se insertan los
párrafos, tablas, imágenes, y demás elementos multimedia.

ENCABEZADO CUERPO
SINTAXIS FUNCIÓN
Indica al navegador que el documento
<html> contiene información codificada en
lenguaje HTML.
<head> Indica el inicio del documento.
Identifica el principio y el final del título
<title>Título de la página</title> de la página.
</head> Fin del encabezado.

<body> Marca el inicio del cuerpo de la página

<pre>Texto</pre> Inserta un párrafo de texto preformateado.

Inserta un objeto con el nombre:


<img src=“imagen.gif”> imagen.gif.
<br> Salto de línea o un nuevo párrafo.
<hr> Inserta una línea horizontal.

</body> Marca el fin del cuerpo de la página.

</html> Marca el fin del código HTML.


Observa
 Que el código HTML costa de elementos de apertura <> y de
cierre, a los cuales les antecede una diagonal </>. Una página
siempre abre con <html> y cierra con </html>; la cabeza es la
parte entre <head> y </head> (esta parte es de información, por lo
que nunca se presenta en la pantalla del navegador).

 Por ultimo, el cuerpo se inserta entre <body> y </body> y es la


parte que se ve en la pantalla del navegador.
Unidad 2. Etiquetas
 La etiqueta de comienzo está delimitada por los caracteres < y >.
Está compuesta por el identificador o nombre de la etiqueta, y
puede contener una serie de atributos opcionales que permiten
añadir ciertas propiedades. Su sintaxis
es: <identificador atributo1 atributo2 ...>

 Los atributos de la etiqueta de comienzo siguen una sintaxis


predefinida y pueden tomar cualquier valor propio del usuario,
o valores HTML predefinidos.
 La etiqueta de final está delimitada por los caracteres </ y >. Está
compuesta por el identificador o nombre de la etiqueta, y no
contiene atributos. Su sintaxis es:</identificador>

 Cada uno de los elementos de la página se encontrará entre una


etiqueta de comienzo y su correspondiente etiqueta de cierre, a
excepción de algunos elementos que no necesitan etiqueta de
cierre.

 También es posible anidar etiquetas, es decir, insertar etiquetas


entre otras etiquetas de comienzo y de cierre.

 A continuación tenemos un ejemplo en el que tenemos la


etiqueta <font..> anidada dentro de la etiqueta <p..>.
Ejemplo
 <p align="center"><font color="#993366" size="4" face="C
omic Sans MS, Arial, MS Sans Serif">Bienvenidos a mi pagina
personal de </font></p>

 Rojo: identificador.

 Azul: Atributos 1, 2 ..

 Café: Valores HTML predefinidos.

 Verde: Valor propio del usuario.


Códigos nuevos o Etiquetas
 <body bgcolor="#FFCC99">
<font color="#CC3300" size="5">Hola, estoy haciendo
pruebas.</font>

 El color de fondo puede establecerse a través del


atributo bgcolor, al que es posible asignarle un color representado
en hexadecimal o por un nombre predefinido.

 <body bgcolor="#0000FF">
 <body bgcolor="blue">
Tabla de colores Hexadecimales
Color Hexadecimal Nombre
#FFFFFF white
  #000000 black
#000080 navy
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia
#FFFF00 yellow
Imagen de fondo
 Puede establecerse a través del atributo background, indicando la
ruta en la que se encuentra la imagen.

 Por ejemplo, para hacer que la imagen de fondo de una página sea
la imagen fondo.gif, que se encuentra en el mismo directorio en el
que se encuentra guardada la página, tendremos que escribir:

 <body background="fondo.gif">
Cuerpo fondo Imagen
 En el caso de que la imagen no se encuentre en el mismo
directorio que la página, y se encuentre dentro de la
carpeta imagenes, que sí se encuentra en el mismo directorio que
la página, tendremos que escribir:

 <body background="imagenes/fondo.gif">

 A través de la etiqueta <body> también es posible establecer el


color del texto de la página a través del atributo text.

 <body text="#FF0000“>
Unidad 3. Editar texto
 Entre el borde de la ventana y el contenido de la página existe un
margen, cuyo tamaño en píxeles puede modificarse mediante los
atributos leftmargin (margen izquierdo) y topmargin (margen
superior). marginwidth (anchura del margen)
y marginheight (altura del margen).

 <body leftmargin="20" topmargin="0" marginwidth="20" 
marginheight="0" >
El texto caracteres especiales y espacios en
blanco
Carácter Representación Carácter Representación
< &lt; ñ &ntilde;
> &gt; Ñ &Ntilde;
á &aacute; ™ &#153;
Á &Aacute; € &euro;
é &eacute; ç &ccedil;
É &Eacute; Ç &Ccedil;
í &iacute; ü &uuml;
Í &Iacute; Ü &Uuml;
ó &oacute; & &amp;
Ó &Oacute; ¿ &iquest;
ú &uacute; ¡ &iexcl;
Ú &Uacute; " &quot;
Carácter Representación
· &middot;
º &ordm;
ª &ordf;
¬ &not;
© &copy;
® &reg;

Siempre que se inserta texto en HTML hay que tener en cuenta que si se
escriben varios espacios en blanco seguidos sólamente se mostrará uno en
el navegador. Para conseguir que se muestren varios espacios en blanco
seguidos puede sustituirse cada uno de ellos por &nbsp;.

&iexcl;Bienvenidos, esta es
mi&nbsp;&nbsp;&nbsp;1&ordf;&nbsp;&nbsp;&nbsp;p&aacute;gina!
¡Bienvenidos, esta es mi   1ª   página!
Texto preformateado
 <pre> y </pre>. Utilizando estas etiquetas podemos tener la
seguridad de que se mostrarán todos los espacios en blanco que se
inserten en el texto, así como todos los saltos de línea resultantes
de pulsar la tecla INTRO, sin la necesidad de utilizar la
etiqueta <br>.

 Hola, BIENVENIDOS esta ES MI PÁGINA WEB y esto un texto


preformateado Habría que escribir:

 <pre>Hola,     BIENVENIDOS
esta     ES MI PÁGINA WEB
     y esto un texto preformateado</pre>
 El inconveniente de esta etiqueta es que entre las
etiquetas <pre> y </pre> no se pueden incluir las
etiquetas <img> (para incluir imágenes), <object> (para incluir
objetos como animaciones), <big>, <small>, <sub> ni <sup> .

 Separadores <hr>

 El elemento que suele utilizarse para separar secciones dentro de


una misma página es la regla horizontal. Para insertar una regla
horizontal hay que insertar la etiqueta<hr>.
Es posible especificar algunos atributos de
la regla horizontal:
Atributo Significado Posibles valores
left (izquierda)
alineación de la regla
align right (derecha)
dentro de la página
center (centro)
un número, acompañado
width ancho de la regla de % cuando se desee que
sea en porcentaje
size alto de la regla un número
eliminar el sombreado de
noshade no puede tomar valores
la regla

Inicio

Bienvenidos a mi página.
 Habría que escribir:

 Inicio<hr align="left" width="300%" size="5" noshade>Bienvenid
os a mi p&aacute;gina.

 Sangrado de texto <blockquote>

 La sangría es una especie de margen que se establece a ambos lados


del texto.

 Para que un texto aparezca sangrado, se inserta entre las


etiquetas <blockquote> y </blockquote>.

 Por ejemplo, para insertar el texto:

 Queridos usuarios,

 hay una nueva sección.


 Habría que escribir:

 Queridos usuarios,
<blockquote>
  <blockquote>
  hay una nueva secci&oacuten.
  </blockquote>
</blockquote>

 Formatear el texto <font>

 Las propiedades del texto pueden modificarse a través de la


etiqueta <font> y </font>, especificando algunos de los atributos
de la etiqueta:
Atributo Significado Posibles valores
nombre de la fuente, o
face fuente
fuentes
número hexadecimal o
color color del texto
texto predefinido
valores del 1 al 7, siendo
por defecto el 3,
o desplazamiento respecto
size tamaño del texto
al tamaño por defecto,
añadiendo + o - delante del
valor

Por ejemplo, para insertar el texto:


Página en construcción
Habría que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS


Sans Serif">Página en construcción</font>
 Es posible definir una fuente para todo el documento.  

 <basefont> después de la etiqueta <body>.
 La etiqueta <basefont> no necesita una etiqueta de cierre, y
permite modificar los mismos atributos del texto que la
etiqueta <font>.

 <body>
<basefont color="#006699" size="4" face="Arial">

 Si el navegador encuentra otra etiqueta <font>, la que prevalece es


siempre la última que se encuentra.

 Existen una serie de etiquetas que permiten aplicar diferentes


estilos al texto que se encuentra entre ellas, y generalmente se
utilizan para resaltarlo. No hay que olvidar que todas estas
etiquetas necesitan una etiqueta de cierre, y que pueden
aplicarse varias etiquetas al mismo texto.
Etiquetas asociadas al tipo de letra:

Etiqueta Significado Ejemplo


<b> negrita HTML
<i> cursiva HTML
HTML
<u> subrayado

<s> tachado HTML


teletipo (máquina de
<tt> HTML
escribir)
aumenta el tamaño
<big>
de la fuente HTML
disminuye el tamaño
<small> HTML
de la fuente
<blink> parpadeo
Etiquetas asociadas al tipo de información:
Etiqueta Significado Ejemplo
<cite> cita HTML
<code> ejemplo de código HTML
HTML
<dfn> definición

<del> eliminado HTML


<em> énfasis HTML
<ins> insertado HTML
<kbd> teclado HTML
<samp> muestra HTML
<strong> destacado HTML
<sub> subíndice curso HTML 
<sup> superíndice curso HTML 
<var> variable HTML
Practica clase
 <font color="#993366" size="4" face="Comic Sans MS, Arial,
MS Sans Serif">Bienvenidos
a <b><u><tt>www.facebook</tt></u></b></font>

 Colorear de color Rojo: El identificador.

 Colorear de color Azul: Los Atributos

 Colorear de color Café: Valores HTML predefinidos.

 Colorear de color Verde: Valor propio del usuario.


Párrafos <p> ...
 El texto de una página puede agruparse en párrafos. Para ello, el
texto de cada uno de los párrafos debe insertarse entre las
etiquetas <p> y </p>.

 No es necesario insertar la etiqueta <br> para que un nuevo párrafo


aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen
que se cambie de línea automáticamente.

 También es posible cambiar la alineación del texto de cada


párrafo. Para ello se modifica el valor del atributo align, cuyos
valores pueden ser left (izquierda), right (derecha),
center (centrado) o justify (justificado).
Por ejemplo,
para insertar el texto:
Bienvenidos a mi página.

Aquí encontraras información muy interesante.

<p align="center">Bienvenidos a mi p&aacutegina.</p>
<p>Aqu&iacute encontraras informaci&oacuten muy
interesante.</p>

Otra forma de cambiar la alineación del texto es mediante las


etiquetas <div> y </div>, para las que también existe el
atributo align. La etiqueta <div>, al igual que la etiqueta <p>, se
utiliza para agrupar bloques de texto, pero con la diferencia de que la
separación entre ellos es menor.
Por ejemplo,
para insertar el texto:
Bienvenidos a mi página.
Aquí encontraras información muy interesante.

<div align="center"> Bienvenidos a mi p&aacutegina. </div>


<div>Aqu&iacute encontraras informaci&oacuten muy interesante. </div>

También es posible insertar el texto entre las


etiquetas <center> y </center> para que aparezca centrado.

<center>Bienvenidos a mi p&aacutegina.</center>

Otro par de etiquetas que permiten agrupar bloques de texto, pero que no
implican el cambio de línea (como en el caso de <p> y <div>), son las
etiquetas <span> y</span> volveremos a hablar de estas etiquetas cuando
veamos las hojas de estilo.
Encabezados <h1> ...
La diferencia entre los distintos
tipos de encabezado es el tamaño Etiqueta Ejemplo
de la letra, el tipo de resaltado, y
la separación existente entre el
<H1> Título 1: HTML
texto y los elementos que tiene
encima y debajo de él.
Existen seis etiquetas que <H2> Título 2: HTML
representan seis tipos de
cabeceras distintas. Todas estas
<H3> Título 3: HTML
etiquetas precisan una etiqueta
de cierre.
<H4> Título 4: HTML
Para todas estas etiquetas es
<H5> Título 5: HTML
posible especificar el valor del
atributo align. <H6> Título 6: HTML
Marquesinas <marquee>
 Las marquesinas son líneas de texto que pueden desplazarse de
un lado a otro de la ventana en forma de línea.
 Para insertar una marquesina, es necesario insertar el texto entre
las etiquetas <marquee> y </marquee>.

 La marquesina, por defecto, se desplaza de derecha a izquierda


indefinidamente, pero si lo deseas puedes hacer que estas
propiedades varíen.
 A través del atributo behavior puede modificarse el tipo de
movimiento. Puede tomar los valores alternate (de lado a lado
de la ventana, como si rebotara en los extremos),scroll (de un
lado a otro, continuamente) o slide (de un lado a otro, pero una
sola vez)
 A través del atributo direction puede modificarse la dirección en la que
se moverá el texto. Puede tomar los valores down (de arriba a
abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de
izquierda a derecha).
 También es posible establecer un color de fondo, a través del
atributo bgcolor.

 <marquee bgcolor="#006699" behavior="alternate“
 direction="right"><b><font  color="#FFFFCC" size="5">Esto es
una marquesina </font></b></marquee>

 También es posible insertar imágenes, tablas y otros elementos entre las


etiquetas <marquee> y </marquee>, no sólamente texto.
Las listas <li> ...
 Cada uno de los elementos de una lista ha de insertarse entre las
etiquetas <li> y </li>.
 Por ejemplo, para insertar en una lista los siguientes elementos:

 Perro
 Gato
 Periquito

 <li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
 Todos los elementos de la lista deberán encontrarse entre las
etiquetas que indiquen si la lista es desordenada (con viñetas) u
ordenada (numerada) como veremos a continuación.

 Lista desordenada <ul>

 Para que una lista sea desordenada, sus elementos deberán


encontrarse entre las etiquetas <ul> y </ul>.

 A través del atributo type es posible elegir el tipo de viñeta, que


puede ser circle (círculo), disc (disco) o square (cuadrado).

 <ul type="circle">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ul>
Lista ordenada <ol>
 Para que una lista sea ordenada, sus elementos deberán
encontrarse entre las etiquetas <ol> y </ol>.

 A través del atributo type es posible elegir el tipo de numeración,


que puede ser 1 (números), a (letras minúsculas), A (letras
mayúsculas), i (numeros romanos en minúsculas) o I (números
romanos en mayúsculas).

 Por ejemplo, para insertar la siguiente lista:


i. Perro
ii. Gato
iii. Periquito
 Habría que escribir:

 <ol type="i">
<li>Perro</li>
<li>Gato</li>
<li>Periquito</li>
</ol>

 Anidar listas
 Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas
como ordenadas.
 Por ejemplo, para insertar la siguiente lista:

1. Lunes
 Ingles
 Francés
2. Martes
1. Ingles
A. Corrección de ejercicios
B. Proponer ejercicios
 Habría que escribir:
 <ol>
<li>Lunes
<ul type="square">
<li>Ingles</li>
<li>Frances</li>
</ul>
</li>
<li>Martes
<ol>
<li>Ingles</li>
<ol type="A">
<li>Correccion de ejercicios</li>
<li>Proponer ejercicios </li>
</ol>
</li>
</ol>
</li>
</ol>
 Empezamos por la lista ordenada (la más externa) <ol>, esta lista
tiene dos elementos <li>Lunes y <li>Martes.

 El elemento Lunes contiene una lista desordenada con tipo


cuadrado <ul type="square"> que tiene dos
elementos <li>Ingles</li> y <li>Francés</li>.

 El elemento Martes contiene una lista ordenada de un sólo


elemento <li>Ingles</li> elemento que contiene a su vez una lista
desordenada de tipo letras mayúsculas <ol type="A"> con los
dos elementos <li>Correccion de ejercicios</li> y <li>Proponer
ejercicios </li>
TÍTULO
TEXTO

También podría gustarte