Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Apunte de CSS

    Cargado por

    Xelle Venu
    8 vistas8 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOC, 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 DOC, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    8 vistas8 páginas

    Apunte de CSS

    Cargado por

    Xelle Venu

    Copyright:

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

    Apunte de HTML5

    Elementos y sintaxis:

    > <h1>Título 1</h1>


    > <h2>Título 2</h2>
    > <p>Párrafo</p>
    > <!--Comentario-->
    > <!DOCTYPE html>
    > <html>
    > ...Código HTML...
    > </html>
    > <head><meta metadata><title>Título web</title></head>
    > <body>Cuerpo de la web</body>
    > <main>Texto</main>
    > <p align="center/right/left">Texto de párrafo</p>
    > <br> (Renglón en blanco) / &nbsp (Código html para espacio en blanco forzado)
    > <div>Bloque de elementos</div> <section>Bloque de sección</section> <nav>Bloque de links de
    navegación</nav>
    > <pre>Texto</pre> (Interpreta el texto tal como está escrito leyendo salto de renglones)
    > <span>Para aislar una sección de un texto en particular (Por fuente ó color diferente, link, etc.)</span>
    > <img src="https://www.ejemplo.com/IMAGEN.jpg"> (Self-closing)
    > <img src="https://www.ejemplo.com/IMAGEN.jpg " alt="Texto descriptivo de la imagen">
    > <a href="https://www.ejemplo.com">Texto de Hyperlink</a>
    > <a href="https://www.ejemplo.com" target="_blank"> Texto de Hyperlink</a>
    (Abre link en una ventana nueva)
    > <x href="#title">Texto de Hyperlink interno</x>
    <x id="title">Destino de Hyperlink interno</x>
    > Nesting (Concatenar elementos):
    <main><p>Texto párrafo <a href="https://www.web.com">Texto Hyperlink</a>
    texto.</p></main>

    > <ul> (Unordered List) <ol> (Ordered List)


    <li>Lista sin orden.</li> <li>Lista con orden.</li>
    <li>Lista sin orden.</li> <li>Lista con orden.</li>
    <li>Lista sin orden.</li> <li>Lista con orden.</li>
    </ul> </ol>
     <input type="text" placeholder="Escriba un texto.">

     <button type="submit">Enviar</button>

     <form> " " </form>


    (form alinea los elementos en el renglón)

     ...<input type="text" placeholder="Escriba un texto." required>...

     <label for="OpcionA"><input id="OpcionA" type="radio" name="OpcionA-OpcionB"> Opcion A</label>
        <label for="OpcionB"><input id="OpcionB" type="radio" name="OpcionA-OpcionB"> Opcion B</label>

     <label><input type="checkbox" name="checks"> Check 1</label>
         <label><input type="checkbox" name="checks"> Check 2</label>
         <label><input type="checkbox" name="checks"> Check 3</label>

     <label><input type="checkbox" name="checks" checked> Check 1</label>
         <label><input type="checkbox" name="checks"> Check 2</label>
         <label><input type="checkbox" name="checks"> Check 3</label>

    (Funciona tambien con inputs de tipo radio)

    Se debe también adherir el elemento value="" dentro del bloque input para que al servidor arribe el valor definido,
    sino sólo se enviará el valor "on/off" de los boxes.
    Cuando se envía un formulario los datos son enviados al servidor incluyendo la opción que se eligió. Inputs del tipo
    radio y checkbox reportan sus valores desde el atributo valor. Si se omite el atributo valor (value="") el formulario
    enviado usa el valor por default que es "on":
    En un escenario real si el usuario eligiera la Opcion A en uno de los inputs mencionados arriba el formulario enviado
    va a ser "Opcion A-Opcion B=on", cosa que no sería práctica. Entonces el atributo del elemento value debería ser algo
    que identifique la opción, value="opcionA":

    <label for="OpcionA"><input id="OpcionA" value="OpcionA" type="radio" name="OpcionA-
    OpcionB"> Opcion A</label>
    Audio:

     <audio id="audio1" controls>


    1
    <source src="https://www.ejemplo.com/audio.mp3" type="audio/mpeg" />
    2
    <source src="https://www.ejemplo.com/audio.ogg" type="audio/ogg" />
    </audio>

    (1 2 El navegador elegirá la primera opción compatible.)

     <audio controls src="https://www.ejemplo.com/audio.mp3">


    Su browser no soporta el elemento <code>audio</code> .
    </audio>

    El elemento <audio> soporta el atributo controls, éste muestra los controles por default play, pausa y otros
    controles. El contenido incluído dentro de los tags <audio> funciona como fallback en caso de que el navegador no
    soporte audio.
    Otros atributos de <audio>:
     autoplay
     loop
     muted
     preload Éste atributo tiene la función de dar una noción al navegador sobre lo que el autor de la página cree
    que será lo mejor para la experiencia del usuario. Puede llevar alguno de los siguientes valores:
    none Indica que el audio no debería ser pre-cargado.
    metadata Indica que sólo la metadata debe ser pre-cargada (longitud del track).
    auto El audio se pre-carga automaticamente incluso si el usuario no lo va a reproducir.
    (vacío) Un sinónimo del valor auto.
    El valor por defecto de preload es diferente según cada navegador. Los expertos suelen recomendar dejarlo
    seteado en metadata.
    > text-align Los valores son justify, center, right y left.
    > width Ancho de un elemento.
    > height Altura de un elemento.
    Tipos de input Nuevos atributos de input

     checkbox  autocomplete
     color  autofocus
     date  form
     datetime  formaction
     datetime-local  formenctype
     email  formmethod
     file  formnovalidate
     hidden  formtarget
     image  height and width
     month  list
     number  min and max
     password  multiple
     radio  pattern (regexp)
     range  placeholder
     reset  required
     search
     submit  step
     tel
     time
     url

     week

    Accesibilidad
    Los encabezados (Headings), correspondientes a los elementos h1 - h6, son tipos de tags que ayudan a
    proporcionar estructura y clasifican el contenido de un sitio.

    Los lectores de pantalla para personas con visibilidad reducida pueden programarse para leer sólo los encabezados
    de una página así el usuario obtiene un sumario de la misma. Esto nos lleva a dar cuenta de que es importante que
    nuestros encabezados tengan significado semántico y estén relacionados los unos a los otros, y no haber sido
    elegidos meramente por el tamaño que otorga al texto cada uno.

    "Significado semántico" quiere decir que los elementos que usemos alrededor de un contenido indiquen el tipo de
    información que contienen.

    Como último punto, cada página debe tener un sólo elemento h1, el cual contenga la principal idea de su
    contenido. Éste y el resto de los encabezados son usados en parte por motores de búsqueda para comprender el
    contenido de la página.
    Tipos de elementos/tags/etiquetas:
    <html>

    <head> = Contiene el título de la página y los metadatos.

    <meta>

    <title>

    <style>

    <h1>

    <body>

    <header> = Contenido de cabecera que se puede repetir en varias páginas. Se suele usar para envolver información
    introductoria o links de navegación. Accesibilidad: A donde se redirige la tecnología de accesibilidad que disponga
    de una función de "Jump to top."

    <main> = Contenido principal, debe envolver el tópico central de la página. Sólo debe haber uno por página.
    Accesibilidad: A donde se redirige la tecnología de accesibilidad que disponga de una función de "Saltar al
    contenido principal./Jump to main content."

    <h2/h3/h4/h5/h6>

    <article> = Elemento de sección. Se utiliza para envolver contenido independiente y autónomo. La etiqueta
    funciona bien con entradas de blog, publicaciones en foros o artículos de noticias.

    <section> = Envuelve contenido relacionado, pueden una sección temática de otra gran sección. Varias etiquetas de
    <section> pueden estar envueltas en una etiqueta <article>. A modo de ejemplo, si los capítulos de un libro fueran
    <section>, el libro sería <article>.

    <div> = Divide contenido. Etiqueta genérica de sección.

    <footer> = Se utiliza principalmente para contener información de copyright o enlaces a documentos relacionados
    que generalmente se encuentran en la parte inferior de una página. Accesibilidad: A donde se redirige la tecnología
    de accesibilidad que disponga de una función de "Jump to bottom."

    <nav> = Elemento que se usa para contener links de navegación. No es necesario usarlo en los links que estén
    dentro del la sección <footer>.

    <strong> = Asigna negrita al texto que envuelva.

    También podría gustarte