Fundamentos de HTML

Revisión de HTML y CSS

Lección 1

HTML

HyperText Markup Language («lenguaje de marcas de hipertexto»)

<!DOCTYPE html>

• Debe ser la primera definición en el documento

• No es una etiqueta, es una declaración para el navegador sobre en que versión de HTML esta escrita la página

Declaraciones DOCTYPE

• HTML 5<!DOCTYPE html>

• HTML 4<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Etiqueta html

• La cosa entre los “<>”• Abajo ejemplos de etiquetas en rojo

<!DOCTYPE HTML> <html>

<head><title>Ejemplo1</title>

</head><body>

<p>ejemplo1</p></body>

</html>

Etiqueta

• Generalmente se usan en parejas. Apertura y Cierre.

<p>HTML es sencillo</p>

EtiquetaInicio

EtiquetaFin

Contenidode la etiqueta

Atributos

• El atributo personaliza la etiqueta<etiqueta atributo=“valor”></etiqueta><etiqueta atributo=“valor”></etiqueta><etiqueta atributo=“valor”></etiqueta>

<a href=“http://www.google.com”>Google</a>

Nombreatributo

Valor delatributo

Atributos GlobalesAtributo Descripción

acceskey Especifica un método abreviado para activar el control

class Especifica una o mas clases para un elemento

dir Especifica la dirección del texto para el contenido en el elemento

id Especifica un identificador único para el elemento

lang Especifica el lenguaje para el elemento

style Especifica un CSS en la línea para el elemento

tabindex Especifica el orden del tabulador para el elemento

title Especifica información extra sobre el elemento

Mas informaciónhttp://dev.w3.org/html5/spec-author-view/global-attributes.html#the-id-attribute

http://dev.w3.org/html5/spec-author-view/global-attributes.html%23the-id-attribute




<html>

Le dice al navegador que es un documento HTMLEs la raíz del documento HTMLLa etiqueta <html> contiene todos los elementos HTML de la página (excepto DOCTYPE)Sus dos partes principales son <head> y <body>


todo esta acá</html>

<head>

Contiene información sobre la página. Usualmente esta información no se le muestra al usuario final.Debe contener el lenguaje principal, un título para el documento y puede incluir información como scripts, estilos, meta información y mas.



</head></html>

<title>

• Usada en SEO (Search Engine Optimization – Optimización para Motores de Búsqueda) para asociar una palabra clave con el contenido del sitio.

• Debe tener entre 50 y 60 caracteres.


<head><title>Palabra Clave |

Marca</title></head>

</html>

<body>

La etiqueta <body> contiene el texto visible de la página



</head><body>

<p>Este es el primer párrafo de la página.</p></body>

</html>

<p>

La etiqueta <p> define los párrafos que forman parte de la página. Para delimitar el párrafo se encierra el texto con la etiqueta <p><!DOCTYPE HTML> <html>


</head><body>

<p>Este es el primer párrafo de la página. Los párrafos pueden ocupar varias líneas</p>

<p>Estes es el segúndo parrafo de la página. El navegador separa los parrafos</p></body>

</html>

Énfasis

<strong> identifica un texto que es mas importante que el texto que lo rodea. El navegador usualmente lo muestra en negrita.<em> identifica un texto a ser resaltado. El navegador usualmente la dibuja en itálica.<b> y <i> identifican el texto que debe ser mostrado en negrita e itálica respectivamente.Ejemplo:

<p>

Para <strong>enfatizar</strong> se da un peso extra a la

comunicación;

<em>”Su gesto enfatizaba sus palabras"</em>.

</p>

Ejercicio

Determina el código HTML que produce esta página

Pista:<del>

<h1>

Utilice la etiqueta <h1> para identificar el contenido principal de toda la página, <h2> para identificar secciones, <h3> para identificar sub-secciones y así sucesivamente.

<h1>Texto muy grande</h1><h2>Texto grande</h2><h3>Texto algo más grande de lo normal</h3><h4>Texto normal</h4><h5>Texto pequeño</h5><h6>Texto muy pequeño</h6>

<br>

La etiqueta <br> Salta la línea de un parrafo. Para saltar la línea se pone la etiqueta <br> en el lugar que se desea el salto. Es una etiqueta “vacía”, es decir que no tiene etiqueta de cierre.

Este texto tiene un salto de linea<br>salto

La exploración espacial designa los esfuerzos del hombre en estudiar el espacio y sus astros desde el punto de vista científico y de su explotación económica.

