Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML 5 - Css 3-Material

    Cargado por

    Nicolas
    17 vistas52 páginas
    Este documento proporciona una introducción al lenguaje de marcado HTML y a los elementos CSS. Explica que HTML se utiliza para estructurar páginas web y describir su contenido, mientras que CSS se usa para controlar la apariencia y formato. También describe varios elementos HTML comunes como etiquetas, atributos e imágenes, y cómo se utilizan atributos como src, alt y width.

    Descripción original:

    Título original

    HTML 5 – Css 3-Material

    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
    Este documento proporciona una introducción al lenguaje de marcado HTML y a los elementos CSS. Explica que HTML se utiliza para estructurar páginas web y describir su contenido, mientras que CSS se usa para controlar la apariencia y formato. También describe varios elementos HTML comunes como etiquetas, atributos e imágenes, y cómo se utilizan atributos como src, alt y width.

    Copyright:

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

    HTML 5 - Css 3-Material

    Cargado por

    Nicolas
    Este documento proporciona una introducción al lenguaje de marcado HTML y a los elementos CSS. Explica que HTML se utiliza para estructurar páginas web y describir su contenido, mientras que CSS se usa para controlar la apariencia y formato. También describe varios elementos HTML comunes como etiquetas, atributos e imágenes, y cómo se utilizan atributos como src, alt y width.

    Copyright:

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

    HTML 5 – CSS 3

    Prof. Nicolas Fanola Orosco


    HTML
    • HTML es el lenguaje de marcado estándar para la creación de páginas
    Web.
    • HTML significa Hyper Text Markup Language (Lenguaje de marcado de
    hipertexto)
    • HTML describe la estructura de las páginas Web usando marcado
    • elementos HTML son los bloques de construcción de páginas HTML
    • elementos HTML están representados por etiquetas
    • Los navegadores no muestran las etiquetas HTML, pero las usan para
    representar el contenido de la página
    HTML  (Hypertext Markup Language)  Hypertext + MarkUp

    Hypertext MarkUp
    Es texto ordinario al que se le Es el proceso de tomar el texto
    incorporan funcionalidades ordinario e incorporarle símbolos
    adicionales como: adicionales. Cada uno de estos
    Formato, símbolos identifica a un comando
    Imágenes, que le indica al navegador como
    Multimedia mostrar ese texto.
    Y enlaces a otros documento.
    Página Web
    • Párrafos •Tablas
    Estructura •Encabezados • Capas
    • Listas • Etc. HTML
    • Textos
    Contenido • Imágenes
    • Enlaces
    • Colores • Fondos
    Apariencia • Tipografías • Tamaños CSS
    • Alineación • Etc.
    • Efectos
    Comportamiento • Validaciones Javascript
    • Automatización
    Etiquetas HTML

    • <Nombre de etiqueta> contenido va aquí ... </ nombre de etiqueta>

    • Etiquetas normalmente vienen en pares como <p> y </ p>


    • La primera etiqueta es la etiqueta de inicio, la segunda etiqueta es
    la etiqueta de fin
    • La etiqueta final se escribe igual que la etiqueta de inicio, pero con
    una barra inclinada insertada antes del nombre de la etiqueta
    • Consejo: La etiqueta de inicio también se llama la etiqueta de
    apertura y la etiqueta final de la etiqueta de cierre .
    Elementos HTML
    Los elementos son los componentes fundamentales del HTML
    Cuentan con 2 propiedades básicas:
    • Atributos
    • Contenido
    En general se conforman con una Etiqueta de Apertura y otra Cierre.
    Los atributos se colocan dentro la etiqueta de apertura, y el contenido se
    coloca entre la etiqueta de apertura y la de cierre.

    Elemento
    Etiqueta de Apertura Contenido Etiq. de Cierre

    <p class=“texto”>Curso HTML Cea DT</p>


    Nombre Valor
    Atributo
    Atributos
    <p class=“texto”>Curso HTML Cea DT</p>
    Nombre Valor
    Atributo

    Los atributos de un elemento son pares de nombres y valores separados


    por un “=” que se encuentran dentro de la etiqueta de apertura de algún
    elemento. Los valores deben estar entre comillas.

    <img src ="https://www.kasandbox.org/programming-


    images/landscapes/beach-in-hawaii.png" alt="La
    playa de una isla encantadora" width="300">
    Un documento HTML simple
    contine:
    • <!DOCTYPE html>declaración que define que ese documento es HTML5
    • El elemento <html> es el elemento raíz de una página HTML
    • El elemento <head> contiene información de metadatos sobre el
    documento
    • El elemento <title> especifica un título para el documento
    • El elemento <body> contiene el contenido de la página visible
    • El elemento <h1> define un gran encabezado
    • El elemento <p> define un párrafo
    •
    Tipos de elementos

    • Algunos tipos de Elementos


    • Estructurales
    Describen el propósito del texto y no denotan ningún
    formato específico.
    Por ejemplo:
    <h1>Curso Diseño WEB</h1>
    Tipos de elementos
    • De Presentación
    Describen la apariencia del texto, independientemente de su
    función.
    Por ejemplo:
    <b> Curso </b>
    Los elementos de presentación se encuentran obsoletos desde la
    aparición del CSS.
    Tipos de elementos
    • De Hiper Texto
    Relaciona una parte del documento a otros documentos.
    Por ejemplo:

    <a href= “http://moodle.ier-bolivia.com”> Cea Delia Tetreault </a>


    Estructura de un documento HTML
    • <html>… </html>
    • Delimita el Documento HTML
    • <head> … </head>
    • Delimita el encabezado del Documento
    HTML
    • En general incluye los metadatos del
    documentos y Scripts.
    • <body> … </body>
    • Delimita el Cuerpo del Documento HTML.
    • Es donde se incluyen los contenidos
    visibles del documento.
    Ejemplo
    <!DOCTYPE html>
    <html>
    <head>
    Aquí se incluyen os distintos elementos del
    encabezado
    </head>
    <body>
    Aquí se incluyen los distintos elementos
    contenedores o scripts
    </body>
    </html>
    Ejemplo (Practica 01)
    1. Crear una capeta con tu nombre
    2. Crea un archivo de texto con el
    bloc de notas en la carpeta
    creada.
    3. Copiar el texto
    4. Guardar con el nombre de
    PrimeraWeb.html
    Elementos de head
    • <title> … </title>
    Define el título del documento HTML
    • <script> … </script>
    Se utiliza para incluir programas al documento. En general se tratan
    de Javascripts.
    • <style> … </style>
    Especifica un estilo CSS para ser utilizado en el documento.
    • <meta> … </meta>
    Permite especificar información de interés como: autor, fecha de
    publicación, descripción, palabras claves, etc.
    Ejemplo
    Abre el bloc de notas y coloca el siguiente
    texto, copia el texto escrito en la anterior
    practica. Aumenta el texto en azul y luego
    Práctica en Clase. guarda como PracticaEnClase1.html
    <!DOCTYPE html>
    <html lang=“es”>
    <head>
    <title>Título Página Web</title>
    <meta charset=“utf-8”>
    </head>
    <body>
    <h1>Práctica en Clase Virtual</h1>
    <p>Este es un párrafo</p>
    <p>Este es otro párrafo</p>
    </body>
    </html>

    PracticaClase1.html
    En Visual Studio Code
    <!DOCTYPE html>
    • El Doctype o “Declaración del tipo de documento” es una instrucción
    especial que va al inicio de nuestro documento HTML y que permite
    al navegador entender qué versión de HTML estamos utilizando.
    <html lang="en">
    • El atributo lang=”en” de la etiqueta <html> describe el lenguaje, en
    este caso inglés. Aunque esta descripción no es siempre, al menos
    que tu sitio sea en español puedes usar lang=”es”.
    <meta charset="UTF-8">
    • El elemento meta con atributo charset en un documento HTML está
    el destinado a indicar la codificación de caracteres utilizada (charset).
    En HTML5 tiene la sintaxis:

    <meta charset="identificador-juego-de-caracteres">

    UTF-8 (format de codificación de caractreres) Es un identificador que


    resuelve problemas de codificación, muestra tildes y caracteres
    especiales como ñ, Ñ y otros.
    https://www.elvisualista.com/2016/09/16/que-es-utf-8/
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    Este atributo tiene que ver con la compatibilidad del navegador


    donde se esta consultando la página web (http-equiv=”X-UA-
    Compatible”), y donde en el atributo content, el valor ie=edge se
    refiere al viejo navegador Internet Explorer el cual ya no es tan
    usado, en lugar de ello se indica usar el estándar de Edge como
    navegador de Microsoft.
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    • Este atributo es importante para diseño responsivo. Ya que queremos


    que nuestro sitio web se vea bien en diferentes tipos de pantallas
    como lo son Escritorio, Laptop, Smartphone, Tablet, iPad, y demás
    modelos.

    • El cual el valor del atributo content indica que abarcará el ancho del
    dispositivo en donde se esté visualizando esta pagina web junto con
    el atributo de la escala inicial a 1.0 (intial-scale=1.0).
    HTML Atributos
    Todos los elementos HTML pueden tener atributos.

    Proporcionan información adicional acerca de un elemento


    siempre se especifican en la etiqueta de inicio
    generalmente vienen en pares nombre / valor como: name = "valor"
    El atributo lang

    • El lenguaje del documento puede ser declarado en la


    etiqueta <html> .
    • El lenguaje se declara con el atributo lang .
    • La declaración de una lengua es importante para las aplicaciones de
    accesibilidad (lectores de pantalla) y motores de búsqueda:
    • <html lang=“es"> // lenguaje español
    El atributo title

    • Aquí, se añade el atributo a la etiqueta <p> . El valor del atributo de


    título se muestra como un consejo al pasar el ratón sobre el párrafo:
    • <p title=“esto es un título”>
    El atributo href

    • Los vínculos HTML se definen con la etiqueta <a> . La dirección del


    enlace se especifica en el atributo href :

    • <a href=“direccion url">This is a link</a>


    Los atributos de tamaño

    • En HTML las imágenes se definen con la etiqueta <img> .


    • El nombre de archivo de la fuente ( src ), y el tamaño de la imagen
    ( anchura y altura ) son proporcionados como atributos :
    • <img src=“imagen.jpg" width="104" height="142">
    • El tamaño de la imagen se especifica en píxeles:
    • width = "104" significa 104 píxeles de pantalla ancha.
    El atributo alt

    • alt especifica un texto alternativo que se


    utilizará, cuando una imagen no se puede
    visualizar.
    • <img src="w3schools.jpg" alt=“foto se llama imagen” width="104" height="142">
    ¿es obligatorio el uso de comillas?
    • No es obligatorio se puede utilizar sin poner comillas:
    • <p title=About W3Schools>
    • Si usas comillas puedes utilizar a tu elección comillas simple
    • <p title=‘carlos blanco’></p>
    • o dobles
    • <p title=“carlos blanco”></p>
    Ejemplo

    PracticaAtributos.html
    HTLM encabezamiento
    Etiquetas <h1><h6>
    Cabeceras h1 – h6
    • Las cabeceras se definen con la etiquetas <h1> hasta la
    <h6>
    • <h1> define el título más importante, su tamaño es
    superior a los otros.
    • <h6> define el título menos importante y su tamaño es el
    más pequeño de todas las cabeceras.
    • Los motores de búsqueda utilizan los encabezados para
    indexar la estructura y el contenido de sus páginas web
    • Los usuarios hojean las páginas por sus título. Es
    importante utilizar las cabeceras para mostra la estructura
    del documento.
    • La etiqueta <h1> debe ser utilizada para las cabeceras
    principales y dependiendo del grado de importancia se va
    degradando hasta la etiqueta <h6>.
    Reglas horizontales

    • La etiqueta<hr> define un ruptura temática en una página html y


    se muestra como una line horizontal.
    • Se utiliza para separar contenido en una página htnl.
    Elemento <meta>
    • Se utiliza para añadir información sobre la página. Esta información puede ser
    utilizada por los buscadores.
    • Los buscadores consultan la información de la etiqueta <meta> de las páginas,
    buscando coincidencias con lo que el usuario quiere encontrar.
    • Los tipos de información más utilizados son:

    Tipo Significado

    author Autor de la página


    classification Palabras para clasificar la
    página en los buscadores
    description Descripción del contenido de
    la página
    keywords Palabra clave

    • No necesita etiqueta de cierre y se pueden insertar varias etiquetas en un


    documento.
    Ejemplo de etiquetas META
    • <meta name=“author” content=“carlos blanco”>
    • <meta name=“description” content=“curso de html5 y css3”>
    • <meta name=“keywords” content=“código html5 etiquetas”>

    •Name: indica el tipo de información.


    •Content: indica el valor de dicha información.
    Ejemplo

    PracticaEncabezados.html
    Párrafos

    38
    Características
    • La etiqueta <p> define un párrafo
    • Con html no se puede cambiar la salida mediante la adicción de
    espacios adicionales o líneas adicionales en el código html
    • El navegador eliminará todos los espacios en blanco y las líneas
    adicionales cuando se visualiza la página.

    •<p>escribe el texto de tu párrafo aquí</p>


    Salto de linea
    • Con el elemento <br> definimos un salto de línea, utiliza esta etiqueta
    para crear una nueva línea en tu párrafo.

    • <p>primera línea<br>segunda línea</p>


    Elemento <pre>
    • Sirve para preformatear un texto
    • El texto dentro de <pre> se muestra en una fuente de ancho fijo y
    conserva ambos espacios y salto de línea, queda como tu lo escribes
    en el editor.
    • <pre>
    este texto queda como
    Se ve en esta imagen
    • < pre>
    PracticaParrafos.html
    Estilos
    Para empezar a tener una noción básica de css.
    Durante el curso se dará un apartado donde aprenderemos css3 y todas
    sus propiedad
    Estilo en el atributo
    • El ajuste del estilo de una etiqueta se puede hacer por medio del
    atributo llamado style:
    • <p style=“propiedad:valor; propiedad2:valor2”>
    • Propiedad = propiedad CSS
    • valor = un valor de la propiedad CSS
    Color de fondo
    • Con el propiedad background-color definimos el color
    de fondo de un elemento html:
    • <body style=“background-color: red;”>
    Color del texto
    • Con la propiedad color definimos el color del texto de
    un elemento html:
    • <h1 style=“color:blue;”>texto tag</h1>
    Fuente del texto
    Con la propiedad font-family definimos el tipo de
    letra que se utilizará en el elemento html:
    <p style=“font-family:verdana;”> texto tag</p>
    Honey
    Tamaño del texto
    • Con la propiedad font-size definimos el tamaño
    del texto del elemento html:
    • <h3 style=“font-size:20px;”>texto</h3>
    Alineación del texto

    •Con la propiedad text-align definimos la


    alineación de un elemento html:
    •<p style=“text-align: center;”>texto</p>
    Ejemplo
    PracticaEstilos.html

    También podría gustarte