Aprendiendo HTML: Guía para principiantes

r2j · 22 Dic 2012

Hace mucho tiempo que quería crear un tema como este para aprender de manera conjunta el idioma predeterminado para las webs. El objetivo de esta plataforma es terminar sabiendo este lenguaje y quien sabe haciendo mejor los proyectos que tenemos en mente. Siempre me he encontrado con el obstáculo de no saber HTML y consultar con los compañeros del foro.
Iré colgando cosas que he aprendido durante una minisesión al día como método de auto-aprendizaje, espero que a muchos les sirva... Se lo básico de HTML (lo cercano a la optimización seo) , día a día iré poniendo mi granito de arena, así aprendemos más!
Si alguna vez me equivoco en algo, me corrigen 😛

Day 1: Inmersión en el HTML

Estructura básica:
1
<!DOCTYPE html>
2 <html>
3 <body>

4 <h1>ola, k ase </h1>

5 <p>EL texto de un oygan que no sabe html</p>

</body>
</html>

Nos ayuda a que muestre mejor la web en los navegadores ya que especificaremos la versión del HTML (en éste caso)
Entre estas etiquetas empieza la información del sitio como la inclusión de las otras etiquetas
Dentro del body habrá la parte de la web que queremos que se muestre por la pantalla del lector
El h1 es un tipo de encabezamiento (hay h1, h2, h3, h4 ...) es usual hacerlos servir de una manera óptima para el SEO
Estas etiquetas configurarán bien los párrafos

El HTML es un idioma que se base en el lenguaje de las marcas, como premisa tendremos: Todo aquello que abrimos, lo tenemos que cerrar tarde o temprano, por orden de oberturas.

Day 2: Inmersión en el HTML

Antes de todo, aclarar que las etiquetas las podemos escribir tanto en mayúscula como en minúscula, aunque las directivas de W3C recomiendan usar las minúsculas. EL hito de las webs durante el 2013 será el XHTML donde SÍ serán minúsculas obligatoriamente.

Tip: Nunca dejemos etiquetas sin contenido, visto desde el SEO empeorará de cierta forma el seo on site.

¿Cómo hacer links?

<a href="http://www.forobeta.com">Haz click aquí</a>
Podemos poner varios tipos de links o targets.
el _blank: abre el link en ventana nueva
el _self: abre en el mismo marco

Ejemplo: <a href="http://www.forobeta.com/" target="_blank">Visitanos!</a>

¿Cómo poner imágenes?

<img src="beta.jpg" width="100" height="200">
Tanto el nombre de la imagen y las dimensiones, vendrán dadas por la imagen que colguemos en la web.

¿Cómo poner comentarios?


To be continued!

Aportes de betas

Snippet Básico en Sublime Text 2 de AVSiller

Zuruck · 22 Dic 2012

Falta el <head> ...

<head><title>En estos dias hago un tuto para crear temas para Blogger</title></head>

Saludos

r2j · 22 Dic 2012

Camilo Garcia dijo:
Falta el <head> ...

<head><title>En estos dias hago un tuto para crear temas para Blogger</title></head>

Saludos

Estoy de acuerdo, pero aún no lo incluí porqué iré poniendo cosas cada día jeje Si tienes algún diccionario de marcas te agradecería que lo compartas, todo los recursos serán bienvenidos 😉

avsiller · 22 Dic 2012

Este es mi Snippet Basico en Sublime Text 2, de ahi parto para realizar cualquier diseño.

Insertar CODE, HTML o PHP:

<!DOCTYPE html>
<html lang="es">
<!--<head> "Wordpress Head"
    <title><?php bloginfo('name'); ?></title>
    <meta charset="UTF-8" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />
    <?php wp_head(); ?>
</head>-->
<head>
    <title>BlogName</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
    <div id="wrapper">
        <div id="header">
        </div>
        <div id="contenido">
        </div>
        <div id="sidebar">
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

r2j · 22 Dic 2012

avsiller dijo:

Este es mi Snippet Basico en Sublime Text 2, de ahi parto para realizar cualquier diseño.

