Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • HTML

    Enviado por

    Adalberto Torres Gamas
    12 visualizações39 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PPTX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    12 visualizações39 páginas

    HTML

    Enviado por

    Adalberto Torres Gamas

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 39

    HTML

    HyperText Mark-up Language

    Tim Berners-Lee
    Invent HTML all por 1990. Objetivo: facilitar a cientficos de diferentes universidades el acceso a los documentos de investigacin de cada uno de ellos. El proyecto obtuvo un xito mucho mayor del que Tim Berners-Lee nunca hubiese llegado a imaginar. Sent las bases de la web tal y como la conocemos hoy da.

    HTML
    "HyperText Mark-up Language" marcado hipertextual", = "Lenguaje de

    Hiper: Es lo contrario de lineal, se puede ir donde uno quiera cuando uno quiera. Texto: Se explica por s solo. Marcado: Es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edicin de textos con encabezados, vietas, negrita, etc. Lenguaje: Es el lenguaje que hace uso de muchos trminos en ingls. Esto es HTML.

    Herramientas para programar HTML?


    Un editor de texto sencillo : Windows: Bloc de notas, Linux: Pico Mac: TextEdit Avanzadas posible que hayas odo hablar de HTML - Kit Microsoft FrontPage, Macromedia Dreamweaver Microsoft Word Etc.

    Navegadores e internet?
    El navegador: es el programa que te permite navegar y abrir sitios web: Microsoft Internet Explorer(El ms habitual) Mozilla Firefox, Opera
    No es necesario estar conectado a internet a la hora de programar HTML.

    UNIDAD I

    ELEMENTOS Y ETIQUETAS

    Etiquetas
    Las etiquetas son marcas que se usan para sealar el inicio "<"y el fin ">"de un elemento.

    Hay dos tipos de etiquetas: Etiqueta de inicio, < > Etiqueta de cierre, </ >. El contenido queda etiquetado al colocarlo entre una etiqueta de inicio y una etiqueta de cierre.

    Estructura principal
    Un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro, podemos distinguir dos partes principales: El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de ndole informativo como por ejemplo el titulo de nuestra pgina. El cuerpo, dado por etiquetas <body> y </body>, que ser donde colocaremos nuestro texto e imgenes delimitados a su vez por otras etiquetas.

    Estructura principal
    <html> <head>
    Datos que no aparecen en nuestra pgina pero que son importantes para catalogarla: Titulo, palabras clave,..

    </head> <body>
    Parte del documento que ser mostrada por el navegador: Texto e imgenes

    </body> </html>
    Las maysculas o minsculas son indiferentes al escribir etiquetas

    Estructura principal

    Encabezado de Pgina
    Titulo: Se coloca dentro del encabezado para indicar el titulo de la pagina en la barra de ttulos del navegador. <head> <title> Mi primera pgina </title> </head>

    Elementos en el Cuerpo de Pagina


    Titulares: Definen al ttulo de un prrafo y se define con la etiqueta <hx> siendo la x el nmero de titular (1 el ms grande y 6 el mas pequeo) <H1> Unidad 1 Los seres vivos </H1> <H2> 1.1 forma de vida </H2> <H6> Animales en Africa </H6>

    Elementos en el Cuerpo de Pagina


    Otros elementos de formato
    nfasis Negrita Itlica Subrayado Prrafo nfasis Acentuado Texto pequeo Superindicex Subindices <em>Texto con nfasis</em> <b>Texto con negrita</b> <i>texto en itlica</i> <u>texto subrayado</u> <p> esto es un prrafo </p> <strong>nfasis acentuado</strong> <small>Este texto tendra es un poco ms pequeo.</small> <Sub> </Sub> <Sup> </Sup>

    Varios elementos a la vez?


    S, se pueden usar fcilmente varios elementos a la vez de la siguiente manera: Forma correcta
    <H1><B>Texto enfatizado ms pequeo</B></H1

    Forma incorrecta
    <H1><B>Texto enfatizado ms pequeo</H1 </B>

    Elementos que se abre y se cierran


    Los siguientes elementos no necesitan etiquetas de inicio, al colocarse indican una instruccin. <br /> crea un salto de lnea forzado.

    <hr /> se usa para trazar una lnea horizontal ("hr" es la abreviatura de "horizontal rule"):

    Listas
    Los elementos para insertar listas son: ul, ol y li: ul: Forma abreviada de "unordered list" (es decir, lista no ordenada) e inserta vietas para cada elemento. ol: Abreviatura de "ordered list" (es decir, lista ordenada) y numera cada elemento de la lista. li: Abreviatura de "list item", (elemento de lista). Usado para crear elementos de lista

    Vietas
    Codigo <ul> <li>Un elemento de lista</li> <li>Otro elemento de lista</li> </ul> Se visualiza Un elemento de lista Otro elemento de lista

    Numeracin
    Codigo <ol> <li>Un elemento de lista</li> <li>Otro elemento de lista</li> </ol> Se visualiza 1. Un elemento de lista 2. Otro elemento de lista

    UNIDAD II

    ATRIBUTOS

    Que son los atributos?


    Informacin extra que se pueden aadir en algunos elementos. Se incluyen dentro de la etiqueta de inicio sealando los valores de dichos atributos entre comillas (""). El punto y coma se usa para separar los diferentes comandos de estilo.

    Que son los atributos?


    <body style ="background:#ffff00"> <h1><center>Bienvenidos</center></h1> </body>

    <body style ="background:yellow"> <h1><center>Bienvenidos</center></h1> </body>

    Valores de Colores bsicos


    Color Blanco: Negro: Rojo: Azul: Verde: Valor Hexadecimal #ffffff #000000 (ceros) #ff0000 #0000ff #00ff00 Valor ingles White Black Red Blue Green yellow

    Amarillo: #ffff00

    Color de fondo y de texto


    <html> <head> <title>mi ejemplo 1</title> </head> <body style= "background:#ffff00"; style="color: #cc3300;"> <h1><center>Bienvenidos </center></h1> <h3><center>color de fondo de pagina </center></h3> <p style="color: #000000"> Esto es una prueba de un prrafo con color</p> </body> </html>

    UNIDAD III

    ENLACES

    Que necesito para hacer enlaces?


    Para crear hiperviculos a otros sitios se usa un sencillo elemento <a> </a> en medio del cual se escribe el texto a vincular. Dentro de la apertura <a> se incluye el atributo entre comillas href=www.google.com, al cual se le asigna la direccin de la pagina a visitar mediante el clic del texto.

    Ejemplo de enlaces

    <a href="http://www.google.com"> Concetar a google </a>

    Enlace en un miso sitio web


    No es necesario incluir la direccin completa (el URL) del documento. Ejemplo: cuando se han guardado dos pginas (index1.htm y pagina2.htm) en la misma carpeta y se desea llamar la pagina2.htm desde index1.htm :
    <a href="pagina2.htm"> Clic aqu para enlazar a mi segunda pagina</a>

    Para regresar a index1.htm estando en pagina2.htm


    <a href="index1.htm"> Clic aqu para egresar a la primera pagina</a>

    Enlace desde subcarpetas


    Si la pgina2 estuviera en una subcarpeta (llamada "subcarpeta"), el enlace tendra el siguiente aspecto

    <a href= subcarpeta/pagina2.htm"> Clic aqu para enlazar a mi segunda pagina</a>

    Enlace desde subcarpetas


    Si la pgina2 estuviera en una subcarpeta (llamada "subcarpeta"), el enlace tendra el siguiente aspecto:
    <a href= subcarpeta/pagina2.htm"> Clic aqu para enlazar a mi segunda pagina</a>

    Para regresar a index1.htm estando en pagina2.htm


    <a href= ../index1.htm"> Clic aqu para egresar a la primera pagina</a>

    Enlaces internos
    Lo primero que debemos hacer es identificar el rea o texto al que deseamos llamar o enlazar usando un id al que le asignamos un valor entre comillas
    <h3 id= lic1"> Lic. en Sistemas Computacionales </h3>

    Para llamar el rea identificada colocamos el valor al que con el que marcamos el id anteponiendo el smbolo "#":
    <a href="#lic1">Lic. en Sistemas Computacionales</a>

    Ttulos para Enlaces


    El atributo title se usa para incluir una breve descripcin del enlace el cual aparecer al colocar el puntero del mouse sobre el enlace.
    <a href="#lic1 title="Ver programa" >Lic. en Sistemas Computacionales</a>

    UNIDAD III

    IMAGENES

    Imgenes en la pagina web


    Es uno de los aspectos ms vistosos y atractivos de las pginas web es el grafismo. La introduccin de imgenes en nuestros textos puede ayudarnos a explicar ms fcilmente nuestra informacin y darle un aire mucho ms esttico

    Consejos
    El abuso puede conducirnos a una sobrecarga que se traduce en una distraccin para el navegante, quien tendr ms dificultad en encontrar la informacin necesaria. El uso tiene que ser realizado con cuidado porque aumentan el tiempo de carga de la pgina, lo que puede ser de un efecto nefasto si nuestro visitante no tiene una buena conexin o si es un poco impaciente.

    Tratamiento
    Es recomendable siempre optimizar las imgenes para Internet, haciendo que su tamao en bytes sea lo mnimo posible, para facilitar la descarga, pero sin que ello comprometa mucho su calidad Software: Paint Shop Pro, Photoshop o Gimp Temas para investigar: Formatos grficos para pginas web. Principales formatos: GIF (para dibujos) o JPG (para fotos) y PNG (tiene caracteristicas de las dos anteriores)

    Etiquetas para imagenes


    La etiqueta que utilizaremos para insertar una imagen es <img> (image). Esta etiqueta no posee su cierre correspondiente y en ella hemos de especificar obligatoriamente el paradero de nuestro archivo grfico mediante el atributo src (source).

    <img src="archivo.gif >

    Otros atributos
    Title: Usados para aadir informacin a la imagen: <img src="logo.gif" title= mi imagen" /> Height y width: Usados para establecer la altura y la anchura de una imagen respectivamente. Se expresa en pxeles <img src= logo.gif width="141" height="32" >

    Tarea
    Investigar con elaborar tablas con HTML. Atributos fils, columnas, combinar filas, combinar columnas, color de lineas, alncho de lineas.

    FORMULARIOS HTML
    http://www.htmlquick.com/es/tutorials/forms.html http://www1.ceit.es/asignaturas/informat3/Recursos/Formularios/ CursoFrames.html Tabla de contenidos Elementos de entrada (input)
    Entrada de texto
    Entrada de texto de lnea Entrada de texto contrasea (password) Entrada de texto de mltiples lneas

    Opciones
    Casillas de verificacin Botones radio Listas

    Você também pode gostar