03-practicas de html

TABLA DE CONTENIDOPrctica No. 1. ETIQUETAS DE APERTURA.......................................................3Prctica No. 2. ESTRUCTURA BSICA..............................................................3Prctica No. 3. PRRAFOS............................................................................... 4Prctica No. 4. ENCABEZADOS.......................................................................5Prctica No. 5. CENTRADO.............................................................................. Prctica No. . SEPARADOR !ORIZONTA"......................................................Prctica No. #. SEPARADOR !ORIZONTA" ANC!O..........................................#Prctica No. $. SEPARADOR NOS!ADE...........................................................#Prctica No. %. SEPARADOR NOS!ADE SIZE...................................................$Prctica No. 1&. DEREC!A.............................................................................. $Prctica No. 11. IZQUIERDA............................................................................ %Prctica No. 12. ETIQUETAS ANIDADAS..........................................................%Prctica No. 13. SA"TO DE "'NEA..................................................................1&Prctica No. 14. TE(TO CON TA)A*O )ENOR.............................................11Prctica No. 15. TE(TO CON TA)A*O )A+OR..............................................12Prctica No. 1. NE,RITAS + CURSI-AS........................................................13Prctica No. 1#. Ti.o /0 1203t0....................................................................14Prctica No. 1$. TE(TO PREFOR)ATEADO....................................................15Prctica No. 1%. TA)A*O DE FUENTE...........................................................1#Prctica No. 2&. CITA TE(TUA".....................................................................1%Prctica No. 21. -I*ETAS.............................................................................. 21Prctica No. 22. ANIDAR -I*ETAS.................................................................22Prctica No. 23. -I*ETAS CUADRADAS.........................................................23Prctica No. 24. -I*ETAS CON N4)EROS RO)ANOS...................................24Prctica No. 25. CO"OR DE TE(TO...............................................................25Prctica No. 2. CO"OR DE FONDO..............................................................2Prctica No. 2#. I)A,EN DE FONDO.............................................................2#Prctica No. 2$. I)A,EN DE BOT5N.............................................................2$Prctica No. 2%. ANC"AS O )ARCADORES....................................................2%Prctica No. 3&. EN"ACE CON UNA P,INA DE INTERNET............................31Prctica No. 31. EN"ACE DE CORREO E"ECTR5NICO...................................32Prctica No. 32. EN"AZAR A OTRA P,INA UTI"IZANDO UNA I)A,EN.........33Prctica No. 33. TE(TO A"TERNATI-O..........................................................341MAGN Alberto Karim Gmez VzquezPrctica No. 34. EN"ACE UTI"IZANDO UNA I)A,EN PARA -ER OTRA I)A,EN..................................................................................................................... 35Prctica No. 35. EN"ACE A UN DOCU)ENTO................................................3Prctica No.3. EN"ACE TE(TO A UNA I)A,EN..........................................3#Prctica No.3#. TE(TO CON RESPECTO A "A I)A,EN................................3$Prctica No. 3$. "ETRAS + CARACTERES ESPECIA"ES...................................3%Prctica No. 3%. TAB"AS............................................................................... 41Prctica No. 4&. TAB"AS CON BORDE...........................................................42Prctica No. 41. CO"OR DE BORDE...............................................................43Prctica No. 42. SEPARACI5N ENTRE "AS CE"DAS DE UNA TAB"A...............44Prctica No. 43. SEPARACI5N ENTRE E" CONTENIDO + E" BORDE DE "A CE"DA.......................................................................................................... 4Prctica No. 44. DI)ENSIONES DE TAB"A + CE"DAS....................................4$Prctica No. 45. TAB"AS FI"AS DESI,UA"ES................................................5&Prctica No. 4. I)A,EN EN UNA TAB"A......................................................51Prctica No. 4#. T'TU"O DE "A TAB"A...........................................................53Prctica No. 4$. CE"DAS DE CABECERA.......................................................55Prctica No. 4%. CE"DAS QUE ABARCAN A OTRAS CE"DAS...........................5Prctica No. 5&. UNA CE"DA OCUPE E" ESPACIO DE -ARIAS FI"AS..............5#Prctica No. 51. POSICI5N DE" CONTENIDO DENTRO DE "A CE"DA............5$Prctica No. 52. A"INEACI5N DE TE(TO EN UNA CE"DA ARRIBA O ABA6O. . .&Prctica No. 53. DI)ENSIONES DE "AS CE"DAS...........................................1Prctica No. 54. CO"OR DE FONDO DE "A TAB"A.........................................2Prctica No. 55. CO"OR DE FONDO DE "AS CE"DAS....................................3Prctica No. 5. I)A,EN DE FONDO DE "A TAB"A.......................................4Prctica No. 5#. I)A,EN DE FONDO DE "A CE"DA.......................................52MAGN Alberto Karim Gmez VzquezPRCTICAS DE HTMLHTML es un lenguaje de hipertexto, Nos sirve para modelar texto, Trabaja conetiquetas y cada etiqueta indicar algo.

