SlideShare una empresa de Scribd logo
1 de 14
MANUAL BASICO DE HTML
JanetAlejandra BeltranVizcarra
TABLAS
 Las tablas nos ayudan a organizar mejor
nuestra información.
 El codigo para insertar una tabla es:
<table></table> ´que nos sirve para inicializar
y cerrar la tabla´
<tr>
<td></td> ´td nos ayudara a ingresar los datos
en la tabla´
ATRIBUTOS DE TABLA
 Border : nos ayuda a definir el borde de
nuestra tabla
<table border=“3”>
 Width: Nos ayuda a definir el ancho de la
tabla
<table border=“3” width=“50%”>
LISTAS
 Las listas nos ayudan a representar nuestra
información dentro de HTLM existen tres
tipos de listas
 Listas no ordenadas
 Listas ordenadas
 Listas de definiciones
Listas no ordenadas
 Las listas ordenadas van enmarcadas dentroo
de las etiquetas <ul></ul> cada punto que
queramos añadir a la lista lo haremos dentro
de la etiqueta<li>
ejemplo
<ul>
<li>Ejemplo
<li>ejemplo2
</ul>
Listas ordenadas
 Las listas ordenadas van dentro de las
etiquetas <ol></ol>. Cada punto de la lista se
escribe con la misma etiqueta que las listas
no ordenadas <li>
Ejemplo
<ol>
<li>ejemplo
<li>ejemplo2>
</ol>
Listas de definiciones
 Si lo que vamos hacer en un listado de
definiciones podemos usar las etiquetas
<dl><dt><dd>
 <dl> nos indica que dentro de ella va a ir una
definicion
 <dt> nos indica que dentro de ella ira el
termino que vamos a defenir es decir ira el
titulo de la definicion
 <dd> nos indica que dentro de ella ira la
definicion
FRAME
 los marcos son instrumentos que forman ya
parte habitual del web y que los navegadores
gestionan hoy día a la perfección. Los
detractores de los marcos afirman la
inutilidad de subdividir ulteriormente las
páginas web, las cuales, en última instancia,
pueden resultar poco legibles
FRAME
 Documento Marco
 <FRAMESET></FRAMESET>
 altura en filas
 <FRAMESET ROWS=,,,></FRAMESET>
 altura en filas
 <FRAMESET ROWS=*></FRAMESET>
 anchura en columnas
 <FRAMESET COLS=,,,></FRAMESET>
 anchura en columnas
 <FRAMESET COLS=*></FRAMESET>
 anchura del borde
 <FRAMESET BORDER=?>
 borde
 <FRAMESET FRAMEBORDER="yes|no">
 color del borde
 <FRAMESET BORDERCOLOR="#$$$$$$">
HIPERVINCULOS
 Para agregar un hipervínculo a una pagina de
html utilizaremos la etiqueta <a>
 <a href=“direccion“
target="central">ejemplo</a>
 La direccion del archivo que vincularemos es
sumamente importante porque si este no es
el correcto el hipervinculo no funcionara
IMÁGENES
 Para agregar una imagen a una pagina de
html utilizaremos <img src>
 <img src=“direccion”>
Al igual que en los hipervinculos es muy
importante que la dirección de la imagen sea
la correcta para asegurarnos de que asi sea
puede consultar en propiedades de la imagen
VIDEO
 Para agregar un video a una pagina de html
lo haremos de la siguiente forma
 <video width=“320” height=“240 ” controls>
 <source src=“video.mp4” type=“videp/mp4”>
FORMULARIOS
 Para agregar un formulario lo haremos con la eqtiqueta <form></form>
 Ejemplo
