SlideShare una empresa de Scribd logo
1 de 4
LENGUAJE HTML
CONCEPTO:
HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado
predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de
texto, así como para complementar el texto con objetos tales como imágenes.
HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir,
hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual
puede afectar el comportamiento de navegadores web y otros procesadores de HTML.
ESTRUCTURA BASICA
 Para comenzar a escribir un documento en HTML, debes saber que todo lo que escribas debes hacerlo dentro
de los signos “<” para empezar a escribir un comando y “>” para cerrar el la escritura del comando escrito.
Ejemplo: <html>.
 La mayoría de los comandos sedeben abrir y cerrar, para cerrar usaremos el signo “/”. Esto quiere decir que
siempre usaremos el mismo comando pero de dos formas, uno abierto y otro cerrado.Ejemplo: “<html>” para
empezar a escribir el documento y “</html>” para cerrar y terminar de escribir el documento.
 La estructura básica quecompone un documento y que debemos saberlo de memoria es la siguiente:
HTML> ----Seescribeparacomenzarlapagina.
<HEAD> -- Se escribe paracomenzarel encabezadoque se mostraraenla parte superiorde la
página.
<TITLE> -------este comandose utilizaparaescribirel titulo. El titulose muestradentrodel
encabezado.
</TITLE>----- Este comandocierrael tituloylo diferenciadel restodel documento.
</HEAD>----- Este comandosirve paracerrar el encabezado.
<BODY> --- Este comandopermite empezaraescribirtodoloque formará parte del documento.
</BODY> -- Este comandopermite terminarde escribirel contenidodel documentoyse
utilizaparacerrar la escrituradel contenido.
</HTML> --- Se utilizaparaterminarde escribirel documento.
Ejemplo:
<HTML>
<HEAD>
<TITLE>TITULO DE LA PAGINA</TITLE>
</HEAD>
<BODY>
HOLA, ESTA ES MI NUEVA PAGINA.
</BODY>
</HTML>
 Para escribir un documento HTML solo tienes que usar el programa “Bloc de notas” de Windows y al
finalizar guardar el documento con el nombre que quieras pero con la extensión “.html” Ejemplo: Joel.html
 Para ver como queda tu pagina escrita debes abrir el documento que guardaste con extensión “.html” y
notaras que ahora aparece con el icono del navegador Internet explorer o con el icono de otro navegador.
Solo dale doble clic y el documento se abrirá.
 Si deseas modificar y agregar o quitar algo al documento, solo tienes que escribirlo en el documento de bloc
de notas que lo tienes abierto.En caso de haber cerrado el documento de bloc de notas,debes hacer clic en
el menú “Ver” y luego en “Codigo fuente” y lo modificas a tu gusto. No olvides de guardar los cambios que
hagas en el bloc de notas en el menú “Archivo” y luego en “Guardar”.
PRINCIPALES COMANDOS
<P> </P>  Sirve paraescribirpárrafosy separarlosunode otro.
<BR> Sirve para cambiar delínea,para que se vea el texto debajo de otro. Por ejemplo lo podemos usar
cuando escribimos versos.
<HR> Sirve para crear líneas en la pagina.Tiene algunos atributos como:
WIDTH, permite determinar el ancho que ocupará la línea en la página.Ejm:
<HR WIDTH=80%>, no te olvides que se pone en porcentaje.
SIZE, permite determinar el grosor de la línea. Ejemplo: <HR SIZE=10>.
También pueden escribirsedentro de una sola etiqueta: <HR WIDTH=50% SIZE=10>
<BLOCKQUOTE>  Permite crear espacios detabulación (Dejar un pequeño espacio en blanco) al inicio del texto
escrito.Al final debes cerrar esta etiqueta con </BLOCKQUOTE>.
<PRE>  Permite mostrar en la pantalla el texto tal como lo escribiste.
Para dar formato al texto:
<FONT>  Permite modificar el formato del texto. Ejemplo:
<FONT SIZE="2" COLOR="red" FACE="Arial">, Define tipo de letra (Face), tamaño
(Size) y color (Color) a tu gusto. No te olvides de cerrar </FONT> al final
para que no modifique a los demás textos que escribas.
<B>  Sirvepara poner en negritael texto escrito.
<I>  Sirvepara poner en cursiva el texto escrito.
<U>  Sirve para subrayar el texto escrito.
<STRIKE>  Sirve para Tacharel texto escrito.
<H1>  Se utiliza para escribir títulos y resaltarlo deforma rápida.Ejem: <H1> Bienvenido</H1>, <H2></H2>,
<H3></H3><H4></H4><H5></H5><H6></H6>. Esta etiqueta modifica el tamaño del titulo de mayor a menor. <H1>
indica mayor tamaño y <H6> indica menor tamaño.
Para alineación de párrafos:
Como ya se dijo anteriormente, para escribir párrafosseutiliza la etiqueta <P>, pero a esta etiqueta le podemos
agregar algunos atributos como ALIGN=”LEFT” para poder alinear la posición queocupará el párrafo en la pagina.
Ejemplo:
<P ALIGN="LEFT">, alinea el texto hacia la Izquierda
<P ALIGN="RIGHT">Alinea el texto escrito hacia la Derecha
<P ALIGN="CENTER"> Alinea el texto escrito hacia el centro.
COLOR DE FONDO DE PÁGINA
El colorde fondode páginapor defecto(Automáticamente) esde colorblanco,perolopodemoscambiar
y utilizarel colorque creamosconveniente.Paracambiar el fondo tenemosque agregardentrode la
etiquetaBodyel comandoBgcolor=”Escribirel nombre del color”.Ejemplo:
<BODY BGCOLOR=”RED”> Esto permitiráverel fondode colorrojo.
Tambiénesposible ponerunaimagencomofondode nuestrapagina,paraelloagregaremos el comando
Backgrounddentrode la etiquetabody.Ejemplo:
<BODY BACKGROUND=”FLOR.JPG”>
OJO: Para crear una páginacon una imagende fondo,necesariamente debescrearunacarpetay dentro
de ellaguardar laimagenque vasa utilizarytambiénlapáginaque estaselaborando.
TABLAS
Las tablasson unode loselementosmásinteresantesde HTML. Permiten,porejemplo,escribirtextoen
variascolumnas,hacerlistasde equivalencias,tablaspropiamentedichas,etc.
Para iniciarunatabla debemosusarlaetiquetaTABLE,ytambiénpodemosindicarle el grosordel borde
con el comandoBORDER. Ejemplo:
<TABLE BORDER=1>
Despuésde haberindicadoel iniciode latabla,debemosindicarel iniciode unanuevafila,paraello
utilizaremoslaetiqueta<TR> y para indicaral menosunaceldadentrode la filautilizaremoslaetiqueta
><TD>. Ejemplo:
<TR><TD>celda 1</TD><TD>celda 2</TD></TR>
Ejemplocompletode una tabla con dosfilas y cuatro celdas:
<body>
<TABLE BORDER=1>
<TR><TD>celda 1</TD><TD>celda 2</TD></TR>
<TR><TD>celda 3</TD><TD>celda 4</TD></TR>
</TABLE>
</body>
JPG esla extensióndel dibujooimagenque estas
poniendo,sinocopiaslaextensión,simplementeno
se mostrara el dibujoenel fondo. TambiénPuedes
usar imágenesconextensiónGIF.
Nombre
del dibujo
Inicio
de fila
Fin de
fila
Inicio de
la Primera
celda.
Fin de la
Primera celda.
Inicio dela
segunda
celda.
Fin de la segunda
celda.
INSERTAR

Más contenido relacionado

La actualidad más candente

Etiquetas de xhtml
Etiquetas de xhtmlEtiquetas de xhtml
Etiquetas de xhtmlXoch Flores
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos htmljulyovalle
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlDoraliza Hugo Vera
 
