Quantcast HTML/CSS website fundamentals class - textbook vs other books? - digitalFAQ Forum
Go Back    Forum > Digital Publishing / Web Sites > Website and Server Troubleshooting

Reply
 
LinkBack Thread Tools
  #1  
09-20-2011, 12:59 AM
Sossity Sossity is offline
Premium Member
 
Join Date: Nov 2007
Posts: 434
Thanked 5 Times in 5 Posts
I was not sure whether to start a new thread or continue on my other, I though I would start anew, since my other is going further down the list of questions.

This past week was my 4th week in this class, & the assignment I had to do was frustrating for me, & I know alot of other students in the class found it hard as well.

Our class was to make a small website with 5 html pages plus a home index page with 5 navigational links in a nvaibar to 5 pages where we provided a click able image link & describing our favorite websites, & make fancy fonts, & background colors. Perhaps I am a slow learner, & I am a visual learner, but this assignment felt to be too much too soon. The class has a "discussion board" where we can post out tech Qs throughout the semester. I flooded it with my questions, & a couple of students replied, the instructor does not participate as much, we are supposed to help each other. They were struggling with the assignment as well, & like me struggling with the CSS & html. In particular making an image into a click able link to take one to a website. We all finally figured this out.

In addition to this, we were to make an animated gif as a separate exercise.

Our textbook is this; http://www.amazon.com/HTML-Dog-Best-...6497057&sr=8-1

it got good reviews, & I guess it is good, but so far it has been only minimal help for me so far. Another student who replied to my threads suggested this book to me; http://www.amazon.com/Teach-Yourself...6497034&sr=8-1

I was told, that someone would recommend some books for me, has anybody got any suggestions, as I stumble along in this class? I am in it now, too late to drop out & I am determined to do the best I can.
Reply With Quote
Someday, 12:01 PM
admin's Avatar
Ads / Sponsors
 
Join Date: ∞
Posts: 42
Thanks: ∞
Thanked 42 Times in 42 Posts
  #2  
09-20-2011, 06:25 AM
lordsmurf's Avatar
lordsmurf lordsmurf is offline
Site Staff | Video
 
Join Date: Dec 2002
Posts: 9,658
Thanked 1,647 Times in 1,429 Posts
Quote:
we are supposed to help each other
Translation = teacher doesn't want to actually do anything but sit on his/her butt. That's so irritating.

Quote:
Our class was to make a small website with 5 html pages plus a home index page with 5 navigational links in a nvaibar to 5 pages where we provided a click able image link & describing our favorite websites, & make fancy fonts, & background colors. Perhaps I am a slow learner, & I am a visual learner, but this assignment felt to be too much too soon. The class has a "discussion board" where we can post out tech Qs throughout the semester. I flooded it with my questions, & a couple of students replied, the instructor does not participate as much, we are supposed to help each other. They were struggling with the assignment as well, & like me struggling with the CSS & html.
Quote:
In particular making an image into a click able link to take one to a website. We all finally figured this out.
Some of this stuff seems hard at first, but it does get easier.

Code:
<a href="URL" target="_blank"><img src="URL.jpg"></a>
You're always welcome to ask questions here, in addition to asking there. There's some degree of stupidity in letting the inmates run the asylum, letting the untrained train themselves, and that fault lies squarely on the instructor. We obviously won't do the assignment for you, but helping give out quick pieces of code really helps save you time. And honestly, it's not cheating you out of learning -- you'll learn once you see the code. Figuring out how to make an image into a link should not be anywhere near that confusing or time-consuming.

Sort of like your text message post, the answers to problems are often easy yet easily overlooked.

Quote:
has anybody got any suggestions, as I stumble along in this class?
A lot of the books I would recommend are not related to coding, but more towards administration, design, or marketing. Are you seeking an alternative book dedicated specifically to learning HTML and CSS?

If so, it's really hard to beat those "for Dummies" books. They're quick reads, and very basic, but you need to start somewhere. I've used a few dummies books in the past, for non-tech topics (cooking and foreign languages, for example).

All "for Dummies" HTML books here: http://www.amazon.com/s?ie=UTF8&x=0&...reative=390957.

