HTML Examples

And then copy and paste the following examples of html code, one at a time, just like I showed you in the video! In between each example, delete everything in between the <html> tags.


To change the page color:


<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>


To change the word color:


<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>


To make bold words:


<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>


To make italicized words:


<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>


To add a picture:


<body>
<h2>Italian Trulli</h2>
<img src="pic_trulli.jpg" alt="Italian Trullti" style="width:100%">
</body>

To add a gif:


<body>
<h2>Animated Images</h2>
<p>HTML allows moving images:</p>
<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">
</body>


To make a color selector:


<body>
<h2>Show a Color Picker</h2>
<p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>
<form action="/action_page.php">
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
<input type="submit" value="Submit">
</form>
<p><b>Note:</b> type="color" is not supported in Internet Explorer 11 or Safari 9.1 (or earlier).</p>
</body>

When you're ready...