2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web.

Tamaño: px

Comenzar la demostración a partir de la página:

Download "2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web."

María Pilar Aranda Gil
hace 6 años
Vistas:

1 2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web. INTERNET En 1969, el Departamento de Defensa de E.U construyo Arpanet, para usos militares y científicos, correo electrónico y transmisión de datos entre computadores y en 1982 Arpanet se unió con Milnet, NSFNet, Usenet y otras redes existentes para dar origen a internet. WWW Son las siglas de World Wide Web o telaraña mundial, llamada web. En español significa Red Informática Mundial. PROTOCOLO Conjunto de reglas que rigen el intercambio de informaciones entre dos equipos o dos sistemas conectados entre sí. HIPERTEXTO Es un texto en un documento que liga a este con otro para permitir el desplazamiento entre ellos y el despliegue automático de la información vinculada. HIPERMEDIO Grupo de documentos en el que cada uno puede contener texto, gráficos, así como referencias a otros documentos. Temas Parcial 1 1

2 HTML 2.2 Programar en un lenguaje de hipertexto (Hiper Text Mar Kup Languaje Lenguaje de Marca de Hipertextos) Utilizado en internet para presentar la información en forma de documentos de hipertextos. Internet Explorer, Google, Mozilla leen perfectamente este lenguaje, es un lenguaje compuesto de etiquetas que indican al navegador como mostrar la página. Como se ha mencionado anteriormente es un lenguaje para crear páginas web y la estructura básica. Estructura Básica de una página Web Para poder dar el siguiente paso de crear una página web con el lenguaje de HTML es necesario saber en dónde se va a trabajar y saber también cual su estructura. Para comenzar la página web se trabajara con el programa syn este es como un block de notas solo que es especial para HTML. SYN Temas Parcial 1 2

A continuación tenemos que saber nuestra estructura general de nuestra página web esta comenzara con las etiquetas son como se puede decir las palabras clave para ir diseñando nuestra página estas

3 A continuación tenemos que saber nuestra estructura general de nuestra página web esta comenzara con las etiquetas son como se puede decir las palabras clave para ir diseñando nuestra página estas etiquetas comienzan por el símbolo de menor (<) y terminan con el símbolo de mayor (>). Por ejemplo: <HTML> <BODY> <HEAD> </HTML> </BODY> </HEAD> Así de esta manera se abren y cierran nuestras etiquetas; ahora mostraremos la estructura que debe de llevar nuestra página web HTML: Esta estructura como se puede observar ya está en el syn y así es como debe de estructurarse. Temas Parcial 1 3

Definición de los elementos de una página web Cada etiqueta de nuestra página tiene su significado a continuación se describe para que nos sirve cada una de estas: Las paginas siempre comienzan con

4 Definición de los elementos de una página web Cada etiqueta de nuestra página tiene su significado a continuación se describe para que nos sirve cada una de estas: Las paginas siempre comienzan con <HTML> y terminan con la etiqueta </HTML>. La etiqueta <HEAD> es la cabecera de la página en donde le vamos asignar el título a la página y esta etiqueta se cierra con </HEAD>. La etiqueta <TITLE> es el nombre que aparecerá en la página del tema del que hablemos y se cierra así </TITLE>. La etiqueta <BODY> es en donde se desarrollara el contenido de la página como su nombre lo indica es el cuerpo y se cierra con la etiqueta </BODY>. 2.3 Diseñar la estructura de una página web Ahora es el momento de editar nuestra página HTML ya tenemos las etiquetas ahora haremos uso de ellas tal y como se muestra: Como ya tenemos nuestra estructura vamos editarla pondremos el título en la cabecera en la etiqueta <TITLE> y le pondremos el título que más sea de nuestro agrado no hay que olvidar cerrarla </TITLE>. Temas Parcial 1 4

5 Ahora continuaremos con el cuerpo de la página en la etiqueta <BODY> y ahí escribiremos por ejemplo lo primero que se nos ocurra y se cierra con la etiqueta <BODY/>. Al tener ya lo básico de la primera vez de usar el lenguaje HTML veremos como se ve en internet nuestra primera práctica. Temas Parcial 1 5

6 Cambiar la presentación de la página web usando objetos (Imágenes, sonido, video, etc.) Para poder cambiar mucho más la apariencia de nuestra página en HTML es necesario saber más etiquetas así como las siguientes: <BR> esta nos sirve para los saltos de línea &nbsp nos sirve para el espacio entre palabras por ejemplo: Primera palabra segunda palabra Enriquecimiento del documento Párrafos o bloques <P> indica el inicio de párrafo </P> indica fin de párrafo Alineación de párrafos CENTER centradas en la pantalla. LEFT se alinean a la izquierda. RIGHT se alinean a la derecha. JUSTIFY para la justificación de nuestro texto. Estilo del texto Texto en negrita <B> </B> Cursiva o itálica <I> </I> Subrayar texto <U> </U> Temas Parcial 1 6

