Diseño de foro con html. Forumcommunity.
3 participantes
Habbo Wars :: OOC :: Desechos :: ZONA OOC :: Trituradora
Página 1 de 1.
Diseño de foro con html. Forumcommunity.
por Kythmnr Vie Abr 04, 2014 7:08 pm
Saludos, ¿sabe alguien de algun tutorial para hacer foros en forumcommunity usando html? Es que quiero hacer un foro pero no tengo ni idea y leo los codigos y es chino.
Gracias.
Gracias.
Última edición por Kythmnr el Vie Abr 04, 2014 7:11 pm, editado 1 vez
Kythmnr- Mensajes : 2972
Fecha de inscripción : 15/01/2012
Localización : Desconocido.
Re: Diseño de foro con html. Forumcommunity.
por Invitado Vie Abr 04, 2014 7:10 pm
El problema es que en foroactivo ya generalmente vienen predeterminados.
Y es con CSS.
Todo depende del tipo que utilices: phbb2, phbb3, invision, etc.
Es decir, puedes meterle mano con los códigos pero es a nivel estético nada más.
Y es con CSS.
Todo depende del tipo que utilices: phbb2, phbb3, invision, etc.
Es decir, puedes meterle mano con los códigos pero es a nivel estético nada más.
Invitado- Invitado
Re: Diseño de foro con html. Forumcommunity.
por Kythmnr Vie Abr 04, 2014 7:11 pm
Ah perdon! No era foroactivo, era forumcommunity. Lo siento, fijense como no tengo ni **** idea.
Kythmnr- Mensajes : 2972
Fecha de inscripción : 15/01/2012
Localización : Desconocido.
Re: Diseño de foro con html. Forumcommunity.
por Invitado Vie Abr 04, 2014 9:44 pm
Forumcommunity es mucho mejor, sobretodo para RPG lo que sucede es que es más difícil de manejar.
Yo sabía algo pero ya se me olvidó, aunque puedo intentarlo.
Yo sabía algo pero ya se me olvidó, aunque puedo intentarlo.
Invitado- Invitado
Re: Diseño de foro con html. Forumcommunity.
por Athred Vie Abr 04, 2014 10:42 pm
HTML y las CSS es muy sencillo. Es fácil de aprender, son puras etiquetas en si. Puedes encontrar en internet varias plantillas y códigos ya hechos.
Athred- Mensajes : 1693
Fecha de inscripción : 18/08/2011
Localización : ¯\_(ツ)_/¯
Re: Diseño de foro con html. Forumcommunity.
por Micah Giett Sáb Abr 05, 2014 2:59 am
Te recomiendo este curso: http://lounge.zenva.com/product/como-programar-para-emprendedores-html-y-css/?zva_src=zenva-homepage
No necesitas saber nada. Yo lo hice y de verdad me ha ayudado mucho.
Luego de que hagas ese, es bueno que le eches un vistazo a este, el cual trae algunas cosas nuevas: https://www.youtube.com/watch?v=_93kDSPlKIM&list=PL652DDE687FC4453C
En el spoiler está explicado lo más basico de HTML, por si te sirve. Aunque admito que podría llegar a confundirte un poco, pues es una explicación bastante rápida y no es lo mismo que hacer un curso como los que puse arriba.
No necesitas saber nada. Yo lo hice y de verdad me ha ayudado mucho.
Luego de que hagas ese, es bueno que le eches un vistazo a este, el cual trae algunas cosas nuevas: https://www.youtube.com/watch?v=_93kDSPlKIM&list=PL652DDE687FC4453C
En el spoiler está explicado lo más basico de HTML, por si te sirve. Aunque admito que podría llegar a confundirte un poco, pues es una explicación bastante rápida y no es lo mismo que hacer un curso como los que puse arriba.
- Spoiler:
- Código:
HTML es el lenguaje en el que están estructuradas las páginas web. Los navegadores web leen e interpretan los documentos HTML y lo representan como una página web. Para escribir un documento HTML, no se necesita nada más que crear un archivo de texto (por ejemplo, en bloc de notas), y cambiarle la extensión a ".html". Yo, personalmente, recomiendo usar Notepad++ o Brackets para escribir código HTML.
Una vez que hayas creado tu archivo de texto, debes declararlo como documento HTML para que sea interpretado de esa manera. Esto se hace escribiendo al principio lo siguiente:
<!DOCTYPE html>
La interpretación de lo que está arriba sería algo así como "Tipo de documento: html".
El lenguaje de marcado HTML funciona por etiquetas. La mayoría de las etiquetas deben abrirse y cerrarse, y dentro de ellas se debe escribir el código correspondiente. Las etiquetas son del tipo "<etiqueta>", y se cierran con algo tipo "</etiqueta>", es decir, colocando un slash al principio.
Luego de declarar a tu documento como HTML con "<!DOCTYPE html>", debes abrir la etiqueta "<html>", y tu código quedaría de la siguiente manera:
<!DOCTYPE html>
<html>
</html>
Entre el inicio y el fin de la etiqueta "<html>", debes escribir el código de tu documento HTML en sí.
Un documento HTML tiene dos partes importantes que se deben declarar: la cabeza y el cuerpo. En la cabeza se coloca el título de la página web (lo que ves escrito en las pestañas del navegador), y algunas cosas que no se muestran propiamente en la página, sino que sirven para darle características a esta (por ejemplo, la codificación de caracteres de la página web para que sea leída correctamente por el navegador). En el cuerpo de la página va la página web como tal.
La etiqueta para la cabeza es "<head>", y la etiqueta para definir el cuerpo es "<body>". Como puedes ver, puedes entender fácilmente las etiquetas de HTML si sabes algo de inglés. Al colocar estas etiquetas, el documento HTML quedaría así:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Para que el navegador interprete correctamente tu página y se muestren todas las letras y símbolos como son, es recomendable colocar la codificación "utf-8". No te preocupes por entenderlo, simplemente tienes que copiar esto al inicio de la etiqueta "<html>": <meta charset="utf-8">
Quedaría así:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
</head>
<body>
</body>
</html>
Ahora, explicaré algunas de las etiquetas HTML. Recuerda que estas etiquetas deben ir dentro del cuerpo de la página (<body> </body>).
"<h1>" es una etiqueta para declarar un título principal. Sólo debes escribir el título entre su apertura y su cierre, de esta manera:
<h1>Título</h1>
"<h2>", "<h3>", "<h4>" son títulos y/o subtítulos de menor tamaño que los que están definidos con "<h1>". Ejemplo:
<h2>Subtítulo</h2>
"<p>" define un párrafo. Usando esta etiqueta puedes escribir texto que vaya separado de otros textos en modo de párrafos, de la siguiente manera:
<p>Párrafo 1</p>
<p>Párrafo 2</p>
"<br>" es para dar un salto de línea. No necesita cierre, sólo escribir "<br>" y el salto de línea queda declarado, así:
<h1>Título</h1>
<br>
<h2>Subtítulo</h2>
"<a>" define un link. En HTML las etiquetas pueden tener atributos. En el caso de "<a>", existen atributos como "href", que sirve para colocar la URL a la que lleva ese link, y "target", que define si el link se abre en una nueva ventana (_blank) o cosas así. Estos atributos se declaran en la apertura de la etiqueta. Ejemplo:
<a href="www.ejemplo.com" target="_blank">Link</a>
Hay dos tipos de listas que puedes hacer en HTML: ordenadas y no ordenadas. Las ordenadas se enumeran, y las no ordenadas simplemente se colocan con viñetas. Las listas ordenadas se declaran con "<ol>" y las no ordenadas con "<ul>". En ambos casos, cada elemento de la lista se declara con "<li>". Las listas ordenadas comienzan con numeración "1", pero puedes cambiarle el valor de inicio con el atributo "value", que se coloca en la apertura de la etiqueta de la lista. Ejemplo:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<ol>
<li value="5">Tarea 1</li>
<li>Tarea 2</li>
<li>Tarea 3</li>
</ol>
"<title>" sirve para definir lo que se muestra en la pestaña del navegador, es decir, el título de la página. Se coloca dentro de la cabeza del documento HTML. Ejemplo:
<title>Título de la página</title>
Los comentarios en HTML se abren con "<!--" y se cierran con "-->". Lo que escribas como comentarios no se va a mostrar ni va a alterar el código, es simplemente para dar indicaciones, describir o señalar cosas dentro del código. Ejemplo:
<!--
Comentario
-->
Aquí dejo mis apuntes de HTML y CSS... Puede resultar algo confuso xD.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Título de la página</title>
</head>
<body>
<a href="http://www.google.com" target=_blank>Click para ir a Google</a>
<p>Hola, soy un parrafo.</p>
<img src="Imagen.png" width="300" alt="Imagen" />
<!-- "alt" es para comentar imagenes; "src" es para colocar el nombre del archivo que contiene la imagen y, si la imagen esta en otra carpeta, se tiene que escribir la ruta completa del archivo; "width" es para colocar el ancho se la imagen y es opcional; "height" es para definir la altura de la imagen y, si no se usa bien con width, la imagen puede quedar desproporcionada.
-->
<br>
<table>
<!-- "table" es para definir una tabla; "tr" es para las filas; "td" es para las columnas -->
<!-- antes se solia usar la etiqueta "border" para definir un borde en la tabla, por ejemplo, " <table border="1"> ", pero actualmente esto se hace con CSS -->
<thead>
<th>Day</th>
<th>Month</th>
<th>Year</th>
</thead>
<!-- "thead" es para definir el encabezado de la tabla, y, en vez de usar "td" para definir las columnas, se usa "th" -->
<!-- la etiqueta "thead" sirve para llevar un orden y además pone en negrita el texto de las columnas, de manera que, si no se usa esta etiqueta, de igual forma se puede hacer una tabla pero no es lo ideal -->
<tbody>
<!-- "tbody" es para definir el cuerpo de la tabla -->
<tr>
<td>20</td>
<td>01</td>
<td>2014</td>
</tr>
</tbody>
<tfoot>
<!-- "tfoot" es para definir el pie de la tabla -->
<!-- Los elementos que contenga "tfoot" siempre iran al pie de la tabla, es decir, no importa si la etiqueta esta escrita arriba de "tbody" porque siempre se visualizaran sus elementos al final de la tabla -->
<tr>
<td>Pie de la tabla</td>
</tr>
</tfoot>
</table>
<br>
<form>
<div>
<!-- "form" es para formularios; "input" es para introducir algo -->
<input type="text" placeholder="Tu nombre" />
<!-- se puede introducir un valor por defecto al campo de texto con "value", por ejemplo " <input type="text" value="Valor predeterminado" " -->
<!-- "placeholder" es para escribir en el campo de texto sobre que trata el mismo, como una ayuda, o sobre lo que se debe colocar ahi -->
<!-- normalmente, cuando se utiliza "form", se coloca la dirección donde se va a procesar el formulario, por ejemplo " <form action="URL"> -->
<input type="text" placeholder="Tu apellido" />
<button type="submit">Guardar</button>
<!-- "submit" es para indicar que al hacer click en ese boton, el formulario se guarda y se envia para ser procesado -->
</div>
<div>
<!-- "div" se usa en los formularios como "br" se usa en los textos, es decir, sirve para separar como bloques -->
<input type="number" min="0" max="50" />
<!-- "number" permite seleccionar un valor numerico de una lista; se puede agregar "value" para establecer un valor predeterminado; "min" es para seleccionar un valor minimo de la lista numerica; "max" es para seleccionar un valor maximo, y junto con "min" se puede usar para definir un rango de valores -->
</div>
<div>
<input type="range" min="0" max="25" />
<!-- "range" es para colocar una barra horizontal sobre la que se puede desplazar para seleccionar un rango de valores -->
</div>
<div>
<input type="color" />
<!-- "color" permite seleccionar un color -->
</div>
<div>
<input type="date" />
<!-- "date" permite seleccionar una fecha -->
</div>
<div>
<input type="email" placeholder="Tu e-mail"/>
<!-- Valida automaticamente los correos introducidos -->
</div>
<div>
<input type="checkbox" />
<!-- Muestra una cajita en la cual, si se presiona, selecciona y muestra un check -->
Checkbox
</div>
<div>
<input type="datetime-local" />
<!-- Permite seleccionar una fecha y una hora -->
</div>
<div>
<input type="time" />
<!-- Permite seleccionar una hora -->
</div>
<div>
<input type="image" src="Imagen.png" width="80" />
<!-- Sirve para colocar la imagen del boton submit, es decir, del boton que guarda y envia el formulario para procesarlo -->
</div>
<div>
<input type="text" size="10" />
<!-- "size" specifica el tamaño, en caracteres, de un elemento input -->
</div>
<div>
<input type="email" formnovalidate="formnovalidate" />
<!-- "formnovalidate" especifica que ese input no debe ser validado -->
<!-- Es un atributo booleano, es decir, que para que no aplique se coloca " formnovalidate="" " -->
</div>
<div>
<input type="text" autocomplete="on" placeholder="Direccion" />
<!-- "autocomplete" sirve para activar o desactivar la funcion de autocompletado en un input -->
</div>
<div>
<!--
"textarea" crea un cuadro de texto grande
Si se deja espacios entre esta etiqueta, estos espacios se veran en la web
"rows" define el numero de filas
"cols define el numero de columnas
-->
<textarea rows="10" cols="20"></textarea>
</div>
<div>
<!--
"select" sirve para crear una lista de opciones
El atributo "selected" sirve para establecer una opcion como predeterminada
"option" crea una opcion
-->
<select>
<option>Opcion 1</option>
<option>Opcion 2</option>
<option selected>Opcion 3</option>
</select>
</div>
<div>
<div>
<h2>Features</h2>
<ul>
<li><a href="#">Element 1</a></li>
<li><a href="#">Element 2</a></li>
<li><a href="#">Element 3</a></li>
</ul>
</div>
<div>
<div>Important event</div>
<div>16:00 - 20:00</div>
<div>June <span>15</span></div>
</div>
<div>
<ol>
<h2>ALL OF THESE</h2>
<li>Build websites</li>
<li>Build apps</li>
<li>Build games</li>
</ol>
</div>
<div>
<img src="grafics.jpg" width="300">
</div>
<div>
<table>
<thead>
<tr>
<th>User</th>
<th>Product</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>User1</td>
<td>Good</td>
<td>6,6</td>
</tr>
<tr>
<td>User2</td>
<td>Excelent</td>
<td>9,8</td>
</tr>
<tr>
<td>User3</td>
<td>Very Good</td>
<td>7,9</td>
</tr>
</tbody>
</table>
</div>
<div>
<div>
<h2>Order Pizza</h2>
</div>
<div>
<form action="#">
<select>
<option selected>Margarita</option>
<option>Hawaiiana</option>
<option>Campestre</option>
</select>
</div>
<div>
<input type="number" min="0" >
</div>
<div>
<input type="text" placeholder="Comments" >
</div>
<div>
<button type="submit">Order</button>
</div>
</form>
</div>
<div>
<div>Caracas</div>
<div>18º</div>
</div>
<!--
Los archivos CSS externos se cargan en el codigo HTML de esta manera:
" <link href="archivo.css" rel="stylesheet"> "
-->
<!--
"id" se usa para definir un estilo para un elemento
"class" se usa para definir un estilo a un conjunto de elementos
Para dar una clase a una etiqueta: class="class1"
Para dar dos clases a una etiqueta: class="class1 class2"
Para dar un id a una etiqueta: id="id1"
Los id y las clases deben ser unicas
Esto se usa en CSS
".class1" es la forma como se coloca una clase en CSS
"#id1" es la forma como se coloca un id en CSS
-->
<!--
"font-family" es para designar la fuente de un elemento
La primera fuente que se coloca es la que se quiere usar, y las que se colocan
luego de esta es para que, por si acaso el navegador no soporta la primera fuente,
escoja la segunda, y así sucesivamente.
Es por esto que se recomienda dejar siempre de ultima a una fuente generica.
Si una fuente tiene varios espacios, se debe colocar entre comillas.
Ejemplo:
font-family: "Helvetica Neue", Arial, "Times New Roman", sans-serif;
-->
<!--
"font-weight" define el fino o grueso de la fuente.
"400" es lo mismo que "normal", y "700" es lo mismo que "bold"
Los valores van desde "100" (más fino) hasta "900" (más grueso)
El atributo "inherit" especifica que el grueso de la fuente se debe heredar del elemento "padre".
-->
<!--
"font-style" define si la fuente es de tipo "normal", "italic", "oblique" o "inherit"
-->
<!--
"@font-face" sirve para definir una fuente particular (se proporciona la url donde esta)
Ejemplo:
@font-face
{
font-family: NombreDeLaFuente;
src: url(sansation_light.woff);
}
-->
<!--
"float" sirve para hacer que un elemento se deslize o flote en la pagina.
Se puede definir como "left", "right", "inherit"
-->
<!--
":hover" es un selector y se usa para seleccionar elementos al pasar el mouse sobre ellos.
Puede definir un estilo.
Se emplea despues de una clase. Por ejemplo, si la clase es "button1", al usar ":hoover" queda asi:
" .button1:hover "
-->
<!-- ATAJO PARA EDITAR CSS
Se fija el cursor sobre la clase o id, y se presiona CTRL+E.
Esto abre una pequeña ventana para editar el CSS en el mismo documento HTML.
<!-- SOBRE MARGENES Y ANCHO DE LA PAGINA
"max-width" es para definir un ancho maximo
"min-width" es para definir un ancho minimo
"margin: 0px auto;" define un centrado horizontal, que se ve sólo si se supera el ancho maximo
-->
<!-- SOBRE LISTAS
.tile-list li
/* Se selecciona a todos y sólo a los elementos "li" con la clase "tile-list" */
/* NOTA: La clase "tile-list" ya se define aqui. Esto significa que, si se quita el "li", este estilo aplica para todas las listas con esta clase y no sólo para sus elementos "li" */
{
margin-bottom: 5px;
margin-left: 10px;
}
ul.tile-list li
/* Se selecciona a las listas tipo "ul" con la clase "tile-list", y a sus elementos "li" */
{
list-style-type: square;
}
ol.tile-list li
/* Se selecciona a las listas tipo "ol" con la clase "tile-list", y a sus elementos "li" */
{
list-style-type: disc;
}
.tile-list a
/* Se selecciona a todos y sólo a los links (a) con la clase "tile-list" */
{
color: white;
text-decoration: none;
}
-->
<!-- SOBRE TABLAS
#users-table
/* ID para estilo de tabla */
{
margin: 10px auto;
font-weight: normal;
width: 100%; /* esto es para que el ancho de la tabla ocupe todo el espacio disponible */
}
#users-table th
/* Se selecciona el encabezado de tabla (th) con el id "users-table" */
{
text-align: center;
padding: 2px;
border-bottom: 1px solid #FFFFFF; /* 1px de grosor, de tipo solido */
}
#users-table td
/* Se selecciona el cuerpo de tabla (td) con el id "users-table" */
{
text-align: center;
padding: 2px;
}
-->
</div>
</form>
</html>
Micah Giett- Mensajes : 3009
Fecha de inscripción : 18/08/2011
Edad : 31
Localización : Venezuela
Re: Diseño de foro con html. Forumcommunity.
por Kythmnr Sáb Abr 05, 2014 10:45 am
Muchas gracias, iré viendo los tutoriales y preguntando las dudas que me surjan.
PD: Micah puro chino el quote jaja.
PD: Micah puro chino el quote jaja.
Kythmnr- Mensajes : 2972
Fecha de inscripción : 15/01/2012
Localización : Desconocido.
Temas similares» [Propuesta] Actualización: Diseño de Foro / Creación de nuevo cargo
» Ideas que vienen xD // Taller Ilustración - Arte Conceptual - Diseño Industrial
» Colores HTML
» Nuevo diseño del diario
» [CONCURSO] PARA DISEÑADORES Y AFICIONADOS AL DISEÑO
» Ideas que vienen xD // Taller Ilustración - Arte Conceptual - Diseño Industrial
» Colores HTML
» Nuevo diseño del diario
» [CONCURSO] PARA DISEÑADORES Y AFICIONADOS AL DISEÑO
Habbo Wars :: OOC :: Desechos :: ZONA OOC :: Trituradora
Página 1 de 1.
Permisos de este foro:
No puedes responder a temas en este foro.