Informatica
InformaticaInformatica
Informaticajuani9
 
Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas htmlMiguel Barajas
 
Etiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasEtiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasjennypalcio
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTMLpablo3022
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas htmlup
 

La actualidad más candente (15)

Etiquetas de xhtml
Etiquetas de xhtmlEtiquetas de xhtml
Etiquetas de xhtml
 
Las etiquetas más utilizadas en html
Las etiquetas más utilizadas en htmlLas etiquetas más utilizadas en html
Las etiquetas más utilizadas en html
 
Listado de etiquetas y atributos html
Listado de etiquetas y atributos htmlListado de etiquetas y atributos html
Listado de etiquetas y atributos html
 
HTML
HTMLHTML
HTML
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
Informatica
InformaticaInformatica
Informatica
 
Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas html
 
Informatika 1111111
Informatika 1111111Informatika 1111111
Informatika 1111111
 
Diapositivas Html
Diapositivas HtmlDiapositivas Html
Diapositivas Html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Etiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadasEtiquetas de lenguaje html mas utilizadas
Etiquetas de lenguaje html mas utilizadas
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Presentación unidad tres
Presentación unidad tresPresentación unidad tres
Presentación unidad tres
 
Presentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwwwPresentación2 wwwwwwwwwwwwww
Presentación2 wwwwwwwwwwwwww
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 

Similar a Lenguaje html para colegio (20)

Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Páginas html
Páginas htmlPáginas html
Páginas html
 
Páginas web con html
Páginas web con htmlPáginas web con html
Páginas web con html
 
emded/Retro2011brandon
emded/Retro2011brandonemded/Retro2011brandon
emded/Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Codigos HTML...paginas web
Codigos HTML...paginas webCodigos HTML...paginas web
Codigos HTML...paginas web
 
HTML 2011
HTML 2011HTML 2011
HTML 2011
 
Introducción a Html
Introducción a HtmlIntroducción a Html
Introducción a Html
 
Lenguaje de programación de páginas web
Lenguaje de programación de páginas webLenguaje de programación de páginas web
Lenguaje de programación de páginas web
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Html doc. descargado (reparado)
Html doc. descargado (reparado)Html doc. descargado (reparado)
Html doc. descargado (reparado)
 

Último

Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura ModernaLe Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Modernasofpaolpz
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturajesusgrosales12
 
Arquitectura Moderna Le Corbusier- Mies Van Der Rohe
Arquitectura Moderna Le Corbusier- Mies Van Der RoheArquitectura Moderna Le Corbusier- Mies Van Der Rohe
Arquitectura Moderna Le Corbusier- Mies Van Der Roheimariagsg
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroJuan Carlos Fonseca Mata
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
Arquitectura Moderna Walter Gropius- Frank Lloyd Wright
Arquitectura Moderna  Walter Gropius- Frank Lloyd WrightArquitectura Moderna  Walter Gropius- Frank Lloyd Wright
Arquitectura Moderna Walter Gropius- Frank Lloyd Wrightimariagsg
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfasnsdt
 
2024-EL CAMBIO CLIMATICO Y SUS EFECTOS EN EL PERÚ Y EL MUNDO.pdf
2024-EL CAMBIO CLIMATICO Y SUS EFECTOS EN EL PERÚ Y EL MUNDO.pdf2024-EL CAMBIO CLIMATICO Y SUS EFECTOS EN EL PERÚ Y EL MUNDO.pdf
2024-EL CAMBIO CLIMATICO Y SUS EFECTOS EN EL PERÚ Y EL MUNDO.pdfcnaomi195
 
diseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddiseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddabuitragoi
 
Arquitectura moderna nazareth bermudez PSM
Arquitectura moderna nazareth bermudez PSMArquitectura moderna nazareth bermudez PSM
Arquitectura moderna nazareth bermudez PSMNaza59
 
Arquitectura moderna / Nazareth Bermúdez
Arquitectura moderna / Nazareth BermúdezArquitectura moderna / Nazareth Bermúdez
Arquitectura moderna / Nazareth BermúdezNaza59
 
