Hoooola a tod@s!
Hoy os traigo la ansiosa y esperada entrada de códigos de Blogger de la plantilla clásica <3 Esta a mí me resolvieron varias dudas sobre cómo colocar etiquetas, el título del blog... etc. Siento haber tardado tanto en traerla pero los exámenes y toooodo eso matan a una... x_x En fin, allá vamos~~



Los códigos de Blogger se parecen mucho al código HTML. Una diferencia importante entre ellos es que distinguen entre mayúsculas y minúsculas.

<$BlogSiteFeedLink$>: coloca la URL del feed del sitio dentro de un código <link>

Ejemplo: 
<link  rel="service.feed" type="application/atom+xml" title="Your Blog's  Title" href="http://yourblog.blogspot.com/atom.xml" />
<$BlogEncoding$>: inserta la configuración de codificación de la pestaña Opciones | Formato en una declaración de tipo de contenido.
Ejemplo:
<meta http-equiv="Content-Type" content="text/html; charset=<$BlogEncoding$>" />
<$BlogSiteFeedUrl$>: permite que el feed RSS de tu blog se descubra automáticamente mediante la compatibilidad con agregadores.

Ejemplo: 
<BlogSiteFeed>
  <link rel="alternate" type="application/rss+xml" title="RSS" href="<$BlogSiteFeedUrl$>" />
</BlogSiteFeed>
<$BlogMetaData$>: Inserta todo el metadata del blog en una sola etiqueta. 
Ejemplo: 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="generator" content="Blogger" />
<link rel="service.feed" type="application/atom+xml" title="DanoTestMule" href="http://testmule.blogspot.com/atom.xml" />
<link rel="service.post" type="application/atom+xml" title="DanoTestMule" href="http://www.blogger.com/atom/6602135" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.pyra?blogID=6602135" />
<meta name="ROBOTS" content="NOINDEX,NOFOLLOW" />
(este último código aparecerá si tu blog está configurado como no incluido en la lista).
<$BlogPageTitle$>: Asigna títulos inteligentes a las páginas del blog que has publicado ("Nombre del blog" para la página del índice, "Nombre del blog: información de fecha" a las páginas de archivo y "Nombre del blog: título de la entrada" a las páginas de entrada). Este código solo debe utilizarse en <head> de la plantilla, entre <title> y </title>.

<$BlogTitle$>: El título del blog.

<$BlogDescription$>: descripción del blog.

<Blogger> y </Blogger>: principales "códigos de contenido" del contenido de tu blog; la mayoría de los códigos siguientes deben colocarse dentro de éstos para funcionar correctamente.

<$BlogDateHeaderDate$>: colocan cabeceras de fecha en cada entrada, según la configuración definida en la pestaña Opciones | Formato.
 Ejemplo:
<BlogDateHeader>
<$BlogDateHeaderDate$>
</BlogDateHeader>

<BlogItemTitle>: colocan un Título en cada entrada, vinculado a sus respectivas URLs externas.
 Ejemplo:
<BlogItemTitle>
<BlogItemURL>
<a href="<$BlogItemURL$>"> </BlogItemURL> <$BlogItemTitle$></a></BlogItemTitle>(Elimina las líneas segunda, tercera y cuarta para desvincular los títulos.)

 <$BlogItemBody$>: contenido de la entrada.

<$BlogItemAuthor$>: autor de la entrada con nombre y apellidos.

<$BlogItemAuthorNickname$>: nombre visible del autor de la entrada.

<$BlogItemAuthorEmail$>: correo electrónico del autor de la entrada.

<$BlogItemAuthorURL$>: URL de la página principal del autor de la entrada.

<$BlogItemDateTime$>: fecha y hora de la entrada.

<$BlogItemNumber$>: el número de identificación exclusivo de la entrada.

<$BlogItemArchiveFileName$>: nombre del archivo de la entrada.

<$BlogItemPermalinkURL$>: vínculo permanente de la entrada.

 <$BlogItemControl$>: el vínculo Edición rápida de la entrada.

