Skip to Content

Design Tutorials
- Flash
- Web
- Maya
- Unity
- 3DS Max
- Photoshop
- Illustrator
- Design
- Design Research
- SolidWorks
- Other
Graduate Portfolios
- Portfolio Admin Login
Our Code
GradEx'09
Podcasts
EcoDesign
Contact Us

> Design
> Online Resources

Intro to HTML - Text tutorial

Author: Bill Trikojus


	Html tags

	Attributes

	Research


	Html tags

	Here's a quick tute to get you started with HTML (Hyper Text Mark-up Language). Every website you've ever been to is made up with HTML code - it may contain Flash animations, quicktime movies, javascript or server side scripts such as PHP, but at the end of the day web designers still rely on the HTML standard to display their sites. HTML is made up of tags that tell the browser how to display the content within the open and close tags. For example <b>This</b> is just a test. would look like this when the browser displayed it This is just a test. Nearly all HTML tags have a closing tag which is the same as the opening tag but with a / added to it. eg <i> and </i> - anything in between the tags is affected (in this case the text would be italicised). The base tags of any html look like so <html> <head> <title>This is where the title goes</title> </head> <body> This is where the visible content goes </body> </html> As you can see, all content that we want to be displayed in the browser should be placed within the <body> </body> tags. OK time to make your first HTML website. Open up Simpletext, Microsoft Word or any app capable of making a simple text file. Paste the red code above into a blank text file and save it as 'mypage.html' into a folder named 'my_site'. Locate the saved file and drag it into a browser window. You should see the text in between the body tags displayed in the browser window and the text in between the title tags displayed at the top of the browser window. Back in the text editor, change the title and the content text, save the file and refresh the browser window.


	Attributes

	OK lets try something a little more interesting. Replace the code in between the body tags with <h1>This is my awesome page</h1> <p>Here is some <font color='#FF0000'>red text</font><br> Here is a <a href='http://www.swin.edu.au' target='_blank'>link</a><br> and here is an image</p> <img src='test.jpg'> Save the html file and then open Photoshop and create a small image (say 100 x 100 pixels). Draw a circle or something and save the image as test.jpg into the my_site folder. Go back to browser, hit refresh and should see something like this This is my awesome page Here is some red text Here is a link and here is an image OK so as you can see many HTML tags also have whats called 'attributes'. For example, the font tag has attributes such as size and color. You can set as many attributes as you want within the one tag (only one closing tag is required). You can also see that the 'a' tag is used to create links (and the web wouldn't be much use without links...). The 'a' tag also has attributes such as 'href' (the URL you want the user to go to when they click on the link) and 'target' (the window that you want the new URL to open in - _blank opens a new window). And lastly, the 'img' tag is used to display images in the browser window. Again, the img tag has attributes such as src (the name of the source file), width, height etc. As you can, not all attributes have to be set when you use a tag (we just told the browser what the source file was and let it display the image at its normal size).


	Research

	One of the great ways of learning HTML is by surfing the web and when you find a site you like select 'View Source' from the browser's View menu. This will show you all the HTML code that created the site and will help you understand how it was constructed and what the different tags do. OK there are obviously a lot of HTML tags that we haven't covered yet and your task for this week is to research some of these and to lay them out in an organised manner (ie an HTML table) - see the brief for more details. Some useful links WebMonkey Willcam

Share

Like this? Click a link below to share it...

del.icio.us

digg

Furl

Reddit

YahooMyWeb

Subscribe and Download

Subscribe to the Swinburne Faculty of Design Podcasts

Post a comment

Garbage posts and SPAM will be deleted.