HTML5Learning HTML With Pilz:

Step 1: Getting Started

Starting with a new file in Notepad++, we’ll create the basic structure for a webpage, and add a title.
This title gets displayed in the tab/window of your web browser.

Use the following code to create the basic webpage:

					<html>
						<head>
						<title>My Webpage</title>
						</head>
						</html>

Make sure to save your file with the .html extension to your desktop. For example mywebpage.html

You can change the title to be anything you’d like. Open your file from the desktop to see the page in your browser.

Step 2: Adding Content

Next we’ll add some content to the body of the webpage.

Use the <body> tag to create the section for the main content, then add <p> tags for each paragraph.

					<html>
						<head>
						<title>My Webpage</title>
						</head>
						<body>
						<p>My name is Pilz</p>
						</body>
						
						</html>

Save the file, and open it again in your web browser.

Step 3: Headings

All the hard work is done now, we can add things to make our page look nicer

First, let’s use the <h1> tag to create a heading. H1 means that it’s the biggest size heading – you can use sizes h1, h2, h3, h4, h5, and h6 too, where H6 is the smallest.

					<html>
						<head>
						<title>My Webpage</title>
						</head>
						<body>
						<h1>My Webpage Title</h1>
						<p>My name is Pilz</p>
						</body>
						</html>

Save the file, and open it again in your web browser.

Step 4: Making Text Stand Out

As well as using headings, we can make text stand out, just like we do in Microsoft Word.

For bold text use the <b> tag, and for italics use the <i> tag.
Here we’ll put the word name in italics, and your name (Pilz below) in bold.

					<html>
						<head>
						<title>My Webpage</title>
						</head>
						<body>
						<h1>My Webpage Title</h1><
						<p>My <i>name is <b>Pilz</b> </p>
						</body>
						</html>

Save the file, and open it again in your web browser.

Step 5: Lists

In HTML, you can create bullet point lists using a combination of two tags.

To say that you are beginning a list use the <ul> tag. This stands for unordered list.

Each item in the list should then start with an <li> and ends with a </li>

One you are finished the list use the </ul> tag.

					<html>
						<head>
						<title>My Webpage</title>
						</head>
						<body>
						<h1>My Webpage Title</h1><
						<p>My <i>name is <b>Pilz</b> </p>
						<p> My favourite foods are </p>
						<li>Pizza</li>
						<li>Chicken</li>
						</ul>
						
						</body>
						</html>

Save the file, and refresh it in your browser using the F5 key, or by clicking the refresh icon near the address bar.

Step 6: Embedding Images

Images can be added to your website using the <img> tag.

This tag is a little different because an extra part called an attribute.

The attribute src= needs to take the location of an image in your folder

Usually, you have your .html file in a folder, and within that you have an images folder.

Here is an example of how you would use the tag:

					<html>
						<head>
						<title>My Webpage</title>
						</head>
						<body>
						<h1>My Webpage Title</h1><
						<p>My <i>name is <b>Pilz</b> </p>
						<p> My favourite foods are </p>
						<li>Pizza</li>
						<li>Chicken</li>
						</ul>
						<img src='images/myimage.png'>
						</body>
						</html>

Don’t forget that the bit after src=’ will change depending on the image.

You need to make sure you have the name of the image right, including the bit after the ., known as the file extension.

Save the file, and refresh it in your browser using the F5 key, or by clicking the refresh icon near the address bar.

Step 7: Changing Background Color

It’s easy to change the colour of your page from the default white color.

In the <body> tag, you need to add a new attribute called bgcolor.

So the body tag will change from <body> to <body bgcolor=”green”>

Note that color is spelt with American spelling.

Here is an example of how you would use the tag, changing the page color to green.

					<html>
						<head>
						<title>My Webpage</title>
						</head>
						<body bgcolor="green">
						<h1>My Webpage Title</h1><
						<p>My <i>name is <b>Pilz</b> </p>
						<p> My favourite foods are </p>
						<li>Pizza</li>
						<li>Chicken</li>
						</ul>
						<img src='images/myimage.png'>
						</body>
						</html>

Save the file, and refresh it in your browser using the F5 key, or by clicking the refresh icon near the address bar.

Step 8: Embedding Videos From YouTube

If you want to add videos from YouTube, you can simply copy some code from the YouTube website.

Go to your favorite video and right click on the video with the mouse.

Choose Copy embed html like the picture below.

youtube_step1

You will get some code that looks like this:

youtube_step2

You can just paste this code anywhere on your webpage (using the Edit menu and clicking Paste)

Save the file, and refresh it in your browser using the F5 key, or by clicking the refresh icon near the address bar.

Copyright © Pilz 2018. All rights reserved. | pilz.ie