Front End Clase 2

FRONT END
Tutoría 2
Competencias a desarrollar
Desarrollar aplicaciones front-end con la finalidad de

proporcionar soluciones Web fáciles de usar para el usuario
teniendo en cuenta los criterios de calidad del software y
buenas prácticas de desarrollo.
Unidad temática - 1
Escenario 1 -Introducción al desarrollo web

Conceptos básicos en desarrollo de Web
Escenario 2 - HTML (HyperText Markup Language)

Conceptos y etiquetas en Html
Instalación del servidor local para revisar el

proyecto
Unidad temática - 1
Actividad proyecto
Instalación del servidor local para revisar el
proyecto
Unidad temática 2
Instalación de un servidor local
Apache es un servidor HTTP de propósito general. Puedes

utilizar Apache junto con diferentes lenguajes de programación
(PHP, Python, Perl, etc.) con la ayuda del módulo de Apache
Unidad temática 2
El servidor Apache se puede instalar en una computadora de varias

formas:
✔ El programa exclusivo, al que después se le agregan manualmente

distintos módulos.
✔ Instalarlo mediante el paquete XAMPP, que incluye Apache, la base
de datos MySQL, PHP y Perl.
✔ Instalar Apache mediante otras distribuciones como LAMP o MAMP.
Unidad temática 2
Nginx tiene una arquitectura
guiada por los eventos que no
crea un nuevo proceso para
cada solicitud.
Tomcat es un servidor web

desarrollado también por la
Apache Software Foundation, está
hecho para aplicaciones Java en
lugar de sitios web estáticos.
Unidad temática 2
https://www.emezeta.com/articulos/15-aplicaciones-
para-montar-servidores-web-en-local
Unidad temática 2
Instalación de un servidor local XAMPP
https://www.apachefriends.org/es/download.html
Unidad temática 2
HTML –Lenguaje de marcas de hipertexto
¿Qué es un Editor HTML?
Ayudan a escribir su código resaltando la sintaxis, insertando elementos HTML de

uso común y proporcionando autocompletado.
Hay dos tipos de editores actualmente: WYSIWYG y HTML Textual.
WYSIWYG vs. HTML Textual

What You See Is What You Get (lo que ves es lo que obtienes)
https://www.onlinehtmleditor.net/
https://www.quackit.com/html/
Unidad temática 2
https://atom.io/
https://notepad-plus-plus.org/
https://www.sublimetext.com/
Unidad temática 2
1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2.<html>
3.<head>...</head>
4.<body>...</body>
5.</html>
Competencia 2 .Crear sitios web dinámicos según estándares y
protocolos establecidos.
Reglas básicas de las etiquetas HTML.
•Las etiquetas están encerradas entre los signos

"<" y ">".
•Las etiquetas generalmente vienen en pares <p> y
<⁄p>.
•La primera es de apertura y la segunda de cierre.
•Las etiquetas no son sensibles a las mayúsculas y
minúsculas, o sea <b> es lo mismo que <B>.
Instructor Alexandra Silva M Especialización Tecnológica Webmaster.

Atributos de las etiquetas.
Los atributos siempre van con la estructura:
nombre="valor".
Los atributos siempre van en la etiqueta de apertura.
Los valores siempre hay que ponerlos entre comillas.
Un ejemplo de los atributos sería:
<body bgcolor="#FFFF00">
<b>Este texto es en negrita</b>
</body>
Instructor Alexandra Silva M Especialización Tecnológica Webmaster.

Estructura documento html
Competencia 2 .Crear sitios web dinámicos según estándares y
Básicos Tabla Formularios
s
Div
Formatos Imágenes
Colores
Listas Enlaces
Etiqueta Descripción
Básicas
<h1> a <h6> Defina el tamaño de los encabezados
<p> Define un párrafo
<!-- -- > comentarios
<br> Salto de línea
<hr> Línea horizontal
Atributos de la Descripción
etiqueta body
bgcolor Define el color del fondo de la página
text Define el color del texto de la página
Link Define el color de los vínculos de la página
alink Define el color del vinculo actual
vlink Define el color del vinculo ya visitado.
background Define una imagen en el fondo
Etiquetas de texto Descripción
<b> Define un texto en negrita
<big> Define un texto grande
<small> Define un texto pequeño
<i> Define un texto en itálica
<u> Define un texto en subrayado
<sub> Texto en subíndice
<sup> Texto en superíndice
<pre> Texto preformateado
Etiquetas Font Descripción
Font Define los atributos para el texto.
Size Tamaño del texto
Color Color del texto
Face Nombre de la fuente

Etiqueta listas Descripción
<ul> </ul> Lista desordenadas
<ol> </ol> Lista ordenada
<li> Define el comienzo del ítem
Etiqueta img Descripción

<img></img>
alt Breve descripción de la imágen
align Alineación de la imagen
Top.
Bottom.
Middle.
Left
right.
src Ruta de la imagen

Width, height Ancho y alto
Etiqueta tabla Descripción
<table></table>
<tr></tr> Insertar filas
<td></td> Insertar columnas
<th> Titulo de la tabla
Width, height Ancho y alto
Colspan Combinar columnas
Rowspan Combinar filas
Etiqueta vinculo Descripción

<a></a>
href Dirección url del vinculo
Etiquetas HTML
• Etiquetas del HTML5
• https://developer.mozilla.org/es/docs/HTML/HTML5/
HTML5_lista_elementos#Secciones
HTML 4
• http://dis.um.es/~lopezquesada/documentos/IES_1213/LMSGI/curso
/UT4/Sabana.pdf
Cursos de HTML
• http://www.cursohtml5desdecero.com/
• https://codigofacilito.com/cursos/html5-2017

Front End Clase 2

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

Front End Clase 2

Cargado por

Copyright:

Formatos disponibles

FRONT END

Desarrollar aplicaciones front-end con la finalidad de

Escenario 1 -Introducción al desarrollo web

Escenario 2 - HTML (HyperText Markup Language)

Instalación del servidor local para revisar el

Apache es un servidor HTTP de propósito general. Puedes

El servidor Apache se puede instalar en una computadora de varias

✔ El programa exclusivo, al que después se le agregan manualmente

Tomcat es un servidor web

¿Qué es un Editor HTML?

Ayudan a escribir su código resaltando la sintaxis, insertando elementos HTML de

Hay dos tipos de editores actualmente: WYSIWYG y HTML Textual.

WYSIWYG vs. HTML Textual

1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

•Las etiquetas están encerradas entre los signos

Instructor Alexandra Silva M Especialización Tecnológica Webmaster.

Un ejemplo de los atributos sería:

Instructor Alexandra Silva M Especialización Tecnológica Webmaster.

Etiquetas Font Descripción

Font Define los atributos para el texto.

Size Tamaño del texto

Color Color del texto

Face Nombre de la fuente

Etiqueta img Descripción

src Ruta de la imagen

Etiqueta vinculo Descripción

También podría gustarte