Scribd
Cargar
104 vistas10 páginas

2.HTML Ejemplos 2

El documento describe conceptos básicos de HTML y CSS. Explica que un documento HTML comienza con <!DOCTYPE html> y contiene las etiquetas <html>, <head> y <body>. Luego presenta ejemplos de cómo agregar estilos a elementos HTML de forma interna, en línea y externa usando hojas de estilo CSS. También introduce el uso de comentarios, el elemento <span> y atributos como "class". Por último, muestra ejemplos básicos de cómo incluir JavaScript en documentos HTML.

Cargado por

Efe Quisbert
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 DOCX, PDF, TXT o lee en línea desde Scribd
104 vistas10 páginas

2.HTML Ejemplos 2

El documento describe conceptos básicos de HTML y CSS. Explica que un documento HTML comienza con <!DOCTYPE html> y contiene las etiquetas <html>, <head> y <body>. Luego presenta ejemplos de cómo agregar estilos a elementos HTML de forma interna, en línea y externa usando hojas de estilo CSS. También introduce el uso de comentarios, el elemento <span> y atributos como "class". Por último, muestra ejemplos básicos de cómo incluir JavaScript en documentos HTML.

Cargado por

Efe Quisbert
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 DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 10

UNIDAD 2 – HTML

Documentos HTML
Un documento HTML comienza con una etiqueta: <!DOCTYPE html>.
Todo documento HTML se inicia con <html> y termina con </html>.
La parte visible o principal del documento HTML se encuentra entre <body> y </body>.

Archivo: ejm01.html
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo de 2 párrafos</title>
</head>
<body>
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
</body>
</html>

<!DOCTYPE html> en la primera línea. Esta es la forma de indicar al navegador donde se visualice el
documento que este está escrito en la versión HTML5.

lang="es-ES" en la etiqueta de inicio <html>. Esto sirve para especificar, mediante el atributo lang, el
idioma del contenido del elemento "html". En este caso español (España). Otros posibles valores del
atributo lang son: "es-BO" para español (Bolivia).

<meta charset="utf-8"> dentro del elemento "head". Así, se indica la codificación de caracteres del
documento, en esta ocasión UTF-8 (8-bit Unicode Transformation Format, Formato de Transformación
Unicode de 8 bits). Obsérvese que, el elemento "meta" está vacío (no tiene contenido) y, en consecuencia,
no necesita ser cerrado escribiendo </meta>.

Nota: los documentos HTML están formados por elementos cuya gran mayoría deben escribirse delimitados
por una etiqueta de inicio <etiqueta> y otra de fin </etiqueta>, tales como: "html", "head", "body", "title" o
"p". No obstante, existen otros elementos que no necesitan ser cerrados con la etiqueta de fin, como por
ejemplo: "meta".

-1-
Archivo: ejm02.html

<!--Ejemplo del Tutorial de HTML-->


<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo con comentarios</title>
</head>
<body>
<!-- En el body hay 2 párrafos -->
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
</body>
</html>

En un documento HTML, los comentarios pueden escribirse entre los caracteres "<!--" y "-->".

Estilos en HTML

Para cambiar el estilo en el que por defecto se visualizan los elementos de un documento HTML en un
navegador web, existen varios métodos:
- a) Estilo en línea (Inline): utilizando el atributo style.
- b) Estilo interno (Internal): usando un elemento "style".
- c) Estilo externo (External): empleando un archivo CSS (Cascading Style Sheets) externo al
documento HTML.

a) Estilo en línea
Para cambiar el color de un párrafo realizar.
Archivo: ejm03.html

<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo de estilo en línea</title>
</head>
<body>
<p style="color: green">Esto es un párrafo de color verde.</p>
</body>
</html>

-2-
b) Estilo interno - Elemento "style"
Para este caso, se usa el elemento "style" dentro del "head"

Archivo: ejm04.html

<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo de estilo interno</title>
<style>
p {color:red;}
</style>
</head>
<body>
<p>Esto es un párrafo de color rojo.</p>
</body>
</html>

c) Estilo externo - Elemento "link"

Para aplicar un estilo externo, hay que hacer uso del elemento "link", el cual permite enlazar el documento
HTML con un archivo externo.

Archivo: estilo.css (crear este archivo previamente con el siguiente contenido)

p {color:blue;}

Archivo: ejm05.html

<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo de estilo externo</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<p>Esto es un párrafo de color Azul.</p>
</body>
</html>

