Now let us try to create a complete html page that consists of several headings and paragraph. for the contents of paragraph we use the dummy content "lorem ipsum" that is usually used by web developers.
as usual we open notepad
then type the html code below ( or you can copy paste the code ) :
<html>
<head>
<title>basic appearance of web pages</title>
</head>
<body>
<h1>This heading 1</h1>
<p>Paragraph 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Paragraph 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Paragraph 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Paragraph 5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Paragraph 6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
save with the name index.html (select save as and for save as type option select all files)
double-click the new index.html file created earlier.
we can see the display html pages. how the heading is displayed and how the paragraph is displayed.
Let's try it with different kinds of headings
there are 6 types of headings that can be used in html code, heading 1 to 6 with a tag like this:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
now we try to edit the index.html file by adding heading 2 before paragraph 2, heading 3 before paragraph 3, heading 4 before paragraph 4, heading 5 before paragraph 5, heading 6 before paragraph 6. So that the code be like this :
<html>
<head>
<title>basic appearance of web pages</title>
</head>
<body>
<h1>This heading 1</h1>
<p>Paragraph 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>This heading 2</h2>
<p>Paragraph 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h3>This heading 3</h3>
<p>Paragraph 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h4>This heading 4</h4>
<p>Paragraph 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h5>This heading 5</h5>
<p>Paragraph 5. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h6>This heading 6</h6>
<p>Paragraph 6. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
save the index.html file and refresh your browser by pressing F5 or refresh button. See the difference appearance.
This is the basic appearance of web pages that usually consist of a collection of heading and paragraph plus image as a component of beauty.
Monday, March 1, 2010
Sunday, February 28, 2010
Basic HTML Series 1
HTML stands for Hyper Text Markup Language and is the language of the web. Like humans, the browser will also need a standardization of language in order to understand and display the web interface as desired.
Html itself is a collection of tags. You can control how your page looks by using HTML elements mixed in with your text. An element is usually made up of two tags, a start tag and an end tag.
<h1>This is Heading 1</h1>
html files usually end with the extention. html or. htm, you are free to use, html or. htm html when saving your file.
You only need a notepad or a plain text editor to create a html file. I do not recommend you to use html editor like frontpage or Dreamweaver when learning html. with the intention that you fully understand the structure of a web html.
Why is that? because the majority of cases found in the beginners usually is when designing their web pages, they have difficulty when setting up the layout, because they do not know the markup tags to organize.
Most web applications offer the ease of use like microsoft word. This is why beginners often forget and do not want to know about html code, because just click and drag to place the content.
Let's look at the basic structure of an html page
the basic structure of an html page at least has the structure tags like this:
<html>
<head>
<title>This is a basic structure of a html page</title>
</head>
<body>
<h1>This is my heading</h1>
<p>This is my content</p>
</body>
</html>
Let us try to practice
Html itself is a collection of tags. You can control how your page looks by using HTML elements mixed in with your text. An element is usually made up of two tags, a start tag and an end tag.
<h1>This is Heading 1</h1>
html files usually end with the extention. html or. htm, you are free to use, html or. htm html when saving your file.
You only need a notepad or a plain text editor to create a html file. I do not recommend you to use html editor like frontpage or Dreamweaver when learning html. with the intention that you fully understand the structure of a web html.
Why is that? because the majority of cases found in the beginners usually is when designing their web pages, they have difficulty when setting up the layout, because they do not know the markup tags to organize.
Most web applications offer the ease of use like microsoft word. This is why beginners often forget and do not want to know about html code, because just click and drag to place the content.
Let's look at the basic structure of an html page
the basic structure of an html page at least has the structure tags like this:
<html>
<head>
<title>This is a basic structure of a html page</title>
</head>
<body>
<h1>This is my heading</h1>
<p>This is my content</p>
</body>
</html>
Let us try to practice
- open notepad
- write the basic structure code above
- save with the name index.html ( remember use File Save As and for Save As Type choose All Files)
- double-click the new index.html file created earlier
Saturday, February 27, 2010
learning by doing
create a website very easy, I'll try to explain each step by following the easiest way when I study it.
many beginners become confused when creating websites. because they do not know where to begin. Many are finally using application programs such as frontpage, webpage maker, Dreamweaver and many others.
but because they did not know basic html, so they will have trouble again when developing their own websites to the next step.
Actually, the key is understanding the basic structure of html code. with the understanding of html code structure, guaranteed they will not have difficulty when developing or modifying their own website.
the problem is you want to learn or not. because to learn html is not as complicated as imagined, is very easy.
see you at next post
many beginners become confused when creating websites. because they do not know where to begin. Many are finally using application programs such as frontpage, webpage maker, Dreamweaver and many others.
but because they did not know basic html, so they will have trouble again when developing their own websites to the next step.
Actually, the key is understanding the basic structure of html code. with the understanding of html code structure, guaranteed they will not have difficulty when developing or modifying their own website.
the problem is you want to learn or not. because to learn html is not as complicated as imagined, is very easy.
see you at next post
Subscribe to:
Posts (Atom)
