Monday, March 14, 2016

Basic Anatomy of HTML

HTML Anatomy

Define the document:
<!DOCTYPE html>
Begin the document with html tags:
<html>
Add a header to the html tag:
<head>
Add title to the html page
<title></title>
Close the head
</head>
Add body to the html page:
<body>
Add link and attach it to an image:
<a href="https://www.yahoo.com/autos/7-classic-cars-deserve-hellcat-engine-swap-170041356.html"> <img src="http://media.zenfs.com/en-US/cms/autos/Boldride/8-amc-gremlin.jpg" /></a>
<a href="https://www.yahoo.com/autos/7-classic-cars-deserve-hellcat-engine-swap-170041356.html"> <img src="http://media.zenfs.com/en-US/cms/autos/Boldride/8-amc-gremlin.jpg" /></a>
Ordered List
<ol>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
<li>Warm woolen mittens</li>
</ol>

UnOrdered List
<ul>
<li>Thoughts1</li>
<li>Thoughts2</li>
<li>Thoughts3</li>
<li>Thoughts4</li>
</ul>


Add table and columns

<table border="1px">
         
                <tr>
                    <td>King Kong</td>
                    <td>1933</td>  
                </tr>
             
                <tr>
                    <td>Dracula</td>
                    <td>1897</td>
                </tr>
             
                <tr>
                    <td>Bride of Frankenstein</td>
                    <td>1935</td>
                </tr>
            

</table>


Add table board, table header, table row column header around the table body

<table border="1px">
            <thead>
                <tr>
                    <th>
                        Famous Monster
                    </th>
                    <th>
                        Birth year
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>King Kong</td>
                    <td>1933</td>  
                </tr>
             
                <tr>
                    <td>Dracula</td>
                    <td>1897</td>
                </tr>
             
                <tr>
                    <td>Bride of Frankenstein</td>
                    <td>1935</td>
                </tr>
            </tbody>
        </table>

Add division to html page (divide your page into containers)

<div style="width:50px; height:50px; background-color:yellow"></div>

Adding a relative measure using em:
<p style="font-size: 1em">One em!</p>
<p style="font-size: 0.5em">Half an em!</p>
<p style="font-size: 2em">TWO EM!</p>

Close the body tag:
</body>
Close the html tag:
</html>
HTML Common Attributes:
Add attribute to paragraph and change the font size, color, font-family, background-color, text-align,strong words (bold), and emphasize words (italicize):

<p style="color: red; font-size: 10px">
<h1 style="color:green; font-family: Arial">Big title</h1>
<p style="background-color: red;">Hello!</p>
<h3 style="text-align:center">Favorite Football Teams</h3>
<p>Do you hear the people <strong>sing</strong>?</p>
<p>Hey, don't say <em>that</em>!</p>
<th colspan="2">Famous Monsters by Birth Year</th>

No comments:

Post a Comment