Módulo 4:
Diseño Y Desarrollo Web
1. Definición de HTML
HTML (HyperText Markup Language) es un lenguaje de marcado estándar utilizado para crear y estructurar el contenido de las páginas web. Es el lenguaje base utilizado para construir sitios web y define la estructura y el significado de los elementos en una página web.
HTML utiliza etiquetas y elementos para marcar y definir diferentes partes del contenido web, como títulos, párrafos, enlaces, imágenes, tablas, formularios y más. Estas etiquetas se componen de elementos y atributos, que permiten dar formato, establecer relaciones y proporcionar información adicional sobre el contenido.
Las etiquetas en HTML están encerradas en corchetes angulares ("<" y ">") y generalmente vienen en pares de apertura y cierre. La etiqueta de apertura indica el inicio de un elemento, mientras que la etiqueta de cierre indica el final del mismo. El contenido entre las etiquetas es el contenido que se muestra en el navegador.
2. Función del Bloc de Notas
El Bloc de notas es una aplicación de editor de texto simple que se encuentra en los sistemas operativos Windows. Aunque es una herramienta básica, tiene varias funciones útiles:
- Edición de texto plano: El Bloc de notas permite crear y editar documentos de texto plano sin formato. Puedes escribir y formatear texto, como notas, listas, código fuente simple, y más.
- Guardado y apertura de archivos: Puedes guardar tus documentos de texto como archivos con extensión ".txt". El Bloc de notas también permite abrir y editar archivos de texto existentes.
- Sin formato y sin estilos: A diferencia de los procesadores de texto más avanzados, el Bloc de notas no agrega estilos o formato adicional al texto. Conserva el texto en su forma más básica y sin formato, sin cambiar tamaños de fuente, estilos, colores, etc.
- Compatibilidad: Los archivos de texto plano creados con el Bloc de notas son compatibles con prácticamente cualquier aplicación de lectura de texto, editores de texto y muchos otros programas.
- Ligero y rápido: El Bloc de notas es una aplicación liviana y se inicia rápidamente. Esto lo hace útil para tareas rápidas de edición de texto y acceso rápido.
- Programación simple: Dado que el Bloc de notas no añade formato o estilos, es una herramienta popular para escribir y editar código fuente de programación simple. Es común utilizar el Bloc de notas para lenguajes de programación como HTML, CSS, JavaScript y otros.
- Sin funciones avanzadas: El Bloc de notas no ofrece características avanzadas como verificación ortográfica, autocorrección, estilos de párrafo o tablas. Está diseñado principalmente para tareas de edición de texto simples y rápidas.
3. Etiquetas en HTML
En HTML, las etiquetas se utilizan para marcar y definir diferentes elementos y secciones dentro de una página web. Las etiquetas se componen de corchetes angulares ("<" y ">") y generalmente vienen en pares de apertura y cierre. La etiqueta de apertura indica el inicio de un elemento, mientras que la etiqueta de cierre indica el final del mismo. Aquí hay algunas etiquetas HTML comunes:
<HTML>
- Define el comienzo y final de la página web.
<HEAD>
- Contiene metadatos e información sobre el documento, como el título de la página, enlaces a hojas de estilo y scripts, entre otros.
<TITLE>
- Sirve para poner título a la página web.
<BODY>
- Contiene el contenido principal de la página web, como texto, imágenes, enlaces, videos y otros elementos visibles en el navegador.
<BODY BGCOLOR=" ">
- Sirve para ponerle color a la página web.
<BODY BACKGROUND=" ">
- Sirve para ponere imagen a a página web.
<FONT COLOR=" ">
- Sirve para ponerle color a la letra.
<FONT SIZE=" ">
- Sirve para cambiar el tamaño de letra.
<FONT FACE=" ">
- Sirve para cambiar el tipo de letra.
<BR>
- Sirve para dar salto de línea.
<H1> Hasta <H6>
- Sirve para poner encabezado de texto.
<CENTER>
- Sirve para centrar texto.
<B>
- Sirve para poner negrita al texto.
<I>
- Sirve para poner texto en cursiva.
<U>
- Sirve para poner subrayado.
<HR>
- Sirve para poner línea horizontal de una página web de un lado a otro.
<IMG SRC=" ">
- Sirve para poner imagen.
4. Tablas en HTML
En HTML, las tablas se crean utilizando las etiquetas <TABLE>, <TR>, y <TD>. Estas etiquetas se utilizan para definir la estructura y contenido de una tabla en una página web. A continuación, algunas etiquetas para crear tablas en HTML:
<TABLE>
- Se utiliza para iniciar la definición de una tabla. Todo el contenido de la tabla debe estar dentro de esta etiqueta.
<TR>
- Representa una fila en la tabla. Debe estar dentro de la etiqueta <TABLE>.
<TD>
- Representa una celda de datos en la tabla. Se utiliza para marcar el contenido de una celda dentro de una fila (<tr>).
<BORDER COLOR=" ">
- Sirve para poner al borde de la taba un color.
<WIDTH=" ">
- Sirve para poner ancho a algún elemento.
<HEIGHT=" ">
- Sirve para poner longitud o atura algún elemento.
Ejemplo:
Tabla en HTML donde ponga el colegio, nombre, fecha, módulo, curso y docente. Con tres imágenes y su descripción. La tabla deberá contener dos columnas y tres filas.
Codificación:
En la primera imagen se encuentra la introducción con la información requerida: Colegio, fecha, módulo, curso y Docente.
En la segunda imagen se encuentra la primera foto y su descripción.
En la tercera imagen se encuentra la segunda foto y su descripción.
En la cuarta imagen se encuentra la tercera foto y su descripción.
1.Abre tu presentación: Inicia Microsoft PowerPoint y abre
la presentación a la que deseas agregar un fondo de color. Selecciona una
diapositiva: Haz clic en la miniatura de la diapositiva a la que deseas aplicar
el fondo de color en el panel de diapositivas a la izquierda cede a las
opciones de fondo:
2.Ve al menú "Formato" en la parte superior y
selecciona "Fondo de la diapositiva...".
3.Elige un fondo de color:
4.En la ventana emergente "Fondo de la
diapositiva", selecciona la pestaña "Relleno sólido" y elige un
color.
5.Aplica el fondo de color.
6.Haz clic en el botón "Aceptar" en la ventana
emergente "Fondo de la diapositiva".
7.Ajusta el texto y los elementos.
8.Una vez que hayas aplicado el fondo de color, asegúrate de
que el texto y los elementos en la diapositiva sean visibles y legibles. Puedes
cambiar el color del texto, ajustar la fuente y modificar otros elementos según
tus necesidades.
9.Repite el proceso.
10.Guarda tu presentación: Asegúrate de guardar tu
presentación para conservar los cambios.
La etiqueta "colspan" es un atributo HTML que se
utiliza en las tablas para especificar cuántas columnas debería abarcar una
celda o una celda de encabezado. Esto permite combinar varias celdas en una
sola celda que ocupa más de una columna. El uso de "colspan" es útil
cuando deseas combinar celdas para crear una estructura de tabla más compleja o
cuando tienes celdas que deben abarcar varias columnas debido a la naturaleza
de tus datos. Te permite personalizar la apariencia y el diseño de las tablas
en tu página web.
.Codificación:
.Página Web:
1.Inicia sesión en tu cuenta de Blogger y selecciona el blog
que deseas editar.
2.En el panel de control del blog, haz clic en
"Entradas" para crear una nueva publicación o editar una existente.
3.En el editor de entradas, coloca el cursor en el lugar
donde deseas insertar la imagen.
4.Haz clic en el icono de "Insertar imagen" en la
barra de herramientas del editor. Se parece a un ícono de imagen.
5.Aparecerá una ventana emergente que te permite seleccionar
la fuente de la imagen. Puedes cargar una imagen desde tu computadora,
seleccionar una imagen ya subida a tu blog o insertar una imagen desde una URL.
6.Después de seleccionar la imagen, puedes ajustar el
tamaño, alineación y otros atributos según tus preferencias.
7.Haz clic en el botón "Añadir imagen" o
"Insertar" para agregar la imagen a tu entrada.
8.Asegúrate de hacer clic en "Guardar" o
"Actualizar" para guardar los cambios en la entrada.
1.Inicia sesión en tu cuenta de Blogger. Accede al Panel de
Control de Blogger.
2.Selecciona el blog. Crea o edita una publicación.
3.Agrega un video a tu publicación.
a. Sube un video desde tu dispositivo.
b. Inserta un video de YouTube.
c. Inserta un video de Vimeo u otra plataforma.
4.Ajusta las opciones del video.
5.Previsualiza y publica la publicación y guarda los cambios.
1.Inicia sesión en tu cuenta de Blogger. Accede al Panel de
Control de Blogger.
2.Selecciona el blog que deseas personalizar. Accede al
"Tema". Elije una plantilla.
3.Personaliza el diseño, personaliza el encabezado y ajusta
los widgets.
4.Personaliza el pie de página, guarda tus cambios y Previsualiza
y publica.
.Cajas de Texto en HTML
Las listas en HTML nos permiten crear conjuntos de elementos
en forma de lista dentro de una página, todos los cuales irán precedidos,
generalmente, por un guión o número. Los tipos de listas en HTML son los
siguientes:
1.Listas ordenadas.
2.Listas desordenadas.
3.Listas de definiciones.
Es el elemento crea botones marcadores.
La etiqueta de HTML "button" representa un
elemento cliqueable de tipo botón que puede ser utilizado en formularios o en
cualquier parte de la página que necesite un botón estándar y simple de
aplicar. De forma predeterminada, los botones HTML se presentan con un estilo
similar en todas las plataformas, estos estilos se pueden cambiar utilizando
CSS. Sus etiquetas son: "button" y "/button" (ambas
obligatorias).
En HTML, podemos crear una lista ordenada usando la etiqueta
"ol".La etiqueta ol representa una lista ordenada. Dentro de cada uno
de los elementos de la lista ordenada "ol" y "ol /",
tenemos que definir los elementos de la lista. Podemos definir los elementos de
la lista usando la etiqueta "li".
Las listas ordenadas en HTML son aquellas que nos muestran
los elementos de la lista en orden. Para representar el orden tendremos los
elementos numerados. Es decir, cada uno de los elementos irá precedido de un
número o letra que establezca su orden.
Tipo de lista ordenada: type
De igual manera podemos indicar el tipo de lista ordenada en
HTML que queremos representar.
Entre los tipos de listas que podemos representar tenemos:
1 - Listas decimales
a - Listas alfabéticas en minúsculas
A - Listas alfabéticas en mayúsculas
i - Listas de números romanos en minúsculas
I - Listas de números romanos en mayúsculas
Ejemplo:
.Codificación:
0 Comentarios