Scribd Logo
Upload

Welcome to Scribd!

  • Introduccion A HTML Y CSS

    Uploaded by

    marsloco
    73 views37 pages
    Breve manual de html y css

    Original Title

    Introduccion a HTML Y CSS

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Breve manual de html y css

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    73 views37 pages

    Introduccion A HTML Y CSS

    Uploaded by

    marsloco
    Breve manual de html y css

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 37

    ¡La universidad de todos!

    DESARROLLO RAPIDO DE APLICACIONES PARA INTERNET


    Docente: Mg. Jeymi Melanie Valdivia Eguiluz

    Periodo académico: 2018-2B


    Escuela Profesional Semestre: VII
    INGENIERÍA DE SISTEMAS E INFORMATICA Unidad: I
    Introducción al desarrollo web

    • Todo aquello que puedes ver desde un navegador web


    tiene algo que ver con Desarrollo Web.
    • Existen muchas divisiones o especialidades: Front-end
    hasta Backend.
    La base de cualquier sitio web.
    .HTML .CSS .JS
    <HTML >
    (HyperText Markup Language)
    Lenguaje de marcado de hipertexto
    ¿Qué herramientas necesito para desarrollar?
    HTML y su estructura
    Etiquetas, atributos y valores

    • <img src="enlace_de_imagen" alt="Texto alternativo">


    • <a href="soy_enlace">Texto que es un enlace</a>

    Atributos es dar
    nuevas características
    a una etiquetas
    Estructura de una Pagina web
    Definiendo la estructura de nuestro Sitio Web
    MENU
    LOGO CABECERA

    PORTADA
    TITULO
    SECCION
    BOTON

    PRODUCTOS Titulo
    ARTICULO 1 Descripción
    Imagen SECCION
    ARTICULO 2
    <!doctype html>
    <html>
    <head>
    <title></title>
    </head>
    <body>

    </body>
    </html>
    <HEADER> </HEADER>

    Representa un contenedor para contenido o


    conjunto de enlaces de navegación
    <section> </section>
    Define secciones en un documento, como capítulos,
    encabezados, pies de página o cualquier otra sección del
    documento.
    <article> </article>
    Especifica contenido autónomo e independiente.
    Publicación del foro
    Entrada en el blog
    Noticia
    Comentario
    <NAV> </NAV>

    Define un conjunto de enlaces de navegación


    <figure> </figure>

    Especifica contenido autónomo, como ilustraciones, diagramas,


    fotos, listas de códigos, etc.
    Lists

    list item marker (li)

    <ol type="1">
    <ul style="list-style-type:circle">
    <h1> to <h6>

    • <h1>This is heading 1</h1>


    • <h2>This is heading 2</h2>
    • <h3>This is heading 3</h3>
    • <h4>This is heading 4</h4>
    • <h5>This is heading 5</h5>
    • <h6>This is heading 6</h6>
    Agregando imágenes al sitio
    Existen 2 tipos de rutas:
    • Relativa: Archivo
    • Absoluta: Web
    <img>

    Define una imagen en una página HTML.

    Tiene dos atributos obligatorios: src y alt.

    <img src="smiley.gif" alt="Smiley face" height="42" width="42">


    Agregando navegación interna
    <a>

    Define un hipervínculo, que se usa para vincular de una


    página a otra

    <a href="https://www.uap.edu.pe">Visit </a>


    Id = Para identificar

    # = Para llamar
    Agregando estilos a nuestro HTML
    Existen 3 formas de agregar estilos a nuestro sitio:

    • En Linea: Tenemos que agregar el estilo a cada etiqueta.

    • Etiqueta: Creamos una etiqueta <style> que va dentro de nuestra


    etiqueta <head>
    Hace el archivo muy extenso y complicado de leer a la hora de editarlo
    Pero facilita la carga a la hora de pedir el archivo al servidor, logrando que
    cargue mas rápido.

    • Archivo Externo: Creamos un archivo externo de tipo .css y lo enlazamos a


    nuestro html con la etiqueta
    <link rel=“stylesheet” href=“nombre-del-archivo.css” />
    Tarda un poco mas en carga a la hora de pedirlo al servidor
    Pero es mas fácil de leer a la hora de editarlo.
    Selectores de CSS
    Tipo de selector {
    propiedad: valor;
    propiedad2: valor;
    }
    Agregando Clases
    Class=“nombre de la clase”
    Backgrounds, colores y tamaños de fuente
    <meta charset="utf-8"/>
    ¡Gracias!

    You might also like