<Head> </Head> <Body> </Body> PEQUEÑOS TRUCOS PARA LA REALIZACIÓN DE UNA WEB CON HTML Se establece el título de la web que se usa en el navegador y el que aparece si por ejemplo queremos añadirlo a favoritos. <title>seguridad Informática por nombre y apellido alumno</title> Se establece la codificación para que se pueda ver bien en cualquier navegador: utf-8 <meta charset="utf-8" /> Se establece un layout para que se pueda ver en móviles <meta name="viewport" content="width=device-width, initial-scale=1"/> Un logo de la página (debe ser de 16x16 en.ico). Se puede dibujar con gimp <link rel="icon" type="image/x-icon" href="http://unav.me/unav.ico"> Las palabras clave por las que se encuentra en google nuestra web <meta name="keywords" content="seguridad, navegación, virus."> La descripción con la que si entramos en google encontrará nuestra web <meta name="description" content="está web trata de lo que debemos tener en cuenta para navegar seguros por Internet"/> Aquí iría todo el contenido de la web COSAS A TENER EN CUENTA A LA HORA DE ESCRIBIR LA WEB Utilizad para escribir el programa el note pad ++ Sed muy ordenados y utilizad el tabulador para que sea fácil el seguimiento del programa por una tercera persona Estructurar la página de la siguiente manera: <html> <title> </title> <body> </body> </html> Encabezado 1: <H1> la frase que sea </H1>, Encabezado 2: <H2> la frase que sea </H2>, etc Negrita: <b>palabra</b> Cursiva: <i> palabra</i> Colores: <font color="red"> y luego escribimos la frase o palabra y cerramos </font>
Tamaño de letra: <font size="7"> escribimos lo que queramos y cerramos </font> Tildes: Si queremos poner un acento, pondremos: Álvarez: Álvarez Para iniciar un párrafo pondremos el comando: <P> y lo cerraremos con el comando </P> Para dar un salto de línea: <BR/> INSERTAR UNA TABLA Para insertar una tabla se utiliza el comando <tr> para iniciar una fila y el </tr> para cerrarla Dentro de cada fila iremos añadiendo el comando <td width="50%"> y cerrando con para cada columna que haya en esa fila. El ancho se dará en tanto por ciento del de la fila. <Table border="2" width="100%" cellpadding="10px"> tabla, grosor borde, ancho tabla, separación celdas respecto al borde <tr> comienzo fila 1 <td width="50%"> comienzo columna 1 de la fila 1. Ocupa la mitad de la fila Aquí añadiremos lo que queramos meter en esa celda que es la fila 1 columna 1 Esta celda será la fila 1 columna 2 </tr> se acaba la fila 1 <tr> comienzo fila 2 comienzo columna 1 de la fila 2. Aquí añadiremos lo que queramos meter en esa celda que es la fila 2 columna 1. Ya no necesitamos darle el ancho fin columna 1 fila 2 comienzo columna 2 de la fila 2. fin columna 2 fila 2 </tr> se acaba la fila 2 </Table> cerramos la tabla PONER UN FONDO DE PANTALLA EN LA WEB Se usa el comando background Hay que buscar una imagen que se pueda repetir ya que en la web será como un mosaico. Se puede buscar algo poniendo en google images: backgrounds for html web pages De las que nos salgan debemos buscar una que se pueda repetir infinitas veces sin que quede mal. Nos ponemos encima de la imagen y damos al botón derecho del ratón. En el menú que sale escogemos la opción copiar dirección de enlace o copiar ruta de enlace src="http://es.rs-online.com/largeimages/r263880-14.jpg" height="200px" width="400px">
Y la pegamos en nuestro note pad tras el comando background y entre comillas. Acabaremos el comando con el símbolo > background= http://cf.ltkcdn.net/web-design/images/std/38015-410x293- Web_page_backgrounds.jpg > La web nos quedará entonces: INSERTAR UNA IMAGEN Usamos el comando src= aquí metemos la ruta de enlace > Si queremos fijar un tamaño de la imagen, se da en pixels: src="http://es.rs-online.com/largeimages/r263880-14.jpg" height="200px" width="400px"> INSERTAR UN HIPERENLACE Para insertar un hiperenlace que haga que al pulsar con el ratón sobre una imagen de la web, nos abra otra página web, se hace lo siguiente: <A href="https://www.arduino.cc/"> esto es un hyperlink lo que hay entre la <A> src="https://upload.wikimedia.org/wikipedia/commons/8/89/google_arduino_usb_adk_board_wit h_demoshield.jpg" height="200px" width="200px"> Al pinchar en esta imagen, nos saldrá la web www. Arduino.cc/ </A> HACER UNA LISTA NUMERADA Para hacer la siguiente lista: A. Patatas B. Tomates C. Lechugas
Haríamos lo siguiente: <ol type="a"> para poner numeración en una lista. Si queremos números pondríamos 1 <li>patatas</li> <li>tomates</li> <li>lechugas</li> </ol> EJEMPLO DE WEB <HTML> <HEAD> <TITLE>Mi nueva Web</TITLE> </HEAD> <BODY background="http://www.best-free-wallpapers.xyz/wpcontent/uploads/2015/03/background-image-html-470x300.jpg"> <B><H1>YO</H1></B> centrar negrita cabecera nivel 1 <I><H2>SOY LURDES</H2></I> centrar cursiva cabecera nivel 2 <P>Hola,</P> párrafo <BR/> salto de línea <BR/> <P>Soy <I>Lurdes</I></P> Cursiva <Table border="2" width="100%" cellpadding="10px"> tabla, grosor borde ancho table separación celdas respecto al borde <tr> comienzo fila 1 <td width="50%"> comienzo columna 1 de la fila 1. Ocupa la mitad de la fila src="http://es.rs-online.com/largeimages/r263880-14.jpg" height="200px" width="400px"> inserto imagen y establezco el tamaño de la foto <P><Font size="-2"><b><i>cilindro SMC</I></B></Font></P> tamaño de fuente dos veces menor que la que hay por defecto fin de la columna 1 fila 1 comienzo columna 2 de la fila 1. src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/bosque.jpg/250px- Bosque.jpg" height="200px" width="200px"> </tr> <tr> src="http://www.foropicos.net/fotos2009/p/pica-del-jierru- 40.jpg" height="200px" width="200px"> src="https://1.bp.blogspot.com/- VEhSrVrKL1Q/V1fW2qLazgI/AAAAAAAClUw/tM7FV7oXNa8LnYOjbUNsFjzrQPkvvKehwCLcB/s640/El%2BCorno n%2b.%2btecho%2bde%2basturias%2b119-001.jpg" height="200px" width="200px"> </tr> </Table> Se acaba la tabla <BR/> <A href="https://www.arduino.cc/"> esto es un hyperlink lo que hay entre la <A> src="https://upload.wikimedia.org/wikipedia/commons/8/89/google_arduino_usb_adk_board_wit
h_demoshield.jpg" height="200px" width="200px"> Al pinchar en esta imagen, nos saldrá la web www. Arduino.cc/ </A> <P>Quiero hacer estos proyectos:</p> <ol type="a"> para poner numeración en una lista <li>tallerín</li> cada lista <li>rutas</li> <li> <b> <font color="red"> ir a Perú </font> </b> </li> </ol> </BODY> </HTML>