TEMÁTICA. Páginas web / Lenguaje de marcado HTML5
Una página web, o página electrónica, página digital, o ciberpágina es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador web. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto
Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros.
Las páginas web pueden estar almacenadas en un equipo local o en un servidor web remoto. El servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en una intranet corporativa, o puede publicar las páginas en la World Wide Web. El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP).
VÍDEO 1. ¿QUE ES UNA PAGINA WEB?
HTML es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser traducido como Lenguaje de Formato de Documentos para.
VÍDEO 2. ¿Que es HTML?
IMAGEN 1. ETIQUETAS BÁSICAS DE HTML.
- <html>: Indica el comienzo del documento HTML.
- <head>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title>) de la web, una descripción y otras informaciones relacionadas con el contenido de la página.
- <body>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web.
- <h1>, <h2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.
- <a>: define los enlaces.
- <table>: es una tabla, y dentro de esta tenemos filas <tr> y celdas <td>.
- <p>: el texto dentro de esta etiqueta forma un párrafo.
- <img>: imágenes.
- <ul>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <li> definimos cada guión dentro de la lista, y usando <ol> en lugar de <ul> tendremos listas ordenadas.
- <b> y <strong>: se utilizan para resaltar el texto.
- <u>: texto subrayado.
- <i> y <em>: texto en cursiva.
EXPERIENCIAS
En el tiempo trabajando tuvimos oportunidades desde varios puntos de diseño, aprendiendo cada vez mas, sobre información teórica y aprendiendo de forma técnica como crear un blog y todas sus características
IMAGEN 2. Compilación de la primera guía
<html>
<head>
<title>instituto Zafiro system - Inicio</title>
</head>
<body>
<h1>Instituto Zafiro system</h1>
<p>¡por que debes salir adelante, capacitate !</p>
<hr>
<h2>Metodología</h2>
<p>la forma de enseñar del Instituto Zafiro system , es 100% personalizada, computador por estudiante, horarios flexibles,de lunes a sabados, precios cómodos cursos prácticos y programas técnicos láborales</p>
<p>En el desarrollo de las estructuras curricurales se uttilizan diferentes metodologias que permiten favorecaer la apropiación del conocimiento y la aplicación del mismo en el medio laboral , profesinal y personal</p>
</body>
</html>
IMAGEN 3. Compilación de la segunda guía
Fuente: Estudiante Valentina Toro Henao
En esta actividad vemos nuevas etiquetas en donde complementamos o seguimos de lo que quedamos en la guía 1 , los cuales hacen que nuestra página web sea más elaborada, y mejor presentada.
<!DOCTYPE html>
<html><head>
<title>instituto Zafiro system - Inicio</title>
</head>
<body>
<h1>Instituto Zafiro system</h1>
<p>¡por que debes salir adelante , capacitate !</p>
<hr>
<center><h1>SISTEMA DE EDUCACION PERSONALIZADA</H1><center>
<h2>Metodología</h2>
<p>la forma de enseñar del Instituto Zafiro system , es 100% personalizada , computador por estudiante , horarios flexibles ,de lunes a sabados , precios cómodos cursos prácticos y programas técnicos láborales</p>
<p>En el desarrollo de las estructuras curriculares se utilizan diferentes metodologías que permiten favorecer la apropiación del conocimiento y la aplicación del mismo en el medio laboral , profesional y personal</p>
<p>La metodología personalizada aplicada permite que los estudiantes alcancen competencias necesarias en las diferentes áreas del conocimiento, dentro de un sistema socioeconomico y culuta globalizado, por medio de un reconocimiento basado en: lo conceptual, la interpretación, transferencia, la aplicación y la creatividad.</>
<h1>programas técnicos laborales</h1>
Tecnico laboral en sistemas y mantenimiento.
<br>
Tecnico laboral en secretariado auxiliar contable.
<br>
<h2>Metodología</h2>
<p>la forma de enseñar del Instituto Zafiro system , es 100% personalizada , computador por estudiante , horarios flexibles ,de lunes a sabados , precios cómodos cursos prácticos y programas técnicos láborales</p>
<p>En el desarrollo de las estructuras curriculares se utilizan diferentes metodologías que permiten favorecer la apropiación del conocimiento y la aplicación del mismo en el medio laboral , profesional y personal</p>
<p>La metodología personalizada aplicada permite que los estudiantes alcancen competencias necesarias en las diferentes áreas del conocimiento, dentro de un sistema socioeconomico y culuta globalizado, por medio de un reconocimiento basado en: lo conceptual, la interpretación, transferencia, la aplicación y la creatividad.</>
<h1>programas técnicos laborales</h1>
Tecnico laboral en sistemas y mantenimiento.
<br>
Tecnico laboral en secretariado auxiliar contable.
<br>
Matriculas abiertas
</body>
</html>
</html>
IMAGEN 4. Compilación de la tercera guía
Fuente: Estudiante Valentina Toro Henao
<!DOCTYPE html>
<html>
<head>
<title>instituto Zafiro system - Inicio</title>
</head>
<body>
<h1>Instituto Zafiro System</h1>
<p>¡por que debes salir adelante , capacitate !</p>
<hr>
<center><h1>SISTEMA DE EDUCACION PERSONALIZADA</H1><center>
<h2>Metodología</h2>
<p>la forma de enseñar del Instituto Zafiro system , es 100% personalizada , computador por estudiante , horarios flexibles ,de lunes a sabados , precios cómodos cursos prácticos y programas técnicos láborales</p>
<p>En el desarrollo de las estructuras curricurales se uttilizan diferentes metodologias que permiten favorecaer la apropiación del conocimiento y la aplicación del mismo en el medio laboral , profesinal y personal</p>
<p>La mentodologia personalizada aplicada permite que los estudiantes alcancen competencias necesarias en las diferentes áreas del conocimiento, dentro de un sistema socioeconomico y culuta globalizado, por medio de un reconocimiento basado en: lo conceptual, la interpretacion, transferencia, la aplicacion y la creatividad.</>
<h1>programas tecnicos laborales</h1>
Tecnico laboral en sistemas y mantenimiento.
<br>
Tecnico laboral en secretariado auxiliar contable.
<br>
Matriculas abiertas
<h3"el mejor de la ciudad">soporte tecnico</h3>
<i>ventas</i>
<br><em>reparaciones</em>
<br><b>mantenimiento</h>
<br><strong>accesorios</strong>
<br><u>respaldo</u>
<br><ins>garantia</ins>
<br><s>NO TENEMOS COMPETENCIAS</s>
<br><del>Nos han querido imitar</del>
<hr>
<h3tittle="ubicacion del instituto">institutozafirosystem</h3>
telefono:666000-celular:3130000000
<br>E-mail: zafirosystem@hotmail.com - www.zafirosystem,can
</center>
<hrcolor="blue">
<hrcolor="red"width="450">
<hrcolor="yellow"width="250" size="30">
</body>
</html>
Los atributos se usan para darle información adicional a un elemento (etiqueta) y así modificarlo.
<i>texto<i>: coloca el texto en cursiva.
<em>texto</em>: cursiva para marcar texto importante,los buscadores lo toman mas en cuenta.
<b>texto</b>: coloca el texto en negrilla.
<strong>texto</strong>: negrilla para marcar texto importante, los buscadores lo toman en cuenta.
<u>texto</u>: coloca el texto subrayado.
<ins>texto</s>: coloca el texto insertado (subrayado).
<s>texto</s>: coloca el texto techado.
<del>texto</del>: coloca el texto eliminado (tachado)
ATRIBUTOS
tittle="nuevo": atributo que agrega un tooltip al elemento.
color="blue": atributo que agrega un color al elemento (los colores son en ingles).
width="400": atributo que agrega un ancho al elemento.
size="50": atributo que agrega una talla al elemento.
No hay comentarios:
Publicar un comentario