Scribd
Cargar
14 vistas

Módulo 2-1

Cargado por

moratpiris
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
14 vistas

Módulo 2-1

Cargado por

moratpiris
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 30

Sistemas de

Programación-
Desarrollador Web
Full Stack

Rafael Cordero
Proyecto Isla IV – N.º. 68
TABLA DE CONTENIDOS
O1 Intro Programación
02 HTML y CSS
Fundamentos de Fundamentos de
programación. HTML y CSS

Web
03 Development y yo 04 Front End
Fundamentos Básicos
Framework
de JavaScript Iniciación al uso de
Framework

05 Back End 06 Back End Framework


BBDD Consolidación
Almacenaje de datos JavaScript
en aplicaciones Web
TABLA DE CONTENIDOS
07 BBDD MongoDb 08 Proyecto Final

Sistemas de BBDD Proyecto final


no relacional

FT Formación
Transversal
FC Formación
Complementaria
Formación en Formación en
igualdad empleo y
emprendimiento.
09 Prácticas
Prácticas en
empresas.
Módulo 2: Fundamentos HTML y CSS
Descripción del Módulo:

1. Objetivo:

Maquetar una plataforma web con HTML5 y CSS3 utilizando


las etiquetas semánticas correctas y la distribución de
componentes adecuada para su correcta visualización en
dispositivos de sobremesa, tabletas y móviles.
2. Duración:

50 horas
HTML y CSS!
Comenzamos…
01
HTML
Sintaxis HTML Básica
1.1. Introducción
¿Qué es el HTML?
HTML o Hypertext Markup Language.
La traducción que le doy al español es "Lenguaje
Etiquetado de Hipertexto". Probablemente no es la
traducción exacta pero es muy significativa. Vayamos
desentrañando cada uno de estos conceptos.
¿Qué es el Hipertexto (Hypertext)?
En la navegación por Internet necesitamos saber
donde queremos ir, que queremos ver, que
queremos descargar…
El hipertexto es una estructura no secuencial que
permite crear, agregar, enlazar y compartir
información de diversas fuentes por medio de
enlaces asociativos y redes sociales. El hipertexto
es texto que contiene enlaces a otros textos
Enlace: https://www.youtube.com/watch?v=e_lQi-_QRgg
—Algunos Conceptos
1.1. Introducción

Algunos videos de apoyo para conocimiento general sobre la tecnología que


vamos a utilizar
- ¿Qué es la WEB y como funciona?
- ¿Qué es el paradigma Cliente Servidor?
- ¿Qué son las DNS?
- ¿Qué son los protocolos de Internet?
- Protocolo de Internet TCP/IP - Ejemplo
- Protocolo HTTP
- ¿Cómo funcionan los navegadores WEB?
- ¿Qué son los estándares web?
- ¿Qué son las plataformas web y los modelos
de Servidores WEB

— Videos Generales
1.1. Introducción

Lenguaje HTML
En si HTML no es un lenguaje de programación; es solo un Lenguaje Etiquetado de Hipertexto.
Se pueden encontrar algunas analogías como por ejemplo decir que las etiquetas son palabras
reservadas, etc. Es mejor tomar a HTML como un formato que como un lenguaje de programación...
evitaremos pasar algunas vergüenzas

Nota: HTML no es el único lenguaje, o formato, que maneja etiquetas, por ejemplo, también existe el
XML. (en principio, no lo veremos en el curso)

Uso de Herramientas
Hay multitud de herramientas para el diseño y concepción de páginas web.
La finalidad de las herramientas es hacernos más fácil la creación de páginas
web. Nosotros vamos a empezar por comprender el lenguaje.
Vamos a arrancar utilizando un editor de Texto para familiarizarnos con la sintaxis
de HTML.
Usaremos Sublime Text. Enlace de descarga

—Algunos Conceptos
1.1. Introducción

Características básicas en el uso de HTML


