Scribd Logo
Carica

Benvenuto in Scribd!

  • Qué Es HTML

    Caricato da

    santamariaw
    31 visualizzazioni13 pagine

    Titolo originale

    Qué es HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    31 visualizzazioni13 pagine

    Qué Es HTML

    Caricato da

    santamariaw

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 13

    Qu es HTML?

    HTML es un lenguaje de programacin esttico para crear pginas Web, cuando surgi internet, lo nico que se utilizaba era cdigo HTML. Es muy fcil crear una pgina web utilizando HTML, solamente se debe saber la sintaxis bsica y las etiquetas (tags) ms importantes. Conceptos bsicos Un archivo HTML debe tener la extensin htm o html, no se puede utilizar cdigo dinmico dentro de un archivo HTML porque no funcionar. Cuando se va a crear una pgina web siempre es necesario que la pgina principal de un sitio se llame index. As luego el cdigo HTML se ejecutar en el navegador (Internet Explorer, Firefox, etc.), sabiendo esto podemos seguir adelante. Primeros pasos HTML hace uso de etiqueta o tags para dar un aspecto visual a nuestra pgina web, las etiquetas son como instrucciones que le indican al navegador como mostrar la informacin. El formato de una etiqueta es el siguiente: <etiqueta> Hay algunas etiquetas que son simples, es decir que no necesitan ser cerradas y otras llamadas contenedoras que encierran un texto para darle un formato determinado, de esta forma: <etiqueta>Texto para dar formato</etiqueta> Todas las etiquetas contenedoras terminan igual pero con una barra diagonal / antes del nombre. Estructura inicial Todo archivo HTML tiene una estructura a seguir para que se visualice correctamente, para indicarle al navegador que comenzaremos a escribir cdigo HTML utilizaremos la etiqueta <html>. <html></html> En toda pgina web hay cosas que vemos como el texto, imgenes, videos, etc., pero tambin hay cosas que no podemos ver como el ttulo, descripcin y dems, todo lo que no se ve debe ir en la cabecera encerrado entre las etiquetas <head> (cabecera en ingls) y todo el contenido visible lo pondremos entre las etiquetas <body> (cuerpo en ingls), todo esto quedara as: <html> <head> <title> Titulo de la pgina Web </title> </head> <body> Este es el contenido de la pgina web. </body> </html> Esta es la estructura que debe seguir cualquier sitio web, como se puede ver, dentro de <head> se utiliza una nueva etiqueta para definir el ttulo de la pgina web, su nombre es muy intuitivo si se sabe algunos trminos bsicos de ingls, nada ms, ni nada menos que <title> corresponde a ttulo en ingls.

    Ejercicio N 1: Crear una pgina HTML cuyo ttulo sea Esta es mi primera pgina Web y su contenido sea un texto que diga Hola Mundo!. Como ya vio en las lecciones anteriores, el lenguaje HTML sirve para dar formato a una pgina Web, cambiar colores, tamaos y dems. Hay etiquetas especficas que sirven para dar formato al texto. Insertar prrafos y saltos de lnea. Para definir un prrafo debemos encerrar el texto entre <p> y </p> y si queremos insertar un salto de lnea solo basta con un <br />, recuerden que cuando presionamos ENTER no inserta un salto de lnea. Cambiar el formato de un texto Hay varias etiquetas que nos permiten modificar el formato de un texto, por ejemplo si queremos un texto en Negrita utilizamos <b></b>: Esto es un texto en Negrita Para cambiar el texto a cursiva utilizamos <i></i>: Texto en Cursiva Para subrayar un texto lo encerramos entre <u></u>: Texto subrayado Insertar listas Las listas son muy importantes, muchas veces tendremos que utilizarlas para ordenar nuestro contenido. Tendremos que usar dos etiquetas para formar una lista, la primera es <ul></ul> con la que indicamos que comenzaremos una lista, y la segunda es <li></li> donde insertamos los items de la lista, se utiliza as: <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Eso se vera as: Item 1 Item 2 Item 3 Ttulos encabezados Hay varios niveles de encabezados, con ellos definiremos ttulos y subttulos, lo encabezados se definen con: <h1></h1>: Encabezado 1 o <h2></h2>: Encabezado 2 <h3></h3>: Encabezado 3 Hay 6 niveles de encabezados para utilizar. Alinear texto Para alinear textos utilizaremos la etiqueta <div> (esta tiene mas usos, ya los veremos mas adelante) donde podremos elegir la ubicacin, si queremos que el texto se centre lo haremos as:

    <div align=center>texto centrado</div> El atributo align nos permite indicarle la ubicacin, si le asignamos left el texto ir a la izquierda, si ponemos center ir al centro y si le ponemos right se situar a la derecha. Ya vimos como insertar y dar formato al texto, pero en algn momento necesitaremos insertar imgenes, tablas y dems. Insertar imgenes Para insertar imgenes utilizaremos la etiqueta <img>, en ella debemos indicar la ubicacin de la imagen, una descripcin y otros atributos no obligatorios, como por ejemplo el borde. Por ejemplo: <img src=http://www.comocrearunsitioweb.com.ar/imagen.jpg alt=Imagen de prueba border=0 /> La palabra src le indica la ubicacin (donde tenemos la imagen) recuerda que primero hay que subirla a internet. Con alt definimos la descripcin y con border si queremos o no que tenga borde. Insertar una imagen de fondo Si queremos insertar una imagen de fondo utilizaremos el atributo background dentro de la etiqueta <body> donde le indicaremos la ubicacin de la imagen, de esta forma: <body background="fondo.jpg"> Insertar enlaces de texto Para crear un hiper enlace (enlaces cliqueable que llevan a otra pgina) utilizaremos la etiqueta <a> con varios atributos, uno para indicar la direccin del enlace y otro para insertar una descripcin: <a href=http://www.comocrearunsitioweb.com.ar title=Como crear una pagina web con explicaciones paso a paso>Como crear una pagina Web</a> este ejemplo quedara as: Como crear una pagina Web Para enlazar una pgina interna de nuestra pagina web tenemos que tener en cuenta que esta se encuentra en una carpeta comn y corriente, entonces no hace falta indicar el dominio, quedara as: <a href=/contacto.html>Contacto</a> y si el archivo contacto.html se encontrara dentro de otra carpeta llamada html quedara de esta forma: <a href=html/contacto.html>Contacto</a> Insertar videos y msica Para insertar contenido multimedia como puede ser un tema de fondo o un video deberemos usar la etiqueta <embed> as: <embed src="/mi-video.avi" width=400 height=450> En el atributo src indicamos la ubicacin del archivo, con width y height le decimos que tamao queremos que tenga nuestro video. En esta leccin aprenderemos a subir nuestra pagina web, descargaremos el programa FTP y veremos como se usa. Para esta leccin necesitaras un hosting, si an no lo tienes o no sabes que es te invito a leer el curso de hosting y servidores. Muy bien! si todo sali bien ya tienes tu pgina Web terminada, el ltimo paso es subirla, pero antes debes elegir un hosting (que es un hosting?) para alojar tu pgina y registrar un dominio (que es un dominio?) para poder acceder a ella, no te preocupes, es mas fcil de lo que parece. Que necesito?

    Necesitamos un hosting donde subir los archivos y un programa FTP, nosotros utilizaremos FileZilla. Ya tengo todo, y ahora que? Lo primero que haremos ser abrir FileZilla, deberamos ver una ventana como esta:

    Ahora veremos que significan esos numeros: 1. Servidor: aqu debemos poner la direccin FTP que nos da nuestro hosting, generalmente (en el 90% de los casos) la direccin que debes poner ah es ftp.tudominio.com. 2. Nombre de usuario: el nombre de usuario para la cuenta FTP a la que te quieres conectar, generalmente es el mismo que utilizas para entrar a tu panel del hosting. 3. Contrasea: igual que el anterior, la contrasea para el nombre de usuario de la cuenta FTP, generalmente es la misma que la que utilizas para entrar al panel de tu hosting. 4. Directorio local: en este panel vers todas las carpetas y archivos que hay en tu computadora, para subir tu pagina web debers ir hasta la carpeta donde tienes tu pagina web terminada. 5. Directorio remoto: en este panel vers todas las carpetas y archivos que hay en tu servidor (la computadora donde vas a subir la pagina web), una vez que subas todos los archivos deberas ver lo mismo en ambos paneles (4 y 5).

    6.

    Barra de estado: aqu vers el progreso de los archivos cuando los subas.

    Muy bien, ya conocemos cada parte del programa, ahora vamos a subir nuestra pagina web :)

    Paso 1: nos conectaremos a nuestro servidor, para eso completaremos los campos 1, 2 y 3, una vez que se haya conectado veremos varias carpetas en el panel 5 de la imgen.

    Paso 2: en el panel de directorio local (N 4) buscaremos la carpeta donde estan los archivos de nuestra pagina web.

    Paso 3: en el panel de directorio remoto (N 5) nos dirigiremos a la carpeta public_html o www (depende de cada hosting, si contrataste hostgator vers la carpeta public_html).

    Paso 4: una vez que tengamos localizada la carpeta de nuestro sitio en el panel 4 y la carpeta public_html en el panel 5 podemos comenzar a subir la pagina web, para esto seleccionaremos los archivos que queremos subir (en el panel 4 de la imgen), haremos un clic derecho y luego clic en subir. Si todo fue bien veremos en el panel 6, en la pestaa "Transferencias satisfactorias" que hay un numero con la cantidad de archivos que subimos. Para que sirve un contador de visitas? Com su nombre lo indica, un contador de visitas sirve para saber cuantas visitas recibimos en nuestra pagina web, pero no termina ah, tambin nos porporciona muchos datos mas:

    Paginas Vistas: si un visitante entra se cuenta una visita, pero si navega por las pagina internas o recarga la pagina, estas se cuentan como paginas vistas o hits. Visitantes retornantes: si un visitante entro a nuestra pagina, luego sali y volvio a entrar, esto se cuenta como visitante retornante, podemos configurar que rango de tiempo entre la salida y la entradad se debe tomar en cuenta para contar un visitante retornante. Paginas populares: nos dice cuales son las pginas mas visitadas. Referers: los referers son las pginas por donde entran nuestros visitantes. Buscadores mas usados: nos muestra un top de los buscadores que mas utilizan nuestros visitantes para entrar a nuestro sitio web. Tiempo en el sitio: muestra el tiempo que estan en el sitio tus visitantes. Pas/Estado/Ciudad/ISP: podemos saber de que pais, estado y ciudad son nuestros visitantes, y tambin su servidor de internet. Navegador: nos dice que navegador utilizan los usuarios de nuestro sitio web. Resolucin: con esta opcin podremos saber cual es la resolucin de pantalla mas utilizada, muy til a la hora de hacer un rediseo. Todava hay mas funcionalidades, pero creo que estas son las mas importantes. El sistema de estadisticas que vamos a instalar se llama StatCounter, el proceso de instalacin es muy fcil, vamos a ello. Instalar el contador El primer paso para instalar nuestro contador de visitas es registrarnos en la pagina que nos brinda el servicio: 1-. Vamos a http://my.statcounter.com/register.php y ponemos nuestros datos como aparece en la imagen:

    luego hacemos clic en REGISTER MY ACCOUNT >> 2-. Si todo sali bien, ya tendremos nuestra cuenta creada y tendra que aparecer una imagen como esta:

    Ahora hacemos clic en PROCEED & ADD A PROJECT >> 3-. Lo siguiente que debemos hacer es agregar nuestra pagina web para que genere el cdigo que deberemos pegar en nuestro sitio, tendran que estar en una pantalla como esta:

    llenamos todos los datos que nos piden (con los datos verdaderos, obviamente jeje) y hacemos clic en NEXT. 4-. Bien, ya hemos creado una cuenta, hemos agregado nuestra pagina web y ahora tenemos que configurar e instalar el cdigo en nuestro sitio web, para esto debemos hacer clic en CONFIGURE & INSTALL CODE >> como aparece en la siguiente imagen:

    5-. En este paso debemos seleccionar el tipo de contador, si queremos que sea visible (lo vern tus visitantes), invisible (solo lo vern ingresando en tu cuenta de statcounter) o solo un logo de StatCounter con un vinculo hacia las estadsticas.

    6-. Ahora nos toca elegir el tipo de cdigo que usara el contador, si queremos que sea solo HTML marcaremos esa opcin (todas las funcionalidades que mencionamos antes se vern reducidas), pero si queremos que tenga todas las funcionalidades dejaremos esa pantalla como esta, as:

    7-. Si todo fue bien, ahora tendriamos que estar viendo el cdigo para pegar en nuestra pagina web:

    Si vemos lo mismo que en la imagen, debemos copiar ese cdigo. 8-. Ahora toca la parte mas importante, pegar el cdigo en nuestra pagina web para que empieze a contabilizar nuestras visitas. Supuestamente ya tenemos el cdigo copiado, solo tenemos abrir con el bloc de notas el archivo al que queremos incluirle el contador y justo antes de la etiqueta </body> pegamos el cdigo: Listo! ya tenemos un contador de visitas en nuestra pagina web. Si estas pensando en agrandar tu pagina web y aumentar su funcionalidad, la mejor manera de hacerlo es con un foro donde tus usuarios puedan participar y tengan un motivo para volver a tu pagina. Instalar un foro no es difcil, menos aun los que son prefabricados como phpBB3. Eso si, antes de continuar tienes que asegurarte de tener: Soporte para PHP, debe soportar una versin mayor la 4.3.3 Soporte para base de datos MySQL Acceso a los archivos de tu hosting (si estas en un hosting pago seguro lo tienes) Permiso para cambiar los permisos de tus archivos (valga la redundancia jeje) Paciencia Si tienes todo eso, entonces comencemos con la instalacin del foro phpBB3. 1-. Lo primero que haremos es descargar el foro desde phpBB.com (http://downloads.sourceforge.net/phpbb/phpBB-3.0.0.zip?download). 2-. Una vez que tengamos el archivo phpbb/phpBB-3.0.0.zip en nuestra computadora lo descomprimiremos y lo subiremos a nuestro hosting en el directorio /foro por ejemplo. 3-. Bien, ya tenemos el foro arriba, lo que toca ahora es instalar y configurar, para eso vamos a la carpeta de instalacin dentr de donde subimos el foro, sera en /foro/install, si todo es correcto deberiamos ver una imagen como esta:

    Si podemos verla, hacemos clic en "INSTALL" como esta en la imagen. 4-. Una vez que hayamos hecho clic en install, nos llevara a otra pantalla donde nos dar la bienvenida. Bien, ahora deberemos asegurarnos de que todos los archivos y carpetas tengan los permisos adecuados: cache/: 777 store/: 777 files/: 777 config.php: 777 images/avatars/upload/: 777 Una vez que hayamos cambiado los permisos, haremos clic en "PROCEED TO NEXT STEP", en espaol sera "IR AL SIGUIENTE PASO":

    5-. Si cambiamos los permisos correctamente, ahora veremos esta pantalla donde haremos clic en "START INSTALL":

    Si vemos que alguno de los archivos dice "Unwritable" es porque no cambiamos bien los permisos. 6-. Ahora veremos una pantalla donde tendremos que introducir los datos de la base de datos que creamos para el foro (servidor, usuario y contrasea), si todava no lo hicimos, este es el momento. Una vez que pusimos los datos, hacemos clic en "PROCEED TO NEXT STEP":

    Si todos los datos que introdugimos fueron correctos, ahora veremos un mensaje en verde que dice succesful connection y un boton que dice "PROCEEDE TO NEXT STEP" donde haremos clic (si es as volvemos al paso anterior):

    7-. Ahora toca configurar la cuenta del administrador del foro, eligiremos el nombre de usuario, contrasea y email:

    8-. Como en el paso anterior, si todo fue bien veremos un mensaje en color verde diciendo Tests passed y un boton que dice "PROCEED TO NEXT STEP" donde haremos clic:

    9-. LISTO!, si vemos esta pantalla:

    ya tenemos un foro phpBB3 instalado en nuestro servidor y listo para comenzar a participar junto con los usuarios de tu pagina web. Espero que te haya servido!

    Potrebbero piacerti anche