Estructura de una página Web
Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de información necesita introducir. Esto ayuda a que la página que diseña sea claramente legible y se pueda modificar más fácilmente. Si una página Web es complicada en su diseño, habrá muy pocos que sepan dar el mantenimiento adecuado. Abajo se muestra la estructura lógica de una página Web.
Primera página
Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido.
La primera instrucción indica al explorador de Internet que ahí comienza una página Web. La siguiente instrucción indica el encabezado de la página, es decir el área de la barra de título. indica el título de la página propiamente dicho. <BODY> es una instrucción que indica al explorador de Internet que ahí empieza el área de contenido de la página (es decir el cuerpo de la página).
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
Publicado por
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta content='https://www.blogger.com/profile/09542814771441588551' itemprop='url'/>
<a class='g-profile' href='https://www.blogger.com/profile/09542814771441588551' rel='author' title='author profile'>
<span itemprop='name'>giovanny</span>
</a>
</span>
</span>
<span class='post-timestamp'>
en
<meta content='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/estructura-de-una-pagina-web-toda.html' itemprop='url'/>
<a class='timestamp-link' href='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/estructura-de-una-pagina-web-toda.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-10-28T17:57:00-07:00'>17:57</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-2139017181'>
<a href='https://www.blogger.com/post-edit.g?blogID=4942242834374036161&postID=2755516810346002811&from=pencil' title='Editar entrada'>
<img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</span>
<div class='post-share-buttons goog-inline-block'>
<a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=4942242834374036161&postID=2755516810346002811&target=email' target='_blank' title='Enviar por correo electrónico'><span class='share-button-link-text'>Enviar por correo electrónico</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=4942242834374036161&postID=2755516810346002811&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='Escribe un blog'><span class='share-button-link-text'>Escribe un blog</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=4942242834374036161&postID=2755516810346002811&target=twitter' target='_blank' title='Compartir en X'><span class='share-button-link-text'>Compartir en X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=4942242834374036161&postID=2755516810346002811&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Compartir con Facebook'><span class='share-button-link-text'>Compartir con Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=4942242834374036161&postID=2755516810346002811&target=pinterest' target='_blank' title='Compartir en Pinterest'><span class='share-button-link-text'>Compartir en Pinterest</span></a>
</div>
</div>
<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
</span>
</div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
</span>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>No hay comentarios:</h4>
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<div class='comment-form'>
<a name='comment-form'></a>
<h4 id='comment-post-message'>Publicar un comentario</h4>
<p>
</p>
<a href='https://www.blogger.com/comment/frame/4942242834374036161?po=2755516810346002811&hl=es&saa=85391&origin=http://giovanny-clasesdemodalidad.blogspot.com' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/2830521187-comment_from_post_iframe.js' type='text/javascript'></script>
<script type='text/javascript'>
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
</script>
</div>
</p>
</div>
</div>
</div></div>
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/los-navegadores-de-compatibilidad-la.html' id='Blog1_blog-pager-newer-link' title='Entrada más reciente'>Entrada más reciente</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/editores-de-html-vamos-hablar-en-este.html' id='Blog1_blog-pager-older-link' title='Entrada antigua'>Entrada antigua</a>
</span>
<a class='home-link' href='http://giovanny-clasesdemodalidad.blogspot.com/'>Inicio</a>
</div>
<div class='clear'></div>
<div class='post-feeds'>
<div class='feed-links'>
Suscribirse a:
<a class='feed-link' href='http://giovanny-clasesdemodalidad.blogspot.com/feeds/2755516810346002811/comments/default' target='_blank' type='application/atom+xml'>Enviar comentarios (Atom)</a>
</div>
</div>
</div></div>
</div>
</div>
<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
</aside>
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
<div class='sidebar section' id='sidebar-right-1'><div class='widget Followers' data-version='1' id='Followers1'>
<h2 class='title'>Seguidores</h2>
<div class='widget-content'>
<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<div><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div id="followers-iframe-container"></div>
<script type="text/javascript">
window.followersIframe = null;
function followersIframeOpen(url) {
gapi.load("gapi.iframes", function() {
if (gapi.iframes && gapi.iframes.getContext) {
window.followersIframe = gapi.iframes.getContext().openChild({
url: url,
where: document.getElementById("followers-iframe-container"),
messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER,
messageHandlers: {
'_ready': function(obj) {
window.followersIframe.getIframeEl().height = obj.height;
},
'reset': function() {
window.followersIframe.close();
followersIframeOpen("https://www.blogger.com/followers/frame/4942242834374036161?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByM3MzczNzMiByNlMzE5MTkqC3RyYW5zcGFyZW50MgcjODY4Njg2OgcjNzM3MzczQgcjZTMxOTE5SgcjMDAwMDAwUgcjZTMxOTE5Wgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26hl\x3des\x26origin\x3dhttp://giovanny-clasesdemodalidad.blogspot.com");
},
'open': function(url) {
window.followersIframe.close();
followersIframeOpen(url);
}
}
});
}
});
}
followersIframeOpen("https://www.blogger.com/followers/frame/4942242834374036161?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByM3MzczNzMiByNlMzE5MTkqC3RyYW5zcGFyZW50MgcjODY4Njg2OgcjNzM3MzczQgcjZTMxOTE5SgcjMDAwMDAwUgcjZTMxOTE5Wgt0cmFuc3BhcmVudA%3D%3D\x26pageSize\x3d21\x26hl\x3des\x26origin\x3dhttp://giovanny-clasesdemodalidad.blogspot.com");
</script></div>
</div>
</div>
<div class='clear'></div>
</div>
</div></div>
<table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>
<tbody>
<tr>
<td class='first columns-cell'>
<div class='sidebar section' id='sidebar-right-2-1'><div class='widget Profile' data-version='1' id='Profile1'>
<h2>Datos personales</h2>
<div class='widget-content'>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/09542814771441588551' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
giovanny
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/09542814771441588551' rel='author'>Ver todo mi perfil</a>
<div class='clear'></div>
</div>
</div></div>
</td>
<td class='columns-cell'>
<div class='sidebar section' id='sidebar-right-2-2'><div class='widget BlogArchive' data-version='1' id='BlogArchive1'>
<h2>Archivo del blog</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='http://giovanny-clasesdemodalidad.blogspot.com/2010/'>
2010
</a>
<span class='post-count' dir='ltr'>(3)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='http://giovanny-clasesdemodalidad.blogspot.com/2010/09/'>
septiembre
</a>
<span class='post-count' dir='ltr'>(3)</span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='http://giovanny-clasesdemodalidad.blogspot.com/2009/'>
2009
</a>
<span class='post-count' dir='ltr'>(16)</span>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>
▼
</span>
</a>
<a class='post-count-link' href='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/'>
octubre
</a>
<span class='post-count' dir='ltr'>(7)</span>
<ul class='posts'>
<li><a href='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/html.html'>HTML</a></li>
<li><a href='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/cuales-son-las-versiones-del-html-por.html'>Cuáles son las versiones del HTML?Por Carlos Leopo...</a></li>
<li><a href='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/los-navegadores-de-compatibilidad-la.html'>• Los navegadores de compatibilidadLa perfecta com...</a></li>
<li><a href='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/estructura-de-una-pagina-web-toda.html'>Estructura de una página Web
Toda página Web tie...</a></li>
<li><a href='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/editores-de-html-vamos-hablar-en-este.html'>EDITORES DE HTML:Vamos a hablar en este artículo s...</a></li>
<li><a href='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/editores-html-modo-diseno-wysiwyg-en-el.html'>Editores HTML modo diseño WYSIWYGEn el mercado exi...</a></li>
<li><a href='http://giovanny-clasesdemodalidad.blogspot.com/2009/10/dispositivos-o-perifericos-de-entrada.html'>Dispositivos o periféricos de entrada</a></li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='http://giovanny-clasesdemodalidad.blogspot.com/2009/08/'>
agosto
</a>
<span class='post-count' dir='ltr'>(1)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='http://giovanny-clasesdemodalidad.blogspot.com/2009/07/'>
julio
</a>
<span class='post-count' dir='ltr'>(2)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='http://giovanny-clasesdemodalidad.blogspot.com/2009/06/'>
junio
</a>
<span class='post-count' dir='ltr'>(2)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
►
</span>
</a>
<a class='post-count-link' href='http://giovanny-clasesdemodalidad.blogspot.com/2009/05/'>
mayo
</a>
<span class='post-count' dir='ltr'>(4)</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div></div>
</td>
</tr>
</tbody>
</table>
<div class='sidebar no-items section' id='sidebar-right-3'></div>
</aside>
</div>
</div>
</div>
<div style='clear: both'></div>
<!-- columns -->
</div>
<!-- main -->
</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'></div>
<div class='region-inner footer-inner'>
<div class='foot no-items section' id='footer-1'></div>
<table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'>
<tbody>
<tr>
<td class='first columns-cell'>
<div class='foot no-items section' id='footer-2-1'></div>
</td>
<td class='columns-cell'>
<div class='foot no-items section' id='footer-2-2'></div>
</td>
</tr>
</tbody>
</table>
<!-- outside of the include in order to lock Attribution widget -->
<div class='foot section' id='footer-3' name='Pie de página'><div class='widget Attribution' data-version='1' id='Attribution1'>
<div class='widget-content' style='text-align: center;'>
Tema Picture Window. Imágenes del tema: Josh Peterson. Con la tecnología de <a href='https://www.blogger.com' target='_blank'>Blogger</a>.
</div>
<div class='clear'></div>
</div></div>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</footer>
<!-- content -->
</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/387437488-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AEUoTZpShYea9rSpcn2aIqGK1d_O:1780992164362';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4942242834374036161','//giovanny-clasesdemodalidad.blogspot.com/2009/10/estructura-de-una-pagina-web-toda.html','4942242834374036161');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '4942242834374036161', 'title': 'oscar', 'url': 'http://giovanny-clasesdemodalidad.blogspot.com/2009/10/estructura-de-una-pagina-web-toda.html', 'canonicalUrl': 'http://giovanny-clasesdemodalidad.blogspot.com/2009/10/estructura-de-una-pagina-web-toda.html', 'homepageUrl': 'http://giovanny-clasesdemodalidad.blogspot.com/', 'searchUrl': 'http://giovanny-clasesdemodalidad.blogspot.com/search', 'canonicalHomepageUrl': 'http://giovanny-clasesdemodalidad.blogspot.com/', 'blogspotFaviconUrl': 'http://giovanny-clasesdemodalidad.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'es', 'localeUnderscoreDelimited': 'es', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22oscar - Atom\x22 href\x3d\x22http://giovanny-clasesdemodalidad.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22oscar - RSS\x22 href\x3d\x22http://giovanny-clasesdemodalidad.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22oscar - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/4942242834374036161/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22oscar - Atom\x22 href\x3d\x22http://giovanny-clasesdemodalidad.blogspot.com/feeds/2755516810346002811/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/ff2fc60a7f0d8424', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Obtener enlace', 'key': 'link', 'shareMessage': 'Obtener enlace', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Compartir en Facebook', 'target': 'facebook'}, {'name': 'Escribe un blog', 'key': 'blogThis', 'shareMessage': 'Escribe un blog', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Compartir en X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Compartir en Pinterest', 'target': 'pinterest'}, {'name': 'Correo electr\xf3nico', 'key': 'email', 'shareMessage': 'Correo electr\xf3nico', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27es\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Leer m\xe1s', 'pageType': 'item', 'postId': '2755516810346002811', 'pageName': '', 'pageTitle': 'oscar'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Editar', 'linkCopiedToClipboard': 'El enlace se ha copiado en el Portapapeles.', 'ok': 'Aceptar', 'postLink': 'Enlace de la entrada'}}, {'name': 'template', 'data': {'name': 'Picture Window', 'localizedName': 'Picture Window', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false, 'variant': 'shade', 'variantId': 'shade'}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'oscar', 'description': 'Estructura de una p\xe1gina Web \r Toda p\xe1gina Web tiene una estructura que permite al programador saber de antemano qu\xe9 tipo de informaci\xf3n ne...', 'url': 'http://giovanny-clasesdemodalidad.blogspot.com/2009/10/estructura-de-una-pagina-web-toda.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 2755516810346002811}}]);
_WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2355509407-lbx__es.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/828616780-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FollowersView', new _WidgetInfo('Followers1', 'sidebar-right-1', document.getElementById('Followers1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar-right-2-1', document.getElementById('Profile1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar-right-2-2', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Cargando\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'footer-3', document.getElementById('Attribution1'), {}, 'displayModeFull'));
</script>
</body>
</html>