- Un archivo HTML puede ser leído, como ya lo dijimos, en un editor de texto.
- Cuando creamos un archivo HTML debemos de guardar el archivo con las extensiones .htm o .html.
- HTML no diferencia entre letras mayúsculas y minúsculas (Vamos a escribir las etiquetas principales
en mayúsculas para que nos sea más fácil verlas)
- Siempre debemos guardar una estructura el nuestro código (Lo veremos más adelante).

Etiquetas
El lenguaje HTML se compone de una estructura de etiquetas, que deberemos
utilizar de forma correcta.
Sintaxis de Etiquetas
Es muy fácil:
<ETIQUETA>
La Mayoría requiere que las “cerremos”:
</ETIQUETA>
Nota: Dentro de las etiquetas podemos incorporar atributos. Ejemplo:
<ETIQUETA Atributo1 = “Valor”>

—Algunos Conceptos
1.2. HTML

Etiquetas básicas estructura HTML


<HTML>
Apertura y cierre del código HTML. Debe ir al principio y al final de la página para
definir el código HTML. Sintaxis:
<HTML> Otras etiquetas </HTML>
<HEAD> y <TITLE>
En la etiqueta <HEAD> se encuentra toda aquella información no visible sobre la
página; cabe aclarar que el título de la hoja se encuentra dentro esta etiqueta y es
visible en la barra de título del navegador. El titulo de la página se especifica con
la etiqueta <TITLE>. Sintaxis:
<HEAD>
<TITLE>Titulo de mi página </TITLE>
Información no visible y título de la página
</HEAD>
— Sintaxis HTML
1.2. HTML

Etiquetas básicas estructura HTML


<BODY>
En ella se encuentra toda aquella información visible en la pantalla del navegador.
Se encuentran dentro de esta etiqueta las imágenes, texto, sonidos, vínculos...
Sintaxis:
<BODY>
Etiquetas del cuerpo de la página
</BODY>

<FOOTER>
Representa un pie de página para el contenido de sección más cercano o el
elemento raíz de sección. Sintaxis:
<FOOTER>
Etiquetas/Texto pie de página
</FOOTER> — Sintaxis HTML
1.2. HTML

Etiquetas básicas estructura HTML


<META>
Permite incrustar en la página web información sobre la misma fuera de
contenido.
Su significado hace relación a lo que se denomina metadatos, es decir,
información sobre los propios datos.
Sintaxis:
<META>
Información de los metadatos
</META>

Atributos de Meta:
https://developer.mozilla.org/es/docs/Web/HTML/Element/meta

— Sintaxis HTML
1.2. HTML

Ejemplo de página web básica [hola mundo]:


<!DOCTYPE html>
<html lang=“Es">
<head>
<meta charset="UTF-8">
<title>Mi primera página</title>
</head>
<body>
<p><b>Hola Mundo</b></p>
<p>Estás en la página <b>Curso de HTML</b>.</p>
<p>Aquí aprenderás nociones de diseño web.</p>
</body>
</html>

Video de apoyo:
https://www.youtube.com/watch?v=1Uk1WWPtTBw&list=PLa7ZoeMMG4onTwZOz2YjCdUTdWPek8w
dT&index=12

— Sintaxis HTML
1.2. HTML

Etiquetas básicas estructura HTML


<br> Etiqueta de Salto de línea. Se usa para insertar un espacio entre las línea del
código de nuestra página (No lleva etiqueta de cierre). Sintaxis:
<br> [inserta un salto de línea]
<br> [inserta un salto de línea]
<p> Crea un párrafo con el texto contenido dentro de ella. Sintaxis:
<P>Párrafo 1 </P>
Nota: Su etiqueta de cierre puede omitirse.
Atributos de <p>
Si indicamos dentro de la etiqueta la alineación que deseemos darle al párrafo,
podemos alinear el texto de la siguiente manera:
<P ALIGN=“LEFT”> Párrafo con alineación izquierda </P>
<P ALIGN=“CENTER”> Párrafo con alineación centrada </P>
<P ALIGN=“RIGHT”> Párrafo con alineación derecha </P>
<P ALIGN=“JUSTIFY”> Párrafo alineación justificado </P> — Sintaxis HTML
1.2. HTML

