Curso Diseño Web HTML5, CSS

¿Cómo funciona una página web?

Una página web tiene dos zonas importantes: frontend y el bakkend. El fronted es todo lo que vemos cuando visitamos una página web. El bakkend es todo lo que está guardado en el servidor.

Las personas que navegamos en una página web tenemos el rol del «cliente» y el equipo informático que aloja la página web se denomina «el servidor». En el servidor están los eventos, las bases de datos, los logs, todos los archivos que se van cargando mientras visitamos la página web.

El frontend es la parte visible que cuando navegamos como clientes vemos. Las bases de datos están en el bakkend. Esta parte no la vemos. Es una información reservada.

HTML, CSS y JavaScritpt son lenguajes informáticos.

HTML es un lenguaje de marcado de hipertexto, no es un lenguaje de programación, es un lenguaje de etiquetado. Nos permite estructurar las etiquetas, estructurar información. Define que es el contenido que va a tener la página. Ejemplo, la etiqueta <title> de la página web y te está diciendo que hay un contenido de inicio a fin. <title> inicio un texto </title> termina y cierra con una /

HTML sirve para decir qué cosas va a tener la página. CSS permite trabajar el aspecto visual, cómo se vera: colores, grosores, background… JavaScript nos permite hacer que ocurran cosas.

¿Qué es HTML 5? Curso Diseño Web

HTML5 separa bien la estructura entre el CSS y el HTML. Te permite no tener que usar Flash, un código que hacía las páginas más lentas. Google no funciona bien con el seo con flash.

Cuando se inicia la programación de una página web se le indica a Google que estamos trabajando con HTML5. No debemos usar etiquetas antiguas con etiquetas nuevas.

Etiquetas HTML5

Las estructura de HTML5 es diferente. Importa mucho cómo esté estructura la página web. Ahora con HTML5, cada sección tiene un título diferente como vemos. En vez denominar como con el HTML4 con <div id=»header»> y ahora s directamente <header> y con tanto <div> que no permitía diferenciar las secciones de la pagina.

Resultado de imagen de html4 html5

Antes se cometían muchos errores con tanto etiquetado <div> y Google le costaba mucho diferenciar las secciones una página web. Ahora con HTML5 está todo perfectamente diferenciado. No da lugar a error, si se hace muy bien.

Programas de Código Programación

Sublime Text, Asana,

Etiqueta de Enlaces HTML

La propiedad de una etiqueta de enlaces es la siguiente <a hrefs=»»> </a>

Si quiere añadir un valor <a hrefs=»https://islassem.com»> </a>. He añadido el valor entre las «» que es https://islassem.com pero nos falta las palabras donde hacer clic.

<a hrefs=»https://islassem.com»> Curso Diseño Web </a> ¿Dónde se hace el clic? La frase que saldrá es: Curso Diseño Web y cuando hagas clic, irás al enlace: https://islassem.com

Programar un Menú con un enlace. Curso Diseño Web.

Enlace que se abre en la misma página web.

<html>

<body>

<header>

<nav>

<ul>

<li> <a href=»https://islassem.com»>SEM</a>

</li>

</ul>

</nav>

</header!

</body>

</html>

Enlace que se abre en otra pestaña del navegador.

<html>

<body>

<header>

<nav>

<ul>

<li> <a target=»_blank» href=»https://islassem.com»>SEM</a>

</li>

</ul>

</nav>

</header!

</body>

</html>

Enlace que va una zona de la página, tipo «one page»

<html>

<body>

<header>

<nav>

<ul>

<li> <a target=»_blank» href=»#hola«>Vamos a una sección de la página</a>

</li>

</ul>

</nav>

</header>

<section>

<article>

<p> Se crean secciones para que vaya el enlace la zona concreta</p>

</article>

</section>

<section id=»hola»>

<p>objetivo</p>

</section>

</body>

</html>

Enlace que van a otra página web interna

Hay que mirar la ruta del archivo hasta el que queremos ir y hay un recorrido y es la ruta que tenemos que poner:

<html>

<body>

<header>

<nav>

<ul>

<li> <a » href=»/public/fotos/hola.html«>SEM</a>

<li> <a » href=»/..public/fotos/hola.html«>SEM</a>

</li>

</ul>

</nav>

</header!

</body>

</html>

Introducción al CSS

CSS nos permite saber dar estilo. La versión actual es el CSS3. Se recomienda leer el libro: «El gran libro de HTM5, CCS3 y Javascri de Juan Diego Gauchat» Editorial: Marcombo.

Los colores para la página web

Colores HTML

Tipografías Página Web

Fuentes Externas: Google Fonts

Fuentes Internas: se colocan las fuentes dentro del servidor

Fuentes que reducen los tiempos de carga, vectoriales: https://icomoon.io/

https://icomoon.io/app/#/select

https://www.flaticon.com/

Responsive Luminoso

Capta la luz según el ambiente en los móviles. Según la luz que haya, va cambiando el color ya que mide los luxes.

Contínua…

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

18 + tres =