Sie sind auf Seite 1von 15

APUNTES CURSO HTML5

https://www.scolartic.com/inicio

MODULO 1

Primer dia.

Inicio: 10/07/2017

En HTML las etiquetas se clasifican en:

- Etiquetas Block: Al cerrarlas insertan una linea adelante y atrás


Ejemplo 1 : la etiqueta <p> (es para escribir un párrafo)
Asi lo escriba
En diferentes lineas
Lo presenta en forma de párrafo ordenado.
</p>
Ejemplo 2 : escribiendo en alguna parte del texto <p> inserta una linea
<p>
Asi lo escriba en diferentes lineas
Lo presenta en forma <p> de párrafo ordenado.
</p>

Sale asi:
Asi lo escriba en diferentes lineas
Lo presenta en forma (insertó una linea en blanco)
de párrafo ordenado.

- Etiquetas OnLine:No insertan una linea en blanco.


Por ejemplo la etiqueta <b> escribe en negrita </b>
<i> ecribe en cursiva </i>
<div> divde un pedazo del texto para fdarle alguna caracteristica </div>

En unapagina Web:

Contenido: es lo que se quiere presentar en la pagina.


Formato: Como lo quiere presentar
Ctrl + U : muestra el codigo de la pagina

Servidor Web: Wamp


Apache: Es un servidor Web
PHP : Servidor que permite la comunicación entre codigo HTML y la BD
En Wamp: la carpeta “www directory” es donde se guardan los archivos de los proyectos WebHTML y es publica. La pueden
ver otros usuarios

ESTRUCTURA DE UNA PAGINA HTML

En www.w3schools.com encontraremos referncias de las etiquetas

Tambien en www.quackit.com

<!DOCTYPE html>
<html>
<head>
<title> Mi primera Web </title>
</head>
<body>
<h1> Encabezado </h1>
<p> Esto es un párrafo </p>
</body>
</html>

ETIQUETAS BASICAS

<!DOCTYPE html>

<html>
<head>
<title> Mi primera Web </title>
<meta = name = "author" content = "nelsonReino"/>
<meta charset ="UTF-8"/>
<meta name = "Description" content = "Prueba Web"/>
<meta name = "Keywords" content ="HTML, CSS, XML, HTML5/>
</head>

<body>
<h1 Align ="center"> Encabezado : nelsonReino </h1>
<p>Esto es un < a href = http://www.google.com > párrafo </a> </p>
<p> Click aqui para ir a < a href = http://www.google.com > Google </a> </p>
<p> <h3>Click aqui para ir a Google < a href = "http://www.google.com"> Google </a> </h3> </p>
<p> <h1> ir a <a href = "http://www.google.com"> http://www.google.com </a></h1> </p>

< img src="gaticos.gif" />


<p> Click en el GATO para ir a <a href = "http://www.google.com"> <img src="gaticos.gif" /> </a> </p>
</body>
</html>
MODULO 2
Segundo dia. martes, 11 de julio de 2017

Tema: Tablas.
Usar editor: NotePad++

<html>

<head>
<title> USO DE LAS TABLAS </title>
</head>
<body>
<table border = 2 bgcolor=#00FF00 width="700px">
<tr>
<td align = "center" valign = "top" width= 30% height = "40px"> celda1</td>
<td align = "left" heigth = "40px" valign = "center" width= 70% height = "40px" > celda2</td>
</tr>
<tr>
<td> align = "center" width= 20% > celda3</td>
<td align = "left"width= 80% > celda4</td>
</tr>
<tr>
<td>celda5</td>
<td>celda6</td>
</tr>

</table>

</body>
</html>

Align(alinear) = alineacion dentro de la celda : center – left – rigth

valign = ubicar arriba o debajo de la celda “top” - “center” – “down”

width(ancho)= 30%

height(alto) = "40px">

Tercer dia. miércoles, 12 de julio de 2017

Test = 100%

