TEMA
8: HTML
Lenguaje con el que se escriben las páginas web.
Los navegadores web son los encargados de interpretar
ese lenguaje.
La información se organiza usando etiquetas. Todos los
elementos deben estar contenidos en una etiqueta de apertura y otra
de cierre.
<etiqueta para abrir>elemento</etiqueta de
cierre>
Estructura de una página web:
<html>
<head>
</head>
<body>
<body>
</body>
</html>
<br> esta etiqueta hace un cambio de linea.
<hr> esta etiqueta muestra una linea divisoria.
Etiquetas de texto:
<p> sirve para identificar un párrafo.
<h1> </h1> Texto a tamaño grande.
<h2> </h2> Texto un poco menos que h1
…
<h6> </h6> Texto más pequeño.
<em> … </em> muestra el texto en cursiva
<u> … </u> muestra el texto subrayado
<strong> … </strong> muestra el texto en
negrita
Hiperenlaces:
<a href=”direccion web”> texto de enlace </a>
Listas desordenadas:
- Opción 1
- Opción 2
- Opción 3
<ul>
<li>
opción 1 </li>
<li>
opción 2 </li>
<li>
opción 3 </li>
</ul>
La
forma de las viñetas se puede modificar añadiendo la opción
type=circle, square o disc. Dentro de la etiqueta ul.
Listas
ordenadas:
Para
generar listas ordenadas, tan solo cambiamos la etiqueta <ul>
por <ol> y las posibles modificaciones son type=i , a
Tablas
Para
mostrar una tabla se deben usar tres etiquetas: <table> para
generar la tabla, <tr> para iniciar la fila y <td> para
iniciar columna.
<table
border=1>
<tr>
<td>
uno </td>
<td>
dos </td>
</tr>
<tr>
<td>
tres </td>
<td>
cuatro </td>
</tr>
</table>
Imagenes
Hojas de estilo
Las hojas de estilo se usan para indicarle al navegador la estética de la página.
Habitualmente se suele trabajar con un archivo paralelo al html pero nosotros incluiremos al código dentro del archivo HTM.
<html>
<head>
<style type="text/css">
...(propiedades: colocamos un identificador y editamos sus propiedades Ej. #tabla1{ ancho,alto..)...
</style>
</head>
<body>
....texto....
Las etiquetas son los identificadores que le dicen al navegador que elemento html queremos cambiar. Hay tres tipos básicos de etiquetas:
1. Selector de etiqueta html (body, table, h1, hr...)
2.Clases: es necesario incluir la definición de clase en el código html <h1 class="nombredeclase">
de referencia como:
·nombredeclase
3.Identificadores: de forma similar a las clases
<h1 id="nombredeidentif.">
#nombre-->css
Propiedades::
background-color: modifica el color de fondo
- valores:
1. Nombre en inglés
2. #_ _ _ _ _ _ (6 caracteres combinando numeros y letras)
font-family: tipo de letra ("Verdana", "Arial"...)
font-size: tamaño de la letra ( Nºpx; )
Cajas:
<div id="nombrecaja">
<h2> Texto de la caja </h2>
</div>
Propiedades que afectan a la caja:
-border
-background
-width: ancho
-height: alto
-position:
1. Absolute:
2. Relative:
<html>
<head>
<style type="text/css">
...(propiedades: colocamos un identificador y editamos sus propiedades Ej. #tabla1{ ancho,alto..)...
</style>
</head>
<body>
....texto....
Las etiquetas son los identificadores que le dicen al navegador que elemento html queremos cambiar. Hay tres tipos básicos de etiquetas:
1. Selector de etiqueta html (body, table, h1, hr...)
2.Clases: es necesario incluir la definición de clase en el código html <h1 class="nombredeclase">
de referencia como:
·nombredeclase
3.Identificadores: de forma similar a las clases
<h1 id="nombredeidentif.">
#nombre-->css
Propiedades::
background-color: modifica el color de fondo
- valores:
1. Nombre en inglés
2. #_ _ _ _ _ _ (6 caracteres combinando numeros y letras)
font-family: tipo de letra ("Verdana", "Arial"...)
font-size: tamaño de la letra ( Nºpx; )
Cajas:
<div id="nombrecaja">
<h2> Texto de la caja </h2>
</div>
Propiedades que afectan a la caja:
-border
-background
-width: ancho
-height: alto
-position:
1. Absolute:
2. Relative:
No hay comentarios:
Publicar un comentario