Note pad++ es uno de tantos editores de texto para html
Es el que vamos a usar en nuestro curso
Se utiliza la etiqueta:
<head> … </head>
Se debe acompañar de la etiqueta
<title> … </title>
Sirve para la pestaña de arriba de mi
página web
Se utiliza la etiqueta:
<body> … </body>
Sirve para la poner toda la
información en la propia página.
Se utiliza dentro de la etiqueta:
<body> … </body>
Queda así:
<body style="background-color:#FF0000;">
</body>
Sirve para la poner color en código HTML en la propia página.
Se utiliza la etiqueta <font> … </font>
Detrás de la etiqueta Font se ponen
atributos:
color, tamaño, tipo de letra
Para centrar el texto se pone la etiqueta
<center>… </center>
Se utilizan las etiquetas:
• Espaciado hipertexto: <p> párrafo </p>
• Espaciado normal de texto: <br> no se cierra
• Negrita: <b> texto en negrita </b>
• Itálica: <i> texto en itálica </i>
• Subrayado: <u> texto subrayado </u>
• Frase: <blockquote> texto citado </blockquote>
• Cita de autor: <cite> Autor </cite>
Nos centramos en algunas etiquetas:
• Espaciado hipertexto: <p> párrafo </p>
Para justificar el texto se pone:
• < p align=“justify”> texto justificado </p>
• < p align=“right”> texto justificado a la derecha </p>
• < p align=“left”> texto justificado a la izquierda </p>
Se añade a <p>
Sirve para cuadrar el texto en la página web (que no ocupe de lado
a lado):
• <p align="justify" , style="margin-left:70px ;
margin-right:70px">
• Se añaden pixels en el margen derecho e
Izquierdo para reducir espacio escrito.
Etiqueta para poner una línea separadora:
• Línea separadora : <hr/> no se cierra
• Algunos atributos son:
• <hr size=“8px” color=“red” width=“75%”>
Algunas etiquetas también muy útiles:
• Subíndice: Texto<sub> subíndice </sub>
Texto subíndice
• Superíndice : Texto <sup> superíndice </sup>
Texto superíndice
• Tachar texto: <s> Texto tachado </s>
Es una instrucción que no se cierra:
Tantas veces lo pongas tantos espacios te deja en la primera línea
de texto.
Se utiliza la etiqueta:
<a
href=“[Link]
IES ALFREDO KRAUS </a>
Sirve para que al pinchar en la
palabra que está dentro de la
etiqueta se vaya a una página web
de terminada.
Se añade a la etiqueta anterior el atributo target:
<a target=”_blank” href=“[Link]
IES ALFREDO KRAUS
</a>
Sirve para que al pinchar en la palabra que está dentro de la etiqueta
se vaya a una página web de terminada en una página diferente.
Se utilizan mucho para hacer menús de contenidos
Se pueden anidar: poner unas listas
dentro de otras.
La etiqueta es
<ul>
<li> Item #1 </li>
<li> Item #2 </li>
<li> Item #3 </li>
</ul>
Se añade la etiqueta explicada en el apartado 6.
La estructura sería
<ul>
<li> <a href=“#direccion1”> Item #1 </a></li>
<li> <a href=“#direccion2”> Item #2 </a></li>
<li> <a href=“#direccion3”> Item #3 </a></li>
</ul>
Se añade la etiqueta <ul> tantas veces como haga falta
La estructura sería:
<ul>
<li> <a href=“#direccion1”> Italia </a></li>
<ul>
<li> Roma </li>
<li> Venecia </li>
<li> La Toscana </li>
</ul>
<li> <a href=“#direccion2”> Francia </a></li>
</ul>
Se añade la misma estructura del apartado 6, con la etiqueta <ol>.
La estructura sería
<ol>
<li> <a href=“#direccion1”> Item #1 </a></li>
<li> <a href=“#direccion2”> Item #2 </a></li>
<li> <a href=“#direccion3”> Item #3 </a></li>
</ol>
En este apartado lo más importante es colocar la imagen en la misma
carpeta que la página web.
Indica anchura Indica altura
La estructura sería
Si sólo se le da pone
<br> width no se deforma la
<br> imagen
<img src="[Link]" width="300" height="300"/>
<br>
<br>
Indica salto de línea
Se añade el atributo title a la etiqueta de imagen.
La estructura sería
<br>
<br>
<img src="[Link]" title=“Viaja a Roma” width="300" >
<br>
<br>
Se busca la imagen en internet. Se da botón derecho copiar enlace de la
imagen. Se añade en el atributo de img src
La estructura sería
<br>
<br>
<img src=" [Link]
romano-roma_c50eb2f2_1280x720.jpg " title=“Viaja a Roma” width="300" >
<br>
<br>
Se añade el la etiqueta <a> … </a> explicada en el apartado 6.
En este apartado se tratarán las tablas
Estos son algunos de los atributos que se pueden añadir a las tablas:
Las marquesinas (marquee en inglés), son ventanas que se desplazan
en movimiento. Pueden ser texto o imágenes.
La etiqueta básica es :
<marquee> Texto en movimiento </marquee>
Como no hemos añadido ningún atributo dentro de la etiqueta, el
comportamiento de la marquesina es el que tiene por defecto: ocupa
todo el ancho de la pantalla, tiene la altura de una línea y el texto se
desplaza lentamente de derecha a izquierda. Vamos a ver los
distintos atributos que modifican su apariencia y comportamiento:
Vamos a ver los distintos atributos que modifican su apariencia y
comportamiento:
WIDHT, HEIGHT
Ajustan la anchura y altura, respectivamente, de la marquesina. Pueden
ser igual a un número de pixels, o a un porcentaje de la pantalla.
Ejemplo:
<MARQUEE WIDTH=50% HEIGHT=60>
Esta marquesina ocupa el 50% del ancho de la pantalla y tiene una altura de 60 pixels
</MARQUEE>
Origen
<a href=“#destino”>
Texto destino
</a>
Destino
<a name=“destino”>
Donde quiero que vaya
</a>
HTML for beginners:
[Link]
