Sie sind auf Seite 1von 74

HTML , Javascript y

CSS
Que es html ?
HTML significa Lenguaje de Marcas de Hipertexto. El concepto inicial de HTML es crear documentos y
por medio de lo que se conoce como hipervínculos se podían ligar los distintos documentos de un sitio
web. Al día de hoy este concepto ha evolucionado hasta llegar a la tecnología conocida como AJAX
(Asynchronous JavaScript + XML), entre miles de frameworks y soluciones para el manejo de HTML.
Esta tecnología la veremos en cursos posteriores.
Que es html ?
Que es html ?
Componentes
Componentes
Componentes
Componentes
Componentes
Componentes
Componentes
Componentes
Componentes
Componentes
Componentes
Componentes
Componentes anclas
Componentes
Componentes
Componentes imagenes
Introduccion a css
CSS significa Cascade Style Sheet o en español Hojas de Estilo en Cascada. La idea de
combinar las tecnologías de HTML y CSS surge de la necesidad de que cada uno se dedique
a realizar su función, por un lado HTML se encarga de mostrar la información en el
navegador Web, pero CSS se encarga de mejorar la presentación de dicha información,
mejorando el diseño, colores, efectos, y todo lo necesario para que la información no
solamente parezca un texto plano en el navegador Web, sino tenga una apariencia agradable
al usuario.
Introduccion a css
Introduccion a css
Introduccion a css
Introduccion a css
Introduccion a css
Introduccion a css
Tablas con html
Tablas con html
El manejo de tablas HTML es muy común para mostrar nuestra información. Para declarar una tabla en HTML, tenemos que definir y
entender varias etiquetas, como son:

table: Define el elemento que indica el inicio de una tabla html.


tr: table row. Este elemento define un renglón, el cual contendrá columnas.

th: table header. Este elemento define un dato pero que es un cabecero de nuestra tabla html. Usar este elemento es opcional.

td: table data. Este elemento define un dato de nuestra tabla html.

Un ejemplo de una tabla html:

<table> <tr>

<th>Nombre</th>

<th>Apellido</th> </tr>
<tr>

<td>Carlos</td>

<td>Suarez</td> </tr>

</table>
Tablas con html
Tablas con html
Tablas con html
Formularios en html
Este es uno de los temas más importantes cuando estamos hablando de crear aplicaciones
Web dinámicas, y que no sólo mostrarán texto HTML. La diferencia es que para el
tratamiento de formularios se requiere de una aplicación creada del lado del servidor. En este
curso sólo veremos cómo crear el formulario, y en el siguiente curso de Servlets y JSPs
veremos cómo procesar la información enviada por el usuario al servidor Java.
Formularios en html
Formularios en html
Formularios en html
Formularios en html
Formularios en html
Formularios en html
Formularios en html
Introduccion a css
CSS significa Cascade Style Sheet o en español Hojas de Estilo en Cascada. La idea de
combinar las tecnologías de HTML y CSS surge de la necesidad de que cada uno se dedique
a realizar su función, por un lado HTML se encarga de mostrar la información en el
navegador Web, pero CSS se encarga de mejorar la presentación de dicha información,
mejorando el diseño, colores, efectos, y todo lo necesario para que la información no
solamente parezca un texto plano en el navegador Web, sino tenga una apariencia agradable
al usuario.
Javascript
JavaScript es un lenguaje que permite agregar código dinámico a una página HTML.
Por ejemplo, si hemos observado algunas páginas que tienen efectos, validaciones de
formularios, etc. entonces es JavaScript quien nos permite agregar este tipo de
características a una página HTML.

JavaScript se conoce como un lenguaje de tipo scripting, esto es, que no necesitamos
de un compilador, si no que cada una de sus líneas se van interpretando en tiempo de
ejecución y a su vez también cualquier modificación que hagamos directamente sobre
el código se ve reflejada de manera automática una vez que hemos recargado la
página del navegador web.

JavaScript se puede incluir directamente en el código HTML o se puede agregar a un


archivo externo, similar al uso que hemos visto en las hojas de estilo CSS.
Javascript utilidades
● Crear interfaces de html dinámicas
● Validar formularios html
● Crear html dinamico
● Uso de Ajax
● Controlar características del navegador
Javascript en JavaEE
Javascript
Javascript
Javascript
Javascript
Javascript
Javascript sumar
Javascript sumar
Javascript
Javascript
Javascript
Javascript
Jquery
JQuery es una librería de JavaScript (JavaScript es un lenguaje de programación muy usado en
desarrollo web). Esta librería de código abierto, simplifica la tarea de programar en JavaScript y
permite agregar interactividad a un sitio web sin tener conocimientos del lenguaje.
Jquery
Como instalar
Todos los plugins de JQuery necesitan la librería de JQuery para funcionar. La librería es un archivo .js que se puede
descargar desde el sitio oficial: https://jquery.com/ colocar en una carpeta js y luego vincular con una etiqueta <script>,
por ejemplo:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Val and Text
Val and Text
Html
Html
Ajax
$(function(){

$(“clickbutton”).on(“click”,function(){
$(“textarea”).val($(“p”).text());
});
]);

https://www.quackit.com/html/html_editors/scratchpad/?example=/jquery/examples/jquery_ajax_load
css
JQuery
https://www.quackit.com/jquery/examples/
Bootstrap
Bootstrap, es un framework originalmente creado por Twitter, que permite crear interfaces
web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al
tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente
al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se
conoce como Responsive Design o Diseño Adaptativo.

https://getbootstrap.com/
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Bootstrap
Mis tecnologias
Mis tecnologias
Fin

Das könnte Ihnen auch gefallen