Diseño de páginas web

Comienza Ya. Es Gratis
ó regístrate con tu dirección de correo electrónico
Rocket clouds
Diseño de páginas web por Mind Map: Diseño de páginas web

1. 1. Estructura de un documento web: HTML

1.1. herramienta con estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos.

1.2. Puede venir acompañado de dos lenguajes

1.2.1. CSS

1.2.2. JavaScript

2. Etiquetas

2.1. Tienen un nombre que va entre los símbolos < y >.

2.2. Algunas etiquetas tienen contenido, para delimitarlo se usa el nombre de la etiqueta entre </ y >.

2.3. Las etiquetas sin contenido pueden llevar el símbolo / antes de >

2.4. Algunas etiquetas pueden contener a otras. Las internas debe cerrarse antes de las externas.

3. Atributos

3.1. Los atributos pueden modificar características de las etiquetas​.

3.2. Tiene un nombre que indica que propiedad modifican, y un valor entrecomillado​.

3.3. Son opcionales, pueden usarse o no.​

3.4. Se añaden en la etiqueta de apertura.

4. Estructura básica de una página web HTML

4.1. Para crear un documento HTML podemos usar cualquier editor de texto plano

4.2. Componentes básicos de la estructura HTML:

4.2.1. DOCTYPE: Indica qué tipo de archivo es.

4.2.2. <html>: Etiqueta raíz que contiene el resto de etiquetas​.

4.2.3. <head>: Primera etiqueta tras <html>. Contiene información sobre la página web. Dentro se encuentra la etiqueta <title> que indica cuál es el título.​

4.2.4. <meta charset="UTF-8" />: Indica la codificación usada​

4.2.5. <body>: Va a continuación de <head>. Incluye el cuerpo de la página web.

5. Tipos de elementos

5.1. En bloque

5.1.1. Ocupan todo el ancho del elemento que los contiene​

5.1.2. Los elementos van tras de ellos se visualizan debajo​

5.1.3. Pueden contener otros elementos de bloque

5.2. En línea

5.2.1. Ocupan sólo el ancho necesario​

5.2.2. Se sitúan uno al lado del otro hasta ocupar el ancho disponible​

5.2.3. Sólo pueden contener otros elementos en línea, texto e imágenes.

6. Etiquetas básicas

6.1. <div> Divide la página en secciones </div>​

6.2. <p> Párrafo </p>​

6.3. <span> Sirve para agrupar elementos en línea </span>​

6.4. <u> Subrayado </u>​

6.5. <em> Cursiva o énfasis </em>​

6.6. <strong> Negrita o destacado </strong>​

6.7. <sub> Subíndice </sub>​

6.8. <br> Salto de línea​

6.9. <hr> Línea de separación horizontal

7. Listas

7.1. <li> Representa cada uno de los items de la lista </li>​

7.2. <ol> Representa una lista ordenada </ol>​

7.3. <ul> Representa una lista sin orden </ul>

7.4. Listas ordenadas

7.4.1. Reversed : invierte el orden de la lista​

7.4.2. Start: establece en qué número o letra empieza la lista. Ejemplo: <ol start=“2”>​

7.4.3. Type: indica el tipo de numeral a utilizar. Ejemplo: <ol type=“a”> o <ol type=“i”>​

7.5. Listas anidadas

7.5.1. Una lista puede estar dentro de otra lista​

7.5.2. La lista interna formaría parte de un ítem​

7.5.2.1. de la lista externa

8. Encabezados

8.1. Son títulos para las diferentes secciones de una página web​

8.2. Son: <h1> <h2> <h3> <h4> <h5> <h6>​

8.3. El número indica la importancia del título (tamaño). El 1 el más importante.

9. Tablas

9.1. Son un elemento de bloque ​

9.2. Se crean con la etiqueta <table>​

9.3. Las filas se crean con la etiqueta <tr> (table row)​

9.4. Las filas contienen celdas que se crean con la etiqueta <td>​

9.5. Atributo border: se usa indicar el ancho de los bordes de la tabla

9.6. Unir celdas

9.6.1. Atributos de la etiqueta <td> para unir celdas:

