Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Lenguaje HTML

    Загружено:

    Daniel Leonardo Goméz H
    72 просмотров37 страниц

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PPT, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    72 просмотров37 страниц

    Lenguaje HTML

    Загружено:

    Daniel Leonardo Goméz H

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 37

    CICLO 2013 - I

    Unidad: 1 Semana: 2

    LENGUAJE DE PROGRAMACIN III

    Profesor: Juan Alvites Huamani

    TTULO DEL TEMA

    Lenguaje HTML

    ORIENTACIONES
    En esta sesin aprender los conceptos del Lenguaje HTML Las marcas o instrucciones del Lenguaje HTML Uso del Lenguaje HTML en la plataforma del ASP.Net

    1. Una Pgina bsica


    Principio esencial uso de ETIQUETAS (TAGS).
    <XXX> inicio de una orden </XXX> fin de la orden

    Estructura de un documento en HTML <HTML> <HEAD> Encabezamiento </HEAD>

    <BODY> Cuerpo </BODY> </HTML>

    Encabezamiento <TITLE> Ttulo de la pgina </TITLE> Cuerpo del programa Separacin del texto en prrafos con una lnea en blanco <P> Cabeceras o ttulos (los tamaos van entre 1 hasta 6) <H1> texto </H1> <H2> texto </H2> <H3> texto </H3> <H4> texto </H4> <H5> texto </H5> <H6> texto </H6> Centrado <CENTER> texto </CENTER> Separadores o barra incrustada <HR>

    2. Dando forma al texto


    Separacin de prrafos sin una lnea en blanco <BR> Mltiples lneas en blanco <BR><P> <BR><P> <B> texto </B>

    Negrita

    Cursiva
    <I> texto </I>

    Para frmulas matemticas ndices y subndices


    <SUP> texto </SUP> (ndices)m2 <SUB> texto </SUB> (subndices)m2 m <SUP> 2 </SUP> m <SUB> 2 </SUB>

    Listas Listas desordenadas (no numeradas): sirven para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un nmero. <UL> <LI>Una cosa <LI>Otra cosa <LI>Otra ms </UL> Listas ordenadas (numeradas): sirven para presentar cosas en un orden determinado. <OL> <LI>Primera cosa <LI>Segunda cosa <LI>Tercera cosa </OL>

    Listas anidadas: Por ejemplo: <UL> <LI> AA <LI> BB <OL> <LI>BB1 <LI>BB2

    </OL>
    <LI> CC </UL>

    <html> <head> <title> Mi pgina Web- 2 </title> </head> <Body> <center> <h1> Mis aficiones </h1> </center> <hr> Sin un orden particular, mis <b> aficiones </b> son las siguientes: <ul> <li>El cine <li>El deporte <ul> <li>Natacin <li>Baloncesto </ul> <li> la msica </ul> La msica que ms me gusta es <I> (en orden de preferencia): </I> <ol> <li> el Rock <li> el jazz <li> la msica clsica </ol> <Body> </html> 9

    Ejemplo prctico

    Prctica
    Traduce la siguiente pgina WEB a su correspondiente cdigo en lenguaje HTML: Nombre del documento: PagRep1-2.html

    Repaso Captulos 1 y 2
    En esta prctica estudiaremos: Listas ordenadas
    Negritas Cursivas

    1. 2.

    Opciones de prrafo
    Centrado Mltiples lneas en blanco
    1. 2. Enter Enter + Lnea en blanco H 2=C 2+C 2 A n={a1 + a2 + a3 + a4 +.+ ak }

    3.

    Frmulas

    Listas desordenadas
    Listas anidadas Listas combinadas

    10

    3. Enlaces con otras pginas

    Estructura general de un enlace


    <A HREF=XXX> YYY </A>
    XXX: destino del enlace (Nombre del archivo) YYY: texto que indica el enlace

    Tipos de enlaces:
    1. 2. 3. 4. Enlaces dentro de la misma pgina Enlaces con otras pginas Enlaces con una pgina fuera de nuestro sistema Enlaces con una direccin e-mail

    11

    1. Enlaces dentro de la misma pgina <A HREF=#marca> YYY </A>


    #marca: Salta en el sitio de la pgina dnde hemos puesto la marca. Marca puede ser cualquier nombre. Cmo se pone una marca dentro de un documento? <A NAME=marca> </A> Por ejemplo: Si deseo ir al final de este documento
    <A HREF=#FINAL1>Pulsa aqu para ir al final de la primera pgina </A>

    <A NAME=FINAL1> </A>

    12

    2. Enlaces con otra pgina nuestra <A HREF=MIPAG1.HTML>Ejemplo 2 </A> Si queremos que vaya a un sitio concreto de otra pgina nuestra en vez de ir al principio de la pgina (a donde va por defecto), es preciso indicarlo mediante una marca: <A HREF=MIPAG1.HTML#fin_pag>Ejemplo 2 </A>

    En el archivo MIPAG1.HTML colocaremos la marca de final de


    documento en el final de ste de la siguiente forma: <A NAME=fin_pag> </A>

    Observacin importante: es conveniente tener todos nuestros archivos en el mismo directorio, de lo contrario tendr que especificarse la ruta.

    13

    3. Enlaces con una pgina fuera de nuestro sistema <A HREF=http://www.uib.es>Universidad de las Islas Baleares </A>

    4. Enlaces con una direccin e-mail En este caso, sustituimos lo que se ha llamado antes XXX (destino del enlace) por mailto: seguido de la direccin e-mail. <A HREF=mailto: direccin e-mail>texto del enlace </A>

    14

    Ejemplo
    <html> <head>
    <title> Mi pgina web 3 </title> </head>

    <Body>
    <center> <h1> Mis pginas favoritas </h1> </center> <hr> Estas son mis pginas favoritas: <p> <a href=http://www.uib.es> UIB </a> <br> <a href=http://www.microsoft.com> Microsoft </a> <br> <a href=http://www.google.com> Buscador google </a> </Body> </html>

    15

    Prctica: Crear las siguientes pginas con el bloc de notas


    Contenido de Tecnologa de la Informacin
    Esta asignatura consta de los siguientes temas: 1.Conceptos bsicos 2.Curso HTML 3.Curso Excel 4.Curso Acces (bsico) 5.Curso Word 6.Iniciacin a la programacin estructurada

    Curso Conceptos bsicos


    1. Qu es la informtica?
    1. 2. Qu es la informtica? Aplicaciones Definicin de ordenador Cmo funciona un ordenador? Partes que integran un ordenador Sistema Binario Sistema octal Sistema hexadecimal Estudio de las diferentes partes que integran un PC Prctica

    2.

    Estructura del ordenador


    1. 2. 3.

    3.

    Sistemas de numeracin
    1. 2. 3.

    4. Volver al inicio de la pgina Web oficial de la Universidad Cesr Vallejo Buzn de sugerencias Contenidos.html
    uap.sugerencias@hotmail.com

    Arquitectura de un PC
    1. 2.

    Volver a la pgina principal


    Concep_Basic.html
    16

    4. Imgenes
    Etiqueta general <IMG SRC=nombre_imagen.gif> Si se desea que salga una descripcin de la imagen para que en el caso de que no se carge LA IMAGEN se disponga de una breve descripcin, se aadira el comando ALT de la siguiente forma:

    <IMG SRC=nombre_imagen.gif alt=descripcin> Posicin del ttulo de la imagen


    <IMG SRC=IMG1.gif Align=MIDDLE> Ttulo arriba Ttulo en medio Ttulo abajo
    <IMG SRC=IMG1.gif Align=TOP> <IMG SRC=IMG1.gif Align=BOTTOM> 17

    Imagen como enlace a otra pgina <A HREF=PAG.HTML><IMG SRC=IMG.GIF> </A> Borde de la imagen: Si no se desea que aparezca el rectngulo que rodea la imagen para resaltar el vnculo, hay que incluir dentro de la etiqueta de la imagen al atributo BORDER=0. <A HREF=PAG.HTML><IMG SRC=IMG.GIF BORDER=0> </A>

    Imagen que enlaza con otra imagen <A HREF=IMG1.GIF><IMG SRC=IMG2.GIF> </A>

    Texto para enlazar con una imagen Img2.gif <A HREF=IMG.GIF> Ver la imagen IMG </A>
    Img1.gif

    18

    Ejemplo: Copia el siguiente documento y guarda en tu carpeta de trabajo dos imgenes con los siguientes nombres hombre.jpg, isla. jpg y casa. jpg.
    <HTML> <HEAD> <TITLE> Mi pgina del web 4 </TITLE> </HEAD> <BODY> <CENTER> <H1> Mi pgina del web </H1> </CENTER> <HR> Esta es mi pgina del web. No es muy extensa, pero tiene todos los elementos bsicos. Espero que os guste. Poco a poco le ir aadiendo ms cosas interesantes. <P> <A HREF=MIPAG2.HTML><IMG SRC=hombre.jpg></A> Mis aficiones <P> <A HREF=MIPAG3.HTML><IMG SRC=Casa.jpg></A> Mis pginas favoritas <CENTER> <H3> Un lugar ideal para mis vacaciones </H3> <IMG SRC=Isla.jpg ALT=isla> </CENTER> </BODY> </HTML>
    19

    Prctica
    Tecnologa de la Informacin
    Presentacion.html Conceptos de Tecnologas de la Informacin

    Universidad Vallejo

    Presentacin

    Objetivos del curso

    Las tecnologas de la informacin y la comunicacin no son ninguna panacea ni frmula mgica, pero pueden mejorar la vida de todos los habitantes del planeta. Se disponen de herramientas para llegar a los Objetivos de Desarrollo del Milenio, de instrumentos que harn avanzar la causa de la libertad y la democracia, y de los medios necesarios para propagar los conocimientos y facilitar la comprensin mutua" Ir a pagina principal

    Contenido

    Contenidos.html

    TecInf.html

    20

    Presentacion.html

    6. Los estndares del HTML


    La mayora de las etiquetas son estndar para todos los navegadores.

    Etiqueta no estndar: el parpadeo


    <BLINK> Este texto parpadea </BLINK>

    Separador horizontal

    Ocupar un 75% de su anchura normal <HR WIDTH=300> Tiene una anchura de 300 pixels <HR WIDTH=75% ALIGN=LEFT> Anchura del 75% con respecta a
    <HR WIDTH=75%>
    la anchura normal y alineada a la izquierda

    <HR WIDTH=75% ALIGN=RIGHT>


    a

    Anchura del 75% con respecta

    la anchura normal y alineada a la derecha

    <HR SIZE=20>

    Varia el espesor del separador


    21

    Tamao de las fuentes


    <FONT SIZE=5> Texto en tamao 5 </FONT>
    Nota 1: Los tamaos del texto van, de menor a mayor, del 1 al 7. El tamao normal Base es el de 3. Nota 2: Se puede cambiar el tamao relativamente con respecto al tamao base de la siguiente forma:

    <FONT SIZE=+2> Texto en tamao 5 </FONT> <FONT SIZE=-2> Texto en tamao 1 </FONT>

    Tipos de fuentes
    Con el atributo FACE se indican varios tipos de fuentes distintas. <FONT FACE=TAHOMA, VERDANA, IMPACT> Tipo de Fuente tahoma </FONT>

    Color de Fuente: se da usando el color en ingles o la funcin RGB(rojo,verde,azul)


    <FONT COLOR=COLOR FUENTE> texto </FONT>

    22

    7. Fondos
    Fondo con un color uniforme <BODY BGCOLOR=#XXYYZZ>
    XX es un nmero indicativo de la cantidad de rojo YY es un nmero indicativo de la cantidad de verde ZZ es un nmero indicativo de la cantidad de azul Numeracin en Hexadecimal={0,1,2,3,4,5,6,7,8,9, A, B, C, D, E, F} MENOR MAYOR

    Colores primarios
    Rojo #FF0000 Verde #00FF00 Azul #0000FF

    Otros colores
    Blanco #FFFFFF Negro #000000 Amarillo #FFFF00 Rojo oscuro #AA0000 Rosa # FF7070
    23

    Colores del texto y de los enlaces

    TEXT color del texto LINK color de los enlaces VLINK color de los enlaces visitados

    <BODY BGCOLOR=#XXYYZZ TEXT =#XXYYZZ LINK=#XXYYZZ VLINK =#XXYYZZ >

    Cambio del color de una parte del texto


    <FONT COLOR=#XXYYZZ> Texto </FONT> Recuerda que <FONT FACE=Arial SIZE=4 COLOR=#XXYYZZ> Texto </FONT>

    Fondos con una imagen


    <BODY BACKGROUND=IMAGEN.GIF>
    24

    Curso de Word
    1. Conceptos bsicos Prctica 1 Prctica 2 Prctica 3 2. Tablas y tabulaciones Prctica 4 Prctica 5 Prctica 6 3. Herramientas del Word Prctica 7 Prctica 8 Prctica 9 4. Opciones del prrafo Prctica 10 Prctica 11 Prctica 12 5. Trabajo con hojas de clculo y grficos Prctica 13 Prctica 14 Prctica 15 6. Hipervnculos, objetos y otras opciones Prctica 16 Prctica 17 Prctica 18 7. Exmenes de prueba Examen 1

    Caractersticas de la pgina
    Tipo de fuente: Tahoma Color de la fuente: Azul pastel Color de fondo: Lila Pastel Color enlaces: Amarillo Color enlaces visitados: Rojo Tamao ttulos: H2 Tamao fuente: 4 Largo de la barra (HR)=75% Nombre de la pgina: Word.html

    Volver a contenidos
    25

    8. Alineacin y dimensionado de las imgenes


    Alineacin a la izquierda o a la derecha de una imagen en la pgina
    Un ordenador llamado tambin computadora, es la mquina que hace una serie de operaciones simples (sumas, restas, multiplicaciones, divisiones, lecturas, impresiones, etc.) es un tiempo mnimo y con la mxima seguridad.

    <IMG SRC=ordenador.gif ALIGN=LEFT>


    La aplicacin de la informtica comercial cada da llega a ms reas de la sociedad, desde la automatizacin de ciertos electrodomsticos hasta los grandes ordenadores de ciertas empresas.

    <IMG SRC=ordenador.gif ALIGN=RIGHT>


    26

    Interrumpir el proceso de rellenado del texto a los lados de la imagen <BR CLEAR=LEFT> Busca el primer margen libre a la izquierda <BR CLEAR=RIGHT> Busca el primer margen libre a la derecha <BR CLEAR=ALL> Busca el primer margen libre a ambos lados Ejemplo 1:
    Los perifricos corresponden a los elementos que proporcionan la informacin al ordenador y a los elementos por los cuales el ordenador suministra los resultados del proceso.

    <BR CLEAR=RIGHT>
    Los datos de entrada suministran la informacin necesaria al ordenador para que pueda resolver un problema.

    Ejemplo 2:
    Los perifricos corresponden a los elementos que proporcionan la informacin al ordenador y a los elementos por los cuales el ordenador suministra los resultados del proceso.

    <BR CLEAR=LEFT>
    Los datos de entrada suministran la informacin necesaria al ordenador para que pueda resolver un problema. 27

    Dimensionado de una imagen


    WIDTH: ancho HEIGHT: alto <IMG SRC=IMAGEN.GIF WIDTH=50 HEIGHT=50>

    <IMG SRC=boton.gif WIDTH=50 HEIGHT=25>

    28

    Prctica
    Objetivos del curso
    En general, los objetivos que se consideran fundamentales en esta y todas las asignaturas son:
    Expresin y comprensin de mensajes. Para ello se incidir en la utilizacin correcta de los conceptos y terminologa especifica del mundo de la informtica. Tratamiento de la informacin. Organizando adecuadamente la informacin utilizando para ello las herramientas oportunas. Resolucin de problemas. Resoldre problemes dun certa dificultat amb el maneig del programa full de clcul. Actitudes bsicas como la constancia y regularidad.

    Cmo llevar a cabo estos objetivos?


    Muchas ganas de aprender Inters Ilusin Curiosidad Constancia

    Volver a la pgina principal ObjetivosI.html 29

    Volver a la pgina principal ObjetivosII.html

    10. Tablas
    Estructura de una tabla <table border=2> <tr> <td> Text1 </td> <td> Text2 </td> <td> Text3 </td> </tr> <tr> <td> aa </td> <td> bb </td> <td> cc </td> </tr> <tr> <td> dd </td> <td> ee </td> <td> ff </td> </tr> <tr> <td> gg </td> <td> hh </td> <td> ii</td> </tr> </table>

    <table>
    etiquetas </table>

    Text1 aa dd gg

    Text2 bb ee hh

    Text3 cc ff ii

    30

    Filas con desigual nmeros de celdas

    Titular de la tabla

    <table border=2> <tr> <td> Text1 </td> <td> Text2 </td> <td> Text3 </td> </tr> <tr> <td> aa </td> <td> bb </td> <td> cc </td> </tr> <tr> <td> dd </td> <td> ee </td> </tr> </table>
    Text1
    aa dd

    <caption> Ttulo de la tabla </caption>

    Ttulo de la tabla
    Text1 aa dd Text2 bb ee Text3 cc

    Celdas

    de cabecera

    En lugar de <TD> texto </TD> escribir <TH> texto </TH> y pondr en negrita y centrado las celdas cabecera.

    Text2
    bb ee

    Text3
    cc

    Text1
    aa dd 31

    Text2
    bb ee

    Text3
    cc

    Contenido de las celdas Imgenes y Enlaces

    <table> <tr> <td><img src=img1.jpg></td> <td valign=TOP>Texto1</td> </tr> <tr> <td align=RIGHT><A href=mipag1.html>Enlace </a></td> <td>Texto2</td> </tr> <tr> <td> Texto3</td> <td>Texto4</td> </tr> </table>

    Texto 1

    Enlace Texto 2 Texto 3 Texto 4

    32

    Posicionamiento del contenido dentro de la celda <table> <tr> <td><img src=img1.jpg></td> <td valign=Bottom>Texto1</td> </tr> <tr> <td align=Center><A href=mipag1.html>Enlace </a></td> <td>Texto2</td> </tr> <tr> <td> Texto3</td> <td>Texto4</td> </tr> </table>

    Texto 1

    Enlace
    Texto3

    Texto 2
    Texto 4

    33

    Dimensiones de la tabla Ancho <table Width=N%> Alto <table Height=N%>

    Combinar celdas: Filas y Columnas <table border=2> <tr> <td colspan=2> Text1 </td> <td> Text2 </td> </tr> <tr> <td rowspan=3> aa </td> <td> bb </td> <td> cc </td> </tr> <tr> <td> ee </td> <td> ff </td> </tr> <tr> <td> hh </td> <td> ii</td> </tr> </table>

    Text1 bb aa ee hh

    Text2 cc ff ii

    34

    Color de fondo en las tablas


    Color en la totalidad de la tabla <table bgcolor=#XXYYZZ> Color en una celda determinada <td bgcolor=#XXYYZZ> texto </td>

    Imgenes de fondo en las tablas <table background=img.jpg> Separacin entre las celdas de una tabla <table border cellspacing=20>

    Separacin entre el borde y el contenido dentro de las celdas <table border cellpadding=20>

    35

    Prcticas: Crea las siguientes tablas utilizando el lenguaje HTML


    Tabla 1
    T1 A D G T2 B E H T3 C F I
    Enlace Txt5

    Tabla 2
    Titulo 1

    Tabla 3
    T1 T2
    B

    Txt1 Txt3

    Txt2 Txt4 A

    Tabla 4
    T1 AA DD BB EE HH JJ KK LL FF T2 CC GG II MM DD AA

    Tabla 5
    T2 T1 BB FF CC GG HH

    36

    GRACIAS

    Вам также может понравиться