Para entenderle más fácilmente a HTML y CSS, primero vamos a definirlos, HTML no es tanto un lenguaje de programación en si, por lo cuál no tienes que saber programar, HTML por sus siglas en inglés HyperText Markup Language (Lenguaje de Marcado de HyperTexto), como su nombre lo dice es un lenguaje de diseño que usa marcas <etiquetas> de texto para el desarrollo web, en otras palabras es puro texto en inglés, pero no debes ser bilingüe tampoco es inglés muy fácil.
Por otro lado CSS se podría decir que es un complemento de HTML, es el mismo lenguaje, pero creas estilos para tu HTML, CSS significa hoja de estilo en cascada, esto porque en una sola hoja (ya sea bloc de notas, plantilla o archivo css de dreamweaver) puedes crear todos tus estilos para tu página, ¿Cómo que estilo?, se refiere al formato de la página o sitio web, por ejemplo para éste blog se usaron estilos o sea que se usa el lenguaje HTML y CSS.
El CSS (style) puedes meterlo dentro de tu mismo archivo HTML ya sea de dos formas:
- Antes del contenido <body> es decir en el encabezado entre <head> y </head>.
Ejemplo:
<html>
<head>
<title>TITULO DE PÁGINA</title>
</head><style type="text/css">
font-size: 80%; font-family: Century Gothic; color: #CC0000; font-weight: 500; list-style-image: url(Imagenes/carpabiertat.gif); padding-top: .0em; padding-bottom: .0em; list-style: outside; margin-top: 0; margin-left: 7%;
</style>
<body>
Cuerpo de la página.
</body>
</html>
Ésto para darle formato a la página en general, como tipo y tamaño de letra (fuente), margenes de la página,etc. - Dentro del contenido <body>, es decir no en la etiqueta "body", sino en etiquetas que se usan dentro de ellas como: <div>, <p>, <span>, <strong>, <table>, <td>, etc.
Ejemplo:
<html>
<head>
<title>TITULO DE PÁGINA</title></head>
<body>
Cuerpo de la página.
<div style="font-size: 80%; font-family: Century Gothic; color: #CC0000;">Aqui solo damos estilo a una sección del sitio.
</div>
</body>
</html>
Pero si quieres que tu sitio web sea más rápido de cargar en el navegador y que tu código esté más ordenado y organizado para su fácil edición y así actualizar tu sitio de manera rápida y fácil, es mejor crear fuera de tu HTML un archivo CSS con todo el código que dará estilo (style), a tu página y solo tienes que mandarlo llamar en tu HTML en el <head>.
Ejemplo:
- Creas tu archivo css "estilos.css"
a {text-decoration: none;color: #CC0000; } a:hover { color: #0000FF; border-bottom:2px dotted #0000FF; text-decoration:none; } #menu1 { font-size: 80%; font-family: Century Gothic; color: #CC0000; font-weight: 500; list-style-image: url(Imagenes/carpabiertat.gif); padding-top: .0em; padding-bottom: .0em; list-style: outside; margin-top: 0; margin-left: 7%; } - Lo mandas a llamas en tu HTML así:
<html>
<head>
<title>titulo de página</title>
<link rel="stylesheet" type="text/css" href="estilos.css" media="all" /> </head> <body> cuerpo </body> </html>
Muy buen post, le recomiendo éste post y mucho más que este chico subirá ya que ha sacado mi negocio adelante gracias a este metodo de diseño web.
ResponderEliminarPueden visitar mi página web que él realiza en:
http://www.toptopsalon.com/
Vean un buen ejempl ode una página bien hecha
ResponderEliminarcon
HTML 5
CSS 3
y JavaScript
;)
http://www.toptopsalon.com/