Apuntes Finales Del Curso de Desarrollo de Web Con HTLML5

Apuntes finales del curso de desarrollo de web con HTLML5
Distintas áreas de desarrollo: Front End Developer, Back End Developer, Full Stack Developer
Front End Developer: Es la parte visual de la aplicación (Se ejecuta y se interactúa por el lado
del usuario). Normalmente se utilizan lenguajes como HTML, CSS, JavaScript… además de
freamworks o librerías como React, Angular… y APIs. Un front end se encarga de insertar los
botones, formularos, imágenes, la información a representar… También se encarga de
optimizar el sitio, mejorar el código CSS para que sea ligero, escribir CSS que se adapte a
Móvil/PC/Tablet y que sea compatible con todos los navegadores.
Back End Developer: Es la parte de ‘’detrás’’ de la aplicación, por lo tanto, la que se ejecuta
por el lado del servidor (gestión y almacenamiento de datos, lógica de negocio, seguridad e
integración con otros sistemas). Para ello se utilizan lenguajes cono Python, PHP… y
frameworks y librerías como Laravel, Django…
Full Stack Developer: Dominar tanto el Front End como el Back End.
¿Qué es HTML? (Hypertext Markup Language)
Es un lenguaje, pero no un lenguaje de programación, es un lenguaje que nos permite crear la

estructura y contenido de una página web.
Estructura del HTML
- El primer archivo que creamos (la pag. principal) se llamará index.html

- Siempre abrimos con <html> y cerramos con </html>.
- Dentro se aplican dos etiquetas, <head> </head> y <body> </body>, la etiqueta head
conforma la parte que el usuario no ve, body lo la parte con la que se interactúa.
- Si al crear un archivo.html escribimos html=5 + tab generamos el código
anteriormente descrito, con unas etiquetas y valores extras que nos sirven para
designar el idioma, la compatibilidad con navegadores y con tamaños de pantalla.
- Dentro del apartado <body> debemos integrar un Título con la etiqueta <h1> </h1>
- Los subtítulos se irán asignando a las etiquetas <h2> </h2>, <h3> </h3>, <h4> </h4>,
<h5> </h5>, <h6> </h6> según por orden de importancia, podemos ver que esto altera
el tamaño de la fuente, pero esto luego se puede modificar con CSS.
- El texto genérico se asigna con la etiqueta <p> </p> (párrafo).
- Debemos agrupar todo el código html en diferentes etiquetas. Se usan las siguientes:
< header>< /header> Para el encabezado.
<footer></footer> Para el pie de página.
<nav></nav> Para el menú de navegación (se explica detalladamente más abajo).
<main></main> Contenido principal de la página.
<section> </section> Difrentes secciones.
<article> </article> Sección de entradas o noticas.
<aside> </aside> Las barras laterales con info. complementaria.
<div> </div> Lo que no podamos agrupar en ninguna de las etiquetas anteriores.
- Hay diferentes etiquetas que podemos utilizar para incluir en nuestro html:
<nav> </nav> Con esto creamos una barra de navegación, dentro de la etiqueta nav
añadimos otras etiquetas como <a> </a>, la cual utilizamos para incluir un enlace a una
pag. externa o a un archivo html interno, hay que incluir un atributo href= y un valor que
será el enlace a seguir ”enlace”, en conjunto lo vemos como:
<nav>
<a href="index.html">Inicio</a>
<a href="sobremi.html">Sobre Mí</a>
</nav>
Inserción de imágenes al estilo icono: https://tablericons.com/, desde está pagina

