DIY NEW MEDIA: Creating a WWW Presence
2. What is a webpage made of: HTML 101
See page 1 for links to HTML editors and tutorials
Hyper
Text
Markup
Language – a simple system of “tags” that describe what your page looks like using text,
AND Cascading Style Sheets – a series of commands that stylize the tags.
Basic Tags: - sample of bare bones page as below [what it looks like in a browser]
<html>
<head>
<title>WEBPAGE NAME</title>
</head>
<body>
<H1>HEADING</H1>
<P>ALL THE TEXT YOU WANT</P>
</body>
</html>
- Tags tell the browser what to do, and you tell the tags what to do
- Open <tag> and close </tag> your tags - no browser can guess
- Use online resources for tag function reference - you'll need it!
- Save the document as .html OR .htm to make it readable by a browser!
Intermediate Tags:
- Arranging: <div></div> or <table></table>;
- Attributes: <align> <border> etc.
- Linking images: <img src="mypicture.jpg">; sites <a href=”http://www.google.com”>Google</a>
- DIV and TABLE: Arrange how things look on your page and organize your information!
- Attributes: border=”0” align=”left” etc.
- External links <a href=”"http://www.google.com”>Google</a> A standard external link
- IMG SRC points the browser to a picture.
- use 72 dpi [small]
- linking – know where your file is
Advanced Tags:
- Internal Linking <a href>
- The tag points to browser to a page, what's in the tags describes it
- External: <a href=”http://www.sample.com”>Sample Site</a>
- Internal:<a href=”art.html”>Click here for my art</a>
- NOTE: Paths and Folder Structure
- External links use the "http://..." format BUT internal links use your sites internal folder stucture hierarchy. [more]
- Embedding:
- <embed></embed> for mp3’s. video
- CSS/Styling:
- The new standard in styling & positioning.
- Good if you have many pages or like to make changes and to keep things tidy
- For one page it can go in the <head> tags: <style> {text: Arial;} </style>
- Applied to a whole site you'd use this to link to a text document you save with a .css extention:
<link href="sample.css" rel="stylesheet" type="text/css">
- that document then has all the {text: Arial;} styling commands.
- Extras:
- Free Javascript / DHTML [to make nice things like the galleries on this site]:
*Dynamic Drive - free, original DHTML and Javascripts