Lenguaje "HTML"
- Definiciones:
- Lenguaje de
marcado o de marcas:
- Lenguaje HTML
- Características
principales:
- Como usarlo:
- Etiquetas más
importantes:
- Ejemplo:
1. Definiciones:
1.1. Lenguaje de
marcado o de marcas: es una forma de codificar un documento que, junto con
el texto, incorpora etiquetas o
marcas que contienen información adicional acerca de la estructura del texto o
su presentación.
1.2. Lenguaje HTML: hace referencia
al lenguaje de marcado más utilizado para
la elaboración de páginas web. Es un
lenguaje muy fácil e intuitivo de utilizar
2. Características Principales:
- Para la distribución correcta de una página web
en HTML debemos de tener nuestro fichero .html (en el cual colocamos las
principales y el texto del sitio Web) y un fichero .css (en el cual indicamos
el formateo que lleva dicho texto o diseño del sitio Web).
- Está estandarizado y casi todos los navegadores
respetan, y reproducen dicho lenguaje.
- Hay diferentes versiones, la más utilizada hoy día
es HTML 4, aunque también se usa HTML 5 (que todavía está en desarrollo, pero
está bastante avanzado como para su uso).
3. Cómo usarlo:
- Cómo ya nombre arriba, es muy fácil de usar, teniendo previamente algunos
conocimientos sobre tal.
- Su programación se puede llevar a cabo en cualquier procesador de Textos,
mismamente en el editor de textos de Windows.
- Para abrir una etiqueta es tan sencillo como, <html> ; y para
cerrla </html>
- Ejemplo de su uso; vamos a usarlo en el note pad ++.
- Abrimos note pad ++ :
- Escribimos el código que necesitemos y damos doble clic sobre el archio
- Ejemplo de su uso; vamos a usarlo en el note pad ++.
- Abrimos note pad ++ :
- Sitio Web Vista desde el navegador:
4. Etiquetas
más importantes:
• html).....(/html): Es una etiqueta
cerrada que determina el inicio del documento html. Todas las demás etiquetas
que contiene un documento html, para que sean reconocidas por los navegadores
WEB deben estar incluidas dentro de estas dos instrucciones.
• (head)....(/head): Esta etiqueta
determina la cabecera del documento dentro del encabezado pueden ir otras
etiquetas como (title)(/title) ó (meta).
• (title)....(/title): Es una
instrucción cerrada donde se incluye el título de la pagina web.
• (meta): instrucción que es abierta,
sirve para indicar el contenido y las palabras clave de la página web.
• (!-- Comentarios --): Para incluir
comentarios en la página web se utiliza esta instrucción.
• (body)....(/body): Dentro de esta
instrucción cerrada, es donde va a ir todo el contenido que queramos que tenga
nuestra página web. Dentro de sus atributos importantes encontramos:
background="nombre del fichero", Para colocar una imagen como fondo
de la página. bgcolor="black", Para colocarle un color de fondo a
nuestra página, en este caso el color será el negro pero puede variar.
text="white", Indica un color para el texto que incluyamos en nuestro
documento, en este caso será blanco, pero por defecto es negro.
• (center)....(/center): Con esta
etiqueta cerrada, puedo centrar en mi pagina todos los objetos que inserte
entre el inicio y el final del la instrucción.
• (h1)....(/h1): En html existen
diferentes tipos de cabeceras, El uso de esta instrucción puede ser útil para
poner el título, pero los tipos de titulo pueden ser mas pequeños utilizando
las etiquetas (h2), (h3), (h4), (h5).
• (p)....(/p): Es una instrucción
cerrada, se usa para indicar los atributos de un párrafo en concreto y para un
cambiar de un párrafo a otro. el parámetro align="center" que indica
la forma de justificar el párrafo.
• (font)....(/font): Esta etiqueta
permite determinar la fuente que queremos que tengan nuestros títulos o
párrafos dentro de la página web. Entre los principales atributos encontramos:
size="5", para determinar el tamaño de la fuente.
face="Tahoma", para determinar el tipo de fuente en este caso es
Tahoma, pero puede ser Verdana, Arial u otra. color="yellow", para
determinar el color de la fuente, en este caso será amarillo pero puede ser otro
color.
• (b)....(/b): Permite mostrar el
texto en negrita.
• (i)....(/i): Permite mostrar el
texto en cursiva.
• (u)....(/u): Permite mostrar el
texto subrayado.
• (a)....(/a): Un hiperenlace es un
elemento que permite el acceso a otro recurso, página web o archivo. Para
incluirlos en nuestra pagina se utiliza esta instrucción, esta directiva tiene
el parámetro href que indica el lugar a donde nos llevará el hiperenlace si lo
pulsamos. Para ver las otras ventanas del hipervínculo tenemos el parámetro
target, que puede tener los siguientes valores: _blank, _self, _top.
• (ol)....(/ol): Se utiliza para
trabajar con listas numeradas..
• (ul)....(/ul): Se utiliza para
listas sin numerar.
• (table)....(/table): Esta
instrucción nos permite representar tablas.
• (tr)....(/tr): Para indicar donde
comienza y donde termina una fila de la tabla.
• (th)....(/th): sirve para definir
las celdas que componen, indica una celda de cabecera, el contenido será resaltado
en negrita y en un tamaño ligeramente superior al normal.
• (td)....(/td): También sirve para
definir las celdas que componen la tabla, indica una celda normal.
5. Ejemplo:
- Código HTML creación de listas numeradas numéricamente y alfabéticamente.
HTML>
<HEAD>
<TITLE>
Ejercicio3_danielpedrajas
</TITLE>
<HEAD>
<BODY>
<h1> <FONT COLOR="#00008F"> Realizando pruebas con listas ordenadas y desordenadas </FONT> <hr> <br>
<h3> <Font Color="#0000FF"> Lista numérica </Font>
<OL>
<LI> Representación de la Información </li>
<ol Type=A>
<li> Sistema numéricos Decimal.</li>
<li> Sistema numéricos Octal.</li>
<li> Sistema numéricos Hexadecimal.</li>
<ol Type=a>
<li>Conversación Heaxadecimal-Octal.</li>
<li>Conversación Octal-Hexadecimal.</li>
</ol>
</ol>
<LI>Procesos y Hebras.</li>
<ol Type=A>
<li>¿Qué son los procesos? ¿Cómo funcionan?</li>
<li>¿Qué son las Hebras? ¿Cómo funcionan?</li>
<li>Comunicación entre procesos y hebras.</li>
<ol Type=a>
<li>Paso de mensajes.</li>
<li>Buzones.</li>
</ol>
</ol>
<li>Hardware y Software.</li>
<LI>Sistema Operativo Windows XP.</li>
<li>Sistema Operativo Windows 7.</li>
<li>Sistema Operativo Linux.</li>
</OL>
<p>
</p>
<h3> <Font Color="#0000FF"> Lista no numérica </Font>
<ul>
<LI> Representación de la Información</li>
<Ul type=Circle>
<li> Sistema numéricos Decimal.</li>
<li> Sistema numéricos Octal.</li>
<li> Sistema numéricos Hexadecimal.</li>
<ul Type=square>
<li>Conversación Heaxadecimal-Octal.</li>
<li>Conversación Octal-Hexadecimal.</li>
</ul>
</ul>
<LI>Procesos y Hebras.</li>
<ul Type=circle>
<li>¿Qué son los procesos? ¿Cómo funcionan?</li>
<li>¿Qué son las Hebras? ¿Cómo funcionan?</li>
<li>Comunicación entre procesos y hebras.</li>
<ul Type=square>
<li>Paso de mensajes.</li>
<li>Buzones.</li>
</ul>
</ul>
<li>Hardware y Software.</li>
<LI>Sistema Operativo Windows XP.</li>
<li>Sistema Operativo Windows 7.</li>
<li>Sistema Operativo Linux.</li>
</uL>
</BODY>
</HTML
- Resultado Final:
- Código HTML creación de listas numeradas numéricamente y alfabéticamente.
HTML>
<HEAD>
<TITLE>
Ejercicio3_danielpedrajas
</TITLE>
<HEAD>
<BODY>
<h1> <FONT COLOR="#00008F"> Realizando pruebas con listas ordenadas y desordenadas </FONT> <hr> <br>
<h3> <Font Color="#0000FF"> Lista numérica </Font>
<OL>
<LI> Representación de la Información </li>
<ol Type=A>
<li> Sistema numéricos Decimal.</li>
<li> Sistema numéricos Octal.</li>
<li> Sistema numéricos Hexadecimal.</li>
<ol Type=a>
<li>Conversación Heaxadecimal-Octal.</li>
<li>Conversación Octal-Hexadecimal.</li>
</ol>
</ol>
<LI>Procesos y Hebras.</li>
<ol Type=A>
<li>¿Qué son los procesos? ¿Cómo funcionan?</li>
<li>¿Qué son las Hebras? ¿Cómo funcionan?</li>
<li>Comunicación entre procesos y hebras.</li>
<ol Type=a>
<li>Paso de mensajes.</li>
<li>Buzones.</li>
</ol>
</ol>
<li>Hardware y Software.</li>
<LI>Sistema Operativo Windows XP.</li>
<li>Sistema Operativo Windows 7.</li>
<li>Sistema Operativo Linux.</li>
</OL>
<p>
</p>
<h3> <Font Color="#0000FF"> Lista no numérica </Font>
<ul>
<LI> Representación de la Información</li>
<Ul type=Circle>
<li> Sistema numéricos Decimal.</li>
<li> Sistema numéricos Octal.</li>
<li> Sistema numéricos Hexadecimal.</li>
<ul Type=square>
<li>Conversación Heaxadecimal-Octal.</li>
<li>Conversación Octal-Hexadecimal.</li>
</ul>
</ul>
<LI>Procesos y Hebras.</li>
<ul Type=circle>
<li>¿Qué son los procesos? ¿Cómo funcionan?</li>
<li>¿Qué son las Hebras? ¿Cómo funcionan?</li>
<li>Comunicación entre procesos y hebras.</li>
<ul Type=square>
<li>Paso de mensajes.</li>
<li>Buzones.</li>
</ul>
</ul>
<li>Hardware y Software.</li>
<LI>Sistema Operativo Windows XP.</li>
<li>Sistema Operativo Windows 7.</li>
<li>Sistema Operativo Linux.</li>
</uL>
</BODY>
</HTML
- Resultado Final:
No hay comentarios:
Publicar un comentario