![Aprendé html y css [Propio]](https://storage.posteamelo.com/assets-adonis/assets/2018/06/22/2C35E0060.png-p4ZMwsBVa-7.webp "Aprendé html y css [Propio]")
<introducción> Hola a todos! bienvenidos a mi nuevo post, este post es diferente y les puede servir a muchos para crear su propia web en HTML y CSS, tutorial realizado 100% por mi. Espero que les guste! Cualquier duda, MP! Gracias a todos!
PD: Los [*color=#000000] [*/color] Que quedan en los codes es error de Taringa, yo no los puse, ignorenlos </introducción>
HTML es la "lengua materna" de tu navegador.
Para abreviar una larga historia, podemos decir que un científico llamado Tim Berners-Lee inventó HTML allá por 1990. El objetivo era facilitar a científicos de diferentes universidades el acceso a los documentos de investigación de cada uno de ellos. El proyecto obtuvo un éxito mucho mayor del que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este científico sentó las bases de la web tal y como la conocemos hoy día.
HTML tiene sus estructuras obligatorias.
Las páginas HTML se basan en el uso de marcas o etiquetas. Estas etiquetas comienzan con el simbolo "<" y terminan con el simbolo ">", por ejemplo: <html>, <body> o <head>.
Además, para indicar hasta donde actúa cierta etiqueta se usa el símbolo / despues del cierre "<", es decir, indican el fin de una acción, por ejemplo: </html>, </body>, </head>.
Entonces... cada etiqueta de principio de acción, o sea <...> tiene una "correspondencia" con una etiqueta de fin de acción </...>
Llego el momento, iremos creando la primera web!
Para crear una web necesitaran un editor de textos bueno, en mi caso el Notepad++ muy recomendado! (Click sobre la palabra para descargar)
Una vez instalado el programa lo ejecutaran y una vez ejecutado iran a la pestaña "Lenguaje ---> H ---> HTML"
Ahora crearemos la estructura fundamental de la web. Los "<!-- -->" indica que es un comentario, por lo tanto, no se ejecutará en la web.
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<!-- Esto es la cabecera de la página -->
<title>Título del documento</title>
</head>
<body>
<!-- Esto es el cuerpo de la página, todo estará acá. -->
</body>
</html>
[/color][/color][/color]
Nota: No hace falta poner los comentarios, pueden servir para orientarte. Los comentarios no se ejecutaran en la web. Pueden ponerlos en cualquier lugar de la web, incluso antes del <html>
Ahora intenten ejecutar el siguiente codigo:
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
</head>
<body>
Hola mundo!
</body>
</html>
[/color][/color][/color]
Para poder ver esa página que hemos creado tendremos que ir a la ventana "Ejecutar --> Launch in Google Chrome" Si no tienen Chrome, en Firefox, si no tienen, ni Chrome ni Firefox, en Safari o el navegador que tengan, menos, explorer, ya que se visualizan mal las paginas ahí.
Si todo salio bien, tendria que aparecer la página asi:
![Aprendé html y css [Propio]](https://storage.posteamelo.com/assets-adonis/assets/2018/06/22/CA4244CAC.png-OtzcOsi3O5S.webp "Aprendé html y css [Propio]")
Ahora vamos a intentar hacer una web con unos cuantos renglones:
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
</head>
<body>
Hola mundo!
Está es la mejor pagina de Argentina.
Proximamente esta web tendrá muchisimas cosas interesantes!
Saludos!
</body>
</html>
[/color][/color][/color]
Vista Previa:
Como verán, se ve todo junto, no tomo los saltos de linea. Para que tome los saltos de linea, a donde tocan el enter para el salto de línea, tienen que poner <br> que cumple la función del ENTER.
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
</head>
<body>
Hola mundo!<br>
Está es la mejor pagina de Argentina.<br>
Proximamente esta web tendrá muchisimas cosas interesantes!<br>
Saludos!
</body>
</html>
[/color][/color][/color]
Vista Previa:
Taraan!
Parrafos o bloques para los textos.
Los parrafos o bloques sirven para tener textos ordenados, los textos se separaran de otros con la etiqueta "<p>" para indicar el comienzo del parrafo y la etiqueta </p> para indicar el fin del parrafo.
Este salto que produce es igual que el de <br> solo que la separación entre las lineas es mucho mayor.
Veamos un ejemplo:
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
</head>
<body>
<p>Hola mundo!</p>
<p>Está es la mejor pagina de Argentina.</p>
<p>Proximamente esta web tendrá muchisimas cosas interesantes!</p>
<p>Saludos!</p>
</body>
</html>
[/color][/color][/color]
Vista previa:
Ahora veremos como alinear los parrafos a la izquierda, derecha y al centro:
Para eso se pondra adentro de la llave <p> la alineación que desee, en este caso vamos a probar todas:
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
</head>
<body>
<p>Este texto está alineado a la izquierda predeterminadamente.</p>
<p align=left>Este texto tambien está alineado a la izquierda</p>
<p align=center>Este texto está alineado al centro</p>
<p align=right>Este texto está alineado a la derecha</p>
<center>Este texto tambien está alineado al centro.</center><br>
Este texto tambien está alineado a la izquierda
</body>
</html>
[/color][/color][/color]
Vista previa:
Propiedades de textos: Colores, fuentes, tamaño y tipo de letras.
HTML, nos ofrece las opciones básicas de cualquier editor de texto. Puede poner textos en negrita, cursivas, tachados o subrayados. Esto, como casi todo HTML, dispone de etiquetas, y las podrá utilizar del siguiente modo:
Texto en negrita: <b></b>
Texto en cursiva o itálico: <i></i>
Texto subrayado: <u></u>
Texto tachado: <s></s>
También se pueden conbinar los textos es decir, poner un texto en negrita, en cursiva y subrayado, por ejemplo:
Texto en negrita, cursiva y subrayado a la vez!
Ahora vamos con un ejemplo de HTML:
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
</head>
<body>
<b>Este texto esta en negrita</b><br>
<i>en cambio este texto esta en cursiva</i><br>
<u>ademas se puede subrayar</u><br>
<s>y tambien tachar</s><br>
<b><u>Y... Puedo usar</u> <i>varios a </i>la vez!! </b>
</body>
</html>
[/color][/color][/color]
Vista previa:
Si se preguntan el significado de las letras b, i, u y s, están en ingles, las acciones, y tienen la primera letra.
Bold (Negrita): b
Italic (Cursiva): i
Underline (Subrayado): u
Strike (Tachado): s
Colores, tamaños y fuentes
HTML, ovbiamente dispone de colores, tamaños y tipos de textos (fuentes) que desee.
Para poder agregar esto, se tiene que poner la etiqueta <font></font>. La etiqueta font, dispone de lo nombrado anteriormente (colores, tipo de texto y tamaños de letras)
Un ejemplo:
<font color="green" face="Arial" size=16px>Texto</font>
Ejemplo en html:
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
</head>
<body>
<font color="green" face="Arial" size=16px>Texto</font>
</body>
</html>
[/color][/color][/color]
Vista previa
![Aprendé html y css [Propio]](https://storage.posteamelo.com/assets-adonis/assets/2018/06/22/EEBBFC2C0.png-nKWHrqUYnNk.webp "Aprendé html y css [Propio]")
Tambien a la etiqueta se le puede agregar texto, bold, italic, underline y
strike[/s].Ejemplo:
<font color="green" face="Arial" size=16px><b>Texto</b></font>
*Nota: No es necesario agregar color, fuente y tamaño, podes agregar o esas tres o las que quieras usar.
Los divs son la estructura total de una web, se usan con estilos, pero veremos una pequeña introducción sin estilos, para ver como funcionan. La etiqueta que emplean los divs, son: <div></div>, pero no van a hacer nada, ya que no tenemos estilos, asi que le agregaremos un align="center" al div, que quedaria <div align="center></div>
Ejemplo:
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
</head>
<body>
<div align="center">
Hola esto es un texto con div.
</div>
</body>
</html>
[/color][/color][/color]
Vista previa:
Taraan (:
*Nota: Tambien pueden utilizarlo para cualquier tipo de alineación
Ahora veran como colocar una imagen facilmente, crean una carpeta en la carpeta donde se encuentra el archivo html de la web, llamado "images". Ahí dentro tendrán las imagenes almacenadas que ejecutaran en la web. (:, vamos a buscar una imagen de lo que sea en Google, en mi caso de Los Simpsons (: y guardaremos la imagen en la carpeta que creamos anteriormente. En mi caso, el nombre de mi imagen es "lossimpsons.gif"
puede tener cualquier otra extension de imagen, como por ejemplo .PNG y .JPG
El codigo para poner la imagen en la web, es el siguiente:
<img src="images/lossimpsons.gif">
Lo que está en rojo es en caso propio de que a la carpeta le hayan puesto otro nombre o tengan otro nombre de imagen. RECUERDEN! Siempre pongan la extension de la imagen, en mi caso es el .gif
Ejemplo HTML:
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
</head>
<body>
<img src="images/lossimpsons.gif">
</body>
</html>
[/color][/color][/color]
Vista previa:
Tambien pueden darle propiedades a la imagen, como centrarla, agregarle un comentario al pasar el mouse por arriba y darle un tamaño de imagen deseado.
Ejemplo HTML:
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
</head>
<body>
<div align="center">
<img src="images/lossimpsons.gif" title="Puntero de mouse por arriba, comentario" width=400px height=400px>
</div>
</body>
</html>
[/color][/color][/color]
Vista previa:
title: Comentario al pasar el puntero del mouse por la imagen
width: Anchura de la imagen
height: Altura de la imagen
img src: Carga la imagen a la web.
Agregar un hipervinculo a una imagen.
Etiquetas <a></a> de hipervinculo, href es el sitio a donde redirige. Ejemplo:
<a href="http://google.com.ar"><img src="images/lossimpsons.gif"></a>
Agregar hipervinculo a un texto
Tambien puede agregarle el <a href="http://webadonderedirigir.com.ar"></a> a un texto. Ejemplo:
<a href="http://webadonderedirigir.com.ar">Click aca!</a>
Formularios en HTML
Los formularios son una característica del estándar HTML, que permite a los autores colectar información provista por los visitantes. Estos formularios pueden ser útiles para recolectar información personal, información de contacto, preferencias u opiniones, o cualquier tipo de entrada por parte del visitante que el autor pueda necesitar. En este tutorial exploraremos todas las características disponibles para construir formularios en documentos HTML.
Puedes necesitar especificar cómo la información será enviada en el valor del atributo "method": "post" (los datos son adjuntados al cuerpo del formulario) o "get" (los datos son adjuntados a la URL (localizador uniforme de recursos)). Se supone que el agente procesador conoce y maneja el método de envío del formulario
Los formularios pueden contener de una casilla de texto común, de contraseña, de mensaje y botones de opciones.
A continuación un código de formulario simple en HTML, en mi caso lo hice de Los Simpsons (:
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
</head>
<body>
<div align="center">
<form action="mailto:[b][color=red]
[email protected]
[/color][/b]"
<b><font color=red>Nombre de Usuario:</font></b><br> <textarea name="Usuario" rows=1 cols=23></textarea><!-- tamaño de casilla --><br>
<b><font color=red>Contraseña:</font></b><br> <input name="contraseña" type="password"><br>
<p>Cuestiones, dudas, sugerencias:
<br><textarea name="Comentario" rows=5 cols=40></textarea>
<p><input type="checkbox" name="Trabajo muy duro">
<checked>Deseo trabajar muy duro como un esclavo
<br><input type="checkbox" name="Esclavo">
<checked>Deseo recibir las publicaciones del esclavo
<br>
<b>Personaje:</b><br>
<input type="radio" name="Personaje" value="Homero" checked>Homero<br>
<input type="radio" name="Personaje" value="Bart" checked>Bart<br>
<input type="radio" name="Personaje" value="Lisa" checked>Lisa<br>
<input type="radio" name="Personaje" value="Marge" checked>Marge<br>
<input type="radio" name="Personaje" value="Maggie" checked>Maggie<br>
<b>Popularidad:</b><br>
<input type="radio" name="Gracia" value="1" checked>Gracioso<br>
<input type="radio" name="Gracia" value="2" checked>Muy gracioso<br>
<input type="radio" name="Gracia" value="3" checked>DEMASIADO GRACIOSO!<br>
<input type="radio" name="Gracia" value="4" checked>Aburrido<br>
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</div>
</body>
</html>
[/color][/color][/color]
Vista previa:
Ejecute el codigo en Notepad e intente probar/modificar valores asi puede practicar.
CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.
Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web. En un principio, los sitos web se concentraban más en su contenido que en su presentación.
HTML no pone mucha atención en la apariencia del documento. CSS describe como los elementos dispuestos en la página son presentados al usuario. CSS es un gran avance que complementa el HTML y la Web en general.
Con CSS podemos especifiar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imagenes en la página.
Para poder conectar el CSS al HTML, en el HTML, arriba del </head> debemos agregar:
<link rel="stylesheet" href="estilos.css" type="text/css">
Vamos a crear un nuevo documento en el Notepad, y vamos a ir a Lenguaje ---> C ---> CSS
*Información: Los estilos, en vez de abrise con el simbolo < y cerrase con >, se abren con { y se cierran con }
En el nuevo documento de css que creamos vamos a poner lo siguiente:
[color=#000000][color=#000000][color=#000000]
body{
background-color:#000;
font-family:"Helvetica Neue", Helvetica, Arial;
font-size:12px;
color:#FFF;
text-align:center;
}
[/color][/color][/color]
Intenten escribir algo adentro del body del HTML y abran la web.
Van a ver un fondo de color negro (background-color:#000), fuente de letra (font-family:"Helvetica Neue", Helvetica, Arial) un tamaño de letra (font-size:12px) un color de letra (color:#FFF) y el texto centrado (text-align:center), Como veran ya se los genera automaticamente del css.
Si estuvieron atentos, podran ver que por cada salto de linea hay un ";" eso indica que termina dicha acción, siempre lo tienen que poner.
Vista previa:
Ahora se viene la última y mejor parte de esto!, los divs, que es la estructura de la página:
[color=#000000][color=#000000][color=#000000]
<html>
<head>
<title>Mi primera página de HTML</title>
<link rel="stylesheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="wrap">
<div id="cont">
<div id="header">
LOGO
</div>
<h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h1>
<div id="footer">
<h2>Web hecha por powersh, tutorial básico para Taringa.</h2>
</div>
</div>
</div>
</body>
</html>
[/color][/color][/color]
CSS:
[color=#000000][color=#000000][color=#000000]
body{
background-color:#000;
font-family:"Helvetica Neue", Helvetica, Arial;
font-size:12px;
color:#FFF;
text-align:center;
}
h1{
color:#333333;
font-weight:bold;
margin-left:15px;
margin-right:15px;
margin-top:20px;
padding-bottom:20px;
font-size:12px;
text-align:left;
}
h2{
color:#333333;
font-weight:normal;
padding-top:15px;
font-size:12px;
text-align:center;
}
#wrap{
width:920px;
height:auto;
margin:auto;
}
#cont{
width:auto;
height:auto;
margin:auto;
background-color:#d7d7d7;
margin-top:25px;
}
#header{
width:auto;
height:100px;
background-color:#FFF;
color:#000;
font-weight:bold;
font-size:34px;
}
#footer{
width:auto;
height:45px;
background-color:#e7e7e7;
}
[/color][/color][/color]
Los divs se conectan mediante los id´s que permiten reconocerce en los estilos, por medio de el numeral, por ejemplo:
HTML:
<div id="undiv">
</div>
CSS:
#undiv{
}
Los h´s sirven para los textos, pueden crear desde <h1></h1> hasta <h6></h6>
Pueden probar tocando cosas mediante el codigo de la web.
Para más información sobre CSS:
http://www.cssya.com.ar/
Está es la primera parte del tutorial hay otra más, está tenía pensado solo html, pero incorpore un poco de css, para que les guste más, la proxima parte va a ser todo de CSS!
. Saludos! Espero que les haya gustado. Recuerden, cualquier duda o consulta, MP! a sus disposiciones (:
