¿Qué
es HTML?
· HTML (HyperText Markup Language) o "Lenguaje para Marcado de
Hipertexto".
· HTML es el lenguaje que te permite describir y
dar forma a tús páginas Web.
· Publica tus propias páginas con fotos,
listas, tablas, etc.
· Obtén información de los visitantes de tu
sitio.
· Diseña los formularios que te permitirán
contactar tus futuros clientes.
· Crea un sitio para vender tús productos o
servicios.
· Incluye video clips, música, sonidos, y
otras aplicaciones que darán vida a tús páginas Web
¿Qué conocimientos
previos debes poseer?
Para estudiar HTML no se requiere de conocimientos
previos en programación. Es muy simple
de aprender ya que no es un lenguaje de programación sino que es un lenguaje de
marcas.
Los archivos HTML
· Los archivos HTML deben tener una extensión htm o html (ej. misitio.htm o misitio.html).
· Para crear un archivo HTML solo hace falta un editor de texto.
· Un archivo HTML está compuesto por etiquetas.
· Las etiquetas le dicen al navegador(Ej:
Internet Explorer, Firefox, Google Chrome, Opera, Safary, etc.) como mostrar la página Web.
<html> --> Indica al navegador que abre un archivo HTML.
<head> --> Apertura de la cabecera del documento. Sección que no se muestra en la pantalla.
<title>Mi primera página Web</title> --> Título de la página.
</head> --> Cierre de la cabecera del documento.
<body> --> Apertura del cuerpo del documento. Esta sección aparece en la pantalla.
Hola a todos. --> Texto que va a ser mostrado por el navegador.
</body> --> Cierre del cuerpo del documento.
</html> --> Cierre del archivo HTML
<head> --> Apertura de la cabecera del documento. Sección que no se muestra en la pantalla.
<title>Mi primera página Web</title> --> Título de la página.
</head> --> Cierre de la cabecera del documento.
<body> --> Apertura del cuerpo del documento. Esta sección aparece en la pantalla.
Hola a todos. --> Texto que va a ser mostrado por el navegador.
</body> --> Cierre del cuerpo del documento.
</html> --> Cierre del archivo HTML
La primera etiqueta del archivo
es <html>. Esto le indica al navegador
que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra
entre las dos etiquetas es el código HTML de la página.
Luego vemos la etiqueta <head>. Lo que sigue a continuación
hasta su cierre </head>, es la cabecera del documento
y no se muestra en la pantalla. Aquí colocamos información tal como el título
de la página(<title>Mi
primera página Web</title>), palabras claves para los motores de búsqueda, una
descripción de la página y otros datos del documento.
Entre las etiquetas <body> y </body> se
encuentra el cuerpo del documento y el contenido que se coloque en esta sección
es el que veremos en pantalla, como por ejemplo, "Hola a todos.".
Nota: observa
que todas las etiquetas de cierre se diferencian de las de apertura por llevar "/"antes del nombre.
Formato básico del texto
HTML nos permite definir el formato de visualización del texto en la pantalla.
Muy útil para cuando queramos resaltar o enfatizar un texto en especial.
También muy usado para subrayar o escribir subíndices o superíndices.
Estos, son solo algunos ejemplos de lo que podemos hacer con estos elementos
Para ello utilizamos las siguientes etiquetas
Muy útil para cuando queramos resaltar o enfatizar un texto en especial.
También muy usado para subrayar o escribir subíndices o superíndices.
Estos, son solo algunos ejemplos de lo que podemos hacer con estos elementos
Para ello utilizamos las siguientes etiquetas
- Copia y pega en el bloc de notas los sigtes ejercicios
- Guarda el archivo como "ejercicio.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML) en la carpeta Documentos.
- Ahora debes ir a la carpeta Documentos y haz doble clic en ejercicio1.html". El navegador mostrará la página recién creada.
EJERCICIO 1
<head>
<title>Mi primera página Web</title>
</head>
<body>
Hola a todos.
</body>
</html>
EJERCICIO 2
<html>
<head>
<title>Mi primera página Web</title>
</head>
<body bgcolor="#FFFF00">
<title>Mi primera página Web</title>
</head>
<body bgcolor="#FFFF00">
Hola a todos.
<b>Este texto es en negrita</b>.
</body>
</html>
</body>
</html>
EJERCICIO 3
<html>
<head>
<title>Mi primera página Web</title>
</head>
<body bgcolor="#FFFF00">
<title>Mi primera página Web</title>
</head>
<body bgcolor="#FFFF00">
Hola a todos.
<b>Este texto es en negrita</b>.
<h1>Título de tamaño h1</h1>
<p>Y este es el segundo párrafo.</p>
<h2>Título de tamaño h2</h2>
<h3>Título de tamaño h3</h3>
<h4>Título de tamaño h4</h4>
<h5>Título de tamaño h5</h5>
<h6>Título de tamaño h6</h6>
<hr>
<p>Este es el primer párrafo.</p><p>Y este es el segundo párrafo.</p>
Esto es <br> un salto de lí<br>nea.
</body>
</html>
</html>
EJERCICIO 4
<html>
<head>
<title>Mi primera página Web</title>
</head>
<body bgcolor="red">
<title>Mi primera página Web</title>
</head>
<body bgcolor="red">
<b>Texto
en negrita</b>
<big>Texto grande</big>
<em>Texto enfatizado</em>
<i>Texto en itálica</i>
<small>Texto pequeño</small>
<strong>Texto fuerte</strong>
<sub>Texto subíndice</sub>
<sup>Texto superíndice</sup>
<ins>Texto subrayado</ins>
<del>Texto tachado</del>
<tt>Texto teletipo</tt>
<em>Texto enfatizado</em>
<i>Texto en itálica</i>
<small>Texto pequeño</small>
<strong>Texto fuerte</strong>
<sub>Texto subíndice</sub>
<sup>Texto superíndice</sup>
<ins>Texto subrayado</ins>
<del>Texto tachado</del>
<tt>Texto teletipo</tt>
</body>
</html>
EJERCICIO 7
Diseña el código html para mostrar la sigte página:
<dl>
<dt>Chocolate</dt>
<dd>Elaborado a base de cacao</dd>
<dt>Caramelo</dt>
<dd>Elaborado a base de azúcar</dd>
</dl>
EJERCICIO 13
Escribe el código que muestre la sigte.página
EJERCICIO 5
1 Descarga de internet una imagen
cualquiera para utilizarla como fondo de la página .
2. Guardala con el nombre fondo.jpg en tu carpeta de trabajo.
3 Colocar la imagen descargada como fondo
de tu página. Añadir background="fondo.jpg" delante del
símbolo > de cierre de la etiqueta body.
<html>
<head>
<title>MI
PRIMERA PAGINA</title>
</head>
<body
background="fondo.jpg">
<font
color="#CC3300" size="5">Hola, estoy haciendo
pruebas.</font>
</body>
</html>
4 Guarda los cambios como EJERCICIO 5 y comprueba el funcionamiento con tu
navegador ...qué sucede?
EJERCICIO 6 - Marquesina
<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body
bgcolor="#FFCC99">
<marquee
bgcolor="#006699" behavior="alternate"
direction="right">
<b><font
color="#FFFFCC" size="5">Esto es una marquesina
</font></b>
</marquee>
<font color="#CC3300" size="5">Hola, estoy
haciendo pruebas.</font>
</body>
</html>
EJERCICIO 7
Diseña el código html para mostrar la sigte página:
<html>
<head>
<title>MI PRIMERA PAGINA</title>
</head>
<body bgcolor="#FFCC99">
<basefont color="#003333"
size="60">
<h1>Quinto Año</h1>
<hr>
<bl>
<bl>
<p align="center">
<em>
Somos un
grupo de alumnos de Quinto año del Colegio San Carlos
<br>
Desde esta
página intentaremos aprender HTML
</em>
</p>
</blockquote>
</blockquote>
</body>
</html>
EJERCICIO 8 - insertar un enlace
Diseña el código html para mostrar la sigte página:
<html>
<head>
<title>INFORMATICA 20156</title>
</head>
<body bgcolor="#FFCC99">
<basefont color="#003333" size="60">
<h1> Quinto Año </h1>
<hr>
<bl>
<bl>
<p align="left">
<em>
Somos un grupo de alumnos de Quinto año del Colegio San Carlos
<br>
Desde esta página intentaremos aprender HTML
</em>
</p>
</blockquote>
</blockquote>
</body>
</html>
EJERCICIO 9 - insertar una imagen
<html>
<head>
<title>INFORMATICA 20156</title>
</head>
<body bgcolor="#FFCC99">
<basefont color="#003333" size="60">
<h1> Quinto Año </h1>
<hr>
<bl>
<bl>
<p align="left">
<em>
Somos un grupo de alumnos de Quinto año del Colegio San Carlos
<br>
Desde esta página intentaremos aprender HTML
</em>
</p>
<img src="logo.jpg" alt="San Carlos">
</blockquote>
</blockquote>
</body>
</html>
EJERCICIO 10 - aplicar link a una imagen
<html>
<head>
<title>INFORMATICA 20156</title>
</head>
<body bgcolor="#FFCC99">
<basefont color="#003333" size="60">
<h1> Quinto Año </h1>
<hr>
<bl>
<bl>
<p align="left">
<em>
Somos un grupo de alumnos de Quinto año del Colegio San Carlos
<br>
Desde esta página intentaremos aprender HTML
</em>
</p>
<a href="http://sancarlos2015.blogspot.com.ar"><img src="logo.jpg" alt="San Carlos">
</blockquote>
</blockquote>
</body>
</html>
EJERCICIO 11 -insertar logo con ancho y alto determinado y con un borde
<html>
<head>
<title>INFORMATICA 20156</title>
</head>
<body bgcolor="#FFCC99">
<basefont color="#003333" size="60">
<h1> Quinto Año </h1>
<hr>
<bl>
<bl>
<p align="left">
<em>
Somos un grupo de alumnos de Quinto año del Colegio San Carlos
<br>
Desde esta página intentaremos aprender HTML
</em>
</p>
<img src="logo.jpg" alt="San Carlos" width="322" height="485" border="8">
</blockquote>
</blockquote>
</body>
</html>
EJERCICIO 12 - lista ordenada Y DESORDENADA
<html>
<head>
<title>INFORMATICA 20156</title>
</head>
<body bgcolor="#FFCC99">
<basefont color="#003333" size="60">
LISTA ORDENADA
<ol>
<li>Naranjas</li>
<li>Manzanas</li>
<li>Bananas</li>
</ol>
LISTA DESORDENADA
<ul>
<li>Tomates</li>
<li>Pepinos</li>
<li>Cebollas</li>
</ul>
LISTAS DE DEFINICIÒN<li>Tomates</li>
<li>Pepinos</li>
<li>Cebollas</li>
</ul>
<dl>
<dt>Chocolate</dt>
<dd>Elaborado a base de cacao</dd>
<dt>Caramelo</dt>
<dd>Elaborado a base de azúcar</dd>
</dl>
</body>
</html>
EJERCICIO 13
EJERCICIO 14 - cambiar color tamaño y tipo de letra , insertar una imagen con ancho alto y borde
<html>
<head>
<title>INFORMATICA 20156</title>
</head>
<body bgcolor="#FFCC99">
<h1> Quinto Año </h1>
<hr>
<bl>
<bl>
<p align="left">
<em>
Somos un grupo de alumnos de Quinto año del Colegio San Carlos
<br>
Desde esta página intentaremos aprender HTML
</em>
</p>
<font FACE="ARIAL" color="red" SIZE="30">Este texto está en rojo</font>
<img src="logo.jpg" alt="San Carlos" width="622" height="485" border="8">
</body>
</html>
<head>
<title>INFORMATICA 20156</title>
</head>
<body bgcolor="#FFCC99">
<h1> Quinto Año </h1>
<hr>
<bl>
<bl>
<p align="left">
<em>
Somos un grupo de alumnos de Quinto año del Colegio San Carlos
<br>
Desde esta página intentaremos aprender HTML
</em>
</p>
<font FACE="ARIAL" color="red" SIZE="30">Este texto está en rojo</font>
<img src="logo.jpg" alt="San Carlos" width="622" height="485" border="8">
</body>
</html>
No hay comentarios:
Publicar un comentario