Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML - 2021

    Cargado por

    Bauty Garcia
    9 vistas23 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    9 vistas23 páginas

    HTML - 2021

    Cargado por

    Bauty Garcia

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 23

    LENGUAJE WEB

    INTRODUCCIÓN AL
    LENGUAJE HTML
    URL
    (Localizador de
    recursos uniforme)

    2
    ¿Qué es una URL?

    ▸ Localizador de recursos uniforme, más comúnmente


    denominado URL (sigla en inglés de uniform resource
    locator), Las URLs tienen un formato como el siguiente:
    <protocolo>://<servidor>/<path>.

    ▸ Echemos un vistazo a una URL y ver cómo se consigue


    dividir en pedazos :
    http://www.asp.net/mvc/mvc3

    3
    URL
    ▸ Protocolo
    Es el “cómo”.
    Le dice a la pc que convenciones hay que utilizar cuando se comunica con
    el servidor solicitado.

    ▸ Servidor
    Es el “donde”.
    Le dice a la pc el nombre de la computadora que aloja a la página
    solicitada.

    ▸ Path
    Es el “que”.
    Indica qué página estamos interesados en acceder de ese sitio web.

    ▸ Cuando no hay nada luego del servidor es porque existe un default para el
    path (por ejemplo index.html)
    4
    ¿Qué sucede después?

    ▸ La pc establece una conexión con la dirección IP del servidor y


    el servidor acepta la conexión, algo así como llamar a un
    número telefónico y que te contesten el teléfono.

    ▸ Una vez establecida la conexión, el equipo envía algo que se


    llama una petición HTTP (lo veremos en la próxima
    diapositiva) y el servidor hace una de dos cosas:
    ▹ si se puede encontrar la página solicitada, se devuelve
    en una respuesta HTTP.
    ▹ Si el servidor no encuentra la página solicitada, se
    devuelve un “error 404 not found" que es una respuesta
    especial, que es todo lo que vemos de cuando se escribe
    mal una dirección URL.
    5
    HTTP (HyperText Transfer Protocol)
    ▸ En la world wide web, las computadoras no se comunican
    con palabras, sino que utilizan protocolos como HTTP
    (HyperText Transfer Protocol).

    ▸ HTTP es una forma de estructura de peticiones y


    respuestas de recursos web que son entendidas
    claramente y sin ambigüedad por un ordenador.

    ▸ Además de utilizar un protocolo para gestionar la


    transferencia de información, el contenido real que se
    transfiere y presenta por el navegador también sigue un
    formato muy preciso llamado HTML (HyperText Markup
    Language). 6
    HTML (HyperText Markup Language)
    ▸ HTML es un lenguaje para describir las
    páginas web.
    ▸ HTML es un lenguaje de etiquetas
    (Markup). Las etiquetas describen el
    contenido del documento.
    ▸ Los documentos HTML contienen
    etiquetas HTML y texto plano.
    ▸ Es un documento de texto compuesto
    por etiquetas y contenido. Todos los
    sitios se muestran en forma de HTML
    en un navegador.

    7
    Estructura
    Cliente
    Servidor

    8
    Estructura Cliente - Servidor

    PHP, ASP.NET, Python, Ruby, Etc. HTML CSS Javascript

    El Servidor ejecuta lenguajes de programación y siempre devuelve


    HTML, que es ejecutado desde la computadora Cliente (mediante el
    navegador). Los navegadores “renderizan” (entienden) solamente
    HTML, CSS y JS. El resto se ejecuta del lado del servidor.
    9
    En el Cliente
    Validaciones e interacciones complejas Diseño del sitio

    Estructura y contenidos del sitio

    El código Javascript (es un lenguaje de programación) se ejecuta del


    lado del cliente. El CSS es una hoja de estilos (estructura de código)
    que permite darle diseño al HTML.
    10
    ¿Pagina Web = Sitio Web?

    Una página Web está compuesta por un sólo archivo


    HTML.

    Un sitio Web es un conjunto de páginas web, con


    enlaces internos y externos (menú de navegación)
    con mayor interacción con el usuario

    11
    Etiquetas - TAGS

    ▸ Los tags forman la estructura de un sitio en


    HTML
    ▸ Cada uno tiene atributos que permiten setear
    características específicas.
    ▸ Algunos son jerárquicos e indispensables

    Requerimientos para escribir un HTML


    ▸ Editor de texto (Bloc de notas, Notepad++, etc.)
    ▸ Navegador de Internet (IE, Firefox, Chrome,
    Safari, Opera, etc.)
    12
    Formato de TAGS

    Tag que abren y cierran


    <tag> contenido </tag>

    Tag que no tienen cierre o que cierran sin contenido


    dentro
    <tag>

    13
    Etiquetas HTML

    HEAD Contiene información sobre la página que


    sirve para los buscadores y navegadores. También
    contiene el título de la misma.

    BODY Todo el contenido visible para el usuario en la


    página. Puede tener subdivisiones semánticas
    (HTML5) que veremos más adelante.

    14
    Estructura básica de una página

    <html>
    <head>
    tags para el head
    </head>
    <body>
    tags para el body
    </body>
    </html>
    15
    Estructura básica de una página

    <head>
    <title> Nombre de la página</title>
    </head>
    <body>
    <h1> Título de la página</h1>
    <h2> Subtítulo de la página</h2>
    <p> Este es un párrafo</p>
    </body>
    16
    TAGS HTML
    Títulos:
    <h1> ... <h6> Contiene los títulos y subtítulos de la página.
    El h1 es el más importante, sólo hay uno por página.
    <h1>Mi página web</h1>
    <h3>Mi equipo favorito</h3>
    Párrafo: <p> Contiene varias líneas de texto.
    <p>Esta es mi primer página web. Está hecha en HTML</p>
    El tag <br> inserta saltos de línea dentro de un mismo párrafo.

    17
    TAGS HTML

    Hipervínculos:
    <a>
    Es el que nos permite insertar un link en la página
    (tanto interno como externo).
    <a href="http://campus.ort.edu.ar" title="Escuela"> Campus Virtual ORT</a>
    <a href="otraPagina.html" title="Otra Pagina">Ver mas datos</a>

    href: dirección de destino.


    title: texto que aparece cuando posiciona el mouse sobre el link.

    18
    TAGS HTML

    Imagenes
    <img>

    <img src="imagenes/imagen.jpg" alt="descripción de la imagen“ />


    <img src="http:/bancodeimagenes.com/imagen.jpg" alt="la imagen“ />

    Atributos:
    src: ruta en donde se encuentra la imagen. (carpeta de imágenes).
    alt: texto pequeño que describe la imagen.

    19
    TAGS HTML

    DIV
    En un documento HTML el tag "div" permite crear
    divisiones, también llamadas secciones o zonas.
    Las divisiones se utilizan para agrupar elementos y aplicarles
    estilos.

    <div>
    <p>Parrafo 1</p>
    <a href=”vermas.html” title=”Ver mas”>Ver mas datos</a>
    </div>
    20
    TAGS HTML

    21
    Inspeccionar página (F12)

    Lo interesante que tiene


    nuestro navegador es que
    podemos inspeccionar
    cualquier página y ver su
    contenido html
    (entre muchísimas cosas
    más que hay).
    Así podemos ver como fue
    creada una página web.

    22
    Bibliografía en INTERNET

    Podemos ver las diferencias entre HTML y HTML5 en


    https://campus.almagro.ort.edu.ar/articulo/1123374/de-html-a-html5

    Podemos ver una lista completa de Tags con sus funciones en


    http://www.htmlquick.com/es/reference/tags.html

    Tutorial de HTML con todos los tags


    https://www.w3schools.com/html/

    23

    También podría gustarte