Insertar CODE, HTML o PHP:

<!DOCTYPE html>
<html lang="es">
<!--<head> "Wordpress Head"
    <title><?php bloginfo('name'); ?></title>
    <meta charset="UTF-8" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" type="image/x-icon" />
    <?php wp_head(); ?>
</head>-->
<head>
    <title>BlogName</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" href="style.css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
    <div id="wrapper">
        <div id="header">
        </div>
        <div id="contenido">
        </div>
        <div id="sidebar">
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>

Gracias, lo he puesto como aportes 😉 A más de uno le servirá 🙂

Zuruck · 22 Dic 2012

Por mi parte aunque no es HTML, es CSS, recomiendo usar Normalize.css en sus diseños 😉

pedro100 · 22 Dic 2012

Camilo Garcia dijo:
Por mi parte aunque no es HTML, es CSS, recomiendo usar Normalize.css en sus diseños 😉

¿Tiene importancia como se llama el css?, ¿no puede ser por ejemplo nombrex.css?

Zuruck · 22 Dic 2012

pedro100 dijo:
¿Tiene importancia como se llama el css?, ¿no puede ser por ejemplo nombrex.css?

Normalize.css es un reset para que los navegadores identifiquen igual a los elementos, si no sabes, estos ya traen consigo un estilo predeterminado y diferente, Normalize lo soluciona.

Normalize.css: Make browsers render all elements more consistently.

r2j · 22 Dic 2012

Camilo Garcia dijo:
Por mi parte aunque no es HTML, es CSS, recomiendo usar Normalize.css en sus diseños 😉

Buena herramienta, conocía una de pago pero esta se ve mejor!

avsiller · 22 Dic 2012

pedro100 dijo:
¿Tiene importancia como se llama el css?, ¿no puede ser por ejemplo nombrex.css?

Se refiere al script, no lo he utilizado pero creo que es similar a modernizr, el cua esta enfocado en la compatibilidad de los nuevos atributos y etiquetas HTML5 para los navegadores.

Normalize: Normalize.css: Make browsers render all elements more consistently.
Modernizr: Modernizr: the feature detection library for HTML5/CSS3
[MENTION=19022]Prodygy[/MENTION] , [MENTION=23219]Camilo Garcia[/MENTION]

pedro100 · 22 Dic 2012

Camilo Garcia dijo:
Pues hombre CRITICA CUANDO SEPAS JODER!!!

Normalize.css es un reset para que los navegadores identifiquen igual a los elementos, si no sabes, estos ya traen consigo un estilo predeterminado y diferente, Normalize lo soluciona.

Normalize.css: Make browsers render all elements more consistently.

Tranquilo, yo no te he criticado, solo he preguntado.

Zuruck · 22 Dic 2012

[MENTION=11752]avsiller[/MENTION]

Normalize configura para que todos los elementos tengan un estilo igual en todos los navegadores 🙂

Es mucho mejor que un reset comun y corriente.

Esteban Sequeira · 22 Dic 2012

Después de tanto alboroto mi pequeño aporte 🙂

Reset CSS para HTML5, cortesía Html5Doctor

Insertar CODE, HTML o PHP:

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter:  [MENTION=27746]rich[/MENTION]_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

Funciona para HTML también.

r2j · 23 Dic 2012

He puesto el día 2! De momento es muy básico, espero aprender lo que verdaderamente no se! Saludos

alsape · 26 Dic 2012

Yo recibí este año un curso de HTML y realizábamos todas las páginas bien con bloc de notas (y guardándolo como archivo.html) o directamente con el Dreamweaver de Adobe

r2j · 27 Dic 2012

He parado de aprender estos días por festividades y falta de tiempo! Pero un día de estos volveré!

Enviado desde mi GT-S5570 usando Tapatalk 2

Aprendiendo HTML: Guía para principiantes

r2j

Zuruck

r2j

avsiller

r2j

Zuruck

pedro100

Zuruck

r2j

avsiller

pedro100

Zuruck

Esteban Sequeira

r2j

alsape

r2j

Temas similares