<FORM ACTION=http://www.coder.com/code/mailform/mailform.pl.cgi
METHOD=POST>
<INPUTTYPE=HIDDEN NAME=MAILFORM_ID VALUE="Val_7743">
<INPUTTYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Mi primer
formulario">
<INPUTTYPE=HIDDEN NAME=MAILFORM_URL
VALUE="http://www.htmlpoint.com/risposta.htm">
<B>Nombre y apellidos</B><BR>
<input type=text NAME=MAILFORM_NAME size=33><BR><BR>
<B>Dirección de correoelectrónico</B><BR>
<input type=text NAME=MAILFORM_FROM size=33><BR><BR>
<B>Comentarios</B><BR>
<TEXTAREA NAME=MAILFORM_TEXT ROWS=10 COLS=42
WRAP></TEXTAREA><BR><BR>
<INPUTTYPE=SUBMIT VALUE="Envía"><INPUT TYPE=RESETVALUE="Cancela">
</FORM>

Más contenido relacionado

La actualidad más candente (17)

Html tablas e imagenes
Html tablas e imagenesHtml tablas e imagenes
Html tablas e imagenes
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...
Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...
Colegionacionalnicolsesguerra 150917155628-lva1-app6892-150924155136-lva1-app...
 
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
HTML COMO CREAR TABLAS Y TIPOS DE LISTAS.
 
Presentacion
PresentacionPresentacion
Presentacion
 
Aplicacione para el trabajo del Community Manager
Aplicacione para el trabajo del Community ManagerAplicacione para el trabajo del Community Manager
Aplicacione para el trabajo del Community Manager
 
Pagina web 5.
Pagina web 5.Pagina web 5.
Pagina web 5.
 
Trabajo 5
Trabajo 5Trabajo 5
Trabajo 5
 
tablas
tablastablas
tablas
 
Pagina web v
Pagina web vPagina web v
Pagina web v
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Indes.html
Indes.htmlIndes.html
Indes.html
 
Trabajo 6
Trabajo 6Trabajo 6
Trabajo 6
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 
Frames
FramesFrames
Frames
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Pagina web 6
Pagina web 6Pagina web 6
Pagina web 6
 

Similar a Manual basico de html

Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
Monsalve Sergio
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
Wilmer Acero
 
Etiquetas en html
Etiquetas en htmlEtiquetas en html
Etiquetas en html
jose
 

Similar a Manual basico de html (20)

Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Colegio nacional nicoles esguerra
Colegio nacional nicoles esguerraColegio nacional nicoles esguerra
Colegio nacional nicoles esguerra
 
emded/Retro2011brandon
emded/Retro2011brandonemded/Retro2011brandon
emded/Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011brandon
Retro2011brandonRetro2011brandon
Retro2011brandon
 
Retro2011ortegon
Retro2011ortegonRetro2011ortegon
Retro2011ortegon
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
 
html
htmlhtml
html
 
Palomino
Palomino Palomino
Palomino
 
HTML
HTMLHTML
HTML
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Etiquetas en html
Etiquetas en htmlEtiquetas en html
Etiquetas en html
 
Pres de po
Pres de poPres de po
Pres de po
 
Presentacion de etiquetas
Presentacion de etiquetasPresentacion de etiquetas
Presentacion de etiquetas
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Presentacion de etiquetas "HTML"
Presentacion de etiquetas "HTML"Presentacion de etiquetas "HTML"
Presentacion de etiquetas "HTML"
 

Último

TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
jlorentemartos
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
RigoTito
 

Último (20)

Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024Tema 10. Dinámica y funciones de la Atmosfera 2024
Tema 10. Dinámica y funciones de la Atmosfera 2024
 
Diapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundariaDiapositivas de animales reptiles secundaria
Diapositivas de animales reptiles secundaria
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
Los avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesLos avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtuales
 
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VSSEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
SEPTIMO SEGUNDO PERIODO EMPRENDIMIENTO VS
 
Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptFUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 

