miércoles, 12 de diciembre de 2018

Lenguaje de marcas 1

 HOLA MUNDO

 Crear páginas web:

 Aquí añado los criterios básicos aprendidos en clase para la creacion inicial de una pagina web:
  • <html> </html> Etiqueta básica y principal de una página web
  • <head> </head> Etiqueta identificativa de la parte inicial
  • <body> </body> Etiqueta identificativa de la parte central
  • <title> </title> Etiqueta para añadir un titulo en el <head>
  • <h(nº)> </h(nº)> Etiqueta jerárquica para títulos en el <body>
  • <p> </p> Etiqueta para generar un párrafo
  • align = "(localización)"> Etiqueta para colocar horizontalmente a <p>
  • valign = "(localización)"> Etiqueta para colocar verticalmente a <p>
  • <br/> Etiqueta para generar un punto y aparte
  • <hr/> Etiqueta para generar una linea de separación
  • <table> </table> Etiqueta para generar una tabla
  • border = "(nº)"> Etiqueta para añadir borde a <table>
  • <tr> </tr> Etiqueta para generar una fila
  • <td> </td> Etiqueta para generar una columna
  • <ul> </ul> Etiqueta para generar una lista desordenada
  • <ol> </ol> Etiqueta para generar una lista ordenada
  • <li> </li> Etiqueta para generar una lista <ul> y <ol>
  • <font> </font> Etiqueta para editar el texto
  • color = "#(código)"> Etiqueta para editar color del texto a <font>
  • size = "(nº)"> Etiqueta para editar color del texto a <font>
  • <img scr = "(imagen)"/> Etiqueta para añadir una imagen
  • width = "(nº)" height = "(nº)"/> Etiqueta para editar tamaño <table> y <img>
  • <a href = "(enlace)"> </a> Etiqueta para añadir un enlace interno
  • target = "_blank"> Etiqueta para añadir un enlace externo con <a href>
  • <b> </b> Etiqueta para poner negrita en texto
  • <i> </i> Etiqueta para poner cursiva en texto
  • <u> </u> Etiqueta para poner subrayado en texto
  • <s> </s> Etiqueta para poner tachado en texto
  • <small> </small> Etiqueta para reducir el tamaño en texto
  • <big> </big> Etiqueta para aumentar el tamaño en texto
  • <big> <big> </big></big> Etiqueta para aumentar mucho el tamaño en texto
  • <sub> </sub> Etiqueta para subíndice números
  • <sup> </sup> Etiqueta para superíndice números
Todo lo anterior solo es la etiqueta  en si, ahora os pondré ejemplos para que podais haceros una idea de como funcionan exactamente de manera mas especifica:

1º Os pondré como seíia en esencia el html mas básico para una página web:

<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

Con esto ya teneis la primera parte, un html para determinar dentro todo lo que es la página web y sus distintas partes que son la parte inicial o head y la parte media final que es el body.

 2º Os pondré algunos ejemplos de cambio de tamaño, color y forma de letras:

 
<html>
<head>
    <title>Saludo</title>
</head>
<body>
    Hola <br/> Mundo
    <p>
    <br/> <b> Hoolaa Muundoo </b>
    <br/> <i> Hoolaa Muundoo </i>
    <br/> <u> Hoolaa Muundoo </u>
    <br/> <s> Hoolaa Muundoo </s>
    <br/> <font color="#7a00ff"> Hoolaa Muundoo </font>
    <br/> <font size="6"> Hoolaa Muundoo </font>
    </p>
</body>
</html>
Con esto sería el cambio de grafia

 
<html>
<head>
</head>
<body>
    <br/> <font color="#7a00ff" size="7"> Hola </font>
    <br/> <font color="#daf7a6" size="6"> Hola </font>
    <br/> <font color="#ffc300" size="5"> Hola </font>
    <br/> <font color="#ff00fc" size="4"> Hola </font>
    <br/> <font color="#900c3f" size="3"> Hola </font>
    <br/> <font color="#00d9ff" size="2"> Hola </font>
    <br/> <font color="#683700" size="1"> Hola </font>
</body>
</html>
Con esto sería el cambio de color y tamaño

 

<html>
<head>
</head>
<body>
    <p align="center">
    <font color="#2ecc71"> AMARILLO </font>
    <font color="#e74c3c"> AZUL </font>
    <font color="#2874a6"> NARANJA </font>
    <p align="center">
    <font color="#f4d03f"> NEGRO </font>
    <font color="#2874a6"> ROJO </font>
    <font color="#000000"> VERDE </font>
    <p align="center">
    <font color="#e74c3c"> MORADO </font>
    <font color="#2874a6"> AMARILLO </font>
    <font color="#2ecc71"> ROJO </font>
    <p align="center">
    <font color="#000000"> NARANJA </font>
    <font color="#e74c3c"> VERDE </font>
    <font color="#f4d03f"> NEGRO </font>
    <p align="center">
    <font color="#2ecc71"> AZUL </font>
    <font color="#2874a6"> ROJO </font>
    <font color="#000000"> MORADO </font>
    <p align="center">
    <font color="#2874a6"> VERDE </font>
    <font color="#e74c3c"> AZUL </font>
    <font color="#2ecc71"> NARANJA </font>
    <p align="center">
    <font color="#e67e22"> MARRON </font>
    <font color="#5dade2"> ROSA </font>
    </p>
</body>
</html>
Con esto sería el cambio de color y la colocación alineada al centro

3º Os pondré como sería una tabla para una pagina web:

 
<html>
<head>
    <title> Mi tabla </title>
</head>
<body>
    <table border="8" width="100%" height="600px">
        <tr height= "100px">
            <td width="30%" align="left" valign="top" bgcolor="#5dade2"> Hola </td>
            <td width="40%" align="center" valign="top" bgcolor="#e67e22"> Hola </td>
            <td width="30%" align="right" valign="top" bgcolor="#f1c40f"> Hola </td>
        </tr>
        <tr height= "400px">
            <td width="30%" align="left" valign="center" bgcolor="#e67e22"> Hola </td>
            <td width="40%" align="center" valign="center" bgcolor="#f1c40f"> Hola </td>
            <td width="30%" align="right" valign="center" bgcolor="#5dade2"> Hola </td>
        </tr>
        <tr height= "100px">
            <td width="30%" align="left" valign="bottom" bgcolor="#f1c40f"> Hola </td>
            <td width="40%" align="center" valign="bottom" bgcolor="#5dade2"> Hola </td>
            <td width="30%" align="right" valign="bottom" bgcolor="#e67e22"> Hola </td>
        </tr>
    </table>
</body>
</html>
Con esto sería una tabla bastante simple con cambios de tamaño, alineacion, conjunto de filas y columnas, coloracion de fondo casillas y bordeado
 
4º Os pondré como se añade imagenes, pasar de paginas webs a otras y dar funciones a imagenes:


<html>
<head>
    <title> Galeria de fotos </title>
</head>
<body>
    <p align="center"> <img src="imagenes/jurassicpark.jpg" width="450" height="750"/> </p>
    <p align="center"> <a href="dos.html"> <img src="imagenes/flechaderecha.png" width="200" height="100"> </a> </p>
</body>
</html>
Con esto sería insertar imagen y añadir una url a la imagen de la flecha para cambiar de página


5º Os pondré como se generan listas ordenadas y desordenadas:




<html>
<head>
    <title> Menu </title>
</head>
<body>
 <h1> Menu del dia </h1> <hr/>
 <ol>
  <li> Aperitivos </li>
      <ul> 
       <li> Aceitunas </li>
       <li> Patatas bravas </li>
      </ul>
  <li> Primero </li>
            <ul> 
       <li> Gazpacho </li>
       <li> Cocido </li>
      </ul>
     <li> Segundo </li>
         <ul> 
       <li> Chuleton </li>
       <li> Lubina </li>
      </ul>
     <li> Postre </li>
         <ul> 
       <li> Arroz con leche </li>
       <li> Tarta de queso </li>
      </ul> 
 </ol>      
</body>
</html>






Con esto sería la ordenacion de una lista de manera ordenada (numérica) y desordenada (no numérica)














Publicado por



en







































No hay comentarios:















Publicar un comentario


















        

      









Suscribirse a:
Enviar comentarios (Atom)