-3-
Se pueden incluir otras propiedades en el estilo CSS. Si además de que el texto del párrafo se muestra en
rojo, se quiere indicar que el párrafo se muestre centrado en la pantalla del navegador, esto se puede hacer
usando la propiedad text-align.

Archivo: ejm06.html

<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo de párrafo rojo y centrado</title>
<style>
p {
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Esto es un párrafo de color rojo y centrado.</p>
</body>
</html>

Elemento "span" y atributo class


Para ver parte del texto de un párrafo de color rojo:

Archivo: ejm07.html

<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Ejemplo uso del elemento span y del atributo class</title>
<style>
.rojo {color:red;}
</style>
</head>
<body>
<p>Párrafo con <span class="rojo">dos palabras</span> de color rojo.</p>
</body>
</html>

El valor "rojo" asignado al atributo class, ha indicado el estilo (en este caso color:red;) con el que el texto
contenido dentro del elemento "span" (en este caso "dos palabras").
.rojo tiene que llevar el carácter punto, ya que, ha sido definido por el programador dentro de style.

-4-
Css externo en HTML
A continuación se muestra dos estilos externos con sus archivos css:

Archivo: ejm11.html
<html>
<head>
    <meta charset="utf-8">
    <title>CSS Externo</title>
    <link rel="stylesheet" type="text/css" href="estilos_01.css">
</head>
<body>
    Como en la hoja de estilo hemos dicho que el body fuera con fondo blanco, con
    un texto de tama&ntilde;o 10 y centrado, &eacute;sta ser&aacute; la apariencia
    principal de la p&aacute;gina.
    <p>Aqu&iacute; tenemos un párrafo. Como tambi&eacute;n le hemos aplicado un
estilo,
    podemos ver el texto del p&aacute;rrafo de color azul y con un tama&ntilde;o
    ligeramente superior.</p>
    <p id="estilo1"> A este párrafo le hemos aplicado el “estilo1”, por lo que el
    texto tiene un fondo negro, un texto en blanco y un tama&ntilde;o de 15 px.</p>
    <div class="clase1">Este texto posee unas caracter&iacute;sticas propias. No es
que sea un estilo muy bonito, pero por lo menos se entiende bien,
    &iquest;&iquest;no?? </div><br>
    <h1>Y aqu&iacute; tenemos un &uacute;ltimo estilo.</h1>
    Pues estos han sido todos los estilos que ten&iacute;amos preperados para ti.
    Este tiene otra vez el estilo predeterminado para body.
</body>
</html>

El archivo css se describe a continuación:

Archivo : estilos_01.css

body {
font: 10px;
text-align: center;
background-color: #ffffff;
}
p{
font-size:12ppx;
color:#0000FF;
text-align:left;
}
h1{
color:#FF0000;

-5-
text-align:left;
}
.clase1{
font-style:italic;
font-size:20px;
border-bottom:1px #000000 dashed;
text-align:left;
}
#estilo1{
color:#FFFFFF;
font-size:15px;
background-color: #000000;
text-align:left;
}

Archivo: ejm12.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS Externo</title>
    <link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
    <h1>La opción más recomendada es el CSS externo</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <h3>Maneras de incluir el CSS</h3>
    <ol>
        <li>Inline</li>
        <li>Interno</li>
        <li>Externo</li>
    </ol>
</body>
</html>

La hoja de estilo correspondieste es:

-6-
Archivo:estilos.css

body{
    background-color: #333;
    color: white;
    padding: 50px;
}
h1{
    color: yellowgreen;
}
p{
    font-size: 18px;
}
h3{
    color: red;
}
ol{
    background: plum;
    color: #333;
    padding: 30px;
    width: 100px;
}

JavaScript en HTML

a) JavaScript básico

En    nuestro primer ejemplo, simplemente, crearemos un Javascript que lo que hará es    visualizar un
mensaje de bienvenida cuando el usuario entre a la página Web. Cada    vez más, las páginas Webs
muestran un mensaje de este tipo para dar la    bienvenida cuando se entran en ellas.

Como se puede    apreciar el código Javascript se coloca (o se embebe) dentro de uno de HTML,


encerrándolo    entre las etiquetas < script>< /script> la función alert.

Archivo: ejm13.html
<HTML>
<HEAD>
<TITLE>Javascript</TITLE>
<SCRIPT LANGUAGE="javascript">
//visualizar un mensaje de bienvenida
alert("Bienvenido a nuestra primera pagina con javascript");
</HTML>
</SCRIPT>

