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

  • Autor Autor KatsuCoder
  • Fecha de inicio Fecha de inicio

KatsuCoder

Alfa
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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!
 
Depende del theme, platilla debe estar entre el texto como <p class="" o por css, los clases de h1 hasta h6 y texto.
 
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.
 
Usando bootstrap puedes construir un sitio web simple y bonito, solo tocando html
 
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.
 
LordHenry dijo:
Usando bootstrap puedes construir un sitio web simple y bonito, solo tocando html
Hacer clic para expandir...
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.
 
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 😉
 
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
 
directamente en las etiquetas html…
KatsuCoder dijo:
centrar el texto
Hacer clic para expandir...
<div style="justify-content: center; display: flex;">texto</div>
KatsuCoder dijo:
tamaño de letra
Hacer clic para expandir...
<div style="font-size: 88px;">texto</div>
KatsuCoder dijo:
colocar lineas,
Hacer clic para expandir...
<div style="border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;">texto</div>
KatsuCoder dijo:
Color,
Hacer clic para expandir...
<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 …

 
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!
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro