Scribd Logo
Importer

Bienvenue sur Scribd !

  • TutorialHTML - CSS3

    Transféré par

    nego20
    14 vues10 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    14 vues10 pages

    TutorialHTML - CSS3

    Transféré par

    nego20

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 10

    TUTORIAL HTML CSS3

    Para crear una pgina WEB, es necesario utilizar un editor de texto. Para este tutorial utilizaremos el Bloc de Notas de Windows.

    Guardar una pgina WEB.


    1. Archivo Guardar como

    Archivo Guardar como.

    2. Se guarda como un archivo con extensin html. Es decir Nombre_Pagina.html. Vea el ejemplo de un archivo de texto en comparacin con un archivo html. Luego presionar el botn guardar. Ahora el archivo aparecer con el nombre de la pgina.

    3. Abrimos la carpeta donde guardamos el archivo y se mostrara un archivo habilitado para el explorador determinado en ese computador, en este caso es GoogleChrome. Ver la figura de abajo.

    4. Abrimos el archivo presionando doble click en l. Se vera algo asi:

    Estructura de Cdigo HTML


    1. Toda etiqueta que se abre, TIENE QUE CERRARSE. En medio de estas dos etiquetas estarn todas las etiquetas correspondientes a esa parte del cdigo.

    Etiqueta que abre

    Etiqueta que cierra

    2. Toda pgina WEB se compone por una cabeza y un cuerpo, <head> y <body> respectivamente.

    3. Dentro de las etiquetas head, escribiremos una nueva etiqueta, <title>, y dentro de ella escribiremos la palabra Autos. Luego dentro de la etiqueta body, escribiremos la etiqueta <h1> y dentro de ella la palabra Bienvenidos. Continuaremos con <h2> y <h3> y escribiremos como se muetra en la figura de abajo.

    4. Vamos al men Archivo Guardar, o presionamos la combinacin de teclas Ctrl + g.

    5. Abrimos el archivo en GoogleChrome y se ver algo as:

    <title>

    <h1> <h2>

    <h3>

    Diseo de Una Pgina:


    1. Para realizar un diseo, tenemos a nuestra disposicin las siguientes etiquetas: 1. 2. 3. 4. 5. <div> <header> <section> <aside> <footer>

    2. A todas ellas podemos asignarle un nombre, el cual servir de referencia a la hora de modificarle estilos. Para asignar un nombre debemos escribir en LA ETIQUETA QUE ABRE, la siguiente sintaxis:

    Etiqueta que abre. Etiqueta que cierra.


    3. As mismo podemos asignarle nombre a cada una de las dems etiquetas mencionadas.

    4. El diseo est estructurado en el siguiente cdigo: la etiqueta contenedor ser un fondo (por as decirlo), es decir las dems etiquetas sern como un papel que se pegara en el fondo, ya que estas estn dentro de contenedor.

    5. Ahora es el tiempo de personalizar nuestra pagina con CSS3. Esto lo hacemos creando un nuevo archivo en block de notas y guardarlo con la siguiente sintaxis: Nombre_archivo.css. Para guardar este archivo es necesario hacer una carpeta justo en la misma direccion donde esta el archivo html. Vea la figura.

    Carpeta llamada css.

    6. Dentro de css guardaremos el archivo llamado personalizacion.css. Vea la figura.

    Nombre del archivo css.

    7. Presionamos el botn guardar.

    Lenguaje CSS3 para personalizar el archivo Autos.html


    1. Para modificar nuestras etiquetas, lo haremos etiqueta por etiqueta desde div y todas las que estn adentro. Por ejemplo: div tiene un nombre que es contenedor, dijimos que contenedor sera un fondo donde estaran pegadas las dems etiquetas. As que modificaremos div con el siguiente cdigo.

    # + nombre_etiqueta { Propiedad: argumento; }


    2. Para modificar la etiqueta header, es diferente que con el div, ya que en css3, si no es una etiqueta div, tenemos que indicar qu etiqueta especfica queremos modificar. Ejemplo para header.

    Propiedad: argumento; Width: ancho. Height: alto. Background: fondo.

    3. La misma funcion se requiere para section, aside y footer.

    La sintaxis que est despus de background es el cdigo de un color. Por ejemplo: #000000 #0000ff #00ff00 #ffff00 Negro Azul Verde Amarillo

    Puedes encontrar muchas ms en el siguiente sitio: http://www.tutorialspoint.com/html5/html 5_color_names.htm

    Enlazar archivo HTML con archivo CSS3


    1.

    Para enlazar los archivos simplemente debemos colocar un link en el archivo html, indicando la carpeta de ubicacin y el nombre del archivo css3. En este caso la carpeta se llama css y el archivo se llama personalizacion.css, entonces la direccion sera: css/personalizacion.css. Vea la imagen con el link completo. Nota: el link se coloca dentro de la etiqueta head.

    carpeta_ubicacion/nombre_archivo.css

    2. Abrir nuestro archivo Autos.html en GoogleChrome, observar, analizar y discutir resultados.

    <header id=encabezado> contenedor <section id=info>

    <aside id=aparte> <footer id=pie>

    3. Para colocar la etiqueta aparte en su sitio, es decir, a la par de section, debemos agregar el siguiente cdigo a section, aside y footer.

    Alinear a la izquierda.

    Alinear a la derecha.

    4. Abrir, analizar y discutir resultados.

    Esto pasa porque son muy anchos. Esto se soluciona restando el ancho de cualquiera de los dos. Recordemos que esto se hace en la propiedad width.

    5. Al finalizar tendremos esto.

    Vous aimerez peut-être aussi