There are some HTML + XHTML + CSS "for Dummies" integrated books, but I personally prefer learning each topic separately. And then if you look at the book description, it goes into advanced topics like PHP and MySQL development, which is way out of your league right now. Best to stick with the HTML book. I don't know that I'd waste time on the CSS for Dummies books.

I can look around for you, if that's what you want -- tech books.

- Did my advice help you? Then become a Premium Member and support this site.
- Find television shows, cartoons, DVDs and Blu-ray releases at the TVPast forums.
Reply With Quote
  #3  
09-20-2011, 01:27 PM
kpmedia's Avatar
kpmedia kpmedia is offline
Site Staff | Web Hosting, Photo
 
Join Date: Feb 2004
Posts: 4,295
Thanked 357 Times in 333 Posts
Quote:
HTML Dog: The Best-Practice Guide to XHTML and CSS
I just had a look at this book, and skimmed through it real quick. As far as I'm concerned, that book is a complete piece of crap. I can't imagine a more useless book for a beginner. The first page claims it's written for intermediate/advanced users, but should be helpful to beginners. I completely disagree. In fact, looking at the content, I can't make heads or tails of who the target audience might be. The book even starts off oddly, jumping into what appears to be a case study break-down of his own website. There's really no useful information here. There's some good information further in the book, but it's all jumbled up without any clear organization.

No wonder you're having a hard time!

We'll get you set up with some better book suggestions. Something that truly introduces web coding, and then works you into applying it to actual projects (basic or advanced).

I'm convinced your instructor is an idiot. I feel bad for you. But you can get through it with a little outside help.

- Did my advice help you? Then become a Premium Member and support this site.
- Please Like Us on Facebook | Follow Us on Twitter

- Need a good web host? Ask me for help! Get the shared, VPS, semi-dedicated, cloud, or reseller you need.
Reply With Quote
  #4  
09-20-2011, 05:14 PM
Sossity Sossity is offline
Premium Member
 
Join Date: Nov 2007
Posts: 434
Thanked 5 Times in 5 Posts
Thanks everyone for the responses, I hope no one minds here me using this forum and the posters here as a sort of supplemental instructors, (as there seems to be a general agreement that the instructor is an idiot) so I am going to need alternatives to survive & get through this class, & seems I have found it. I think my instructor is sort of going through the motions of what the school curriculum put together, she seems nice enough, but so far the book & some her voice threaded lectures have not been as helpful as I hoped. She is having us use either Dreamweaver or a free editor, Komodo edit as our coding editors, so far I have been using the free Komodo edit on my mac.

Yes, some other book suggestions would be helpful, both alternative texts to actual coding (since the one I have is no good) & texts on planning & marketing would be helpful as well.

I find it easier to learn something when I can see things, see patterns & see the big picture, like how the smaller elements all fit together. If I am presented with just small snippets here & there without any unity, I get confused.

This was our assignment last week for week 4; the past assignment I was having so much trouble with, it is done now, although I dont think I did everything that was required of me it just felt like too much.

Quote:
Ex-4: HTML + CSS Multi-Page Site Review

Exercise 04
HTML + CSS :: Multi-Page Site Review

Requirements
Do the “CSS Beginner” tutorial at http://htmldog.com/guides/cssbeginner/
Next, browse the internet and find five websites that you feel are indicative of strong web design. Consider not only look and feel, but also load time for images, useability, functionality, and how well the site speaks to its audience.
You will create a small website that includes an index page with a statement of purpose for the site, as well as 5 other pages (each for a website you are reviewing).
All pages must include a navigational toolbar that allows viewers to get to any of the pages from any page within the site. This toolbar can have image icons for buttons, but it is not required.
The index page will have a brief statement about the site and any other general review observations you might want to add.
Each site review page will have a resized screenshot (cropped detail okay) that serves as an external link to the actual site. The page will also include a detailed review of the site.
All styling will be done with a single external css page. Do not embed any css in the html files.
All XHTML will be done with a STRICT 1.0 doctype, or with the HTML5 doctype.
The following XHTML tags must be present in each page and styled with css :
h1 : assign it a unique color, font, size, padding, margins and any other special styles
h2 : same as h1, but make sure it is distinct from other heading styles. It should have common visual sense.
h3 : same as h2, but distinct….
p : same criteria, but distinct…
ol OR ul: ditto
body: color, margins, link colors
Properly title each page in the HEAD of the document
Make sure all images have “alt” attributes (“alternate text”).
Upload it to the server using SFTP (Secure File Transfer Protocol)
This week, or week 5 is what I have to do;
Quote:
Exercise 06
CSS formatting :: Illustrated Poem

Requirements
Date: Please check Blackboard’s “Weekly Schedule!”
html and support files uploaded to the server

Requirements
Do the “HTML Intermediate” tutorial at http://htmldog.com/guides/htmlintermediate/
Do the “CSS Intermediate” tutorial at http://htmldog.com/guides/cssintermediate/
Make a new HTML and a new CSS file.
Change the title to : <title>YOURNAMEHERE: Exercise 6</title>
In this HTML file you will have to format and style a poem of your choice using an external css style sheet.
Based on the tutorials, lectures, and readings, style the positioning of the poem, along with text and images. You will need to create an interface that is attractive, using the following elements:
div
span
pre (for line breaks)
special classes
styling of HTML tags
id style for layout elements
use images (minimum: repeating background and header or acceptable substitute layout illustration device)
All XHTML will be done with a STRICT 1.0 doctype, or with the HTML5 doctype.
All styling is required in an external css file ONLY
Properly title each page in the HEAD of the document
Make sure all images have “alt” attributes (“alternate text”).
Upload it to the server using SFTP (Secure File Transfer Protocol)
For this, I have already selected a poem I found online, & started an html5 & CSS documents, in the html, I copied & pasted in the poem, & did some line breaks in it, it is bare bones, just a header1, header2, & body, no colors, fonts etc, as I am still struggling to figure out how to do the fancy stuff in CSS. It seems the main principle is CSS controls the presentation, & html is the actual content, this is the main concept we are supposed to get.

Last edited by Sossity; 09-20-2011 at 05:26 PM.
Reply With Quote
  #5  
09-20-2011, 10:37 PM
lordsmurf's Avatar
lordsmurf lordsmurf is offline
Site Staff | Video
 
Join Date: Dec 2002
Posts: 9,658
Thanked 1,647 Times in 1,429 Posts
I have not idea what a PRE tag is. (Never needed it, don't care.)
But I did spend about 20 minutes have some fun throwing this together real quick:

HTML Code:
body {
background: #000000 url(wood.jpg) no-repeat center top;
color: #c0c0c0;
font-size: 12px;
font-family: Tahoma, Helvetica, sans-serif;
}

p {
}

a {
color: #222222;
text-decoration: underline;
}

a:hover, a:visited {
text-decoration: none;
}

h1 {
font-size: 18px;
margin-bottom: 25px;
}

#main {
background: #000000;
width: 690px;
height: 550px;
margin: 30px auto 0;
}

#mainleft {
width: 450px;
padding: 15px 35px 35px 35px; 
float: left;
}

#mainright {
background: url(reaperbg.jpg) no-repeat;
width: 170px;
height: 470px;
float: left;
margin-top: 25px;
}
HTML Code:
<html>
<head>
<title>Until It Sleeps | by James Hetfield</title>
<link rel='stylesheet' href='styles.css' />
</head>
<body>

<div id="main">

<div id="mainleft"><p>
<h1>Until It Sleeps by James Hetfield</h1>

