SinayMC
Usuario (México)
-Conceptos Básicos <!DOCTYPE <html> ……………………….. Importante en el HTML 5 <title> </title>…………………………….. Título de la Página <body> </body> …………………………… Cuerpo de la Página <blockquote> <blockquote> …………. Cita textual <a href=""> </a> …………………………... Link: URL <img src=""> …………………………………. Imagen <hr> </hr> …………………………………….. Línea <sub> </sub> ………………………..………. Añade subíndices <sup> </sup> ………………………..………. Añade Superíndices <small> </small> …………………………… Texto pequeño <big> </big> ………………………………….. Texto Grande <br> </b> ………………………………………. Un salto de Línea <body bgcolor=""> ………………………...Color del fondo de la página -Resaltar palabras Además de ponerle negrita a laspalabras, a veces queremos enfatizarlas usando itálicas Encierra la palabra o palabras con laetiquetas de énfasis de inicio <em> y de cierre </em> -Color de fondo De nuevo vamos a usar el atributo style y lo ajustaremos a "background-color: red" (color de fondo: rojo) o cualquiercolor que quieras -Listas ordenadas Comenzamos la lista ordenada con laetiqueta de inicio <ol> Encerramos (es decir, rodeamos) cada elemento con etiquetas <li> y </li> Finalizamos la lista ordenada con laetiqueta de cierre </ol> -Listas no ordenadas Primero abrimos una lista con una etiqueta <ul> de listasno ordenadas Para cada ítem que queremos agregar ala lista usamos una etiqueta de ítem de lista <li> con textoen el medio Luego le decimos al explorador queterminamos de hacer la lista con la etiqueta de cierre </ul> -Comentarios Loscomentarios comienzan con <!-- yterminan con --> -Tamaño de fuente Vamos a cambiar el tamaño del texto, Usamos el atributo style. Loescribimos igual al tamaño de letra (font-size),seguido de dos puntos, del tamaño que deseamos, y finalizamos con px (abreviatura de "píxeles") <h1style=”font-size:10px;”> -Colorde fuente Para cambiar el color del texto,simplemente agrega el atributo style en la etiqueta de inicio y después haceque el estilo sea igual a "color:blue" (color azul) o cualquier color que quieras. Porejemplo: <h2 style="color: red;"> ¿Y qué tal si quieres cambiar elcolor y el tamaño deltexto? Fácil. Solo tienes que agregar un punto y coma entre medio. Por ejemplo: <h2 style="color: green; font-size: 12px;"> Nota: No escribas algoasí: <h2 <h2 style=color:green;font-size:12px> Si anidas tus etiquetas HTMLincorrectamente, como en el ejemplo, túcódigo no se aceptará -Tiposde fuentes Podemos hacer esto usando un tipo defuente (font-family), de esta manera: <h1 style="font-family:#Arial">Title</h1> Primero escribimos <h1> Títulogrande </h1> Luego, dentro de la etiqueta <h1> deapertura, agregamos el atributo de estilo (style) y loajustamos al tipo de fuente: "font-family:Arial" Esto hace que el estilo de fuente dela etiqueta <h1> sea Arial Podemos hacer lo mismo con otrasetiquetas. Entonces podemos usar una etiqueta li: <li style="font-family:#Arial;">¡Hola!</li> Acá hay una lista de todas lasfuentes disponibles: -Arial -Verdana -Impact -Alineacióndel texto Muchas veces el texto queda mejor enotro lugar. Para eso, también usamos el atributo style. Yluego usaremos "text-align:left"(alineación de texto: left (izquierda); o right, (derecha); o center (centro) para determinar la ubicación deltexto <h1 style="text-align: center;"> -Palabrasen negrita Identifica la palabra o palabras quequieres poner en negrita Encierra esas palabras con laetiqueta de inicio <strong> y laetiqueta de cierre </strong> -Tablas Para crear unatabla iniciamos con la etiqueta <table> de inicio y para cerrar la tablausamos la etiqueta </table> lepodemos agregar el atributo border que se usa para agregar un borde anuestra tabla, Con px le agregamos el tamaño del borde Usamos laetiqueta <tr> para crear una fila de la tabla Adentro de laetiqueta <tr> agregamos la etiquetita <td> ("datos detabla", como en este ejemplo: <table border=”2px;”> <tr> <td>King Kong</td> <td>1933</td> </tr> <tr> <td>Drácula</td> <td>1897</td> </tr> <tr> <td>El hombre lobo</td> <td>1935</td> </tr> </table> Para hacer que nuestra tabla se parezca un poco más a una tabla deverdad, vamos a usar las etiquetas <thead> y <tbody>.Estas etiquetas van dentro de la etiqueta <table>, y significan "table head" (encabezado de tabla) y "table body" (cuerpo de tabla),respectivamente. La etiqueta HTML <head> contieneinformación sobre una página web (p. ej., el título) y la etiqueta <body> encierrael contenido de la página web. De la misma forma, podemos pensar que laetiqueta <thead> contienela información sobre una tabla y la etiqueta <tbody> contienelos datos tabulares en sí, como en este ejemplo: <table border=”2px;”> <thead> <th>Titulo</th> </thead> <tbody> <tr> <td>Datos</td> </tr> </tbody> </table> -Dale un nombre a la tabla A la tabla le hace falta un título. Queremos agregar una fila de títuloque cubra todo el ancho de la tabla Para hacerlo, tenemos que usar el atributo colspan parala etiqueta. En forma predeterminada, las celdas de tabla ocupan 1 columna. Siqueremos que una celda de tabla ocupe el espacio de 3 columnas en vez de 1,podemos fijar el atributo colspan en3 Se ve así: <th colspan="3">3columnas de ancho</th> -Atributosa la tabla Puedesusar algunos atributos como style para tu tabla, aquí unos ejemplos: <tr style="border-bottom: 1px solid black;"> <td style="padding: 5px;">King Kong</td> <td style="padding: 5px; border-left: 1px solid black;">1933</td> <td style=”border-right: 3px solid blue;”>1998</td> <td style=”border-top: 9px solid red;”>1435</td> </tr> -“Div’ide y vencerás” Unas de las etiquetas de estructura más versátil que tienes a tudisposición son las etiquetas <div></div> Las etiquetas <div> (cuyo nombre viene de "división") tepermiten dividir la página en contenedores (es decir, en partes diferentes) <body> <div style="width: 50px; height: 50px; background-color: red"></div> <div style=”width: 50px; height: 50px; background-color: blue”></div> <div style="width: 50px; height: 50px; background-color: green"></div> </body> El uso inteligente de <div> con el tiempo te permitirá crear objetos HTMLvisuales, como barras laterales, menús y otras cosas Al igual que con las imágenes, podrás crear <div> sobre las que se pueda hacer clic si las rodeascon etiquetas <a> </a> <a hrfc=”www.google.com.mx”><div> </div></a> -Span-tástico Mientras que <div> tedeja dividir la página web en partes, y darles estilo individualmente, <span> tambiénte permite controlar el estilo de partes más chiquitas de tu página, tales comoel texto. Por ejemplo, si quieres que la primera palabra de tus párrafossiempre sea roja, podas encerrar cada una de las primeras palabras en medio deetiquetas <span></span>, yponerlas rojas usando CSS El color es solo uno de los atributosque podrás cambiar de manera selectiva con las etiquetas <span>; también podrás cambiar el tamaño de lafuente, el tipo de fuente y cualquier otro atributo de estilo que se te ocurra.