Inicio Pagina Web

INICIO PAGINA WEB
HTML Lenguaje de Marcas de Hipertexto

Se basa en principalmente en etiquetas, que son instrucciones para dar formato a
las diferentes partes de una pgina web. Para toda persona interesada en crear
pginas web es importante conocer al menos nociones bsicas de este lenguaje,
de esta forma podemos comprender como estn hechas las pginas web,
desarrollar sitios con ms flexibilidad y mejor construidos.
Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos,
ponerlos en negrita, establecer encabezados, estructurar el texto en guiones, en
prrafos, aadir imgenes y vnculos a otras pginas, etc. De ah que el
conocimiento de estas etiquetas sea importante para hacer pginas web, mejor
dicho imprescindible.
HTML est compuesto por etiquetas Q son instrucciones que le damos a nuestro
navegador
Etiquetas bsicas
<HTML>: indica el comienzo del documento

HTML.
<HEAD>: indica que empieza la cabecera de

la pgina. En ella se suele poner el ttulo (<title>) de la web, una descripcin y
otras informaciones relacionadas con el contenido de la pgina.
<BODY>: es el cuerpo de la pgina, donde va

lo que se ve en el navegador al cargar una web. En el body van los textos, las
imgenes y todos los contenidos de la web.
<H1>,
<H2>,
etc.:
son
los
ttulos
encabezados. Se utilizan para establecer determinados textos de la pgina

como titulares, suelen tener un tamao de fuente mayor para diferenciarlos del
resto del texto. Son importantes en el posicionamiento en buscadores.
<A>: define los enlaces.
<TABLE>: es una tabla, y dentro de esta

tenemos filas <TR> y celdas <TD>.
<P>: el texto dentro de esta etiqueta forma

un prrafo.
<IMG>: imgenes.
<BR>: Define salto de lnea.
<UL>: los textos dentro de esta etiqueta se

estructuran en listas. Mediante el uso de <LI>definimos cada guin dentro de
la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas.
<B> y <STRONG>: se utilizan para resaltar

el texto.
<U>: texto subrayado.
<I>: texto en cursiva.
<HR> nos permite trazar una lnea horizontal
Reglas bsicas
Las etiquetas estn encerradas entre los signos "<" y ">".
Generalmente vienen en pares <p> y <p>.
La primera es de apertura y la segunda de cierre.
El texto que se encuentra entre dos etiquetas es el contenido del elemento.
Las etiquetas no son sensibles a las maysculas y minsculas, o sea <b> es lo

mismo que<B>.
Atributos BODY
Bgcolor: especifica el color del fondo

Background: ingresa un color o una imagen de fondo
Text: indica el color del Texto
Link: Color del enlace no visitado
Vlink: color del enlace visitado
Cdigo de Colores:
Blanco: FFFFFF
Amarillo=FFFF00
Rojo= FF0000
Azul= 0000FF
Verde=00FF00
Negro=000000
Cyan=00FFFF
Gris=C0C0C0
Azul Cielo=3299CC
Gris Oscuro=2F4F4F
Verde Oscuro=2F4F2F
Turqueza=7093DB
Purpura=871F78
Naranja=7F7F00
Magenta=FF00FF
Marron=A62A2A
Se pueden Lograr ms colores si se combinan letras y nmeros pero recuerda

que solo son seis caracteres ejemplo: ad52df
<body bgcolor=56dd21 text=2f4f2f1>
Curso de HTML estoy creando mi Pgina
</body>
Src
<A>:
Este atributo es obligatorio e indica el nombre del
Obligatorio.
archivo de imagen (entre comillas) o la URL desde la
incluye no se mostrar
que se va a obtener la imagen.
imagen alguna.
define
se
enlaces.
respecto a una lnea de texto adyacente o a otras

imgenes en esa lnea. Los valores posibles son los ya
conocidos left, right, middle, top, bottom.
Alt
no
los
Permite controlar la alineacin de una imagen con

