Introduccion HTML

Introducción a HTML
2 fp basica
Estructura básica HTML
<html>

<head>
<title></title>
<meta charset=”utf-8”>
<link rel=”stylesheet” href=”nombreHojaEstilos.css”>
</head>
<body>

<header></header>

<main></main>

<footer></footer>
</body>
</html>
Etiquetas para títulos:
Las etiquetas de títulos o encabezamientos se emplean al comienzo de una sección.
La etiqueta H1 SOLO se usa una vez en el body.
●
<h1>Título h1</h1> ⇒ Título h1
● <h2>Título h2</h2> ⇒ Título h2
Bloques de texto y saltos de línea:
Para definir y separar bloques de texto se usa principalmente la etiqueta <p></p>.
● Para hacer referencia a un texto preformateado, usamos la etiqueta:

○ <pre>Texto preformateado </pre> ⇒
● Si queremos escribir una dirección o firma, usamos la etiqueta:
○ .<address>dirección o firma </address> ⇒ dirección o firma
● Si queremos tabulaciones a la izquierda o derecha, usamos:
○ <blockquote>Texto tabulado</blockquote> ⇒ Texto tabulado
Para hacer saltos de línea usamos dos tipos de etiquetas:
● <br> : es un salto de línea simple, no necesita etiqueta de cierre, ya que es un elemento básico.
● <hr>: es un salto de línea que al mismo tiempo inserta una línea y tampoco necesita etiqueta de cierre.
Estilos de fuente
Todas las etiquetas de estilos, son etiquetas en línea, es decir, el texto se irá colocando uno al lado del otro.
● Texto en negrita:
○ <b>Textos en negrita </b> ⇒ Textos en negrita
● Texto en cursiva:
○ <i>Texto en cursiva</i> ⇒ Texto en cursiva
● Texto subrayado:
○ <u>Texto subrayado</u> ⇒ Texto subrayado
● Texto tachado:
○ <s>Texto tachado</s> ⇒
● Texto grande:
○ <big>Texto grande</big> ⇒
● Texto pequeño
○ <small>Texto pequeño</small> ⇒
● <strong> :Texto negrita, se diferencia con la etiqueta <b>, en que la etiqueta <strong> a simple vista es igual,
pero sirve para personas con dificultades visuales, donde los programas encargados de leer los textos,
aquellas palabras que estén entre estas etiquetas, suenan más fuerte haciendo mayor énfasis.
Enlaces:
Para crear un enlace, utilizamos la etiqueta <a></a>. Está etiqueta, tiene un atributo muy importante, que se
llama href=””, donde indicaremos el lugar al que queremos ir, puede ser dos tipos de rutas:
● Ruta absoluta: Ejemplo: <a href=”https://es-es.facebook.com/”>Facebook</a>

● Ruta relativa: Ejemplo: <a href=”/img/icono.jpg”>Facebook</a>
Nota: otro atributo muy útil es target="_blank", esto nos abriría el enlace en una nueva pestaña, sin perder la
página que tenemos abierta actualmente.
Para crear enlaces dentro de una misma página, vamos a tener que usar un atributo llamado identificador,
para ello dentro de la etiqueta que queremos identificar, añadiremos id=”nombreIdentificador”.
Para hacer referencia al valor del id=””, escribiremos # + nombreIdentificador .
● Por ejemplo:
○ <a href=”#parrafo1”>Primer párrafo</a>
○ <p id=”parrafo1”>Primer párrafo, al que accederemos con el primer enlace</p>
Ejercicio:
● Crearemos diferentes párrafos, utilizando los diferentes estilos y diferentes títulos, también
añadiremos un menú de navegación, para ello, crearemos una lista, mínima de dos elementos,
donde cada elemento será un enlace (<a>).
Después crearemos tantos párrafos como enlaces hayamos creado, para que al hacer click en
cada uno de los enlaces, nos lleve a párrafos distintos.
Ayuda para el menú de navegación:

<ul>
<li>
<a href=”.......”>......</a>
</li>
</ul>

Introduccion HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Introduccion HTML

Cargado por

Copyright:

Formatos disponibles

Introducción a HTML

La etiqueta H1 SOLO se usa una vez en el body.

● Para hacer referencia a un texto preformateado, usamos la etiqueta:

Para hacer saltos de línea usamos dos tipos de etiquetas:

● Ruta absoluta: Ejemplo: <a href=”https://es-es.facebook.com/”>Facebook</a>

Para hacer referencia al valor del id=””, escribiremos # + nombreIdentificador .

Ayuda para el menú de navegación:

También podría gustarte