HTML
¿QUE ES? Es el lenguaje de programación que utilizan las paginas web. HTML. Traduce Hipertex markup language. Lenguaje simple de marcas de texto
¿QUE NECESITO? Un navegador Un editor de texto(block de notas) Manejo de Etiquetas
¿Cuál es la estructura de una pagina en HTML? <html> <head> <title> </title> <body> </head> </body> </html>
¿Qué requiero para empezar mi página? Abrir bloc de notas Escribir la estructura Guardar como pagina1.html Guardar en carpeta.
¿cómo visualizo mi página? Abro el icono del navegador de mi carpeta Si solo aparece el ícono del bloc de notas doy clic derecho sobre el botón derecho y le doy abrir con y el navegador. Nota: cada que realizo un cambio debo guardar (control v)
Actividad. 1 1. Abra el bloc de notas y escriba la estructura. <html> <head> <title> </title> <body> </head> </body> </html>
2. Abra una carpeta con el nombre suyo 3. Ahora guarde su bloc de notas como página1.html 4. Visualice su pagina en el navegador. 5. Abra su bloc de nuevo y ahora ubíquese en title y coloque mi primera página. Guarde y visualice en el navegador. ¿Qué observas? Vuelva al bloc ahora coloque un titulo en el head. En el body quite el signo > y coloque la etiqueta bgcolor=“blue”> ob serve lo que pase.
Actividad 2 Utilizando paleta de colores Practica con paleta de colores. Cambia el color de tu página utilizando los códigos que tengan el color de tu preferencia. Ejemplo: <body bgcolor=“0000ff”>
ENCABEZADOS <H1></H1>CABECERA DE NIVEL 1
TIPOS DE LETRAS <Font>fuente</font> <B> negrita</b> Pone el texto en negrita <i>texto en cursiva </i> <u>subraya </u> <big>aumenta la letra </big> <small>disminuye el tamaño</small>
Actividad 3 Escribe un texto y cambia el color del texto aplicando la etiqueta Font color. Coloca la cabecera en el head titulo aplacando las distintas cabeceras. Primer renglón cambia por negrita Segundo renglón cursiva Cuarto renglón subrayada quinto renglón aplica big Sexto renglón small
Otras etiqueta Para espacios <br>entre renglón y renglón < > espacios en letras o palabras. Barra horizontal <hr> Estas etiquetas no llevan cierre
Estilos de párrafo <p> delimita un párrafo <p align=x></p>justifica el texto ya sea a la izquierda=left derecha=right centrado=center <pre width=x></pre>coloca el texto en un sito fijo. Ejemplo:
<pre> La etiqueta pre respeta los espacios en blanco y muestra el texto tal y como está escrito </pre> <blockquote></ blockquote>usado como tabulador.
COLOCANDO IMAGENES ACTIVIDAD 4 1. Baja imágenes de internet y guárdalas en la carpeta que estas trabajando html 2. ahora a programar: ubícate en el cuerpo y coloca la siguiente etiqueta: <img src=“nombre de la imagen. La extensión”> 3. Puedes cambiar el tamaño de la imagen seguido de las etiquetas ancho y alto en ingles así: <img src=“nombre de la imagen. La extensión” width="100" height="100"> 4. Usa la etiqueta alt=“comentario” en caso de agregar comentarios a una imagen. Eejemplo: <IMG SRC="immagine.gif" ALT="Obra de K. Haring">
COLOCANDO VIDEO Y SONIDO VIDEO: <embed src=“el amor.mp3></embed> SONIDO: <bgsound src=“navidad.midi" </bgsound>
COLOCANDO ENLACES Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página de Internet, entre otras funciones. Hipervínculo a otra página <a href=“www.lilyposada.webnode.es">BLOG</a> Hipervínculo al mismo documento: <a id="nombre_del_marcador">Texto asociado al marcador</a>
VIÑETAS O LISTAS NUMERADAS En la mayoría de los documentos HTML se usan listas para organizar el texto. El lenguaje HTML incorpora distintas formas de mostrar listas, por ejemplo con viñetas sencillas o también con letras o números. Además, para que las páginas tengan más vistosidad, se pueden colocar imágenes delante de cada párrafo. Las listas no ordenadas son aquellas que se encuentran entre las etiquetas <ul> y </ul> (ul indica unordered list), etiqueta de apertura y cierre respectivamente. Si queremos añadir un nuevo punto, lo tendremos que hacer dentro de las etiquetas <li> y </li>. Si no le indicamos nada a la etiqueta <li>, la viñeta o marca que indica que se trata de un elemento de una lista se generará de forma automática. <ul style="list-style-type:disc"> <ul style="list-style-type:circle"> <ul style="list-style-type:square">