< abre>cierraSu extensin es HTMLPrctica No. 1. ETIQUETAS DE APERTURATodo documento HTML debe estar incluido dentro de las etiquetas. Esto le indica al navegador en que lenguaje est creado eldocumento

NSTTUTO MAR DE CORTES

Prctica No. 2. ESTRUCTURA BSICADentro de las etiquetas .Existen dos partes fundamentales la cabecera del documento que son:

TTULO DEL PROGRAMA

Entre estas etiquetas pondremos el contenido de nuestra pgina web

3MAGN Alberto Karim Gmez VzquezPrctica No. 3. PRRAFOSCuando llegamos al final de la lnea de texto, ste saltar automticamente a lalnea siguiente, pero siqueremos crear prrafos separados por una lnea enblanco utilizaremos la etiqueta

Prrafos

Esto es un prrafo dentro de una pgina web. Esto es otro prrafo que est separado del anterior por unalnea en blanco.

4MAGN Alberto Karim Gmez VzquezPrctica No. 4. ENCABEZADOS Tambinpodemoscrearencabezados(tambinllamadoscabeceras)paraeltexto por ejemplo para sealar los distintos encabezados

Encabezados

Encabezado 1 Encabezado 2 Encabezado 3 Encabezado 4 Encabezado 5 Encabezado 6

5MAGN Alberto Karim Gmez VzquezPrctica No. 5. CENTRADOPara centrar los elementos del documento HTMLutilizamos las etiquetas

Centrado

Prctica No. . SEPARADOR !ORIZONTA"Es posible colocar un separador horizontal con la instruccin .

SEPARADOR HORZONTAL NSTTUTO MAR DE CORTES Podemos utilizar una lnea horizontal para separar distintas partes de una pgina Web, y para ello utilizaremos esta etiqueta

MAGN Alberto Karim Gmez VzquezPrctica No. #. SEPARADOR !ORIZONTA" ANC!O

SEPARADOR HORZONTALANCHO

Prctica No. $. SEPARADOR NOS!ADESi queremos que el separador horizontal aparezca incrustado en la pgina, podemos aadir la etiqueta el comando NOSHADE

SEPARADOR HORZONTALNOSHADE

#MAGN Alberto Karim Gmez VzquezPrctica No. %. SEPARADOR NOS!ADE SIZEPodemoshacer el queseparador horizontal seamsgruesoaadiendoelcomandoSZE=gruesoenpixelesalaetiquetaHR. Si queremoscrearunseparador horizontalcon un grosor de 20 pixeles y con sombras tendramosque escribir la siguiente lnea de cdigo

SEPARADOR HORZONTALNOSHADE

Prctica No. 1&. DEREC!AALNEACN DEL SEPARADOR HORZONTALPodemos alinear elseparador horizontala la izquierda o a la derecha. sinoespecificamos la alineacin, el separador aparecer siempre centrado.Para alinearlo a la izquierda utilizaremos el COMANDOALNGN="LEFT"aadiendoalaetiqueta, tal ycomopuedeverseenel ejemplo

SEPARADOR HORZONTAL

$MAGN Alberto Karim Gmez VzquezPrctica No. 11. IZQUIERDAPara alinearlo a la izquierda utilizaremos el comando align="left" aadiendo a laetiqueta, tal ycomopuedeverseenel ejemplo

SEPARADOR HORZONTAL

Prctica No. 12. ETIQUETAS ANIDADAS

