Casos de uso y Ejemplos

Casos de Uso

Principalmente es usado para el diseño de paginas web, por lo que su alcanze es relativamente limitado a comparacion de otros programas de creación de software.

Por ejemplo Google contiene un lenguaje de programación variado (JavaScript, Peyton, etc.), sin embargo este está hecho principalmente por HTML y CSS, al menos su interfaz principal. HTML se usa para definir la estructura de la página, como el logo, la barra de búsqueda y los botones, mientras que CSS se utiliza para dar estilo y formato a esos elementos, controlando el aspecto visual.

Trello es un software de administración de proyectos con interfaz web utilizado para controlar el flujo de trabajo, equilibrar procesos, limitar la cantidad de trabajo y aumentar la productividad.

Esta misma página de la presentación se encuentras hecho mismamente con un lenguaje de programación de HTML y CSS.

Ejemplos:

Aquí tenemos varios ejemplo de código de diferentes elementos:

<html>

<head>
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
  
    <style>
#glenplayer02 {
    position: relative;
    top: 0px;
    left: 5px;
    display: flex;
    z-index: 99;
    width: 473px;
    margin-left: 6px;
    margin-top: -12px;
    width: 475px;
}
 
#glenplayer02 {
  position:relative;
  top:0px;
  left:5px;
  display:flex;
  z-index:99;
  }

#glenplayer02 a {text-decoration:none;}
                
#glenplayer02 > div {
  align-self:center;
  -webkit-align-self:center;
  }
                
.music-controls {
  user-select:none;
  -webkit-user-select:none;
  width:13px;
  font-size:18px;
  cursor:pointer;
  }
                
.playy, .pausee {color:#ffd2e3; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;} /* color of play & pause buttons */
                
.pausee {display:none;}
                
.sonata {
  font-family: "Kodchasan", sans-serif;
  font-size: 14px;
  color: black;
  font-weight: lighter; /* color of music note symbol */
  margin-left: 9px;
  width: 80057px;
  }
                
.labeltext {
    display: inline-block;
    overflow: hidden;
    text-align: initial;
    white-space: nowrap;
    color: #ffd2e3;
    width: 457px;/* color of song title */
                }
    </style>
  </head
  
  <body>
<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy">►</div>
<div class="pausee">♬</div>
</div>
<div class="sonata"> <marquee> Sleeping With Sirens - Your Nickel Ain't Worth My Dime</marquee> </div>
<div class="labeltext"></div>
</div>
<audio id="tune" src="https://files.catbox.moe/8xy5v4.mp3" audio=""></audio>
<div class="labeltext"> </div>
  </body>
  
</html>

►

♬

Sleeping With Sirens - Your Nickel Ain't Worth My Dime

<html>
<head>
<style>
  .bounce mark {
    z-index: 99;
    animation: bounce-anim 2s infinite;
    animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1) width:auto;
    background: none;
    
    
  }

.bounce mark:nth-child(1) {
    animation-delay: 0s;
    display: inline-block;
  }

.bounce mark:nth-child(2) {
    animation-delay: 0.2s;
    display: inline-block;
  }

.bounce mark:nth-child(3) {
    animation-delay: 0.4s;
    display: inline-block;
  }

.bounce mark:nth-child(4) {
    animation-delay: 0.6s;
    display: inline-block;
  }

.bounce mark:nth-child(5) {
    animation-delay: 0.8s;
    display: inline-block;
  }

.bounce mark:nth-child(6) {
    animation-delay: 1s;
    display: inline-block;
  }

.bounce mark:nth-child(7) {
    animation-delay: 1.2s;
    display: inline-block;
  }

.bounce mark:nth-child(8) {
    animation-delay: 1.4s;
    display: inline-block;
  }

.bounce mark:nth-child(9) {
    animation-delay: 1.6s;
    display: inline-block;
  }

.bounce mark:nth-child(10) {
    animation-delay: 1.8s;
    display: inline-block;
  }

@keyframes bounce-anim {
    0% {
      transform: scale(1, 1) translateY(0);
    }

10% {
      transform: scale(1.1, .9) translateY(0);
    }

30% {
      transform: scale(.9, 1.1) translateY(-30px);
    }

50% {
      transform: scale(1.05, .95) translateY(0);
    }

60% {
      transform: scale(1, 1) translateY(-4px);
    }

100% {
      transform: scale(1, 1) translateY(0);
    }
  }
</style>
</head>
<body>
<div class="bounce"><mark>I</mark><mark>n</mark><mark>s</mark><mark>e</mark><mark>r</mark><mark>t</mark> <mark>h</mark><mark>e</mark><mark>r</mark><mark>e</mark></div>
<div style="font-size: 1.5em;">
</div>
</body>
</html>

Hola Mundo

Página Anterior!

Siguiente Página!