Align
Si
Atributo
obsoleto
(deprecated).
Sustituir
por CSS.
Entre comillas podremos escribir un texto que se
Atributo
requerido,
se
mostrar si la imagen no llega a cargar, mientras se
recomienda
carga o, cuando visualizando ya la imagen, pasamos el
aunque si no se hace la
ratn por encima.
imagen se mostrar.
incluirlo
Este atributo es opcional pero podemos ponerlo para
Width
especificar al navegador que muestre la imagen con un
Opcional.
Indicar
valor
tamao especfico. Significa ancho de la imagen que
en pixeles. Tambin se
vamos a representar. Si no se escribe, se carga la
puede indicar con CSS.
imagen con el tamao original.
Height
Border
Al igual que el atributo width, es opcional. Este atributo

indica el alto de la imagen.
Con border especificamos el ancho del borde que rodea

la imagen. Si se indica 0 equivale a sin borde.
Opcional.
Indicar
valor
en pixeles. Tambin se
puede indicar con CSS.
Atributo
obsoleto
(deprecated).
Sustituir
por CSS.
<body>
<img
src="http://www.aprenderaprogramar.com/templates/apr02062010/images/log
o.png" alt="Logotipo APR2">
</body>
ESTRUCTURA BASICA DE UNA PAGINA WEB
<html>
<head>mi pagina Web</head>
<body> cuerpo de la pagina</body>
</html>
<html> <head>
<title>Ttulo de la pgina</title>
</head>
<body> contenido
<h1>Encabezado de la pgina</h2>
<h3>Encabezado de menor tamao</h3>
<p>Este es el texto de un prrafo.</p>
<p>Este es el texto de otro prrafo. Dentro de este
prrafo, pueden ir palabras <b>en negrita</b>, <i>en
cursiva</i> o lo que quieras.</p>
<p>Tambin podemos poner listas como la siguiente:</p>
<ul>
<li>Guin nmero uno.</li>

<li>Guin nmero dos.</li>
<li>Guin nmero tres.</li>
<table width="100%" height="250px" cellspacing="1px" border="1px">
<body bgcolor=0000ff text=red>
<tr height="50px">
<td colspan="2px">
<table title="Banner" border="0">
<tr>
<td>Ac ubicamos el logo o un banner</td>
</tr>
</table>
</td>
</tr>
<tr height="200px">
<td>
<table title="Menu" border="0" width="100px">
<tr><td>Men</td></tr>
<tr><td>Vnculo 1</td></tr>
</table>
</td>
<td>
<table title="Contenido" border="0" width="400px">
<tr>
<td>Ac va el contenido</td>
</tr>
</table>
</td>
</tr>
</table>
<body bgcolor=0000ff text=red>
Los 10 mejores editores gratuitos (o casi) de

HTML, CSS y JavaScript
Escrito por Jos Manuel Alarcn el 28 mayo 2014 09:00
Si eres Desarrollador Web, necesitas dominar JavaScript: Aprende

con nosotros!
Lo nico que necesitamos para crear pginas y aplicaciones web es un
simple editor de texto plano y nuestra imaginacin. El propio Bloc de notas o
similar que viene con Windows nos sirve perfectamente. No obstante siempre
viene bien contar con el soporte que nos brindan ciertas herramientas
especializadas.
Las ms potentes nos ofrecen todo tipo de ayuda contextual para no tener que
recordar cada detalle de los cientos de atributos de CSS y etiquetas HTML
disponibles, vista previa de las pginas que estamos creando, soporte de
navegadores, validacin de etiquetas, verificacin de accesibilidad, y muchas otras
cuestiones avanzadas.
Dentro de la mirada de herramientas disponibles voy a destacar algunas de las
ms conocidas e interesantes de carcter gratuito (o realmente baratas) y
que he utilizado y conozco, si bien existen muchsimas ms y no se trata de una
lista exhaustiva.
Este es mi top ten de las mejores herramientas para crear aplicaciones y
pginas web editando cdigo HTML5, CSS3 yJavaScript.
Como buen ranking que se precie, comienzo del peor (dentro de los buenos) al
mejor ;-)
10.- CoffeCup Free Editor

