Yama Habib's Webpage
How did I program this site?
Html coding is actually very easy. Think of it as a cross between computer programming and using microsoft word...because that's *basically* what it is. Below is the entire code for the main page. To not confuse the browser into thinking I'm actually trying to code the webpage, I replaced all "<"s and ">"s with "["s and "]"s, respectively.
One thing I love about html coding is that it's NOT case-sensitive. Notice the incosistency in my tags (the code in brackets) in terms of upper or lower case.
So, anyways, let's get to the point. First off, all html files must A) have a .htm or .html extension (not .html.txt) and B) start with the [html] tag (remember to replace the ]['s with ><'s). After that, you may want to give your code a header or title, or both. A header [head] is pretty self explanatory. It shows up at the top of your page. A title shows up in the title bar waaaaaay up there^. If you try to combine the tags, you'll end up with a title, but no header. That's because the TITLE tag takes precedence, and doesn't display in the header. You should probably make it a habit of having a header, even if it is empty-ish, like mine, it's good practice in HTML coding.
These are the tags you should probably know to make yourself a decent webpage:
[body]: this initiates the BODY of your page. You can stick additional parameters into this tag to modify the body of your page. In the case of my page, I used BGCOLOR, BACKGROUND, LANG, LINK, and VLINK. LINK and VLINK simply specify the color that I want my hyperlinks to show up as. LANG is (obviously) the language of my page. I didn't *really* need this, but when trying to read foreign pages that don't specify the language, things can get a little difficult. BGCOLOR is used to specify the background color. The default background color (which I oh so conveniently used) is--you guessed it--sky blue!
...(waits for you to realize I was joking) it's white. You don't see it because I have a background image that loops throughout the page. The huge pattern you see is actually just a 58x38px image set to tile throughout the screen. If you so wish, you can also have an image with a set resolution and tell it to not tile or stay fixed. I don't recommend that, though, since the people who view your page will have different screen resolutions.
You've probably noticed the [img] tag by now. You've probably also guessed what it does. Use the [img src = "address.com/picture.ext"] tag format to easily stick an image into your page. *NOTE: Images don't have to be closed with a tag like [/img]
Hyperlinks work like images, only they're a tad more complex. To insert a hyperlink, first use the [a href = "http://www.address.com"] tag to identify where you're trying to link to. The following text will be what the hyperlink actually displays. Finally, use the [/a] tag to stop defining the display text for the hyperlink and to return to the actual site.
Formatting Tags, such as the one i just used to underline the word "Formatting Tags" are used to perform the tasks that you'd use a toolbar in Microsoft Word to do, normally. Some basic formatting tags that I used are as follows:
[b]bold[/b]
[u]underline[/u]
[i]italics[/i]
[p]
Paragraph.
[/p]<--Note that they aren't indented, that's a little tricky to do in HTML, but no one does it anyway.
[br]
- makes a new line. (probably the one tag I use the most)
[font color = "blue" size = "32" face = "courier"]Lets you specify the font of your text.[/font]
Lastly, tables. Each table cell has it's own formatting, so keep that in mind. Tables are much easier than they seem, just a bit tedious. Use the [table] tag to create/specify the parameters for a table, then the [tr] tag to make a new row, and then the [td] tag the make a new cell. You can easily make blank cells by just not putting anything between [td] and [/td] and rows by doing the same. For an example, the following table would use this code:
[table border = "5" cellspacing = "10"] [tr] [td]
|
[html]
[head]
[title]
Yama Habib's SEAS Webpage
[/title]
[/head]
[h1][marquee]Yama Habib, SEAS 001..........Welcome to my website(best viewed with resolution of 1024x768 or higher)! I did it all in notepad at work. Yes. I was just that bored. I strongly encourage you to try out some of my applets. Right now, I believe they should pretty much all work perfectly. Reploid may take some time to load, though... Also, if you're bored or you've got some free time, or you're a 2D gaming enthusiast, you may want to check out my YouTube page linked below..........I love you kao<3[/marquee][/h1]<--Guess which tag makes the ticker. H1 is a custom formatted header...but I just left the default formatting on.
[body bgcolor="" background="http://www.oocities.org/yamzta333/pattern_127.gif" lang=EN-US link=blue vlink=blue]<--This is where I set the background image. I found this pattern online.
[img src = "http://www.oocities.org/yamzta333/Myface.jpg"][br]
[b]Name: [/b]Yama D. Habib[br]
[b]School: [/b]George Washington University School of Engineering and Applied Sciences (SEAS)[br]
[b]Major: [/b]Computer Science[br]
[b]Year: [/b]Freshmen[br]
[b]Birthdate: [/b]May 19, 1989[br]
[b]E-Mail: [/b]yama@gwu.edu[br]
[a href = "http://www.youtube.com/user/titeguy3"]YouTube page[/a][br]
[a href = "http://www.oocities.org/yamzta333/resume.pdf"]My resume[/a] (in PDF format)[br]
[a href = "http://seas.gwu.edu"]SEAS Website[/a][br]
[a href = "http://cs.gwu.edu"]CS Website[/a][br]
[a href = "http://seas.gwu.edu/~rhyspj"]My Faculty Advisor's Webpage[/a][br]
[a href = "http://www.oocities.org/yamzta333/htmlguide.html"]A brief guide to designing webpages using HTML code[/a][br]
[br][hr]
[u]My Fall '07 Schedule:[/u][br]
[table border = "5" cellspacing = "10"]<--This is where the table starts
[TR]
[TD][i]time[/TD] [TD][b]Sunday[/TD] [TD][b]Monday[/TD] [TD][b]Tuesday[/TD] [TD][b]Wednesday[/TD] [TD][b]Thursday[/TD] [TD][b]Friday[/TD] [TD][b]Saturday[/TD]<--Notice how I'm not closing my formatting tags, this is because each cell has it's own specific formatting
[/TR]
[TR]
[TD][b]8AM[/TD] [TD][/TD] [TD][/TD] [TD]PSYC 001-16[br]63476 Class[br]8:00 am-9:15 am[br]GELM 607[/TD] [TD][/TD] [TD]PSYC 001-16[br]63476 Class[br]8:00 am-9:15 am[br]GELM 607[/TD] [TD][/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]9AM[/TD] [TD][/TD] [TD]JAPN 001-31[br]61762 Class[br]9:35 am-10:25 am[br]ROME 204[/TD] [TD]JAPN 001-10[br]61760 Class[br]9:35 am-10:50 am[br]PHIL 109[/TD] [TD]JAPN 001-31[br]61762 Class[br]9:35 am-10:25 am[br]ROME 204[/TD] [TD]JAPN 001-10[br]61760 Class[br]9:35 am-10:50 am[br]PHIL 109[/TD] [TD][/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]10AM[/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]11AM[/TD] [TD][/TD] [TD][/TD] [TD]CSCI 053-10[br]63110 Class[br]11:10 am-12:25 pm[br]ROME 351[/TD] [TD][/TD] [TD]CSCI 053-10[br]63110 Class[br]11:10 am-12:25 pm[br]ROME 351[/TD] [TD]SEAS 001-10[br]62548 Class[br]11:10 am-12:00 pm[br]FNGR 103[/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]12PM[/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD]SEAS 001-38[br]64623 Class[br]12:10 pm-2:00 pm[br]TOMP 301[/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]1PM[/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]2PM[/TD] [TD][/TD] [TD][/TD] [TD]CSCI 053-30[br]63111 Class[br]2:10 pm-4:00 pm[br]TOMP 411[/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]3PM[/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]4PM[/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD]
[/TR]
[/TABLE]<--End of table
[br][hr]
[u]My Spring '08 Schedule:[/u][br]
[table border = "5" cellspacing = "10"]
[TR]
[TD][i]time[/TD] [TD][b]Sunday[/TD] [TD][b]Monday[/TD] [TD][b]Tuesday[/TD] [TD][b]Wednesday[/TD] [TD][b]Thursday[/TD] [TD][b]Friday[/TD] [TD][b]Saturday[/TD]
[/TR]
[TR]
[TD][b]9AM[/TD] [TD][/TD] [TD]JAPN 002-31[br]91559 Class[br]9:35 am-10:25 am[br]MON 252[/TD] [TD]PHYS 021-10[br]91765 Class[br]9:35 am-10:50 am[br]COR 101[/TD] [TD]JAPN 002-31[br]91559 Class[br]9:35 am-10:25 am[br]MON 252[/TD] [TD]PHYS 021-10[br]91765 Class[br]9:35 am-10:50 am[br]COR 101[/TD] [TD]MATH 032-32[br]91735 Class[br]9:35 am-10:25 am[br]MON 351[/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]10AM[/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD]CSCI 133-30[br]92785 Class[br]10:30 am-12:20 pm[br]TOMP 402[/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]11AM[/TD] [TD][/TD] [TD][/TD] [TD]JAPN 002-11[br]91557 Class[br]11:10 am-12:25 pm[br]PHIL 108[/TD] [TD][/TD] [TD]JAPN 002-11[br]91557 Class[br]11:10 am-12:25 pm[br]PHIL 108[/TD] [TD][/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]12PM[/TD] [TD][/TD] [TD][/TD] [TD]CSCI 133-10[br]92783 Class[br]12:45 pm-2:00 pm[br]ROME 204[/TD] [TD][/TD] [TD]CSCI 133-10[br]92783 Class[br]12:45 pm-2:00 pm[br]ROME 204[/TD] [TD][/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]1PM[/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]2PM[/TD] [TD][/TD] [TD]MATH 032-12[br]92989 Class[br]2:20 pm-3:35 pm[br]MPA 309[/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD]MATH 032-12[br]92989 Class[br]2:20 pm-3:35 pm[br]MPA 309[/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]3PM[/TD] [TD][/TD] [TD]PHYS 021-32[br]91767 Class[br]3:30 pm-6:00 pm[br]COR 209[/TD] [TD]CSCI 123-10[br]91854 Class[br]3:45 pm-5:00 pm[br]ROME 352[/TD] [TD][/TD] [TD]CSCI 123-10[br]91854 Class[br]3:45 pm-5:00 pm[br]ROME 352[/TD] [TD][/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]4PM[/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD]
[/TR]
[TR]
[TD][b]5PM[/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD] [TD][/TD]
[/TR]
[/TABLE]
[br][hr][br]
[i]click one of the following links to see something I did![/i][br]
[a href = "http://www.oocities.org/yamzta333/frogger.html" target = "iframe" title = "I'm proud of this...mostly because I drew the frog in Paint.NET & put it together in 3 days"]Frogger OD[/a][br]<--note the 'target = "iFrame"'
[a href = "http://www.oocities.org/yamzta333/jball.html" target = "iframe" title = "Tehe. This is fun. And addicting."]JBall[/a][br]
[a href = "http://www.oocities.org/yamzta333/pong.html" target = "iframe" title = "A game that asks the age old question...keyboard vs mouse...which is mightier?!"]2P Pong OD[/a][br]
[a href = "http://www.oocities.org/yamzta333/craps.html" target = "iframe" title = "Did this last year...BEFORE I learned what ObjectDraw was."]2P Craps[/a][br]
[a href = "http://www.oocities.org/yamzta333/reploid.html" target = "iframe" title = "Ah, good 'ole Megaman... this one is very special to me."]Reploid[/a][br]
[a href = "http://www.oocities.org/yamzta333/critters.html" target = "iframe" title = "A tribute to forgotten mario badguys everywhere!"]Critters[/a][br]
[a href = "http://www.oocities.org/yamzta333/garden.html" target = "iframe" title = "Surprisingly, this is the program that I recieved the most praise for... go figure."]Garden[/a][br]
[a href = "http://www.oocities.org/yamzta333/days.html" target = "iframe" title = "I think this is the prettiest of all my programs."]Days[/a][br]
[a href = "http://www.oocities.org/yamzta333/diffpaint.html" target = "iframe" title = "Hahaha. I slapped this together in like 10 minutes... It's astonishingly fun, though!"]DifficultPaint[/a][br]
[a href = "http://www.oocities.org/yamzta333/touchywindow.html" target = "iframe" title = "My first program in Rhys' class"]TouchyWindow[/a][br]
[br]
[iframe width="825" height="645" border=0 name=iframe src="//www.oocities.org/yamzta333/yamakanji.gif"/]
[/iframe][br]<--This is what the links were sending their pages to, a window inside a window called an iFrame
[br][br][br]
[a href = "http://www.declan-software.com/japanese/learn_japanese_words_gg.htm?referrer=GOOGLE_IG_JAPANESE"][img src = "http://www.oocities.org/yamzta333/yama.jpg"] [img src = "http://www.oocities.org/yamzta333/kao.jpg"][/a][br]<--You can make images into hyperlinks, too!
[/body]
[/html]
|
Hope you got all that! For more help on HTML coding and tutorials, try visiting W3 Schools!