Tema: Conceptos básicos de Web
Elaborar páginas WEB desde el
celular (Sublime text)
Subtemas: HTML, páginas
web, páginas estáticas, páginas dinámicas, protocolos IP, navegadores
(browsers), hojas de estilo, tablas, plantillas (template), marcos (frames),
hipervínculos locales y externos, software de edición de sitios web,
publicador de sitio web, servidor, dominio, alojamiento y publicación, solución
web, plataforma web.
Hacer un organizador gráfico del texto antecedentes y otro del conjunto de protocolos que conforman la arquitectura formada por cinco niveles o capas
Objetivo:
Diseñar y construir soluciones web de nivel intermedio con interfaz amigable, empleando herramientas multimedia que permitan promocionar la información e imagen de una organización y/o cliente.
Actividad 1
Crea tu propia página Web.
Contenido
Tema: ¿Hojas de estilos?
Son conocidas como style sheets. Se trata de una serie de conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, alineación y posicionamiento del texto, colores y fondos, etc., de las distintas etiquetas que forman una página.Se puede crear una sola hoja de estilo y se enlazan algunas o todas las páginas. De esta manera, al hacer el cambio en la hoja de estilo, se cambiarán todas aquellas que estén vinculadas.
1. Escribiremos
o copiaremos y pegaremos el siguiente código: (en bloc de notas o sublime text)
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Hojas de Estilo</title>
</head>
<body>
<!-- Menú de navegación del
sitio -->
<ul
class="navbar">
<li><a href="indice.html">Página
principal</a>
<li><a href="contenido.html">Contenidos</a>
<li><a href="trabajos.html">Tareas</a>
<li><a
href="evaluaciones.html">Evaluaciones</a>
</ul>
<!-- Contenido principal -->
<h1>Cómo hacer mi página
con Hojas de Estilo</h1>
<p>¡Bienvenidos!
<p>Podemos cargar imágenes,
aplicar otros estilos.
Existe un menú con enlaces, pero
aún no están activados
<!-- Firma y fecha de la
página! -->
<address>Creada el 17 de
julio de 2020<br>
mi nombre.</address>
</body>
</html>
2. Luego,
escogemos el menú Archivo y la opción Guardar. En la ventana que aparece, se
pondrá el nombre. Por ejemplo, prueba1.html.
No olvides escoger la ruta para
guardar la página web.
3. Busca
el archivo en la ruta en la que lo guardaste y haz doble clic. Entonces, se
abrirá en el navegador que tengas predeterminado, como se puede observar a continuación:
Dato curioso: “Las hojas de
estilo utilizan el lenguaje CSS.”
1. ¿Qué es y para qué sirve una
hoja de estilo?
2. ¿Qué significa CSS?
3. Investiga y escribe los
códigos de los colores para las hojas de estilo CSS.
Recuerda:
“La hoja de estilos es la
clave para establecer el diseño de una web, por lo tanto, se convierte en el
principal espacio de trabajo para los diseñadores web”.
Tema: Tablas y plantillas (templates)
Una tabla es un medio de
organizar datos en filas y columnas. En cada grupo de filas contiene a un grupo
de celdas que pueden ser utilizadas para listar datos como listas, agendas,
resultados y otros datos de una forma organizada y/o tabulada. En HTML se
adopta como una forma de presentar información que no sería comprendida tan
fácilmente de otra manera. HTML dispone de una gran variedad de etiquetas para
crear tablas con sus atributos que se deben utilizar en una forma determinada.
Etiquetas básicas para tablas en
HTML
1. Las tablas son definidas por
las etiquetas TABLE y su cierre.
<table>
…
</table>
2. Dentro de estas dos
colocaremos las otras etiquetas de las tablas hasta llegar a las celdas. Y
dentro de las celdas ya se podrá colocar textos e imágenes que será el
contenido de la tabla.
3. Las tablas son descritas por
líneas de arriba a abajo y luego por columnas de izquierda a derecha. Cada una
de estas líneas, llamada fila, es definida por otra etiqueta y su cierre: TR.
4. Dentro de cada línea, habrá
diferentes celdas. Cada una de estas celdas será definida por otra etiqueta:
TD. Dentro de esta y su cierre será donde coloquemos el contenido.
Ejemplo: Estructura de tabla:
<table border=2 cellspacing=3
cellpadding=1 width="50%">
<tr>
<td bgcolor="#FFFF00"> Celda 1, linea 1</td>
<td> Celda 2, linea 1</td>
</tr>
<tr>
<td> Celda 1, linea 2</td>
<td> Celda 2, linea 2</td>
</tr>
</table>
El resultado:
Algunos son conocidos como width,
height, align, etc.
1. Para las etiquetas TABLE.
cellspacing: es el espacio entre
celdas de la tabla.
cellpadding: es el espacio entre
el borde de la celda y su contenido.
border: es el número de píxeles
que tendrá el borde de la tabla.
bordercolor: es el rbg que le vas
a asignar al borde de la tabla.
2. Para las etiquetas
"interiores" de una tabla, (TR y TD): Se puede usar cualquier tipo de
etiqueta dentro de la etiqueta TD, y luego escribir su contenido. Las etiquetas
situadas en el interior de la celda no modifican el resto del documento. Las
etiquetas fuera de la celda no serán consideradas por ésta.
3. El formato de una celda se
especifica a partir de etiquetas introducidas en su interior o mediante
atributos colocados: Dentro de la etiqueta de celda TD y dentro de la etiqueta
TR (válido para toda la línea).
Atributos para modificar una
celda en determinada o toda una línea
align: Justifica el texto de la
celda del como si fuese el de un párrafo.
valign: (Top) para elegir que el
texto aparezca arriba, (Middle) en el centro o (Bottom) debajo de la celda.
bgcolor: Para color a la celda o
línea elegida.
bordercolor: Define el color del
borde.
Atributos asignados a una celda y
no al conjunto de celdas de una línea
background: Fondo para la celda a
partir de un enlace a una imagen.
height: Define altura de la celda
en pixels o porcentaje.
width: Define anchura de la celda
en pixels o porcentaje.
colspan: Expande celda
horizontalmente.
rowspan: Expande celda
verticalmente.
Las dimensiones de las celdas se
definen de forma absoluta es decir en pixels o puntos de pantalla. También
puede ser de una forma relativa, es decir por porcentajes referidos al tamaño
total de la tabla.
Ejemplo:
<td
width="50"> Esto
presenta ancho de celda de 50 pixels,
<td
width="50%"> Esto
presenta ancho de celda al 50% del ancho de la tabla.
<td
colspan="2"> Esto
combina la celda con la celda derecha.
<td
rowspan="2"> Esto
combina la celda con la celda inferior.
Plantillas (templates)
El theme o template es un formato
existente prediseñado para un sitio o página web, donde el usuario puede
personalizar la información. Algunas suelen ser gratuitas, pero con funciones
limitadas. Una plantilla proporciona una estructura definida, ahorra tiempo y
crea páginas webs sin tener que estar manejando códigos complicados.
Ventajas de usar plantilla web
• Fácil manipulación y edición.
No se necesita tener mucho conocimiento de programación.
• Es asequible y económico, en
algunos casos son gratuitas.
• Implementación en poco tiempo,
no se debe diseñar a tiempo completo.
Desventajas de usar plantillas
• Es limitada su personalización,
suele ser difícil cambiar la posición de algunos elementos de diseño web. En
algunos casos no se puede modificar.
• No están optimizados y por ello
afecta su rapidez de carga y del posicionamiento SEO.
• No es la plantilla que
necesito, muchas veces no está hecho a la medida, y lo barato sale caro.
Plataforma para adquirir una
plantilla
Existen muchas plataformas o
lugares donde se puedes visitar, explorar y revisar el catálogo de plantillas.
Esto te permite ver, evaluar y adquirir la plantilla más indicada según su
necesidad.
Algunos lugares donde puedes
encontrar plantillas web:
1. Template Monster, posee más de
21 mil productos.
2. ThemeForest – EnvatoMarket,
posee más de 47 mil plantillas.
3. Webflow, posee aproximadamente
100 modelos diferentes.
4. Creativemarket, posee más de 5.500 plantillas de sitios web.
No hay comentarios:
Publicar un comentario