GUIA DE HTML
Daniel Antonio IlaquitaMullisaca
Alejandra Evelyn Cuba Apaz
Jhoselin Yoel Alarcón Apaza
Es el código utilizado en la
¿Qué es
creación de las páginas web
y su contenido, su nombre
son las siglas en inglés de
HTML?
HyperText Markup Language,
traduciéndose al español
como Lenguaje de Mercado
de Hipertexto
Sintaxis
°Sintaxis
°Etiqueta
Títulos
Texto
Lista
Imagene
Enlace
Tabla
Formularios
Multimedi
Semántic
Estructura
Sintaxis
<html>
<head>
Información técnica para el
navegador
</head>
<body>
Contenido que aparecera en la
pagina web
</body>
</html>
Etiquetas
Etiqueta Descripciòn
<!doctype> Indica la versión de HTML
<html> Es la raíz del archivo
<head> Engloba los metadatos
<title> Título en la pestaña del navegador
<link> Enlaces archivos CSS
<style> Escribe CSS dentro del doc HTML
<script> Enlaza o escribe JavaScript en el doc HTML
<meta> Características de la página
<body> Elementos visuales de la pagina
1.Títulos
El tag “title” es un tag de código HTML que le permite darle un título
a una página web.
Ej.
<head>
<title>Título de la pagina</title>
</head>
2.Texto
Para escribir texto dentro de un documento HTML simplemente tenemos que
añadir texto al fichero que contenga nuestra página web así de simple. Solo
añadimos el texto que queramos visualizar.
Ej. <body>
<p>hola mundo</p>
<body>
3.Imágenes
Para incluir imagen en el contenido de ina página utilizaremos la etiqueta
<img> que una etiqueta muy sencilla que dispoe de varios atributos para
modificar como se vera la imágen.
img <img src="" alt="" />
Anchura y Altura
Puedes usar los atributos ancho (width) y alto (height) para especificar la
anchura y altura de tu imagen. Puedes encontrar el ancho y el alto de tu
imagen de diversas maneras. Por ejemplo, en Mac puedes usar Cmd + I para
mostrar información del archivo de imagen. Volviendo a nuestro ejemplo,
podríamos hacer esto:
Ej.
width="400"
height="341" />
4.Listas
Las listas originalmente están pensadas para citar, numerar y definir cosas
a través de características, o al menos así lo hacemos en la escritura de
textos. Sin embargo, las listas finalmente se utilizan para mucho más que
enumerar una serie de puntos, en realidad son un recurso muy interesante
para poder maquetar elementos diversos, como barras de navegación,
pestañas etc.
Listas Desordenadas
Son delimitadas por las etiquetas UL y su cierre (unordered list). Cada uno
de los elementos de la lista es citado por medio de una etiqueta LI (La LI
tiene su cierre, aunque si no lo colocas el navegador al ver el siguiente LI
interpretará que estás cerrando el anterior). La cosa queda así:
<p>Deporte</p>
<ul>
<li>Natación</li>
<li>Basquet</li>
<li>Futbol</li>
</ul>
Listas Ordenadas
Las listas ordenadas sirven también para presentar información, en diversos
elementos o items, con la particularidad que éstos estarán predecidos de un número o
una letra para enumerarlos, siempre por un orden.
Para realizar las listas ordenadas usaremos las etiquetas OL (ordered list) y su cierre.
Cada elemento sera igualmente indicado por la etiqueta LI, que ya vimos en las listas
desordenadas.
Del mismo modo que para las listas desordenadas, las listas ordenadas ofrecen la
posibilidad de modificar el estilo. En concreto nos es posible especificar el tipo de
numeración empleado eligiendo entre números (1, 2, 3...), letras (a, b, c...) y sus
mayúsculas (A, B, C,...) y números romanos en sus versiones mayúsculas (I, II, III,...)
y minúsculas (i, ii, iii,...).
Listas Ordenadas
Ej.
<p>Reglas del deporte</p>
<ol>
<li>No rendirse
<li>Energia para cada dia de entrenamiento
</ol>
Listas de Definición
Las listas de definición sirven para hacer un conjunto de elementos con pares
concepto-descripción. Es decir, se especificarán varios términos por su nombre y se
escribirá una definición para cada uno. Cada elemento es presentado junto con su
definición, uno detrás de otro.
Para realizar una lista de definición, ja etiqueta principal es DL y su cierre (definition
list). La etiquetas del elemento y su definición son DT (definition term) y DD (definition
definition) respectivamente.
Listas de Definición
Ej. <p>Bolivia </p>
<dl>
<dt> La Paz
<dd>Ciudad Maravilla
<dt>Oruro
<dd>La Alta Tierra de los Urus
</dl>
Enlaces
Los enlaces permiten a los usuarios navegar y acceder rápidamente a diferentes
páginas web, mejorando la experiencia de usuario y la estructura de un sitio.
Para utilizar la etiqueta hay que definir el enlace:
Ej.
Tablas
Las tablas se usan para mostrar datos tabulados (formato de filas y columnas), tipo
una hoja de cálculo. Las tablas NO deben usarse para maquetar una Web. La etiqueta
table ... /table es el contenedor de la tabla y por tanto las filas y columnas de una
tabla deben estar dentro de este par de etiquetas.
Ej. <table border=´´1´´>
<tr>
<td> subtítulo </td>
