ajnl Posted July 31, 2012 Posted July 31, 2012 (edited) In continuous of the "First Steps Into HTML..." tutorials: Last tutorial First Steps into HTML 1.5, I talked about what html is, different coding programs, basic set up of a website (in html), header tags, and how to make a basic table. This tutorial, I will show some other html tags you can use, how to make hyperlinks, and display images. =================================== HTML tags Starting with the basic layout: <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <p>This is the <b>first</b> paragraph!</p> <hr /> <p>Here is the <b>second</b> paragraph, <br /> with a break in the middle</p> </body> </html> The <b> tag is used to make things bold, don't forget to use the close tag as well: </b>. The <hr /> tag is used to make the horizontal line, you can see this in the screenshot above. This tag does not need a closing tag, because it "closes" itself. The <br /> tag is used as a break. Like when you press enter in a word document. This is another example of a self closing tag. =================================== Adding hyperlinks and images <!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <p>This is the <b>first</b> paragraph!</p> <hr /> <p>Here is the <b>second</b> paragraph, <br /> with a break in the middle</p> <p>This is the third paragraph, which has a <a href="fearless-assassins.com">link</a> in it!</p> <img scr="f16.jpg" /> </body> </html> Using the <a href="#"> tag, it is possible to make links. The name of the hyperlink goes in between the opening (<a>) and closing (</a>) tags. It is also possible to put an image in between the <a></a> tags, this way when someone clicks on the image, they are set to that website or page. <a href="#"><img src="#" /></a> The <img src="#" /> tag is also a self close tag, so there is no </img> needed. The url of the image depends on the situation. In this case since the .html file and the .jpg file are in the same folder, all that is needed is the name of the image. If the image was inside a folder called pictures, then it would look like this: <img src="pictures/f16.jpg" /> If the html file is inside a folder and the image is located in another folder, this follow would have to be used: <img src="../picture/f16.jpg" /> The formats supported when using the image tag include: jpg, gif, and png. BMP will usually work, but it is best to stick with the three mentioned above. It is also possible to re-size the image using html: <img src="f16.jpg" width="500px" /> <img src="f16.jpg" width="25%" /> px stands for pixels. So a width of 500px, will make the picture the width of 500 pixels. When using the width to change the size, automatically the height also changes. Keeping the ratio between height and width the same. It is possible to change the height as well. <img src="f16.jpg" width="500px" height="500px" /> As you can see from the screenshot above, manually changing the height as well can make the picture look weird. =================================== Recap <br />, <hr />, and <b></b> tags "self closing" tags Making hyperlinks, using the <a href="#"></a> tags Inserting images into your website and sizing them Reminder As always, REMEMBER to close tags Some tags close themselves: <img src="#" />, <br />, and <hr /> =================================== For those of you who know a bit of BBCode, it is very similar to HTML. Edited March 30, 2018 by Fearless Staff Quote
ajnl Posted August 1, 2012 Author Posted August 1, 2012 Have you also a topic for Gimp? Here are some gimp and other photo editing tutorials. I personally do not have any gimp (or photo editing) tutorials. Please keep questions relative to the tutorial (in this case html/coding). Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.