Where do I take this pain of mine?<br />
I run, but it stays right by my side.<br />
<br />
So tear me open and pour me out, there's things inside that scream and shout.<br />
And the pain still hates me, so hold me until it sleeps.<br />
<br />
Just like the curse, just like a stray...<br />
You feed it once and now it stays -- now it stays!<br />
<br />
So tear me open, but beware, there's things inside without a care.<br />
And the dirt still stains me; so wash me, until I'm clean.<br />
<br />
It grips you, so hold me! It stains you, so hold me!<br />
It hates you, so hold me! It holds you, so hold me!<br />
Until it sleeps...<br />
<br />
So tell me why you've chosen me...<br />
Don't want your grip, don't want your greed -- don't want it!<br />
<br />
I'll tear me open (make you gone), no more can you hurt anyone.<br />
And the fear still shakes me, so hold me, until it sleeps.<br />
<br />
It grips you, so hold me! It stains you, so hold me!<br />
It hates you, so hold me! It holds you -- holds you until it sleeps!<br />
I don't want it, want it, want it, no no no!<br />
<br />
So tear me open, but beware; there's things inside without a care.<br />
And the dirt still stains me, so wash me 'til I'm clean.<br />
<br />
I'll tear thee open, make you gone; no longer will you hurt anyone.<br />
And the hate still shapes me, so hold me, until it sleeps...<br />

</p>
</div>

<div id="mainright">

</div>

</div>

</body>
</html>
metallica-poem.jpg

It's one of my favorite songs (Metallica, Load album, 1996). Songs are poems, too! The lyrics are very dark, like Edgar Allan Poe.

I didn't do everything in that assignment, and probably didn't follow directions regarding BR vs PRE. But the CSS and layout of DIVs may help you a bit. I skimped on the HTML head, obviously -- it still works, even if it's not compliant to any standard.

I mostly wanted to see what I could do with an allotment of just a short amount of time. I had to find a reaper image, then edit it in Photoshop. I had the wood background already. That took several minutes. Honestly, most of my time was spending editing the lyrics into poem sentence form. I blew through the CSS and HTML in probably 7 minutes, the other 13 were spent on non-code stuff. See how sites can take a while?!

A high-end design with fancier graphics, little snazzy CSS quality touches, etc -- lots of time needed.

Sometimes seeing basic samples of coding in action is better than any book talking at you. You're visual -- so am I.

Quote:
It seems the main principle is CSS controls the presentation, & html is the actual content, this is the main concept we are supposed to get.
Correct.
That's not to say you should never use HTML styling (B, I, strikethrough, etc -- for fonts), but that styles are best done via CSS in a separate CSS file(s). For the purpose of learning, it seems HTML styling is taboo for the assignments. (Honestly, I'm fine with that.)

If you don't understand some of the above code, ask.

I'm not some super CSS master, but I've been doing it for at least 3 years. I used CSS prior to that (since maybe 2001) but I now purely work in CSS and PHP-driven HTML now, mostly using CMS of some kind (WordPress, for example).


Attached Files
File Type: rar metallica-poem.rar (110.5 KB, 2 downloads)

- Did my advice help you? Then become a Premium Member and support this site.
- Find television shows, cartoons, DVDs and Blu-ray releases at the TVPast forums.
Reply With Quote
  #6  
09-21-2011, 02:35 AM
Sossity Sossity is offline
Premium Member
 
Join Date: Nov 2007
Posts: 434
Thanked 5 Times in 5 Posts
Thanks for the example, unfortunately, I cannot get my background image to place, I cant seem to write it in the CSS, I have a jpg file called wave1.jpg on my thumb drive.

Is the top box called html code the CSS? & the bottom with the typed poem the actual html document?

I tried copying some of the top html code into my CSS document, & tried replacing some of the items in the code with my items & chosen colors, but nothing takes effect, I just have a plain black text on a white page of my html. I cannot seem to get the CSS affects to work at all.

I really regret taking this class, I guess part of finding out what career direction you will take involves finding out what you dont like & what does not work, as well as what is good.

thanks for your help, but I am not sure I will ever get this stuff, I am feel like I am fast sinking now, I just hope I can survive & pass this class.

Even though I dont think I can do this, I will still ask questions in the hope that something will eventually work. I cant give up although I feel like it now, I am stuck with this class.


Edit; After going in circles, I found what I suspected was the problem, my CSS link or reference in my html document was not named right, did not have the same name as my actual CSS file, so everything that I was doing was not linking properly to my CSS file.

Last edited by Sossity; 09-21-2011 at 03:15 AM.
Reply With Quote
  #7  
09-21-2011, 02:54 PM
NJRoadfan NJRoadfan is online now
Premium Member
 
Join Date: Sep 2010
Posts: 1,072
Thanked 331 Times in 271 Posts
Quote:
Originally Posted by lordsmurf View Post
Correct.
That's not to say you should never use HTML styling (B, I, strikethrough, etc -- for fonts), but that styles are best done via CSS in a separate CSS file(s). For the purpose of learning, it seems HTML styling is taboo for the assignments. (Honestly, I'm fine with that.)
...which completely contradicts the original purpose of HTML. HTML was designed as a markup language to format text. The whole seperate content from style/design was all the rage back in 2002-03 when I was in school and XHTML was the "next big thing".

For reference I have this book on the shelf if I ever do web design*: http://www.amazon.com/CSS-Anthology-...dp/0980576806/

A review of an earlier edition can be found here.

*I'm more of a coder then a web designer. Anything I create won't look pretty, but it's functional
Reply With Quote
  #8  
09-23-2011, 07:25 AM
lordsmurf's Avatar
lordsmurf lordsmurf is offline
Site Staff | Video
 
Join Date: Dec 2002
Posts: 9,658
Thanked 1,647 Times in 1,429 Posts
Quote:
Originally Posted by Sossity View Post
Thanks for the example, unfortunately, I cannot get my background image to place, I cant seem to write it in the CSS, I have a jpg file called wave1.jpg on my thumb drive.
The background: url(); code may not be correct.

Quote:
Is the top box called html code the CSS? & the bottom with the typed poem the actual html document?
The HTML has the typed poem.
The CSS is all the layout, and is always in this sort of format: #id{}, .class{} or object{}

Quote:
I tried copying some of the top html code into my CSS document, & tried replacing some of the items in the code with my items & chosen colors, but nothing takes effect, I just have a plain black text on a white page of my html. I cannot seem to get the CSS affects to work at all.
It sounds like the CSS file is missing or not linked properly.

Quote:
I really regret taking this class, I guess part of finding out what career direction you will take involves finding out what you dont like & what does not work, as well as what is good.
Even with bad teachers, I can't say I regret anything I took in college.

Quote:
thanks for your help, but I am not sure I will ever get this stuff, I am feel like I am fast sinking now, I just hope I can survive & pass this class.
It's hard for artists to absorb tech -- and the opposite is true, too

Quote:
Even though I dont think I can do this, I will still ask questions in the hope that something will eventually work. I cant give up although I feel like it now, I am stuck with this class.
Keep at it. When I wrote the above code, I probably screwed it up 3-4 times. The only different between us is that I know what else to try. You're not quite there yet -- you don't know all the options.

Quote:
Edit; After going in circles, I found what I suspected was the problem, my CSS link or reference in my html document was not named right, did not have the same name as my actual CSS file, so everything that I was doing was not linking properly to my CSS file.
Yep, that'll do it.

- Did my advice help you? Then become a Premium Member and support this site.
- Find television shows, cartoons, DVDs and Blu-ray releases at the TVPast forums.
Reply With Quote
  #9  
10-02-2011, 04:21 PM
lordsmurf's Avatar
lordsmurf lordsmurf is offline
Site Staff | Video
 
Join Date: Dec 2002
Posts: 9,658
Thanked 1,647 Times in 1,429 Posts
This was today's Foxtrot.

ft111002.jpg



- Did my advice help you? Then become a Premium Member and support this site.
- Find television shows, cartoons, DVDs and Blu-ray releases at the TVPast forums.
Reply With Quote
Reply




Similar Threads
Thread Thread Starter Forum Replies Last Post
Verbatim still first class, best blank DVD in 2011 ? kronas Blank Media 2 07-04-2011 06:17 AM
Sony both 1st class AND 2nd class media? admin Blank Media 2 09-21-2009 04:06 PM
Dynex Brand Media = First Class Konfusion Blank Media 2 12-04-2007 12:53 PM
1st Class Hub Printable media contrain Blank Media 1 01-07-2007 03:34 AM

Thread Tools



 
All times are GMT -5. The time now is 06:30 PM