I just want to introduce the concept of HTML and CSS if you are completely new to it and clarify the difference between the usage of each. This is great if you have never seen it and want the meat/potatoes of what you will use-- or if you are like me and have done this many times over the years and just need a little ;) reminder sometimes.
What is HTML (Hyper Text Markup Language)?
Well, this website (and most websites) are displayed to you in the form of text. But whether the text is in a new paragraph, bolded, underlined, or italicized is determined by HTML. Links to my home page or some other page are written using HTML. Images are called upon with html also. There are many, many more things you can do with this and other languages out there. In addition, all the words in your documents on your computer-- for example Microsoft Word will save you files with all your special formatting choices in text size/boldness/etc. using HTML and will read all the HTML so the document is the same when you open it again and again. So HTML is not just for the web!
You can mix/match, learn as you go, or figure things out in application to your own projects! Tons of great ways to learn how to do this. Its really just a way to tell your computers to do things.. because they don't talk like you and I do. Let me show you how the above paragraph looks to me when I am writing to you in the blog. Here it is (insert MAGIC):
What is HTML (Hyper Text Markup Language)? Well, this website (and most websites) are displayed to you in the form of text. But whether the text is in a new paragraph, bolded, underlined, or italicized is determined by HTML. Links to my home page or some other page are written using HTML. Images are called upon with html also. There are many, many more things you can do with this and other languages out there. In addition, all the words in your documents on your computer-- for example Microsoft Word will save you files with all your special formatting choices in text size/boldness/etc. using HTML and will read all the HTML so the document is the same when you open it again and again. So HTML is not just for the web! You can mix/match, learn as you go, or figure things out in application to your own projects! Tons of great ways to learn how to do this. Its really just a way to tell your computers to do things.. because they don't talk like you and I do.
Keep in mind I am using a neat little tool called SyntaxHighligher which I had to enter into the blog template in order to display this to you! If you want to open your own blog on Blogger or WordPress and be able to show code, you can go to their website by clicking: HERE.
Also notice that every tag in in diamond brackets "< >" have to be opened with what I tell it to do. And then the diamond brackets are closed with a "/" at the end! They keep things simple here! p is for paragraph. br is like hitting the enter key one time. b is for bold. u is for underline. i is for italics. a href opens a link. img src calls a picture (that you have to upload to a server and pull its URL from). And there is lots, lots more you can do.
What is CSS(Cascading Style Sheets)? What is different about this one?
Again, and similarly.. CSS lets you change your font text/boldness/italics. Also it will let you break a page into columns. So it c
Web-based HTML = tends to be data/information presented to you. CSS = appearance of your website. You have little mixes and bits of both, and sometimes Javascript.. so all these can be on one web page! If you use things like Dreamweaver, they will take care of it for you. If you are doing it on your own, it may be good to try to understand exactly what does which and which one is neater/more effective for what you want to do. There is some overlap what they accomplish. The syntax is different enough that once you get used to seeing them, you will be able to easily pick apart the difference between them on a web page.
Summary time!
HTML (Hyper-Text Markup Language) = web content and structure.
- Position and size (heights and widths) of website images, logos, sidebars, text, menus, and content.
- Headers, content, footer, and sidebars.. their position and existence.
- Again.. your CONTENT!!! :)
- The bullets on this page where I am listing things, all the organization of my text, the example above..
CSS (Cascading Style Sheet) = layout design.
- The color of the background, areas in the header/footer/sidebar...
- Whether a width is fixed and centered/left/right..
- General colors, sizes, positions, the look and feel of a website!
Note also, CSS can go into HTML files so CSS is more flexible and mixable. But, HTML cannot go into stylesheets. Some of these things can be interchangeably done, but always try to use the one better suited for the task and that will be easier to edit in the future and has the neater syntax.
