HTML CSS revisión

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>
Etiqueta
Inicio
Etiqueta
Fin
Contenido
de la etiqueta

Atributos
• El atributo personaliza la etiqueta
<etiqueta atributo=“valor”></etiqueta>
<a href=“http://www.google.com”>Google</a>
Nombre
atributo
Valor del
atributo

Atributos Globales
Atributo 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ón
http://dev.w3.org/html5/spec-author-view/global-
attributes.html#the-id-attribute

<html>
Le dice al navegador que es un documento HTML
Es la raíz del documento HTML
La etiqueta <html> contiene todos los elementos
HTML de la página (excepto DOCTYPE)
Sus dos partes principales son <head> y <body>
<!DOCTYPE HTML>
<html>
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.
<!DOCTYPE HTML>
<html>
<head>
</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.
<!DOCTYPE HTML>
<html>
<head>
<title>Palabra Clave | Marca</title>
</head>
</html>

<body>
La etiqueta <body> contiene el texto visible de la
página
<!DOCTYPE HTML>
<html>
<head>
</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>
</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.

Enlaces
Son 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.html
Las 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/testh
tml.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:
<p>Este es un párrafo con <a>un enlace</a></p>
<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:
<p>Este es un párrafo con <a href="http://www.google.com">un
enlace</a></p>
<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:
<p>Este es un párrafo con <a href="http://www.google.com">un
enlace</a></p>
<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:
<dl compact="compact">...</dl>
<dl compact>...</dl>

<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ón
compact compact Dibuja la lista mas pequeña de lo normal
No soportado en HTML5
type disc
square
circle
Especifica la clase de marcador que se usará en la lista

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

<ol>
• Ordered List (Listas ordenadas)
• Cada objeto de la lista se define con <li>
compact compact Dibuja la lista mas pequeña de lo normal
type 1
A
A
I
i
Especifica la clase de marcador que se usará en la lista
reversed Reversed Especifica si la lista debe ser en orden descente
start <número> Especifica el valor inicial de la lista ordenada

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
1. Coffee
2. 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>
Coffee
Black hot drink
Milk
White 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>

Ejercicio
• Determinar el código

<img>
Permiten incluir imágenes dentro de la página
Atributos 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>
action <URL> Especifica donde se envían los
datos una vez son recolectados
method get
post
Especifica el método HTTP usado
para enviar datos
name <texto> Establece el nombre del formulario
accept-
charset
<charset> Especifica la codificación que se
usará para el envío del formulario
enctype application/x-www-form-urlencoded
multipart/form-data
text/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>
Male
Female

<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 bike
I 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”>
<input type="submit" value="Submit">
</form>
Username: Submit

<input type=”reset”>
<input type="reset" value="Reset">
</form>
Username: Reset Submit

<input type=”image”>
<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>
</form>

Ejercicio
1. 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.

HTML CSS revisión

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à HTML CSS revisión

Similaire à HTML CSS revisión (20)

Plus de Nicolas Navarro Rincón

Plus de Nicolas Navarro Rincón (6)

Dernier

Dernier (7)

HTML CSS revisión