8°//
Emepezando con HTML
Bueno tercera vez que intento postear esto -.-" a ver si no pierdo lo escrito denuevo.
Primero que nada para que entiendan cada ejemplo deben ir visualizandolo en su explorador con el xammp o dreanweaver(aunque me gusta más xammp)
Pasemos de los conceptos de los libros, HTML es un lenguaje que nos permite darle forma a nuestra web, darle formato a los textos, hacer tablas formularios entre otras cosas más, aunque es muy pobre artisticamente, pero complementandolo con css se pueden lograr diseños muy bonitos(más adelante veremos algo de css).
HTML trabaja con etiqeuats y todo lo que queramos hacer con él sera con estas etiquetas, una etiqueta es una palabra dentro de unas "flechas" < > (la palabra depende de la etiqueta), estas tambien pueden llevar algunos otros parametros dependiendo la etiqueta.
Ejemplo de la estructura basica d un documento html:
Aca va el contenido de la web
Aca podemos ver varias etiquetas como : , , ,
Como podemos ver cada etiqueta consta de una etiqueta que abre y otra qeu cierra, marcando asi el comienzo de la función de dicha etiqueta y el final, el inicio solo es la palabra entre las flechas y para cerrar se coloca una barra entre la primera flecha y la palabra .
Las etiquetas marcan que lo que esta dentro de ellas es codigo html, las etiquetas y marcan el encabezado del documento y el cuerpo respectivamente.
Por otra parte va dentro de la etiqeuta de encabezado y se utiliza para denotar el nombre de la pagina, por ejemplo aca el title seria Foro .::. UniversoJuegos.es.
Etiquetas Basicas de HTML
Como ya hedicho antes todo en html se realiza por medio de etiquetas, aca comenzaremos aprendiendo lo más basico para darle forma a una pagina en html.
Titulos
Esats etiqeutas se utilizan para crear titulos subtitulos y demas, esats son :
,
,
, y siguen asi hasta h6.
Cada una tiene un tamaño diferente, siendo
el más grande y van reduciendo el tamaño mientras aumenta el número(como ya dije hay hasta el h6).
Ejemplo:
# Etiquetas basicas de HTML
## Titulos
Estas son: <h1></h1>, <h2></h2>, <h3></h3>
Aca el titulo es "Etiquetas Basicas de HTML", y el subtitulo "Titulos", el texto normal seria "Estas son:" con los simbolso extraños (más adelante veremos el porque de los simbolos extraños).
Saltos de Linea y Parrafos
En html si escribimos un texto haciendo varias lineas con el intro, las leera como si fuera una sola linea, ya que html no reconoce los saltos de pagina, y solo reconoce de a un espacio por vez.
Para hacer saltos de linea utilizamos la etiqueta
, si colocamos dentro de estas etiqeutas un texto y luego escribimos otro habra un espacio entre ellos como de un salto de linea.
Podemos también utilizarlo solo con la etiqeuta de apertura ya que funciona como un intro, seria algo asi :
Aca estoy dando un ejemplo[br].[/br]de como hacer saltos de linea [br].[/br]en html
Donde esta el
es como si se pulsara el intro una vez.
Para definir un parrafo se utiliza la etiqeuta
esta es muy parecida a
, la diferencia es que esta deja una linea de por medio, por eso se utiliza para separar parrafos, al igual que
podemos utilizar solo la etiqueta de apertura y no pasara nada.
Ejemplo:
Aca estoy dando un ejemplo de como separar parrafos
Este seria mi segundo parrafo
Espero qeu hallan entendido como usar estas etiquetas[br].[/br]ya que ellas pueden utilizarse con mayor libertad[br].[/br]que todas las demas
Esats etiquetas pueden utilizarse con mucha libertad, solo es cuestion de que se acostumbren.
Cambiar el formato de un texto
Ya en este punto deben saber como se manejan las etiquetas(sino miren denuevo los ejemplos muy minuciosamente u.u o vallan al hilo de dudas qeu para eso esta XD), explicare estas etiqeutas brevemente.
Colocar negritas: Se utilizan las etiquetas **** todo lo que este dentro de ellas estara en negritas.
Letra Cusriva: Se hace con las etiqeutas __ todo dentro de ellas estara en letra cursiva.
Subrayar texto: Se hace con las etiquetas __ todo entre ellas estara subrayado.
Texto Preformateado
Algunas veces querremos que html lea lo que hemos escrito tal cual lo hemso escrito, osea tomando en cuenta todos los espacios y saltos de linea, pues para eso sirve la etiqueta de preformato, la cual se hace de la sigueinte manera
, ademas el texto dentro de ella tendra una letra más pequeña y delgada de lo normal.
Ejemplo(no sabia que buen ejemplo colcoar asi que tome uno prestado XD):
Texto preformateado
---------------------
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
---------------------
Con la etiqueta
esa mini-tabla se vera tal cual esta escrita, pero si la quitan se daran cuenta que todo se ve en una misma linea ademas que en una letra más grande.
Hacer listas como con el word
Existen dos tipos de listas, las numeradas y las no numeradas que solo sale un puntico XD, ambas funcionan igual.
Lista no numerada :
Se hace con la etiqeuta
eso marca que ahí va una lista no numerada, y para cada elemento de la lista se deben utilizar las etiqeutas
Ejemplo:
Lenguajes que aprenderemos en este curso
Si el titulo lo colocamos al lado de la rtiqeuta
se vera más junto a la lista pero no tendra viñeta, para qeu tenga viñeta o numeración debe estar con la etiqeuta
También aclarar qeu podemos utilizar solo la etiqeuta de apertura
- y nos funcionara normalmente.
Lista numerada:
Funciona exactamente igual que la no numerada, la unica diferencia es la etiqeuta principal que en este caso es .
Ejemplo:
Lenguajes que aprenderemos en este curso
-
PHP
-
HTML
-
CSS
Caracteres y Simbolos Especiales en HTML
En HTML hay una gran cantidad de simbolos expeciales, que no aparecen con escribirlos simplemente en el documento como por ejemplo alla arriba en la aprte de lso titulos coloque un ejemplo con muchos simbolso extraños, que si lo visualizan en su explorador o el dreamweaver veran qeu les sale
,
, etc; pues eso es debido a qeu ese conjunto de simbolos extraños representa a las flechitas si se dan cuenta unos estan antes y otros despues del h1 y eso, mchas veces necesitaremos utilizar estos simbolso y caracteres especiales para poder visualizar caracteres valga la redundancia como comillas por ejemplo esas flechitas qeu si las escribia normalmente representaban unas etiquetas html que no eran visibles en el navegador, pero que de esa forma si se logran visualizar correctamente.
Aca les dejo un link a uan apgina con los caracteres html de muchos simbolos para qeu se ayuden porque son muchos y aprenderselos todos es muy dificil.
http://www.ascii.cl/es/codigos-html.htm
Ya he escrito bastante y les he dejado bastante información, en el sigueinte post de html explicare los formularios y las tablas.
Y no crean que se iran sin susu ejercicios
// \\ Ejercicio 11º
Creen un codigo html colocandole un titulo a su gusto, y donde hablen del tema que prefieran utilizando las listas, titulos y subtitulos, texto preformateado, saltos de linea y parrafos, en fin todo lo que hemos visto hoy.
Haganlo interesante qeu me lo leere todo y no me quiero dormir mientras lo hago XD
P.D: si ven algún error haganmelo saber porfavor que esta es la tecera vez qeu escribo el post(se me borro dos veces) asi que ya ando apurado con hamrbe dolor de cabeza y algo moslesto :T.T: (no me gusta estra molesto Y_Y)