podemos localizar muchos estilos de icono, elegir el tamaño, color y transparencia del
icono e insertarlo en el código, este se inserta con la etiqueta <svg> </svg> que sirve para
escribir gráficos vectoriales, los cuales no modifican la calidad al cambiar de tamaño.
<img> Esta es una etiqueta para insertar imágenes, va seguida del atributo <scr> y del
valor “enlace”, scr es el atributo que indica la ruta, el valor será la ruta en sí. Normalmente
si tenemos imágenes guardadas para el archivo crearemos una carpeta con el nombre
img, y en el valor habrá que indicar esa ruta, podemos añadir más etiquetas como
width=”1000” height=”1000”, con esto modificamos el ancho y el alto, por ejemplo:
<img src="img/hero.jpg" width="1000" height="1000">
<form> </form> Esta etiqueta sirve para crear formularios, en este caso indicamos que
dentro de esa etiqueta se generará un formulario según las etiquetas, atributos y
valores que vayamos asignando. Con la etiqueta <fieldshet> </fieldshet> dentro de
form asignamos a este formulario un borde y un título, el título se asignará dentro del
fieldshet con la etiqueta <legend> </legend>. Dentro del fieldsheet habrá que añadir
la etiqueta <label> </label>, la cual asigna la sección del formulario que viene del
servidor y la etiqueta <input> </input> la utilizamos para la parte con la que interactúa
el cliente, este se complementa con el atributo type= ya que hay varios valores que se
pueden dar. El valor por defecto es “text” el cual nos genera un espacio para escribir,
pero hay otros tipos como =”checkbox” que crea un cuadrado el cual podemos dejar
marcado o desmarcado con un tick, tenemos normalmente para dispositivos móviles o
tablets el valor es ”tel” que hace que cuando el cliente seleccione la sección para
escribir aparezca directamente el teclado numérico. Hay otro que es ”email” que se
utiliza para cuando tiene que indicar un email, simplemente aparece el teclado normal
de texto pero con la @ más accesible. Hay otro que es ”number” donde en móvil
aparece el teclado numérico y en teclado solo dejará escribir números. Hay otro
atributo que podemos añadir, esto es para que, por la parte del usuario, dentro del
espacio en el formulario donde puede escribir, aparezca un pequeño texto que se
borrará nada más empiece a escribir, esto se hace con el atributo placeholder= y el
valor que tú quieras dar. Por último, cerramos con un type= y valor “submit” que es el
valor que cierra el form con el botón de enviar. Añadimos a este último código el
atributo value= y el valor “Enviar” El atributo submit indica que envía el formulario, el
atributo value es para indicar lo que va a poner en el botón de enviar, en este caso
enviar. Por ejemplo:
1- <form>
2- <fieldset>
3- <legend>Rellena el formulario</legend>
4- <div>
5- <label>Nombre</label>
6- <input type="text" placeholder="nombre">
7- </div>
8-
9- <div>
10- <label>Teléfono</label>
11- <input type="tel" placeholder="télefono">
12- </div>
13-
14- <div>
15- <input type="submit" value="Enviar">
16- </div>
17- </fieldset>
18- </form>
<link> Se agrega en el apartado head para enlazar el archivo html con el archivo CSS, hay
que cumplimentarlo con el atributo href= con el cual damos paso al enlace, y ponemos el
valor “ubicación del archivo css”, para terminar, agregamos un segundo atributo que es
rel= el cual explica que tipo de relación tiene entre el archivo html y el que intentamos
enlazar, pueden estar los siguientes:
stylesheet: indica que el enlace está relacionado con una hoja de estilo CSS.
icon: indica que el enlace está relacionado con un icono que se utilizará en la pestaña del
navegador o en la pantalla de inicio del dispositivo.
preconnect: indica que el enlace está relacionado con un origen que se preconectará para
mejorar la velocidad de la carga de la página.
alternate: indica que el enlace apunta a una versión alternativa del documento actual (por
ejemplo, una versión en otro idioma).
Preload: Recarga de forma anticipada un recurso como una hoja CSS o una fuente web,
también hay que indicar el tipo de archivo que se enlaza con la etiqueta as= y un valor
“style” para CSS, “video” para videos, “audio” para audios, etc.
Ejemplo:
<link rel="preload" href="CSS/style.css" as="style">

<link href="CSS/style.css" rel="stylesheet">
<span> </span> Agrega una etiqueta que no tiene una función como tal, un ejemplo
donde se utilizaría esta etiqueta sería en el caso de querer hacer un título con dos tamaños
diferentes, aquí introduciríamos: <h1> Título grande <span>Titulo pequeño </span></h1>
Atributos: Hay varios tipos de atributos que podemos utilizar en nuestro código HTML:
class= seguido del valor que queramos poner “valordeseado”, asignamos una clase a
cualquier etiqueta que queramos, de esta forma cuando la queramos interactuar con
varias etiquetas con la misma clase desde css será más fácil. Podemos asignar más de
una clase simplemente separando los valores con un espacio entre medio. Ej:
class:”nombre hombre”
Id= seguido del valor que queramos poner “valordeseado”, parecido a class, pero para
asignar elementos únicos, a diferencia de class solamente puede haber una id con el
mismo nombre en el documento html que estemos gestionando.

Apuntes Finales Del Curso de Desarrollo de Web Con HTLML5

Cargado por

Copyright:

Formatos disponibles

Apuntes Finales Del Curso de Desarrollo de Web Con HTLML5

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Apuntes Finales Del Curso de Desarrollo de Web Con HTLML5

Cargado por

Copyright:

Formatos disponibles

Apuntes finales del curso de desarrollo de web con HTLML5

¿Qué es HTML? (Hypertext Markup Language)

Es un lenguaje, pero no un lenguaje de programación, es un lenguaje que nos permite crear la

Estructura del HTML

- El primer archivo que creamos (la pag. principal) se llamará index.html

<footer></footer> Para el pie de página.

<nav></nav> Para el menú de navegación (se explica detalladamente más abajo).

<main></main> Contenido principal de la página.

<section> </section> Difrentes secciones.

<article> </article> Sección de entradas o noticas.

<aside> </aside> Las barras laterales con info. complementaria.

<div> </div> Lo que no podamos agrupar en ninguna de las etiquetas anteriores.

Inserción de imágenes al estilo icono: https://tablericons.com/, desde está pagina

<img src="img/hero.jpg" width="1000" height="1000">

<link rel="preload" href="CSS/style.css" as="style">

También podría gustarte