Manual Basico de HTML @easy-html-flb-blog - Tumblr Blog

Introducción al HTML

Conceptos: HTML= El world wide web es un sistema que contiene una cantidad de información casi infinita. Todo esto debe estar ordenado de alguna forma para que sea posible encontrar lo que se busca. Estos contenidos están alojados en lo que llamamos paginas web. Estas pueden contener textos, imágenes, animaciones, sonidos y vídeos, una de sus características mas importantes es que son hipertextos, esto quiere decir que las paginas no son elementos aislados, sino que están unidas a otras mediante links. Gracias a esto, el navegante de internet puede pulsar sobre un texto de una pagina para navegar hasta una pagina. El encargado de indicar hacia donde serán dirigidas las páginas es el programador del lenguaje. El Html (Lenguaje de Hipertexto de Marcas) es el encargado de convertir un inocente archivo de texto inicial en una pagina web con diferentes tamaños, letras y tipos, imágenes, animaciones, formularios, etc.

#just girly things #html #conceptos #paginas web #introduccion

¿Que se necesita para crear una pagina web?

Una de las características mas importantes de este lenguaje (HTML) es que no es necesario ningún programa especial para crear una pagina web, solo se necesita para tal fin un editor de texto que cualquier sistema operativo contiene ya que el cuerpo de la pagina en HTML es puramente textual. Para comenzar a programar en HTML debemos adaptarnos a la simpleza de su estructura solamente recordando letras o palabras (marcas), las cuales le indicaran a la maquina que ocurrirá con el texto que esta encerrado entre ellas. Las marcas o códigos de formato tienen una forma un tanto especial las cuales para su validez deben estar encerradas entre los símbolos mayor y menor (<,>), por ejemplo: <p>. Esta es una marca de HTML que me esta indicando un comienzo de párrafo. Normalmente estas ordenes van en pareja, cuando se dan estos casos el par de la marca abierta se cierra de la misma forma que abrió precedido por una barra de división: </p>.

Requerimientos.

Para comenzar a trabajar en HTML basta solamente con tener un editor de texto cargado en la pc como por ejemplo el bloc de notas. Una vez desarrollado todo el cuerpo del trabajo en HTML el archivo será guardado agregando la extensión “.html”.

#paginaweb #html #manual #just girly things #introduccion

Estructura básica de una página HTML

Toda página HTML tiene una estructura que se debe respetar como por ejemplo donde se abre o se cierra una página, donde comienza y termina el cuerpo de una página y donde comienzan y terminan las etiquetas o marcas que le vamos a asignar a un texto o a una tabla.

<html> . . . </html> : Da comienzo y final a una página web.

<head> . . . </head> : Marca el comienzo y final de un título.

<body> . . . </body> : Marca el comienzo y final del cuerpo de una página.

<p> . . . </p> : Marca el comienzo y final a un párrafo.

Ejemplo:

<html> <head><title>Practica 1 de HTML</title></head> <body> <p>En este parrafo quedan espacios entre renglones</p> <p>Porque se esta escribiendo un parrafo con la etiqueta “p”</p> <br> <p>En este texto no se dejan <br>espacios entre renglones <br>porque se utiliza la etiqueta “br”</p> </body> </html>

#renglondoble #html #ejemplo #paginaweb #just girly things #part1

Atributos de Texto

Además de todo lo relativo a la organización de los párrafos, uno de los aspectos primordiales del formateo de un texto es el de la propia letra. Resulta muy común y práctico presentar textos resaltados en Negrita, Italica u otros. Tambien el uso de indices y subindices resulta vital para la publicacion de textos cientificos.Veamos entonces algunas etiquetas que nos permitiran darle formato a los parrafos.

<b>...</b> Texto en negrita <i>...</i> Texto en italica <u>...</u> Texto subrayado <strike>...</strike> Texto tachado <big>...</big> Tamaño grande <small>...</small> Texto pequeño <sub>...</sub> y <sup>...</sup> Subindice y superindice

<html> <head><title>Propiedades de texto</title></head> <body> <p><i>Este texto esta en italica</i> <br><b>Este texto esta en negrita</b> <br><strike>Este texto esta tachado</strike> <br><big>Este texto es grande</big> <br><small>Este texto es pequeño</small> <br>El 1<sup>er</sup> componente quimico es el H<sub>2</sub>O</p> </body> </html>

