SlideShare una empresa de Scribd logo
1 de 10
TUTES                                                    1




                      HTML
        Lenguaje de Marcado de Hipertexto




                Complemento del videoTutorial         
TUTES                                                                     HTML
Introducción

 ¿Que es html?
  • es el lenguaje con el que se escriben las páginas web
  • es un lenguaje de hipertexto
  • permite escribir texto de forma estructurada y esta compuesta por etiquetas, 
    que marcan el inicio y el fin de los elementos
  • se presentará ante el hiperlector

 ¿Que significa html?
  • Lenguaje de Marcado de Hipertexto

 Mas información.. 
  • HTML segun la wikipedia (http://es.wikipedia.org/wiki/HTML)
  • HTML esta en su versión 5
TUTES                                                                            HTML
Etiquetas

 L  a estructura de html esta definida por ETIQUETAS (tambien llamadas
marcas, directivas o tags en ingles), que componen el documento HTML. Estas
están formadas por palabras inglesas introducidas entre
los signos  < y >
  ejem.   <body>
     se le llama etiqueta de apretura dentro puede contener atributos
  ejem.   <body bgcolor="#000000" >
  ejem.   </body>         nótese la   /  cual indica el final de la etiqueta y
  se le llama etiqueta de cierre, esta no puede contener atributos
También existen etiquetas que no precisan de cierre ejem.      <br />
TUTES                                                                   HTML
Lo primero



     P  ara escribir código HTML, tan solo es necesario un editor de 
    texto como el simple Notepad o el complejo Dreamweaver...

    Hay mucho editores cuales podrás usar, aquí te dejo unos cuantos
     • Adobe Dreamweaver
     • Notepad++
     • kompozer
     • UltraEdit
     • Arachnophilia
     • Mas editores ..
     • Notepad (este viene con windows) wikipedia
TUTES                                                            HTML
Estructura básica de un documento HTML

    <html>           //- indica el inicio del documento html


    <head>           //- indica el inicio de la cabecera


        </head>             //- indica el final de la cabecera


         <body>              //- el comienzo del cuerpo 


         </body>           //- el final del cuerpo

    </html>     //- indica el final del documento html
TUTES                                                                                  HTML
Estructura básica - partes: Head

...
//- indica el inicio de la cabecera

<head>
  aquí se especifica la cabecera del documento, esta sección no sera mostrada
  en pantalla por el navegador
  van especificaciones relacionadas con el documento,

  ejemplo: el titulo, la descripción de la web, las palabras claves, los estilos....

</head>

//- indica el final de la cabecera
......
TUTES                                                                                                       HTML
Estructura básica - partes: Head
<head>

   <title>Titulo de la web </title>

   <meta charset="utf-8"> //- espesificaciones del documento
   ----->>>>>> para mas de los metas AQUI  (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.4.2)


   <link rel=" " rev=" " href=" " target=" "/>

   <script type=" " [src=" "]>
    //código scripting
   </script>

   ....

</head>
TUTES                                                                        HTML
Estructura básica - partes: Body

...
//- indica el inicio el cuerpo

<body>
  aquí se especifica el contenido del documento, esta sección si sera mostrada
  en pantalla por el navegador

</body>

//- indica el final el cuerpo
......
TUTES                                                                            HTML
Estructura básica - partes: Body
<body>
  aqui va el contenido de la web
  ------------------- algunas etiquetas de HTML
  <a><abbr><acronym><address><applet><area><b><base><basefont><bdo><big><blockquote>
  <br><button><caption><center><cite><code><col><colgroup><dd><del><dfn><dir><div><dl>
  <dt><em><fieldset><font><form><frame><frameset><head><h1> -
  <h6><hr><i><iframe><img><input><ins><kbd><label><legend><li><map><menu><noframes
  ><noscript><object><ol><optgroup><option><p><param><pre><q><s><samp><script><select
  ><small><span><strike><strong><style><sub><sup><table><tbody><td><textarea><tfoot><th
  ><thead><title><tr><tt><u><ul><var><div><b><em><video>
  ..........




</body>
TUTES                                       1




                     FIN



                  HTML
        Lenguaje de Marcado de Hipertexto

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Etiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parteEtiquetas para estructurar texto en HTML - 4 parte
Etiquetas para estructurar texto en HTML - 4 parte
 
¿Qué es CSS?
¿Qué es CSS?¿Qué es CSS?
¿Qué es CSS?
 
¿Qué es HTML5?
¿Qué es HTML5?¿Qué es HTML5?
¿Qué es HTML5?
 
Introducion a HTML5
Introducion a HTML5Introducion a HTML5
Introducion a HTML5
 
Manual de html
Manual de htmlManual de html
Manual de html
 
Manual html
Manual htmlManual html
Manual html
 
Manual html
Manual htmlManual html
Manual html
 
MANUAL HTML BASICO.
MANUAL HTML BASICO.MANUAL HTML BASICO.
MANUAL HTML BASICO.
 
Introducción al HTML
Introducción al HTMLIntroducción al HTML
Introducción al HTML
 
Etiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parteEtiquetas para estructurar texto en HTML - 3 parte
Etiquetas para estructurar texto en HTML - 3 parte
 
Introducción a html
Introducción a htmlIntroducción a html
Introducción a html
 
Trabajo informatica nº 1
Trabajo informatica nº 1Trabajo informatica nº 1
Trabajo informatica nº 1
 
Html5
Html5Html5
Html5
 
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOSCOMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
COMO CREAR UNA PAGINA WEB EN HTML SUS PRIMEROS PASOS
 
HTML
HTMLHTML
HTML
 
Etiquetas Diapositivas.
Etiquetas Diapositivas.Etiquetas Diapositivas.
Etiquetas Diapositivas.
 
Html Basico en Español
Html Basico en EspañolHtml Basico en Español
Html Basico en Español
 
Html
HtmlHtml
Html
 
Introducción a HTML
Introducción a HTMLIntroducción a HTML
Introducción a HTML
 

Destacado (7)

Teach Yourself to Build Web Apps
Teach Yourself to Build Web AppsTeach Yourself to Build Web Apps
Teach Yourself to Build Web Apps
 
Learn html in 30mins
Learn html in 30minsLearn html in 30mins
Learn html in 30mins
 
2013 cuarton geschichte
2013 cuarton  geschichte2013 cuarton  geschichte
2013 cuarton geschichte
 
Learn html and css from scratch
Learn html and css from scratchLearn html and css from scratch
Learn html and css from scratch
 
Intro to HTML
Intro to HTMLIntro to HTML
Intro to HTML
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?
 
How to Teach Yourself to Code
How to Teach Yourself to CodeHow to Teach Yourself to Code
How to Teach Yourself to Code
 

Similar a HTML estructura básica

Similar a HTML estructura básica (20)

Introduccion a programacion html
Introduccion a programacion htmlIntroduccion a programacion html
Introduccion a programacion html
 
Unidad educativa
Unidad educativaUnidad educativa
Unidad educativa
 
Sitio Web / Introducción a HTML
Sitio Web / Introducción a HTMLSitio Web / Introducción a HTML
Sitio Web / Introducción a HTML
 
Html
HtmlHtml
Html
 
Curso de html
Curso de htmlCurso de html
Curso de html
 
Aprender el lenguaje html
Aprender el lenguaje htmlAprender el lenguaje html
Aprender el lenguaje html
 
Tarea
TareaTarea
Tarea
 
Tarea
TareaTarea
Tarea
 
Clase HTML.pptx
Clase HTML.pptxClase HTML.pptx
Clase HTML.pptx
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Colegio nacional nicolas esguerra
Colegio nacional nicolas esguerraColegio nacional nicolas esguerra
Colegio nacional nicolas esguerra
 
Tag s
Tag sTag s
Tag s
 
Introducción a HTML5
Introducción a HTML5Introducción a HTML5
Introducción a HTML5
 
Html concpetos
Html concpetosHtml concpetos
Html concpetos
 
Apuntes de HTML
Apuntes de HTMLApuntes de HTML
Apuntes de HTML
 
Html
HtmlHtml
Html
 
Programación en html 1
Programación en html 1Programación en html 1
Programación en html 1
 
Estructurabasica
EstructurabasicaEstructurabasica
Estructurabasica
 
Aprender el lenguaje html
Aprender el lenguaje htmlAprender el lenguaje html
Aprender el lenguaje html
 
XHTML
XHTMLXHTML
XHTML
 

Más de Manuel Vidal Sabaté

ExploraVision Presentation Template
ExploraVision Presentation TemplateExploraVision Presentation Template
ExploraVision Presentation TemplateManuel Vidal Sabaté
 
Gabriel Fauré_Madrigal_Lletra francès-català_vertical
Gabriel Fauré_Madrigal_Lletra francès-català_verticalGabriel Fauré_Madrigal_Lletra francès-català_vertical
Gabriel Fauré_Madrigal_Lletra francès-català_verticalManuel Vidal Sabaté
 
Gabriel Fauré_Cantique de Jean Racine_Lletra francès-català_vertical
Gabriel Fauré_Cantique de Jean Racine_Lletra francès-català_verticalGabriel Fauré_Cantique de Jean Racine_Lletra francès-català_vertical
Gabriel Fauré_Cantique de Jean Racine_Lletra francès-català_verticalManuel Vidal Sabaté
 
Weblogs: ¿Qué son? Un weblog o blog («bitácora» en castellano) es
Weblogs: ¿Qué son? Un weblog o blog («bitácora» en castellano) esWeblogs: ¿Qué son? Un weblog o blog («bitácora» en castellano) es
Weblogs: ¿Qué son? Un weblog o blog («bitácora» en castellano) esManuel Vidal Sabaté
 
PROJETOPTRGRIJALBAMLINHARES - About us (club)
PROJETOPTRGRIJALBAMLINHARES - About us (club)PROJETOPTRGRIJALBAMLINHARES - About us (club)
PROJETOPTRGRIJALBAMLINHARES - About us (club)Manuel Vidal Sabaté
 

Más de Manuel Vidal Sabaté (20)

ExploraVision Presentation Template
ExploraVision Presentation TemplateExploraVision Presentation Template
ExploraVision Presentation Template
 
Gabriel Fauré_Madrigal_Lletra francès-català_vertical
Gabriel Fauré_Madrigal_Lletra francès-català_verticalGabriel Fauré_Madrigal_Lletra francès-català_vertical
Gabriel Fauré_Madrigal_Lletra francès-català_vertical
 
Nativity Carol_partitura original
Nativity Carol_partitura originalNativity Carol_partitura original
Nativity Carol_partitura original
 
Gabriel Fauré_Cantique de Jean Racine_Lletra francès-català_vertical
Gabriel Fauré_Cantique de Jean Racine_Lletra francès-català_verticalGabriel Fauré_Cantique de Jean Racine_Lletra francès-català_vertical
Gabriel Fauré_Cantique de Jean Racine_Lletra francès-català_vertical
 
circles
circlescircles
circles
 
La computadora
La computadoraLa computadora
La computadora
 
Colourful lines
Colourful linesColourful lines
Colourful lines
 
ieee_powerpoint_template_tagline
ieee_powerpoint_template_taglineieee_powerpoint_template_tagline
ieee_powerpoint_template_tagline
 
Còpia de FEMMES
Còpia de FEMMESCòpia de FEMMES
Còpia de FEMMES
 
Gabriel Fauré_Madrigal_Partitura
Gabriel Fauré_Madrigal_PartituraGabriel Fauré_Madrigal_Partitura
Gabriel Fauré_Madrigal_Partitura
 
Abstract Star
Abstract StarAbstract Star
Abstract Star
 
Weblogs: ¿Qué son? Un weblog o blog («bitácora» en castellano) es
Weblogs: ¿Qué son? Un weblog o blog («bitácora» en castellano) esWeblogs: ¿Qué son? Un weblog o blog («bitácora» en castellano) es
Weblogs: ¿Qué son? Un weblog o blog («bitácora» en castellano) es
 
Sales Meeting
Sales MeetingSales Meeting
Sales Meeting
 
Shanti Tour & Travels
Shanti Tour & TravelsShanti Tour & Travels
Shanti Tour & Travels
 
Blue Eyes Presentation
Blue Eyes Presentation Blue Eyes Presentation
Blue Eyes Presentation
 
Presentació sense títol
Presentació sense títolPresentació sense títol
Presentació sense títol
 
Hexagons Presentation
Hexagons PresentationHexagons Presentation
Hexagons Presentation
 
Blog Docente PREU 2011
Blog Docente PREU 2011Blog Docente PREU 2011
Blog Docente PREU 2011
 
PROJETOPTRGRIJALBAMLINHARES - About us (club)
PROJETOPTRGRIJALBAMLINHARES - About us (club)PROJETOPTRGRIJALBAMLINHARES - About us (club)
PROJETOPTRGRIJALBAMLINHARES - About us (club)
 
FEMMES
FEMMESFEMMES
FEMMES
 

HTML estructura básica

  • 1. TUTES 1 HTML Lenguaje de Marcado de Hipertexto         Complemento del videoTutorial         
  • 2. TUTES HTML Introducción ¿Que es html? • es el lenguaje con el que se escriben las páginas web • es un lenguaje de hipertexto • permite escribir texto de forma estructurada y esta compuesta por etiquetas,  que marcan el inicio y el fin de los elementos • se presentará ante el hiperlector ¿Que significa html? • Lenguaje de Marcado de Hipertexto Mas información..  • HTML segun la wikipedia (http://es.wikipedia.org/wiki/HTML) • HTML esta en su versión 5
  • 3. TUTES HTML Etiquetas  L  a estructura de html esta definida por ETIQUETAS (tambien llamadas marcas, directivas o tags en ingles), que componen el documento HTML. Estas están formadas por palabras inglesas introducidas entre los signos < y > ejem. <body> se le llama etiqueta de apretura dentro puede contener atributos ejem. <body bgcolor="#000000" > ejem. </body> nótese la / cual indica el final de la etiqueta y se le llama etiqueta de cierre, esta no puede contener atributos También existen etiquetas que no precisan de cierre ejem. <br />
  • 4. TUTES HTML Lo primero  P  ara escribir código HTML, tan solo es necesario un editor de  texto como el simple Notepad o el complejo Dreamweaver... Hay mucho editores cuales podrás usar, aquí te dejo unos cuantos • Adobe Dreamweaver • Notepad++ • kompozer • UltraEdit • Arachnophilia • Mas editores .. • Notepad (este viene con windows) wikipedia
  • 5. TUTES HTML Estructura básica de un documento HTML <html>  //- indica el inicio del documento html <head> //- indica el inicio de la cabecera </head> //- indica el final de la cabecera <body> //- el comienzo del cuerpo  </body> //- el final del cuerpo </html>     //- indica el final del documento html
  • 6. TUTES HTML Estructura básica - partes: Head ... //- indica el inicio de la cabecera <head> aquí se especifica la cabecera del documento, esta sección no sera mostrada en pantalla por el navegador van especificaciones relacionadas con el documento, ejemplo: el titulo, la descripción de la web, las palabras claves, los estilos.... </head> //- indica el final de la cabecera ......
  • 7. TUTES HTML Estructura básica - partes: Head <head> <title>Titulo de la web </title> <meta charset="utf-8"> //- espesificaciones del documento ----->>>>>> para mas de los metas AQUI  (http://www.w3.org/TR/REC-html40/struct/global.html#h-7.4.4.2) <link rel=" " rev=" " href=" " target=" "/> <script type=" " [src=" "]>  //código scripting </script> .... </head>
  • 8. TUTES HTML Estructura básica - partes: Body ... //- indica el inicio el cuerpo <body> aquí se especifica el contenido del documento, esta sección si sera mostrada en pantalla por el navegador </body> //- indica el final el cuerpo ......
  • 9. TUTES HTML Estructura básica - partes: Body <body> aqui va el contenido de la web ------------------- algunas etiquetas de HTML <a><abbr><acronym><address><applet><area><b><base><basefont><bdo><big><blockquote> <br><button><caption><center><cite><code><col><colgroup><dd><del><dfn><dir><div><dl> <dt><em><fieldset><font><form><frame><frameset><head><h1> - <h6><hr><i><iframe><img><input><ins><kbd><label><legend><li><map><menu><noframes ><noscript><object><ol><optgroup><option><p><param><pre><q><s><samp><script><select ><small><span><strike><strong><style><sub><sup><table><tbody><td><textarea><tfoot><th ><thead><title><tr><tt><u><ul><var><div><b><em><video> .......... </body>
  • 10. TUTES 1 FIN HTML Lenguaje de Marcado de Hipertexto

Notas del editor

  1. tutorial de HTML
  2. tutorial de HTML
  3. tutorial de HTML
  4. tutorial de HTML
  5. tutorial de HTML
  6. tutorial de HTML
  7. tutorial de HTML