Scribd Logo
Upload

Welcome to Scribd!

  • Sesion 01 - HTML

    Uploaded by

    Jesús Moreno Plasencia
    13 views55 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    13 views55 pages

    Sesion 01 - HTML

    Uploaded by

    Jesús Moreno Plasencia

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 55

    HTML son las iniciales de Hiper Text Markup Language (Lenguaje de marcado de hipertexto), es el lenguaje de marcado predominante para

    la elaboracin de pginas web. Es un conjunto de etiquetas incluidas en archivos de texto que estructuran una pgina web. Los navegadores leen estos archivos de texto e interpretan esas etiquetas para determinar cmo desplegar la pgina Web.

    Para la elaboracin de una pgina web, debemos de tener en cuenta en donde crearemos el archivo de texto donde contendr dichas instrucciones HTML, para lo cual necesitaremos de ciertas herramientas o programas, entre ellas tenemos: Microsoft Front Page Bloc de Notas o NotePad Dreamweaver CS6 Sublime Text 2

    Ahora podemos decir que es un archivo de texto que contiene instrucciones que pueden ser interpretados por los navegadores de internet, estas instrucciones se denominan Etiquetas.

    < NE> Texto/ Grafico/Etiquetas </NE >


    Elementos que estn dentro de la etiqueta Apertura Cierre

    NE: Nombre de etiqueta

    Una pgina web est compuesta de 2 partes, que son el encabezamiento y el cuerpo de la pgina. Existen 3 etiquetas que deben de estar de manera obligatoria dentro del archivo HTML y que son fundamentales para su funcionamiento

    <html></html> Indica al navegador que el documento de texto que se esta leyendo es un documento HTML. Esta etiqueta se abre al inicio y se cierra al final del mismo. <head></head> En esta etiqueta se detalla el encabezado de la pagina WEB. Esta etiqueta se abre luego de <html>.

    <body></body> Cuerpo de la pagina, aqu en donde se despliega el contenido global que se mostrara en la pagina, se abre luego del cierre de la etiqueta </head> y se cierra antes de la etiqueta </html>.

    La primera lnea de HTML de cualquier pgina web sirve para identificar el tipo de lenguaje utilizado y se le conoce como DOCTYPE (Document Type Declaration, Declaracin de tipo de documento). La declaracin de esta etiqueta al inicio del desarrollo de una pgina web, es muy importante, ya que a travs de ella podemos definir el tipo de documento que vamos a utilizar.

    <meta charset=UTF-8> Al aadir esta lnea en la cabecera, indica el tipo de codificacin, para que los caracteres en castellano aparezcan bien en los navegadores cuando se escribe cdigo HTML5.

    UTF-8: (8-bit Unicode Transformation Format) es un formato de codificacin de caracteres Unicode e ISO 10646 utilizando smbolos de longitud variable.

    Desarrollaremos de una manera mas didctica la estructura bsica de una pgina web, con las etiquetas aprendidas hasta el momento:

    Guardando el archivo con la extensin (.html) y al ejecutarlo tenemos como resultado una pgina con el mensaje escrito en el cuerpo.

    Esta etiqueta va en la parte del encabezamiento de la pgina web, es decir en el HEAD, y define el titulo de la pgina web, misma que aparecer en la parte superior del navegador.

    Utilizando el ejemplo anterior insertamos la etiqueta title y escribimos el titulo de la pgina:

    Visualizamos en la parte superior del navegador el titulo que le hemos proporcionado:

    La etiqueta meta se utiliza para aadir informacin sobre la pgina. Esta informacin puede ser utilizada por los navegadores. Los navegadores consultan la informacin de las etiquetas <meta/> de las paginas, buscando coincidencias con las que el usuario pretende encontrar

    Cuenta con dos atributos name y content. El atributo name indica el tipo de informacin, y el atributo content indica el valor de dicha informacin. Tipo de Informacin:
    Tipo
    Author Classification Description

    Significado
    Autor de la pagina Palabras para clasificar la pagina en los buscadores Descripcin del contenido de la pgina. Programa utilizado para crear la pagina. Palabras clave.

    Generator
    Keywords

    Siguiendo el ejemplo anterior aadiremos la informacin de la pgina con la etiqueta meta:

    Como hemos visto anteriormente la etiqueta body es el cuerpo de la pgina, entonces es dentro de ella donde debemos incluir texto, imgenes y formatos visibles al usuario, que son las que se mostrara en la pagina.

    Cuenta con los siguientes atributos


    Atributo Bgcolor Text Link Alink Descripcin Define el color de fondo de la pgina. Define el color del texto de la pgina. Define el color de los vnculos de la pgina. Define el color del vnculo actual o activado en la pgina.

    Vlink Background

    Define el color del vnculo ya visitado. Define el archivo grafico que ser desplegado como fondo.

    Realizaremos una pagina con un fondo de color amarillo (#FFFF00) y con texto de color rojo (#FF0000):

    Obtendremos como resultado una pagina con los colores que hemos determinado, as mismo podramos ponerle una imagen de fondo a travs de el atributo background

    Las indicaciones del color se pueden definir de diferentes maneras. Las mas utilizada es, sin duda, la notacin hexadecimal de pares de valores (#FF9933)

    Se definen tambien por valores RGB(red,green,blue), representa todos los colores como combinaciones de rojo, verde y azul claro; por ejemplo rgb(75.5%,32.75%,24.25%) o rgb(0.1,0,0.1).

    Por otro lado, existen 17 palabras clave para indicar el color, basadas en los colores VGA originales de Windows.

    Es un software que brinda una amplia paleta de colores donde obtendrs tambin el codigo hexadecimal de color elegido . Adems con la herramienta Screen Piker (selector de pantalla), podrs obtener el cdigo hexadecimal de un color que elijas en la pantalla.

    1. Valor hexadecimal 2. Herramienta screen piker (Selector de pantalla).

    Etiqueta <br/> <br>


    Esta etiqueta instruye al navegador que inserte un salto de lnea al documento HTML.

    Etiqueta <hr/> <hr>


    Esta etiqueta dibuja de manera predeterminada una regla horizontal alineada automticamente. Tiene los siguientes atributos:
    Atributo Aling Descripcin Establece que la regla se alinee a la izquierda, centro o derecha (Left,center o rigth).

    Noshade Width
    Size

    Quita el sombreado predeterminado de la regla. Permite especificar el ancho de la regla (en pixeles o porcentaje). Permite especificar el alto de la regla (en pixeles).

    Etiqueta <h1></h1> al <h6></h6>


    Estas etiquetas son encabezados del cuerpo de texto. El encabezamiento <h1> nos proporciona las letras de mayor tamao, notara que automticamente al colocar dicho encabezamiento se incluir un salto de lnea, cuenta con el siguiente atributo:
    Atributo Descripcin Align Permite ubicar el encabezamiento a la izquierda, centro o derecha de la pagina (Left, center, rigth).

    Etiqueta <center></center>
    Se utiliza para ubicar ya sea una imagen o texto de forma centrada

    Etiqueta <b> </b>


    Esta etiqueta permite que el texto se muestre en formato negrita.

    Etiqueta <u> </u>


    Esta etiqueta permite que el texto de muestre de forma subrayada.

    Etiqueta <i> </i>


    Esta etiqueta permite que el texto de muestre en formato de inclinacin itlica.

    Etiqueta <p> </p>


    El elemento HTML p inserta un prrafo en el documento. Los prrafos son elementos a nivel de bloque que constituyen una estructura bsica de un documento y son usualmente mostrados por los navegadores con mrgenes superior e inferior. Los prrafos no pueden contener elementos a nivel de bloque, incluyendo otros prrafos. Atributo Align:
    Valor Left Right Center justify Descripcion Texto alineado al margen izquierda Texto alienado al margen derecho El texto es centrado El texto esta justificado

    Etiqueta <a> <a/> Para colocar un enlace, nos serviremos de las etiquetas <a> y </a>. Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace. Este destino ser introducido bajo forma de atributo, el cual lleva por nombre href.

    <a href="destino">contenido</a>
    destino: se trata de una pgina, un correo electrnico o un archivo. contenido: puede tratarse de un texto o una imagen.

    En funcin del destino los enlaces son clsicamente agrupados del siguiente modo: I. Enlaces internos: los que se dirigen a otras partes dentro de la misma pgina. II. Enlaces locales: los que se dirigen a otras pginas del mismo sitio web. III. Enlaces remotos: los dirigidos hacia pginas de otros sitios web. IV. Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una direccin. V. Enlaces con archivos: para que los usuarios puedan hacer descarga de ficheros.

    Enlaces Internos:
    Son los enlaces que apuntan a un lugar diferente dentro de la misma pgina.

    <a href=#destino">contenido</a>
    #destino: a travs del smbolo # se especifica al navegador que el enlace apunta a una seccin en particular. contenido: puede tratarse de un texto o una imagen.

    Enlaces de Correo Electrnico:


    Los enlaces a direcciones de correo son aquellos que al pincharlos nos abre un nuevo mensaje de correo electrnico dirigido a una direccin de mail determinada.

    <a href=mailto:dir@mail.com">contenido</a>
    Para colocar un enlace dirigido hacia una direccin de correo colocamos mailto: en el atributo href del enlace, seguido de la direccin de correo a la que se debe dirigir el enlace.

    mailto: Permite a los usuarios hacer clic en un vnculo de un sitio web para enviar un e-mail sin tener que copiar el destino de e-mail y abrir un cliente de correo electrnico

    As como podemos insertar texto en un documento HTML, tambin podemos insertar grficos (imgenes), los cuales van a ser visualizados dentro de la pgina. Los formatos que soporta son: *.gif y *.jpg o *.jpeg. Las imgenes no deben ser de tamao grande porque el navegador tardara en cargarla

    Esta etiqueta instruye al navegador para que exhiba la imagen especificada. El formato bsico para incluir una imagen es:

    <img src=imagen.jpg/>

    Atributo src heigth width

    Descripcin Ruta de la imagen a mostrar Redimensiona el ancho de la imagen (en pixeles o porcentaje). Redimensiona el largo de la imagen (en pixeles o porcentaje).

    border aling alt

    Define el borde la imagen (pixeles) Alineacin de la imagen. Especifica el texto alterno.

    Valores del Atributo Align:


    Valor Rigtht Left Top Middle Bottom Descripcin Alinea la imagen a la derecha Alinea la imagen a la izquierda Coloca la imagen en la parte superior de la lnea del texto La imagen ahora estar alineada con el centro de la lnea del texto. La imagen ser alineada con la parte inferior de la lnea del texto.

    You might also like