| |
HTML Tutorial - Part 4 Begin HTML Coding
You can use this HTML tutorial to learn the basics of this widely used mark-up language. If you are new to coding an HTML tag, there is need to worry. Once you know how to structure a few HTML tags you'll be on your way to learning lots more in the HTML world. It'll be a snap! Learning how to use some common HTML design tags will increase your comfort level -- without having to learn any programming language.
- Which Tags Are Mandatory?
Most tags are paired - this just means that a start tag is paired off with an ending tag or end tag. The End tag has a forward slash that’s positioned right after the first angle bracket ( … </ … ).
<html> and </html> <head> and </head> <title> and </title> <body> and </body>
- All HTML documents, or docs for short, must begin with… the start <html> tag and end with the </html> tag.
- Let’s create a simple HTML doc. First, you must code the start <html> tag.
- After that you’ll code the next 3 required pairs of tags and then finish by coding the </html> end tag to complete it.
- The start <head> and end </head> tag is used to indicate information about the document – I cover this later.
- The <title> and </title> tags holds the information for your Title Bar – this bar is displayed at the top of any browser’s window. Since it has document info it’s coded within the <head> and </head> tags.
- The <body> and </body> tags are used to contain any text that is displayed in the HTML page.
- You’re also going add a non-required paired tag to let your document have some text to display.
- Code The New Web Page
Code the following in your text editor. Add this sentence to the body to allow your browser to display some on your screen...This sentence will be displayed on my new web page.
Your HTML code should look like this: <html>
<head>
<title>My New Web Page</title>
</head>
<body>
This sentence will be displayed on my new web page.
</body>
</html>
- Save the file in a folder where you keep HTML code – use lowercase characters with a document extension type of either .htm or .html.
Note:
Older browsers ONLY recognize the 3 character .htm extension.
- In the PC environment you double-click on the saved file.
- You will see a the following in your browser window…
Tip:
Mac and Linux/UNIX users see the help documentation for your respective operating systems to browse a saved HTML file. - Now we’ll use the bold tags to modify the text in the body section
- Make My Text Bold
Let's make some of the text bold in the body section. We easily do this by surrounding it with the bold tags -- <b> and </b>.
- Change My Web Page With More HTML Tags
Now you going to see the italic tags, (<em> and </em>), and underline tags, (<u> and </u>), work in this HTML tutorial. Again, you can do this by surrounding your text with the proper HTML tags. We'll also see how the break tag, (<br>), and the paragraph tags, (<p> and </p>), work. - By now you know you can modify your existing HTML code for simplicity.
Let's have the code look like this… <html>
<head>
<title>My Web Page With More HTML Tags</title>
</head>
<body>
<p>This sentence will be displayed on the modified web page and <em>we'll make these characters italic by using HTML italic tags.</em></p> <p>This next sentence shows some <u>text that is underlined.</u></p> <p>This next sentence demonstrates how the break tag <br>starts text on a new line. It is also a tag that is not used in pairs.</p> <p>Each of these examples is contained their own paragraph. As you can see this HTML tag can be very useful.</p> </body>
</html>
- Save your file and then have you browser do its thing.
Your file should look like this...
... if not, don't sweat it. Just correct any errors you might find and have yourself a nice do-over! We're all human. - We've made of the text italic and we've underlined part of the text with our HTML tags. Also, the paragraph tags and a stand alone break tag was used in our HTML tutorial web page.
- You’ve also learned how italicize and bold your text. There are many other ways to format your text. We'll explore some more widely used tags in the next HTML tutorial section.
Return from HTML Tutorial Part 4.
|