ETQUETAS ANDADAS ETQUETAS ANDADASCURSO HTMLCURSO HTMLCURSO HTML

%MAGN Alberto Karim Gmez VzquezPrctica No. 13. SA"TO DE "'NEA

SALTO DE LNEA SALTOS DE LNEA

CARRERA

NFORMATCA

1&MAGN Alberto Karim Gmez VzquezPrctica No. 14. TE(TO CON TA)A*O )ENORCon las etiquetas y conseguimos un texto con un tamao menor yconlaaparienciadeuntextoescritoamquina, peroenestecasonoseformatea el texto, slo afecta al tipo de letra.

Texto con tamao menor TEXTO CON TAMAO MENOR CARRERA NFORMATCA Podemos crear un texto que parezca haber sido escrito con una mquina de escribir, el texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipo Courier) respetar los espacios en blanco y los saltos de lnea sin necesidad de incluir ninguna etiqueta ms.

11MAGN Alberto Karim Gmez VzquezPrctica No. 15. TE(TO CON TA)A*O )A+OR

Texto con tamao mayor TEXTO CON TAMAO MAYOR CARRERA NFORMATCA Podemos crear un texto con tamao mayor

12MAGN Alberto Karim Gmez VzquezPrctica No. 1. NE,RITAS + CURSI-AS() TEXTO EN NEGRTAS () () TEXTO EN CURSVAS ()

NEGRTAS Y CURSVAS TEXTO CON TAMAO MAYOR, ENCABEZADO H1, NEGRTAS Y CURSVA NSTTUTO MAR DE CORTES

TERCER SEMESTRE

13MAGN Alberto Karim Gmez VzquezPrctica No. 1#. Ti.o /0 1203t0 ESTA ETQUETA ADMTE VAROS ATRBUTOS: TAMAO DE FUENTE, TPO DE FUENTE AADREMOS A ESTA ETQUETA EL ATRBUTO size=Nmero tamao letra. Los tamaos de letras van, de menor a mayor, del 1 al 7. Si dentro del cuerpo del documento escribimos lo siguiente:Fuente arialEjemplo:

TPO DE FUENTE TPO DE FUENTE NSTTUTO MAR DE CORTES Tipo de fuente Fuente Arial
Fuente Arial Black
Fuente Comic Sans MS
Fuente Courier New
Fuente Georgia
Fuente mpact
Fuente Times New Roman

Fuente Trebuchet MS
Fuente Verdana

14MAGN Alberto Karim Gmez VzquezPrctica No. 1$. TE(TO PREFOR)ATEADOPodemos crear un texto que aparezca haber sido escrito con una mquina de escribir, para ello utilizamos las etiquetas El texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipoCourier) Y respetar los espacios en blanco y los saltos de lnea sin necesidad de incluir ninguna etiqueta ms.

Texto preformateado

Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir para ello utilizamos las etiquetas cerradas "PRE" y "/PRE". El texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipo curier) respetar los espacios en blanco y los saltos de linea sin necesidad de incluir ninguna etiqueta ms LENGUAJE DE MARCADO DE HPERTEXTO TEXTO PREFORMATEADO Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir para ello utilizamos las etiquetas cerradas "PRE" y "/PRE". El texto aparecer con el tipo de letra de las mquinas de15MAGN Alberto Karim Gmez Vzquez escribir antiguas (tipo curier) respetar los espacios en blanco y los saltos de linea sin necesidad de incluir ninguna etiqueta ms

1MAGN Alberto Karim Gmez VzquezPrctica No. 1%. TA)A*O DE FUENTE ESTA ETQUETA ADMTE VAROS ATRBUTOS: TAMAO DE FUENTE, TPO DE FUENTE AADREMOS A ESTA ETQUETA EL ATRBUTO size=Nmero tamao letra. Los tamaos de letras van, de menor a mayor, del 1 al 7. Si dentro del cuerpo del documento escribimos lo siguiente:Tamao 5El tamao por defecto es el 3 y podemos cambiar el texto con respecto a este tamao base utilizando -1 para un tamao algo menor, +1 para un tamao algo mayor que el 3 y +2 para un tamao an mayor. Ejemplo:el tamao base menormayorTgrande 5Ejemplo:

TAMAO DE FUENTE TAMAO DE FUENTE NTERFAZ GRAFCA DE USUARO VANNEVAR BUSH Desarrolla a nivel terico el concepto de ordenador personal incluyendo adems el concepto de hipertexto, como propuesta para un modelo de informacin interconectada.

1#MAGN Alberto Karim Gmez Vzquez1$MAGN Alberto Karim Gmez VzquezPrctica No. 2&. CITA TE(TUA"Utilizando las etiquetas .

CTA TEXTUAL CTA TEXTUAL NTERFAZ GRAFCA PRECURSORES El primer periodo de la historia del interfaz est marcado por la investigacin y la bsqueda de un paradigma de interaccin definitivo y ptimo.
Theodor Holm Nelson ntroducira el concepto de hipermedia, virtualidad, hipertexto (1963).

Alan Kay Sus aportaciones estn relacionadas con el lenguaje orientado a objetos, Smaltalk, desarrollado en el centro de investigacin Xerox Parc.

1%MAGN Alberto Karim Gmez Vzquez2&MAGN Alberto Karim Gmez VzquezPrctica No. 21. -I*ETAS

LSTA CON VETAS LSTA CON VETAS

CAPTULO 1 CAPTULO 2 CAPTULO 3

El resultado ser.21MAGN Alberto Karim Gmez VzquezPrctica No. 22. ANIDAR -I*ETAS

LSTA CON VETAS ANDADAS MC VETAS ANDADAS

TEMA 1

SUBTEMA 1 SUBTEMA 2 SUBTEMA 3

TEMA 2TEMA 3

22MAGN Alberto Karim Gmez VzquezPrctica No. 23. -I*ETAS CUADRADAS

LSTA CON VETAS CUADRADAS

LSTA CON VETAS CUADRADAS

MC

CAPTULO 1

NCO TRAMA DESENLACE

CAPTULO 2 CAPTULO 3

23MAGN Alberto Karim Gmez VzquezPrctica No. 24. -I*ETAS CON N4)EROS RO)ANOS

LSTA CON VETAS ANDADAS LSTA CON VETAS ANDADAS CNAD MECATRNCA

CAPTULO 1

NCO TRAMA DESENLACE

CAPTULO 2

NCO TRAMA DESENLACE

CAPTULO 3

NCO TRAMA DESENLACE

24MAGN Alberto Karim Gmez Vzquez25MAGN Alberto Karim Gmez VzquezPrctica No. 25. CO"OR DE TE(TOPara establecer un color, utilizamos el formato RGB(rojo, verde, azul)Cada color va representado por un par Colores primariosCOLOR CDIGO HEXADECIMALROJO #FF0000VERDE #00FF00AZUL #0000FFBLANCO #FFFFFFNEGRO #000000AMARLLO #FFFF00Con las etiquetas: Color del texto Color de los enlaces Color de los enlaces una vez visitados Color de los enlaces activos(el que se ve al hacer clic sobre l)

ATRBUTO FACE Este texto tiene otra tipografa MC ATRBUTO FACE Podemos crear un texto que aparezca muy colorido con la etiqueta TEXT y con el atributo face, podemoscambiar el tipo de letra.

2MAGN Alberto Karim Gmez VzquezPrctica No. 2. CO"OR DE FONDOCambiar el color defondoutilizandoel atributodentro de la etiqueta . Por ejemplo si escribimos la siguiente lnea decdigo

Colores de fondo MC COLOR DE FONDO Para cambiar el color de fondo de toda la pgina utiliza el atributo BGCOLOR seguido de un nmero hexadecimal de 6 posiciones. Los dos primeros son para el rojo, los siguientes dos para el verde y los ltimos dos para el azul.

2#MAGN Alberto Karim Gmez VzquezPrctica No. 2#. I)A,EN DE FONDOLa sintaxis para incluir una imagen como fondo sera:BODY BACKGROUND=MGENES/nombre de la magen.gif>Ejemplo:

MAGEN DE FONDO CASCADA

2$MAGN Alberto Karim Gmez VzquezPrctica No. 2$. I)A,EN DE BOT5N

MAGEN DE FONDO Conoce el logo del MC: Te't#

03-practicas de html

Documents