Etiquetas básicas estructura HTML. Encabezados:


Los encabezados que podremos utilizar están definidos en 6 niveles de
encabezamiento; La etiqueta <Hn> representa un encabezado de nivel n, donde n
puede ser un valor entre 1 y 6, siendo 1 el nivel mas alto de encabezamiento y 6 el
nivel mas bajo de encabezamiento.
<Hn> Define el tipo de encabezado a utilizar en nuestra web. Sintaxis:
<H1> Encabezado de tipo 1 </H1>

Tipos de Encabezado <Hn>


<H1>Encabezamiento de nivel 1</H1>
<H2>Encabezamiento de nivel 2</H2> Ejemplo 2: Insertar encabezados de prueba en
<H3>Encabezamiento de nivel 3</H3> página web.
<H4>Encabezamiento de nivel 4</H4>
<H5>Encabezamiento de nivel 5</H5>
<H6>Encabezamiento de nivel 6</H6> — Sintaxis HTML
1.2. HTML

Etiquetas básicas estructura HTML. Texto “preformateado”:


<PRE> Sirve para incrustar en la web texto tal cual queramos que el navegador lo
interprete. Es decir, el navegador respetará los espacios y saltos de línea.
Sintaxis:
<PRE>Aristóteles reconoce, en su tratado "Las partes de los animales", que entre
todos los animales, el hombre es el que posee el cerebro de mayor tamaño, en proporción al
cuerpo y su función es "nada menos que la preservación del cuerpo entero". Sin embargo,
Aristóteles pensaba que esta importante función era llevada a cabo por el cerebro sólo
porque este órgano era capaz de compensar un exceso de calor del corazón, verdadero
asiento del alma y de los sentidos, de tal manera que el cerebro funcionaría como
contrapeso del corazón, moderando su actividad. </PRE>

Ejemplo 2: Insertar un texto preformateado en el


ejemplo.

— Sintaxis HTML
1.2. HTML

Ejercicio 1 HTML
Con las etiquetas ya creadas. Crea una web básica en la que expongas tus conocimientos a modo de
Curriculum.

Por ejemplo:
- En un párrafo indica tus datos personales
- En otro párrafo y con encabezado diferente, indica tu formación académica y tus cursos.
- En otro párrafo puedes indicar tu experiencia laboral
- Sigue con otro párrafo en el que indiques tus gustos y aficiones en el que ese párrafo vaya con un
texto preformateado.

Nota: No olvides dejar uno o varios saltos de líneas entre tus párrafos.

IMPORTANTE: Guardaremos todos los Ejercicios


en una carpeta Indicando el nombre del ejercicio.

— Sintaxis HTML
1.2. HTML

Etiquetas básicas estructura HTML.


<DIV> Define una división o grupo, es decir, permite agrupar varios elementos de bloque
(párrafos, encabezados, listas, tablas, divisiones, etc). En principio, los navegadores no
muestran nada especial cuando se crea una división, salvo que se dé formato a la división
con la hoja de estilo. Sintaxis:
<DIV>
(Grupo de etiquetas)
</DIV>
Ejemplo:
<div>
<p>Este párrafo 1 pertenece al grupo o división 1.</p>
<p>Este párrafo 2 pertenece al grupo o división 1.</ p>
</div>
Ejemplo 3: Insertar encabezados y
<div>
grupo de prueba en página web de
<p> Este párrafo 3 pertenece al grupo o división 2.</p>
ejemplo.
<p> Este párrafo 4 pertenece al grupo o división 2.</p>
</div> — Sintaxis HTML
1.2. HTML

Etiquetas básicas estructura HTML.


Si deseamos escribir comentarios no visibles, usaremos <!--...-->
Esta estructura nos ayudará a poner notas y comentarios que nos ayudarán a mantener el
control de nuestro código. Sintaxis:
<!–
Comentario de código
-->
Ejemplo:
<BODY>
<!- Comentario invisible en la web -->
</BODY>