Un editor multiplataforma (Windows, Mac) y gratuito con soporte para multitud de
caractersticas: ayuda contextual a la escritura de cdigo, vista previa del resultado
a medida que escribimos, etc.. La versin gratuita se ve recortada frente a la de
pago, pero an as es una buena opcin tambin.
CoffeCup
http://www.coffeecup.com/free-editor/
9.- TextWrangler
Editor gratuito para Mac especializado en escritura de cdigo HTML, CSS y
JavaScript. Se asemeja mucho a Notepad++ o a Sublime (ver ms abajo en el
ranking), pero es ms limitado. Es uno de los ms conocidos y utilizados en Mac.
Bare
Bones
Software
http://www.barebones.com/products/textwrangler/
8.- TextMate
Editor especializado de cdigo para Mac. Es similar a Notepad++ y a Sublime. Al
igual que el anterior es muy utilizado por programadores en el sistema de la
manzana.
MacroMates
http://macromates.com/
7.- Kompozer
Archiconocido editor de HTML y CSS que es gratuito y multiplataforma (Windows
Mac y Linux). Ofrece vista previa de la pgina mientras se escribe cdigo, mltiples
pestaas, edicin especfica de CSS, etc...
Kompozer
http://www.kompozer.net/
6.- Aptana Studio

Otro editor multiplataforma de carcter gratuito. Ofrece una excelente ayuda
contextual a la hora de escribir cdigo HTML, que incluye tambin el soporte de los
diferentes navegadores para cada caracterstica. Slo por esto ya merece la pena.
Tiene caractersticas avanzadas para programacin con JavaScript y soporta
adems mltiples lenguajes de servidor, como PHP, Python y Ruby on Rails. Est
basado en Eclipse, y por lo tanto en Java, por lo que tenlo en cuenta si no te gusta
instalar esa plataforma en tu equipo (por sus muchos problemas de seguridad y
lentitud).
Aptana
http://www.aptana.org/products/studio3
BONUS: Quieres ser mejor programador? Evita "Las 10 meteduras

de pata ms comunes"
5.- Notepad++
Es gratuito y adems Open Source aunque solo funciona bajo Windows. Dispone de
multitud de plugins para extender su funcionalidad, y como es muy popular hay
muchos donde elegir. Va mucho ms all que el bloc de notas ya que ofrece
sintaxis coloreada, estructuracin de cdigo (para poder plegar y desplegar zonas
cubiertas por etiquetas), soporte de otros muchos lenguajes de programacin,
etc... Est bien tenerlo a mano para pruebas o ediciones rpidas. Es uno de mis
favoritos.
Notepad++
http://notepad-plus-plus.org/
4.- BlueGriffon
Este excelente editor WYSIWYG utiliza por debajo el motor de renderizado de
Firefox para visualizar las pginas a medida que las vamos editando. Cuenta con
ayudas a la escritura de cdigo (como las miguitas de pan de la parte de abajo o
el acceso a la estructura jerrquica de la pgina), y ofrece incluso la posibilidad de
probar en tiempo real transformaciones 3D de CSS3 sin abandonar el editor
(ventajas de utilizar el motor Gecko de Mozilla). Es gratuito, Open Source y
multiplataforma (Windows, Mac y Linux) y est disponible en Espaol entre otros
muchos idiomas. La ltima versin es de hace casi un ao, pero el proyecto sigue
activo.
BlueGriffon
http://bluegriffon.org/
3.- Sublime Text

Un editor de texto avanzado para programadores, multiplataforma. Aunque es
bastante espartano lo cierto es que todo el que invierte tiempo en aprender a
dominarlo luego no lo quiere dejar, ya que aumenta mucho la productividad a la
hora de escribir cdigo. No ofrece muchas de las caractersticas de ayuda al
programador web que s ofrecen la mayora de los otros entornos, por lo que es
recomendable sobre todo si vamos a trabajar mucho directamente con cdigo,
especialmente JavaScript. Lo podemos descargar y utilizar gratuitamente, pero si lo
vamos a usar a menudo para trabajar sus creadores nos solicitan que les
paguemos una licencia (es lo justo). sta tiene un precio muy razonable.
Sublime
Text
http://www.sublimetext.com/
2.- JetBrains WebStorm

