Introduction To HTML & CSS (part1)
Chapter 1: Start Here!
I know what you’re thinking, “Oh, an introduction…SKIP!” However, I’d advise you note skip this introduction because I’m not going to babble on about my qualifications or some heartfelt story about how my HTML/CSS book cured a dying man of his ailments. Rather, I just wish to give this book a little bit of context. As with most things in life, coding a website may seem extremely difficult from the outside looking in. However, once you know the tricks of the trade it’ll be a piece of cake for you.
If you’ve taken a good look around on the internet then you may have noticed that there are many different styles of website. Everything from centered 1-page sites to websites with a sidebar navigation all the way to websites built entirely from Flash animations. I mention this because this brings up the point that there is more than one way to code website. Which we will get to later in the book.
Brief Intro To Website Design History
Disclaimer: This brief history is only based on my own observations. Since this isn't essential to the book I won’t waste any time looking up dates, gathering references or factchecking. You’ll simply have to take this at face value.
The advent of the internet brought about very ugly websites. Originally website designers would rely on a very outdated technique of laying out their websites using what are knowns “tables”.
You may be familiar with tables because they are used in Microsoft Word. Essentially the tables would serve to segment content on the page and allow the user to have 2 & 3 column layouts which are still very much used today.
Once this obsession with tables died down a bit, website designers then switched to laying out their websites using what are known as “dives”. A div is another HTML “tag” which allows users to segment content as they see fit. I should also mention that for a while there, Flash became extremely popular.
Flash was loved by many because it allowed the designer to place objects wherever they wantedwithout code, to create amazing animations, and do things that simply weren’t possible using HTML, CSS or JavaScript. This brings us to today.
With the advent of HTML5 and CSS3 (the latest versions of HTML & CSS) website designers are able to create awesome animations and do things that were never possible in the past without either Flash animations or the usage of JavaScript.
Today, with the rising popularity of mobile and tablet devices, mobile website design Ashwell as adaptive web design are becoming the new standard which will take us into the websites of the future.
What I Hope To Accomplish With This E-book
It is my hope that someone who is unfamiliar with HTML/CSS can pick up this e-bookend use it to get a solid understanding of coding a website with HTML & CSS.I want to cover all the bases of HTML/CSS without going overboard.
Please note that this subject is very vast and I will be covering a few of the things that are necessary to getstarted.Please note however, that I am extremely long winded.
That being said, I know that this is supposed to be an introductory book but along the way I will be giving you some of the seeds of knowledge necessary to help you towards your second phase of website building.
That’s when you graduate from coding a static page to full fledged responsive website design.
There are many resources on the internet which can help you learn how to build website. However, none of these resources will give you the edge that can only be gained by years of experience, hours of troubleshooting as well as yelling at your computer screen which I hope to impart on you.
That being said let’s begin!
Chapter 2: Understanding HTML
So they say that the difference between a master and a novice is that the master knows theatrics of the trade. It’s the tiny, subtle things that the master knows that gives him the edge over the novice.
You may not know this, but anyone who has ever used a computer (even one withoutinternet) has probably used and manipulated HTML.HTML means “Hypertext Markup Language” FYI.If you have ever used Microsoft Word, then you have most likely come in contact with multitude of HTML elements and you didn’t even realize it.
These include:
- Headings (Heading 1 through Heading 6)
- Tables Ordered Lists (A list with numbered bullet points)
- Unordered Lists (This list is an example)
- Links (Surely you’ve encountered a Word document with a link to a website)
I’m sure there are a few more examples but are the stand out elements which I knew most people would be familiar with. And, just like a Word document, a website can be extremely bland with no styling…or you can use your imagination and jazz it up a bit using fancy fonts, colored text, images, backgrounds, etc.!
Figure 2.1 – On the left is a website and on the right is the same website minus the CSS.
CSS stands for “Cascading Style Sheet” and when people refer to CSS they will often talk about the “stylesheet” which is the document containing the CSS code. As you can hereabove in Figure 2.1, on the left you have a website which consists of HTML & CSS. Andon the right you have the EXACT SAME WEBSITE, however I deleted the stylesheet.
The HTML includes all of the elements that are on the page IE: the pictures, the words, the links, etc. and the CSS is the code that the website designer uses to denote the color, orientation, font, etc.
As you can see the website on the right (minus the CSS) looks very much like something you could create in Microsoft Word.
And much like Microsoft word elements, each HTML element comes preset with styles.
For example if you were to take a word and link it to a website, it becomes blue and underlined. If you were to begin typing, the words would begin in the upper left portion of the document using a Times New Roman font and utilizing a 12 point font.
The reason why I mention the link and paragraph style attributes in Microsoft Word is because they are almost identical to the default appearances of “unstilled” HTML elements.
Chapter 3: Understanding CSS
So as I mentioned above CSS stands for Cascading Style Sheets. It’s what you will beusing as a beginning website designer/ developer to give your websites some flavor.
It’s the tool that you will use to transform a page which resembles the ugliest of Worddocuments into a beautiful and interactive work of art!
As I mentioned before, HTML elements all have their default styles.
Links look like this.
Paragraphs and other unstilled text default to Times New Roman (or Macintosh equivalent) 16 point font.
- Unordered
- lists end up looking
- like this.
It will be your responsibility to take these elements and style them to your desire utilizing CSS.
Things You Can Do With CSS.
- Change the background of the page (Many options including tiled image, gradient, image/ background color combo, solid color, etc. )
- Change the orientation/ position of an element
- Change fonts, font size, font color
- Give elements background images
In all honesty, there is almost no limit to what you can do visually to a website using CSS. And with the advent of CSS3 there is all types of cool things that you can do such as creating animations to happen when the user hovers over an element, rounded corners on elements, text shadows, etc.!
Chapter 4: Where to Write Your Code
Before we go any further on our journey we have to discuss what you will be using to code the websites that you design.
I personally use Dreamweaver to do all of my coding. It’s not what I personally recommend.
I mostly use it because it came with Adobe Creative Suite, something that Impersonally use because it’s required for my profession. However, you can edit almost any type of code using the standard text editor that comes with your computer.
With a Windows based computer you can use Notepad to write, view or edit almost any type of computer code you could ever wish to manipulate. On a Mac the equivalent is Text Edit.
It’s crazy that the simplest program on your computer gives you the ability to code the most beautiful websites. Essentially, the code editor that you use is irrelevant.
If you use a simple code editor then you have the potential to become much more proficient in writing code because you won’t have any crutches to rely on.
If you spend your time writing code with a simple text editor, you will most likely end up having to reference almost every bit of code that you write or commit the code to memory.
Free Code Editors
Although memorizing code will make you an exceptional website developer the purposeof this book isn’t to deter you from getting your feet wet with HTML/CSS.
Therefore I’ll give you a few options that you can use if you don’t have the option to use apaid program.
Of course by the time you read this e-book there may be more options so don’t be afraid to Google!
- Notepad (TextEdit on Mac) - No frills text editor. Be prepared to Google every stepof the way.
- Notepad++ - This is a free, open source download that is essentially a simple text editor with a few features which will make your life easier.
- Text Wrangler – Similar to Notepad++ but is Mac only and not open source.
What Is The Deal With Code Editors???
If you’re completely new to code. Then you may be asking yourself, “how is the code editor that I use important in anyway? "Basically, the code editor that you use can make your life easier. And you yourself can make your own life easier by paying attention to the tips that I’ll give you in the chapter about “semantic” code.
Back to the topic at hand, the editor that you use can help you in a number of ways.For instance, check out Figure 4-1. The language that you’re looking at is CSS. You may not be able to tell, but I’ve decided to target the “body” of the HTML document. Then I decided to target the “background-color” of said body.
Colors on the internet are normally based on a hexadecimal system and each color designation begins with a hash marking.
For instance “ #ffffff ” designates white. (We'll get into that more later.)Figure 4.1 – I begin to specify a background color and a helper window pops up to assist me in choosing a color.
But as you can see, as soon as I began to type the hash mark, a helping hand popped up tohelp me choose a color.
This is just one example of how the text editor that you choose can help you get the jobdone.
Essentially, the best text editors can help you to remember tidbits of code, help you to keep your code organized and assist you when you forget essential pieces of code.
Chapter 5: Browsers
I know you’re eager to start learning about website building however, the topic ofbrowsers is one of the most important pieces to the puzzle.
An internet browser is simply the portal that you choose to help you view the abomination which has come to be known as the internet.
edge, so can your browser.
As of today, the most popular internet browsers are Internet Explorer, Firefox, Opera, Chrome & Safari.
Why Do Browsers Matter?
If you are going to be coding websites it’s important to have multiple browsers to test your websites in.
Not every browser displays the same font in the same way and some browsers haves lightly different protocols for displaying certain objects.
Just as I mentioned before about how Microsoft Word has certain styles that they apply to different objects.
Each browser also abides by certain styles for different HTML elements. And while each browser has almost the same relative styles for each element, there are some subtle differences between browsers which can throw off your layout. Often times the problem browser will be Internet Explorer.
This is because Microsoft abides by a different set of rules pertaining to the way it’s browser renders certain HTML elements. You may think that this isn’t an issue because you personally use Chrome, Firefox or Safari.
In reality, what you don’t know is that a majority of people NEVER upgrade their browser from the default one their computer comes with.
And since the majority of people use Windows, this means that a majority of people not only use Internet Explorer but a good chunk of those people have an OUTDATED version of Internet Explorer.
Only in recent years has Internet Explorer caught up with the modern browser world and begun to acknowledge modern website design techniques and render the new website design features in their own browsers.
What this means is that a good chunk of internet users world wide are viewing websites ona completely outdated and (for lack of a better word) non-compliant browser. This makes coding HTML/CSS super fun!!! (sarcasm)
What Browsers To Download
The browsers that I personally recommend to download are:
- Internet
- Explorer Firefox
- Chrome
If you are a Windows user and are concerned about not having Safari, don’t be. Google Chrome is using an open source web browsing system called “Web Kit” which is what Safari uses. Keep that word Web Kit in the back of your head because it will come up later when we start coding with CSS.
If you are a Mac user you should definitely download Internet Explorer so that you can make sure your websites perform as intended on Windows.
Between all of the browsers mentioned above you will have a pretty good idea of how your websites will perform for the myriad of internet users out there.
Advantages To Certain Internet Browsers
I personally crack open Google Chrome whenever I am going to begin a heavy session of coding.
Figure 5.1 – I right clicked on the broken image and go to inspect element to see what’s wrong.
This is because Google Chrome has more intuitive and user friendly code diagnostic capability. IN the image above you’ll see that there are 4 broken images in the box labeled “Advertise Here”.
In Google Chrome, if I see an element that is behaving strange all I need to do is right click, followed by Inspect Element.
Figure 5.2 – Once I click inspect element this window pops up and gives me some helpful information.
Once I click “Inspect Element” then this extremely helpful “Developer Tools” window pops up.
The red “x” with the number in the corner, lets me know when files which the document says are supposed to accompany this file are missing.
I can see that the images which aren’t showing up are a result of a broken path. A few things that I want to quickly mention:
- Almost every modern browser has some sort of “Developer Tools” option however, I happen to think Google Chrome’s version is the most helpful and easiest to use. Google Chrome’s Developer Tools window is also very cool because it allows you to edit HTML & CSS directly in the Developer Tools window so you can experiment with your code before you actually put it to use on your website.
- As you can see, when I “inspected the element” the panel on the right tells me every CSS style associated with the element in question. If there was a style which I happened to write incorrectly the Developer Tools window would let me know by putting a slash through the CSS rule. This lets me know that the CSS statement is not currently being used because it is written incorrectly.
- These developer tools options are extremely helpful and have many more capabilities than I even know about or have the time to mention. If you end up becoming serious about coding, than you should make a conscious effort to learn more about what functionality the developer tools can offer you.
One thing that is pretty cool about Firefox is this 3D view option. I’m not exactly sure how useful it is. However, it can help you to understand the hierarchy of the page as well as show you where there may be errors in terms of elements placed incorrectly inside other elements.
In all honesty, when I tried to initialize the 3D view on my own computer a window popped up letting me know that 3D view has failed and to check the troubleshooting pigeon Firefox’s website. I suspect it’s because of my graphic card. However, here is picture of what the Firefox 3D view looks like.
Figure 5.3 – The 3D view option in Firefox is super cool!
0 تعليقات