Incluye comentarios en tu ejemplo


número 2.

— Sintaxis HTML
1.2. HTML

Etiqueta <BODY>. Atributos y uso de la misma


Los atributos de una etiqueta definen como va a afectar a lo que se encuentre dentro de ella.
Existen varios atributos y estos se incluyen de la siguiente manera dentro de una etiqueta. Ejemplos con
etiqueta body. Sintaxis y Explicación:

<BODY BGCOLOR = “#RRVVAA”> Inserta un color en el fondo del cuerpo de la página.


<BODY TEXT = “#RRVVAA”> Especifica el color del texto en toda la página.
<BODY LINK=“#RRVVAA"> Especifica el color de los vínculos no visitados en todo el documento
<BODY VLINK=“#RRVVAA"> Especifica el color de los vínculos visitados en todo el documento.
<BODY ALINK=“#RRVVAA"> Especifica el color de los vínculos cuando se hace clic sobre ellos.

NOTA COLORES: En muchas etiquetas es necesario utilizar códigos hexagesimales para definir los
colores a utilizar. Un color se define como la cantidad de rojo, verde y azul.
La forma de escribir el código de un color dentro de una etiqueta es la siguiente:
#RRVVAA.
En donde RR representa al color rojo en código hexadecimal, VV representa al color verde
en código hexadecimal y AA representa al color azul en código hexadecimal.
— Sintaxis HTML
1.2. HTML

Tabla de colores:
Color Código Ejemplo

Rojo FF0000

Azul 0000FF

Verde 00FF00

Blanco FFFFFF

Negro 000000

Amarillo FFFF00

Gris C0C0C0

Violeta 4F2F4F

— Sintaxis HTML
1.2. HTML

Caracteres especiales
Algunos caracteres no pueden ser escritos directamente en HTML, para el uso de caracteres especiales
algunas veces tenemos que usar su código:
Carácter Se escribe Carácter Se escribe
Espacio &nbsp; ± &plusmn;
¡ &iexcl; ´ &acute;
Nota: Con la evolución
¶ &para; ¨ &uml;
del lenguaje HTML se
© &copy; » &raquo;
han incluido estos
« &laquo; ® &reg;
caracteres especiales y
¿ &iquest; á &aacute;
ya a penas hay que usar
é &eacute; í &iacute;
códigos.
ó &oacute; ú &uacute;
ü &uuml; < &lt;
> &gt; ñ &ntilde;
" &quot; & &amp;
— Sintaxis HTML
1.3. Mas HTML

Etiqueta <Font>
Permite definir la fuente, color y tamaño que queramos usar. Podemos usarla de la siguiente manera:

<P><FONT FACE="ARIAL", COURIER, HELVETICA" COLOR="#FF00CC" SIZE="3">Hola Mundo</FONT></P>

Explicación de los atributos:

FACE  Permite establecer la fuente a utilizar.


Nota: Es posible utilizar hasta tres nombres de fuentes separadas por comas. ¿Porqué?  en el momento de cargar el
documento en el navegador, este busca la primera fuente dentro del sistema; si no la encuentra continua con la segunda,
etc. Debemos de tener cuidado de solo utilizar fuentes "estándar", que puedan ser encontradas en cualquier sistema. Las
mas comunes son: Arial, Curier, Helvetica, Sans-Serif, Time New Roman, Times, Verdana

SIZE  Indica el tamaño del texto. Sus valores son:


- Tamaños fijos: 1, 2, 3, 4, 5, 6, 7
- Tamaños relativos:
- Incremento Positivo: +1, +2, +3, +4, +5, +6, +7
- Incrementos Negativos: -1, -2, -3, -4, -5, -6, -7

COLOR  Como ya vimos, este atributo se refiere al color del texto.

— Sintaxis HTML
1.3. Mas HTML

Etiquetas de Texto

<b> Transforma el texto en negrita. Sintaxis: <b> Texto en negrita </b>


