Selasa, 20 Juli 2010

HOW TO MAKE A SIMPLE WEBSITE LEARN TO MAKE A WEBSITE

ICT materials XII SMANSA_JOE
MATERIALS: HOW TO MAKE A SIMPLE WEBSITE
LEARN TO MAKE A WEBSITE
The increasing number of netters (internet users) in the entire world, including in Indonesia,
the more people who wish to have his own homepage or website. This is reasonable considering
benefits that we can get to have their own website. Have an email address, right now
is no longer something special. But have their own website still possible for most people
is a coveted thing. To this end we try to compile this handy tutorial that
can be learned and practiced by the netters who wish to become webmasters (website manager).
Hopefully with the ability to create a website, we are able to participate and disseminate knowledge
information that would benefit all mankind, both in this world nor in the Hereafter.
How can display their own website on the internet? There are several stages and steps
we have to go through to create a website that really exist on the internet. This means that from the website
terms of appearance is not "pathetic", in terms of the content is not "arbitrary" and in terms of visitors enough
"Glance". To create a website we first need to learn HTML language is a "language
program "that allows us to create web pages that can be displayed in the browser (Internet
Explorer, Netscape, Opera, etc.). Once we master the basics of HTML, then we try to make
plan and design of website design and content that we wish to make. Then we design
pour in the form of web pages that are integrated. Once completed, or "leads to complete", we
must register it to the web hosting to our website "installed" and can be accessed on the internet. Finally,
which is also equally important is how to promote your website so that recognized and
visited by the netters.
Well, now we start from the first step is to learn the HTML language.
LEARNING HTML
Today, almost all Web documents created with HTML (Hypertext Mark-up Language).
Although you could create a web page (web pages) without the slightest understanding of HTML, namely by
manifold using a WYSIWYG HTML editor like Microsoft FrontPage, Adobe PageMill, or
Netscape Composer, but it is strongly recommended and almost required, so that you understand the HTML language.
Mainly so that you can take advantage of the various browsers and considering a number of facilities
inherent weaknesses in the wysiwyg editor as above. For that first step for your
aspires to have his own website is to learn HTML.
HTML (Hypertext Markup Language) is a programming language used to write format
documents that can be used in the Web. With HTML, ASCII text (*. txt files) can be polished (in-markup)
with certain codes, called tags to HTML documents (files *. htm or *. html).
Therefore, to create an HTML document, you can use any ordinary text editor program,
starting from Notepad to MS Word. For convenience, we use the Notepad program. Open program
Notepad. If you do not know how, click Start> Programs> Accessories and then Notepad. Now follow
carefully the following exercises one after another.
HTML CODE RECOGNITION
In your Notepad, write it like this:


Each line above is called a tag. Tags are codes used to mark-up (polish) text
ASCII into the HTML file. Each tag flanked with pointy brackets. There is an opening tag
And there is a closing tag is which are marked with a slash (slash) in front
early writings. Tag the above gives faidah that will be written between the two tags are
contents of an HTML document. You need to know that html tags can be written in uppercase or
Only for students smansa_Joe / labkom / Nov 2007.
ICT materials XII SMANSA_JOE
lowercase letters. That is, writing or or same results. However it should always
Remember that writing the wrong tags although only one character will affect the document
HTML you may even result in your HTML document can not be displayed in the browser.
Now we'll move on to the next tag. Add tags like the following:




The contents of the HTML document is actually written between tags . Try to write:


This paper will appear in the browser.


Now save this file by clicking the File menu then Save As. In the dialog box that appears,
first click the little arrows at the right end of Save as type box and then select All Files (*.*).
After that, fill in the File name box with the name of the file you want eg: latih1.htm. Do not forget
additional extension. htm behind the name of the file! Finally, click the Save button then the file will be saved
as a web document. Now, close your Notepad program. Now open another browser program
(Internet Explorer) other than the browser window that you read this. Click the File menu and Open. In the dialog box
that appears, click the Browse button. Locate and select the file and click Open latih1.htm. Well, look at the work
you first! This paper will appear in the browser
Does BODY tag bookmarks mere function of the body or contents of web documents? No, in this BODY tag
we can insert a variety of attributes that will influence the format or page views
web as a whole. On this occasion we take the example of how to change the background color
background and color text from web pages by adding attributes to the BODY tag.
Now look at your browser's back displays the files latih1 earlier. Click the View menu and then
Source. With this instruction will emerge Notepad program in which appeared the source code or
HTML code that you created earlier. For example we are going to make this into a web page latih1
colored yellow background with red writing. For that, we need to add attributes
Bgcolor and TEXT into the body tag as follows:


This paper will appear in the browser.


Only for students smansa_Joe / labkom / Nov 2007.
ICT materials XII SMANSA_JOE
Keep back this file (click File then Save). To see how it works, go back to the program
browser that displays web pages latih1 earlier. Click the View menu and then click the Refresh or Refresh button
on the toolbar or you can also press the F5 key on your keyboard. Thus, the browser will
redial latih1 file which has now been amended. So will behold the result: Writing
This will appear in the browser
Please note that the determination of color in HTML can with color names (in English) and
can also be color coded. Color code is written in hex format # rrggbb. Here are 16 names
its color code in hex format (please note that writing 0 is the number zero, not letter
O). Black # 000000 blue # 0000FF Olive # 808 000
white # FFFFFF # FF00FF fuchsia green # 008000
red # FF0000 gray # 808080 Teal # 008 080
yellow # FFFF00 navy silver # C0C0C0 # 000 080
lime # 00FF00 maroon # purple # 800 080 800 000
aqua # 00FFFF
Thus, the HTML code for the example above could be written as follows:


This paper will appear in the browser.


Using a hex color code, color variations can be made more. Click here for
see a list of other color codes!
This is a quick function BODY tag. Now open your source code re-coded aliases HTML code.
Still remember, do not you do that? (Click the View menu and then Source). Add the following tags:





This paper will appear in the browser.


Here we see that adding tags and tag . HEAD tag serves to flanking
variety of functions and information that are pleasing to the relevant web pages. In practice
this time, we enter a TITLE tag between the HEAD tags. As the name implies, serves to tag TITLE
flanking the sentence that became the title of the webpage. Now let us write the title of the page
this web:
Only for students smansa_Joe / labkom / Nov 2007.
ICT materials XII SMANSA_JOE


Work First


This paper will appear in the browser.


Save this file again by clicking on File then Save. Now we'll see how the changes
in the browser. Refresh do it again as above. Then you will see on the top line (which
called the Title Bar) from browsers will display a title or titles from your web pages are:
My First Work. Alhamdulillah, we finished the first exercise.
Tampering LETTERS
In this second exercise, we will learn some tags which are relatively easy to remember. These tags
function to change the font type that is bold (bold), creating italics (italic) or giving
underscore (underline). Open the Notepad program again and then write something like this:


Types Text


There are three types of writing most frequently used in writing of any documents. The third type
The writing is bold, italics and underlined text. Two types of letters can also be combined
eg bold and italic, and underlined bold or italics and underlined.
Even the three types of writing could also at the same time merge into one form of bold, italic
and underlined.


Save the file. Do not forget to follow the steps I save an HTML file which we have
learned in the first exercise first. Once the file is saved, open the file with Internet programs
Explorer. Notice that all the writings that the document is still uniform. Now, we will
make a few changes in some words and sentences so that there be such
this: There are three types of writing most frequently used in writing of any documents. The third type
The writing is bold, underlined text miringdan writings. Two types of letters can also be combined
eg bold and italic, and underlined bold or italics and underlined.
Even the three types of writing could also at the same time merge into one form of bold, italic
and underlined.
Only for students smansa_Joe / labkom / Nov 2007.
ICT materials XII SMANSA_JOE
How? Open source code of this document (press F5), then add tags
follows. These tags are for bold (bold) text,

to angle (italic) text

and to underline (underline) the inscription:


Types Text


There are three types of writing most frequently used in writing of any documents. The third type
The paper is thick , writing

italics and written underlined .

It can also
two types of writing such letters combined bold and italic

, paper thickness and

Underlined or writing

italics and underlined .

