miércoles, 24 de octubre de 2012
Capitulo 2
Al ver el código HTML de una página Web funcional
La mayoría de los editores de
texto no le permiten abrir una página web directamente desde Internet. Para
hacerlo, tendrían que ser capaces de enviar una solicitud a través de Internet
a un servidor web, que es un trabajo mejor dejar a un navegador web. Sin
embargo, los propios navegadores te dan la oportunidad de ver el HTML puro de
una página web. Esto es lo que debe hacer:
1. Abra su navegador preferido.
2. Vaya a la página Web que desea
examinar.
3. En el explorador, haga clic en
la página y haga clic en Ver código fuente (en Internet Explorer) o Ver código
fuente de página (en Firefox y Chrome).
Una vez realizada la selección, aparecerá una nueva ventana,
mostrando el HTML puro que crea la página web que usted ve.
Creación de un archivo HTML
Aquí está uno de los secretos
mejor guardados de la escritura de la página web: Usted no necesita un sitio en
línea para comenzar a crear sus propias páginas web. Eso es porque fácilmente
se puede construir y probar las páginas utilizando sólo tu propio ordenador. De
hecho, usted ni siquiera necesita una conexión a Internet.
El enfoque básico es simple:
1. Use su editor de texto
favorito.
2. Comience a escribir el
contenido HTML.
Por supuesto, esta parte es un
poco complicada, ya que no han explorado el estándar HTML todavía. Espera ayuda,
está en camino en las siguientes secciones. Por ahora, puede utilizar el
siguiente código HTML muy simple. Sólo tienes que escribir exactamente como
aparece, texto, barras, soportes puntiagudos, y todas:
<h1>United
Popsicle Workers Union</h1>
<p>We
fight for your rights.</p>
Técnicamente, este documento de dos
líneas le falta algunos detalles estructurales que las páginas web deben tener
respectivamente. Sin embargo, todos los navegadores pueden leer este fragmento
de código HTML e interpretar correctamente lo que quiere: las dos líneas de
texto con formato se muestra en la Figura 2-2.
3. Cuando termine su página web,
guardar el documento.
En Bloc de notas, comience eligiendo
Archivo ➝ Guardar. En la parte inferior de la ventana de diálogo Guardar como, en la lista Codificación, elija UTF-8. (Su página web
funcionará incluso si usted no se toma este
paso, pero sigue validadores feliz.)
En TextEditor de texto, tiene que
elegir primero Formato ➝ Convertir en texto normal para
asegurarse de que el programa guarda la página como
un archivo de texto normal (y no es un documento rico, binario). A
continuación, puede utilizar Archivo ➝ Guardar para guardar el archivo. En
el cuadro de texto sin formato de codificación,
seleccione Unicode (UTF-8).
Cuando se nombre al archivo, utilice la extensión. Htm o. Html
(véase la nota siguiente). Por ejemplo, un nombre típico archivo HTML es
LimeGreenPyjamas.html. Si utiliza TextEdit, el programa puede preguntar si
usted realmente desea utilizar la extensión htm o html en lugar de txt, el
estándar de archivo de texto,.... ". Uso htm" click Ningún paso se
requiere tal en el Bloc de notas. Sin embargo, en la opción "Guardar como
tipo" caja de texto, usted tendrá que elegir todos los archivos (*. *) En
lugar de documentos de texto (*. Txt) si desea ver los archivos HTML en la
lista de archivos.
Etiquetas
HTML
Ahora que sabes cómo mirar en los
archivos HTML existentes y cómo crear su propio, el siguiente paso es entender
lo que sucede dentro del archivo HTML normal. Todo gira en torno a un único concepto-tags.
Etiquetas HTML está formateando
instrucciones que indican a un navegador como transformar texto ordinario en
algo visualmente atractivo. Si usted fuera a tomar todas las etiquetas de un
documento HTML, la página resultante consistiría nada más de texto plano, sin
formato.
La
estructura básico
Ahora que
usted ha elegido el tipo de documento, usted está listo para llenar el resto de
su página web.
Para crear
un documento HTML verdadero, se inicia con tres elementos contenedores:
<html>, <head>, y <body>. Estos tres elementos trabajan en
conjunto para describir la estructura básica de su página:
<html>
Este
elemento envuelve todo (que no sea el tipo de documento) en su página web.
<head>
Este
elemento designa la parte del encabezado del documento. El encabezado puede
incluir alguna información opcional acerca de su página web, incluyendo el
título requerido (que su navegador muestra en la barra de título), las palabras
clave de búsqueda opcionales, y una hoja de estilos opcional (que usted
aprenderá acerca de en el capítulo 6).
<body>
Este
elemento contiene la carne de su página web, incluyendo el contenido real que
se desea mostrar al mundo.
Sólo hay
una manera correcta de combinar estos tres elementos. Aquí está su correcta
disposición, con el doctype HTML5 al comienzo de la página:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Cada
página web utiliza esta estructura básica. Los puntos suspensivos (...)
muestran dónde insertar información adicional. Los espacios entre las líneas no
son necesaria-están ahí para ayudarle a ver la estructura del elemento con
mayor facilidad.
Una vez
que tenga el esqueleto HTML en el lugar, es necesario agregar dos elementos
contenedores a la mezcla. Cada página web requiere un elemento <title>,
que va en la sección de encabezado. Después, usted necesita para crear un
contenedor de texto en la sección <body> de la página. Una para todo uso
contenedor de texto es el elemento <p>, que representa un párrafo.
He aquí un
vistazo más de cerca a los elementos que necesita para agregar:
<title>
Este
elemento establece el título de su página web. El título juega varios papeles.
En primer lugar, los navegadores web mostrar el título en la parte superior de
la ventana del navegador. En segundo lugar, cuando una página web de su
visitante de la página, el navegador utiliza el título de etiquetar el marcador
en el marcador (o favoritos) del menú. En tercer lugar, cuando la página se
convierte en una búsqueda en la Web, el motor de búsqueda por lo general
muestra este título como la primera línea en los resultados de búsqueda,
seguido de un fragmento de contenido de la página.
<p>
Esto
indica un párrafo. Exploradores Web no sangrar los párrafos, pero sí añadir un
poco de espacio entre párrafos consecutivos para mantenerlos separados.
Aquí está
la página web con estos dos ingredientes nuevos:
<!
DOCTYPE html>
<html>
<head>
<title>
todo lo que sé acerca de diseño web </ title>
</ head>
<body>
</ p>
</ body>
</ html>
miércoles, 12 de septiembre de 2012
Preguntas
Cuales son mis expectativas de la clase
aprender a desarrollar aplicaciones web con el lenguaje html5, el cual es el mas reciente.
realizar sitos web.
Que conozco de desarrollo web
conozco poco, solo lo básico, debido a que cuando lleve este curso solo nos enseñaron lo básico, a desarrollarlo en blog de notas, y apenas me estoy interesando en el desarrollo web, siento que es un buen negocio el administrar sitios web
aprender a desarrollar aplicaciones web con el lenguaje html5, el cual es el mas reciente.
realizar sitos web.
Que conozco de desarrollo web
conozco poco, solo lo básico, debido a que cuando lleve este curso solo nos enseñaron lo básico, a desarrollarlo en blog de notas, y apenas me estoy interesando en el desarrollo web, siento que es un buen negocio el administrar sitios web
martes, 11 de septiembre de 2012
HTML
HTML
La primera descripción de HTML disponible públicamente fue un documento llamado: HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991.2 3 Describe 22 elementos que incluyen el diseño inicial y relativamente simple de HTML.
HTML consta de varios componentes vitales, entre ellos los elementos y sus atributos, tipos de data y la declaración de tipo de documento.
Atributos
La mayoría de los atributos de un elemento son pares nombre-valor, separados por un signo de igual «=» y escritos en la etiqueta de comienzo de un elemento, después del nombre de éste. El valor puede estar rodeado por comillas dobles o simples, aunque ciertos tipos de valores pueden estar sin comillas en HTML (pero no en XHTML). De todas maneras, dejar los valores sin comillas es considerado poco seguro. En contraste con los pares nombre-elemento, hay algunos atributos que afectan al elemento simplemente por su presencia.
HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer en su navegador el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador.
Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que (<>), y algunas tienen atributos que pueden tomar algún valor. En general las etiquetas se aplicarán de dos formas especiales:
- · Se abren y se cierran, como por ejemplo: <b>negrita</b>, que se vería en su navegador web como negrita.
- · No pueden abrirse y cerrarse, como <hr />, que se vería en su navegador web como una línea horizontal.
- · Otras que pueden abrirse y cerrarse, como por ejemplo <p>.
Las etiquetas básicas o mínimas son:
<!DOCTYPE HTML>
<html>
<head>
<title>Ejemplo1</title>
</head>
<body>
<p>ejemplo1</p>
</body>
</html>
Diferencia entre HTML4 y HTML5
Diferencia entre HTML4 y HTML5
Un cambio que ahora estamos viviendo es el nacimiento de HTML5, una nueva revisión del estándar que mueve Internet y hace posible que ahora estemos interactuando (los usuarios que leen la página).
El término HTML posee una sintaxis compatible con HTML4 y XHTML1 publicados en la red, pero no compatible con las características más esotéricas del SGML de HTML4.
HTML5 define detalladas reglas de parse, incluyendo un control de errores, para que esta sintaxis sea compatible con las implementaciones más populares. Los agentes de usuario seguirás las mismas reglas que para los que actualmente tienen text/html.
La otra sintaxis que se puede utilizar para HTML5 es el llamado XHTML5, que no es más que una sintaxis compatible con XML y documentos correctos en XHTML1.
El nuevo HTML5 requiere el elemento DOCTYPE que debe ser declarado al principio de la página, de esta forma nos aseguramos de que el navegador renderiza la página en modo estándar. En cambio para la versión XHTML5 este elemento es opcional debido a que XML actúa de diferente manera dentro de nuestro navegador.
Nuevos atributos
HTML 5 ha introducido una gran cantidad de nuevos elementos para varios elementos de los que ya disponemos en la HTML4.
- media: Para conseguir una mayor consistencia con el link en los elementos <a />
- ping: Especificacremos una lista separada por espacios donde produciremos un ping cuando se siga el enlace, para los elementos <area /> y <a />
- target: Disponible para mejorar la consistencia con el elemento <a />.
- autofocus: Destinado para indicar el elemento <input /> (no hidden), <select />, <textarea /> o <button /> que ha de coger el foco al cargar la página.
- form: Atributo para <input />, <ouput />, <select /> <textarea />, <button /> y <fieldset /> que permite que se sococien con un simple formulario.
- replace: atributo para <input /> <button /> y <form /> que le afectará cuando el contenido del elemento sofra algún cambio.
- data: Para <form />, <select /> y <datalist />.
- required: Para elementos <input /> (Excepto hidden e image) y <textarea />, indica que el campo es obligatorio.
- inputmode: Atributo para <input /> y <textarea />.
- disabled: Para <fieldset />, permite desactivar el fieldset completo.
- autocomplete, min, max, pattern, step: Para elementos <input /> permite delimitar las posibilidades de nuestros elementos de entrada.
- list: Para elementos <datalist /> y <select />.
- template: Para <input /> y <button /> podrá usarse para repetir templates.
- scoped: Para elemento <style />, permitirá usar hojas de estilo “scoped” ??
- async: Para el elemento <script /> el ajax hecho atributo.
Atributos globales
- Aparte de los ya existentes: class, dir, id, lang y title.
- contenteditable: indica que se trata de una área editable.
- contextmenu: Puede ser usado como punto de menú contexctual proporcionado por el usuario.
- draggable: indica que se trata de un elemento draggable.
- tabindex: indica la posición numérica a la que llegaremos pulsando la tecla TAB.
- irrelevant: atributo que indica que el contenido no es relevante.
- repeat, repeat-start, repeat-min, repeat-max: atributos referentes a las iteraciones.
Elementos Cambiados
Estos elementos de HTML5 son imcompatibles con HTML4.
- El elemento <a /> sin href ahora creará un enlace al sitio.
- El elemento <address /> es ahora un nuevo concepto de sección.
- El elemento <b /> ahora representa un trozo de texto a ser estilizado sin ninguna importancia.
- Para elementos <label /> el navegador no debe mover el foco desde la etiqueta al control a menos que el comportamiento sea estandar para el interfaz utilizado en la plataforma.
- <menu /> ha sido redefinido para ser usado con los actuales menús.
- El elemento <small /> ahora representa una impresión pequeña.
- El elemento <strong /> definitivamente representa el enfasis puesto en trozo de nuestro texto.
jueves, 30 de agosto de 2012
miércoles, 29 de agosto de 2012
JavaScript
JavaScript es un lenguaje de programación que es utilizado para crear paginas web dinámicas.
Una pagina web dinánica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, ventanas de aviso al usuario, entre otras cosas.
Los programas escritos con javaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermediarios.
La integración de JavaScript y HTML es muy flexible, ya que existen al menos tres formas para incluir código JavaScript el las paginas web.
El codigo JavaScript se encierra entre etiquetas <acript> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la pagina, se recomienda definir el código JavaScript dentro de la cabecera del documento (en la etiqueta <head>):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Para que la página XHTML resultante sea váñida, es necesario añadir el atributo type a la etiqueta <script>. Los valores que se incluyen en el atributo type están estandarizados y para el caso JavaScript, el valor correcto es text/javascript.
Este método se emplea cuando se define un bloque pequeño de código o cuando se quiere incluir instrucciones específicas en un determinado documento HTML que completen las instrucciones y funciones que se incluyan por defecto en todos los documentos del sitio web.
Una pagina web dinánica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, ventanas de aviso al usuario, entre otras cosas.
Los programas escritos con javaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermediarios.
La integración de JavaScript y HTML es muy flexible, ya que existen al menos tres formas para incluir código JavaScript el las paginas web.
El codigo JavaScript se encierra entre etiquetas <acript> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la pagina, se recomienda definir el código JavaScript dentro de la cabecera del documento (en la etiqueta <head>):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Para que la página XHTML resultante sea váñida, es necesario añadir el atributo type a la etiqueta <script>. Los valores que se incluyen en el atributo type están estandarizados y para el caso JavaScript, el valor correcto es text/javascript.
Este método se emplea cuando se define un bloque pequeño de código o cuando se quiere incluir instrucciones específicas en un determinado documento HTML que completen las instrucciones y funciones que se incluyan por defecto en todos los documentos del sitio web.
Suscribirse a:
Entradas (Atom)