That's an ambitious topic, isn't it?
I thought I might talk about writing code for those of you who want to learn.
Even for those who don't want to write their own code (there are plenty of tools out there that will do it for you), it's still a good idea to understand what the WYSIWYG editor is producing. Sometimes it's easier to be able to tweak a little thing without having to open the whole editor. Notepad has it's uses!
Let's start with the very basics. Every day--or whenever the mood hits me--I'll add something to the page and explain how it works.
To really learn and remember, copy the code to a practice board: http://www.practiceboard.com/
Then play with it a bit. Change the attributes and see what happens. (Although you can't do that with today's stuff. There are no attributes.)
A little vocabulary
Each html command is called a tag. Most commands are used in sets: an opening tag and a closing tag. Usually the only difference between the opening tag and the closing tag is a "/".
Opening tag:
HTML Code:
<html>
Closing tag:
HTML Code:
</html>
Inside the tag, there may be optional information that's passed to the browser. The information is written in pairs: and attribute and a value. The syntax looks like this: attribute=value
Putting it with the tag, you get HTML Code: <tag attribute=value> Some tags don't have any attributes. Some have a dozen or so attributes. Attributes are always optional.
There are two parts to a web page, the head and the body. The head is stuff that does NOT display in the page. The body is the part that DOES display in the browser window.
Here's our baby page (NOTE: Take the space out of the body tag to make it work.)
HTML Code: <!doctype html public "-//w3c//dtd html 3.2//en"> <html> <head> </head> < body> Hello World! </body> </html> Explaining the code
The first line is information for the browser. It tells the browser what kind of instructions we are giving it. Document type is html, in this case version 3.2. (Sometimes you will see this called the "bang line" or "shebang." That's a term that goes back to programming language conventions.)
Putting it with the tag, you get HTML Code: <tag attribute=value> Some tags don't have any attributes. Some have a dozen or so attributes. Attributes are always optional.
There are two parts to a web page, the head and the body. The head is stuff that does NOT display in the page. The body is the part that DOES display in the browser window.
Here's our baby page (NOTE: Take the space out of the body tag to make it work.)
HTML Code: <!doctype html public "-//w3c//dtd html 3.2//en"> <html> <head> </head> < body> Hello World! </body> </html> Explaining the code
The first line is information for the browser. It tells the browser what kind of instructions we are giving it. Document type is html, in this case version 3.2. (Sometimes you will see this called the "bang line" or "shebang." That's a term that goes back to programming language conventions.)
HTML Code:
<html>
signals the start of the code the browser needs to interpret
HTML Code:
<head></head>
marks things that the browser needs to know, but doesn't show in the displayed page. (In this case, we don't need to tell the browser anything, so it's blank.)
HTML Code:
< body>
starts the part of the page that will be displayed.
Hello World! is the stuff to be displayed.
Hello World! is the stuff to be displayed.
HTML Code:
</body>
ends the part of the page that will be displayed.
HTML Code:
</html>
tells the browser this is the end of the page.
Answer
Here's a new practice board: http://www.draac.com/javatester.html
The other one doesn't work all that well.
Here's the next step in the code:
HTML Code: <!doctype html public "-//w3c//dtd html 3.2//en"> <html> <head> <style type="text/css"> BODY {background-color: #400040} P {font: 16pt Verdana, Helvetica, sans-serif; color: #80FF80} A:link {color: #8080FF; text-decoration: none; font: 24pt Verdana, Helvetica, sans-serif} A:visited {color: #009900; text-decoration: none; font: 16pt Verdana, Helvetica, sans-serif} A:active {color: #FF0000; text-decoration: none; font: 16pt Verdana, Helvetica, sans-serif} </style> </head> < body> <p>Hello <a href="http://www.nasa.gov">World!</a></p> </body> </html> Don't forget to take the space out of the body tag.
Code discussion coming tomorrow, unless someone wants to take a shot at it now?
Answer
YES YES YES YES YES!!!!!!
Jayne is teaching HTML!
FANTASTIC!
sitting back and taking notes.
Answer
Freakin' A!
I love the subscribed threads ferasture << haha wth? FEATURE.
I always forget what threads I've been in & need to check back on.
Anyway.
Sitting right up front, got my 'pencil & paper' and I am ready ta'learn!
Question:
I have only ever used plain'ol Notepad and hand code everything (read: the Long Hard Way) and everytime I try to decide what is the best all-around WYSIWYG editor I get really %$#&! frustrated and confused so I never choose one.
Recommendations?
Thanks!
~ gem ~
Answer
Got room for one more ?
I use notepad and ws_ftp to move the pages to my website at my isp.
If I make changes to a page, then save, then I need to move it through the ws_ftp process/upload to view it as a website page.
How do I view this page on my computer before I upload it so that I can see it as a webpage ? I think I confused myself somewhere here.
I am self taught. Not sure if that is a good thing or a bad thing....
somedays
Answer
when you go to save the file in note pad.
click on save as
then name the file.
name.html
now you will have an html file on your computer and you can just double click on it and it will open in your browser.
you don't need to have it uploaded to your host to view it.
Answer
Thanks
Boy, do I feel duh......
I knew I could click on a gif or jpg to view it, but somehow failed to realize that I could click on a saved page to view it on the computer....
Going back to my corner and will try to be quiet
That is till I can think of another dumb question
Answer
Answer
Here's a new practice board: http://www.draac.com/javatester.html
The other one doesn't work all that well.
Here's the next step in the code:
HTML Code: <!doctype html public "-//w3c//dtd html 3.2//en"> <html> <head> <style type="text/css"> BODY {background-color: #400040} P {font: 16pt Verdana, Helvetica, sans-serif; color: #80FF80} A:link {color: #8080FF; text-decoration: none; font: 24pt Verdana, Helvetica, sans-serif} A:visited {color: #009900; text-decoration: none; font: 16pt Verdana, Helvetica, sans-serif} A:active {color: #FF0000; text-decoration: none; font: 16pt Verdana, Helvetica, sans-serif} </style> </head> < body> <p>Hello <a href="http://www.nasa.gov">World!</a></p> </body> </html> Don't forget to take the space out of the body tag.
Code discussion coming tomorrow, unless someone wants to take a shot at it now?
Answer
YES YES YES YES YES!!!!!!
Jayne is teaching HTML!
FANTASTIC!
sitting back and taking notes.
Answer
Freakin' A!
I love the subscribed threads ferasture << haha wth? FEATURE.
I always forget what threads I've been in & need to check back on.
Anyway.
Sitting right up front, got my 'pencil & paper' and I am ready ta'learn!
Question:
I have only ever used plain'ol Notepad and hand code everything (read: the Long Hard Way) and everytime I try to decide what is the best all-around WYSIWYG editor I get really %$#&! frustrated and confused so I never choose one.
Recommendations?
Thanks!
~ gem ~
Answer
Got room for one more ?
I use notepad and ws_ftp to move the pages to my website at my isp.
If I make changes to a page, then save, then I need to move it through the ws_ftp process/upload to view it as a website page.
How do I view this page on my computer before I upload it so that I can see it as a webpage ? I think I confused myself somewhere here.
I am self taught. Not sure if that is a good thing or a bad thing....
somedays
Answer
when you go to save the file in note pad.
click on save as
then name the file.
name.html
now you will have an html file on your computer and you can just double click on it and it will open in your browser.
you don't need to have it uploaded to your host to view it.
Answer
Thanks
Boy, do I feel duh......
I knew I could click on a gif or jpg to view it, but somehow failed to realize that I could click on a saved page to view it on the computer....
Going back to my corner and will try to be quiet
That is till I can think of another dumb question
Answer
HTML Code:
<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<style type="text/css">
BODY {background-color: #400040}
P {font: 16pt Verdana, Helvetica, sans-serif; color: #80FF80}
A:link {color: #8080FF; text-decoration: none; font: 24pt Verdana, Helvetica, sans-serif}
A:visited {color: #009900; text-decoration: none; font: 16pt Verdana, Helvetica, sans-serif}
A:active {color: #FF0000; text-decoration: none; font: 16pt Verdana, Helvetica, sans-serif}
</style>
</head>
< body>
<p>Hello <a href="http://www.nasa.gov">World!</a></p>
</body>
</html>
As you can see, I’ve expanded our baby page a bit. I’ve added style elements and an anchor tag.
Some of the words below are not my own. I’m cribbing from a couple of different books, because I want to get this right. So, if you come across some phrases or sentences later in a book, and they sound familiar, yep….I lifted them.
Style
A style is a rule that tells the browser how to display a tag. It defines the properties associated with a tag.
Let me say that again: A style defines the properties of a tag. Not the properties of the page content. It defines the tag.
There are three ways to attach a style to a tag: inline styles, document-level styles, and external style sheets. Our page contains an example of a document-level style. The style definitions go in the head part of the webpage.
Anyone remember what’s unique about the head part?
It does not display in the browser. It’s instructions for the browser. In this case, it’s instructions on defining the attributes for an associated tag.
That means that each time the associated tag is used in the web page, the browser will automatically add the attributes defined in the head section.
Let’s look at what we have:
As you can see, I’ve expanded our baby page a bit. I’ve added style elements and an anchor tag.
Some of the words below are not my own. I’m cribbing from a couple of different books, because I want to get this right. So, if you come across some phrases or sentences later in a book, and they sound familiar, yep….I lifted them.
Style
A style is a rule that tells the browser how to display a tag. It defines the properties associated with a tag.
Let me say that again: A style defines the properties of a tag. Not the properties of the page content. It defines the tag.
There are three ways to attach a style to a tag: inline styles, document-level styles, and external style sheets. Our page contains an example of a document-level style. The style definitions go in the head part of the webpage.
Anyone remember what’s unique about the head part?
It does not display in the browser. It’s instructions for the browser. In this case, it’s instructions on defining the attributes for an associated tag.
That means that each time the associated tag is used in the web page, the browser will automatically add the attributes defined in the head section.
Let’s look at what we have:
HTML Code:
<style type="text/css">
BODY {background-color: #400040}
P {font: 16pt Verdana, Helvetica, sans-serif; color: #80FF80}
A:link {color: #8080FF; text-decoration: none; font: 24pt Verdana, Helvetica, sans-serif}
A:visited {color: #009900; text-decoration: none; font: 16pt Verdana, Helvetica, sans-serif}
A:active {color: #FF0000; text-decoration: none; font: 16pt Verdana, Helvetica, sans-serif}
</style>
Notice that the style section starts with a <style> tag and ends with a </style> tag, just like all html commands do.
There is one attribute in the style tag: type=”text/css” This tells the browser that everything in between the starting style tag and the ending tag are css (cascading style sheet) elements.
Before we talk about each line, take a look at the syntax in the style section. It’s different that the usual attribute=value that’s used in the rest of the page. Inside the style tag, the syntax is attribute: value, with ; separating the attribute pairs.
The first line after the style tag assigns the color #400040 to the background-color attribute of the body tag.
Next, we assign the font and color to the p tag. The font attribute sets all the font attributes for an element. Values are any of the values for font-style, font-variant, font-weight, font-size, line-height, and font-family, in that order. You can (and the example did) leave out the portions you don’t wish to define. Of the parts you do define, you MUST define them in that order. Our line assigns a font-size of 16pt and a font-family of Verdana, Helvetica, sans-serif.
A font-family simply means a list of fonts to use. The browser will try to match the first font in the list to the viewer’s computer. If that font isn’t available, the browser will try with the second….and so on, until it gets a match. Therefore, you should always use a generic font (serif or sans-serif) as the last element of the list. If you don’t, there’s no way to predict what the browser will do.
The next three lines define different states of the anchor tag. The states are “link” “visited” and “active”.
An anchor tag that contains a hyperlink is “link”.
An anchor tag that contains an active hyperlink is “active”. (This anchor content is considered “active” from the instant you click the mouse on it, until the instant you release the mouse.)
An anchor tag that contains a hyperlink that you've already clicked is “visited”.
The values defined for all the a tags are color, text-decoration, and font. We already talked about color and font. The text-decoration element can be defined as “blink”, “line-through”, “none”, “overline”, or “underline”.
You won’t see text-decoration used much, because the default is “none”. The one exception is a hyperlink, whose default is “underline”. *I* don’t like underlines on hyperlinks, so I chose to set the value to “none”.
Note: There are many different ways to set up the tag to be defined in style. Each person could do it a different way, and still end up with identical results.
Now lets look at the last changed line.
Notice that the style section starts with a <style> tag and ends with a </style> tag, just like all html commands do.
There is one attribute in the style tag: type=”text/css” This tells the browser that everything in between the starting style tag and the ending tag are css (cascading style sheet) elements.
Before we talk about each line, take a look at the syntax in the style section. It’s different that the usual attribute=value that’s used in the rest of the page. Inside the style tag, the syntax is attribute: value, with ; separating the attribute pairs.
The first line after the style tag assigns the color #400040 to the background-color attribute of the body tag.
Next, we assign the font and color to the p tag. The font attribute sets all the font attributes for an element. Values are any of the values for font-style, font-variant, font-weight, font-size, line-height, and font-family, in that order. You can (and the example did) leave out the portions you don’t wish to define. Of the parts you do define, you MUST define them in that order. Our line assigns a font-size of 16pt and a font-family of Verdana, Helvetica, sans-serif.
A font-family simply means a list of fonts to use. The browser will try to match the first font in the list to the viewer’s computer. If that font isn’t available, the browser will try with the second….and so on, until it gets a match. Therefore, you should always use a generic font (serif or sans-serif) as the last element of the list. If you don’t, there’s no way to predict what the browser will do.
The next three lines define different states of the anchor tag. The states are “link” “visited” and “active”.
An anchor tag that contains a hyperlink is “link”.
An anchor tag that contains an active hyperlink is “active”. (This anchor content is considered “active” from the instant you click the mouse on it, until the instant you release the mouse.)
An anchor tag that contains a hyperlink that you've already clicked is “visited”.
The values defined for all the a tags are color, text-decoration, and font. We already talked about color and font. The text-decoration element can be defined as “blink”, “line-through”, “none”, “overline”, or “underline”.
You won’t see text-decoration used much, because the default is “none”. The one exception is a hyperlink, whose default is “underline”. *I* don’t like underlines on hyperlinks, so I chose to set the value to “none”.
Note: There are many different ways to set up the tag to be defined in style. Each person could do it a different way, and still end up with identical results.
Now lets look at the last changed line.
HTML Code:
<p>Hello <a href="http://www.nasa.gov">World!</a></p>
I’ve added two tags: the p tag and the a tag.
The a tag (or anchor tag) contains an attribute and value that defines a hyperlink. (href means hyperlink reference.) On the displayed page, clicking on the content between the starting a tag and the ending a tag will open the URL value defined in the href attribute pair.
So…who can tell me why I included the p tag? I put it in there, even though I hate ‘em. Why? That’s your homework assignment. Everyone who gets it correct gets a gold star.
Answer
LOL Toy.... I wont tell you how long it took for ME to figure that one out but once I realized it I was like THANK YOU!!!!!
Makes life so much easier to do that.
Answer
Morning
Well I know I wont get a gold star -
so now I'm just hoping I don't get a demerit
So…who can tell me why I included the p tag? I put it in there, even though I hate ‘em. Why? That’s your homework assignment. Everyone who gets it correct gets a gold star. I will just wait on the answer, because in page coding I have gone from NOT using P tags to USING them, then back to NOT - could never seem to find a definitive answer on which was correct. I know in CSS you can use them to assign different attributes to each paragraph ...
Each person could do it a different way, and still end up with identical results. Thats what bugs me most times, you learn a way to do something, find out someone else is doing the same thing a totally different way, but can never seem to know which is the 'right' or the 'standard' way.
And I hate P tags too.
DIE P TAG, DIE!
~ gem ~
The a tag (or anchor tag) contains an attribute and value that defines a hyperlink. (href means hyperlink reference.) On the displayed page, clicking on the content between the starting a tag and the ending a tag will open the URL value defined in the href attribute pair.
So…who can tell me why I included the p tag? I put it in there, even though I hate ‘em. Why? That’s your homework assignment. Everyone who gets it correct gets a gold star.
Answer
LOL Toy.... I wont tell you how long it took for ME to figure that one out but once I realized it I was like THANK YOU!!!!!
Makes life so much easier to do that.
Answer
Morning
Well I know I wont get a gold star -
so now I'm just hoping I don't get a demerit
So…who can tell me why I included the p tag? I put it in there, even though I hate ‘em. Why? That’s your homework assignment. Everyone who gets it correct gets a gold star. I will just wait on the answer, because in page coding I have gone from NOT using P tags to USING them, then back to NOT - could never seem to find a definitive answer on which was correct. I know in CSS you can use them to assign different attributes to each paragraph ...
Each person could do it a different way, and still end up with identical results. Thats what bugs me most times, you learn a way to do something, find out someone else is doing the same thing a totally different way, but can never seem to know which is the 'right' or the 'standard' way.
And I hate P tags too.
DIE P TAG, DIE!
~ gem ~