Sie sind auf Seite 1von 10

TASK REPORT OF ENGLISH

MAKE A SIMPLE WEBSITE

Arranged By: NAME : NUR TAZKIA AMALIA HAMDIE COMPETENCY PROGRAM : MULTIMEDIA GRADE : XII

VOCATIONAL HIGH SCHOOL 1 BANJARMASIN 2011/2012


PREFACE
Praise thank you to Allah. SWT. Because writer guide and blessing an finish this report. Thanks to partys assisting in this report making,among :

1. 2. 3.

Mr. Hasan as teacher of English at one below the final taskmaster of making this report. Parent cheering on and the good support of morale and also materiil. Friend which ever cheer on and its aid.

Writter realize that this report a long away off from perfection, in consequence correct and the suggestion which in character develop, build, usefulof writer will expect to good and its perfecion this report.

Banjarmasin, 6 Januari 2012

Nur Tazkia Amalia Hamdie

TABLE OF CONTENT
Preface Table of Content.

Web Design & Web Designer.... Step by Step to Make a Simple Website with Notepad.. Conclusion.

Web Design
Web designing (web design) is a general term used to encompass how the contents of web content is displayed, (usually hypertext or hypermedia) that is sent to end users through the World Wide Web, using a web browser or web-based software. The purpose of web design is to create a website, a set of online content including

documents and applications residing on a web server / servers. A website can be a bunch of text, images, sounds and other content, and can be interactive or static. As a whole, the process of web design can include conceptualization, planning, producing, post-production, research, advertising. The site itself can be divided up into pages. The site is navigated by using hyperlinks, which are commonly blue and underlined but can be made to look like anything the designer wishes. Images can also be hyperlinks.

Web Designer
Web designer is a person who has the expertise to create a presentation content (usually hypertext or hypermedia) that is sent to end-users through the World Wide Web, using a Web browser or Web-enabled software like Internet television, Microblogging, RSS, and so on. With growing specialization within communication design and information technology fields, there is a strong tendency to draw a clear line between web design specifically for web pages and web development as a whole from any web-based services.

Make a Simple Website with Notepad


We also can create your own website like that with the help of software existing web developers such as Microsoft FrontPage or Macromedia Dreamweaver. Even if the program is not installed on your computer, provided there is a program Notepad, Internet Explorer, or similar web browser you can still make your personal website. In addition to PHP, the language commonly used to create this web page one of which is the Hyper Text Mark-up Language (HTML). HTML is very easy for we learn when compared to PHP. Therefore, to exercise this time I explained about creating a simple personal website using HTML. Commands used in HTML are called tags. Tags is used to create a web page we can see by clicking the View tab> Source in the web browser you use, which in this tutorial I use the web Internet Explorer browser. For other web browsers such as Mozilla Firefox, source web pages you can see by clicking the View tab> Page Source (Ctrl+U). Here is I explain the steps to create a simple website made your own. Keep up with ya!

1. Click Start> All Programs> Accessories> Notepad to open the program Notepad.

2. Notepad program display as shown below. In this Notepad we will be typing HTML tags to create a web page.

3. A web page consists of two parts, namely the head and body. The head gives the name of our website, while the body contains core of a web page. The head and the body will later be forming a unified web page we will create. Write down tag following tag in Notepad to make the head and body of the web.

<html> <head> <title> My Website </title> </head> <body> Welcome to my website </body> </html> <html>, <head>, <title>, <body>, </ html>, </ head>, </ title> </ body> are some examples of tags that are used to build a page the website. In the example above shows that each tag has a pair is added with a slash (/). Keep in mind that not all tags have a partner like the example above, and which has no tags couples will be discussed in the next number. Sentences or words that we write between the tags <title> </title> a title or a description of our website. While the sentences in between <body> </ body> is the content of our website. If you have typed click File> Save / Save As, and save the file name index.html. This file will have the Internet Explorer icon or another icon you web browser use in your computer. Click this icon to view the page website that you created.

Seen that at the top of the pages in the website there is a word you said write between the tags <title> </ title>, while in the body there website the text you write between the tags <body> </ body>.

