HTML. Es la abreviatura de Hipertext Markup Lenguaje o Lenguaje de Marcas de Hipertexto. Html es el lenguaje con el que se escriben las páginas web.
¿Qué se puede hacer con este lenguaje
- Especificar las imágenes de la página, los textos o los gráficos
- Dar formato a los textos (Tipo, color, tamaño de la fuente)
- Todos los archivos de las páginas web tienen extensión .html
El cuerpo de la página, es decir el texto que aparecerá en la página se pone con la orden body. Ahora guarda el documento con extensión .html en el disco duro y ábrelo. Se visualizará lo que hiciste en el navegador.
p delimita un párrafo. Se ocupa de que los textos mas largos se dividan automáticamente (hace los cambios de línea de un párrafo automáticamente).
La longitud de la línea queda definida por el ancho de la ventana.
H1 resalta titulares.
El tamaño del titular se controla con el número (h3 la línea será mas pequeña. Hay hasta el 6).
Hr nos pondrá una línea donde la pongamos que ocupará toda la página. No hace falta poner la instrucción final (con barra /).
Si va seguido de width =30% la línea ocupará el 30%. Si le sigue size=10 especificamos el grosor. Ejemplo <hr size=10 width=50%>
Align= después del igual puede ir center para centrar, right para alinear a la parte derecha y left para alinear a la izquierda. Ejemplo: <p align=center> alineará el párrafo centrándolo. <hr size=10 width=80% align=center>.
Para el color de la línea font color=”green” (ver más adelante font)
<font size= “2”> </font> tamaño de letra. A mayor número mayor la letra.
Ul para empezar una lista de palabras.
Cada palabra de la lista va con la órden li. Ejemplo:
<ul>
<li> manzanas
<li> platanos
</ul>
Con <li> haces que en cada palabra aparezca con una viñeta con apariencia de lista.
Hacer lo mismo pero poniendo <ol> en lugar de <li>. Con la orden ol en vez de ul aparecerá una lista numerada.
<u> </u> lo que se ponga entre las dos órdenes aparecerá subrayado.
<center> </center> texto centrado.
<b> </b> texto en negrita.
<i> </i> cursiva.
<sub> </sub> subíndice. Ejemplo H<sub>2</sub>O resultado H2O. Con SUP sería superíndice.
Para tipo, tamaño y color de letra (también para las líneas) se empieza por font.
Con <font face “courier”> se modifica la fuente del texto que viene a continuación hasta la orden </font>.
OJO Si no se pone esta última afectará a todo el texto hasta el final del documento.
Con <font color=”OOFFFF”> se cambia el color. Se puede usar un alias para cada color <font color=”red”>.
El alias suele ser el nombre del color pero en ingles (black, blue, green, red, white, etc.) Con <font size=5> </font> se modifica el tamaño de la letra.
<Bgcolor=”yellow”> pone el color amarillo.
Si lo ponemos dentro de body afectará al fondo de la pagina. <body bgcolor=”yellow”> pone la página con fondo amarillo.
Si queremos poner un fondo de una imagen de archivo se pone background=”archivo.jpg” dentro de body.
El archivo de la imagen debe estar en la misma carpeta del archivo html.
Imágenes en html (solo .jpg y .gif)
Antes de insertar las imágenes debemos de tenerlas guardadas en la misma carpeta donde esta el resto de la página (es lo más cómodo).
La etiqueta es:
<img src=”imagen1.jpg”>
el img indica al navegador que se cargará una imagen, y src=” “ determina donde se encuentra la imagen. Si no se especifica nada más que el nombre del archivo considera que está en la misma carpeta que el resto.
Para que el texto recorra las imágenes (alrededor de la imagen), en vez de dejar espacios en blanco a su lado, pon detrás del nombre del archivo align=ri
ENLACES A OTRAS PÁGINAS
Los hipervínculos suelen mostrarse en azul, pero como a veces el color del fondo no deja que se vea bien se puede modificar con link=color, del mismo modo si ponemos alink=color tiene como efecto que al hacer clic en el, aparezca en el, el color puesto, y si ponemos vlink=color le indica el color con el que se queda después de a ver pinchado en el link para saber que ya hemos pulsado y hemos ido a ese sitio.
La etiqueta para poner un link es <a> y la dirección se pone detrás de href.= y entre comillas. Entre esto y </a> se pone el texto que aparecerá en el link. Practica y coloca este link en la página
<a href=https://www.areatecnologia.com>pagina de tecnologia</a>
PLANTILLA DISEÑO PAGINA FINAL
Para acceder a los archivos de la plantilla,copia y pega el siguiente enlace en la barra de direcciones del navegador
https://drive.google.com/drive/folders/1PkEbO7H83VZWoxHIjGPr3hpUbxFxx59S?usp=sharing
No hay comentarios:
Publicar un comentario