HTML BASICO CLASE 1. QUE ES HTML? HyperText Markup Language (Lenguaje de Marcado de Hipertexto) Etiquetas con Corchetes Angulares (<>) Desciende del SGML.

Presentación del tema: "HTML BASICO CLASE 1. QUE ES HTML? HyperText Markup Language (Lenguaje de Marcado de Hipertexto) Etiquetas con Corchetes Angulares (<>) Desciende del SGML."— Transcripción de la presentación:

1 HTML BASICO CLASE 1

2 QUE ES HTML? HyperText Markup Language (Lenguaje de Marcado de Hipertexto) Etiquetas con Corchetes Angulares (<>) Desciende del SGML (Standard Generalized Markup Language o "Lenguaje de Marcado Generalizado") tipo de MIME text/html tipo de MIME

3 Marcado HTML ELEMENTOS – etiqueta de inicio (p.ej. ) – Etiqueta de cierre (p.ej. ) – Contenido ATRIBUTOS

4 DOCTYPES 4.01 STRICT (ni font ni frameset) 4.01 TRANSITIONAL (inclu ye font pero no framesets) 4.01 FRAMESET

5 Mi primera pagina Mi Primera pagina Esta es mi primera pagina HTML. Por el momento solo se muestra unas cuantas cosas dentro de poco pondre aqui muchas cosas interesantes.

6 dir=“rtl” o dir=“ltr” lang=“es”

7

8

9

10 PARAGRAPH PARRAFO 1 PARRAFO 2

11 Formato del texto Here is some Hebrew text (ltr) twenty

12 PROBLEMAS CON UN POEMA

13 HEADINGS GRANDE MENOS GRANDE MEDIANO MEDIANO CHICO CHICO MUY CHICO

14 SALTOS DE LINEA

15 COMENTARIOS

16

17 This a link to Peter's page Mary's page Sue's page John's page This is a link to W3C. Pagina Nueva Last Page Misma Pagina – See also Chapter 4. – Chapter 4 Click here! http://www.w3schools.com/

18 imagemap --------------------------------- Para ver las cordenadas de la imagen

19 LISTAS – –

20 LISTAS ENLAZADAS (cambian solos los iconos) Coffee Tea Black tea Green tea Milk

21 This is a header This is a paragraph.

22 1 2 3 4

23 Row 1, cell 1 Row 1, cell 2 Row 2, cell 1 Row 2, cell 2 Row1, cell1Row1,cell2 Row2,cell1Row2,cell2

24 Cabeceras Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 HeadingAnother Heading Row1, cell1Row1,cell2 Row2,cell1Row2,cell2

25 colspan y rowspan Name Telephone Bill Gates 555 77 854 555 77 855 NameTelephone Bill Gates555 77 854555 77 855

26 colspan y rowspan First Name: Bill Gates Telephone: 555 77 854 555 77 855 First Name:Bill Gates Telephone: 555 77 854 555 77 855

27 First Row Second Row FirstRow SecondRow

28 First Row Second Row FirstRow SecondRow

29 Alinear contenido Money spent on.... January Clothes $241.10 Make-Up $30.00 Food $730.40 Sum $1001.50 Money spent on.... January Clothes$241.10 Make-Up$30.00 Food$730.40 Sum$1001.50

30 WIDTH First Row Second Row FirstRow SecondRow

31 WIDTH First Row Second Row FirstRow SecondRow

32 WIDTH First Row Second Row FirstRow SecondRow

33 WIDTH FIJOS (WIDTH=“150”) PORCENTAJE (WIDTH=“90%”)

34 FORMULARIOS. input elements

35 FORMULARIOS First name: Last name:

36 FORMULARIOS Male Female

37 FORMULARIOS I have a bike: I have a car: I have an airplane:

38 FORMULARIOS Volvo Saab Fiat Audi

39 FORMULARIOS Volvo Saab Fiat Audi

40 FORMULARIOS

41 FORMULARIOS The cat was playing in the garden.

42 FORMULARIOS Health information: Height Weight

43 FORMULARIOS Username:

44 FORMULARIOS Nombre: Mail: comentario:

45 FRAMES Título de la página Lo siento,su navegador no soporta frames. Pulse aquí para acceder a los contenidos de estas páginas.

46 FRAMES Contenido del frame1.htm Contenido del frame2.htm

47 FRAMES

48 FRAMES Contenido del frame1.htm Contenido del frame2.htm Contenido del frame3.htm

49 FRAMES

50 FRAMES Frame A Frame BFrame C

51 FRAMES TARGET=_top, hace que la página se cargue en la ventana completa del navegador. TARGET=_self, hace que la página se cargue en la misma ventana del frame actual. TARGET=_parent, hace que la página se cargue en el frame "padre", del que desciende el actual TARGET=_blank, hace que la página se cargue en una nueva ventana. TARGET=nombre, hace que la página se cargue en el frame llamado nombre. Si no existe se carga en una ventana nueva

52 FRAMES TARGET=_top Frame A Frame BFrame C LINK con Target=“_top”

53 FRAMES TARGET=_self Frame A Frame BFrame C LINK con Target=“_self”

54 FRAMES TARGET=_parent Frame A Frame BFrame C LINK con Target=“_parent”

55 FRAMES TARGET=titulo Frame A Frame BFrame C LINK con Target=“titulo”

56 COLS=*,5* dos columnas, la segunda cinco veces mayor que la primera COLS=150,*,150 tres columnas, la primera y tercera de 150 píxels, la segunda ocupa el resto. ROWS=20%,80% dos filas que ocupan el 20 % y el 80 % del espacio respectivamente.

57 ATRIBUTOS DE FRAME TAG SCROLLING= yes, no, auto. Indica si el frame llevará siempre, nunca o cuando lo necesite, barra de deslizamiento vertical BORDERCOLOR="color". Indica el color del borde MARGINWIDTH=n. Indica el margen horizontal, tanto derecho como izquierdo, en píxels MARGINHEIGHT=n. Indica el margen vertical, tanto superior como inferior, en píxels NORESIZE. Indica que el frame no se puede redimensionar. Si no se pone este atributo colocando el cursor en el borde del frame, permitiría su deslizamiento

58 ATRIBUTO FRAMESET FRAMEBORDER=yes, no

59 IFRAMES Your browser does not support iframes. Contenido Pagina contenedora Contenido iframe1.htm

60 IFRAME PROPIEDADES SRC WIDTH SCROLLING HEIGHT NAME CLASS ID FRAMEBORDER (0 o 1)

61 SCRIPTS

62 HOJAS DE ESTILO

63 CARACTERES ESPECIALES Caracter Entidad HTML á á é é í í ó ó ú ú ñ ñ Ñ Ñ