HTML Diseo bsico de paginas web COLEGIO CHAMPAGNAT
HTML Diseño básico de paginas web COLEGIO CHAMPAGNAT DE IPIALES TECNOLOGÍA E INFORMÁTICA GRADO QUINTO
HTML Diseño básico de paginas web Qué es HTML? HTML es un lenguaje de marcado de hipertexto por sus siglas en ingles (Hyper. Text Markup Language). Permite la publicación de paginas web con imágenes, fotos, listas, tablas, formularios y demás. Incluye videoclips, música, sonido, y muchas aplicaciones que dan vida a la pagina web diseñada.
HTML Diseño básico de paginas web ¿Que programa necesitamos para crear nuestra pagina web en html? Para crear el código de nuestra pagina web solo necesitamos un editor de texto, como es por ejemplo para Windows el block de notas. Un archivo HTML esta compuesto por etiquetas las cuales le dicen al navegador que y como mostrar la pagina web en los diferentes navegadores como por ejemplo Google Chrome, Internet Explorer, Firefox
HTML Diseño básico de paginas web Elementos y etiquetas. Los Elementos proporcionan la estructura al documento HTML e indican al navegador cómo quieres que se presente tu sitio web. Por lo general, los elementos están formados por una etiqueta de inicio, el contenido, y una etiqueta de cierre. Las Etiquetas son marcas insertadas en el documento HTML que se usan para señalar el inicio y el fin de un elemento.
HTML Diseño básico de paginas web EL elemento HTML comienza con la etiqueta de apertura <body>(etiqueta que define el cuerpo del documento). El contenido de dicho elemento es: Hola a todos. <b>Este texto es en negrita</b>. El fin del elemento HTML es con la etiqueta de cierre </body>. En la etiqueta <body> podemos observar el atributo bgcolor=(color de fondo) y el valor "#FFFF 00"(representa el color amarillo en hexadecimal).
HTML Diseño básico de paginas web Estructura básica. La cabecera es la sección comprendida entre <head> y </head>. En ella se encuentra necesariamente el título (entre las etiquetas <title> y </title>). El cuerpo (body) del documento html es normalmente lo más importante. Es aquí donde debemos colocar el contenido de nuestra página: texto, fotos, etc.
HTML Diseño básico de paginas web Etiquetas básicas. Headings Nos definen el tamaño de un título o cabecera. <h 1> nos da el tipo de letra más grande. <h 6> nos da el tipo de letra más pequeño. HTML agrega automáticamente un espacio antes y después de cada título. <h 1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google y demás buscadores tiene en cuenta, a la hora de indexar un sitio web.
HTML Diseño básico de paginas web Etiquetas básicas. Párrafos Los párrafos se definen con la etiqueta <p>.
HTML Diseño básico de paginas web Etiquetas básicas. Comentarios La etiqueta <! . . . > se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo. Salto de línea El salto de línea está definido con la etiqueta . Es utilizado cuando queremos cortar una línea sin necesidad de terminar con el párrafo. La etiqueta obliga a saltar de línea dondequiera que la ubiquemos.
HTML Diseño básico de paginas web Ejemplo de un programa para una pagina básica en HTML. Recomendación: Si bien HTML acepta tanto etiquetas en mayúscula <B> como en minúscula <b>, se recomienda el uso de minúsculas. Además XHTML (la siguiente versión de HTML) acepta solo minúsculas.
HTML Diseño básico de paginas web
HTML Diseño básico de paginas web Como cambiar los colores de fondo. Los colores básicos son: <body bgcolor="#ffffff"> #FF 0000 Rojo Lo que más se te antoje #00 FF 00 Verde </body> #0000 FF Azul Como cambiar el color de letra. <FONT SIZE=+2 COLOR=#FF 00 FF>Esto esta en color fucsia</FONT> Otros colores son: #FFFFFF Blanco #000000 Negro #FFFF 00 Amarillo
HTML Diseño básico de paginas web Ejemplo al cambiar el color de fondo y el color de letra.
HTML Diseño básico de paginas web EJEMPLO AL CAMBIAR EL FONDO POR UNA IMAGEN.
HTML Diseño básico de paginas web Ejemplo al cambiar el fondo por una imagen.
HTML Diseño básico de paginas web Para poner una imagen en una pagina con HTML usamos la ruta de ubicación donde está el archivo y la descripción de la imagen. El código es: <img src="ubicación" alt="descripción" />
HTML Diseño básico de paginas web Otra forma de poner el texto en negrilla con la etiqueta <strong>
HTML Diseño básico de paginas web El navegador sólo reconoce 1 espacio, aunque parezca tonto, pero de esta forma permite tener mayor control en la apariencia del documento. Para dar un espacio como el de la barra espaciadora del teclado, se debe utilizar
HTML Diseño básico de paginas web El signo "&" indica que se inicia un carácter especial. El signo "; " indica que ahí termina, las letras en medio. Existen seis caracteres especiales que son muy usados (siempre deben escribirse en minúsculas). < > & " (espacio en blanco) (símbolo menor qué "<") (símbolo mayor qué ">") (signo "&") (comilla ") (guión )
HTML Diseño básico de paginas web Manejo de Links en HTML
HTML Diseño básico de paginas web <BLOCKQUOTE>. Esta etiqueta centra el texto en la página, reduciendo o ampliando los márgenes a su izquierda y derecha.
HTML Diseño básico de paginas web
HTML Diseño básico de paginas web
HTML Diseño básico de paginas web Estructura de una tabla. La etiqueta general, que engloba a todas las demás es <TABLE> y </TABLE>. Es decir: <TABLE> [resto de las etiquetas] </TABLE>
HTML Diseño básico de paginas web En el siguiente nivel, dentro de la anterior, están las etiquetas para formar cada fila (row) de la tabla, que son <TR> y </TR>. Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sería: <TABLE> <TR> [etiquetas de las distintas celdas de la primera fila] </TR> <TR> [etiquetas de las distintas celdas de la segunda fila] </TR> </TABLE>
HTML Diseño básico de paginas web En el último nivel (dentro de las anteriores) están las etiquetas de cada celda, que son <TD> y </TD>, que engloban el contenido de cada celda concreta (texto, imágenes, etc. ). Hay que repetirla tantas veces como celdas queremos que haya en esa fila. Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posición de dicha celda:
HTML Diseño básico de paginas web <TABLE> <TR> <TD> fila 1 celda 1 </TD> <TD> fila 1 celda 2 </TD> <TD> fila 1 celda 3 </TD> </TR> <TD> fila 2 celda 1 </TD> </TR> </TABLE> <TD> fila 2 celda 2 </TD> <TD> fila 2 celda 3 </TD>
HTML Diseño básico de paginas web Variando el espesor de los bordes El atributo BORDER permite establecer el espesor del borde de la tabla: <TABLE BORDER = número deseado>
HTML Diseño básico de paginas web CELLPADDING El atributo CELLPADDING denota en la sentencia <table> la cantidad de espacio entre el borde interior de la celda y el contenido de la celda.
HTML Diseño básico de paginas web CELLSPACING El atributo CELLSPACING denota en la sentencia <table> la cantidad de espacio entre las celdas.
HTML Diseño básico de paginas web Contenido de las celdas Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintas celdas. Pero se puede poner en ellas cualquier otro elemento de los que van en un documento HTML, como imágenes, enlaces, etc. No hay más que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc. Ejemplo con una imagen: <TABLE BORDER=2> <TR> <TD> <IMG SRC="imagenes/babe. gif"> </TD> </TR> </TABLE>
HTML Diseño básico de paginas web Ejemplo con un enlace: <TABLE BORDER=2> <TR> <TD> <A HREF="index. html">Página principal </A> </TD> </TR> </TABLE>
HTML Diseño básico de paginas web Normalmente, el contenido de una celda está alineado a la izquierda. Pero se puede cambiar esto añadiendo dentro de la etiqueta de la celda los siguientes atributos: <TD ALIGN=CENTER> Al Centro </TD> <TD ALIGN=RIGHT> A la derecha </TD>
HTML Diseño básico de paginas web Variando las dimensiones de la tabla. A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigue añadiendo dentro de la etiqueta de la tabla los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensión de la pantalla, o a una cifra que equivale al número de pixels. Por ejemplo, si en el último ejemplo ponemos: <TABLE WIDTH=60%> <TABLE HEIGHT=200>
HTML Diseño básico de paginas web Etiquetas: <table> para crear la tabla. <tr> para crear cada fila. <td> para crear cada columna.
HTML Diseño básico de paginas web Ejemplo.
HTML Diseño básico de paginas web nowrap es un atributo que le podemos colocar a la etiqueta de la celda y que obligará al navegador a no romper esa línea, si la frase es más larga que el ancho definido de la tabla, ésta se estirará todo lo necesario para albergar la frase sin saltos de línea.
HTML Diseño básico de paginas web Las celdas escritas con la etiqueta <th> y su correspondiente cierre, admiten los mismos atributos que las etiquetas <td> y funcionan de la misma forma, salvo que el contenido que esté dentro de una etiqueta <th> está considerado como el encabezado de la tabla, por lo que se creará en negrita y centrado sin que nosotros se lo indiquemos.
HTML Diseño básico de paginas web scope = "col” para columnas, scope = “row” para filas. Indica las celdas para las que esta celda será su cabecera. Ej: scope="col" indica que esta celda es la cabecera de todas las demás celdas que están en la misma columna
HTML Diseño básico de paginas web Color de las Tablas. Para ponerle color a una celda utilizamos el atributo bgcolor=" aquí ponemos el nombre o número del color"
HTML Diseño básico de paginas web Las tablas complejas suelen disponer de una estructura irregular que junta varias columnas para formar una columna ancha o une varias filas para formar una fila más alta que las demás. Para fusionar filas o columnas, se utilizan los atributos rowspan y colspan respectivamente.
HTML Diseño básico de paginas web Para obtener una tabla como la de la imagen anterior, se debe utilizar el siguiente código: En principio, podría pensarse en utilizar el siguiente código HTML para definir la tabla: Sin embargo, si se utiliza el código anterior, el navegador visualiza de forma incorrecta la tabla, ya que las tablas en HTML deben disponer de una estructura regular. En otras palabras, todas las filas de una tabla HTML deben tener el mismo número de columnas.
HTML Diseño básico de paginas web Por lo tanto, si se quieren mostrar menos columnas en una fila, se fusionan mediante el atributo colspan, que indica el número de columnas simples que va a ocupar una determinada celda. De forma equivalente, si se quiere diseñar una tabla HTML que fusiona filas como la de la siguiente imagen:
HTML Diseño básico de paginas web Etiqueta <meta> La etiqueta <meta> se utiliza para añadir información sobre la pagina. Esta información puede ser utilizada por los buscadores. Los buscadores consultan la información de la etiqueta <meta> de las paginas, buscando coincidencias con lo que el usuario pretende encontrar, Los tipos de información más utilizados son los siguientes
HTML Diseño básico de paginas web La etiqueta <meta> no necesita etiqueta de cierre. Para cada etiqueta <meta> solo es posible indicar un tipo de información y su valor, pero es posible insertar varias etiquetas <meta> en un mismo documento. La etiqueta <meta> ha de estar entre las etiquetas <head> y </head>. <head>. . . <meta name="author" content="aulaclic"> <meta name="description" content="Curso de HTML gratuito"> <meta name="keywords" content="código HTML etiqueta página web gratis curso"> </head>
HTML Diseño básico de paginas web La etiqueta <meta> también se utiliza para indicarle al navegador alguna información o alguna acción que debe realizar. En este caso se utiliza el atributo http equiv Si por algún motivo queremos que nuestra página se actualice automáticamente cada 30 segundos. Deberíamos utilizar la acción Refresh (actualizar) <html> <head>. . . <meta http equiv="Refresh" content="30"> </head>. . .
HTML Diseño básico de paginas web Otra de las funcionalidades de la etiqueta <meta> Imaginemos que hemos cambiado la dirección en la que se encuentra nuestra página web, y queremos que cuando algún usuario visite la página en la dirección antigua, a los 5 segundos el navegador lo redirija automáticamente a la dirección nueva. <html> <head> <meta http equiv="Refresh" content="5; URL=http: //www. aulaclic. com/index. htm"> </head>. . .
- Slides: 47