TIPOS DE LINEAS utilizados en dibujo técnico mecánico
TIPOS DE LINEAS utilizados en dibujo técnico mecánicoTIPOS DE LINEAS utilizados en dibujo técnico mecánico
TIPOS DE LINEAS utilizados en dibujo técnico mecánicoWilsonChambi4
 
APORTES Y CARACTERISTICAS DE LAS OBRAS DE CORBUSIER. MIES VAN DER ROHE
APORTES Y CARACTERISTICAS DE LAS OBRAS DE  CORBUSIER. MIES VAN DER ROHEAPORTES Y CARACTERISTICAS DE LAS OBRAS DE  CORBUSIER. MIES VAN DER ROHE
APORTES Y CARACTERISTICAS DE LAS OBRAS DE CORBUSIER. MIES VAN DER ROHEgonzalezdfidelibus
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfBrbara57940
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfhellotunahaus
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfslaimenbarakat
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 

Último (20)

Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura ModernaLe Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
Le Corbusier y Mies van der Rohe: Aportes a la Arquitectura Moderna
 
Jesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitecturaJesus Diaz afiche Manierismo .pdf arquitectura
Jesus Diaz afiche Manierismo .pdf arquitectura
 
Arquitectura Moderna Le Corbusier- Mies Van Der Rohe
Arquitectura Moderna Le Corbusier- Mies Van Der RoheArquitectura Moderna Le Corbusier- Mies Van Der Rohe
Arquitectura Moderna Le Corbusier- Mies Van Der Rohe
 
Geometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de QuerétaroGeometrías de la imaginación: Diseño e iconografía de Querétaro
Geometrías de la imaginación: Diseño e iconografía de Querétaro
 
guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Arquitectura Moderna Walter Gropius- Frank Lloyd Wright
Arquitectura Moderna  Walter Gropius- Frank Lloyd WrightArquitectura Moderna  Walter Gropius- Frank Lloyd Wright
Arquitectura Moderna Walter Gropius- Frank Lloyd Wright
 
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdfCERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
CERTIFICACIÓN DE CAPACITACIÓN PARA EL CENSO - tfdxwBRz6f3AP7QU.pdf
 
2024-EL CAMBIO CLIMATICO Y SUS EFECTOS EN EL PERÚ Y EL MUNDO.pdf
2024-EL CAMBIO CLIMATICO Y SUS EFECTOS EN EL PERÚ Y EL MUNDO.pdf2024-EL CAMBIO CLIMATICO Y SUS EFECTOS EN EL PERÚ Y EL MUNDO.pdf
2024-EL CAMBIO CLIMATICO Y SUS EFECTOS EN EL PERÚ Y EL MUNDO.pdf
 
diseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidaddiseño de plantas agroindustriales unidad
diseño de plantas agroindustriales unidad
 
Arquitectura moderna nazareth bermudez PSM
Arquitectura moderna nazareth bermudez PSMArquitectura moderna nazareth bermudez PSM
Arquitectura moderna nazareth bermudez PSM
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
Arquitectura moderna / Nazareth Bermúdez
Arquitectura moderna / Nazareth BermúdezArquitectura moderna / Nazareth Bermúdez
Arquitectura moderna / Nazareth Bermúdez
 
TIPOS DE LINEAS utilizados en dibujo técnico mecánico
TIPOS DE LINEAS utilizados en dibujo técnico mecánicoTIPOS DE LINEAS utilizados en dibujo técnico mecánico
TIPOS DE LINEAS utilizados en dibujo técnico mecánico
 
APORTES Y CARACTERISTICAS DE LAS OBRAS DE CORBUSIER. MIES VAN DER ROHE
APORTES Y CARACTERISTICAS DE LAS OBRAS DE  CORBUSIER. MIES VAN DER ROHEAPORTES Y CARACTERISTICAS DE LAS OBRAS DE  CORBUSIER. MIES VAN DER ROHE
APORTES Y CARACTERISTICAS DE LAS OBRAS DE CORBUSIER. MIES VAN DER ROHE
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdfLAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
LAMODERNIDADARQUITECTURABYBARBARAPADILLA.pdf
 
Brochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdfBrochure Tuna Haus _ Hecho para mascotas.pdf
Brochure Tuna Haus _ Hecho para mascotas.pdf
 
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdfSlaimen Barakat - SLIDESHARE TAREA 2.pdf
Slaimen Barakat - SLIDESHARE TAREA 2.pdf
 
1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño1.La locomoción de los seres vivos diseño
1.La locomoción de los seres vivos diseño
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 

Lenguaje html para colegio

  • 1. LENGUAJE HTML CONCEPTO: HTML, siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. ESTRUCTURA BASICA  Para comenzar a escribir un documento en HTML, debes saber que todo lo que escribas debes hacerlo dentro de los signos “<” para empezar a escribir un comando y “>” para cerrar el la escritura del comando escrito. Ejemplo: <html>.  La mayoría de los comandos sedeben abrir y cerrar, para cerrar usaremos el signo “/”. Esto quiere decir que siempre usaremos el mismo comando pero de dos formas, uno abierto y otro cerrado.Ejemplo: “<html>” para empezar a escribir el documento y “</html>” para cerrar y terminar de escribir el documento.  La estructura básica quecompone un documento y que debemos saberlo de memoria es la siguiente: HTML> ----Seescribeparacomenzarlapagina. <HEAD> -- Se escribe paracomenzarel encabezadoque se mostraraenla parte superiorde la página. <TITLE> -------este comandose utilizaparaescribirel titulo. El titulose muestradentrodel encabezado. </TITLE>----- Este comandocierrael tituloylo diferenciadel restodel documento. </HEAD>----- Este comandosirve paracerrar el encabezado. <BODY> --- Este comandopermite empezaraescribirtodoloque formará parte del documento. </BODY> -- Este comandopermite terminarde escribirel contenidodel documentoyse utilizaparacerrar la escrituradel contenido. </HTML> --- Se utilizaparaterminarde escribirel documento. Ejemplo: <HTML> <HEAD> <TITLE>TITULO DE LA PAGINA</TITLE> </HEAD> <BODY> HOLA, ESTA ES MI NUEVA PAGINA. </BODY> </HTML>  Para escribir un documento HTML solo tienes que usar el programa “Bloc de notas” de Windows y al finalizar guardar el documento con el nombre que quieras pero con la extensión “.html” Ejemplo: Joel.html  Para ver como queda tu pagina escrita debes abrir el documento que guardaste con extensión “.html” y notaras que ahora aparece con el icono del navegador Internet explorer o con el icono de otro navegador. Solo dale doble clic y el documento se abrirá.  Si deseas modificar y agregar o quitar algo al documento, solo tienes que escribirlo en el documento de bloc de notas que lo tienes abierto.En caso de haber cerrado el documento de bloc de notas,debes hacer clic en el menú “Ver” y luego en “Codigo fuente” y lo modificas a tu gusto. No olvides de guardar los cambios que hagas en el bloc de notas en el menú “Archivo” y luego en “Guardar”.
  • 2. PRINCIPALES COMANDOS <P> </P>  Sirve paraescribirpárrafosy separarlosunode otro. <BR> Sirve para cambiar delínea,para que se vea el texto debajo de otro. Por ejemplo lo podemos usar cuando escribimos versos. <HR> Sirve para crear líneas en la pagina.Tiene algunos atributos como: WIDTH, permite determinar el ancho que ocupará la línea en la página.Ejm: <HR WIDTH=80%>, no te olvides que se pone en porcentaje. SIZE, permite determinar el grosor de la línea. Ejemplo: <HR SIZE=10>. También pueden escribirsedentro de una sola etiqueta: <HR WIDTH=50% SIZE=10> <BLOCKQUOTE>  Permite crear espacios detabulación (Dejar un pequeño espacio en blanco) al inicio del texto escrito.Al final debes cerrar esta etiqueta con </BLOCKQUOTE>. <PRE>  Permite mostrar en la pantalla el texto tal como lo escribiste. Para dar formato al texto: <FONT>  Permite modificar el formato del texto. Ejemplo: <FONT SIZE="2" COLOR="red" FACE="Arial">, Define tipo de letra (Face), tamaño (Size) y color (Color) a tu gusto. No te olvides de cerrar </FONT> al final para que no modifique a los demás textos que escribas. <B>  Sirvepara poner en negritael texto escrito. <I>  Sirvepara poner en cursiva el texto escrito. <U>  Sirve para subrayar el texto escrito. <STRIKE>  Sirve para Tacharel texto escrito. <H1>  Se utiliza para escribir títulos y resaltarlo deforma rápida.Ejem: <H1> Bienvenido</H1>, <H2></H2>, <H3></H3><H4></H4><H5></H5><H6></H6>. Esta etiqueta modifica el tamaño del titulo de mayor a menor. <H1> indica mayor tamaño y <H6> indica menor tamaño. Para alineación de párrafos: Como ya se dijo anteriormente, para escribir párrafosseutiliza la etiqueta <P>, pero a esta etiqueta le podemos agregar algunos atributos como ALIGN=”LEFT” para poder alinear la posición queocupará el párrafo en la pagina. Ejemplo: <P ALIGN="LEFT">, alinea el texto hacia la Izquierda <P ALIGN="RIGHT">Alinea el texto escrito hacia la Derecha <P ALIGN="CENTER"> Alinea el texto escrito hacia el centro.
  • 3. COLOR DE FONDO DE PÁGINA El colorde fondode páginapor defecto(Automáticamente) esde colorblanco,perolopodemoscambiar y utilizarel colorque creamosconveniente.Paracambiar el fondo tenemosque agregardentrode la etiquetaBodyel comandoBgcolor=”Escribirel nombre del color”.Ejemplo: <BODY BGCOLOR=”RED”> Esto permitiráverel fondode colorrojo. Tambiénesposible ponerunaimagencomofondode nuestrapagina,paraelloagregaremos el comando Backgrounddentrode la etiquetabody.Ejemplo: <BODY BACKGROUND=”FLOR.JPG”> OJO: Para crear una páginacon una imagende fondo,necesariamente debescrearunacarpetay dentro de ellaguardar laimagenque vasa utilizarytambiénlapáginaque estaselaborando. TABLAS Las tablasson unode loselementosmásinteresantesde HTML. Permiten,porejemplo,escribirtextoen variascolumnas,hacerlistasde equivalencias,tablaspropiamentedichas,etc. Para iniciarunatabla debemosusarlaetiquetaTABLE,ytambiénpodemosindicarle el grosordel borde con el comandoBORDER. Ejemplo: <TABLE BORDER=1> Despuésde haberindicadoel iniciode latabla,debemosindicarel iniciode unanuevafila,paraello utilizaremoslaetiqueta<TR> y para indicaral menosunaceldadentrode la filautilizaremoslaetiqueta ><TD>. Ejemplo: <TR><TD>celda 1</TD><TD>celda 2</TD></TR> Ejemplocompletode una tabla con dosfilas y cuatro celdas: <body> <TABLE BORDER=1> <TR><TD>celda 1</TD><TD>celda 2</TD></TR> <TR><TD>celda 3</TD><TD>celda 4</TD></TR> </TABLE> </body> JPG esla extensióndel dibujooimagenque estas poniendo,sinocopiaslaextensión,simplementeno se mostrara el dibujoenel fondo. TambiénPuedes usar imágenesconextensiónGIF. Nombre del dibujo Inicio de fila Fin de fila Inicio de la Primera celda. Fin de la Primera celda. Inicio dela segunda celda. Fin de la segunda celda.