Scribd Logo
Upload

Welcome to Scribd!

  • HTML - Equipo 3

    Uploaded by

    Pris Rosalez (Pryk)
    7 views15 pages

    Original Title

    HTML_Equipo 3

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    7 views15 pages

    HTML - Equipo 3

    Uploaded by

    Pris Rosalez (Pryk)

    Copyright:

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

    Universidad Juárez Autónoma de Tabasco

    División Académica de Ciencias y Tecnologías


    de la Información

    Carrera:
    Lic. Tecnologías de la Información
     
    Nombre de La asignatura:
    Administración de sistemas intranet y extranet 

    Docente:
    Carlos González Zacarías

    Nombre de los estudiantes:


    Priscila Arias Rosales,
    Jairo Aguilar Muñoz

     Tema:
    HTML
     
    Cunduacán, Tabasco; 01 de marzo del 2022.
    Conceptos básicos de 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. Como lo sugiere el título, este
    artículo te dará una comprensión básica de HTML y cúal es su función.
    ENTONCES QUE ES HTML

    HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el


    componente más básico de la Web. Define el significado y la estructura del contenido web.
    Además de HTML, generalmente se utilizan otras tecnologías para describir la
    apariencia/presentación de una página web (CSS) o la funcionalidad/comportamiento 

    Las marcas HTML incluyen "elementos" especiales como <head>, <title>, <body>, <header>,
    <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>,
    <datalist>, <details>, <embed>, <nav>, <output> (en-US), <progress>, <video>, <ul>, <ol>, <li> y
    muchos otros.
    CARACTERÍSTICAS DE HTML

    Una de las características de HTML es la forma en que se divide la información.


    Esto es por medio de dos grandes bloques: el elemento HTML o head y el cuerpo o
    contenido.
    En el elemento HTML se pueden incluir los siguientes casos: 
    • Meta datos. Esta puede ser información que le dé contexto a la página. Por
    ejemplo, nos sirve para indicar el idioma. 
    • Referencia a ficheros. Aquí deben ir todos aquellos recursos que requiera
    nuestro sitio. Un ejemplo puede ser JavaScript y archivos CSS.
    • Scripts y estilos. En caso de que estos no sean incluidos en un fichero
    independiente se pueden incluir en la cabecera. 
    Por su parte, en el cuerpo está todo el contenido de nuestra página. Es decir, desde el
    texto, imágenes, videos e incluso enlaces. Lo importante aquí es que todos estos
    elementos deben estar estructurados en secciones y marcado de forma correcta. 
    Elementos del lenguaje HTML

    Se distinguen varios componentes: elementos y atributos.


    • Elementos: Desarrollan la estructura de las páginas webs. Los elementos h1, h2,
    h3, h4, h5 y h6 se utilizan para crear encabezados. Por orden jerárquico h1
    representa el primer nivel y, normalmente, el texto más grande. h2 es el segundo
    nivel con un texto algo más pequeño, así hasta llegar al h6 que es el texto más
    pequeño de todos.
    • Atributos: Los atributos de las etiquetas HTML definen detalles de comportamiento
    o presentación de la etiqueta donde van colocados. Se escriben dentro de la propia
    etiqueta con su nombre de atributo y el valor del atributo entre comillas.
    Ventajas y desventajas del lenguaje HTML

    Siguen habiendo versiones nuevas cada cierto tiempo con nuevas funcionalidades. Esto, ya que
    es un lenguaje muy utilizado por programadores, especialmente, para desarrollar proyectos web.
    Se pueden encontrar algunas ventajas y desventajas de su uso.
    1. Ventajas: Permite describir hipertexto, tiene un despliegue rápido, lo reconoce y admite
    cualquier tipo de explorador y permite archivos pequeños.
    2. Desventajas: El diseño es más lento, tiene un lenguaje estático y las etiquetas son limitadas.
    ¿Cómo crear una página web en
    HTML?
    1. Eligiendo el editor de texto

    Hay muchas opciones de editores de textos disponibles en Internet, tanto gratuitos


    como de pago. Entre las opciones gratis, hay varios que ofrecen todos los recursos
    que necesitas para crear tu página web.

    Los editores WYSIWYG: – What You See Is What You Get. Son aquellos que te
    permiten ver cómo el código se muestra en una página web, mientras la estás
    desarrollando.

    Para los que están empezando, los editores WYSIWG son muy recomendados, ya
    que no se requiere ninguna experiencia en codificación. Como ejemplo, tenemos
    estos editores:
    1. Atom;
    2. Sublime;
    3. Notepad ++;
    4. Brackets.

    Los editores HTML textuales: Son aquellos basados en texto, y es necesario que


    tengas conocimientos sobre HTML. Estos editores no permiten ver en vivo el
    resultado de tu código.
    2. Define tu proyecto

    Para hacer tu primera página web en HTML, escoge un editor de texto,


    en este caso se eligió Atom. Pero tú puedes usar el que tengas
    instalado en tu computadora.

    Abre tu editor de texto y crea un nuevo documento, en el cual


    empezarás a trabajar.

    3. Estructurando el código HTML

    Una vez que hayas creado el documento, vamos a empezar con el código.

    En primer lugar, vamos a escribir el siguiente bloque:


    ¡Importante! En la estructura del código HTML, al “abrir” una etiqueta es, muy importante que la cierres.
    Usando la barra “/” para decir al código que aquel bloque de informaciones ha terminado.

    Hoy, sabemos que no basta crear una web y subirla a Internet, sino que debemos facilitar el camino para
    que la encuentren. Por eso, vamos a usar en las etiquetas:
    <META =”description”>: Informa a los buscadores, por medio de la descripción que creaste, de que se trata
    tu web;
    <META =”keywords”>: Sirve para que tu web sea encontrada por medio de estas palabras clave.

    Listo, creamos la principal información de tu página web y, ahora, vamos a elaborar un contenido para
    ella. Para eso, vamos a trabajar en la etiqueta <BODY>.
    4. Creando un contenido para tu página web

    Antes de crear el texto visible para el usuario, vamos a guardar el documento.

    Al grabar el contenido, lo nombramos index.html, dónde index es el nombre del documento y


    .html es la extensión que define que se trata de un archivo HTML. 

    Ahora, dentro del bloque <BODY> </BODY>, vamos a crear un texto para saludar al visitante
    de tu sitio web.

    <h1> Ejemplos de editores de texto WYSIWG </h1>

    La etiqueta <h1> define el título de nivel 1 y se puede extender hasta el <h6>.

    <p> Son editores que te permiten ver cómo el código se muestra en una página web en
    marcha. Para los que están empezando, los editores WYSIWG son muy recomendados, ya que
    no se requiere ninguna experiencia en codificación. </p>

    Cuando necesitamos abrir un párrafo, tenemos que hacerlo por medio de la etiqueta <p>. En
    este caso, escribimos una breve introducción para que el lector sepa de lo que estamos
    hablando.
    1. <h2> 4 editores de texto WYSIWG </h2>
    2. <ol>
    3. <li>Atom</li>
    4. <li>Sublime</li>
    5. <li>Notepad ++</li>
    6. <li>Brackts</li>
    7. </ol>”
    Para crear una lista con los nombres de los editores, usamos el elemento <ol> – que define el
    bloque de listas ordenadas – y el  <li> – que debe ser usado para cada ítem de la lista.
    5. Agregando enlaces y colores al texto

    Pues, ¡muy bien! Una página web apenas en blanco y negro no llama mucho la atención,
    ¿verdad? Entonces, vamos a agregar unas líneas más de código para hacer tu web un poco
    más atractiva.

    Color
    Para dar color a tus textos, hay que indicarlo entre las etiquetas:
    <span style=”color:red“>  </span>

    Pero hay una regla para definir el color del texto, además de las etiquetas: escribirlo de
    manera correcta.

    Para eso, puedes consultar el HTML Color Picker de W3CSchools, elegir el color que más te
    gusta y copiar el código HEX – o escribir el nombre en la etiqueta.
    Enlaces

    Otra etiqueta muy importante es la <a> </a>, que agrega un enlace al texto colocado entre
    ellas.

    Por ejemplo, si queremos que el visitante sea direccionado hacia otro sitio u otra pestaña de
    tu propia web, simplemente agregamos un texto entre esas etiquetas de esta manera:

    <a target=”_blank” href=” [url del enlace]”> Texto del enlace </a>

    La información “_blank” quiere decir que, al hacer clic en el enlace, la página se abre en una


    nueva pestaña. Pero si deseas que abra en el mismo documento, tienes que cambiar esa
    información por “_self”.
    6. Terminando tu página web

    Bueno, ahora que hemos terminado de crear todo el código HTML de tu


    página web, vamos a ver cómo ha quedado tu primer proyecto. Dependiendo
    del editor podrás guardar el archivo como .html en tu computadora y este se
    abrirá en tu navegador. 

    You might also like