This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.
This course offers foundational instruction in HTML. Topics include tag structure, file encoding, web browsers, DOCTYPEs, common HTML elements, hyperlinks, images, video, tables, forms, and sections.
Additionally, we will touch base on CSS in order for students to transition to other Webcraft courses.
WEBCRAFT
HTML tags are used to mark structural elements of a page. Structural elements include paragraphs, headers, articles, images, and other aspects of hypertext documents.
HTML tags are surrounded by less than ( < ) and greater than ( > ) characters. There will typically be an opening and closing tag that surrounds the corresponding page content. For example, to denote an HTML document you surround the entire page with opening and closing HTML tags:
<html> ... Page content ... </html>
The only difference between many opening and closing tags is that closing tags have a forward slash ( / ) preceeding the tag text. As an aside, some tags are self closing. Self closing tags look like this:
<br />
Lets take a look at several basic elements of the HTML. We will start off by creating a simple resume or other document of your choice. The elements we will start with include:
With this limited set of elements we can begin to construct our own HTML resume.
To begin, create a new, empty text file on your local computer or on HTML Pad.
Once you have a blank document, add a DOCTYPE to the beginning of the document. Doctype is short for 'Document Type Declaration' and associates a particular document with a formally defined mark up definition. Our doctype is html. When a browser, such as Mozilla Firefox, parses a document, the doctype declaration describes the possible tags that the browser may encounter. The HTML5 doctype is below:
<!DOCTYPE html>
After the document type has been declared, we can go ahead and open our <html> tag, which will hold sub-elements of the document:
<html>
Be sure not to close the <html> tag yet, we will place the </html> tag at the end of the document.
Now we will place the document header with a <head> tag. The <head> tag is a container for elements such as the page title, CSS for layout, and JavaScript for dynamic elements. This course does not cover those topics but there are study groups forming here at the School of Webcraft.
<head>
We can insert the page <title> inside of the <head> like so:
Our document will contain encoded characters, in our native language, that web browsers will need to display. It is important for us to tell the browser what character encoding to use. The unicode (UTF-8) standard contains over one million characters from languages around the earth. We set our character encoding as UTF-8 using the <meta> tag.
<meta charset="UTF-8" />
Next we close the <head> tag:
</head>
In an HTML document, the <body> is usually located below the <head>. The body is a container for most of your content. Lets open the body container.
In the body, we will typically have page sections and paragraphs of content. The sections are usually seperated by headers. Lets create a couple of header sections:
<h1>Header 1</h1> <h2>Header 2 (sub-section)</h2>
The headers are hierarchical and higher number header levels are generally sub-sections of the lower numbered headers. In this example, the <h2> is a sub section of the <h1> element.
The <hgroup> tag is used for when <h> tags are used consecutively after each other.
The final step on this short trip through the basic HTML tags is the often used paragraph tag <p>. Paragraph tags are used to designate paragraphs within a document. For example:
<p>The quick brown fox jumped over the lazy dog.</p>
At the end of your document, be sure to close the <body> and the <html> with:
</body> </html>
As you can see, the HTML elements are designed to be easily understood by humans, as well as parsed by computers.
Please post a working HTML document online. You can do so by posting on HTML pad, pastebin, or any other online code pasting/hosting website. If you have your own web hosting feel free to post your HTML files there, or any other reasonable place you know of. Submit a link to your task by replying to this task.
Below is a link to my very basic HTML page.
http://dl.dropbox.com/u/43651344/HTML5%20course/html5_assignments.html
I haven't been able to figure out how you link to a style sheet using drop box so I'll have to find out a better way to upload future examples.
Aurora
http://dl.dropbox.com/u/6340482/education.xhtml
Gonna skip some of this as I already know it well - moving on to multimedia.
OKAY! I finally got this to work after many technical issues .... :
enjoy :)
Wow, never expected that, very clever!
Wow! Those are really great pages 
Interesting color scheme on the Witches page 
Added a second section to my original index.html.
Also utilized <nav> in this example. The fixed anchor nav at the top will jump you to it's corresponding section.
I think I overdone it on the last task (HTML basic). Anyway, I have made 3 pages connected with links. On the first one I have put h1 h2 p em strong ul ol and a tags. On the second on I have put a pic and 2 links and on the 3rd one I have put a table.
Here is the link:
http://dl.dropbox.com/u/4230190/courses/index.html
PS dropbox public folders work good for me. Does it work for you too?
I also prefer Dropbox, code looks great!
I never saw anyone elese do this with lists, she nested some, check it out...
http://nurianadalrovira.bz.cm/p2pu/html5/02_lists.html
Thanx Joe.
`I appreciate your comments. I'm nesting some on my lists now. I also liked that she added nod names to move inside the page. I will add that too.
Hi,
my basic markup can be found here:
http://htmlpad.org/BasicMarkup/
looking forward for the next task
EnD
For some reason Chrome displays the text in the HEAD tag, this is what I have:
Hi Antonio!
Did you already discovered what's wrong with the code?
If not, here's the answer:
Looking good Logan,
will be busy for the rest of the day (on the road) , keep up the good work, you will be surprised how fast it adds up!
here's my work http://htmlpad.org/HTML5intro/
Nice going Luca,
Here is something interesting someone did with lists
http://nurianadalrovira.bz.cm/p2pu/html5/02_lists.html
this is very interesting indeed! since I'm going through the course with the same pad in order to keep track of the sections and my progress, I'm updating my link to avoid confusion.
here's the basic markup one
My example is here: http://htmlpad.org/ldesigntask4/
Good work, feel free to play with the assignment also- to add and experiment.
Keep going Claudio!
Here's my basic markup: http://etherpad.mozilla.org:9000/ep/pad/view/ro.eGtbHttSd7e$/rev.20
fun stuff
Here's my basic markup, I hope this works, never used dropbox before. I saw that someone else used it I love the idea behind it.
http://dl.dropbox.com/u/38817193/index.html
Works good!
Here's my HTML @ pastebin - http://pastebin.com/ySBugL5p
http://dl.dropbox.com/u/31656724/pizzza.html
you missed the closing tag on body, but great start, more later, I have to go now. Hit the link, than hit view from the toolbar, view source (or just cntrl+u in the new Firefox) to see how you want to tab out sections to easily look for that.
http://css-tricks.com/121-what-beautiful-html-code-looks-like/
Look at this on the "indentation" label on the left, it will expand out to see better, keep going now. off to a good start.
https://developer.mozilla.org/en-US/learn
Probably should have put that up too, good stuff.
my basic html file is here:
http://pastebin.com/Zgffeavm
;-)
Here is my completion of the Basic Markup assignment
Hi, My assignment is here: http://pastebin.com/u/shemric
here's my html code.