Manual basico de html

  • 1. MANUAL BASICO DE HTML JanetAlejandra BeltranVizcarra
  • 2. TABLAS  Las tablas nos ayudan a organizar mejor nuestra información.  El codigo para insertar una tabla es: <table></table> ´que nos sirve para inicializar y cerrar la tabla´ <tr> <td></td> ´td nos ayudara a ingresar los datos en la tabla´
  • 3. ATRIBUTOS DE TABLA  Border : nos ayuda a definir el borde de nuestra tabla <table border=“3”>  Width: Nos ayuda a definir el ancho de la tabla <table border=“3” width=“50%”>
  • 4. LISTAS  Las listas nos ayudan a representar nuestra información dentro de HTLM existen tres tipos de listas  Listas no ordenadas  Listas ordenadas  Listas de definiciones
  • 5. Listas no ordenadas  Las listas ordenadas van enmarcadas dentroo de las etiquetas <ul></ul> cada punto que queramos añadir a la lista lo haremos dentro de la etiqueta<li> ejemplo <ul> <li>Ejemplo <li>ejemplo2 </ul>
  • 6. Listas ordenadas  Las listas ordenadas van dentro de las etiquetas <ol></ol>. Cada punto de la lista se escribe con la misma etiqueta que las listas no ordenadas <li> Ejemplo <ol> <li>ejemplo <li>ejemplo2> </ol>
  • 7. Listas de definiciones  Si lo que vamos hacer en un listado de definiciones podemos usar las etiquetas <dl><dt><dd>  <dl> nos indica que dentro de ella va a ir una definicion  <dt> nos indica que dentro de ella ira el termino que vamos a defenir es decir ira el titulo de la definicion  <dd> nos indica que dentro de ella ira la definicion
  • 8. FRAME  los marcos son instrumentos que forman ya parte habitual del web y que los navegadores gestionan hoy día a la perfección. Los detractores de los marcos afirman la inutilidad de subdividir ulteriormente las páginas web, las cuales, en última instancia, pueden resultar poco legibles
  • 9. FRAME  Documento Marco  <FRAMESET></FRAMESET>  altura en filas  <FRAMESET ROWS=,,,></FRAMESET>  altura en filas  <FRAMESET ROWS=*></FRAMESET>  anchura en columnas  <FRAMESET COLS=,,,></FRAMESET>
  • 10.  anchura en columnas  <FRAMESET COLS=*></FRAMESET>  anchura del borde  <FRAMESET BORDER=?>  borde  <FRAMESET FRAMEBORDER="yes|no">  color del borde  <FRAMESET BORDERCOLOR="#$$$$$$">
  • 11. HIPERVINCULOS  Para agregar un hipervínculo a una pagina de html utilizaremos la etiqueta <a>  <a href=“direccion“ target="central">ejemplo</a>  La direccion del archivo que vincularemos es sumamente importante porque si este no es el correcto el hipervinculo no funcionara
  • 12. IMÁGENES  Para agregar una imagen a una pagina de html utilizaremos <img src>  <img src=“direccion”> Al igual que en los hipervinculos es muy importante que la dirección de la imagen sea la correcta para asegurarnos de que asi sea puede consultar en propiedades de la imagen
  • 13. VIDEO  Para agregar un video a una pagina de html lo haremos de la siguiente forma  <video width=“320” height=“240 ” controls>  <source src=“video.mp4” type=“videp/mp4”>
  • 14. FORMULARIOS  Para agregar un formulario lo haremos con la eqtiqueta <form></form>  Ejemplo <FORM ACTION=http://www.coder.com/code/mailform/mailform.pl.cgi METHOD=POST> <INPUTTYPE=HIDDEN NAME=MAILFORM_ID VALUE="Val_7743"> <INPUTTYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Mi primer formulario"> <INPUTTYPE=HIDDEN NAME=MAILFORM_URL VALUE="http://www.htmlpoint.com/risposta.htm"> <B>Nombre y apellidos</B><BR> <input type=text NAME=MAILFORM_NAME size=33><BR><BR> <B>Dirección de correoelectrónico</B><BR> <input type=text NAME=MAILFORM_FROM size=33><BR><BR> <B>Comentarios</B><BR> <TEXTAREA NAME=MAILFORM_TEXT ROWS=10 COLS=42 WRAP></TEXTAREA><BR><BR> <INPUTTYPE=SUBMIT VALUE="Envía"><INPUT TYPE=RESETVALUE="Cancela"> </FORM>