Tema: Listas
<!DOCTYPE html>

<html>
<head>
<meta charset = "UTF-8" />
<title> TEMA: LISTAS </title>
</head>

<body>
<ul><h4> Lista de ingredientes</h4></ul>
<ul>
<li> Atún </li>
<li> Pan </li>
<li> Tomate </li>
<li> Aji </li>
<li> Cebolla </li>
</ul>

<ul><h3> Lista de ingredientes</h3></ul>

<dl>
<dt> Cafe </dt>
<dd> Caliente </dd>
<dt> Leche</dt>
<dd> Entera </dd>
<dd> Descremada </dd>
<dd> Fría </dd>
</dl>

<ol> (presenta la lista enumerada)


<li> Atún</li>
<ul>
<li> Nacional </li>
<li> Importado </li>
</ul>
<li> Pan </li>
<ul>
<li> Pan Blanco </li>
<li> Pan Centeno </li>
<li> Pan Francés </li>
<li> Pan integral </li>
</ul>
<li> Tomate </li>
<li> Aji </li>
<li> Cebolla </li>
<ul>
<li> Cabezona </li>
</ul>
<li> Harina </li>
</ol>
</body>

</html>

Tema: Utilizando CSS

CSS: Hojas de Estilo en Cascada (Cascading Style Sheets)

Color en texto.-

<!DOCTYPE html>

<html>

<head>
<meta charset = "UTF-8"/>
<title> COLOR EN TEXTO </title>
</head>

<body>
<div style = "color: green">En un lugar de la <span style = "color:red">mancha </span> de cuyo nombre no
quiero acordarme </div>
</body>

</html>

Cuarto dia - Jueves, 15 de julio de 2017


Tema: Utilizando CSS

Buscar en internet un Lorem Ipsum ( tozo de texto)

Etiquetas de formatos:

<span style = "color: red">es simplemente el texto de relleno span> cambiar color a un trozo de texto
<small> texto pequeño
<del> texto tachado
<mark> sombreado con amarillo
<sup> subíndice
<sub> subíndice

Configuraciones:
<!definir color y letra-->
<style>
span {
color:red;
}
h1{
color:blue;
font-family:courrier;
}
</style>

Quinto dia - lunes, 17 de julio de 2017


Tema: Id y Clases en CSS

Otras configuraciones:

Para que un trozo de texto marcado por un <spam> tenga un estilo diferente, hay dos formas:
1. Los id y 2. Las clases
<style>
#elem1{
color:green;
font-weight:bold;
}
.class1{
color:blue;
font-family:verdana;
}
</style>

Ejemplo:
<style>
span {
color:red;
}
h1{
color:blue;
font-family:courrier;
}
#elem1{
color:green;
font-weight:bold;
}
.class1{
color:blue;
font-family:verdana;
}
</style>
DEFINIR ESTE ARCHIVO COMPLETO COMO LA PLANTILLA “css” Pr UTLIZAR EN LAS DEMAS PAGINAS WEB :
linkiar este archivo asi:

<head>

<link rel = ”stylesheet” type = “text/css” href = “estilo.css”/>

<meta charset = "UTF-8"/>

<title> FORMATOS Y CSS </title>

</head>

Guardar como: “estilo.css”

NOTA: PARA AGREGAR OTRAS CARACTERISTICAS A LA PAGINA QUE ESTAMOS DISEÑANDO:

Buscar en Google: “css reference “

Entramos en: www.CSS REFERENCE CSS-CSS | MDN

Por ejemplo podemos buscar:

“border”

La propiedad border permite definir de un golpe todos los bordes en una única regla de la hoja de estilos. Se puede
utilizar border para definir los valores siguientes: border-width, border-style, border-color.

Sintaxis
border: [border-width || border-style || border-color | inherit] ;

____

“border-style”

