Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Sesion 2 - HTML

    Cargado por

    Aragonvera
    4 vistas25 páginas

    Título original

    sesion 2- HTML

    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
    4 vistas25 páginas

    Sesion 2 - HTML

    Cargado por

    Aragonvera

    Copyright:

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

    M.S.C.

    Victor Andrés Ramírez Sánchez


    M.S.C. Alma Verónica Meléndez Gurrola

    Febrero de 2019
    El lenguaje de HTML
    2.1.Estructura básica de un documento
    HTML

    <!DOCTYPE>

    En primer lugar necesitamos indicar el tipo de


    documento que estamos creando. Esto en
    HTML5 es extremadamente sencillo:
    <!DOCTYPE html>

    <html>

    Luego de declarar el tipo de documento,


    debemos comenzar a construir la estructura
    HTML. Como siempre, la estructura tipo árbol
    de este lenguaje tiene su raíz en el elemento
    <html>. Este elemento envolverá al resto del
    código:
    <!DOCTYPE html> <html lang=”es”>

    </html>
    2.1.Estructura básica de un documento
    HTML

    <head>

    El código HTML insertado entre las etiquetas <html> tiene que ser
    dividido entre dos secciones principales. Al igual que en versiones
    previas de HTML, la primera sección es la cabecera y la segunda el
    cuerpo. El siguiente paso, por lo tanto, será crear estas dos secciones
    en el código usando los elementos <head> y <body> ya conocidos. El
    elemento <head> va primero, por supuesto, y al igual que el resto de
    los elementos estructurales tiene una etiqueta de apertura y una de
    cierre:

    <!DOCTYPE html> <html lang="es">


    <head>

    </head>

    </html>
    2.1.Estructura básica de un documento
    HTML

    <body>

    La siguiente gran sección que es parte principal de la organización de un


    documento HTML es el cuerpo. El cuerpo representa la parte visible de
    todo documento y es especificado entre etiquetas <body>. Estas
    etiquetas tampoco han cambiado en relación con versiones previas de
    HTML:

    <!DOCTYPE html> <html lang="es">


    <head>

    </head>
    <body>
    Cuerpo del documento.
    </body>
    </html>
    2.1.Estructura básica de un documento
    HTML

    <meta>

    Es momento de construir la cabecera del documento. Algunos


    cambios e innovaciones fueron incorporados dentro de la cabecera, y
    uno de ellos es la etiqueta que define el juego de caracteres a utilizar
    para mostrar el documento. Ésta es una etiqueta <meta> que
    especifica cómo el texto será presentado en pantalla:

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset=”iso-8859-1”>
    </head>
    <body>

    </body>
    </html>
    2.1.Estructura básica de un documento
    HTML

    Hay varios tipos de etiqueta <meta> que pueden ser incluidas para declarar
    información general sobre el documento, pero esta información no es
    mostrada en la ventana del navegador, es solo importante para motores de
    búsqueda y dispositivos que necesitan hacer una vista previa del documento u
    obtener un sumario de la información que contiene:

    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="iso-8859-1" />
    <meta name="description" content="Ejemplo de HTML5" />
    <meta name="keywords" content="HTML5, CSS3, JavaScript" />

    </head>
    <body>
    </body>
    </html>
    2.1.Estructura básica de un documento
    HTML
    <title>

    La etiqueta <title>, como siempre, simplemente especifica el título


    del documento:

    <head>
    <title>Título del documento</title>
    </head>

    <link>

    Otro importante elemento que va dentro de la cabecera del


    documento es <link>. Este elemento es usado para incorporar estilos,
    códigos Javascript, imágenes o iconos desde archivos externos. Uno
    de los usos más comunes para <link> es la incorporación de archivos
    con estilos CSS:

    <head>
    <link rel=”stylesheet” href=”misestilos.css”>
    </head>
    2.2. Formato de un documento HTML

    <H1…H6>

    La etiqueta <H>, permite crear encabezados en diferentes niveles.

    <body>
    <H1>Título 1</H1>
    <H2>Título 2</H2>
    <H3>Título 3</H3>
    </body>

    <p> </p>

    La etiqueta <p> permite distribuir el texto en párrafos:

    <body>
    <p>Parrafo 1</p>
    <p>Párrafo 2</p>
    <p>Párrafo 3</p>
    </body>
    2.2. Formato de un documento HTML

    <br>

    La etiqueta <br>, permite crear un salto de línea.

    <body>
    Linea 1<br>
    Linea 2<br>
    Linea 3
    </body>

    <b> y <strong>

    La etiqueta <b>, permite resaltar el texto (remarca el texto en


    negritas) al igual que la etiqueta <strong>.

    <body>
    <b>Texto 1 resaltado en negritas</b>
    <strong>Texto 2 resaltado en negritas</strong>
    </body>
    2.2. Formato de un documento HTML

    <I>

    La etiqueta <I>, pone el texto en cursiva o también llamada italica.

    <body>
    <I>Texto 1 resaltado en negritas</I>
    </body>

    <u>
    La etiqueta <u>, permite subrayar el texto.

    <body>
    <u>Texto 1 resaltado en negritas</u>
    </body>
    2.2. Formato de un documento HTML

    <em>

    La etiqueta <em>, pone énfasis en el texto que la contiene:

    <body>
    <em>Texto 1 resaltado en negritas</em>
    </body>

    &
    Para imprimir caracteres especiales en HTML se utiliza el símbolo &
    seguido del carácter que se quiere imprimir y finalmente se cierra
    con ; (punto y coma).

    <body>
    &nbsp;
    &copy;
    &gt;
    </body>

    www. w3schools.com ->HTML Entities


    2.3. Estructura del contenido de un documento
    2.3. Estructura del contenido de un documento
    <header> Este elemento presenta información introductoria y puede ser
    aplicado en diferentes secciones del documento. Tiene el propósito de
    contener la cabecera de una sección pero también puede ser utilizado
    para agrupar índices, formularios de búsqueda, logos, etc…

    <body>
    <header>
    Encabezado
    </header>
    </body>

    <nav> Este elemento indica una sección de enlaces con propósitos de


    navegación, como menús o índices. No todos los enlaces dentro de una página
    web tienen que estar dentro de un elemento <nav>, solo aquellos que forman
    partes de bloques de navegación.

    <body>
    <nav>
    Enlaces de la barra de navegación.
    </nav>
    </body>
    2.3. Estructura del contenido de un documento
    <section> Este elemento representa una sección general del documento.
    Es usualmente utilizado para construir varios bloques de contenido (por
    ejemplo, columnas) con el propósito de ordenar el contenido que
    comparte una característica específica, como capítulos o páginas de un
    libro, grupo de noticias, artículos, etc…
    <body>
    <secction>
    Sección general
    </secction >
    </body>

    <aside> Este elemento representa contenido que está relacionado con el


    contenido principal pero no es parte del mismo. Ejemplos pueden ser citas,
    información en barras laterales, publicidad, etc…
    <body>
    < aside >
    Ejemplo de barra lateral.
    </aside >
    </body>
    2.3. Estructura del contenido de un documento
    <footer> Este elemento representa información adicional sobre su
    elemento padre. Por ejemplo, un elemento <footer> insertado al final del
    cuerpo proveerá información adicional sobre el cuerpo del documento,
    como el pie normal de una página web. Puede ser usado no solo para el
    cuerpo sino también para diferentes secciones dentro del cuerpo,
    otorgando información adicional sobre estas secciones específicas.

    <body>
    <footer>
    Pie de página
    </footer >
    </body>

    <figure> Este elemento representa una porción independiente de contenido


    (por ejemplo, imágenes, diagramas o videos) que son referenciadas desde el
    contenido principal. Esta es información que puede ser removida sin afectar el
    fluido del resto del contenido.

    <figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño


    texto relacionado con el contenido de un elemento <figure>, como la
    descripción de una imagen.
    2.3. Estructura del contenido de un documento
    <body>
    <figure>
    <img src="entrar.jpg" alt="Entrar">
    <figcaption>Logotipo de entrar</figcaption>
    </figure>
    </body>

    <img> Este elemento permite insertar imágenes dentro del documento HTML,
    para esto hace uso de su principal parámetro que es “src” donde se le asigna la
    ruta y nombre de la imagen.
    Algunos parámetros son:
    alt.- Texto alternativo en caso de que la imagen no se pueda mostrar.
    width.- Ancho de la imagen.
    heiht.- Alto de la imagen.

    <body>
    <img src="entrar.jpg" alt="Entrar">
    </body>
    2.4. Enlaces

    <a> Este elemento crea un enlace a otras páginas de internet, archivos o


    ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra
    URL.
    Algunos atributos son:

    download.- indica descargar a los navegadores una URL en lugar de navegar


    hacia ella.
    href.- Contiene una URL o un fragmento de URL al cual apunta el enlace.
    target.- Especifica en donde desplegar la URL enlazada.

    <body>
    <a href=“pagina.html">Pagina 1</a>
    <a href=http://www.google.com.mx> Google</a>
    </body>
    2.5.Listas

    Existen 3 tipos de listas en HTML

    1.- Listas sin orden <ul> </ul>


    2.- Listas Ordenadas <ol> </ol>
    3.- Listas de definición. <dl> </dl>

    Las primeras 2 utilizan la etiqueta <li> para definir sus


    elementos y las ultimas usan las etiquetas <dt> y <dd> para
    definir cada uno de sus elementos.
    2.5.Listas

    Listas sin orden <ul> </ul>

    <body>
    <ul>
    <li type=“disc”>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento n</li>
    </ul>
    </body>

    Parámetros:
    type: los valores pueden ser disc, circle o scuare.
    2.5.Listas

    Listas ordenadas <ol> </ol>

    <body>
    <ol>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
    <li>Elemento 3</li>
    <li>Elemento n</li>
    </ol>
    </body>
    2.5.Listas

    Listas de definición <dl> </dl>

    <body>
    <dl>
    <dt>Termino 1</dt>
    <dd>Definición del termino 1</dd>
    <dt> Termino 2</dt>
    <dd> Definición del termino 2</dd>
    </dl>
    </body>
    2.6.Tablas
    Las tablas se definen con la etiqueta <table> </table>,
    para definir sus renglones dentro del bloque anterior se usa
    la etiqueta <tr> </tr> y dentro de este bloque se definen las
    columnas con la etiqueta <td> </td>. Para los encabezados
    se puede utilizar dentro del renglón la etiqueta <th> </th>
    en vez de la etiqueta <td>.
    Ejemplo:

    <body>
    <table>
    <tr>
    <th>Nombre</th>
    <th>Edad</th>
    <th>País</th>
    </tr>
    <tr>
    <td>Anne</td>
    <td>27 years old</td>
    <td>France</td>
    </tr>
    <tr>
    <td>Carmen</td>
    <td>33 years old</td>
    <td>Spain</td>
    </tr>
    </table>
    </body>
    Practica
    Descarga los recursos de la siguiente liga y desarrolla
    cada una de las páginas que contiene el documento.

    www.sistemastorreon.uadec.mx/diplomado/sesion2html.zip

    Este es el primer entregable del diplomado, deberás


    enviarlo al siguiente correo:
    victorramirez@uadec.edu.mx
    Con el asunto: Diplomado – e1 - Nombre completo

    También podría gustarte