Este es sin duda uno de los mejores editores de cdigo del mercado, y no solo para
el trinomio HTML/CSS/JavaScript. De hecho soporta otros lenguajes como
CoffeeScript, TypeScript y Node.js, y multitud de libreras de JavaScript, sistemas
de control de cdigo, testeo unitario, etc.... Es muy espectacular la capacidad de
editar y ver en tiempo real los cambios en un Chrome, incluso en aplicaciones de
tipo SPA/AJAX. La lista de caractersticas es tan larga que mejor te enlazo a la

misma en su pgina. Lleva un rato aprender todas sus posibilidades, pero merece
la pena.
Es multiplataforma. No es gratuito, pero su precio (solamente 44 para uso
individual) es un regalo para todo lo que ofrece. Muy recomendable.
JetBrains
http://www.jetbrains.com/webstorm/
1.- Microsoft Visual Studio Express for Web

Est disponible en varios idiomas (incluyendo el Espaol) y su nica limitacin es
que slo funciona bajo Windows. Es decir, que si trabajas en Mac o Linux no podrs
utilizarlo. Por lo dems es un entorno integrado de desarrollo (IDE) espectacular.
Aunque, al igual que el anterior, es una herramienta tcnica orientada a
programadores y con muchas otras posibilidades avanzadas, ofrece un soporte
estupendo para diseo de pginas Web, con editores avanzados de HTML, CSS y
JavaScript, capacidad de depuracin, ayuda contextual para todos los lenguajes,
validadores de cdigo, validadores de accesibilidad, visualizacin real de cmo van

a quedar las pginas, etc... Echars de menos muy pocas cosas (aunque algunas
s, sobre todo si usas Sublime). Es totalmente gratuito.

Inicio Pagina Web

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Inicio Pagina Web

Загружено:

Авторское право:

Доступные форматы

INICIO PAGINA WEB

HTML Lenguaje de Marcas de Hipertexto

<HTML>: indica el comienzo del documento

<HEAD>: indica que empieza la cabecera de

<BODY>: es el cuerpo de la pgina, donde va

encabezados. Se utilizan para establecer determinados textos de la pgina

<A>: define los enlaces.

<TABLE>: es una tabla, y dentro de esta

<P>: el texto dentro de esta etiqueta forma

<BR>: Define salto de lnea.

<UL>: los textos dentro de esta etiqueta se

<B> y <STRONG>: se utilizan para resaltar

<U>: texto subrayado.

<I>: texto en cursiva.

<HR> nos permite trazar una lnea horizontal

Las etiquetas estn encerradas entre los signos "<" y ">".

Generalmente vienen en pares <p> y <p>.

La primera es de apertura y la segunda de cierre.

El texto que se encuentra entre dos etiquetas es el contenido del elemento.

Las etiquetas no son sensibles a las maysculas y minsculas, o sea <b> es lo

Bgcolor: especifica el color del fondo

Se pueden Lograr ms colores si se combinan letras y nmeros pero recuerda

Este atributo es obligatorio e indica el nombre del

archivo de imagen (entre comillas) o la URL desde la

que se va a obtener la imagen.

respecto a una lnea de texto adyacente o a otras

Permite controlar la alineacin de una imagen con

Entre comillas podremos escribir un texto que se

mostrar si la imagen no llega a cargar, mientras se

carga o, cuando visualizando ya la imagen, pasamos el

ratn por encima.

Este atributo es opcional pero podemos ponerlo para

especificar al navegador que muestre la imagen con un

tamao especfico. Significa ancho de la imagen que

vamos a representar. Si no se escribe, se carga la

puede indicar con CSS.

imagen con el tamao original.

Al igual que el atributo width, es opcional. Este atributo

Con border especificamos el ancho del borde que rodea

<li>Guin nmero uno.</li>

Los 10 mejores editores gratuitos (o casi) de

Si eres Desarrollador Web, necesitas dominar JavaScript: Aprende

10.- CoffeCup Free Editor

6.- Aptana Studio

BONUS: Quieres ser mejor programador? Evita "Las 10 meteduras

3.- Sublime Text

2.- JetBrains WebStorm

tipo SPA/AJAX. La lista de caractersticas es tan larga que mejor te enlazo a la

1.- Microsoft Visual Studio Express for Web

validadores de cdigo, validadores de accesibilidad, visualizacin real de cmo van

Вам также может понравиться