Entradas antiguas y entradas recientes:
<center><OlderPosts><a href="<$OlderPosts$>">ENTRADAS ANTERIORES</a></OlderPosts>
<NewerPosts><a href="<$NewerPosts$>">ENTRADAS RECIENTES</a></NewerPosts></center>
<BlogDateFooter>: Colocan pies de página de fecha en cada entrada, según la configuración definida en las pestaña Opciones | Formato.
Ejemplo:
<BlogDateFooter> Colocar aquí tu información.
</BlogDateFooter>
<BloggerArchives>: Códigos de la lista de archivos de la columna lateral.

<BloggerArchives>
<a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>
</BloggerArchives>
Códigos condicionales: [+INFO]
<MainPage></MainPage>
<ArchivePage></ArchivePage>
<ItemPage></ItemPage>
<MainOrArchivePage></MainOrArchivePage>
Código de la entrada anterior:
<BloggerPreviousItems>
<a href="<$BlogItemPermalinkURL$>">
<$BlogPreviousItemTitle$>
</a><br />
</BloggerPreviousItems>
Código de comentario. [+INFO]
<BlogItemCommentsEnabled>
<$BlogItemCommentCount$>
<$BlogItemCommentCreate$>
<$BlogItemCommentFormOnClick$>
<BlogItemComments>
<a name="<$BlogCommentNumber$>"></a>
<$BlogCommentBody$>
<$BlogCommentPermalinkURL$>
<$BlogCommentAuthor$>
<$BlogCommentDateTime$>
<$BlogCommentDeleteIcon$>
<$BlogItemCreate$>
</BlogItemComments>
</BlogItemCommentsEnabled>
Código de perfil:
<$BlogOwnerNickname$>
<$BlogOwnerFirstName$>
<$BlogOwnerLastName$>
<$BlogOwnerFullName$>
<$BlogOwnerEmail$>
<$BlogOwnerLocation$>
<$BlogOwnerAboutMe$>
<$BlogOwnerPhotoUrl$>
<$BlogOwnerProfileUrl$>

ラベル:

Hoy vamos a preparar desde cero un documento básico de HTML, es muy sencillo de realizar. Tambien sabremos el significado de algunas etiquetas y su función característica :3




Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo. (head y body) 


 La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma y contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas). El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes y contiene todo lo que el usuario ve en su pantalla y la propia cabecera.

 




He encontrado un sinfín de etiquetas y atributos que son las más utilizadas para las webs en sí. Espero que os sirvan de ayuda nwn

ETIQUETAS


Apertura
Acción
Atributos
Cierre

< !
Comentario.
Ninguno
-->

<A>
Hipervínculo.
HREF, NAME, REL, REV, TITLE
</A>

<ADDRESS>
Formato para dirección del autor.
Ninguno
</ADDRESS>

<BASE>
Url del autor; contexto del documento.
HREF
</BASE>

<BASEFONT SIZE>
Tamaño de la fuente base.
Ninguno
NO

<BGSOUND>
Sonido de fondo.
SRC, LOOP.
NO - Internet Explorer

<BIG>
Aumenta el tamaño.
Ninguno
</BIG>

<BLINK>
Hace parpadear el texto.
Ninguno
</BLINK> - Netscape

<BLOCKQUOTE>
Da formato con sangría a un párrafo
Ninguno
</BLOCKQUOTE>

<BODY>
Cuerpo del documento.
BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK
</BODY>

<BR>
Retorno de línea.
CLEAR: Se utiliza en combinación con ALIGN de IMAGE.
NO

<CAPTION>
Posición de la leyenda en una tabla.
ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER
</CAPTION>

<CENTER>
Centrar.
Ninguno
</CENTER>

<CITE>
Formato para citas en itálicas.
Ninguno
</CITE>

<CODE>
Formato en tipo código.
Ninguno
</CODE>

<DD>
Definiciones marcadas, para Lista de Definiciones <DL>.
Ninguno
NO

