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.
I've got my task, but I think it shouldn't apear HELLO HTML5 at the beggining of the browser's page.
Someone knowe how to fix it? I'm not shure what is wrong, I just wrote HELLO HTML5 between <tittle></tittle>...
Igor,
Whatever you type in between the title tag will appear at the top of your brower. So
<title>Hello HTML5</title>
will do what it supposed to do, which is display the page title (Hello HTML5) at the top of the browser. You can also change the title to fit the other pages contents. Anyway, if you are talking about it appearing elsewhere, paste your code here so we can get a look at the code.
Thanks,
(aleb
Hello Abel, thanks for your interest !
Here is my code, and also how it displays in the browser: http://htmlpad.org/mypage/
My cuestion is how can I display the tittle in the browser tab? I thought that that's automaticlly done typing the ttile between <tittle>... and how can I make bigger the caracters of the title!
Ans also I had some problems with inserting the video, sould I write some more atributes in order to get the wideo in the browser?
Thanks!!!
<!DOCTYPE html>
<html>
<head>
<h1></h1><tittle> Paul Samuelson, the father of modern economics</tittle></h1>
</head>
<body>
<p>Paul Anthony Samuelson (May 15, 1915 – December 13, 2009) was an <em>American economist</em>, and the first American to win the Nobel Prize in Economics. The Swedish Royal Academies stated, when awarding the prize, that he <strong>"has done more than any other contemporary economist to raise the level of scientific analysis in economic theory."</strong>[1] Economic historian Randall E. Parker calls him the <em>"Father of Modern Economics"</em>,[2] and The New York Times considered him to be the "foremost academic economist of the 20th century."[3]</p>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/86/Paul_Samuelson.jpg" />
<p>He was author of the largest-selling economics textbook of all time: Economics: An Introductory Analysis, first published in 1948. It was the second American textbook to explain the principles of Keynesian economics and how to think about economics, and the first one to be successful,[4] and is now in its 19th edition, having sold nearly 4 million copies in 40 languages. James Poterba, former head of MIT's Department of Economics, noted that by his book, Samuelson <strong>"leaves an immense legacy, as a researcher and a teacher, as one of the giants on whose shoulders every contemporary economist stands."</strong>[1] In 1996, when he was awarded the National Medal of Science, considered America's top science honor, President Bill Clinton commended Samuelson for his "fundamental contributions to economic science" for over 60 years.[1]</p>
<audio src="_Where Nobel Economists Put Their Money_â€.ogg"></audio>
<p>He entered the University of Chicago at age 16, during the depths of the Great Depression, and <em>received his PhD in economics from Harvard.</em> After graduating, he became an assistant professor of economics at Massachusetts Institute of Technology (MIT) when he was 25 years of age and a full professor at age 32. In 1966, he was named Institute Professor, MIT's highest faculty honor.[1] He spent his career at MIT where he was instrumental in turning its Department of Economics into a world-renowned institution by attracting other noted economists to join the faculty, including Robert M. Solow, Paul Krugman, Franco Modigliani, Robert C. Merton and Joseph E. Stiglitz, all of whom went on to win Nobel Prizes. Samuelson was instrumental in the initial development of Indian Institute of Management Calcutta, the first Indian Institute of Management.[5]</p>
<video alt="http://www.youtube.com/watch?v=zCudGmRIsfk.ogv"></video>
</body>
</html>
Hi Igor,
First, my name is Caleb. I got in a habit of using a parenthesis as the C. I guess that's my way of trying to stay young, at least mentally..:-)
Okay, you have wrapped the title tag inside the h1 tag and is why your title is not showing in the top browser. Your title tag should not be wrapped inside the <h1></h1> open and closed tags.
So, to correct this, place the title inside the <title>here</title> but make sure the <h1></h1> tags are not surrounding the title tags. This is what you have and why the problem. The red is an extra closing tag that needs to be removed.
<h1></h1><tittle> Paul Samuelson, the father of modern economics</tittle></h1>
Here is what you want:
<title>Whatever you want to appear in browser top here</title>
<h1>Paul Samuelson, the father of modern economics</h1>
The info inside the h1 tags should display larger now that you have removed the <title> from inside the h1 and removed the extra </h1> closing tag. So it should look like this:
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Why Learn HTML5?</title> </head> <body> <header> <hgroup> <h1>HTML5 Course at P2PU</h1>
<h2>Learn HTML5 then share the Love</h2> </hgroup>
Hope this helps!
(aleb
UPDATE: Sorry I forgot to address the video issue.
Yes, add more attributes like controls and be sure to add a <p>sorry, your browser does not support video</p> like this.
<h2>Video Player</h2>
<video controls="controls" width="440" height="350" src="http://www.archive.org/download/JackDempseyNewsreel1920s/JackDempseyNewsreel1920s.ogv"> <p> Eh, sorry. It appears your browser does not support video either. You need to get Firefox. It's free! Go here to <a href="http://www.mozilla.org">download Firefox</a></p> </video> </video>
I went a head and added width and height as well. On another note, I could not get youtube videos to display because they didn't have the .ogv extension at the end, and is why I went to the archive.org website to find a video.
Let me know how this works out for you.
(Aleb
Ei Caleb thank you very mucho for the information I'll try to perform it tomorrow. I couldn't see your message till today becouse I was on summer holidays and I've been completely disconnected from the computer. i'll retake the lessons tomorrow...
Thanks again!
Hi
Anybody knows how to get the page in the middle of your browser ?
Louis,
CSS is the best way, at least in my opinion. Others may prefer html over css, but if I'm not mistaken, the <center></center> tag is deprecated. Try this:
<body>
<div align="center">
place your content here
</div>
</body>
Hope this helps,
(aleb
Thanks perfect
You're welcome. Glad I could help.
Hello everyone mine is here http://htmlpad.org/ulisescalde/ 
The correct one
Hi my basic markup
Added a blockquote and an aside element. Here is my completed assignment http://htmlpad.org/caleb-p2pu-work/
Main's here : http://htmlpad.org/openzo/
Mine's here: http://daveplisky.com/HTML5/index.html
http://htmlpad.org/SBrown/ My page is posted.
You should always check at the w3 site for technical questions like these. ( http://www.w3.org/TR/html5/syntax.html#the-doctype ) Browsers don't ALWAYS follow/implement these specifications though so just keep that in mind.
here is mine http://davilev.com/html5/index.html
A simple html page. Included the title tag and <a>
http://htmlpad.org/snipe/
Look on my works, ye Mighty, and despair! : http://etherpad.mozilla.org:9000/ind