4. Background color of your website can be changed by adding the word "Bgcolor = color" after the body tag. Suppose you want to give color to black your website then you just add the following code: <body bgcolor = black> If you have add it to your typing in Notepad and then saved, and then press the refresh button in your web browser. Your website display will be changed to as below. If you want to convert it to any other color you just change the color of a typed after bgcolor, eg: red, green, blue, or any other color.

5. You can also make a picture as a background to your website by adding the code: "background = image file" after the body tag. Suppose you want to make an image file theone.jpg as background of your pages then you just add the following code: <body background = theone.jpg>. Save and click refresh.. 6. As well as your page background, text in a website can also be change the color. We can also change writing type and size. For that we need to insert a tag <font> </ font> in <body> </ body>. To change the text color we add the code "color" after the font, for change the type of writing we add the code "face", and to change size of the paper we add the code "size". Especially for the size we can change to resize from -7 to +7. We can changing one, two, or three above the influence of tag tag

simultaneously separated by a space. Suppose we write the code in Notepad: <html> <head> <title> My Website </title> </head> <body bgcolor = black> <font color = white face = verdana size = +3 align = center> Welcome to my website </font> </body> </html> The above code means that an impact-type Verdana white paper and size +3. Save and refresh your browser to see its effect. You can also add moving text effects by inserting description <marquee> </marquee> before the code <font> </font>. To adjust the position of writing we can insert the tag <position> </position> in between writing that we write. The position we are content with the "left", "center", or "right". Suppose we want to create a position paper to the middle, then we type: <center> Welcome to my website </center>

7. You can insert your photo or image in your website typing the tag <img src =your photo file>. Suppose the file you want enter the name myself.jpg, then the tag you need to write is: <img src = myself.jpg> To give you the distance between the posts prior to this picture the you need to add a tag <br>.

<font color = white face = verdana size = +3 align = center> Welcome to my website <br> <img src = myself.jpg> </font> The image size can be set with add the code "height = size", and / or "width = size". Suppose you want your image 100 pixels high have you lived add "height = 100" after the code image file name that you insert. 8. Next, you add menus within your website. Menu existing standards in a simple web usually is a profile, photo gallery, and the link. For that we need to add a new page that has a file name profile.html, gallery.html, and link.html. To create this pages, you can repeat the steps described earlier. To connecting the main page of the website with additional pages of this page, we need to type the tag <a href = profil.html> and closed with </a> when we want to connect with profile pages, as well as for web other pages. The following code will display the relationships between web page lined up. <a href = profil.html> Profile </a> <a href = galeri.html> Gallery </a> <a href =link.html> Link </a> Click Save and refresh the web page that is displayed as follows. When the link is correct then you make the mouse cursor will change to if you hold your hand to the links that you create.

9. For the profile page, gallery, and links you can add whatever you like as the previous steps. Especially for the page link, you can fill it with links to the Facebook, Twitter, Google, and so on. The link was described above when we click the new page will be opened in one the same browser window. If we want to continue to enjoy the pages of the our website while we also want to open Facebook for example, then we need add the tag "target =" _blank "after the address of Facebook. For example: <a href = target = "_blank"> http://www.facebook.com Facebook </a>

If you would like Facebook was opened on the same web page then you lived just remove the "target =" _blank "it. 10. If you want to link to your profile page is an image profile.jpg for example, then you need to insert an image file in the tag <a href = profile.html></a>. So that we may write as follows: <a href = profile.html> <img src = profile.jpg> </a> If true then the mouse cursor will change to a hand when brought near to the profil.jpg picture. Similarly, if a link to Facebook or Twitter also in the form of images, then you just add a tag <img src = the picture> between the tags <a href = link> </a>.

CONCLUSION
I think this tutorial is quite as early to start making a your personal website . Last message, my friend once told me is you will not be good at martial arts if you just look at the arts only and does not attempt to practice. Which I discuss here only HTML only, and the HTML language is still much easier than the PHP language. Because of this, frequently often to practice and do not easily feel satisfied when you've have a personal website. Happy at work! :)

Das könnte Ihnen auch gefallen