#part1 #just girly things #html #manual #lucasnuel #gimenecue #easy #blog #gg #agg #voidnotiracupula

Color, tamaño y tipo de letra

En este lenguaje tambien existe una forma clasica y directa de definir color, tamaño y tipo de letra de un texto determinado. Esto se hace a partir de la etiqueta <font> y su cierre correspondiente. Dentro de esta etiqueta deberemos especificar los atributos correspondientes que le querramos dar al pàrrafo

Atributo “Face”: Este atributo define el tipo de letra que vamos a utilizar en el parrafo, el nombre de la letra a utilizar debe ser ecxactamente igual como figura en la lista de fuentes que contiene la PC <font face =“Comics Sans MS”>Este texto tiene otra tipografia</font>

Atributo “Size”: Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo, normalmente se utilizan los valores absolutos del 1 al 7 <font size =4“”>Esta letra es mas grande que el tamaño 1</font>

Atributo “Color”: El color del texto puede ser definido mediante este atributo. Puede especificarse en el comando de dos formas, la primera escribiendo el nombre del color en ingles y la segunda expresarlo en formato hexadecimal <font color=“red”>Texto color rojo</font> <font color =“#f0000″>Texto color rojo</font>

#HTML #just girly things #manual #manualloco #jugandoconnatalia #vinotoro #atributos #textos #colores #color #texto #part1

Formato de parrafo

Formatear un texto pasa por tareas tan evidentes como definir los parrafos, justificarlos, introducir viñetas, numeraciones o bien poner negrita o italica. En esta ocasion veremos como justificar un parrafo de texto a la izquierda, al centro o a la derecha del texto. Por defecto, la alineacion es a la izquierda. La etiqueta a utilizar para tal fin es en realidad un atributo que se coloca dentro de la etiqueta <p>

Ejemplos: <p align=“center”> <p align=“left”> <p align=“right”>

<html> <head><title>Alineacion de parrafos</title></head> <body> <p align =“center”>Parrafo 1 centrado</p> <br> <p align =“left”>Parrafo 2 izquierdo</p> <br> <p align =“right”>Parrafo 3 derecho</p> <br> </body> </html>

#html #just girly things #pocho #lapantera #racing club #manual #texto #parrafo #alineacion #part1

Atributo <Div>

Este atributo permite simplificar la escritura para no tener que poner el atributo align en cada renglon que escribamos. Se coloca antes de la etiqueta mencionada con anterioridad y todos los rengloes siguientes respetaran esa justificacion.

Ejemplo:

<html> ... ... <div align =“center”> <p>Parrafo 1 centro</p> <p>Parrafo 2 centro</p> <p>Parrafo 3 centro</p> ... </html>

#HTML #alineacion #just girly things #manual #parrafo #texto #ejemplo #atributo #part2

Encabezado

Existen otras etiquetas para definir parafos especiales, formateados como titulos. Estas etiquetas deberan ir acompañadas de un numero que hara de este texto un titulo o encabezado de un tamaño determinado. Los numeros a utilizar son del 1 al 6, siendo el 1 el tamaño mas grande. Al ser este un titulo con encabezado, funcionara como parrrafo y dejara un espacio entre los textos

Etiqueta:<h1>....</h1> <h2>....</h2> <h3>....</h3> <h4>....</h4> <h5>....</h5> <h6>....</h6>

<html> ..... ..... <h1>Encabezado nivel 1</h1> <h2 align = “center”>Encabezado nivel 2</h2> <h6 align = “right”>Encabezado nivel 6</h6> ..... ..... </html>

#HTML #just girly things #manual #encabezado #flb #informatica #tecnologia #seguime #part2

Listas numeradas y viñetas

Definir y ejemplificar las etiquetas y sus atributos que me permiten generar listas ordenadas, desordenadas y de definicion.

Listas ordenadas: Constan de una sola marca de apertura y cierre (<ol> </ol>) y tantas marcas de listas como se desee <li>

Ejemplo: <ol> <li>Numero 1 <li>Numero 2 </ol>

Tipos:

1=Numeros a=Minuscula A=Mayuscula I=Nº romanos en mayuscula i=Nº romanos en minuscula

Listas desordenadas: Funcionan de manera similar a las ordenadas. La diferencia basica es que en el caso de las listas desordenadas no existen relaciones jerargicas entre los elementos

<ul> <li>Primer item <li>Segundo item <li>Tercer item </ul>