<DFN<
Formato en itálica.
Internet Explorer
</DFN<

<DIR>
Lista de directorio, con elementos marcados con <LI>.
Ninguno
</DIR>

<DL>
Lista de Definiciones, con términos marcados con <DT> y definiciones marcadas con <DD>.
Ninguno
</DL>

<DT>
Términos marcados, para Lista de Definiciones <DL>.
Ninguno
NO

<EM>
Formato enfatizado en itálica.
Ninguno
</EM>

<EMBED>
Sonido de Fondo.
SRC, WIDTH, HEIGHT, AUTOSTART, LOOP.
NO - Netscape

<FONT>
Definición de la fuente.
SIZE, COLOR. Internet Explorer: FACE.
</FONT>

<FORM>
Para ingreso de datos del usuario en un formulario.
ACTION, METHOD
</FORM>

<H1 ...H6>
Tamaño de letras del 1 al 6.
HTML 3.0: LEFT, CENTER, RIGHT
</H1 .../H6>

<HEAD>
Encabezamiento del documento.
BASE, TITLE, ISINDEX, NEXTID, META
</HEAD>

<HR>
Línea horizontal.
NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR
NO

<HTML>
Al principio y al fin de todo documento.
HEAD, BODY
</HTML>

<I>
Itálica (Cursiva).
Ninguno
</I>

<IMG>
Cargar imágenes.
ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE
NO

<INPUT>
Define un objeto de ingreso en un formulario.
TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED
</INPUT>

<ISINDEX>
Indica que existe un index en el server para el documento.
Netscape: PROMPT
NO

<ISMAP>
Activa la selección de imágenes para el usuario.
Ninguno
NO

<KBD>
Formato monoespaciado.
Ninguno
</KBD>

<LI>
Ítem de lista.
Netscape: VALUE, TYPE
NO

<LISTING>
Listados
Ninguno. Obsoleto.
</LISTING>

<LIT>
Literal. Como PRE, pero usa letra proporcional.
Ninguno
</LIT>

<MARQUEE>
Marquesina.
ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY.
</MARQUEE> - Internet Explorer

<MENU>
Lista menú.
Ninguno
</MENU>

<META>
Metainformación ubicada en HEAD.
EQUIV, CONTENT, NAME
NO

<NEXTID>
Es un parámetro que identifica al documento.
NO
NO

<NOBR>
Elimina los saltos de líneas.
Ninguno
NO

<OL>
Lista ordenada, con elementos marcados con <LI>.
TYPE, START, VALUE.
</OL>

<OPTION>
Opción de selección dentro de un formulario.
VALUE, SELECTED VALUE
NO

<P>
Retorno de línea, con un espacio.
Ninguno
NO

<P ALIGN>
Alineación de texto.
LEFT, CENTER, RIGHT
</P>

<PLAINTEXT>
Pasaje de texto plano.
Ninguno. Obsoleto.
</PLAINTEXT>

<PRE>
Visualiza el texto en su formato original.
WIDTH
</PRE>

<S>
Texto tachado.
Ninguno
</S>

<SAMP>
Formato tipo ejemplo.
Ninguno
</SAMP>

<SELECT>
Para selección de opciones dentro de un formulario.
NAME, SIZE, MULTIPLE
</SELECT>

<SMALL>
Disminuye el tamaño.
Ninguno
</SMALL>

<STRONG>
Formato enfatizado más fuerte que <EM>.
Ninguno
</STRONG>

<SUB>
Subíndice.
Ninguno
</SUB>

<SUP>
Superíndice.
Ninguno
</SUP>

<TABLE>
Tabla.
BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR
</TABLE>

<TD>
Celdas de una fila en una tabla, dentro de <TR>.
ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH
</TD>

<TEXTAREA>
Área para ingreso de texto dentro de un formulario.
NAME, ROWS, COLS.
</TEXTAREA>

<TH>
Título de Tabla.
ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH
</TH>

<TITLE>
Título dentro de HEAD.
Ninguno
</TITLE>

