Scribd Logo
Carica

Benvenuto in Scribd!

  • Algunos Elementos y Propiedades de HTML y CSS

    Caricato da

    Pedro Armira Luis
    10 visualizzazioni5 pagine
    Programacion basica de paginas web.

    Titolo originale

    Algunos elementos y propiedades de HTML y CSS

    Copyright

    © © All Rights Reserved

    Formati disponibili

    DOCX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Programacion basica de paginas web.

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    10 visualizzazioni5 pagine

    Algunos Elementos y Propiedades de HTML y CSS

    Caricato da

    Pedro Armira Luis
    Programacion basica de paginas web.

    Copyright:

    © All Rights Reserved
    Scarica in formato DOCX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 5

    HTML

    Estructura Básica de HTML


    Esta es la estructura básica de HTML esto no puede faltar en la pagina web.
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
    maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="">


    </head>
    <body>
    <header>

    </header>
    <main>

    </main>
    <footer>

    </footer>

    <script class="src"></script>
    </body>
    </html>

    Otras etiquetas HTML


    Section
    Permite crear secciones en una página.
    Sintaxis:
    <section>
    Aquí va el contenido.
    </section>

    Div
    Permite crear divisiones en la pagina
    Sintaxis:
    <div>
    Aquí va el contenido
    </div>

    Img
    Permite agregar una imagen a la pagina
    Sintaxis:
    <img src="Aquí va la dirección donde se encuentra la imagen" alt="">

    P
    Permite agregar un párrafo
    Sintaxis:
    <p>
    Aquí va el párrafo que queremos agregar.
    </p>

    Lorem
    Nos agrega texto alternativo automáticamente a nuestra web.
    Sintaxis
    lorem + presionar tecla tab
    CSS
    Esto es indispensable tiene que ir en todas las paginas al inicio.
    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

    Otras propiedades css


    Width
    Nos da un ancho al elemento agregado.
    Sintaxis:
    width: 100px;
    width: 100%;
    min-width: 100px;
    max-width: 200px;

    Height
    Nos da un alto al elemento agregado
    Sintaxis:
    height: 100px;
    height: 100%;
    height: 100vh;
    min-height: 100px;
    max-height: 200px;

    Background
    Agrega un color de fondo o gradiente puede ser Hexadecimal, RGB o RGBA
    Sintaxis:
    Background: #000000;
    Background: rgb(0, 0, 0);
    Background: rgba(0, 0, 0, .5);

    Para agregar gradiente


    background: linear-gradient(red, yellow);

    Background Color
    Agrega un color de fondo puede ser Hexadecimal, RGB o RGBA
    Sintaxis:
    Background-color: #000000;
    Background-color: rgb(0, 0, 0);
    Background-color: rgba(0, 0, 0, .5);

    Background Image
    Agrega una imagen de fondo.
    Sintaxis:
    background-image: url( dirección de la imagen si queres regresar a la carpeta madre utiliza ../ );

    Background Position
    Permite darle posición a la imagen de fondo.
    Sintaxis:
    background-position: center center;
    Los valores center pueden cambiar en porcentajes ejemplo: 10% 50% o también a la izquierda,
    derecha, arriba y abajo usando left, right, top, bottom.

    Background Size
    Permite cambiar el tamaño de la imagen de fondo.
    Sintaxis:
    background-size: cover;
    Display
    Permite mostrar nuestros elementos en línea, en bloque, entre otros.
    Sintaxis
    display: inline-block;
    El valor inline block se puede cambiar por estos: none, block, inline, flex, inline-flex, grid, table, cell-
    table entre otros.
    Lista de mas valores que se pueden usar. click

    Float
    Esta propiedad permite flotar nuestro elemento a la derecha o a izquierda.
    Sintaxis
    Float: left;
    Float: right;

    Potrebbero piacerti anche