2018-02-16

Etiqueta base


Definición

La etiqueta <base> se utiliza para definir la URL por defecto que se utilizara en todo el documento  en la cual solo puede haber una etiqueta <base> y debe ir ubicada dentro de la etiqueta <head> </head> del documento. No posee etiqueta de cierre y la mejor manera de colocar es <base />.

Sus posibles atributos son

  • href => que indica el URL por defecto.
  • target => como el URL actuara al darle click ( _blank, _self, _parent, _top)
EJEMPLO

<!-- Documento -->
<html>
<head>
     <title>Mi pagina WEB</title>
     <base target="_blank" href="https://kwards.blogspot.com/"/ >
</head>
<body>
   
     <a href="https://kwards.blogspot.com/2018/02/etiqueta-base.html">
         Etiqueta base
     </a>
   
</body>
</html>

RESULTADO
Mi pagina WEB Etiqueta base


Esta etiqueta es muy funcional para cuando queremos separar los enlaces pertenecientes a paginas web diferente a la nuestra.
Antonio Hernandez Web Developer

2018-02-15

Etiqueta b


Definición
La etiqueta <b> del ingles "bold" ó negrita. Es de tipo en-linea y sirve para marcar un texto en negrita al igual que la etiqueta <strong>. Posee etiqueta de cierre </b>

<!-- CSS por defecto -->
b{
    font-weight: bold;
}

Ejemplos

Tomaremos como texto de ejemplo un párrafo del principio de la termodinámica, cabe  destacar que como es un párrafo debe ir dentro de la etiqueta <p></p>.

<p>
El <b>primer principio de la termodinámica</b> o <b>primera ley de la termodinámica</b> es un principio que refleja la conservación de la energía en el contexto de la termodinámica.
</p>

Resultado

El primer principio de la termodinámica o primera ley de la termodinámica es un principio que refleja la conservación de la energía en el contexto de la termodinámica.

La etiqueta <b> puede llevar los siguientes atributos:

  • title => agrega un texto informativo
  • id => le da un nombre unico
  • class => asigna nombres de clases
  • style => agrega estilos css 
  • lang => especifica el idioma del texto (si no se coloca, por defecto el navegador agrega desconocido)
  • dir => indica la dirección del texto. 
Antonio Hernandez Web Developer

2018-02-10

Etiqueta address


Definición

La etiqueta <address> en HTML es utilizada para dar a conocer información acerca de un contacto relacionado con el contenido del articulo publicado, por ejemplo el autor o autores de un articulo determinado. Posee etiqueta de cierre </address>

<!-- css por defecto de la etiqueta -->
address{
       font-style: italic;
       display: block;
}
Ejemplos

Tomaremos de ejemplo la información personal del soldado, novelista, poeta y dramaturgo Miguel de Cervantes.
<!-- CODIGO -->
<address>
       <a href="https://es.wikipedia.org/wiki/Miguel_de_Cervantes">
            Miguel de Cervantes
       </a><br/>
       Nació 29 de Septiembre de 1547 Alcalá de Henares, España.<br/>
       Falleció a sus 68 años el 22 de abril de 1616 ​Madrid, España.<br/>
</address>

Miguel de Cervantes
Nació 29 de Septiembre de 1547 Alcalá de Henares, España.
Falleció a sus 68 años el 22 de abril de 1616 ​Madrid, España.

Aunque la etiqueta posee parecido los estilos "css" que las etiquetas <i> e <em> cuando se trata de información de contacto es recomendable usar la etiqueta <address>.
Antonio Hernandez Web Developer

2018-02-07

Etiqueta acronym


Definición

<acronym>  permite marcar un acrónimo o siglas que se lee como palabra, es muy parecido a la etiqueta <abbr>. Posee etiqueta de cierre </acronym>.

Ejemplos de acrónimos conocidos.

  • UNESCO => United Nations Educational, Scientific and Cultural Organization.
  • DNA => Deoxyribonucleic acid.
  • FIFA => Federación Internacional de Futbol.
  • DVD => Digital Video Disc.

Para poder colocar la forma extendida con la etiquete acronym se utiliza el atributo html (title=""), para definir el idioma se utiliza el atributo html (lang=""), ademas puede utilizarse el atributo html (dir="") que indica la dirección del texto. el atributo dir solo puede llevar de valor "ltr" o "rtl".

