Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Sesión 2. HTML

    Cargado por

    sabrinavsgamer
    7 vistas42 páginas

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

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

    Sesión 2. HTML

    Cargado por

    sabrinavsgamer

    Copyright:

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

    HTML Crear una página HTML

    TEMARIO
    Estructura de una página HTML
    Elementos
    Meta
    Tablas
    Formularios
    HTML
    El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para
    estructurar y desplegar una página web y sus contenidos. Por ejemplo, sus
    contenidos podrían ser párrafos, una lista con viñetas, o imágenes y tablas de datos.

    https://www.html6.es/
    ESTRUCTURA DE UNA PÁGINA
    HTML 5
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    </body>
    </html>
    ESTRUCTURA DE UNA PÁGINA
    EN HTML 5
    <!DOCTYPE html>
    <html> <aside>
    <head> </aside>
    </head>
    <body> <footer>
    <header>
    </footer>
    <nav></nav>
    </header>
    <main>
    </body>
    <section>
    <article> </html>
    </article>
    <article>
    </article>
    </section>
    </main>
    ESTRUCTURA DE UNA PÁGINA
    EN HTML 5
    •<header>.- contiene la cabecera
    •<nav>.- contiene una barra de navegación o lista de hipervínculos.
    •<aside>.- puede ser un sidebar o un bloque de contenido secundario
    •<article>.- el contenido principal
    •<section>.- secciones de la pagina
    •<footer>.- el pie de página.
    ELEMENTO <HEADER>
    El elemento <header> prácticamente contiene el encabezado donde
    puede ir elementos como el logo, el nombre del sitio y elementos apropiados
    para el encabezado.
    •<header> se usa dentro de <body>
    •<head> y <header> son muy diferentes, no confundir.
    ELEMENTO <NAV>
    El elemento <nav> contiene un conjunto de enlaces o hipervínculos para la
    navegación, para ir de una página o sección a otra fácilmente.
    ELEMENTO <ARTICLE>
    Básicamente, <article> es un elemento semántico y su contenido será un
    contenido autónomo e independiente, posee sentido por sí solo.
    ELEMENTO <SECTION>
    Elemento que contiene una sección, parte o pieza de un contenido.
    También es un contenido semántico. Los elementos que están dentro
    de <section> están relacionados entre si. Para formar un contenido
    con significado propio
    ELEMENTO <ASIDE>
    En <aside> está el contenido secundario, y no es precisamente parte del
    contenido principal.
    Si <aside> se pone dentro de <article>, entonces se puede entender que
    <aside> es un contenido complementario, pero que ya no forma parte del
    contenido principal.
    ELEMENTO <FOOTER>
    Este elemento prácticamente contiene el pie de página, dentro pueden ir como por
    ejemplo iconos de redes sociales, datos de contacto, términos del servicio, etc.
    HEAD
    es la parte que no se muestra en el navegador cuando se carga la
    página. Contiene información como el título (<title>) de la página,
    enlaces al CSS (si quieres aplicar estilo a tu contenido HTML con
    CSS), enlaces para personalizar favicon, y otros metadatos (datos
    sobre el HTML, como quién lo escribió y palabras claves importantes
    que describen el documento)
    META
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Mi página de Gatitos</title>
    </head>
    <body>
    <p>Esta es mi página</p>
    </body>
    </html>
    META
    <head>
    <meta charset="utf-8" />
    <title>Mi página de Gatitos</title>
    <meta name="description" content=“Esta es una página que muestra información
    sobre los gatos"/>
    <meta name="keywords" content=“gato, gatito, razas"/>
    <meta name="author" content=“Alejandro Sagundo" />
    <meta name="copyright" content="Propietario del copyright" />
    </head>
    COMENTARIO
    <!--etiquetas que forman el cuerpo-->
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Mi página de Gatitos</title>
    <meta name="description" content=“Esta es una página que muestra información sobre los
    gatos"/>
    <meta name="keywords" content=“gato, gatito, razas"/>
    <meta name="author" content=“Alejandro Sagundo" />
    <meta name="copyright" content="Propietario del copyright" />
    <title>Mi página de prueba</title>
    </head>
    <body>
    <header style="background-color:red;">
    <img id="logo" src="gatito.jpeg" width="100px" height="100px"/>
    <h1>SITIO WEB DE GATOS</h1>
    <p>Un sitio web genial los amantes de gatitos</p>
    </header>
    <p>Esta es mi página de gatos</p>
    </body>
    </html>
    META
    <meta name="robots" content="index"/>
    <meta name="robots" content="noindex"/>

    <meta name="robots" content="follow"/>


    <meta name="robots" content="nofollow"/>

    <meta http-equiv="cache-control" content="no-cache"/>

    <meta http-equiv="expires" content="0"/>


    <meta http-equiv="expires" content="43200"/>

    <meta http-equiv="refresh" content="10; url=http://www.ionos.es/"/>


    IMÁGENES
    LISTAS ORDENADAS
    <ol> 1. Julio
    <li>Julio</li> 2. Carmen
    <li>Carmen</li> 3. Ignacio
    <li>Ignacio</li> 4. Elena
    <li>Elena</li>
    </ol>
    LISTAS DESORDENADAS
    <ul> FC. Barcelona
    <li>FC. Barcelona</li> Real Madrid
    <li>Real Madrid</li> Real Betis
    <li>Real Betis</li> Atlético de Madrid
    <li>Atlético de Madrid</li>
    </ul>
    LISTAS
    <ol type="tipo"> ... </ol>
    1 - Listas decimales
    a - Listas alfabéticas en minúsculas
    A - Listas alfabéticas en mayúsculas
    i - Listas de números romanos en minúsculas
    I - Listas de números romanos en mayúsculas

    <ol start="numero"> ... </ol>


    TABLAS

    <tr>
    <th>servicio 1</th>
    <th>servicio 2</th>
    <th>servicio 3</th>
    <th>servicio 4</th>
    </tr>
    COMBINAR TABLAS
    Los atributos colspan, para unificación horizontal, y rowspan, para unificación
    vertical
    1. CÓMO USAR HREF PARA
    VINCULAR SECCIONES
    DENTRO DE UN DOCUMENTO
    2. CÓMO USAR HREF PARA
    VINCULAR PÁGINAS DENTRO
    DE UN SITIO WEB
    FORMULARIOS
    FORMULARIO
    TIPOS DE INPUT
    BOTONES
    TIPOS DE INPUT
    REFERENCIAS
    https://developer.mozilla.org/es/docs/Learn/Forms/HTML5_input_types

    http://desarrolloweb.dlsi.ua.es/libros/html-css/ejercicios
    https://oscarmaestre.github.io/lenguajes_marcas/ejercicios/formularios/
    anexo_formularios.html#formulario-9

    También podría gustarte