<i> Transforma el texto en cursiva (italic). Sintaxis: <i> Texto en cursiva </i>
<u> Coloca la línea de subrayado en un texto el texto en negrita. Sintaxis: <u> Texto en subrayado </u>
<s> Tacha el texto. Sintaxis: <s> Texto tachado</s>

<sup> Eleva el texto de forma que parezca un subíndice. Sintaxis: <sup> Super índice </sup>
<sub> Cambia el texto bajándolo a la parte inferior de la línea en forma de subíndice. Sintaxis: <sub>
Sub índice </sub>

Nota: Estas etiquetas se puede incluir dentro de un párrafo, un encabezado…

— Sintaxis HTML
1.3. Mas HTML

Etiquetas de imágenes

<img> Esta etiqueta nos permite incrustar imágenes en nuestra página. Sintaxis:
<img src=“ruta_archivo.jpg">
Nota: Esta etiqueta no lleva el cierre típico </img> se cierra al final de la propia declaración.

Ejemplo: <img src=“logo.jpg”>

Atributos de imágenes:
Atributo alt: Permite incluir una breve descripción de la imagen. Ejemplo:
<img src=“logoEmpresa.png" alt=“Logo de la empresa">
Además, sirve para el posicionamiento de la página en buscadores, ya que permite extraer palabras
clave.
También permite a personas con discapacidad, que ciertas herramientas del navegador puedan “leer la
descripción”
Si el navegador no puede cargar la imagen, se mostrará la descripción de la misma.

— Sintaxis HTML
1.3. Mas HTML

Etiquetas de imágenes

<img> Esta etiqueta nos permite incrustar imágenes en nuestra página.


Atributos de imágenes:

height y width (altura y anchura)


Definen la altura y anchura respectivamente de la imagen en píxeles. Debido al uso de “Páginas
Responsive” se suelen definir en la hoja de estilos CSS para que la imagen se adapte a los distintos
tamaños de pantalla donde se va a visualizar la página web. Ejemplo:

<img src="mi-imagen.gif" width="200" height="300">

Nota: actualmente no tiene tanta importancia, puesto que ahora contamos con conexiones más rápidas,
el hecho de explicitar en nuestro código las dimensiones de nuestras imágenes ayuda al navegador a
confeccionar la página de la forma que nosotros deseamos antes incluso de que las imágenes hayan sido
descargadas.
— Sintaxis HTML
1.3. Mas HTML

Etiquetas de imágenes

<img> Esta etiqueta nos permite incrustar imágenes en nuestra página.


Atributos de imágenes:

Atributos vspace y hspace


Indicar el espacio libre, en pixeles, que tiene que colocarse entre la imagen y los otros elementos que la
rodean, como texto, otras imágenes, etc. Ejemplo:

<img src="mi-imagen.gif" vspace = "10" hspace ="50">

Nota: Estos atributos forman parte también de la responsabilidad de las CSS, así que no sería
recomendable usarlos ahora. Los veremos más adelante.

— Sintaxis HTML
1.3. Mas HTML

Etiquetas de imágenes

<img> Esta etiqueta nos permite incrustar imágenes en nuestra página.


Atributos de imágenes:

Atributo border
Muestra un borde alrededor de la imagen, en píxeles. Ejemplo:

<img src="mi-imagen.gif" border=“4">

Nota: haz una prueba para comprobar el borde de una imagen.

— Sintaxis HTML
1.3. Más HTML

Ejercicio 2 HTML
Crea una web básica en la que expongas tus conocimientos a modo de Presentación de una empresa.

Por ejemplo:
- Coloca el logo de la empresa
- En otro párrafo y con encabezado diferente, indica la actividad de la empresa.
- En otro párrafo indica los posibles servicios o actividades que pueda tener la empresa
- Sigue con otro párrafo en el que indiques datos de contacto, email…

Nota: No olvides dejar uno o varios saltos de líneas entre tus párrafos.

IMPORTANTE: Guardaremos todos los Ejercicios


en una carpeta Indicando el nombre del ejercicio.

— Sintaxis HTML

También podría gustarte