<!-- Estilo css por defecto -->
acronym[title]{
        text-decoration:underline dotted;
}

Ejemplos


<!-- Con el atributo title -->

<acronym title="Digital Video Disc">DVD</acronym>

Resultado: DVD

<!-- Con los atributos title, lang, dir -->

<acronym title="United Nations Educational, Scientific and Cultural Organization" lang="en" dir="rtl">DVD</acronym>

Resultado: UNESCO

La etiqueta <acronym> y la etiqueta <abbr> suele causar confusión a la hora de utilizarse, ya que es un poco confuso saber si la palabra es un acrónimo o abreviatura.

Antonio Hernandez Web Developer

2018-02-06

Etiqueta abbr


Definición

<abbr> (Elemento de abreviación HTML) permite representar una abreviatura tales como "www","http","etc","url"; entre otras. posee el atributo (title) y este debe llevar el significado o descripción de lo abreviado. Posee etiqueta de cierre </abbr>

<!-- css por defecto -->

abbr{
   display:inline;
}

NOTA: en algunos navegadores el estilo por defecto lleva un subrayado de puntos, o tambien lo transforma en minuscula... para evitar este tipo de estilos se debe agregar el atributo css con su valor  "text-decoration: none"

<!-- css con el texto subrayado -->

abbr[title]{
   text-decoration:underline dotted;
}

Ejemplos

<!-- Con estilos css por defecto -->
redirigiremos a la etiqueta <a href="https://kwards.blogspot.com/2018/02/etiqueta-abbr.html"> <abbr  title="Elemento de Abreviación Html">"abbr"</abbr> </a>

<!-- Con text-decoration:none -->

redirigiremos a la etiqueta <a href="https://kwards.blogspot.com/2018/02/etiqueta-abbr.html"> <abbr  title="Elemento de Abreviación Html"  style="font-variant:none">"abbr"</abbr> </a>

Resultado
<!-- Con estilos css por defecto -->
redirigiremos a la etiqueta  "abbr"

<!-- Con text-decoration:none -->
redirigiremos a la etiqueta "abbr"


Antonio Hernandez Web Developer

2018-01-26

Etiqueta a


Definición

La etiqueta a (anchor) en HTML se utiliza para agregar enlaces externos, propios ó cualquier otra URL. Los navegadores suelen interpretar el texto que presente la etiqueta "a" con un color azul y subrayada (posee etiqueta de cierre).

<!-- css por defecto -->

a{
   color: rgb(0,0,238);
   cursor:pointer;
   text-decoration:underline;
}

Principales atributos

La etiqueta posee el atributo "href"  que es donde se coloca la dirección a que pagina se redirigirá (hipervinculo), "rel"  que indica la relación que posee el objeto destino con el objeto de enlace, "target"  indica en que lugar se va abrir la dirección asignada.

Codigo: <a href="#">Este es un enlace externo con el atributo 'href'</a>
Resultado: Este es un enlace externo

Codigo: <a href="#" rel="external" target="__blank">Este es un enlace externo con los atributos 'href, rel, target'</a>
Resultado: Este es un enlace externo

El atributo "rel" se refiere al tipo de link y su relación con el destino del objeto, los valores que lleva este atributo ya están definidos y pueden ser.


  • alternate (alterno): define un hipervinculo  alternativo.
  • archives (archivos): define que el hipervinculo lleva a un archivo.
  • author (autor): proporciona un hipervinculo que lleva a información del autor.
  • bookmark (marcador): marca un solo articulo de varios existentes.
  • canonical (canónico): ayuda a evitar contenido duplicado y mejora la optimización de búsqueda.
  • external (externo): indica un hipervinculo que lleva fuera del sitio web.
  • firts (primero): indica el primer recurso de una secuencia.


Antonio Hernandez Web Developer

2018-01-24

iframe



Antonio Hernandez Web Developer

Sintaxis HTML


HTML, sus siglas en ingles(HyperText Markup Language). Es un lenguaje de etiquetas base para la creación de paginas web. Toda etiqueta de HTML va dentro de corchetes angulares (<,>).

La escritura de este lenguaje de etiquetas conlleva a una de apertura y una de cierre.

Apertura (color azul)

<nombre-del-elemento>

Cierre (color rojo)

</nombre-del-elemento>

Nota: La de cierre lleva el mismo nombre que la apertura de la etiqueta.