9.6.1.1. colspan = "numero_de_columnas" : une varias celdas ocupando varias columnas​

9.6.1.2. rowspan = "numero_de_filas" : une varias celdas ocupando varias filas

10. Imágenes

10.1. Son un elemento en línea​

10.2. Etiqueta: <img>​

10.3. Atributos:

10.3.1. Alt: texto alternativo​

10.3.2. Src: ruta de la imagen a visualizar

11. Enlaces

11.1. Son vínculos a otras páginas​

11.2. Pueden ser:

11.2.1. Locales (dentro del sitio web)​

11.2.2. Externos (en otro sitio web)

11.3. Etiqueta <a>​

11.4. Atributos:

11.4.1. href : URL de la página de destino​

11.4.2. Target="_blank" : abre la página de destino en una nueva pestaña

12. 3. Personalización del estilo: CSS

12.1. lenguaje utilizado para definir el modo en que se presenta el código HTML de una página web​

12.2. Permite separar la estructura (HTML) de la presentación (CSS). ​

12.3. Ventajas de usar archivo CSS:​

12.3.1. Con un solo archivo CSS podemos modificar varias páginas HTML​

12.3.2. A la hacer cambios sólo se modifica en el archivo CSS (y no en todas las páginas HTML)

13. Colocación del código CSS

13.1. El código CSS se puede vincular a una estructura HTML de tres formas diferentes

13.1.1. En un atributo HTML, con el atributo style​

13.1.2. Con la etiqueta <style>​

13.1.3. En un archivo independiente

14. Selectores básicos

14.1. determinan qué elementos HTML se verán afectados por el código CSS​

14.2. Tipos de selectores:​

14.2.1. Por tipo : Etiqueta HTML. ​

14.2.2. class: (varios elementos)​

14.2.3. id: (un elemento)

14.3. Prioridad

14.3.1. 1. Id​ 2. Clase​ 3. Tipo

15. Colores

15.1. Propiedades

15.1.1. color: modifica el color de texto​

15.1.2. background-color: modifica el color de fondo

15.2. RGB

15.2.1. colores formados mezclado estos 3 indicando proporción de cada uno

16. Propiedades del texto

16.1. text-align

16.2. text-decoration

16.3. text-transform

16.4. font-size

16.5. font-family​

16.6. font-style​

16.7. font-weight​

16.8. text-shadow​

17. Tamaño

17.1. display: block. Visualizar como elemento de bloque.​

17.2. display: inline. Visualizar como elemento en línea.​

17.3. display: inline-block. Visualizar como elemento en línea pero además podemos modificar ancho y largo​

17.4. width, height, max-width, max-height, min-width y min-height

18. Bordes

18.1. border-width ​

18.2. border-style

18.3. border-color​

18.4. border

18.5. border-radius

19. Márgenes

19.1. margin: distancia con otros elementos que lo rodean​

19.2. padding: margen interno entre el elemento y su contenido​

19.3. Tanto el margin como el padding se suma al width

19.4. Márgenes individuales

19.4.1. Para modificar márgenes externos (margin) o internos (padding) podemos:

19.4.1.1. añadir -left –right –top –bottom

20. Posicionamiento

20.1. position: static -> posicionamiento por defecto​

20.2. position: relative -> Ocupa el mismo espacio que static pero nos permite desplazarlo usando top left right bottom​

20.3. position: absolute -> posición dentro del documento​

20.4. Position: sticky -> sitúa al elemento basado en el scroll​

20.5. Position: fixed -> posición dentro de la ventana del navegador

21. Imagen de fondo

21.1. propiedades:

21.1.1. background-image : url ('imagen.png');​

21.1.2. background-image : url ('../imagen.png'); ​

21.1.3. background-position: left top; /* posición horizontal y vertical */​

21.1.4. background-position: center center;​

21.1.5. background-position: right bottom;​

21.1.6. background-repeat: repeat;​

21.1.7. background-repeat: no-repeat;​

21.1.8. background-repeat: repeat-x;​

21.1.9. background-repeat

22. 3. Publicación de páginas web