Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Aaron Salvador Ramirez - Actividad1 PDF

    Cargado por

    AaronS 535
    30 vistas10 páginas

    Título original

    Aaron Salvador Ramirez_Actividad1.pdf

    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
    30 vistas10 páginas

    Aaron Salvador Ramirez - Actividad1 PDF

    Cargado por

    AaronS 535

    Copyright:

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

    <!

    -- ======================= -->
    <!-- @Aaron Salvador Ramirez -->
    <!-- Actividad 1 Ing Web -->
    <!-- ======================= -->

    <!DOCTYPE html>

    <!-- !DOCTYPE es una declaración y no una etiqueta, su fin es informar al


    navegador la versíón de HTML que se ha usado para escribir el documento,
    algo curioso que llegue a descubrir es que anteriormente la declaración
    era mucho más larga, sin embargo en la version HTML5 se simplifico y
    quedo en una sola linea -->

    <html lang="en">

    <!-- El atributo lang espicifica el idioma general de la pagina, las


    especificaciones de HTML 5.1 indican que el atributo lang solo tiene
    efecto sobre los elementos que contengan texto, osea que para los
    elementos que no contienen texto, el atributo lang sigue siendo valido,
    no obstante no causara ningun efecto. En cuanto al valor del atributo
    lang, este se rige por el documento BCP47 de la IETF y debe ser una
    cadena que contenga un identificador de idioma según el estándar ISO 639.
    -->

    <head>
    <!-- La etiqueta head o cabecera provee información general
    (metadatos) acerca del documento, incluyendo su título, enlaces a
    scripts, hojas de estilos, quien la realizó, etc.-->

    <meta charset="utf-8">
    <!-- La etiqueta meta especifica metadatos en la cabecera, el
    atributo chartset se va a encargar de definir el tipo de caracteres que
    se van a usar en la pagina web y el valor UTF-8 es un conjunto de
    caracteres universal que incluye casi todos los caracteres de casi
    cualquier idioma humano, ademas es usualmente empleado para las lenguas
    con alfabeto de tipo latino y germánico.-->

    <meta name="viewport" content="width=device-width, initial-scale=1 ,


    shrink-to-fit=no">
    <!-- • viewport es una etiqueta indispensable si queremos lograr
    un diseño responsive.
    • width= anchura virtual (emulada) de la pantalla o anchura
    del viewport.
    • Initial-scale: la escala inicial del documento.

    ¿Por qué solo se configura la anchura?


    Pues porque usualmente en una pagina web se hace scroll
    hacia abajo o arriba, por lo cual no siempre tendria sentido darle un
    alto, todo depende de la situación, pero en este caso concreto no se va a
    configurar ese valor.

    ¿A que hace referencia width=device-width?


    Esta medida hace referencia a la anchura de la pantalla del
    dispositivo, osea no le damos una medida exacta sino que le decimos que
    tome la anchura del viewport donde se esta viendo la pagina.

    ¿Por qué initial-scale=1?


    Porque con esto logramos que no se haga zoom sobre la pagina
    cuando la abrimos en el navegador.

    ¿Por qué shrink-to-fit=no?


    Porque de esta forma se impide que la pagina se encoja para
    ajustarse a la ventana -->

    <meta name="description" content="">


    <!-- Este metadato deberia proporcionar una descripcion de
    este documento -->

    <meta name="author" content="">


    <!-- Este metadato define al autor de la pagina -->

    <link rel="icon" href="../../../../favicon.ico">


    <!-- • La etiqueta link especifica la relación entre
    el documento actual y un recurso externo.

    • El atributo rel indica la relación del


    documento enlazado con el actual, en este caso el valor
    icon define un recurso
    para representar la página en la interfaz de usuario,
    normalmente es un icono.

    • El atributo href especifica la URL del recurso


    enlazado. Esta URL debe ser absoluta o relativa. -->

    <title>Jumbotron Template for Bootstrap</title>


    <!-- La etiqueta title define el titulo del documento, no el
    titulo de la pagina, osea representa el título de todo el documento HTML
    (no del contenido del documento, por lo que este no aparece en la pagina
    cuando se carga en el navegador). -->

    <!-- Bootstrap core CSS -->


    <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min
    .css" integrity="sha384-
    B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
    crossorigin="anonymous">
    <!-- • El valor de rel (stylesheet) define un recurso externo que
    se va a utilizar como hoja de estilos y la URL del recurso
    indica que es un recurso de bootstrap 4.6.0

    • El atributo integrity contiene metadatos en línea y el


    valor criptográfico codificado a base 64 de un recurso
    (archivo) que se le está indicando al navegador que
    obtenga puede ser utilizado por el agente usuario para verificar
    si el recurso obtenido ha sido entregado libre de
    manipulaciones inesperadas

    • El atributo crossorigin indica si se debe usar CORS


    (Intercambio de recursos de origen cruzado) cuando se solicite una
    imagen relacionada; para este caso el valor es anonymus
    porque se hara una solicitud a un origen cruzado (esto es, con
    el encabezado HTTP Origin:), pero no se envíaran
    credenciales (es decir, no se envían cookies, ni certificado X.509,
    ni datos de autenticación básica HTTP). Para este valor si
    el servidor no otorga credenciales al sitio de origen (por
    no enviar el encabezado HTTP Access-Control-Allow-Origin:)
    la imagen estará corrupta, y su uso estará restringido. -->

    <!-- Estilos personalizados para esta plantilla -->


    <link href="jumbotron.css" rel="stylesheet">
    <!-- Con esto indicamos que la hoja de estilos
    personalizados sera el archivo de css jumbotron.css -->
    </head>
    <!-- ======= Fin de la cabecera ======= -->

    <body>
    <!-- la etiqueta body representa el contenido de un documento
    HTML, es importante mencionar que solo puede haber un elemento
    <body> en un documento -->

    <nav class="navbar navbar-expand-md navbar-dark fixed-top


    bg-dark">
    <!-- • La etiqueta nav representa una sección de
    una página cuyo propósito es proporcionar
    enlaces de navegación, ya sea
    dentro del documento actual o a otros documentos, como
    ejemplo se puede poner a los menus, tablas de contenido,
    indices, etc

    • El atributo class es una lista de las


    clases del elemento separada por espacios. Las clases
    permiten a CSS
    y Javascript seleccionar y acceder a elementos
    específicos a través de los selectores de clase
    • El valor navbar es una clase de bootstratp
    4 que proporciona un potente encabezado de
    navegación receptivo
    (Una barra de navegación con soporte para branding,
    navegación, plugin de colapso y más)

    • navbar-expand-md indica el tamaño a partir


    del cual la barra se mostrará de forma
    expandida, en este caso
    indica que la barra se mostrará en su tamaño completo
    a partir del tamaño de pantalla media (md, ≥768px), cabe destacar que
    aqui se puede elegir entre los diferentes tamaños definidos por
    Bootstrap: "sm", "md", "lg" o "xl

    • navbar-dark indica el estilo de la barra

    • fixed-top nos permite anclar o fijar la


    posición de la barra a la parte superior
    de la pagina en todo momento

    • bg-dark indica los colores del fondo o


    backgraund de la barra de navegación-->

    <a class="navbar-brand" href="#">Navbar</a>


    <!-- • La etiqueta a se usa para poder crear un enlace a
    otras páginas de internet, archivos o ubicaciones dentro de
    la misma página, direcciones de correo, o
    cualquier otra URL

    • navbar-brand permite incorporar algun nombre o


    logotipo -->

    <button class="navbar-toggler" type="button" data-


    toggle="collapse" data-target="#navbarsExampleDefault" aria-
    controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle
    navigation">
    <!-- • La etiqueta buttton representa un elemento
    cliqueable de tipo botón que puede ser utilizado en formularios o en
    cualquier parte de la página que necesite un botón
    estándar y simple de aplicar

    • navbar-toggler sirve para incorporar el boton


    toggler que se mostrará únicamente cuando el menú se colapse y
    se ocultará cuando el menú aparezca expandido.
    Cuando sea visible podremos pulsar sobre él para mostrar u ocultar el
    menú
    • type indica el tipo de boton y el valor button
    precisa que se trata de un boton de contenido, los botones de
    contenido pueden ser usados como botones de envío
    o restablecimiento, o bien pueden no tener ninguna acción preestablecida
    (dependiendo del valor de su atributo "type"). Su característica
    principal es que se puede insertar contenido HTML dentro de ellos y así
    dotarlos de un aspecto atractivo, imágenes o colores de fondo, etc.

    Es importante saber que los atributos data-*(en


    html 5 es sufuciente agregar un guion) permiten almacenar información
    adicional sobre un elemento HTML cualquiera sin tener que recurrir a
    artilugios tales como la utilización de atributos no estándar

    • data-tooggle con el valor collapse sirven para


    ocultar contenido

    • aria-expanded con el valor false configura que


    los elementos plegables no aparezcan extendidos de forma
    predeterminada -->

    <span class="navbar-toggler-icon"></span>
    <!-- • La etiqueta span permite personalizar el
    estilo de solamente una parte del texto. -->

    </button>

    <div class="collapse navbar-collapse"


    id="navbarsExampleDefault">
    <!-- • La etiqueta div nos permite estructurar el
    documento en secciones.

    • El atributo id le da un nombre al elemento que lo


    diferencia de todos los demás del documento. -->

    <ul class="navbar-nav mr-auto">


    <!-- • La etiqueta ul de "unordered list", crea una
    lista no ordenada.

    • La lista puede contener uno o varios elementos-


    ->

    <li class="nav-item active">


    <!-- La etiqueta li de "item list" declara
    cada uno de los elementos de la lista-->

    <a class="nav-link" href="#">Home <span


    class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
    </li>

    <li class="nav-item">
    <a class="nav-link disabled"
    href="#">Disabled</a>
    </li>

    <li class="nav-item dropdown">


    <a class="nav-link dropdown-toggle"
    href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-
    haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" aria-
    labelledby="dropdown01">
    <a class="dropdown-item"
    href="#">Action</a>
    <a class="dropdown-item" href="#">Another
    action</a>
    <a class="dropdown-item"
    href="#">Something else here</a>
    </div>
    </li>
    <!-- Este item es un boton desplegable con un menu
    popup que al darle clic muestra diferentes items y al volver
    a darle click cierra el menu popup y oculta su
    contenido -->

    </ul>
    <!-- Fin de la lista, cabe resaltar que esta lista
    contiene los elementos de la barra de navegación, excepto el
    formulario de busqueda que esta a la derecha-->

    <form class="form-inline my-2 my-lg-0">


    <!-- • La etiqueta form representa una sección de un
    documento que contiene controles interactivos que permiten a
    un usuario enviar información a un servidor
    web.

    • La clase de bootstrap form-inline permite


    añadir un formulario a la barra de navegacion y debido a inline,
    los elementos del formulario se dispondran en
    una sola fila horizontal

    • my-2 "m" hace referencia a los margenes del


    formulario, "y" hace referencia a los lados del formulario
    (para las clases que establecen ambos y *-
    top*-bottom)
    y "2" hace referencia al tamaño
    • lg hace referencia a una clase de utilidades
    de bootstrap (largo)-->

    <input class="form-control mr-sm-2"


    type="text" placeholder="Search" aria-label="Search">
    <!-- • La etiqueta input se usa para crear controles
    interactivos para formularios basados en la web con el fin de
    recibir datos del usuario.

    • El tipo text indica que se trata de un campo


    de texto de línea simple. Los saltos de línea son eliminados
    automáticamente del valor introducido.

    • El atributo placeholder representa el texto


    provisional en un elemento de entrada o input-->

    <button class="btn btn-outline-success my-2


    my-sm-0" type="submit">Search</button>
    <!-- • con la etiqueta button se crea el boton de
    buscar dentro del formulario

    • el tipo submit nos indica que se trata de un


    boton de envio, este tipo de botones envía automáticamente el
    formulario en que se encuentra cuando es
    presionado. Es decir, cuando se pulsa el botón el navegador nos
    lleva a la dirección web indicada en el campo
    action y al mismo tiempo envía a esa dirección los datos que
    contiene el formulario -->

    </form>
    <!-- fin del formulario-->
    </div>
    </nav>
    <!-- ======= Fin de la barra de navegacion =======-->

    <!-- Jumbotron principal para un mensaje de marketing


    principal o algun llamado a la acción -->
    <div class="jumbotron">
    <!-- Jumbotron es una clase de bootstrap 4 -->

    <div class="container">
    <h1 class="display-3">Hello, world!</h1>
    <p>This is a template for a simple marketing or
    informational website. It includes a large callout called a jumbotron and
    three supporting pieces of content. Use it as a starting point to create
    something more unique.</p>
    <p><a class="btn btn-primary btn-lg" href="#"
    role="button">Learn more &raquo;</a></p>
    </div>
    </div>
    <!-- ======= Fin del jumbotron =======-->

    <div class="container">
    <!--El valor container indica que se van a crear contenedores
    para poder trabajar con el sistema de cuadricula de
    bootstratp (grid system)-->

    <!-- Ejemplo del uso de los containers -->

    <div class="row">
    <!-- row especifica la creacion de una fila (las
    filas son los contenedores para las columnas) -->

    <div class="col-md-4">
    <!-- • esta clase indica el número de columnas que se
    desea usar de las 12 posibles por fila, en este
    caso se escoje usar 4 columnas

    • md significa que se tomaran las 4 columnas


    siempre en cuando el tamaño de la ventana o viewport sea mayor
    o igual al tamaño medio definido por bootstrap
    (md ≥768px) -->

    <h2>Heading</h2>
    <!-- h2 es la etiqueta de subtitulos -->

    <p>Donec id elit non mi porta gravida at eget


    metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
    nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
    magna mollis euismod. Donec sed odio dui. </p>
    <!-- la etiqueta p (párrafo) se usa para distribuir
    el texto en párrafos y
    sus etiquetas son: <p> y </p> (la de cierre es
    opcional). -->

    <p><a class="btn btn-secondary" href="#"


    role="button">View details &raquo;</a></p>
    </div>
    <div class="col-md-4">
    <!-- esta clase indica el número de columnas que
    se desea usar de las 12 posibles por
    fila, en este caso se escoje usar 4 columnas
    -->

    <h2>Heading</h2>
    <p>Donec id elit non mi porta gravida at eget
    metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
    nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
    magna mollis euismod. Donec sed odio dui. </p>
    <p><a class="btn btn-secondary" href="#"
    role="button">View details &raquo;</a></p>
    </div>
    <div class="col-md-4">
    <!-- esta clase indica el número de columnas que se
    desea usar de las 12 posibles por
    fila, en este caso se escoje usar 4 columnas -->

    <h2>Heading</h2>
    <p>Donec sed odio dui. Cras justo odio, dapibus
    ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis
    euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris
    condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    <p><a class="btn btn-secondary" href="#"
    role="button">View details &raquo;</a></p>
    </div>

    <!-- Es imporante destacar que para que los componentes


    no se desencajen, la suma del numero de columnas de todos los
    grupos de columnas dentro de una fila debe de ser
    igual a 12, de lo contrario todo se desordena, en este caso se puede
    apreciar que son 3 grupos de 4 columnas de anchura cada uno, por lo cual
    no hay incoveniente debido a que 4+4+4=12, pero si por ejemplo la
    situacion fuera de que se definiera dos grupos de 7 columnas de anchura,
    ya no no se podria usar el sistema de cuadricula de bootstrap debido a
    que 7+7=14 y el sistema de bootstratp solo tiene 12 columnas. -->
    </div>

    <hr>
    <!-- hr representa un cambio de tema entre párrafos (por
    ejemplo, un cambio de escena en una historia, un cambio de tema en una
    sección) -->

    <footer>
    <!-- footer representa un pie de página para el
    contenido de sección más cercano o el elemento raíz de sección -->
    <p>&copy; Company 2017</p>
    </footer>
    </div> <!-- ====== fin de la fila /container =======-->

    <!-- Bootstrap core JavaScript


    ================================================== -->
    <!-- Placed at the end of the document so the pages load
    faster -->
    <script src="https://code.jquery.com/jquery-
    3.5.1.slim.min.js" integrity="sha384-
    DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
    <!-- • la etiqueta script se utiliza para insertar o hacer
    referencia a un script ejecutable dentro de un documento HTML o
    XHTML.

    • El atributo src especifica la URI del script externo; este


    puede ser usado como alternativa a scripts embebidos
    directamente en el documento. Si el script tiene el atributo
    src, no debería tener código dentro de la etiqueta. -->

    <script
    src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js
    " integrity="sha384-
    9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
    <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.j
    s" integrity="sha384-
    +YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
    crossorigin="anonymous"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --


    >
    <script src="../../../../assets/js/ie10-viewport-bug-
    workaround.js"></script>
    </body>
    <!-- ======= Fin del cuerpo ====== -->
    </html>
    <!-- Fin del elemento raiz o fin del documento html-->

    También podría gustarte