<TR>
Fila de una Tabla.
ALIGN, VALIGN
</TR>

<TT>
Formato tipo máquina.
Ninguno
</TT>

<UL>
Lista no ordenada, con elementos marcados con <LI> .
COMPACT, TYPE
</UL>

<VAR>
Formato tipo variable.
Ninguno
</VAR>

<WBR>
Se usa con NOBR para una sección que deba ser separada.
Ninguno
NO

<XMP>
Similar a PRE.
Ninguno
</XMP>

ATRIBUTOS


 Nombre
Etiqueta
Acción
Valor

HREF
Dirección del URL local o remoto.
href="www.hp.com"

LOOP
<BGSOUND>
Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1.
loop=infinite

SRC
Nombre del archivo de sonido (Internet Explorer)
src="sonido.wav"

LOOP
<EMBED>
Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1.
loop=-1

SRC
Nombre del archivo de sonido (con Crescendo)
src="sonido.mid"

SRC
<IMAGE>
Nombre del gráfico
src="imagen.gif"

ALT
Nombre que reemplaza a la imágen cuando ésta no puede ser cargada.
alt="Nombre de Imágen"

BGCOLOR
<BODY>
Color de fondo
bgcolor="#FFFFFF" (blanco)

BACKGROUND
Imágen de fondo
background="foto.gif"

TEXT
Color del texto
text="#000000" (negro)

LINK
Color de vínculo
link="#0000FF" (azul)

VLINK
Color de vínculo visitado
vlink="#FF0000" (rojo)

ALINK
Color de vínculo presionado
alink="#00FF00" (verde)

ALIGN
<CAPTION> dentro de <TABLE>
Colocar título arriba (TOP) o debajo (BOTTOM) de la tabla.
align=top

ALIGN
<H1..H6>, <P ALIGN>, <TD>, <TH>, <TR>, <DIV>,
Alinear el texto: LEFT, RIGHT, CENTER
align=center

ALIGN
<HR>
Alinear el texto: LEFT, RIGHT, CENTER
align=center

SIZE
Valor de la altura en pixels o porcentaje
size=3

WIDTH
Valor del ancho en pixels o porcentaje
width=50%

SIZE
<FONT>
Tamaño de la letra de 1 a 7
size=6

COLOR
Color de la letra
color="#000000" (negro)

FACE
Fuente del texto (Internet Explorer)
face="helv" (helvética)

HEIGHT
<EMBED>, <IMAGE>, <MARQUEE>, <TD>, <TH>
Valor de la altura en pixels o porcentaje
heigth=80

WIDTH
Valor del ancho en pixels o porcentaje
width=50%

BORDER
<TABLE>
Borde y ancho del borde en la tabla
border=5

CELLPADDING
Espacio entre el borde y el texto
cellpadding=10

CELLSPACING
Espacio entre las líneas interna y externa del borde
cellspacing=3

HEIGHT
Valor de la altura en pixels o porcentaje
heigth=80

WIDTH
Valor del ancho en pixels o porcentaje
width=50%

COLSPAN
<TD> dentro de <TABLE>
Expandir una celda varias columnas
colspan=4

ROWSPAN
Expandir una celda varias filas
rowspan=4






ラベル:


Sigamos con esto de las etiquetas y los atributos. Espero que esto os sea fácil y que lo tengaís de base por si teneis alguna duda, no necesito que lo memorices entero, pero tenerlo no está mal, ¿no? :3



Además de etiquetas y atributos, HTML define el término elemento para referirse a las partes que componen los documentos HTML. Un elemento es mucho más completo que una etiqueta, ya que suma etiquetas y atributos, y está formada por:
 

Por otra parte, el lenguaje HTML clasifica a todos los elementos en dos grupos: elementos en línea (inline elements en inglés) y elementos de bloque (block elements en inglés).

La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan el espacio disponible en la página. Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la línea. Por su parte, los elementos en línea sólo ocupan el espacio necesario para mostrar sus contenidos.


