Steve Smith, host of your TQA Weekly, how to structure HTML code to create headers, paragraphs, and lists.
Episode #2-21 released on February 19, 2012
Designing web-sites for modern web browsers is a relatively simple task. With CSS we can use virtually any command we want, modify it, and make it function like the original command. This is great for designers, but really bad practice. This is why one of the reasons why I am going to explain several new commands, and how they are beneficial later on down the line. In the next few episodes we will commence the section on CSS and how to modify specific elements in order to achieve the look desired without handicapping your future search engine rankings by misusing commands.
Let's talk about headers, also known as the title, subtitle, etc.. of a section. These commands are represented in HTML code as <h1> to <h6>, and as previously stated two episodes ago, in order to close such a command, you must introduce a back slash like this </h1> before the name of the command. Search engines, like Bing and Google, all look for the header tags. They seek these tags to identify the most important content on the page within a set amount of characters they are set to scan through. The paragraph after the most important title is usually the content they import into the search, and the meta tags, and content define the keywords for the search parameter.
Below the header commands, or tags, as they are commonly referred to, we can add a number of elements, such as the paragraph, ordered list, and unordered list elements. The paragraph element is written as a single P character within two square brackets, like <p>, and is closed by providing the end confirm element </p>.
The Ordered and Unorder lists are more interesting if you wish to provide a list of common elements of content. In order to create an ordered or unordered list, we must also specific a sub tag element known as the list item, or <li>, which closes with </li>. And Ordered list opens the with <ol> and closes with </ol>. An, unordered list opens with <ul> and closes with </ul>.
To generate an order list of five items, you must compose the code like this:
<ol>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<li>item four</li>
<li>item five</li>
</ol>
The same goes for an unordered list:
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<li>item four</li>
<li>item five</li>
</ul>
In order to create a paragraph of content need only do the following:
<p>This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph.</p>
Now, that we have dealt with the content elements, if you wanted to create a web page that contains one master subject, two sub topic, context content, and a list of items needed, and another list of suggestions, you would make a page that looks like the following. In this sample, available in the show notes on the left info bar, I include the html tag, header tag, title tag, body tag, and the related closing tags. The completed script looks like this:
<html>
<head>
<title>Two lists, one master subject, and two sub topics.</title>
</head>
<body>
<h1>Ways to create a web page</h1>
<h2>Things You Need To Make a Web-page</h2>
<p>This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph.</p>
<ol>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<li>item four</li>
<li>item five</li>
</ol>
<h2>Things You Need to Modify Web-pages</h2>
<p>This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph. This is a sample text for a paragraph.</p>
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<li>item four</li>
<li>item five</li>
</ul>
</body>
</html>
Now, you can make a page that contains content. Next week, we will be talking about how to speed up your experience of the internet, and the pros and cons of each method. The week after, I will be explaining how to create links between pages, and how to open new windows/tabs.
Remember to like, share and subscribe to TQA Weekly. For more information like our show notes, how to join our mailing list, get your own TQA Weekly branded gear and apparel, or for our Android Application, please visit tqaweekly.com. We now feature an easier subscribe feature to allow you to download the latest episodes, and the web-site also has a search feature to allow you to find the solutions for your technology issues and problems. Stay safe and online, have a great day!
Host : Steve Smith | Music : Jonny Lee Hart | Editor : Steve Smith | Producer : Zed Axis Productions