Formas <ul type = disc> : Se obtiene un disco como forma <ul type = circle>: Se obtiene un circulo como forma <ul type = square>: Se obtiene un cuadrado como forma Las listas de definicion sirven para detallar terminos y definicione. La etiqueta <dl> crea la lista de definicion y las etiquetas <dt> y <dd> definen respectivamente el termino y la descripcion de cada elemento de la lista

<dl> <dt>Papel <dd>Obtenido de celulosa <dt>Plastico <dd>Derivado del petroleo

#HTML #just girly things #manual #escuela #informatica #programacion html #part2

Enlaces (Internos,locales,remotos,con dirección de correo y con archivo).

No se podría hablar de navegación si estos archivos HTML no estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio por medio de enlaces de hipertexto. Para colocar un enlace nos serviremos de las etiquetas <a> y </a>. Dentro de la etiqueta de apertura deberemos especificar el destino del enlace. Este destino se ve introducido bajo forma de atributo, el cual lleva por nombre “href”. Existen cinco tipos de enlaces, los cuales detallaremos a continuación: Internos Locales Remotos De correo De archivo

#just girly things #html #manual #easy #denunciado maquinola #part2

Enlaces Internos

Son los enlaces que apuntan a un lugar diferente dentro de la misma página. este tipo de enlaces son esencialmente utilizados en paginas donde el acceso a los contenidos puede verse dificultado debido al gran tamaño de las mismas. Para crear un enlace de este tipo es necesario aparte del enlace propiamente dicho, un segundo enlace que será colocado en el destino llamado ancla. <a name=“nombreancla”></a> Ahora la sintaxis para ir a un ancla desde un hipervínculo es la siguiente: <a href=#”nombreancla”>Introducción</a>

#just girly things #html #manual #de supervivencia escolar de ned #part2

Enlaces Locales

Son los enlaces que se dirigen a otra página dentro del mismo sitio web. Normalmente, un navegador, al encontrar esta marca, muestra un texto subrayado. La sintaxis para disponer un hipervínculo a una página que se encuentra en el mismo sitio web, es la siguiente: <a href=“pagina2.html”>Noticias</a> La página a enlazar deberá estar dentro del mismo directorio de las demás páginas web.

#just girly things #html #easy #mid #part2

Enlaces remotos

Son enlaces hacia otro sitio web que precisamente no es el nuestro. En este caso se indica en “href” la dirección web hacia donde queremos enlazarnos, siempre acompañando a la misma con el “http://” Ejemplo: <a href=“http://www.google.com”>buscador google</a>

#just girly things #html #easy #gg #ogwin #part2

Enlace de correo

Permite enlazarnos directamente a un administrador de correos, para poder enviar un mensaje. En el enlace dentro del href se colocará la palabra “mailto”, seguido de la dirección a la cual va dirigido el enlace. <a href=“mailto:[email protected]”>mail</a>

#just girly things #html #easy #part2

Enlace de archivo

Este enlace va dirigido a un archivo de otro tipo. Este archivo debe estar en el mismo directorio de la página o de lo contrario, indicar la ruta para llegar al mismo. Cuando pinchamos en el enlace nuestro navegador nos hará la clásica pregunta si lo queremos guardar o ejecutar. Ejemplo: <a href=“img100345.jpg”>Descargar imagen</a>

#just girly things #html #easy #lcs finals #niels #part2

Atributo de página

1)¿Cuales son los atributos utilizados para darle formato a una pagina dentro de la etiqueta body? ¿Para que sirve cada una de ellas? Realizar un ejemplo practico

body bgcolor = Especifica el color del fondo de la paginaÇ <body bgcolor = “#0000ff”> o <body bgcolor = “blue”>

Body text = Atributo para definir el color del texto <body text=“#0000ff”> o <body text=“blue”>

Body background = Especifica ruta o url de la imagen que esta de fondo en la pagina <body background="http://i.4cdn.org/wsg/1410522551502.gif">

Imagenes

1)¿Que etiqueta se utiliza para insertar una imagen en un sitio web y cuales son sus atributos? Redacte un ejemplo practico

<img src="J:\gta\pict.jpg" border = "5" width = 50px height = 50px > = Atributo para insertar una imagen en la pagina. Los atributos height y width definen el tamaño en pixeles de la misma.

#just girly things #HTML #FLB #roberto #part2

Trending Blogs

Recently Viewed Blogs

Manual Basico de HTML