Diseño de Sitios Web
UNIDAD Nº I
Sobre Html
¿Qué es HTML?
Es un lenguaje en base a etiquetas.
Se usa principalmente para la elaboración de páginas web.
Sólo sirve para la organización y estructuración del contenido dentro de la página, no para su diseño.
Editores de Texto
Lo primero que se necesita para comenzar a hacer un documento html es un editor de texto, o en su defecto, es posible trabajar simplemente en un block de notas.
Algunos editores recomendados son:
Notepad++
SublimeText
Este es un ejemplo de una estructura simple en HTML
Estructura Básica:
<!DOCTYPE html> Esta etiqueta define el documento como HTML5, la versión más actual de HTML.
<html> Es necesario tener la etiqueta html porque funciona como raíz de la estructura.
Esta debe tener una apertura…
</html> Y un cierre, que se marca comenzando con /.
<head>
</head> Dentro de la etiqueta raíz estará la etiqueta head, nuevamente con una apertura y cierra. Contendrá toda la información del documento.
<body>
</body> La etiqueta body es la que almacenará todo el contenido de la página.
<!DOCTYE html>
<html>
<head>
</head>
<body>
</body>
</html>
Entendiendo esta estructura básica, ya puedes ir conociendo las distintas etiquetas que servirán para comenzar a armar una página web.
Etiquetas Básicas
HTML cuenta con una gran cantidad de etiquetas, de las cuales a continuación le mostramos alguna de las más básicas y útiles para comenzar:
h1: Los encabezados son los elementos que funcionan como título dentro de un documento. Estos se separan en 6 niveles, yendo desde el h1 en mayor nivel, hasta h6 en menor.
p: Los párrafos son bloques de texto que se alinean por defecto a la izquierda de la pantalla.
Cada vez que se utilice un párrafo, se tomará como un solo conjunto de texto, es decir, si se utilizan dos etiquetas de párrafo por separado, el contenido se mostrará igualmente por separado.
Ejemplo 1:
Ejemplo 2:
br: Son saltos de línea. Sirven para separar un contenido de otro, agregando un espaciado entre ellos.
Ejemplo 1
Ejemplo 2
hr: Un hr permitirá separar de forma visible el contenido, agregando una línea horizontal.
Ejemplo 1 Ejemplo 2
a: Un hipervínculo es un enlace a una página web.
Ejemplo:
img: Con la etiqueta img se podrán insertar imágenes, estas respetaran su tamaño original si no se redimensionan.
Esta etiqueta no necesita tener un cierre.
Atributos:
Algunas etiquetas necesitan contar con atributos para tener información más específica sobre ellas. Por ejemplo, una etiqueta <a> no funcionará como link hasta que se le incluya el atributo “href” en donde debe ir la dirección del enlace:
Otro atributo importante se encuentra dentro de las etiquetas <img>, que al igual que ocurre con una etiqueta <a>, no se mostrará ninguna imagen hasta que se añada el atributo “src” y es en donde debe ir la ruta o vinculo de la imagen.
Los atributos de tamaño Width (Ancho) y Height (Alto) permitirán definir el tamaño exacto de un elemento.
Ejemplo 1
Ejemplo 2
Ahora que ya conoces los conceptos básicos de HTML, volvamos a la estructura que vimos al comienzo, en ella podemos ver algunos de los conceptos que ya has aprendido.
Con los conceptos que has aprendida de html, intenta hacer el siguiente ejercicio.
Crea un documento html que al verlo en el browser, tenga una aspecto como este:
Observa que el primer texto está escrito con letras grandes que corresponden a la etiqueta h1.
Luego, le sigue una línea horizontal, que corresponde a la etiqueta hr.
El siguiente texto está escrito con letras más pequeñas, que corresponden a la etiqueta p.
Le sigue otra línea horizontal, etiqueta hr.
El último texto es un hipervínculo, se encuentra dentro de la etiqueta h6, con un href.
Observa el código de resolución a continuación:
<!DOCTYPE html>
<html>
<head>
</head>
<p> Curso de HTML</p>
<h6>
<a href=www.iplacex.cl<Iplacex</a>
</h6>
</body>
</html>
Puedes programar directamente en un txt y guardarlo como .html
Pero te recomendamos que utilices algún editor de código, como Sublime, ya que este te ayudará al momento de programar.