Estos esfuerzos pueden involucrar tanto seres humanos viajando en naves espaciales como satélites con recursos de telemetría o sondas teleguiadas enviadas a otros planetas (orbitando o aterrizando en la superficie de estos cuerpos celestes).

Las personas que pilotan naves espaciales, o son pasajeros en ellas, se llaman astronautas (en Rusia: cosmonautas; en China: taikonautas). Técnicamente se considera astronauta a todo aquel que emprenda un vuelo sub-orbital (sin entrar en órbita) u orbital a como mínimo 100 km de altitud (considerado el límite externo de la atmósfera).

El cielo siempre ha atraído la atención y los sueños del hombre. Ya en 1634 se publicó la que se considera primera novela de ciencia ficción, Somnium, de Johannes Kepler, que narra un hipotético viaje a la Luna. Más tarde, en 1865, en una famosa obra de ficción titulada "De la Terre à la Lune", Julio Verne escribe sobre un grupo de hombres que viajó hasta la Luna usando un gigantesco cañón.

En Francia, Georges Méliès, uno de los pioneros del cine, tomaba la novela de Verne para crear "Le voyage dans la Lune" (1902), una de las primeras películas de ciencia ficción en la que describía un increíble viaje a la Luna. En obras como "The War of the Worlds" (1898) y "The First Men in The Moon" (1901), Herbert George Wells también se concibieron ideas de exploración del espacio y de contacto con civilizaciones extraterrestres.

EnlacesSon la parte escencial de los los hipertextos. Estos contienen URL que enlazan documentos por demanda. Así esta contruída una URL

http://www.librosweb.es/xhtml/capitulo4.htmlLas partes que componen la URL anterior son:• Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a

ese recurso. Todas las páginas web utilizan http://. Las páginas web seguras (por ejemplo las de los bancos y las de los servicios de email) utilizan https:// (se añade una letra s).

• Servidor (www.librosweb.es): simplificando mucho su explicación, se trata del ordenador en el que se encuentra guardada la página que se quiere acceder. Los navegadores son capaces de obtener la dirección de cada servidor a partir de su nombre.

• Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder.

Tipos de URL

• URL en la misma carpeta (for example: about.html). • URL relativa a la carpeta actual (for example:

../about.html). • URL relativa al servidor (for example: /pages/about.html). • URL en un servidor diferente (for example:

http://www.microsoft.com/default.html). • Un fragmento idenficador con un numeral (for example:

#section2). • Una combinación de un identificador con un numeral (for

example: about.html#section2).

<a>

Los enlaces se crean con la etiqueta <a> (viene del ingles “anchor” que significa áncla).Tiene dos atributos propios:• name = “texto” permite nombrar el enlace

para que se pueda acceder desde otros enlaces• hfref=“url” indica la url del recurso que se

quiere enlazar

<a href=“http://www.google.com”>Google</a>

Ejercicio

A partir de la estructura de la imagen

Ejercicio

• Cree la siguiente página llamada indice.html

Ejercicio

• Cree la página de índice del portafolio

Primero el Quiz

• http://fresno.pntic.mec.es/avaler3/tests/testhtml.htm

5 reglas de XHTML

• Todas las etiquetas deben cerrarse siempre

Ejemplo correcto en XHTML:<br/>

Ejemplo incorrecto en XHTML (pero correcto en HTML):<br>

5 reglas de XHTML

• Las etiquetas se tienen que cerrar de acuerdo a como se abren:

Ejemplo correcto en XHTML:<p>Este es un párrafo con <a>un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):<p>Este es un párrafo con <a>un enlace</p></a>

5 reglas de XHTML

• Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:

Ejemplo correcto en XHTML:<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):<P>Este es un párrafo con <A HREF="http://www.google.com">un enlace</A></P>

5 reglas de XHTML

• El valor de los atributos siempre se encierra en comillas:

Ejemplo correcto en XHTML:<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):<p>Este es un párrafo con <a href=http://www.google.com>un enlace</a></p>

5 reglas de XHTML

• Los atributos no se pueden comprimir:

Ejemplo correcto en XHTML:<dl compact="compact">...</dl>

Ejemplo incorrecto en XHTML (pero correcto en HTML):<dl compact>...</dl>

Etiquetas

<ul> <ol> <li>

<ul>

• Unordered List (Listas no ordenadas)• Cada objeto de la lista se define con <li>• Los tipos de viñetas se pueden cambiar pero

no es html 5

Atributo Valor Descripcióncompact compact Dibuja la lista mas pequeña de lo normal