Como hemos observado la apertura posee entre los corchetes angulares el nombre del elemento. Mientras que el cierre posee una pleca ( / ) antes del nombre del elemento, Esto no todo el tiempo es así ya que en HTML existes etiquetas que no poseen cierre; como el caso de la etiqueta para insertar imagen. En estos casos para una sintaxis limpia se le coloca la pleca al final del nombre del elemento.

<img src="dirección-de-imagen"/>

Una etiqueta HTML posee elemento y  atributos. una etiqueta puede llevar varios atributos.

Nota: la sintaxis del atributo puede ir nombreAtributo="valor" ó nombreAtributo='valor'

<nombre-del-elemento atributo="valor"> </nombre-del-elemento>

Veremos como ejemplo la etiqueta párrafo de HTML que se escribe de la siguiente manera.

<p style="background:#80bfff">Este es un párrafo de ejemplo </p>

Resultado: Este es un párrafo de ejemplo

Como podemos ver en la etiqueta párrafo de HTML posee elemento(p) y un solo atributo(style).

Ahora que ya conocemos un poco sobre la escritura de una etiqueta HTML podemos pasar a ver la estructura de una pagina web.

Principalmente toda pagina web escrita en este lenguaje tiene que empezar con la etiqueta html seguido de sus dos partes principales.

La cabecera, que se escribe con la etiqueta head: es donde ira la parte del documento que no se mostrara. Las etiquetas para agregar documentos css externos,código javascript. El titulo de la Web y su respectivo icono o mejor conocido como favicon.

Cuerpo, que se escribe con la etiqueta body: es donde ira todo lo que se mostrara de la pagina web, este incluye menú, barras laterales, contenido principal entre otros.

Ejemplo de la estructura de un documento HTML

<html>
     <head>
          <title>Nombre de web</title>
     </head>
     <body>
          <p>Este es un ejemplo de un documento HTML</p>
     </body>
</html>

Siguiendo con la sintaxis HTML estas poseen parentesco. así como una persona posee a su padre, hermanos, hijos. En el ejemplo de la estructura de un documento HTML podemos observar a simple vista el parentesco. La etiqueta html dentro de ella se encuentran sus hijos que son head y body asi mismo head y body son hermanos y estas poseen su propios hijos.

El siguiente esquema ejemplifica como funciona el parentesco.

parentesco html

Nota: HTML no distingue entre minúsculas y mayúsculas. tanto que escribir <p>Este es un Párrafo</P>  a html le da igual, sigue siendo una etiqueta de párrafo. pero lo mas adecuado y aconsejable es escribirlo en minúscula. ya que trae problemas de lectura al convivir con código (XML)

HTML posee entidades ó caracteres especiales.  las vocales con tilde entre otros  no pueden ser leídos correctamente. así que poseen entidades que las distingue de otros caracteres, estas comienzan con el signo ampersand (&) y terminan con punto y coma (;)

Tabla de entidades HTML

Carácter
Entidad HTML
©
&copy;
á
&aacute;
é
&eacute;
í
&iacute;
ó
&oacute;
ú
&uacute;
ü
&uuml;
ñ
&ntilde;
¡
&iexcl;
¿
&iquest;
á
&Aacute;
é
&Eacute;
í
&Iacute;
ó
&Oacute;
ú
&Uacute;
ü
&Uuml;
ñ
&Ntilde;

Antonio Hernandez Web Developer

Utilizar cualquier menú en platillas blogger


Para poder utilizar los menús que se compartirán en WAREZ primero tienes que resetear los valores por defecto que trae las plantillas blogger.

En la barra de blogger nos dirigimos a (Tema)


dentro de ahí nos dirigimos al boton  Como muestro en la imagen.


Dentro del editor HTML presionamos la combinación (ctrl+g) o (ctrl+f) para activar el buscador de palabras.


y dentro de ahí colocamos el siguiente linea b:section class='tabs' id='crosscol' maxwidgets='1' . y les encontrara el código que muestro abajo

<b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'/>

(class='tabs') tienen que eliminarlo.

