Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Clase Tercer Grado - Pags Web HTML - 27nov2020

    Cargado por

    Profr. Emigdio Robledo Zaragoza
    16 vistas25 páginas
    Este documento presenta conceptos básicos sobre la creación de páginas web utilizando el lenguaje HTML. Explica la estructura básica de una página HTML, etiquetas como <html>, <head>, <body>, <title>, así como etiquetas de formato de texto como <b>, <i>, <u>. También cubre conceptos como enlaces, tablas, listas ordenadas y no ordenadas e incluye ejemplos. Por último, da instrucciones sobre una tarea relacionada con investigar sobre marcos (frames) en HTML.

    Descripción original:

    paginas web

    Título original

    CLASE TERCER GRADO_PAGS WEB HTML_27NOV2020

    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
    Este documento presenta conceptos básicos sobre la creación de páginas web utilizando el lenguaje HTML. Explica la estructura básica de una página HTML, etiquetas como <html>, <head>, <body>, <title>, así como etiquetas de formato de texto como <b>, <i>, <u>. También cubre conceptos como enlaces, tablas, listas ordenadas y no ordenadas e incluye ejemplos. Por último, da instrucciones sobre una tarea relacionada con investigar sobre marcos (frames) en HTML.

    Copyright:

    © All Rights Reserved
    Descargue como PPTX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    16 vistas25 páginas

    Clase Tercer Grado - Pags Web HTML - 27nov2020

    Cargado por

    Profr. Emigdio Robledo Zaragoza
    Este documento presenta conceptos básicos sobre la creación de páginas web utilizando el lenguaje HTML. Explica la estructura básica de una página HTML, etiquetas como <html>, <head>, <body>, <title>, así como etiquetas de formato de texto como <b>, <i>, <u>. También cubre conceptos como enlaces, tablas, listas ordenadas y no ordenadas e incluye ejemplos. Por último, da instrucciones sobre una tarea relacionada con investigar sobre marcos (frames) en HTML.

    Copyright:

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

    ESC. SEC.

    NUM 81 PROFR JULIO CUAUHTÉMOC


    TREVIÑO TREVIÑO
    TALLER INFORMÁTICA TERCERO DE SECUNDARIA
    SEGUNDO TRIMESTRE

    PÁGINAS WEB
    HTML
    (CONCEPTOS BÁSICOS)

    PROFR. EMIGDIO ROBLEDO


    PÁGINAS WEB
    Definición: Una página web, página electrónica, página
    digital o ciberpágina​​ es un documento o información
    electrónica capaz de contener texto, sonido, vídeo,
    programas, enlaces, imágenes, hipervínculos y muchas otras
    cosas, adaptada para la llamada World Wide Web y que
    puede ser accedida mediante un navegador web.
    PÁGINAS WEB
    Los elementos fundamentales para la creación de una página
    web son: Editor de Texto y Navegador.
    El editor de texto lo usaremos para ir escribiendo los
    documentos HTML, que será posteriormente interpretado por el
    Navegador, con lo que iremos comprobando los cambios y
    añadidos que vayamos efectuando.

    Mozilla Firefox, Chrome, Internet


    Explorer
    Bloc de Notas

    HTML es un lenguaje que se utiliza para la


    creación de páginas en la WWW.
    ESTRUCTURA BÁSICA
    TAREA (SIGUIENTE CLASE)

     INSTRUCCIONES: Investigar en Internet la definición de los


    siguientes comandos HTML:

    <HTML>:
    <HEAD>:
    <BODY>:
    <TITLE>:

    **Que la definición no sea tan corta, traten de mostrar una investigación


    donde se expliquen bien dichos comandos.**

    Esta actividad es para que se vayan familiarizando con estos conceptos.
    Método de trabajo
    Con el editor de texto crearemos un fichero con el
    nombre que queramos (p. ej. ejemplo1), pero que
    debe tener necesariamente la extensión .html
    (o .htm si nuestro sistema operativo no soporta
    extensiones de más de tres letras).

    ejemplo.html
    ejemplo.html
    ESTRUCTURA BÁSICA HTML
    <html> (Etiqueta que indica que lo que viene a
    continuación es un documento HTML)

    <head>(Etiqueta de apertura de la cabecera)


    Aquí va la información sobre el título de la página, el autor,
    palabras clave, etc. que no se presentarán en la ventana del
    navegador, salvo el título que aparecerá en la barra de título
    de la parte superior 
    </head>(Etiqueta de cierre de la cabecera)

    <body>(Etiqueta de apertura del cuerpo) 


    Aquí va el contenido de la página que será lo que se
    presente en pantalla. (Marcas: <br>, </p>, bgcolor= "red",
    <h1></h1>,<hr>, <b></b>, <i></i>, <u></u>)
    </body>(Etiqueta de cierre del cuerpo)

    </html>(Etiqueta de cierre del documento)


    MARCAS O ETIQUETAS
    <TITLE>: ES UNA BREVE DESCRIPCIÓN QUE IDENTIFICA LA PÁGINA. ES LO QUE
    APARECE EN EL MARCO DE LA VENTANA DEL NAVEGADOR. SE COLOCA EN <HEAD>.
    ETIQUETA DE INICIO Y CIERRE OBLIGATORIAS.

    <CENTER>: UTILIZADO PARA CENTRAR EL TEXTO. ETIQUETAS INICIO Y CIERRE


    OBLIGATORIAS

    <H1>: (Headline) UTILIZADO, DE MANERA HABITUAL, PARA IDENTIFICAR LA


    CABECERA MÁS IMPORTANTE EN UNA PÁGINA WEB. EJEMPLOS DE H1 SERÍAN EL
    TÍTULO DE UNA PÁGINA, EL TÍTULO DE UN POST, EL NOMBRE DE UN PRODUCTO ETC.
    EL TEXTO DE LA PÁGINA SE PUEDE ESTRUCTURAR LOS ENCABEZAMIENTOS O
    CABECERAS PUEDEN TENER DISTINTOS NIVELES DEL 1 AL 6 (SIENDO 1 EL MÁS
    IMPORTANTE). TANTO LA ETIQUETA INICIAL COMO LA FINAL SON OBLIGATORIAS.
    EJEMPLOS DE ENCABEZAMIENTOS O CABECERAS:

    Nota: El número
    representa la
    importancia.
    MARCAS O ETIQUETAS
    <HR>: (Horizontal Rule) PONE UNA LÍNEA HORIZONTAL DE SEPARACIÓN.
    LA ETIQUETA <HR> ES UNA ETIQUETA VACÍA Y NO REQUIERE UNA
    ETIQUETA FINAL. (18 ENERO 22)

    <BR>: (Break) PERMITE PARTIR UN PÁRRAFO EMPEZANDO UNA LÍNEA


    NUEVA PERO SIN DEJAR ESPACIO. DEBE TENER ETIQUETA DE INICIO Y NO
    DEBE TENER ETIQUETA DE CIERRE.

    <P>: (Paragraph) INDICA UN SALTO DE PÁRRAFO E INTRODUCIRÁ UN DOBLE


    SALTO DE LÍNEA. LA ETIQUETA DE CIERRE ES OPCIONAL.

    <big>: Incrementa el tamaño del tipo de letra. Tiene etiqueta de cierre.


    </big>

    <small>: Disminuye el tamaño del tipo de letra. Tiene etiqueta de


    cierre.</small>
    TAREA
    1
     TECLEAR EN EL BLOC DE NOTAS EL SIGUIENTE CÓDIGO (GUARDARLO
    CON .HTML)
     EJECUTARLO EN EL NAVEGADOR
     ENVIARME LA FOTO A CLASSROOM DE LO QUE LES APARECE EN EL
    NAVEGADOR

    2
    INVESTIGAR EN INTERNET LA DEFINICIÓN DE LAS SIGUIENTES ETIQUETAS DE
    FORMATO DE TEXTO:
     <b>: Texto en negrita. Tiene etiqueta de cierre. Bold.</b>
     <i>: Texto en cursiva. Tiene etiqueta de cierre. Italic.</i>
     <u>: Subrayar una palabra. Tiene etiqueta de cierre. Underlined.</u>
     <big>: Incrementa el tamaño del tipo de letra. Tiene etiqueta de cierre. </big>
     <small>: Disminuye el tamaño del tipo de letra. Tiene etiqueta de cierre.</small>
    Atributos de <body>
     bgcolor =″red″: Establece un color para ser usado como fondo del
    documento.
     text=″white″: Establece el color a ser usado en el texto en todo el documento.
    Ejemplo:

    <body bgcolor=″blue″ text=″white″>

    Atributos de <HR>
     size=″npx″: Para cambiar el grosor de la línea horizontal. Donde n
    es el valor del grosor de la franja en píxeles.

     color=″red″: Para cambiar el color de la línea horizontal.

    Ejemplo:
    <hr size=″8px″ color=″red″ >
    Listas no ordenadas <ul> (unordered list) en HTML

     Una lista no ordenada en HTML es aquella en la


    que los elementos no están enumerados ni
    marcados por algún caracter que designe orden.
    Los elementos están simplemente listadas con
    alguna viñeta.
     Etiqueta <li> (list item) </li>
    Los elementos de la lista propiamente dichos, se
    especifican en una etiqueta <li>, de tal manera que
    cada elemento es independiente de otro elemento.
    EJEMPLO:
    Listas ordenadas en HTML <ol> (ordered list)
     Una lista ordenada en HTML es aquella en la que los
    elementos están enumerados o marcado con algún
    signo alfanumérico que indique el orden de los
    elementos.
     Se utiliza la etiqueta html <ol> para crear listas
    ordenadas, entre la etiqueta de apertura y cierre irán
    los elementos de la lista dentro de una
    etiqueta <li> respectivamente.
    EJEMPLO
    REGRESO A CLASES TALLER DE
    COMPUTACIÓN TERCER GRADO

    FECHA: VIERNES 15 DE ENERO DEL


    2021
    Enlaces (links) en HTML
     En el HTML los enlaces se marcan con la etiqueta <a></a> y el
    atributo principal es href="" donde se escribe la ubicación del
    archivo de destino.

    < a href=‟url” > Contenido </a>


    Etiqueta de Contenido Etiqueta de
    apertura (botón) cierre

    Entre las etiquetas <a href=""></a> se puede colocar cualquier


    elemento html que funcionará como botón, generalmente se
    coloca un texto o una imagen. Si es un texto, el navegador por
    defecto lo muestra en color azul y subrayado. Si es una imagen,
    algunos navegadores especialmente las versiones anteriores a
    las actuales, le pueden agregar un borde azul.
    href significa referencia a
    hipervínculo
    Ejemplos

    <a href="http://www.google.com"> Página principal de Google</a>

    Etiqueta de Contenido Etiqueta de


    apertura (botón) cierre

    <a href="http://www.facebook.com">Estamos en Facebook</a>


    TABLAS EN HTML
    CONCEPTO
    Una tabla no es otra cosa más que un medio de organizar datos en filas y
    columnas.
    En documentos HTML una tabla puede ser considerada, resumidamente,
    como un grupo de filas donde cada una contiene a un grupo de celdas.
    Como muchas otras estructuras de HTML, las tablas son construidas
    utilizando elementos. En particular, una tabla básica puede ser declarada
    usando cuatro elementos,
    <table> (el contenedor principal) (etiqueta de cierre </table>)
    <tr> (representando a las filas contenedoras de las celdas) </tr>
    <td> (representando a las celdas) </td>
    <th>(celda de encabezado que puede aparecer en la primera fila de una tabla
    HTML) </th>
    Table= Tabla
    Tr= Tablerow (filas de tabla)
    Td=Tabledate (datos de tabla)
    Th=Tablehead (encabezados de tabla)
    Ejemplo
    CÓDIGO HTML

    VISUALIZACIÓN
    PÁGINA WEB
    El atributo border
    El atributo border indica si se dibujan bordes alrededor de las celdas y un borde alrededor
    de la tabla.

    <table border="1">

    El único valor admitido es el valor 1, sin unidades, aunque el borde se dibuja aunque no se
    escriba este valor.

    Elemento Caption
    Representa un título o leyenda para la tabla.
    Es habitualmente mostrado, de manera predeterminada, encima de la tabla
    asociada y con texto de alineación centrada.
    <caption> Lista de personas </caption>
    Publicar las páginas en Internet
    Hasta ahora sólo hemos realizado páginas que
    no son visibles desde Internet, sino que
    solamente se pueden visualizar en modo local
    en nuestro ordenador.
    Para publicar nuestras páginas en Internet
    para que sean accesibles por cualquier otro
    usuario de Internet debemos transferirlas a un
    servidor Web, para ello hay que realizar los
    siguientes pasos.
    1.- Uno de los primeros pasos consiste en la contratación
    de un alojamiento web y/o hosting, ya que en este se
    resguardarán todos los archivos que se muestren en la
    página web y todos los que se generen en un futuro.
    Ejemplos de proveedores de hosting:

    2.- El segundo paso consiste en realizar un registro de dominio


    de la página web, a fin de que obtengas una dirección fiable
    para que los cibernautas puedan tener acceso a tu página de
    manera rápida y segura. Se recomiendan los dominios de pago
    ya que tienen nombres mucho más cortos y prácticos que
    cualquiera pudiera recordar. Ejemplos:
    3.- En tercer lugar subir la página html a Internet.

    Archivos HTML. Estructura lineal.

    La página debe ser guardada en formato html para poder subir


    toda la información a la web de manera efectiva, ya que si
    deciden subir la información en otro formato, podrían
    generarse errores al momento de intentar ubicar la
    información.
    TAREA
    **FRAMES EN HTML**
     DEFINICIÓN
     ETIQUETAS (COLS, ROWS)
     ATRIBUTOS
     EJEMPLO DE UN CÓDIGO

    https://aprende-web.net/html/html9_2.php

    También podría gustarte