HTML Basics

Lesson 01/14 – Why learn HTML?

[code lang=”html”]
<!DOCTYPE html>
<strong>This is a test</strong>
[/code]

Lesson 02/14 – HTML and CSS

[code lang=”html”]
<!DOCTYPE html></DOCTYPE>
<html>this is a test
</html>
[/code]

Lesson 03/14 – Basic terminology

[code lang=”html”]
<!DOCTYPE html>
<html>
Test
</html>
[/code]

Lesson 04/14 – Make the head

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>
Bad to Bonez Webpage Inc
</title>
</head>

</html>
[/code]

Lesson 05/14 – Paragraphs in the body

[code lang=”html”]
<!DOCTYPE html>
<html>

&lt;head&gt;
    &lt;title&gt;
    Test
    &lt;/title&gt;

&lt;/head&gt;

<body>
<p>hello</p>
<p>this is a test</p>
</body>

</html>
[/code]

Lesson 06/14 – Paragraphs and headings

[code lang=”html”]
<!DOCTYPE html>
<html>

&lt;head&gt;
    &lt;title&gt;
        Headings &amp; Paragraphs
    &lt;/title&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;
 Test   
&lt;/h1&gt; 
    &lt;p&gt;test html&lt;/p&gt;
    &lt;p&gt;ciao&lt;/p&gt;

&lt;/body&gt;

</html>
[/code]

Lesson 07/14 – More about headings!

[code lang=”html”]
<!DOCTYPE html>
<html>

    <head>
        <title>
            Headings & Paragraphs
        </title>
        
    </head>
    <body>
    <h1>
     The CEO   
    </h1>    
        <p>paragafo 1</p>
        <h3>Director of Some Stuff</h3>
        <p>paragafo 2</p>
        <h5>Lowly Assistant</h5>
        <p>paragafo 3</p>
    </body>
</html>
[/code]

Lesson 08/14 – Using every heading

[code lang=”html”]
<!DOCTYPE html>
<html>

    <head>
        <title>
            Headings & Paragraphs
        </title>
        
    </head>
    <body>
    <h1>
     Heading 1   
    </h1>    
        <p>paragafo 1</p>
        <h2>Heading 2</h2>
        <p>paragrafo 2</p>
        <h3>Heading 3</h3>
        <p>paragafo 3</p>
        <h4>Heading 4</h4>
        <p>paragrafo 4</p>
        <h5>Heading 5</h5>
        <p>paragafo 5</p>
        <h6>Heading 6</h6>
        <p>paragrafo 6</p>
    </body>
</html>
[/code]

Lesson 09/14 – Mid-lesson breather

[code lang=”html”]
<!DOCTYPE html>
<html>
    <head>
        <title>Title tag</title>
    </head>
    <body>
    <h3>Heading 3</h3>    
    <p>paragrafo 1</p>
    <p>paragrafo 2</p>
    <p>paragrafo 3</p>
        
        
        
    </body>
</html>
[/code]

Lesson 10/14 – You’re going places!

[code lang=”html”]
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>
[/code]

Lesson 11/14 – Adding images

[code lang=”html”]
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <img src="http://bit.ly/PK1euu" />
        <img src="http://bit.ly/SJxLUx"/>
    </body>
</html>
[/code]

Lesson 12/14 – Click that image

[code lang=”html”]
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <a href="http:\example.com"
        <img src="http://bit.ly/PK1euu" />
        <img src="http://bit.ly/SJxLUx"/>
        </a>
    </body>
</html>
[/code]

Lesson 13/14 – Images and links

[code lang=”html”]
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <a href="http:\example.com"
        <img src="http://bit.ly/PK1euu" />
        </a>
        <img src="http://bit.ly/SJxLUx"/>    
        <a href="http:\web4marketing.it">Web4Marketing</a>    
    </body>
</html>
[/code]

Lesson 14/14 – Congratulations!

[code lang=”html”]
<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body></body>
</html>
[/code]

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax