Segundo Parcial (temas vistos)
SEGUNDO PARCIAL
construye paginas web
objetivos:
la elaboracion de una pagina web mas estructurada con apoyo de las hojas de estilo (css) .
PRIMER TEMA
HTML y HTML5
¿Qué es HTML?
HTML son las siglas en inglés de HyperText Markup Lenguage,
que significa Lenguaje de Marcado de Hiper Texto. Se llama así al lenguaje de programación empleado en la elaboración de páginas Web.
¿Qué es HTML5?
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del lenguaje HTML y permite definir los nuevos estándares de desarrollo web, modificando el código existente para solucionar problemas y actualizándolo a las nuevas necesidades de hoy en día.
A partir de un cuadro comparativo
organizamos las diferencias entre html y
html5 quedando de la siguiente forma.
.jpg)
SEGUNDO TEMA
Etiquetas & Atributos
Uno de los primeros temas que vimos fue el de las etiquetas y atributos.
Las etiquetas son la estructura básica del HTML. Estas se componen y contienen otras propiedades, que son llamados atributos y el contenido.
Las etiquetas se abren con <> y se cierran con </>.
A continuacion algunas de las etiquetas:
- <Head></Head>=Encabezado de la página web.
- <title></title>=título del documento.
- <body></body>=cuerpo del documento.
- <h1></h1>=tamaño de la letra.
- <p></p>=párrafo-atributos.
- ALING=”left” alineado a la izquierda.
- ALING=”right” alineado a la derecha.
- ALING=”center” alineado centrado.
- ALING=”justify” justificado.
- <b></b>=texto en negrita.
- <i></i>=itálica o cursiva.
- <u></u>=subrayado.
- <Font></Font>=letra, tamaño, fuente.
Los atributos son la forma que tienen los autores de definir propiedades para un elemento. Estas propiedades habitualmente cambian la forma en que los navegadores interpretan al elemento, al cambiar su significado o presentación.
En cuanto a los atributos estos son definidos por HTML pero se dividen en 4 tipos:
•Atributos Básicos:
Se utilizan en la mayoría de etiquetas HTML aunque adquieren mayor sentido cuando se utilizan hojas de estilo en cascada (CSS).
•Atributos de internacionalización
Se utilizan en aquellas páginas que muestran sus contenidos en varios idiomas y las que quieran indicar de forma explícita el idioma de sus contenidos.
•Atributos de eventos
Estos atributos se utilizan en las páginas web que incluyen código JavaScript para realizar acciones dinámicas sobre los elementos de la página.
•Atributos de foco
Se le denomina foco o focus, cuando un control o elemento del documento ha sido seleccionado. Cuando ese elemento deja de estar seleccionado, "pierde el foco" y es el nuevo elemento seleccionado el que se dice que tiene "el foco".
Algunos de ellos son:
- <Center></center>=centrado.
- <b></b> o <strong></strong>=negritas.
- <s></s>=tachado.
- <em></em>=texto enfortizado.
- <b16></b16>=texto grande.
- <small></small>=tamaño pequeño.
- <sub></sub>=subíndice.
- <small></small>=tamaño pequeño.
- <sub></sub>=subíndice.
CÓDIGO
También llegamos a ver el siguiente código:
<!DOCTYPE html>
<html>
<head>
<title>Formulario de registro civil</title>
</head>
<body>
<h1>Formulario de Norma Sugey Perez Vazquez de 4D</h1>
<form action=" " method="get">
<p>
Nombre:<input type="text" name="nombre" maxlength="50"/>
</p>
<p>
Apellidos:<input type="text" name="apellidos" maxlength="50"/>
</p>
<p>
Sexo:<input type="radio" name="sexo" value="h"/>hombre
<input type="radio" name="sexo" value="m"/>mujer
</p>
<p>
Correo:<input type="text" name="correo" maxlength="100"/>
</p>
<p>
<input type="checkbox" name"info" checked="checked"/>Deseo recibir información sobre novedades y ofertas
</p>
<p>
<input type="checkbox" name="condiciones"/>Declaro haber leído y aceptar las condiciones generales del programa y la normativa sobre protección de datos.
</p>
<p>
<input type ="submit" value="enviar"/>
</p>
</form>
</body>
VISTA:
CÓDIGO 2:
Este código se dividen en dos uno con get y otro con post:
(GET)
<!doctype html>
<html>
<head>
<title>Formulario de prueba de html</title>
</head>
<body>
<h3>De Norma Sugey Perez Vazquez</h3>
<form action="Pagina5(post).html"method="post">
<p>
Nombre<input type="text"name="name_control"autofocus required/>
</p>
<p>
URL:<input type="url" name="url_control" place holder="Escribe la URL de la pagina web personal"/>
</p>
<p>
Correo electronico:<input type="email" name="email_control" required/>
</p>
<p>
Fecha:<input type="date" name="date_control"/>
</p>
<p>
Tiempo:<input type="time" name="time_control"/>
</p>
<p>
Fecha y hora:<input type="datetime" name="datetime_control"/>
</p>
<p>
Mes:<input type="month" name="month_control"/>
</p>
<p>
Semana:<input type="week" name="week_control"/>
</p>
<p>
Numero(min-10,max10):<input type="number" name="number_control" min="-10" max="10" value="0"/>
</p>
<p>
Telefono:<input type="tel" name="tel_control"/>
</p>
<p>
Termino de busqueda:<input type="search" name="search_control"/>
</p>
<p>
Color favorito<input type="color" name="color_control"/>
</p>
<p>
<input type="submit" value="Enviar"/>
</p>
</form>
</body>
</html>
(GET)
<!doctype html>
<html>
<head>
<title>Formulario de prueba de html</title>
</head>
<body>
<h3>De Norma Sugey Pérez Vázquez</h3>
<form action="Pagina5(get).html"method="get">
<p>
Nombre<input type="text"name="name_control"autofocus required/>
</p>
<p>
URL:<input type="url" name="url_control" place holder="Escribe la URL de la pagina web personal"/>
</p>
<p>
Correo electronico:<input type="email" name="email_control" required/>
</p>
<p>
Fecha:<input type="date" name="date_control"/>
</p>
<p>
Tiempo:<input type="time" name="time_control"/>
</p>
<p>
Fecha y hora:<input type="datetime" name="datetime_control"/>
</p>
<p>
Mes:<input type="month" name="month_control"/>
</p>
<p>
Semana:<input type="week" name="week_control"/>
</p>
<p>
Numero(min-10,max10):<input type="number" name="number_control" min="-10" max="10" value="0"/>
</p>
<p>
Telefono:<input type="tel" name="tel_control"/>
</p>
<p>
Termino de busqueda:<input type="search" name="search_control"/>
</p>
<p>
Color favorito<input type="color" name="color_control"/>
</p>
<p>
<input type="submit" value="Enviar"/>
</p>
</form>
</body>
</html>
VISTA:
TERCER TEMA
NAVEGADORES WEB
Un navegador web o explorador de internet (del inglés web browser) es un software, aplicación o programa que permite el acceso a la Web.
Algunos de los principales son:
Firefox
Edge
.jpg)
Opera
.jpg)
Chrome
.jpg)
CUARTO TEMA
CSS
En este tema vimos lo que era CSS y a partir de lo que entendimos realizamos un mapa mental sobre CSS como el que se muestra a continuación.
Preguntas de retroalimentación
¿Qué es una página web?
Es un sitio de la web en el cual accedemos para conseguir información.
En la actualidad, ¿En que tipo de web nos encontramos y por qué?
En la 3.0 ya que los avances tecnológicos actuales no son lo suficientemente capaces de usar la 4.0.
¿Qué es un navegador web?
Es un programa que nos permite acceder a la web.
¿Menciona las 3 principales navegadores web que se utilizan?
Microsoft Edge, Mozilla Firefox, Google Chrome.
¿Qué es HTML?
El Lenguaje de Marcado de Hipertexto (HTML) es el código que se utiliza para elaborar paginas web.
¿Que son las etiquetas?
Son indicadores de lenguaje de marcas de hipertextos que le dan formato y estructura al contenido de las paginas web.
¿Todas las etiquetas vienen en pares?
No, un ejemplo de esto es la etiqueta <br>
¿Cómo se inserta un comentario en HTML?
Con las diagonales “//”.
Comentarios
Publicar un comentario