Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Códigos

    Cargado por

    Lucía Martín
    7 vistas5 páginas
    El documento explica los conceptos básicos de HTML y CSS para crear páginas web. Describe cómo el navegador solicita y recibe páginas web de un servidor a través del protocolo HTTP. Explica las etiquetas y elementos HTML comunes como <head>, <body>, <title>, <img>, <a> y cómo se pueden usar atributos en línea y hojas de estilo internas y externas para dar formato y estilo a los elementos con CSS.

    Descripción original:

    Título original

    códigos (1)

    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
    El documento explica los conceptos básicos de HTML y CSS para crear páginas web. Describe cómo el navegador solicita y recibe páginas web de un servidor a través del protocolo HTTP. Explica las etiquetas y elementos HTML comunes como <head>, <body>, <title>, <img>, <a> y cómo se pueden usar atributos en línea y hojas de estilo internas y externas para dar formato y estilo a los elementos con CSS.

    Copyright:

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

    Códigos

    Cargado por

    Lucía Martín
    El documento explica los conceptos básicos de HTML y CSS para crear páginas web. Describe cómo el navegador solicita y recibe páginas web de un servidor a través del protocolo HTTP. Explica las etiquetas y elementos HTML comunes como <head>, <body>, <title>, <img>, <a> y cómo se pueden usar atributos en línea y hojas de estilo internas y externas para dar formato y estilo a los elementos con CSS.

    Copyright:

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

    Teoría profe

    Cuando vemos una imagen en internet porque la estamos viendo porque está en un servidor.
    Nuestro ordenador y el servidor, que hay en medio.
    Necesitamos tener un navegador.
    Nuestro ordenador lo que hace es mandar una petición al servidor.
    Cliente, vamos a encontrar archivos de información adicional, las cookies

    Hiper Text Trade Protocol.


    Que es: Es el protocolo de transferencia de HiperText que articula los intercambios de información entre los
    navegadores y servidores web.
    Lenguaje de marcas o etiquetas, es una forma de codificar un documento que, junto con el texto, incorpora
    etiquetas o marcas que contienen información adicional acerca de la estructura del texto o su presentación.

    Head (cabecera)
    Se abre una etiqueta poniendo <Head>
    Se cierra una etiqueta poniendo </Head>

    Funciones Lenguaje de tags


    - Definir elementos
    - Establecer los estilos
    - Estructura contenidos

    HTML
    Hiper Text Mark Language
    Se basa en texto y etiquetas.

    Series típicas de HTML, Ejemplos.


    <TITLE> </TITLE>
    Nombre del Software: Visual Studio Code

    Los documentos que hagamos tienen que empezar con esta etiqueta, cuando abramos siempre un archivo
    HTML: <!DOCTYPE>
    Pasos: Archivo nuevo / seleccionar idioma / buscar HTML
    <!DOCTYPE> es para decirle al ordenador que estamos trabajando con html 5
    <HEAD> Titulo de pagina </HEAD>
    <body> cuerpo de la página </body>
    <br> bajo un renglón entre HEAD Y BODY
    Si quieres que tenga tilde tienes que poner <BODY> m&aacute;s </body>
    <!DOTYPE html>

    H1 para que salga la cabecera, cuanto más alto el número más chica la letra, por ejemplo H1 la más grande,
    H5 Chiquitita

    <TITLE> lo que quieras poner </TITLE>, es el nombre de la pestaña de internet, y le damos enter y
    cerramos html

    Para poner un enlace <A HREF=”https://www.google. com”> y para cerrar </A>

    3 Formas definir estilos


    - Aplicando atributos, se nombra: Inline <P Style=”color:red”; font-size:150%;> lo que quieras poner
    y se cierra poniendo </P>
    Un atributo de color seria: color:red
    Un párrafo dentro de body la etiqueta seria <P> y se cierra <P/>
    - Internal
    1. <HEAD>
    2. abrimos otra etiqueta que se llame <STYLE>
    3. .Center{
    4. Color:red;
    5. text-align:left;
    6. }
    7. </Style>
    Center es de centrado
    <P class=”center”> escribimos lo que queramos y cerramos </P>
    <P> debe de ir en el body
    <h1> debe ir en head

    CSS hablamos de la hoja que contiene todos los estilos.


    CSS significa Cascading Style Sheet
    Los elementos y la información lo tenemos en el Index

    - External
    Lo mismo que está en el método dos
    <!DOCTYPE html>
    <HEAD>
    <link ref=”stylesheet” href=”ejemplo.css”> (que es la etiqueta clave )
    el nombre del archivo ejemplo.css
    Métodos

    ● Atributos Inline

    Fuente
    P Style=”color:red; text-align:center; font-family:Arial, Helvetica, sans-serif;”>
    P Style=”color:red; text-align:center; font-family: y escogemos la tipografía que queramos

    Saliendo de los atributos, si queremos poner por ejemplo bold a una tipografía tenemos que poner al
    principio <b> delante de p, y cuando cerramos p , detrás del todo </b> . Si queremos hacerlo con Itali lo
    mismo pero con la i: <i> y cerramos </i>

    Márgenes
    <P Style=”color:red; text-align:lef;t font- family: Arial, Helvetica, sans-serif; font-size:300%; margin-left:120px

    Enmarca en un pequeño marco el texto


    <P Style=”color:red; text-align:left; font- family: Arial, Helvetica, sans-serif; font-size:300%;border 1tx red;

    Para que la Web tenga fondo


    Se hace en Body
    Color de fondo
    <Body Style=”background-color:red;”>

    Redimensiona una imagen, el ancho y el alto


    <img src=”xxx.jpg” ALT=“Ejemplo”> Donde pone xxx ponemos el nombre de la foto
    <img src=”xxx.jpg” ALT=“Ejemplo” width=”500px”> esto es el ancho
    <img src=”xxx.jpg” ALT=“Ejemplo” width=”500px” height=”500px”> esto es el alto

    Una imagen se pone de fondo de la siguiente manera

    Un método es el siguiente
    <body background=”foto.jpg”> En lo subrayado ponemos el nombre de la foto, tenemos que tener la foto y
    el archivo en la misma carpeta

    Otro método es el siguiente


    1. <HEAD>
    2. <Style>
    3. body {
    4. background-image:url(foto.jpg)
    5. }
    6. </Style>
    background-image:url(foto.jpg) Donde pone foto ponemos el nombre de la imagen

    ● Internal

    1. <DOCTYPE html> es para decirle al ordenador que estamos trabajando con html 5
    2. <HEAD>
    3. <STYLE>
    4. .charo{
    el punto es para cuando nosotros creamos el estilo
    5. color:red;
    6. tex-align;right;
    7. margin:100px;
    8. font-size:200%;
    9. }
    10. </STYLE>
    11. </HEAD>
    12. <Body>
    13. <P class=”charo”> escribimos lo que queramos aqui y en la siguiente cerramos
    14. </P>
    15. </Body>
    16. </html>

    Otro método
    alt es por si hay un error en la imagen, es el texto que sale al lado del icono

    1. <DOCTYPE html>
    2. <HEAD>
    3. <STYLE>
    4. .charo{
    5. width:500px;
    6. height:500px;
    7. }
    8. </STYLE>
    9. </HEAD>
    10. <BODY>
    11. <img src=”xxx.jpg” alt=”ejemplo” class=”charo”>
    12. </BODY>
    13. </html>
    Etiqueta para centrar dos imágenes en la página
    <DIV style=”text-align:center;”>
    La etiqueta de las fotos
    </DIV>

    Trabajo
    Montar una pequeña web
    Hacerlo dos veces una con cada método, Inline e Internal
    1 web
    atributos en cada elemento
    2 web
    definir estilos + class=”xxx”

    También podría gustarte