Luego de haber eliminado el código anterior en el buscador de palabras colocaran /* Tabs
y les encontrara el siguiente código.
la parte azul deberá ser sustituida por el código verde de mas abajo.



/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

 .tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}


#crosscol ul {
z-index: 200; 
padding:0 !important;
}
#crosscol li:hover {
position:relative;
}

Ya realizando todo estos pasos, ya puedes utilizar cualquier menú en las platillas diseñadas por blogger.
Antonio Hernandez Web Developer

Menu horizontal



ATENTO: Si Tú plantilla fue hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

En mi primer entrega les traigo un menú horizontal para blogger.

Lo primero que tenemos que hacer es colocar el estilo CSS dirigiendonos en el menú principal de blogger. en la apartado (Tema), como muestro en la siguiente imagen.


Luego nos dirigimos hacia el boton (Personalizar)



Dentro de las personalización nos dirigimos hacia (Avanzado)=>(Añadir css).


Y pegamos el siguiente código.


/*MENU
----------------------------------------*/
#menu{
margin:5px;
 width:100%;
 background:#99b3ff;
}
#menu>ul{
display: flex;
-ms-display:flex;
list-style: none;
position: relative;
}
#menu ul li{
position: relative;
padding: 10px 15px; /*Relleno*/
cursor: pointer;
background-color: #99b3ff; /*Color de fondo*/
}
#menu ul li:hover{
background-color: #b3c6ff;
}
#menu>ul li:first-child{
border-radius:4px 0px 0px 4px;
}
#menu>ul li:last-child{
border-radius: 0px 4px 4px 0px;
}
#menu ul li a{
text-decoration: none;
color:#e6ecff;
}
#menu ul li a:visited{
color:#e6ecff;
}
#menu ul li a:hover{
color: #ccd9ff;
}
#menu ul li>ul{
position: absolute;
list-style: none;
margin-left: -55px;
display: none;
margin-top: 15px;
}
#menu ul li>ul:after{
content: "";
position:absolute;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #99b3ff transparent;
bottom: 100%;
left: 25%;
}
#menu ul li>ul:before{
content: "";
position: absolute;
bottom: 100%;
left: 25%;
border:5px solid transparent;
padding:0 80px;
}
#menu ul li>ul li{
padding: 5px 10px;
margin:0px 5px 0px 5px;
position: relative;
width: 150px;
display: block;
background-color: #99b3ff;
}
#menu ul li:hover>ul{
display: block;
}
#menu ul li>ul li:first-child{
border-radius: 4px 4px 0px 0px;
}
#menu ul li>ul li:last-child{
border-radius: 0px 0px 4px 4px;
}

Damos click en el botón (Aplicar al blog) que se encuentra en la esquina superior derecha.

Luego de haber aplicado el estilo css dos dirigimos en el menú principal de blogger apartado (Diseño).


 Ya estando en el editor por debajo de cabecera se encuentra Multicolumnas. agregamos un nuevo gatget
HTML/JavascriptAñadir



Y colocamos el siguiente código HTML
 <div id="menu">
<ul>
<li>
<a href="#">
Menu
</a>
</li>
<li>
<a href="#" style="">
Menu & submenu
</a>
<ul>
<li>
<a href="#">Submenu</a>
</li>
<li>
<a href="#">Submenu</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu</a>
</li>
<li>
<a href="#">Menu & submenu</a>
<ul>
<li>
<a href="#">Submenu</a>
</li>
</ul>
</li>
</ul>
</div>


con esto ya tendríamos el menú en nuestros blogger, para hacerlo funcionar correctamente debes cambiar  lo  siguiente.

Para el titulo de cada apartado del menu cambiar lo que esta en rojo por la palabra que desees

/* EJEMPLO*/
<li>
  <a href="#">Menu</a>
</li>

<li>
  <a href="#">Inicio</a>
</li>

Y para cambiar la dirección del menú el HASH que se encuentra en azul

<li>
  <a href="#">Menu</a>
</li>

<li>
  <a href="http://kwards.blogspot.com/2018/01/menu-horizontal.html">Inicio</a>
</li>

Con esto ya tendrías tu menú horizontal  en tu Blogger. si te fue de ayuda, te invito a suscribirte y estar pendiente de los siguientes tutoriales para blogger.




Antonio Hernandez Web Developer

Presentación del blog


Mi nombre es Cristian Escalante, Estudiante de Ingeniería Química.
La razón por la que empiezo este blog, es para compartir un poco de mis conocimientos en html,css.

Compartiendoles códigos, explicaciones sobre estos lenguajes, errores que pueden ocurrir, entre otros. espero que sea de interés alguno y coloquen en su barra de marcadores del navegador preferido el acceso directo hacia mi blog.
Antonio Hernandez Web Developer