¿Qué es el HTML?
Si las páginas fueran sólo líneas y líneas de texto, serían muy aburridas. Para evitar esto, el autor puede dejar escrita la estructura del texto para que los usuarios puedan -mediante sus navegadores- dar un formato especial a algunas secciones.
HTML es sólo para describir la estructura de una web. El autor le cuenta al navegador cómo es la web; y es trabajo del navegador decidir cómo va a mostrar cada sección (colores, tamaños, tipos de letra, ...). Si el autor quiere además especificar el diseño, puede usar CSS (hojas de estilo), que explico más adelante. No sirve el HTML.
¿Es necesario usar HTML?
No, hay más formas de estructurar contenido, por ejemplo XML o XHTML (que es una mezcla de XML y HTML).
Con el tiempo dejará de usarse HTML en favor de XHTML, que cumple mejor con su objetivo.
Estructura básica de una web
Un ejemplo de lo mínimo que tiene que tener:
Mi web. Qué bonita que es mi web.
Aquí va el contenido.
El título, lo más importante
Dicen que el es, con mucha diferencia, lo más importante de una web.
<br />La verdad es que sí que es importante: lo usan los buscadores para indexar la página, pero (aún más importante) lo usamos las personas para saber en qué web entrar cuando un buscador muestra cientos de ellas. Así que elige un buen título, y ni se te ocurra dejarlo en blanco.
<br />
<br /><span style="color:#ffcc00;">Escribe todas las etiquetas en minúsculas
<br /></span>Se aceptan tanto mayúsculas como minúsculas, pero es mejor que elijas un estilo fijo y no lo vayas cambiando. Yo he decidido las minúsculas por muchas cosas:
<br />- es más fácil de leer.
<br />- es más fácil de escribir.
<br />- en XML (y XHTML) sólo se aceptan minúsculas, así que el cambio a XHTML será muy fácil.
<br />CSS se suele hacer en minúsculas también.
<br />- una página se comprime mejor cuando se usan etiquetas en minúsculas. Bueno, vale, esto es una razón algo extraña... pero es que algunos servidores web las transfieren comprimidas.
<br />
<br /><span style="color:#ffcc00;">Cierra todo lo que abras (con excepciones), y en orden
<br /></span>No está permitido hacer cosas como <td><a>enlace</td>, ni <ul><li>uno<li>dos<li>tres</ul>, ni <strong>código <em>incorrecto</strong></em>. Eso causa desastres en muchos navegadores: imagina que empiezas un enlace al principio de la página, y no lo cierras nunca. Entonces ¡toda la página forma parte del enlace! y puede salir toda subrayada (es muy asqueroso).
<br />Hay algunas etiquetas que no se cierran porque no tienen contenido por dentro, como <img> o <br />. En XHTML es obligatorio cerrarlas, y para no tener que escribir <br /></br>, se permite <br />. Pero eso es XHTML... de momento en el HTML no cierres <br /> y ya está.
<br />
<br /><span style="color:#ffcc33;">Los atributos, siempre entrecomillados</span>
<br />En realidad sólo es obligatorio poner entre comillas los atributos que tienen caracteres no alfanuméricos, por ejemplo en <body bg style="color:#E099F5;"> (por el #).
<br />Pero es mucho mejor que las pongas siempre, porque así no hay que pensar cuándo sí y cuándo no, y además es como hay que hacerlo en XML y XHTML. De todas formas, no hace falta poner casi atributos en el HTML correcto.
<br />Puedes usar varios tipos de comillas, pero lo más normal es la comilla doble, ".
<br />
<br />Bueno, pues el <span> es inline y el <div> es block. Cuando quieras dar formato a unas cuantas palabras, sin romper el flujo del texto, mete esas palabras dentro del <span>, y cuando quieras formatear un montón de elementos juntos (un trozo de página, de una línea o varias), mételo todo dentro de un <div>.
<br />
<br />EJEMPLO 1
<br />
<br /><span style="color:#ffcc66;"><p>Puedes aplicar <span style="font-size: 120%; text-transform: uppercase; color: blue; cursor:pointer;">muchos efectos</span> a un trozo de texto sin necesidad de usar la etiqueta font.</p><div style="text-align: center; border: 3px dashed orange; background: yellow; font-style:italic;"><p>Y puedes formatear todo un trozo de página a la vez...</p><p>si lo metes dentro de un div.</p></div></span>
<br />
<br />
<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'>
<span itemprop='name'>Martin Fernando Tello Ordoñez</span>
</span>
</span>
<span class='post-timestamp'>
en
<meta content='http://aula-3.blogspot.com/2009/09/pagina-web.html' itemprop='url'/>
<a class='timestamp-link' href='https://aula-3.blogspot.com/2009/09/pagina-web.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2009-09-10T20:11:00-07:00'>20:11</abbr></a>
</span>
<span class='post-comment-link'>
<a class='comment-link' href='https://aula-3.blogspot.com/2009/09/pagina-web.html#comment-form' onclick=''>
No hay comentarios:
</a>
</span>
<span class='post-icons'>
<span class='item-control blog-admin pid-811641330'>
<a href='https://www.blogger.com/post-edit.g?blogID=7712928260235636634&postID=2181809938886354458&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>
</div></div>
</div>
<div class='blog-pager' id='blog-pager'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://aula-3.blogspot.com/' id='Blog1_blog-pager-newer-link' title='Entradas más recientes'>Entradas más recientes</a>
</span>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://aula-3.blogspot.com/search?updated-max=2009-09-10T20:11:00-07:00&max-results=7' id='Blog1_blog-pager-older-link' title='Entradas antiguas'>Entradas antiguas</a>
</span>
<a class='home-link' href='https://aula-3.blogspot.com/'>Inicio</a>
</div>
<div class='clear'></div>
<div class='blog-feeds'>
<div class='feed-links'>
Suscribirse a:
<a class='feed-link' href='https://aula-3.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Entradas (Atom)</a>
</div>
</div>
</div></div>
</div>
<div id='sidebar-wrapper'>
<div class='sidebar section' id='sidebar'><div class='widget Text' data-version='1' id='Text1'>
<h2 class='title'>TAREAS</h2>
<div class='widget-content'>
Realiza lo siguiente:<br/><a href="http://tarea1-wohler.blogspot.com/">http://tarea1-wohler.blogspot.com</a><br/><br/>
</div>
<div class='clear'></div>
</div><div class='widget Followers' data-version='1' id='Followers2'>
<h2 class='title'>Seguidores</h2>
<div class='widget-content'>
<div id='Followers2-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/7712928260235636634?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByM5OTk5OTkiByM5OWFhZGQqByMwMDAwMDAyByNhYWRkOTk6ByM5OTk5OTlCByM5OWFhZGRKByM3Nzc3NzdSByM5OWFhZGRaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3des\x26origin\x3dhttps://aula-3.blogspot.com");
},
'open': function(url) {
window.followersIframe.close();
followersIframeOpen(url);
},
'blogger-ping': function() {
}
}
});
}
});
}
followersIframeOpen("https://www.blogger.com/followers/frame/7712928260235636634?colors\x3dCgt0cmFuc3BhcmVudBILdHJhbnNwYXJlbnQaByM5OTk5OTkiByM5OWFhZGQqByMwMDAwMDAyByNhYWRkOTk6ByM5OTk5OTlCByM5OWFhZGRKByM3Nzc3NzdSByM5OWFhZGRaC3RyYW5zcGFyZW50\x26pageSize\x3d21\x26hl\x3des\x26origin\x3dhttps://aula-3.blogspot.com");
</script></div>
</div>
</div>
<div class='clear'></div>
</div>
</div><div class='widget BlogArchive' data-version='1' id='BlogArchive2'>
<h2>Archivo del blog</h2>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive2_ArchiveList'>
<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='https://aula-3.blogspot.com/2009/'>
2009
</a>
<span class='post-count' dir='ltr'>(4)</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='https://aula-3.blogspot.com/2009/03/'>
marzo
</a>
<span class='post-count' dir='ltr'>(2)</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='https://aula-3.blogspot.com/2009_03_09_archive.html'>
mar 09
</a>
<span class='post-count' dir='ltr'>(2)</span>
</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='https://aula-3.blogspot.com/2009/05/'>
mayo
</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='https://aula-3.blogspot.com/2009_05_26_archive.html'>
may 26
</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='https://aula-3.blogspot.com/2009/09/'>
septiembre
</a>
<span class='post-count' dir='ltr'>(1)</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='https://aula-3.blogspot.com/2009_09_10_archive.html'>
sept 10
</a>
<span class='post-count' dir='ltr'>(1)</span>
<ul class='posts'>
<li><a href='https://aula-3.blogspot.com/2009/09/pagina-web.html'>PAGINA WEB</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<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/91768132-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY4utMNonxTf4uwMCAcSE3EQB2zBeQ:1736504473086';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7712928260235636634','//aula-3.blogspot.com/2009/09/','7712928260235636634');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7712928260235636634', 'title': 'AULA 3', 'url': 'https://aula-3.blogspot.com/2009/09/', 'canonicalUrl': 'http://aula-3.blogspot.com/2009/09/', 'homepageUrl': 'https://aula-3.blogspot.com/', 'searchUrl': 'https://aula-3.blogspot.com/search', 'canonicalHomepageUrl': 'http://aula-3.blogspot.com/', 'blogspotFaviconUrl': 'https://aula-3.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\x22AULA 3 - Atom\x22 href\x3d\x22https://aula-3.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22AULA 3 - RSS\x22 href\x3d\x22https://aula-3.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22AULA 3 - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7712928260235636634/posts/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/d2c988fc3a56b1b1', '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': 'archive', 'pageName': 'septiembre 2009', 'pageTitle': 'AULA 3: septiembre 2009'}}, {'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': 'AULA 3', 'description': '', 'url': 'https://aula-3.blogspot.com/2009/09/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': true, 'isLabelSearch': false, 'archive': {'year': 2009, 'month': 9, 'rangeMessage': 'Mostrando entradas de septiembre, 2009'}}}]);
_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/2956189928-lbx__es.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle.css'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text1', 'sidebar', document.getElementById('Text1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FollowersView', new _WidgetInfo('Followers2', 'sidebar', document.getElementById('Followers2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive2', 'sidebar', document.getElementById('BlogArchive2'), {'languageDirection': 'ltr', 'loadingMessage': 'Cargando\x26hellip;'}, 'displayModeFull'));
</script>
</body>
</html>