La propiedad estilo de borde (border-style) es un corte camino para definir de un golpe el estilo de línea de los
cuatro bordes de un elemento.
Sintaxis
border-style: [ <border-style> ]{1,4} | inherit

Valores

<border-style>
el estilo del borde puede tomar cualquier valor de las siguientes:
none : sin borde, el ancho es definido como 0. Es el valor por defecto.
hidden : igual que 'none', excepto en el caso de conflictos de bordes por ejemplo en elementos de tabla.
dashed : serie de guiones (-----).
dotted : series de puntos (.....).
double : dos líneas rectas continuas separadas de un número de píxel definido como border-width.
groove : efecto de hundimiento del borde.
inset : efecto de hundimiento de una caja.
outset : efecto inverso a 'inset', la caja parece salir, como en 3D.
ridge : efecto inverso a 'groove', el borde parece salir, como en 3D.
solid : línea única, recta, sólida.
Hay cuatro valores para definir el/los borde/s

el primero: los cuatro bordes (todos).


el segundo: izquierda y derecha.
el tercero: abajo.
el cuarto: izquierda.
Si utilizamos:
el 1º y 2º: se define arriba+abajo y derecha+izquierda
el 1º, 2º y 3º: se define arriba, derecha+izquierda y abajo
el 1º, 2º, 3º y 4º: cada borde individualmente empezando con el de arriba hasta la izquierda en sentido del reloj.

EJEMPLO:

element {
border-width: 1px;
border-style: solid;
border-color: black;
}

Ejemplo de Archivo .html llamando la hoja de estilo “estilo.css”

Archivo “archivo5_Id_Y_Clases.html :

<!DOCTYPE html>

<html>
<head>
<link rel = "stylesheet" type = "text/css" href ="estilo.css"/> (llama la hoja de estilos)
<meta charset = "UTF-8"/>
<title> HOJA DE ESTILOS Y FORMATOS CSS </title>
</head>

<body>
<h1> ENCABEZADO</h1>

<p>
<span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el
texto de relleno </span> estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se
dedica a la imprenta) <span id = "elem1">usó una galería de textos y los mezcló de tal manera que </span>logró hacer
un libro de textos especimen. <span id = "elem1">No sólo sobrevivió 500 años, sino que tambien ingresó como texto de
relleno en documentos electrónicos</span>, quedando esencialmente igual al original. Fue popularizado en los 60s con la
creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de
autoedición, <span class = "class1">como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem
Ipsum.</span>

</p>

</body>
</html>

HOJA DE ESTILOS “estilo.css” :

<!DOCTYPE html>

<html>
<head>
<meta charset = "UTF-8"/>
<title> HOJA DE ESTILOS Y FORMATOS CSS </title>
</head>
<body>
<style>
span {
color:red;
}
h1{
color:blue;
font-family:courrier;
}
#elem1{
color:green;
font-weight:bold;
}
.class1{
color:blue;
font-family:verdana;
}

p{
border:2px solid black;
margin:30px;
background-color: yellow;
}
</style>
</body>
</html>

