Formatear documento HTML

Foro de elhacker.net

Programación

Desarrollo Web (Moderador: #!drvy)

Formatear documento HTML

0 Usuarios y 1 Visitante están viendo este tema.

Páginas: [1]

Autor

Tema: Formatear documento HTML (Leído 2,695 veces)

Eleкtro

Ex-Staff

Desconectado

Mensajes: 9.866

Formatear documento HTML

« en: 21 Enero 2014, 04:07 am »

Hola

Estoy usando un website builder de tipo WYSIWYG, pero me crea un documento HTML complétamente sin indentación alguna, y como programador ...esto me resulta algo asqueroso e indecente:

Código

</style>
</head>
<body>
<div id="container">
<div id="wb_Shape1" style="position:absolute;left:519px;top:403px;width:281px;height:415px;text-align:left;z-index:4;">
<img src="images/img0001.png" id="Shape1" alt="" title="" style="border-width:0;width:281px;height:415px"></div>
<div id="wb_Shape2" style="position:absolute;left:535px;top:418px;width:249px;height:35px;text-align:left;z-index:5;">
<img src="images/img0002.png" id="Shape2" alt="" title="" style="border-width:0;width:249px;height:35px"></div>
<div id="wb_Image2" style="position:absolute;left:0px;top:129px;width:800px;height:264px;text-align:left;z-index:6;">
<img src="images/wwb_londonskyline.jpg" id="Image2" alt="" style="width:798px;height:262px;"></div>
<div id="wb_Shape4" style="position:absolute;left:0px;top:403px;width:519px;height:173px;text-align:left;z-index:7;">
<img src="images/img0003.png" id="Shape4" alt="" title="" style="border-width:0;width:519px;height:173px"></div>
<div id="wb_Text5" style="position:absolute;left:21px;top:425px;width:465px;height:92px;text-align:left;z-index:8;border:0px #C0C0C0 solid;overflow-y:hidden;background-color:transparent;">
<div style="font-family:Arial;font-size:13px;color:#000000;">
<div style="text-align:left"><span style="font-family:'Trebuchet MS';font-size:15px;color:#6CBE00;"><strong>Welcome to our website</strong></span></div>
<div style="text-align:left"><span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">Lorem ipsum dolor sit amet, autem consectetuer adipiscing elit, sed diam </span></div>
<div style="text-align:left"><span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">nonummy nibh euismod iusto tincidunt ut laoreet dolore magna aliquam erat </span></div>
<div style="text-align:left"><span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">volutpat. Ut wisi enim ad minim veniam, quis nostrud facer exerci tation </span></div>
<div style="text-align:left"><span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">ullamcorper suscipit lobortis nisl ut aliquip ex ea delenit commodo consequat.</span></div>
</div>
</div>

No hay por donde cojer el código, no se puede trabajar así.

Al igual que existen ciertos programas para formatear un documento XML (para indentarlo y colocarlo todo en su sitio siguiendo las buenas prácticas de programación) como también existen formateadores online, yo busco alguno que sea capaz de formatear un documento HTML para obtener un resultado decente y organizado como esto:

( además de los tags, nótese también la indentación y saltos de linea en los atributos )

Código

<body>
 
	<div id="container">
 
		<div id="wb_Shape1" 
		     style="position:absolute;left:519px;top:403px;width:281px;height:415px;text-align:left;z-index:4;">
 
		<img src="images/img0001.png" 
		     id="Shape1" 
		     alt="" 
		     title="" 
		     style="border-width:0;width:281px;height:4150px">
	</div>
 
	<div style="text-align:left">
 
		<span style="font-family:'Trebuchet MS';font-size:11px;color:#7B7E83;">
			erat volutpat.
		</span>
 
	</div>
 
</body>

El problema es que hay muchos softwares distintos y estoy seguro de que algunos de estos programas se deben tomar más en serio el formato del código que otros programas... por ese motivo acudo a ustedes, para no malgastar el tiempo comparando decenas de programas hasta encontrar uno que merezca la pena... ya que ustedes tienen la experiencia que yo no tengo para recomendarme un formateador de documentos HTML que se adapte a mis necesidades.

Gracias por leer!


« Última modificación: 21 Enero 2014, 04:19 am por Eleкtro »	En línea

#!drvy

Moderador

Desconectado

Mensajes: 5.855

Re: Formatear documento HTML

« Respuesta #1 en: 21 Enero 2014, 05:38 am »

Netbeans tiene su propio formateador aunque creo que no vas a querer usar un IDE pesado solo para formatear código xD.

http://ctrlq.org/beautifier/

La he usado varias veces y me va bien.. asi es como te dejaria el que has puesto:

Código

<body>
  <div id="container">
    <div id="wb_Shape1" style="position:absolute;left:519px;top:403px;width:281px;height:415px;text-align:left;z-index:4;">
      <img src="images/img0001.png" id="Shape1" alt="" title="" style="border-width:0;width:281px;height:415px">
    </div>
    <div id="wb_Shape2" style="position:absolute;left:535px;top:418px;width:249px;height:35px;text-align:left;z-index:5;">
      <img src="images/img0002.png" id="Shape2" alt="" title="" style="border-width:0;width:249px;height:35px">
    </div>
    <div id="wb_Image2" style="position:absolute;left:0px;top:129px;width:800px;height:264px;text-align:left;z-index:6;">
      <img src="images/wwb_londonskyline.jpg" id="Image2" alt="" style="width:798px;height:262px;">
    </div>
    <div id="wb_Shape4" style="position:absolute;left:0px;top:403px;width:519px;height:173px;text-align:left;z-index:7;">
      <img src="images/img0003.png" id="Shape4" alt="" title="" style="border-width:0;width:519px;height:173px">
    </div>
    <div id="wb_Text5" style="position:absolute;left:21px;top:425px;width:465px;height:92px;text-align:left;z-index:8;border:0px #C0C0C0 solid;overflow-y:hidden;background-color:transparent;">
      <div style="font-family:Arial;font-size:13px;color:#000000;">
        <div style="text-align:left">
          <span style="font-family:'Trebuchet MS';font-size:15px;color:#6CBE00;">
            <strong>
              Welcome to our website
            </strong>
          </span>
        </div>
        <div style="text-align:left">
          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
            Lorem ipsum dolor sit amet, autem consectetuer adipiscing elit, sed diam 
          </span>
        </div>
        <div style="text-align:left">
          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
            nonummy nibh euismod iusto tincidunt ut laoreet dolore magna aliquam erat 
          </span>
        </div>
        <div style="text-align:left">
          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
            volutpat. Ut wisi enim ad minim veniam, quis nostrud facer exerci tation 
          </span>
        </div>
        <div style="text-align:left">
          <span style="font-family:'Trebuchet MS';font-size:12px;color:#CED1D6;">
            ullamcorper suscipit lobortis nisl ut aliquip ex ea delenit commodo consequat.
          </span>
        </div>
      </div>
    </div>

Saludos


	En línea

https://www.youtube.com/watch?v=oqKsrSXLR98

karmany

Colaborador

Desconectado

Mensajes: 1.614

Sueñas que sueñas

Re: Formatear documento HTML

« Respuesta #2 en: 21 Enero 2014, 23:06 pm »

Ciertamente así no hay quien trabaje, el código y la indentación son horribles.

Yo no sé si lo quieres de escritorio pero actualmente la mayoría trabaja con editores WYSIWYG (suelen trabajar con javascript) en la misma web. A mi por ej, me gusta mucho TinyMCE


	En línea

Eleкtro

Ex-Staff

Desconectado

Mensajes: 9.866

Re: Formatear documento HTML

« Respuesta #3 en: 22 Enero 2014, 17:46 pm »

Cita de: @drvy en 21 Enero 2014, 05:38 am

Netbeans tiene su propio formateador aunque creo que no vas a querer usar un IDE pesado solo para formatear código xD.

http://ctrlq.org/beautifier/

Muchas gracias Drvy, pero ciértamente como has comentado no es lo que busco, el tipo de formtao que le da NetBeans es idéntico al que le puede dar cualquier formateador normalito online, para eso como bien has dicho no me apetece usar una IDE XD, aunque ...si que usaría esa IDE si fuese capaz de darle un formato más avanzado como al que a mi me gustaría, pero no es el caso.

Cita de: karmany en 21 Enero 2014, 23:06 pm

A mi por ej, me gusta mucho TinyMCE

Gracias por la recomendación, yo estoy usando WYSIWYG Web Builder y prefiero este producto que estoy usando por su semejanza con la IDE de VisualStudio y lo sencillo que es de manejar absolútamente todo de esa manera, aparte de la cantidad de templates y otros addons que existen por google para el producto.

Lo único malo es eso ...la basura de HTML que genera.

Saludos!


« Última modificación: 22 Enero 2014, 17:48 pm por Eleкtro »	En línea

Páginas: [1]

Ir a:

Mensajes similares
	Asunto	Iniciado por	Respuestas	Vistas	Último mensaje
	Como cargar una documento .html Java	EricCorona	4	5,446	10 Diciembre 2009, 21:50 pm por Blitzkrieg'
	Forma correcta de empezar un documento .html Desarrollo Web	Caster	4	2,755	23 Noviembre 2013, 23:52 pm por HackID1
	leer un documento HTML,cada etiqueta debe guardarse en un nodo de un árbol Programación C/C++	mcMario	0	1,931	12 Diciembre 2016, 02:40 am por mcMario
	Realizar un echo e ir concatenando en un documento html[RESUELTO] PHP	Xargam	1	2,204	17 Septiembre 2019, 20:24 pm por mchojrin
	Boton para ir a la cierta coordenada en otro documento HTML Desarrollo Web	UsuarioZ	4	3,767	17 Mayo 2021, 03:00 am por UsuarioZ