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).</p>En el lenguaje HTML, muchas instrucciones se cierran con el signo / (diagonal) para indicar al programa que las propiedades aplicadas con esa instrucción se terminan ahí donde se pone el signo diagonal. Si el signo de cierre (/) no se aplica convenientemente, el programa seguirá aplicando las propiedades de la instrucción anterior a todas las líneas inferiores, hasta que se encuentre otra instrucción que modifique las propiedades actuales.</span>
<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/02681708773349650516' itemprop='url'/>
<a class='g-profile' href='https://www.blogger.com/profile/02681708773349650516' rel='author' title='author profile'>
<span itemprop='name'>marlon rojas</span>
</a>
</span>
</span>
<span class='post-timestamp'>
en
<meta content='http://modalidaddeimformatica.blogspot.com/2009/10/estructura-de-una-pagina-web.html' itemprop='url'/>
<a class='timestamp-link' href='http://modalidaddeimformatica.blogspot.com/2009/10/estructura-de-una-pagina-web.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-10-17T17:00:00-07:00'>17:00</abbr></a>
</span>
<span class='post-comment-link'>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-1693636781'>
<a href='https://www.blogger.com/post-edit.g?blogID=7318455073135183149&postID=6541859268609102943&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'>
</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/7318455073135183149?po=6541859268609102943&hl=es&saa=85391&origin=http://modalidaddeimformatica.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://modalidaddeimformatica.blogspot.com/2009/10/paginas-de-referencia.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://modalidaddeimformatica.blogspot.com/2009/10/etiquetas.html' id='Blog1_blog-pager-older-link' title='Entrada antigua'>Entrada antigua</a>
</span>
<a class='home-link' href='http://modalidaddeimformatica.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://modalidaddeimformatica.blogspot.com/feeds/6541859268609102943/comments/default' target='_blank' type='application/atom+xml'>Enviar comentarios (Atom)</a>
</div>
</div>
</div></div>
</div>
<div id='sidebar-wrapper'>
<div class='sidebar section' id='sidebar'><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/7318455073135183149?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByM5OTk5OTkiByM2Njk5Y2MqByNGRkZGRkYyByNmZjY2MzM6ByM5OTk5OTlCByM2Njk5Y2NKByMwMDAwMDBSByM2Njk5Y2NaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3des\x26origin\x3dhttp://modalidaddeimformatica.blogspot.com");
},
'open': function(url) {
window.followersIframe.close();
followersIframeOpen(url);
}
}
});
}
});
}
followersIframeOpen("https://www.blogger.com/followers/frame/7318455073135183149?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByM5OTk5OTkiByM2Njk5Y2MqByNGRkZGRkYyByNmZjY2MzM6ByM5OTk5OTlCByM2Njk5Y2NKByMwMDAwMDBSByM2Njk5Y2NaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3des\x26origin\x3dhttp://modalidaddeimformatica.blogspot.com");
</script></div>
</div>
</div>
<div class='clear'></div>
</div>
</div><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://modalidaddeimformatica.blogspot.com/2010/'>
2010
</a>
<span class='post-count' dir='ltr'>(1)</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://modalidaddeimformatica.blogspot.com/2010/09/'>
septiembre
</a>
<span class='post-count' dir='ltr'>(1)</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://modalidaddeimformatica.blogspot.com/2009/'>
2009
</a>
<span class='post-count' dir='ltr'>(20)</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://modalidaddeimformatica.blogspot.com/2009/10/'>
octubre
</a>
<span class='post-count' dir='ltr'>(9)</span>
<ul class='posts'>
<li><a href='http://modalidaddeimformatica.blogspot.com/2009/10/versiones-de-html.html'>VERSIONES DE HTML</a></li>
<li><a href='http://modalidaddeimformatica.blogspot.com/2009/10/paginas-de-referencia.html'>PAGINAS DE REFERENCIA</a></li>
<li><a href='http://modalidaddeimformatica.blogspot.com/2009/10/estructura-de-una-pagina-web.html'>Estructura de una página Web</a></li>
<li><a href='http://modalidaddeimformatica.blogspot.com/2009/10/etiquetas.html'>etiquetas</a></li>
<li><a href='http://modalidaddeimformatica.blogspot.com/2009/10/utilidades-del-bloc-de-notas.html'>utilidades del bloc de notas</a></li>
<li><a href='http://modalidaddeimformatica.blogspot.com/2009/10/que-son-los-editores-de-html-programas.html'>Que son los editores de HTML: programas que nos pu...</a></li>
<li><a href='http://modalidaddeimformatica.blogspot.com/2009/10/vercion-de-html.html'>vercion de html</a></li>
<li><a href='http://modalidaddeimformatica.blogspot.com/2009/10/html.html'>HTML</a></li>
<li><a href='http://modalidaddeimformatica.blogspot.com/2009/10/muchas-vecez-estas-son-nuestras.html'>MUCHAS VECEZ ESTAS SON NUESTRAS ESPERIENCIAS.</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://modalidaddeimformatica.blogspot.com/2009/07/'>
julio
</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://modalidaddeimformatica.blogspot.com/2009/06/'>
junio
</a>
<span class='post-count' dir='ltr'>(4)</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://modalidaddeimformatica.blogspot.com/2009/05/'>
mayo
</a>
<span class='post-count' dir='ltr'>(6)</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget Profile' data-version='1' id='Profile1'>
<h2>Datos personales</h2>
<div class='widget-content'>
<a href='https://www.blogger.com/profile/02681708773349650516'><img alt='Mi foto' class='profile-img' height='80' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK8l4i3Cml3-KnJsdZOBfdWkHkYC9c98729l1f7iImvFQr3Qh88VUsCf9hJrzPCF10F3uLWdzbiBCMN54KOMXoYaQ38chlI_qt8f1-N43jEy8kC6I1AUECv-9hDG928g/s220/MARLON027.jpg' width='60'/></a>
<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' href='https://www.blogger.com/profile/02681708773349650516' rel='author' style='background-image: url(//www.blogger.com/img/logo-16.png);'>
marlon rojas
</a>
</dt>
</dl>
<a class='profile-link' href='https://www.blogger.com/profile/02681708773349650516' rel='author'>Ver todo mi perfil</a>
<div class='clear'></div>
</div>
</div></div>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div>
<!-- end content-wrapper -->
<div id='footer-wrapper'>
<div class='footer no-items section' id='footer'></div>
</div>
</div></div>
<!-- end outer-wrapper -->
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/387437488-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AEUoTZrIWHYqYwtvXnGAdGe3aWwQ:1782057958127';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7318455073135183149','//modalidaddeimformatica.blogspot.com/2009/10/estructura-de-una-pagina-web.html','7318455073135183149');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7318455073135183149', 'title': 'modalidad de informatica', 'url': 'http://modalidaddeimformatica.blogspot.com/2009/10/estructura-de-una-pagina-web.html', 'canonicalUrl': 'http://modalidaddeimformatica.blogspot.com/2009/10/estructura-de-una-pagina-web.html', 'homepageUrl': 'http://modalidaddeimformatica.blogspot.com/', 'searchUrl': 'http://modalidaddeimformatica.blogspot.com/search', 'canonicalHomepageUrl': 'http://modalidaddeimformatica.blogspot.com/', 'blogspotFaviconUrl': 'http://modalidaddeimformatica.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\x22modalidad de informatica - Atom\x22 href\x3d\x22http://modalidaddeimformatica.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22modalidad de informatica - RSS\x22 href\x3d\x22http://modalidaddeimformatica.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22modalidad de informatica - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7318455073135183149/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22modalidad de informatica - Atom\x22 href\x3d\x22http://modalidaddeimformatica.blogspot.com/feeds/6541859268609102943/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/cd96ebb13b57568d', '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': '6541859268609102943', 'pageName': 'Estructura de una p\xe1gina Web', 'pageTitle': 'modalidad de informatica: Estructura de una p\xe1gina Web'}}, {'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': {'isResponsive': false, 'isAlternateRendering': false, 'isCustom': false}}, {'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': 'Estructura de una p\xe1gina Web', 'description': 'Toda p\xe1gina Web tiene una estructura que permite al programador saber de antemano qu\xe9 tipo de informaci\xf3n necesita introducir. Esto ayuda a ...', 'url': 'http://modalidaddeimformatica.blogspot.com/2009/10/estructura-de-una-pagina-web.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 6541859268609102943}}]);
_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', document.getElementById('Followers1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Cargando\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ProfileView', new _WidgetInfo('Profile1', 'sidebar', document.getElementById('Profile1'), {}, 'displayModeFull'));
</script>
</body>
</html>