7 Tamaño de texto <FONT SIZE = t> </FONT> t: es el tamaño del texto 1 es el tamaño pequeño y 7 el grande Títulos y encabezados <FONT SIZE = N> </FONT> Definir o dividir títulos <H#> TITULO </H#> Valor de 1 a 6 1: mayor tamaño 6: menor tamaño Tipos de letra Tamaño del texto y nombre de fuente <FONT FACE= NOMBRE DE LA FUENTE > Color al documento <FONT COLOR =color> TEXTO </FONT> Color de fondo de página <BODY BGCOLOR=color> Color de texto <BODY TEXT=color> Temas Parcial 1 7

8 Imágenes con IMG <IMC SRC=URI> <IMG SRG=URI> Si es de IMG <IMG SRC= Logo_HTML.JPG > <IMG SRC= Imágenes/Logo_HTML.JPG > Si no se visualiza se pone toda la unidad. Alineación de imágenes <P ALIGN=RIGHT><IMG SRC F=\Imágenes\nombre de imagen. Terminación > ALIGN=TOP parte superior alineada ALIGN=MIDDLE queda al centro ALIGN=BOTTOM queda a la misma altura Sonido de fondo <bgsound> <bgsound src= varios/audio.mid loop= -1 > Es preferible que este debajo de la etiqueta <body> Video y audio Atributos: src Autostart: valores true o false Loop: valores true o false Temas Parcial 1 8

9 Width y height: especifican el tamaño de la consola de control de video. <embed src= varios/cotorra.avi autostart= false loop= true > 2.4 Añadir código estructurado a la página Web Hipervínculos Los hipervínculos nos van a permitir llevar desde nuestra página principal a otras páginas donde tal vez venga más información detallada para eso utilizaremos la siguiente etiqueta: <A HREF=URI> Descripción_Vinculo </A> EJEMPLO: Enlaces a portales de internet <P> <A= >Google</A></P> <a name= Nombre_Referencia></A> Temas Parcial 1 9

10 Creación de tablas en la página web En nuestra página web de HTML también es posible insertarle tablas del número de columnas y filas que nos gusten más, para eso utilizaremos la siguiente etiqueta: <TABLE> </TABLE> <TR> </TR> Para delimitar filas <TD> </TD> Para delimitar el principio y el final de las tablas <BORDER> Es para indicar el borde de nuestra tabla esta etiqueta debe ir Dentro de la etiqueta <TABLE>. <TABLE BORDER = N> N es el número de grosor del borde de la tabla. Encabezados de la tabla Estos encabezados van en la primera celda o en la primera fila de nuestra tabla. Para eso se utiliza la siguiente etiqueta: <TD> Y para delimitar las celdas de la cabecera: <TH> </TH> Temas Parcial 1 10

11 Aplicar formato a las tablas El aplicar el formato a nuestras tablas es darles el estilo de alto y ancho y así quedara con una visión mejor presentada. Ancho y alto de las tablas En el alto de nuestra tabla se puede realizar con la etiqueta: <TABLE HEIGHT = N> HIEGHT indica el número de pixeles de nuestra tabla. En el ancho de la tabla es la etiqueta: <TABLE WIDTH = N> WIDTH indica la anchura total de la tabla en pixeles. Ancho y alto de celdas Las etiquetas anteriores se pueden utilizar de la siguiente manera: <TD HEIGHT= N WIDTH= N> Alineación de las tablas Hay varias formas de poder alinear nuestra tabla. Se incluye la tabla dentro de un párrafo. <P ALIGN= CENTER > </P> Temas Parcial 1 11

12 IMÁGENES EN LAS TABLAS Dentro de nuestras tablas se pueden insertar imágenes, textos, párrafos, enlaces. Para una imagen: <IMG src = archivo > entre <TD> y </TD> ASPECTO DE LA TABLA COLOR DEL BORDE Para dar el color al borde de nuestra tabla utilizaremos: <TABLE BORDERCOLOR = color > También podemos dar el color a las líneas de nuestra tabla. BORDERCOLORDARK: este es para dar color a las líneas derecha. inferiores de la BORDERCOLORLIGHT: este es para dar color a las líneas superiores de la izquierda. COLORES DE LAS CELDAS Utilizaremos la siguiente etiqueta: <TD BGCOLOR = RED > </TD> Y la celda será roja. COLOR DE FONDO EN LA TABLA Utilizaremos la siguiente etiqueta: <TABLE BGCOLOR = COLOR > Temas Parcial 1 12

13 Utilizaremos la siguiente etiqueta: IMAGEN DE FONDO EN LA TABLA <TABLE BACKGROUND = ARCHIVO DE IMAGEN >. Temas Parcial 1 13

14 Al haber terminado de hacer nuestra página web los resultados son: Temas Parcial 1 14

Documentos relacionados

Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.

En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta