Realiza los Desafíos y el Examen --------------------------------------------------------- Nuestra primera página web Realiza los desafíos que se muestran -------------------------------------------------------------
¿Qué es HTML?
·HTML(HyperTextMarkupLanguage) o "Lenguaje para Marcado de Hipertexto".
·HTMLes el lenguaje que te permite describir y dar forma a tús páginas Web.
·Publica tus propias páginas con fotos, listas, tablas, etc.
·Obtén información de los visitantes de tu sitio.
·Diseña los formularios que te permitirán contactar tus futuros clientes.
·Crea un sitio para vender tús productos o servicios.
·Incluye video clips, música, sonidos, y otras aplicaciones que darán vida a tús páginas Web
* Aprenderemos como escribir la estructura de nuestro sitio con HTML. Esta estructura nos pondrá listo el contenido del sitio, el cual añadiremos en la siguiente lección. Si fuéramos a comparar el proceso de diseño web con una construcción, el HTML sería como las bases y la estructura del edificio, es decir, es la base sobre lo que todo lo demás se construye.
¿Qué conocimientos previos debes poseer?
Para estudiarHTMLnose requiere de conocimientos previos en programación. Es muy simple de aprender ya que no es un lenguaje de programación sino que es un lenguaje de marcas.
Los archivos HTML
·Los archivosHTMLdeben tener una extensiónhtmohtml(ej. misitio.htmo misitio.html).
·Para crear un archivoHTMLsolo hace falta uneditor de texto.
·Un archivoHTMLestá compuesto poretiquetas.
·Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Google Chrome, Opera, Safary, etc.)como mostrarla página Web.
<html>--> Indica al navegador que abre un archivo HTML.<head>--> Apertura de la cabecera del documento. Sección que no se muestra en la pantalla.<title>Mi primera página Web</title>--> Título de la página.</head>--> Cierre de la cabecera del documento.<body>--> Apertura del cuerpo del documento. Esta sección aparece en la pantalla.Hola a todos.--> Texto que va a ser mostrado por el navegador.</body>--> Cierre del cuerpo del documento.</html>--> Cierre del archivo HTML
La primera etiqueta del archivo es<html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos</html>. Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página.
Luego vemos la etiqueta<head>. Lo que sigue a continuación hasta su cierre</head>, es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página(<title>Mi primera página Web</title>), palabras claves para los motores de búsqueda, una descripción de la página y otros datos del documento.
Entre las etiquetas<body>y</body>se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola a todos.".
Nota:observa que todas las etiquetas de cierre se diferencian de las de apertura por llevar"/"antes del nombre.
Lenguaje de Marcas de Hypertexto, HTML, es un lenguaje que marca que califica el contenido de un sitio para que un navegador lo entienda y lo muestre en pantalla. Da estructura a un archivo de texto regular que un navegador, de otro modo no sería capaz de leer.
Por ejemplo, no podemos escribir un párrafo desde el teclado en nuestro editor de texto y esperar que un navegador sepa sencillamente que esto es un párrafo. Los párrafos de texto tiene que estar dentro de la clasificación HTML correcta, un párrafo o un elemento <p> (cualquier señal de texto con buen aspecto como <p>aquí solamente muestra que este texto también es código)
Elementos
HTML está construido de elementos que tienen significados importantes, como el elemento de párrafo que se menciono arriba. Cada elemento tiene una etiqueta de apertura (al principio) y una de cierre (al final), con el contenido del sitio escrito entre estas dos etiquetas.
Estas etiquetas de apertura y cierre para cada elemento están escritas dentro de corchetes angulares (como estos: < >, aunque la etiqueta de cierre tiene una barra inclinada (como esta: < / >).
Planificando una Estructura
En el curso anterior elaboramos nuestro diseño del sitio web y ahora es el momento de preparar la estructura, o encuadra, de este diseño.
Empezaremos esto añadiendo algunas notas generales de nuestro sitio anterior para conseguir una mejor sensación de cómo identificar mejor esto.
Dentro del body de nuestro archivo html tendremos varios elementos primarios: unheader, un main y un footer
Preparando Nuestro Documento
Además, hablamos acerca de como ajustar los archivos del sitio en la lección anterior, ¡así que ahora vamos a poner este conocimiento en acción!
Primero, creamos una carpeta en nuestra computadora y la nombraremos “tutsfolder”.
Ahora, es el momento de abrir ese editor de texto que esta listo y, también, esperando que algo asombros ocurra.
Después, creamos una nueva carpeta con este editor (por lo general, seleccionando Archivo > Archivo Nuevo y lo guardamos como “index.html” en nuestra carpeta “tutsfolder”.
Recuerda: “index” es el nombre del archivo y “.html” es la extensión, que nos dice el tipo de archivo que es.
Los sitios web pueden estar hechos por muchas, muchísimas páginas, no obstante, la página principal siempre la llamaremos “index.html” para decir “¡Hey, aquí es donde todo empieza!”
Ahora, escribamos, al fin, algo de HTML.
Construyendo una Estructura
Ahora podemos añadir nuestra estructura. Nuevamente, piensa en esto como cuando unes la estructura de un edificio, así que necesitamos establecer la estructura en su lugar.
La primera pieza de HTML que escribiremos es el <!DOCTYPE html> el cual le dice al navegador “¡Hey, éste es un documento HTML!”.
1
<!DOCTYPEhtml>
Luego, debajo de eso, necesitamos el elemento <html>:
1
2
3
4
<!DOCTYPEhtml>
<html>
</html>
Todo lo demás será anidado dentro de este elemento.
Espera. ¿Anidar?
“¿Cómo los nidos de las aves?” Bueno, quizá sería mejor decir un armario de muñecas, o para no apartarnos del tema principal, edificios anidados. Anidar es lo que pasa cuando colocamos un elemento dentro de otro.
La muestra de código abajo muestra un elemento de párrafo anidado dentro de elemento body, esto debido que vive dentro de las etiquetas de elemento body.
1
2
3
<body>
<p>This paragraph element is nested inside the body element.</p>
</body>
Hacemos el código de nuestro archivo HTML más fácil de leer poniendo elementosanidados más a la derecha. Como esto:
OK, volvamos de nuevo a trabajar
El elemento Head
Ahora, anidado dentro de este elemento html, queremos añadir el elemento head.
El elemento head contiene la etiqueta title de nuestra página, la cual muestra el titulo de nuestra página en la pestaña del navegador. ¡Mucho anidamiento!
1
2
3
4
5
<html>
<head>
<title>Tuts Town</title>
</head>
</html>
Muchos de los elementos incluidos en el head de un documento HTML no se ve en el sitio web, sin embargo, aporta una ayuda diciéndole a los motores de búsqueda, como Google, acerca de qué trata nuestro sitio web.
Además, más adelante, cuando tengamos que crear un archivo nuevo para añadir estilos a éste, tendremos que conectar los dos documentos a través de un enlace que agregaremos en el head. Por lo tanto, esto es como si detrás del centro de las escenas de control de nuestro sitio web, los visitantes no consiguen ver la mayor parte.
El elemento Body
Todo lo que veremos en nuestro sitio en el navegador será anidado dentro del elemento body, ¡y aquí es dónde empieza la diversión!
El elemento Header
El elemento header no es lo mismo que el elemento head del que ya hemos hablado. El header vive dentro del elemento body y, por lo general, contiene todas las cosas que van en la parte superior de la página.
La primera cosa que tenemos en la parte superior de nuestro sitio es el header, el cual contiene algunos textos y una imagen de Tuts+ Town.
1
2
3
4
5
6
7
8
<html>
<head>
<title>Tuts Town</title>
</head>
<body>
<header></header>
</body>
</html>
Solamente añadiremos el header por ahora para prepararlo para el contenido que va a ser publicado.
La parte principal
La parte principal del sitio Tuts+ Town contiene la información más importante. La lista de las empresas de la ciudad es acerca de lo que trata nuestro sitio web, así que todo este contenido vivirá dentro de un elemento llamado main.
Hablaremos de contenedores más pequeños (como los tres diferentes grupos: Sleep, Food y Shop) dentro de este contenedor más grande que es main, pero lo haremos en la próxima lección cuando añadamos contenido.
El elemento Footer
El footer es la parte al final del sitio. Por lo general, veremos algunos enlaces aquí, tales como Facebook y Twitter, o algunos textos pequeños, sólo para dejarle saber a las personas quienes crearon el sitio.
Agregaremos una oración, orgullosamente diciendo que hicimos el sitio dentro del elemento footer.
1
<footer> </footer>
Recuerda: en este punto todavía añadiremos elementos que están anidados dentro del body.
Revisión final
Ahora, vamos hacer una revisión final de nuestra estructura HTML hasta ahora.
Es muy fácil olvidar cerrar las etiquetas, lo cual puede causar algunos errores en nuestro sitio web. Queremos asegurarnos que todas las etiquetas abiertas tienen una etiqueta de cierre.
¡Bueno, parece como si todo estuviera encerrado! Es el momento de empezar añadiendo contenido a esta estructura super sólida que hemos creado.
Notas rápidas sobre Notas
HTML nos deja escribir notas útiles dentro de nuestro trabajo. Estas notas no se muestran en nuestro sitio web, pero son magnificas para agregar pedacitos de información útiles para otros diseñadores que busquen en nuestro código.
1
<!-- Anything in between these set of symbols is a comment that our browser cannot read, sort of like a little secret for designers only. -->
El archivo HTML para esta lección (el cual puedes descargar) tiene varias notas para ayudarte a entenderlo mejor.
HTML nos permite definir el formato de visualización del texto en la pantalla.
Muy útil para cuando queramos resaltar o enfatizar un texto en especial.
También muy usado para subrayar o escribir subíndices o superíndices.
Estos, son solo algunos ejemplos de lo que podemos hacer con estos elementos
Para ello utilizamos las siguientes etiquetas
Copia y pega en el bloc de notas los sigtes ejercicios
Guarda el archivo como "ejercicio.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML) en la carpeta Documentos.
Ahora debes ir a la carpeta Documentos y haz doble clic en ejercicio1.html". El navegador mostrará la página recién creada.
EJERCICIO 1
<html> <head> <title>Mi primera página Web</title> </head> <body> Hola a todos. </body> </html>
EJERCICIO 2
<html>
<head> <title>Mi primera página Web</title> </head> <bodybgcolor="#FFFF00">
Hola a todos.
<b>Este texto es en negrita</b>. </body> </html>
EJERCICIO 3
<html>
<head> <title>Mi primera página Web</title> </head> <bodybgcolor="#FFFF00">
Hola a todos.
<b>Este texto es en negrita</b>.
<h1>Título de tamaño h1</h1>
<h2>Título de tamaño h2</h2>
<h3>Título de tamaño h3</h3>
<h4>Título de tamaño h4</h4>
<h5>Título de tamaño h5</h5>
<h6>Título de tamaño h6</h6>
<hr>
<p>Este es el primer párrafo.</p> <p>Y este es el segundo párrafo.</p>
Esto es<br>un salto de lí<br>nea.
</body> </html>
EJERCICIO 4
<html>
<head> <title>Mi primera página Web</title> </head> <bodybgcolor="red">
LISTAS DE DEFINICIÒN <dl> <dt>Chocolate</dt> <dd>Elaborado a base de cacao</dd> <dt>Caramelo</dt> <dd>Elaborado a base de azúcar</dd> </dl>
</body>
</html>
EJERCICIO 13
Escribe el código que muestre la sigte.página
EJERCICIO 14 - cambiar color tamaño y tipo de letra , insertar una imagen con ancho alto y borde
<html> <head> <title>INFORMATICA 20156</title> </head> <body bgcolor="#FFCC99"> <h1> Quinto Año </h1> <hr> <bl> <bl> <p align="left"> <em> Somos un grupo de alumnos de Quinto año del Colegio San Carlos <br> Desde esta página intentaremos aprender HTML </em> </p> <font FACE="ARIAL" color="red" SIZE="30">Este texto está en rojo</font> <img src="logo.jpg" alt="San Carlos" width="622" height="485" border="8"> </body> </html>
No hay comentarios:
Publicar un comentario