No soportado en HTML5

type discsquarecircle

Especifica la clase de marcador que se usará en la listaNo soportado en HTML5

<ul><li>Coffee</li><li>Milk</li>

</ul>

• Coffee• Milk

<ol>

• Ordered List (Listas ordenadas)• Cada objeto de la lista se define con <li>Atributo Valor Descripción

compact compact Dibuja la lista mas pequeña de lo normalNo soportado en HTML5

type 1AAIi

Especifica la clase de marcador que se usará en la listaNo soportado en HTML5

reversed Reversed Especifica si la lista debe ser en orden descentestart <número> Especifica el valor inicial de la lista ordenada

<ol><li>Coffee</li><li>Milk</li>

</ol>

1. Coffee2. Milk

<dl>

• Definition List (Lista de definiciones)• Los elementos se definen con <dt> o <dt>• <dt> se usa para listar un término• <dd> se usa para describir un término

<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd></dl>

CoffeeBlack hot drink

MilkWhite cold drink

Listas anidadas

<ol> <li>Lesson One: Introduction to HTML

<ol><li>The structure of an HTML page</li><li>Tags, Elements, Attributes and Content</li><li>Text and Images</li><li>Forms</li>

</ol></li> <li>Lesson Two: Introduction to CSS</li><li>Lesson Three: Using Visual Studio 2012</li>

</ol>

Listas anidadas

Ejercicio

• Determinar el código

<img>

Permiten incluir imágenes dentro de la páginaAtributos propios• src=“url” Indica la URL de la imagen a mostrar• alt=“text” descripción corta de la imagen• height=“valor” indica la altura de la imagen• weigth=“valor” indica el ancho de la imagen

<img src="/imagenes/foto1.jpg" alt="Fotografía de un paisaje" width="30%" height="350" />

Ejercicio

• Modifique la página del portafolio

<form>Atributo Valor Descripciónaction <URL> Especifica donde se envían los

datos una vez son recolectados

method getpost

Especifica el método HTTP usado para enviar datos

name <texto> Establece el nombre del formularioaccept-charset

<charset> Especifica la codificación que se usará para el envío del formulario

enctype application/x-www-form-urlencodedmultipart/form-datatext/plain

Especifica como se deben encriptar los datos cuando se envían al servidor

target _blank_self_parent_top

Donde se mostrará la respuesta después de cargada

<form>

<form>.input elements.</form>

<input type=”radio">

<form><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</form>

MaleFemale

<input type="checkbox”>

<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form>

I have a bikeI have a car

<input type="text">

<form>First name: <input type="text" name="firstname"><br>Last name: <input type="text" name="lastname"></form>

First name: Last name:

<input type="password">

<form>Password: <input type=”password" name=”pwd"></form>

Password:

<input type=”button”>

<form name="input" action=”pag.asp" method="get">Username: <input type="text" name="user"><input type="button" value=”Click"></form>

Username: Click

<input type=”submit”>

<form name="input" action=”pag.asp" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form>

Username: Submit

<input type=”reset”>

<form name="input" action=”pag.asp" method="get">Username: <input type="text" name="user"><input type="reset" value="Reset"><input type="submit" value="Submit"></form>

Username: Reset Submit

<input type=”image”>

<form name="input" action=”pag.asp" method="get">Username: <input type="text" name="user"><input type=”image” src=“submit.gif”></form>

Username:

<input type=”file”>

<form action="demo_form.asp"> Select a file: <input type="file" name="img"> <input type="submit"></form>

Select a file: Select file Submit

<textarea>

<textarea rows="4" cols="50">At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea>

At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.

<select>

<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option></select>

<button>

<button type="button" onclick="alert('Hello world!')">Click Me!</button>

Click Me

<fieldset><form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset></form>

<label><form> <fieldset> <legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br> Date of birth: <input type="text"> </fieldset></form>

<label><form action="demo_form.asp"> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="male"><br> <label for="female">Female</label> <input type="radio" name="sex" id="female" value="female"><br><br> <input type="submit" value="Submit"></form>

Ejercicio1. La aplicación que se

encarga de procesar el formulario se encuentra en la raíz del servidor, carpeta "php" y archivo "insertar_cv.php" .

2. El nombre puede tener 30 caracteres como máximo, los apellidos 80 caracteres y la contraseña 10 caracteres como máximo.

3. Por defecto, debe estar marcada la casilla de suscripción al boletín de novedades.

Fundamentos de HTML

Software

Transcript of Fundamentos de HTML