i assume that you have a software(notepad++) and all p10 resource to begin with
lets start with the basics , MANY html code(or what we call as "ELEMENTS") have two parts , first is "opening" and the second is "closing" . basically what you have "opened" must be "closed" , because it is not an automatic close door like those in RP entrance or 3rd floor canteen .
you might wondered hey i didnt close the code yet it displayed in my firefox / opera nicely =DDD . ok in this case the browser correct the mistakes for you , but Internet Explorer might not show your designed web page properly . so keep in mind on that
example on opening :
<u> or <b> or <p>example on closing :
</u> or </b> or </p>
the basics are over! lets start with the real thing =D (yeah , yeah , this sucks more than it looks )
to start coding html , you need to tell the computer that THIS is an html file so when the computer reads your code it will said "oh ok this is HTML file and load it up"
type < html > and then < /html > on the 3rd line leaving a blank space in the middle , you will be filling up the empty space with your codes ( LOTS OF IT )
html have head and body part, metaphorically it is almost the same as human except you can modify the contents of head and body while humans not
<head> contains codes that will not be shown up , such as title , layout etc , example :
<href="WebsiteStyle.css" rel="stylesheet" type="text/css"> <title>HOME</title>
<body> contacts codes that if you put it will show up on the blog , example :
<img src="Website Resources\TopBanner.jpg"/> </br>
in the next part i will explain some common codes ( elements ) used in HTML.
TITLE
<title>name of title</title> usage of title is to display the name of your webpage
inside the circles are title of your webpage , the reason of using title is that to get visitor / readers to know they are in the right place / website . if there is no title the webpage will simply show UNTITLED which is not quite good for user friendliness.
LINK
<a href="~zzz~">name of link</a> replace ~zzz~ with a website address such as http://www.google.com
this element is called a LINK , the function is of course to link to a certain website when you click it , example
this link goes to google
remember to put the complete domain/website name (http:// include) inside the href
IMAGE
<img src="xxxx"/> replace the xxxx with your image source but leave the " " mark intact
to put image on your webpage , you can have internal ( inside your computer ) and external (outside your computer such as image from a certain website ) source
examples of internal source image :
<img src="Website Resources\geisha1.jpg"/>
note that for internal source , image must be in the same folder as the HTML file OR in the sub folder of the HTML file . in this case my image source is in the subfolder of the location of HTML file
examples of external source image :
<img src="http://www.w3schools.com/tags/angry.gif"/>
most browser supports many types of images such as JPEG , JPG , GIF , SVG , PNG etc
the element : <img src="xxxx"/> actually can be further modified.
such as link to specific website when clicked , photo tagging , changing the size of the photo
lets start with this "smiley"
i use external link for this one : http://www.w3schools.com/tags/angry.gif
ADDITIONAL ATTRIBUTES
1.alternate text
sometimes , a photo might failed to load when you open certain website , so in this case alternate text is needed to inform the reader what kind of image is it
<img src="xxxx" alt="tagx"/> replace tagx with any word
2.resizing photos
there are two attributes , height and width that is modifiable
to change the size simply height="size" or width="size" , also it is possible to alter both , example :
| height | <img src="http://www.w3schools.com/tags/angry.gif" height="size"/> |
| width | <img src="http://www.w3schools.com/tags/angry.gif" width="size"/> |
| both | <img src="http://www.w3schools.com/tags/angry.gif" height="size" width="size"/> |
note that your can enter the SIZE as exact value such as 100(means 100 pixels) or 100% (percentage of the original image size )
remember to put src first , then continue to add the attributes , it doesnt work other way around
3.image links(clickable image that links to certain website)
this method is quite common in website since people prefer to click on images rather than , say "hey click here!" (useful when you need to attract readers to click the link) . below is the google image that will link to http://www.google.com
so..how does it work? the steps are quite simple all you need is to combine image with link element
| IMAGE LINK | <img src="http://iduniversity.files.wordpress.com/2009/08/google.jpg"/> |
| WEBSITE LINK | <a href="http://www.google.com">leave this space blank</a> |
| COMBINE | insert image into middle of website link , image attributes such as resize also works |
<a href="http://www.google.com"><img src="http://iduniversity.files.wordpress.com/2009/08/google.jpg"/></a> |
CONTINUE TO PART II
This comment has been removed by the author.
ReplyDeletecheck out my blogger David, http://o00macbuntu00o.blogspot.com/
ReplyDelete