Sources to check out that help explain this: http://www.macloo.com/syllabi/toolkit/html_lesson/notes.html
MINDY’s NOTES FROM CLASS: http://www.macloo.com/syllabi/toolkit/html_lesson/index.html
We’ll get the templates in a zip so we can have a safe file to go back to.
Edit with Notepad – or Mac --- MAC DOWNLOAD has extra instructions on using installing Textedit.
Concentrate on what you’re putting between the tags
The POINT: crucial to learn to edit without messing up the HTML
www.htmldog.com --- a good step-by-step site
Also through week 12, downloads for text editors. (what you use to edit)
Open
Save as…. Type in html
Work in text editor and examine pages in browser.
http://www.htmldog.com/guides/htmlbeginner/
Get doctype here:
http://www.htmldog.com/guides/htmlbeginner/tags/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><body> This is my first web page</body></html>Page titles
http://www.htmldog.com/guides/htmlbeginner/titles/
This is important for page optimization… so browsers and google find you and rank you in a nice, high place.
But title between head tags:
For instance:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head><title>My first web page</title>
</head> <body>
This is my first web page</body>
</html>
Title bar at the very tippy top will reflect your title change. This is what GOOGLE looks for when it goes a lookin’.
A lack of a title is an indicator of an amateur and she REALLY REALLY hates that.
These are the parts of your page…. A key structure point.
They look like <p> </p> in your code.
http://www.htmldog.com/guides/htmlbeginner/paragraphs/
In code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>My first web page</title>
</head>
<body>
<p>This is my first web page</p>
<p>How exciting</p>
</body>
</html>
Breaks… <br /> is like hitting return and makes a new line without putting a line space in your content.
(htmldog goes into emphasis and page breaks…. But
<br / > is structural…. It’s not meant to be a design tool. That means that you use it sparingly to structure your content, not page design.
http://www.htmldog.com/guides/htmlbeginner/headings/
Tags for headings… <h1> is to indicate the most important thing on the page. Then second less <h2> and then <h3> and on to <h6>.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<p>To learn HTML</p>
</body>
</html>
How big is H1 going to show up? Depends. Heading tags display on browsers according to what individual users default dictates. CSS can change this… but still users can effect their browser display. (to keep in mind when you are designing.)
Some design guides… only one H1 tag per page… because there’s only one most important thing on a page. You can have multiple h2s and h3s.
Misuse of H tags… Using H tags to make a display quote
From: http://www.htmldog.com/guides/htmlbeginner/links/
An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.
Add this to your document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put together using HTML</p>
<h2>Why this is</h2>
<p>To learn HTML</p>
<h2>Where to find the tutorial</h2>
<p><a href="http://www.htmldog.com">HTML Dog</a></p>
</body>
</html>
Href Tag (link code)
Address of site
What text shows up on your screen
(
The img tag is used to put an image in an HTML document and it looks like this:
<img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="HTML Dog logo" />
Image tag
Web address of picture you are displaying
Size of image (<--- GOOD PRACTICE and make proportionate to original image if not using what is displayed originally)
ALT tag --(This shows up when the image doesn’t… tells people what they are looking at or should be and real important… Best practice -- handicapped web users – web readers for the blind depend on these.)
Ten tags that can be used to make forms.
http://www.htmldog.com/guides/htmlbeginner/forms/
You probably won’t be using them, just don’t break them when you see them. We really didn’t get into this.
The key here is to remember with all the HTML is to get the right stuff between the right tags.
The web site is very very good. www.htmldog.com
Html is for structure and CSS is for what makes its pretty.
Cascading Style sheets.
Is used for design and not for structure.
www.htmldog.com has lessons for CSS, too. Mindy says good lessons…
http://www.htmldog.com/guides/cssbeginner/applyingcss/
1. Inline CSS --- basic decoration inside one tag to make what’s inside the tag red, see tag
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
<h2>What this is</h2>
<p style="color: red">A simple page put together using HTML</p>
<h2>Why this is</h2>
<p>To learn HTML</p>
<h2>Where to find the tutorial</h2>
<p><a href="http://www.htmldog.com">HTML Dog</a></p>
</body>
</html>
This means code that you put into your HTML code on one page that will change ALL the code of one kind to look a certain way… like changing all the headings to Red. Example below – changing <p> graphs to red, <a> links to blue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>CSS Example</title>
<style type="text/css">p {
color: red;
}
a {
color: blue;
}
</style>...This means that you are writing a separate document – .css – that your HTML document reaches out to in order to find out how to display the content. This is VERY super handy when you are talking about the style of an entire web site. It INSTANTLY applies style to 1, 10, 100, 1000 pages with just a couple changes in one file. THIS IS WHY WE SEPARATE STYLE FROM STRUCTURE.
This code is telling the browser that graphs <p> will be red and links <a> will be blue.
p {color: red;
} a {color: blue;
} The above would be saved in a file called something like web.css. (You will see below how this hooks up with your HTML document later.)
www.htmldog.com is good.
In your HTML page, you will have code at the top of the page that tells the browser where your CSS page is: See below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...Divs are html tags that are a container that’s bigger than a graf, headings, a sidebar, whatever you want. You put page elements together within a DIV and then you can apply en mass with a .CSS file style elements… like font color, size.
DIVs – can be IDs or a CLASS, depending on how many you are using.
You can name DIVs with names that make sense to you… the whole page might be container, wrapper, big box. Then the .CSS document will have all your divs tagged and coded like this:
#container {position: absolute;
top: 50px;
left: 50%;
width: 600px;
margin-left: -300px;
padding-bottom: 50px;
}
that tells the browser how to apply the style… like the position on the page, the margins, the padding (space between or outside elements that’s similar but separate from margin space)
Divs have to beginning and ending tags in the HTML. If you delete the closing div, or add an extra one and it will mess up the design of the whole page. This is KEY for what we’re trying to learn right now. A whole lot of messed up things can happen is you are missing a div… elements jumble up and jump around and are invisible for no good reason.
Not ready yet.
She put files for us to practice editing CSS with on this page: http://www.macloo.com/syllabi/toolkit/html_lesson/index.html
(under files for download.)
The idea is that you make changes to the HTML and CSS files in your text editor, save them, then view them in your browser. Then do that process over and over….
You’ll see this in the code of the templates:
<!-- This is Code that allows instructions in your CSS and HTML files that explain what the different parts of the template are for. -->
Or in .css
/* This part of the page controls the wrapper. Don’t touch this*/
Webdeveloper addon for Firefox is most handy…
Viewsource… handy. Slimy to steal code.
Gonna add this stuff to our blogs:
FeedBurner, Site Meter, Google Analytics and Technorati