La mayoría de elementos de bloque pueden contener en su interior elementos en línea y otros elementos de bloque. Los elementos en línea sólo pueden contener texto u otros elementos en línea. En otras palabras, un elemento de bloque no puede aparecer dentro de un elemento en línea. En cambio, un elemento en línea si puede aparecer dentro de un elemento de bloque y dentro de otro elemento en línea.



Elementos en línea
Elementos de bloque
 Elementos de línea y bloque

a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var, dd, dt, frame-set, li, tbody, td, tfoot, th, thead, tr.
address, blockquote, center, dir, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul.
button, del, iframe, ins, map, object, script.


Espero que no os liés en esto, pero es más facil de lo que parece, sólo recordad la imagen que puse de ejemplo y todo irá bien >u< 

ラベル:

Ya que sabemos un poco acerca de las etiquetas y cómo se forman, vayamos a ver cuales son sus funciones en una página web, desde las más básicas a las más avanzadas.



HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los diferentes elementos que componen una página:

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var. 

Son muchas, ¿verdad? La mayoría ni sabemos para qué sirven o simplemente no se utilizan tan frecuentemente, pero es bueno saber cuántas etiquetas hay :3 A pesar de que se trata de un número de etiquetas muy grande, no es suficiente para crear páginas complejas. Algunos elementos como las imágenes y los enlaces requieren cierta información adicional para estar completamente definidos.




Aunque cada una de las etiquetas HTML define sus propios atributos, algunos de los atributos son comunes a muchas o casi todas las etiquetas. Estos son:

id = "texto" Establece un identificador único a cada elemento dentro de una página HTML
class = "texto" Establece la clase CSS que se aplica a los estilos del elemento
style = "texto" Establece de forma directa los estilos CSS de un elemento
title = "texto" Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento)

Casi siempre se utilizan id y class de forma exagerada. Sin embargo, estos atributos sólo son realmente útiles cuando se trabaja con CSS y con Javascript. (más adelante explicaré qué es cada uno)

 ¿Cómo añadir un atributo en una etiqueta?

Los atributos sirven para darle características al elemento. (añadirle la id, el estilo, su título...) Para buscar atributos genéricos, clica aquí. 

Por ejemplo:
Un elemento: <div>Esto es un div </div>

Un elemento con atributo: <div id="cajita">Esto es un div </div>

El atributo de este ejemplo sería id="cajita", y es el que definiría su id.
Se pueden añadir más de un atributo.

Por ejemplo:
<div id="cajita" style="border: 2px solid #000;" title="Ejemplo">Esto es un div.</div>

En este, sus atributos son id="cajita", style="border: 2px solid #000;" y title="Ejemplo".

Construcción de un atributo: [Ejemplo resuelto]
  1. Primero el nombre de atributo: title
  2. Seguido de un igual: =
  3. Entre comillas (") o ('), dependiendo si lo escribes en <body> o <head> añades el valor: Hola
  4. Formado sería:  title="Hola"
  5. Se añade después de la etiqueta, en este caso <div> con una separación ( ) tal que así: <div title="Hola">
Ejemplo resuelto;
<div title="Hola"></div>

ラベル:



Hellow~~ 
Hoy estreno nuevo apartado <3 Se llama [BÁSICOS] y en él os voy a ayudar un poco con el HTML y el CCS para comprenderlo un poco mejor y cómo funciona :3 Espero que os guste este viaje, y que siempre consulteís por si teneís alguna duda nwn Empecemos~~


Hoy en día se utiliza para todas las páginas una base de XTML... y me dirán a mi.. ¿Qué es eso?
HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales están formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML significan "markup language", que es como se denominan en inglés a los lenguajes de marcado.

¿Y cómo se forma? Mediante marcas (markup en inglés). Cada una de las palabras que se emplean para marcar el inicio y el final de una sección se denominan etiquetas.
Estas pueden formar el comienzo y el final de una frase, y abarcan desde una imagen hasta un párrafo por completo :3


 
 

ラベル: