HTML language is indispensable if we want to plunge into the online world. For example you want to sell your products online by displaying products on a web page or you want to have a web portal that is used to display information about your organization or personal. Although there have been many platforms that can be used to create a web page e.g. Wordpress, Joomla or Blogger but understanding of HTML is still needed before you step into CSS and Javascript to develop more powerful website.
The following will describe about tags and attributes in html documents:
Paragraph in HTML
If you often use a word processing application such as MS Word, Open Office etc, surely you are familiar with paragraphs. We often find the paragraph on writing the contents of a book like a novel, term paper, thesis and other books. At this session will be discussed how to implement paragraphs in HTML documents. The tag used to create paragraph is <p></p>. The following way of writing tag <p>:
<p>Put text here</p>The example above is the standard for writing tag <p>. For writing a paragraph in html we can set text align for the text in the paragraph, but an earlier will be describe about the attributes first.
Attribute in html is the information provided to the tag, which is the information can change the default style of a tag and tell the search engines about the intent and purpose of the tag. On the javascript attribute is often used to identify and get the element or object.To set text align in the paragraph, the attributes used are align by giving a value on the align attribute. The value that can be given to the align attribute which is "left" for text align left, "right" text align right, "justify" text align left and right and "center" for text align center.
The following are examples of align attribute on the tag <p>:
<p align="left">Text align left on the paragraph.</p>To display the text indented into the first line of the paragraph we use the attribute style. The value of the attribute style is CSS (Cascading Style sheets), but CSS is not explained in depth in this article. CSS here are only as an example just to display the first line of text is indented into the paragraph.
<p align="right">Text align right on the paragraph.</p>
<p align="center">Text align center on the paragraph.</p>
<p align="justify">Text align left and right on the paragraph</p>
Code to display text indent on the paragraph:
<p style="text-align:left;text-indent:50px;">This is the paragraph with the first line is indented to the right.</p>The above code will display the text indented into 50px to the right on the first line of the paragraph with the text align left. Now you can practice making the paragraphs by typing the following html code:
<!DOCTYPE html>Save the document with the .html extension after you finish typing the code, then open the file using your web browser. On the web browser will appear as follows:
<html>
<head>
<title>Paragraph</title>
</head>
<body>
<p>Learning HTML is fun, a lot of things to be had from learning HTML. We can create a Web page with the HTML language. We can learn to determine how to display the web page that we want with an HTML language. We can create paragraphs, Headings, lists, links, format text, etc. After mastering HTML we can continue to learn about CSS (Cascading Style Sheet).</p>
<p align="left">This is a paragraph with text align left. To format a paragraph like this we add the attribute align = "left" on the tag <p>.</p>
<p align="right">This is a paragraph with text align right. To Format a paragraph like this we add the attribute align="right" on the tag <p>.</p>
<p align="justify">This is a paragraph with text align justify. To Format a paragraph like this we add the attribute align="justify" on the tag <p>.</p>
<p align="center">This is a paragraph with text align center. To Format a paragraph like this we add the attribute align="center" on the tag <p>.</p>
<p style="text-align:left;text-indent:50px;">This is the paragraph with the first line is indented to the right. You can format text in the paragraph like this by add the style attribute. For the reader, paragraphs are useful for easy understanding of the themes presented the writer and directing the concentration of the readers to the what is being read.</p>
</body>
</html>
 |
| Display the html paragraph on the web browser |
Make a New Line (Break Row)
Break Row is used to create and move the position of writing to the new line. In HTML, to create and move to the next line are using the tag <br />. The function of this tag is the same as we hit the enter key on the keyboard when we type using the word processing application.
The html code below is an example of using the tag < br/>:
<!DOCTYPE html>If the html document above are opened by a web browser, it will display the text in the first row, second and third. Following are the display on a web browser:
<html>
<head>
<title>BREAK ROW</title>
</head>
<body>
This is the first line.<br />This is the second line.<br />This is the third line.
</body>
</html>
 |
| The display on web browser of uses html breakrow |
Display Image
Images on a web pages are very important as an attraction for visitors. Imagine if a website is not showing any picture and shows only text, surely will look less attractive. In addition to interest, the images on the website are also useful to help visitors to understanding the information or content displayed on the website, with a note that the images displayed are related to the content of the website. To display image on web browser using html, the tag used is <img>. In the following example, I prepare an image file placed one folder with html file that will display the image.
<!DOCTYPE html>Note this code <img src="htmlbook.jpg" /> on above html document. The attribute src of the tag gives information on the filename of the image that will be shown, or more precisely the address of the image file is located. In addition of src there are some attributes that can be used on a tag <img> with different functions, i.e. width to set the width of the image, height to set the height of the image, the alt to provide information if the image is fail displayed by a web browser, and align to set the images alignment to the text.
<html>
<head>
<title>USING IMG TAG</title>
</head>
<body>
<img src="htmlbook.jpg" />
</body>
</html>
Take a look of the code below of using attributes on the <img> tag:
<!DOCTYPE html>On the above html code, will display an image with the width 90 pixel, height 150 pixel on the web browser while you open the html document using your web browser. If the image fail to load by web browser will display the text "HTML 5 BOOK" on your web browser as the browser read the alt attribute value on the <img> tag. The appearance of the html document on web browser will look like below:
<html>
<head>
<title>USING IMG TAG</title>
</head>
<body>
<img src="htmlbook.jpg" alt="HTML 5 BOOK" width="90" height="150" />
</body>
</html>
Heading
Headings are a set of words that make up a phrase which is the title or subtitle in a html document. Heading has a size that varies depending on the level that is defined. Headings in html has a level 1 to level 6 are defined with the tag <h1></h1> to <h6></h6>.
Attention the code below of using the heading tag:
<!DOCTYPE html>On the above code will showing the text heading between h1 to h6 on your web browser. Look at the image below as the appearance of above html code on the web browser.
<html>
<head>
<title>HEADING TAG ON HTML</title>
</head>
<body>
<h1>Text as Heading 1</h1>
<h2>Text as Heading 2</h2>
<h3>Text as Heading 3</h3>
<h4>Text as Heading 4</h4>
<h5>Text as Heading 5</h5>
<h6>Text as Heading 6</h6>
</body>
</html>
Link (Anchor)
A link on a web page can be either text or an image, when clicked will direct visitors to a web page, both pages on internal website or other website. The links often be used to create a menu or navigation pages to help visitors to browse the pages on the website. Take a look and focused to the code below:
<!DOCTYPE html>On above html code will showing links on web browser, to create link on html document we are using <a> tag with href attribute to specify the target of <a> tag element. For example:
<html>
<head>
<title>LINK ON HTML</title>
</head>
<body>
<a href="paragraph.html">HTML Paragraph</a><br />
<a href="displayimage.html">HTML Images</a><br />
<a href="heading.html">HTML Heading</a><br />
<a href="link.html">HTML Link</a>
</body>
</html>
<a href="paragraph.html">HTML Paragraph</a>The above code snippet was link which directing the user to the paragraph.html document were the value of href attribute as target for this link when they are clicked the link. The text HTML Paragraph that placed between the opening tag <a href="paragraph.html"> and the closing tag </a> was the element of this tag. If the code as html document that saved as link.html was opened in the web browser, it will appear is as follow:
Text Formatting
The meaning of text formatting on this section is modifying the text display using HTML. Text formatting that will be covered include font size, font type, font color, text alignment, text with bold, italics and underlining.
To make the bold text the tag used was <b> as opening tag and the closing tag </b>, the other the opening tag <i> followed by text as the element of this tag then close by closing tag </i> will make the text or elements of this tag in italic style format. Other than that has been mentioned, to underlining the text, we are using the tag <u> followed by elements then closed using </u>. Take your self to the code below as the example to make text bold, italic and underline.
<!DOCTYPE html>If the above html code was opened by web browser will display the text with style as bold italic and underline, also look the text that formatting using font tag. The font tag are used to specify the font type of the text as arial, tahoma, times new roman etc by adding the face attribute. To specify the size of the font, using the size attribute by put the value to attribute with number from +1 to +7 and -7 to -1. The appearance of above code on the web browser will look like below:
<html>
<head>
<title>Text Formatting</title>
</head>
<body>
<b>This Text is bold</b><br />
<i>This Text is Italic</i><br />
<u>This Text is underline</u><br />
<b><i><u>This text are bold, italic and underline</u></i></b><br /><br />
<font face="Arial" size="+1" color="GREY">This text display with arial font face, size=+1 and the color is Grey</font>
</body>
</html>
List
List on html is grouped items are structured either sequentially with numbering or not. On html there are known 3 methods in making a list that are ordered list, unordered list and definition list.
Ordered List
Ordered list was the method on html to display the list with sequential number. The tag that are used to create the ordered list are <ol> tag, begin the opening tag <ol> and closing by </ol>. To start adding elements or list items on the <ol> tag we begin with <li> tag followed by the element as texts, images or links then closing by </li> that are placed between the <ol> and </ol>. Take a look the html code below to display list on web browser as html document:
<!DOCTYPE html>The above code will appear like below in web browser:
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<h1>Ordered List</h1>
<ol>
<li>First List Item</li>
<li>Second List Item</li>
<li>Third List Item</li>
</ol>
</body>
</html>
Unordered List
Unordered List is a grouping of items that have no specific order. Similar to ordered list, but the unordered list are using the opening tag <ul> and close by </ul>. Look and understand the html code below to create the list using unordered list method.
<!DOCTYPE html>The above code will appear look like below in web browser:
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<h1>Unordered List</h1>
<ul>
<li>HTML</li>
<li>CSS (Cascading Style Sheet)</li>
<li>Javascript</li>
</ul>
</body>
</html>
Definition List
The Definition List method were used to display a list of terms along with the explanation. The definition list are consist of two elements i.e label and the description of the label. Look the html code to create definition list below:
<!DOCTYPE html>To start create the definition list we are define <dl> tag and finished by </dl>. The items on the definition list are consist label and description. To define the label we are using <dt> followed by the text that are the label content then close by </dt> that are placed between <dl> and </dl>. For the description also placed between <dl> and </dl> that are define by <dd> followed by text as description then close by </dd>. If the code opened by web browser will look like below:
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<h1>Definition List</h1>
<dl>
<dt>HTML</dt>
<dd>HTML is a markup language that is used to create a web page and displays the information in the web browser.</dd>
<dt>CSS (Cascading Style Sheet)</dt>
<dd>CSS is a style sheet language that set the display format on the web page that is written on a markup language</dd>
<dt>Javascript</dt>
<dd>JavaScript is a web programming language on the client side that refer to web browsers.</dd>
</dl>
</body>
</html>
Division
Division are used to classify elements into a division or groups. The tag used is <div></div>, this tag is very often used to form the layout of a web page which then styled by CSS. Look the example of using div tag on html from the code below:
<!DOCTYPE html>
<html>
<head>
<title>DIV tag on HTML</title>
</head>
<body>
<h1>Division on HTML</h1>
<div>
HTML as the standard language for creating a web page is very important to understand when we want to learn more about web programming. Learn HTML language is so much fun when we tried the examples of code that is later learned to understand by looking at what has appeared in the web browser.
</div>
</body>
</html>
The above code will appear like below in web browser:
That's some tags and attributes on html as example. Hope will help you to learn html language from basic. You can found more html tutorial at this site by type the keyword that will you search at the search box on the right at this site.
Download Sample Code
Posts