</HEAD>
<BODY>
<a href=ejm14.html> Ir a javascript basico </a>
</BODY>
</HTML>

-7-
En muchas    ocasiones será de gran utilidad recoger un dato por teclado y guardarlo para     posteriormente
tomar decisiones según lo que se haya introducido (muy útil por    ejemplo para los accesos de los usuarios a
las páginas). En este ejemplo, la    variable que definimos, nom nos    servirá para guardar lo que
introduzcamos por teclado a través de la función prompt de Javascript.

Archivo: ejm14.html

<HTML>
<HEAD>
<TITLE>Javascript basico</TITLE>
<SCRIPT LANGUAGE="javascript">
//recoger un dato por teclado y visualizarlo
var nom;
nom=prompt("Escribe tu nombre","NOMBRE");
alert("Mucho gusto"+" "+nom);
</SCRIPT>
</HEAD>
<BODY>
<a href=ejm15.html> Ir a javascript medio </a>
</BODY>
</HTML>

b) JavaScript medio

mostramos un ejemplo de cómo abrir ventanas emergentes (o también    llamadas pop-up) cada cierto
tiempo automáticamente. Este ejemplo es muy útil    para abrir ventanas de publicidad aparte de la
principal.

En el    ejemplo se define un intervalo de ejecución en Javascript con la función setInterval que lo que hará


es ejecutar    la función abrir_ventana() cada 3 segundos (3000 milisegundos). La función    abrir_ventana()
contiene la función window.open que lo que hará es abrir una nueva página conteniendo la web del
Ministerio de    Educación. Al pulsar sobre el botón se ejecutará el código Javascript clearTimeout que
detendrá el intervalo    de ejecución de abrir ventanas continuamente.

Archivo: ejm15.html

<HTML>
<HEAD>
<TITLE>Javascript medio</TITLE>
<SCRIPT LANGUAGE="javascript">
function abrir_ventana()
</HTML> {
window.open("http://www.cnice.mec.es/");
}
function para_abrir()
{

-8-
clearTimeout(pop);
}
pop=setInterval ("abrir_ventana()",3000);
</SCRIPT>

</HEAD>
<BODY>
<input type=button value="Para de abrir ventanas" onclick="para_abrir()">
<a href=ejm16.html> Ir a javascript avanzado </a>
</BODY>
</HTML>

c) JavaScript avanzado

Este ejemplo es muy útil para    visualizar en una página html un reloj dígital que se va actualizando cada
500    milisegundos. Como se puede apreciar,  se    crea un intervalo de ejecución de 500 milisegundos de la
función “Ver_Hora.” Ver_Hora()    recoge la hora, la formatea con la representación hh:mm:ss (hora,
minutos,    segundos) y la visualiza dentro del objeto del html, identificado con el nombre    de “mireloj”.
Dicho objeto, se encuentra dentro del documento de html, a su vez en el único formulario    existente y
definitivamente en un botón en forma de texto. Es por esto que al    referenciarlo para escribir en él la hora
Javascript lo haga de la siguiente forma:

document.forms[0].mireloj.value
    Si hubiera otro formulario en la página que lo contuviera sería de la    siguiente manera:
document.forms[0].mireloj.value
  
Esto es lo que se denomina    anidamiento de objetos (dentro de unos hay otros).

Archivo: ejm16.html
<HTML>
<HEAD>
<TITLE>Javascript avanzado</TITLE>
<SCRIPT LANGUAGE="javascript">
//ejemplo que visualiza un reloj digital
function Ver_Hora()
{
var mihora = new Date();
var horas = mihora.getHours().toString();
var minutos = mihora.getMinutes().toString();
if(minutos.lenght == 1) minutos = "0" + minutos;
var segundos = mihora.getSeconds().toString();
if(segundos.lenght==1) segundos = "0" + segundos;
document.forms[0].mireloj.value = horas + " : " + minutos + " : "+
segundos;
}
</SCRIPT>

-9-
</HEAD>
<BODY>
<form>
<p align = "center"> MI RELOJ DIGITAL </p>
<p align = "center"> <input tye="text" size="10" name="mireloj"> </p>
</form>
<script>
var r = setInterval ("Ver_Hora ()",500);
</script>
</BODY>
</HTML>

-10-

También podría gustarte