NOTA: Para escribir los colores en HEXADECIMAL (#00FF00 que es el VERDE) pode,os ir al la siguiente página:

GOOGLE : html colors

http://html-color-codes.info/codigos-de-colores-hexadecimales/

dando clic en la gama de colores aparece el código hexadecimal de dicho color.

TEST 2 = 100/100

Sexto dia - martes, 18 de julio de 2017


Tema1: Práctica 1 (Pendiente)
Tema 2 -: Instalando un Wordpress

INSTALAR WORD PRESS.-


Descargar WordPress de: www.wordpress.org

1. Iniciar el servidor Wamp y copiar la carpeta de wordpress dentro de WWW


2. En el navegador escribir: localhost/wordpress
3. Ir al menu de Wamp e iniciar phpMyAdmin. El usuario es root sin contraseña
4. Definir un usuario en pestaña USUARIOS :
Ususario: wordpress host: local contraseña: nrc
Crear una base de datos automaticamente con el mismo nombre del usuario: wordpress

5. Escribir en el navegador: localhost/wordpress


En la página de wordpress que sale, llenar los datos que pide.
Dar clic en el <ejecutar instalacion>
Si no se ejecuta la instalación automáticamente se debe ir a la carpeta de WordPress que esta en el servidor y el archivo
wp-config-sample.php a generado el archivo “wp-config.php” y se habre con NotePad++

6. Despues del clic en <ejecutar instalacion> pide los siguientes datos:


- titulo del sitio : blog de prueba
- nombre de usuario: nelsonReino
- password: nrc
- email: nyrc14@gmail.com

Clic en <instalara wordpress>

NOTA: YA ESTA INSTALADO EL WORD PRESS

Y en la BD wordpress ya se ha generado automaticamente unas tablas.

SI ESCRIBIMOS EN LA BARRA DEL NAVEGADOR:


- localhost/wordpress : me entrada al sitio que estoy creando : “blog de prueba” (lo que ve el usuario)
- http://localhost/wordpress/wp-admin/: me entrada a la : administracion del blog que estoy creanso

Tema 3 -: Cambiar CSS de Wordpress

Una vez instalado WordPress, si recordamos como funcionaban las hojas de estilo, podremos modificar la apariéncia de
WordPres en poco tiempo.

1. Entrar al administrador
2. opcion “editor” (este es el editor de las hojas de estilo)
3.

Tema: Test = 90/100

MODULO 3 – Páginas Web dinámicas con JavaScript


Sexto dia - jueves, 20 de julio de 2017
Tema: Java Script y sus librerias
Temario:
1- Como funciona JavaScript
2- Realizar un ejemplo con JavaScript
3- Analizar la estructura de DOM
4- Como utilizar el DOM para crear Webs dinámicas
5- Explorar las posibilidades de HTML5
6- Programar un Juego en JavaScript
7- Crear un juego con CANVAS de HTML5
8- Probar otras posibilidades de HTML5 en dispositivos móviles

1- JavaScript : Lenguaje OO, ligero e interpretado, que se ejecuta dentro del cliente. Es multiplataforma.

Devuelve codigo HTML

PC
SERVIDOR INTERNET PETICION Cliente

HTML

Opciones para crear paginas Web dinámicas:


- HTML con JavaScript : Cuando llega el codigo HTML+JavaScript, el navegador que utilicemos es el encargado de interpretarlo y
ejecutarlo, por tanto la carga depende de nuetra máquina.

- ASP / PHP MIDDLEWARE (Lenguaje que comunica El Servidor con la BD)

PHP
SERVIDOR INTERNET PC
BD Cliente
El PC hace una peticion por internet aL servidor, y elHTML
servidor a la BD
JavaScript es un lenguaje NO TIPADO, es decir que cuando definimos una variable, no se le indica que tipo de variable es.

PHP permite al Servidor Web(html) cominicarse con la BD y toma elnombre de “MIDDLEWARE”


PHP, partir de los datos que le de la BD, genera un archivo HTML en el Servidor Web(html) y lo envia al cliente.
CONCLUSION: En el PC no se ejecuta nada. PHP se ejecuta en el servidor, y JavaScript se ejecuta en el navegador.
Cuando se dice que JavaScript es un lenguaje “cliente” quiere decir que se ejecuta en el navegador.

2. Como funciona JavaScript.-


JS me sirve para modificar el codigo HTML en tiempo de ejecucion si como las hojas de estilo y realizar tareas como validar
contenidos de un formulario o realizar alguna magen que se ha de mover o algo interactivo dentro de la página.

Ejemplo 1.- Cambiar un texto por otro mediante una función.


<!DOCTYPE html>

<html>

<head>
<script>
function f(){
<!-- Localizar en este documento el elemento d1 y cambiar el texto por "Adios" -->
document.getElementById("d1").innerHTML = Date(); ;
}
</script>
</head>

<!-- Llamar la funcion "f" en el "body" -->


<body onload = "f()">
<div id ="d1"> Hola </div>
</body>
</html>

Ejemplo 2.- Declarar “variables” y funciones de la hora

<!DOCTYPE html>

<html>

<head>
<script>
function f(){
<!-- defino la variable "hoy" e instancio un objeto que se le asigna a "hoy" -->
var hoy = new Date();
var h = hoy.getHours();
var m = hoy.getMinutes();
var s = hoy.getSeconds();
var t = setTimeout(function() {f()}, 600 );
<!-- Localizar en este documento el elemento d1 y cambiar el texto por "Adios" -->
document.getElementById("d1").innerHTML = h +":"+ m +":"+s ;
}
</script>
</head>

<body onload ="f()">


<div id = "d1"> Hola </div>
</body>

</html>

Séptimo dia - sábado, 22 de julio de 2017


Tema: Ejemplo en JavaScript (parte 1)

Escribamos ahora un ejemplo en JavaScript un poco más complejo. Veremos como gestionar variables, crear funciones y como
enlazarlas a los diferentes eventos.

DEFINICION DE VARIABLES EN JAVASCRIPT.-

JV es un lenguaje NO TIPADO, es decir que no se define el tipo de variable hasta cuando no se le asigna el tipo de contenido.
Ejemplo:
var k = 123; es de tipo numerico
var n = “Fabio” es de tipo String

EJEMPLO 1.-

<!DOCTYPE html>

<html>
<head>
<title> EJEMPLO 1 </title>
<script>
<!-- Declaración de variables-->
var k;
k = 1 + 2 + 3;
<!-- Declaración de una función-->
function f(){
document.getElementById("resultado").innerHTML = k;
}
</script>
</head>
<body>
Dato1: <input type = "text" id="dato1" /></br>
Dato2: <input type = "text" id="dato2" /></br>
<input type = "button" onclick = "f()" /></br>
Resultado: <div id = "resultado"> </div>
</body>
</html>

EJEMPLO 1A.- utilizando “value”

<!DOCTYPE html>

<html>
<head>
<title> EJEMPLO 1A </title>
<script>

<!-- Declaración de variables-->


var k;
k = 2 * (2 + 3/3);
<!-- Declaración de una función-->
function f(){
document.getElementById("resultado").innerHTML = document.getElementById("dato1").value;
<!-- Este código también hace lo mismo-->
document.getElementById("resultado").innerHTML = dato1.value;
}
</script>
</head>
<body>
Dato1: <input type = "text" id="dato1" /></br>
Dato2: <input type = "text" id="dato2" /></br>
<input type = "button" onclick = "f()" /></br>
Resultado: <div id = "resultado"> </div>
</body>
</html>

EJEMPLO 1B.- utilizando “ARRAYS”

<!DOCTYPE html>

<html>
<head>
<title> EJEMPLO 1B "ARRAYS" </title>
<script>

<!-- Declaración de ARRAYS-->


var k = ["atun","pan","arroz", "verdura"];

<!-- Declaración de una función-->


function f(){
<!--Codigo para mostrar solo el contenido del elemento "0"-->
<!--document.getElementById("resultado").innerHTML = k[0];-->
<!-- Tambien se le puede indicar que escriba el elemento que digitemos en "D1"-->
document.getElementById("resultado").innerHTML = k[dato1.value];
}
</script>
</head>
<body>
Dato1: <input type = "text" id="dato1" /></br>
Dato2: <input type = "text" id="dato2" /></br>
<input type = "button" onclick = "f()" /></br>
Resultado: <span id = "resultado"> </span>
</body>

</html>

EJEMPLO 2.-

Escribamos ahora un ejemplo en JavaScript un poco más complejo. Veremos como gestionar variables, crear funciones y
como enlazarlas a los diferentes eventos.