Estructurando páginas web con HTML: centrando texto, cambiando tamaño de letra y añadiendo líneas divisorias

KatsuCoder · 22 Mar 2022

Hey Coders!

Tengo una duda, he estado estudiando mucho HTML5. Quiero saber como puedo estructurar una pagina web con HTML, me refiero a centrar el texto, colocar lineas, Cambiar tamaño de letra solo con HTML, " si es posible". Quiero saber si es posible hacer eso o ya tocaria usar CSS para estilizar.

Para que ustedes puedan comprehenderme, quiero darle diseño a la pagina de manera basica. Color, tamaño de Letras Lineas divisoras o algo asi.

Primeramente quiero dominar super bien HTML, antes de tocar otro lenguaje.

Me encantaría recibir sus ayudas.

Muchas Gracias Coders!

arnego2 · 22 Mar 2022

Depende del theme, platilla debe estar entre el texto como <p class="" o por css, los clases de h1 hasta h6 y texto.

YoGeekOnline · 22 Mar 2022

Con style="" lo puedes hacer. Sin embargo, no es una buena práctica y aunque debes aprender a hacerlo, no debes hacerlo en un proyecto que vayas a poner online.

La buena practica es CSS si o si. Los buscadores y exploradores te castigan por no usar una hoja de estilos aparte.

Immoral Dev · 22 Mar 2022

Usando bootstrap puedes construir un sitio web simple y bonito, solo tocando html

pmike · 23 Mar 2022

Exacto ahora la web es responsiva y no vale utilizar las tipicas tablas de siempre (<table>) yo he llevado años utilizandolas, y me las sabia de memoria, pero ahora eso no vale!!.
Lo que se tiene que utilizar es bootstrap 5 (HTML5 apoyado en CSS) y sobre todo los <div> como por ejemplo:
<div class="col"> y todo se fundamenta en esto, y es que ahora la pagina se divide por secciones que son 12 columnas.

Kevin Ramos · 23 Mar 2022

LordHenry dijo:
Usando bootstrap puedes construir un sitio web simple y bonito, solo tocando html

Exactamente! Ya que bootstrap trabaja con clases. Pero no uses stilos en el html, eso hace que tú estructura sea horrible y difícil de entender.

SEMTaurus · 23 Mar 2022

Hola katsu, me alegra que sigas esforzandote

En la antigüedad existieron etiquetas para centrar y agregar formato, pero quedaron obseletas.
Luego vinieron los estilos inline, pero ahi ya hay que usar propiedades css.
Quedate con esto: html ya no es para estructurar la presentacion de la web, sino para dar sentido semantico al contenido.

Imaginate que tienes dos div, uno con el cuerpo de un articulo y otro con un anuncio publicitario. Como un software (el que sea) puede distinguir uno del otro? O imagina que estas poniendo una tabla con datos estadisticos en una web corporativa. Como un lector de pantalla para personas invidentes va interpretar correctamente el contenido? Tiene que haber algun modo.. ahi entra html al rescate.
Es un tema complejo y muy intereresante. Te invito a investigar temas de accesibilidad y web semantica para que veas el poder de html.

Tambien te recomiendo que si ya conoces las tags basicas, sabes hacer listas, tablas y formularios, empices con css de una vez. Porque todas esas tecnologias son interdependientes.

PD: dicen las buenas practicas que el css inline da cancer.. Pero si algun dia trabajas con react veras que no es para tanto. Igual, EN PRINCIPIO separa tus estilos para que no tengas problemas.

Saludos y sigue adelante

KatsuCoder · 23 Mar 2022

Voy a abrir un nuevo hilo para leer mas respuestas, ya que me inspiraste a dudas que tengo. Abriré ese hilo con el propósito de que estés ahí como anfitrión. Me interesa saber tus pensamientos.
Da Clic Aqui moon-ra

Puko · 12 Nov 2023

directamente en las etiquetas html…

KatsuCoder dijo:
centrar el texto

<div style="justify-content: center; display: flex;">texto</div>

KatsuCoder dijo:
tamaño de letra

<div style="font-size: 88px;">texto</div>

KatsuCoder dijo:
colocar lineas,

<div style="border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;">texto</div>

KatsuCoder dijo:
Color,

<div style="color: #ddd;">texto</div>

O solo le agregas una "clase/class" al div

<div class="ejemplo">texto</div>

y al css su "selector de clase"…

.ejemplo {
text-align: center;
color: #888;
font-size: 22px;
border-top: 1px solid #444;
border-bottom: 3px solid #777;
}

previo …

AbrahamS · 2 Mar 2024

KatsuCoder dijo:
Hey Coders!

Tengo una duda, he estado estudiando mucho HTML5. Quiero saber como puedo estructurar una pagina web con HTML, me refiero a centrar el texto, colocar lineas, Cambiar tamaño de letra solo con HTML, " si es posible". Quiero saber si es posible hacer eso o ya tocaria usar CSS para estilizar.

Para que ustedes puedan comprehenderme, quiero darle diseño a la pagina de manera basica. Color, tamaño de Letras Lineas divisoras o algo asi.

Primeramente quiero dominar super bien HTML, antes de tocar otro lenguaje.

Me encantaría recibir sus ayudas.

Muchas Gracias Coders!

Realmente HTML ha dia de hoy poco uso le podrás dar en cuanto a diseño mas allá de establecer la estructura de cajas basicas que conformarán la web.

Eso sí, si lo quieres usar simplemente como experiencia para ir tendiendo un puente con otros lenguajes centrados en diseño como CSS, o creación de funciones simples con JS.

Puedes utilizar el código "inline" o las etiquetas <style> para referirte a otros tags de elementos , ids o clases.

HTML:

<style type="text/css">
<! -- Para tags de otros elementos y variable para el color -->
 p { color: red; }

<! -- Para clases  con etiqueta y variable para el tamaño de texto-->
.cajatextogrande{font-size: 35px;}
<! -- Para ids con texto centrado -->
#cajaconid{text-align: center;}
</style>
<p> Texto en rojo </p>
<div class="cajatextogrande">Texto grande</div>
<div id="cajaconid">Texto centrado</div>

Espero que te sirva, un saludo!