Even can also third
type the text as well merge into one form of writing

bold, italic and underlined

below .


After you add all those tags, save (Save) source code files and then do it
Refresh the web documents that appear on your browser program. Look at the changes!
If anything goes wrong, try to pay attention to the writing of your tags, ranging from the opening tag
Up There is nothing wrong not to write even a single character. For example: if tag
you write then the browser will not display anything in writing your document.
If you do not believe it, try to write source code that is wrong like that, keep (save) and then refresh
your document and see the results!
For more mempermantap skills you get from this second exercise, it helps you
try to make the following HTML document. Make a document with the title (title): The Establishment Types
The text, whose contents are written as follows:
Because HTML files are actually ordinary ASCII files, then you can use the editors
simple text, such as WordStar (WAS), Notepad, MS Write, and others. Text editors can be
Your guide to learn HTML codes inside and out. But maybe your little
frustration of having to type all the HTML code line by line that the development will
become very complicated. However, using a text editor to create web pages is the way
best to really understand about the structure of the HTML file.
If you've been saving it, open it and see the results in the browser program.
HEADS OR TEXT Header
Headers are specially sized letters used to write a chapter or sub chapter headings. There is
six levels of headers from H1 to H6. Header H1 is the largest and H6 is the header
the smallest. Try to write in your Notepad as follows:

Header level 1

Header level 2

Header level 3

Header level 4
Only for students smansa_Joe / labkom / Nov 2007.
ICT materials XII SMANSA_JOE

Header level 5
Header level 6

Keep in HTML file format and then open the browser. The results will appear as
follows: Header level 1
Header level 2
Header level 3
Header level 4
Header level 5
Header level 6
CLASSIFIED AND PARAGRAPH
Now we will learn how to create lines and paragraphs. Usually, to make
new line, we do by pressing the Enter key. What about an HTML document? Try
write the following into Notepad:
The first line
Second row
The third line

Save it as an HTML file and then open it in the browser. How did it go? But the result is
just like this: first line second line third line.
In conclusion, the emphasis of the Enter key does not generate a line in the browser view. Thus
nature writing HTML documents. So, how do I create a line? Use tags
.
Tag this
has no closing tag. Open source code and edit the HTML file was as follows:

The first line
The second line

The third line


Save and then see the results with a refresh on the browser. The result is more or less like this:
The first line
Second row
The third line
Create lines, it's easy? Tags
may also be used to make the line
empty, meaning that the row does not have any sentence. Once again the source code Editlah latih4.htm
be like this:


First line second line blank, and this
third row and fourth row

Only for students smansa_Joe / labkom / Nov 2007.
ICT materials XII SMANSA_JOE
empty fifth, and sixth lines of this

Save and refresh again then it will be like this:
The first line
The second line is empty, and this is the third line
The fourth and fifth row is empty, and this is the sixth row
Here we see that the tags are written
twice will produce two lines, and so on.
After clever enough to make a line, now we will learn to make paragraphs. Consider the example of writing in
below:

First paragraph second paragraph

third paragraph


When viewed in a browser, the result will be like this:
First paragraph
Second paragraph
Third paragraph
With reference to the examples above use

tag, try to create an HTML file using

Notepad so as to produce an HTML document that will appear in the browser like this:
World Wide Web (WWW) is a system whereby the information (text, images, sounds, etc.)
presented in the form of hypertext and can be accessed by a WWW exhibit (which is often called
as a browser).
Information on the WWW in general, are written in HTML (Hypertext Markup Language). In addition,
Other information can be images (GIF, JPG, PNG), sound (in AU format, WAV), and
other multimedia objects (such as MIDI, Shockwave, Quicktime Movie, 3D World).
If you still remember the previous lessons, so without difficulty, which means you'll be able to
make the source code to generate the writings above. Source code approximately as follows:

World Wide Web (WWW) is a system whereby the information (text, images, sounds, and
etc.) presented in the form of hypertext

and can be accessed by a WWW exhibit

(Often referred to as browser ).

Information on the WWW in general, are written in HTML (Hypertext Markup Language).

Bes

Tidak ada komentar:

Posting Komentar