|
no one likes spammers
pyro1065@hotmail.com
|
|
unit 6 - html
html is a tricky thing. thankfully for you, i'm gonna put almost everything i know about html here. tags and such. that way maybe you won't spend half of your time yelling at the computer when you're learning html.
remember, every tag that you start, you have to end.
tags
<html>: html tag. starts every html document.
<head>: head tag. goes under html tag, contains the title (and style tags if you use them).
<!-- comments here -->: comment tag. lets you put comments that will only be visible when you view the html of a page.
<title>: title tag. displays a title (or just text) in the menu bar.
<body>: body tag. anything that you want to show up in your page goes in the body.
<body bgcolor="blue">: background color tag (goes inside body tag). sets the background color for the body (here, the background would be blue).
<body text="gray">: text color tag (goes inside body tag). sets the text color for the body (which will be the same throughout, unless you change it in the font color tag. here, text color would be grey).
<font>: font tag. use it if you want to change your font attributes (face, size, color) to anything other than the default.
<font face="Arial">: face tag (goes inside font tag). use it if you want to change the font face (name) to anything other than the default (here, the text would be Arial).
<font size="3">: size tag (goes inside font tag). use it if you want to change the font size to anything other than the default (size 3 is usually the default).
<font color="blue">: color tag (goes inside font tag). use it if you want to change the font color from what you specified in the body text tag. or, if you didn't set a text color in the body tag, you can do so here (here, text color would be
blue).
<h1>: heading tag. sets a size (here, 1) for a heading.
<i>: italics tag. italicizes text.
<b>: bold tag. bolds text.
<u>: underline tag. underlines text.
<s>: strikethrough tag. strikes out text.
<sub>: subscript tag. subscripts text.
<sup>: superscript tag. superscripts text.
<center>: center tag. centers text.
<blockquote>: blockquote tag. sets text apart from regular text.
<br>: break tag. works like a character return (enter) would on your keyboard. put two together, and you'll have a double-space in your text (like hitting enter twice).
<p>: paragraph tag. works like a double character return (enter twice, a double-space) would on your keyboard. use wisely with certain css.
<img src="https://pyro1065.tripod.com/flicker.jpg">: image tag. lets you link/display images. address between quotation marks is the address of the image (here, my flickerstick picture).
<img src="https://pyro1065.tripod.com/flicker.jpg" alt="mmm flickerstick">: alternate text tag (goes inside image tag). used as an alternate description if an image doesn't display, but i use it for mouse-over comments on pictures (put your mouse pointer over an image onscreen, and see the comment (here: mouse-over my flickerstick picture, and you'd see the comment "mmm flickerstick")).
<a href="https://pyro1065.tripod.com/">home</a>: hyperlink tag. lets you link to other pages on the internet. address between quotation marks is the address of the site/page you're linking to (here, my homepage), and the text after that (here, the word "home") is the hyperlink text, the text that you click on that takes you to that specified address.
<a href="https://pyro1065.tripod.com/" title="main">home</a>: title tag (goes inside a href tag). used as an alternate description if a link doesn't work (here: "main" when you mouse-over the hyperlink text "home"). actually, i don't know if it's called a "title" tag, or exactly what it's officially supposed to be used for (i'm guessing a description, like the alt in the image tag), but i use it for mouse-over comments on links.
<a href="https://pyro1065.tripod.com/" target="...">home</a>:
target tag (goes inside a href tag). controls where the page you open from a link will be displayed (default (without targeting) is displayed in same window). four values when using unnamed frames:
"_blank": opens the page in a new window.
"_parent": displays the page in the frameset file space where the link originated. used when you're nesting frameset files. in order to use, two (or more) frameset files must be used, you cannot nest a frameset within a frameset in the same file.
"_self": displays the page in the same window/frame where link originated (works as if you hadn't used the target tag at all).
"_top": displays the page in the top frame (the page will fill the entire window).
targeting explained
<marquee direction="left">this, my friends, is a scrolling marquee</marquee>: scrolling marquee tag. i got this piece of code off my friend tim's site. this makes text scroll, in this case right to left, on the screen (here, "this... scrolling marquee" would be the text that's moving).
go here to see these tags used in a page of html.
frames
<frameset ...>: defines the general layout of a web page that uses frames. it creates a "table of documents" in which each rectangle (called a "frame") in the table holds a separate document. in its simplest use, frameset states how many columns and/or rows will be in the "table". you must use either the cols or the rows attributes or both.
these go inside the frameset tag (hence the ...)
cols: how many columns in the frameset
rows: how many rows in the frameset
frameborder: if the frames whould have borders
framespacing: space between the frames
border: space between frames
bordercolor: color of frame borders
<frame src="framea.html" name="main">: goes after frameset tag. defines what files (eg. framea.html) will actually go into the frames. also, name="" sets up what a frame is called so you can target your files to it (when you are using multiple frames)
in order to do frames, you need several different html files. first, all the different files that will go into the frames, and then a file that is just for defining the frames. for example:
<html>
<head>
<title>a basic example of frames</title>
</head>
<frameset rows="25%, 75%">
<frame src="framea.html" name="navbar">
<frame src="frameb.html" name="main">
</frameset>
</html>
this file defines that there will be two rows of frames, the top row being used as a nav bar.
framea.html will be the nav bar file, so it will have all the links to what files will be targeted into the main.
frameb.html will be the main space, the place that the different files linked to in the nav bar will target to. you will need to make a frameb.html (or whatever you want to name it) so that you'll have something that shows up in that first main space, not just a blank space.
in order to target a file to a place that you want it to be, you first have to name the frames in the frame file (eg. "navbar" and "main"). then, in your nav bar file, when you set up your links to the different files you want to target into the "main" frame, you would add target="main" to the end of your link (eg. <a href="coolstuff.html" target="main">).
the same can be done with columns. you can have both rows and columns in a frameset, but i don't know how much content you'd fit in there if you had 4 or more frames.
you can also nest a frameset within another frameset to create a "table within a table". how you'd do it: instead of another file (like the frameb.html), you'd just define another frameset. i haven't tried it yet, but it looks like it would work quite nicely.
want to see some frames? go to the lyrics page or my mini-personal page. they're two different flavors, one with columns and one with rows.
tables
when i have more energy, i might explain tables. but for now, i'm content with just linking to a page that explains tables.
|