Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML Parte 1

    Cargado por

    Andrés Vasquez
    8 vistas27 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
    8 vistas27 páginas

    HTML Parte 1

    Cargado por

    Andrés Vasquez

    Copyright:

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

    TECNOLOGÍA

    Décimo Año

    Anls. Geovanny Araque Bohórquez


    Te c no l o gí a
    Informática
    •Introducción HTML/Dreamweaver
    •Estructura de una página web
    ○ Html
    ○ Head
    ○ Body
    •Formatos
    ○ <b>
    ○ <i>
    ○ <small>
    ○ Párrafos y saltos de líneas
    ○ Encabezados 
    •Tablas HTML/ Dreamweaver
    •Listas HTML/ Dreamweaver
    •Imágenes y videos HTML/ Dreamweaver
    •Sitio web
    ○ Enlaces 
    ○ Personalizar objetos y plantillas
    ○ Configuración de un dominio, subdominio
    1

    Establecer la estructura para


    crear contenido de una página
    ¿Qué es HTML?

    HTML es un lenguaje de marcado que se utiliza para el


    desarrollo de páginas de Internet. Se trata de la sigla que
    corresponde a HyperText Markup Language, es decir,
    Lenguaje de Marcas de Hipertexto
    Y... ¿Para qué sirve?

    ● Es usado para estructurar y disenar paginas web.


    ● Los Browsers (1) lo usan para poder traducir y mostrar la
    informacion disponible en una página web de una manera
    estructurada,
    ` con tablas,  imagenes, animaciones , formularios
    e hipervinculos (links).
    ●Es además un estandar existente para la creación de
    documentos web.

    (1) Browser es el software utilizado para visualizar páginas web. Ej: Mozilla Firefox, Opera.
    `
    Tags
    (etiquetas)
    ● Html utiliza tags para representar sectores y estructuras
    dentro de la pagina web.
    ●Los tags (o etiquetas )comienzan (generalmente) de la
    forma:
    < tag >
    ●Terminando (generalmente) de la forma:
    < / tag >
    ●Estructura bàsica de una pàgina Html

    <html>
    < head>
    <title> </title>
    </head>
    <body>
    Cuerpo de la pàgina
    </body>
    </html>
    Distintos Tags

    ● Existe una gran variedad (mas de 60) de tags


    distintos, donde cada uno representa algo diferente dentro
    de la pagina.
    <html>
    </html>

    ● Marca el comienzo (<html>) y el fin (</html>) de una


    página web HTML.

    ●Es absolutamente necesario para que el browser


    identifique que tipo de documento es y donde este
    comienza. 
    <body>
    </body>
    ● Marca el comienzo (<body>) y el fin (</body>) del
    contenido de una página web.
    ●Tiene atributos como:
    ●Color de Fuente
    ●Color de Fondo
    ●Imagen de Fondo
    ●Color de Links
    <body>
    </body>
    bgcolor
    background
    <title>
    </title>
    • Introduce un titulo al documento.
    • Es la leyenda que se ve en el borde superior
    (pestaña) del navegador.

    Ejemplo:
    <title> Título de la página </title> 
    <font>
    </font>
    ● Cambia las propiedades de la fuente

    Ejemplo:
    <font color=”red”> Este texto con color rojo </font> 

    Atributos:
    • Color
    • Face
    • size
    <a>
    </a>
    ● Crea un hipervinculo (link)

    Ejemplo:
    <a href=”http://www.fen.uchile.cl”> Click Aca para entrar a la la FEN</a>

    href = hyperlink reference


    <br>

    ● Inserta un break (enter o nueva línea) 

    Ejemplo:
    Esto es un texto, en donde ahora aca <br> inserto una nueva linea.
    <br> Despues del cierre de un parrafo tambien viene una nueva
    linea.
    Ejercicio 1: 
    -Escribir una página web, aplicando las etiquetas de la estructura básica. 
    -Organizar los archivos en una carpeta.
    -Usar el editor de texto Html: BLOC DE NOTAS.
    -Guardar el archivo: Nombre del documento: nombrepagina.html
      Ejemplo:   pagina1Araque.html
    -Subir el documento html (su página) a esta asignación de Teams.

    <html>
          <head> <title> Olimpiadas </title> </head>
    <body bgcolor="green" link="red">

               JUEGOS INTERNOS ANAI 2022  <br>


               4 disciplinas deportivas en competencia<br>
               Elige un representante y madrina  <br>
               <font color="red"> Inscribe tu curso con el siguiente link:  </font> 
    <a href="https://anai.edu.ec/"> INSCRIPCIONES ANAI</a>
    </body>
    </html>
    <font>
    </font>
    ● Cambia las propiedades de la fuente

    Ejemplo:
    <font face=”Verdana” color=”red”> Este texto estara en verdana y con
    color rojo </font> 

    Atributos:
    • Color
    • Face
    • size
    <p>

     Inserta un salto de párrado. (enter a un nuevo párrafo) 

    Ejemplo:
    Las tablas son quizas una de las estructuras mas usadas en una
    pagina web. <p>
    Se usan generalmente para definir el diseno de esta​. Son muy
    utilizadas para los formularios y Listas de datos.
    Ejercicio 2: 
    -Escribir una página web, aplicando las etiquetas de la estructura básica. 
    -Organizar los archivos en una carpeta (ver ejemplo a la derecha).
    -Usar el editor de texto Html a BLOC DE NOTAS.
    -Guardar el archivo: Nombre del documento: paginaAPELLIDO  Extensión: .html
      Ejemplo:   pagina2Araque.html
    -Capturar la pantalla de pagina web terminada y subir a la asignación del Teams.

    Mostrar:
    Codigo Ejercicio 2: Capturar la pantalla de pagina web terminada y subir a la asignación del Teams.  

    <html>​
    <head> <title> Saltos </title>
    </head>​
    <body background="fondonaranja.jpg" link="blue">​

    ​ <h1>Salto de linea siguiente con br </h1> ​


             Las tablas son quizas una de las estructuras mas usadas en una pagina web. <br>​
    Se usan generalmente para definir el diseno de esta​. Son muy utilizadas para los formularios y Listas de
    datos.
    <hr>
    <h1>Salto de linea de parrafo con p </h1> ​ ​
             Las tablas son quizas una de las estructuras mas usadas en una pagina web. <p>
    Se usan generalmente para definir el diseno de esta​. Son muy utilizadas para los formularios y Listas de
    datos.

    </body>​
    </html>​
    Imagenes
    <img src=”Dirección”>

    Para insertar una imagen hay que definir el lugar fisico


    o virtual en donde esta se encuentra.
    Lugar Fisico: Una direccion en el disco duro (C:\
    imagenes\imagen.jpg)
    Lugar Virtual: Una direccion en internet
    (http://www.uchile.cl/logo.gif)
    Imagenes
    <img src=”Dirección”>
    Ejemplo: 
    <img src=”C:\imagenes\imagen.jpg”>
    Si la imagen esta en la carpeta de la pagina Web:
    <img src=”imagen.jpg”>
    NO TIENE CIERRE

    Atributos:
    Width: Ancho de imagen en píxeles.
    Height: Alto de imagen en píxeles
    Border: Tamaño del borde de la imagen en píxeles; border = “0” evita que
    se muestre el borde de un hipervínculo de imagen.
    Ejercicio 3: 
    -Escribir una página web, aplicando las etiquetas aprendidas hasta ahora. 
    -Organizar los archivos en una carpeta.
    -Usar el editor de texto Html: BLOC DE NOTAS.
    -Guardar el archivo: Nombre del documento: nombrepagina.html
      Ejemplo:   pagina3Araque.html
    -Subir el documento html (su página) a esta asignación de Teams.
    CODIGO HTML Ejercicio 3: 
    <html>​
    <head> <title> Olimpiadas </title>
    </head>​
    <body bgcolor="silver" link="blue">​
    <CENTER>
    ​ <font color="red"> <h1>JUEGOS INTERNOS ANAI 2022</h1> </font> ​
    <h2> 3 disciplinas deportivas en competencia <h2>
    <img src="basquet.jpg" height="100" width="150"> <br>
    Basquet
    <br>
    <img src="natacion.jpg" height="100" width="150"> <br>
    Natacion
    <br>
    <img src="futbol.jpg" height="100" width="150"> <br>
    Futbol
    <br> <br>
    Inscribe tu curso con el siguiente link:
    <a href="https://anai.edu.ec/"> INSCRIPCIONES ANAI</a>​
    <br> <br>
    <a href="https://anai.edu.ec/">
    <img src="logoanai.png" height="50" width="200" border=5>
    </a>
    <br>
    Elige un representante y madrina <br>​
    </CENTER>
    </body>​
    </html>​

    También podría gustarte