MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5
WHAT IS THE INTERNET ? At its most basic definition, the internet is essentially as a series of connections amongst many computers and file servers. It is these file servers that store website files and 'serve' them to computers once they request them – eg by typing a web address into a browser.
WHAT IS A WEBSITE? A simple website can be understood as a folder sitting on a server that contains website files. These files can include HTML files, images, video, audio etc.
WHAT IS A WEBSITE? The structure of the files inside a website folder is called the directory tree. As a web-developer keeping this directory tree well organised will make your life much easier. Generally speaking a directory tree will have a main/root directory which will contain all of html files that make up a website, along with any sub-directories. Convention suggests that these sub-directories should be named after the types of files they contain eg. ‘images’.
DIRECTORY TREE
INTRODUCTION TO HTML Every page on the internet is displayed with HTML. HTML stands for HyperText Markup Language. Put simply ‘Markup’ is a fancy word for code, while ‘HyperText’ is text displayed on an electronic device. So HTML = code that displays text on electronic devices. HTML is a made from markup tags. These HTML tags normally come in pairs called opening and closing tags eg. <tag></tag>
EXERCISE 1: HELLO WORLD! <!DOCTYPE html> <html> <head> <meta charset=‘UTF-8’/> <title>Hello World</title> </head> <body> Hello World! </body> </html>
ANATOMY OF AN HTML PAGE <!DOCTYPE html> The first piece of code is the DOCTYPE. This basically tells the browser how to handle your document. The <html></html> tags. These tags contain all of the html code – that means that all tags found inside the <html> tags are called ‘children’ of the html tag block. The <head></head> tags. The head is the first child of the <html> tag block. It contains all of the information about the website that is not displayed in the browser window. It is particularly helpful for Search Engines containing things like <meta> tags and the page <title>. The <body></body> tags. The name of this section defines itself. Every element displayed on a HTML page is found inside the <body> tags.
EXERCISE 2: A FEW MORE ELEMENTS <!DOCTYPE html> <html > <head> <meta charset=‘UTF-8’/> <title>Hello World | Part 2</title> </head> <body> <h1>Hello World! This is a h1 element</h1> <h2>This is an h2 element</h2> <h3>This is an h3 element</h3> <p>This is a paragraph element.</p> <p>This is another paragraph.</p> </body> </html>
<h> ELEMENTS and <p> ELEMENTS In HTML any area enclosed by tags is called an ‘element’ eg <body></body> is referred to as the body element. The <h> elements represent headings within the content. <h> elements can be numbered <h1> through <h6>. This enables each page to have a heading hierarchy. eg <h1> would be the main heading of a page or content section while <h2> or <h3> usually form sub-headings. Paying close attention to your pages hierarchy as it is very important for many reasons, with the main one being SEO (Search Engine Optimisation). The <p> element is used for encapsulating paragraphs.
EXERCISE 3: IMAGES AND LINKS <!DOCTYPE html> <html> <head> <meta charset=UTF-8/> <meta description=“My First HTML Page”/> <title>Hello World | Part 3</title> </head> <body> <img src=‘images/helloworld.jpg’ width=574 height=313 alt=‘Hello World’/> <a href=‘example1.html”’ target=‘_blank’>Example 1</a> <h1>Hello World! This is a h1 element</h1> <h2>This is an h2 element</h2> <h3>This is an h3 element</h3> <h4>This is an h4 element</h4> <h5>This is an h5 element</h5> <h6>This is an h6 element</h6> <p>This is a paragraph element.</p> <p>This is another paragraph.</p> </body> </html>
<img> and <a> ELEMENTS and ATTRIBUTES Some HTML elements contain tag attributes. A tag attribute identifies a characteristic about that element. Eg The <a> tag uses the ‘href’ attribute to create a hyperlink. The <img> element has a required ‘src’ attribute, which specifies the location of the image. It also has other optional attributes including ‘width’ ‘height’ and ‘alt’. The ‘width’ and ‘height’ attributes are handy as they tell the browser how much space it is required to reserve while the image loads. The ‘alt’ attribute is short for alternate text and is important for search engines, screen readers and it also loads in the browser window if an image fails etc.
SO WHAT IS HTML5? HTML5 is the fifth revision of the HTML. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices. HTML5 adds many new features to HTML. These include the new <video>, <audio> and <canvas> elements. Which we will explore later in the course. These features are designed to make it easy to include and handle multimedia and graphical content on the web without having to resort to technologies like Flash and other plugins. It also introduces other new elements, such as <section>, <article>, <header> and <nav>.
EXERCISE 4 : HTML5 ELEMENTS <!DOCTYPE html> <html> <head> <meta charset=‘UTF-8’> <meta name=‘description’ content=‘This is my MIDM web page’> <meta name=‘keywords’ content=‘sydney university, masters, digital media’> <title>MIDM Web Page</title> </head> <body> <header> <h1>Interactive and Digital Media</h1> </header> <nav> <a href=‘#’>Home</a> | <a href=‘#’>About</a> | <a href=‘#’>Work</a> | <a href=‘#’>Contact</a> </nav> <section> <h1>Welcome to SCA</h1> <p>Welcome to the MIDM course.</p> </section> <aside> News and Events </aside> </body> </html>
HTML5 ELEMENTS <header> The header element represents a group of introductory or navigation aids. It usually contains the sections heading and can also be used for a sections table of contents, a search form and any logos. <nav> This element represents a main navigation section of the page containing either internal or external links. <section>This represents a generic section of a document or application. In this context a section is a thematic group of content. Eg a website’s homepage could be split into several sections like introduction, news and contact. <aside> The aside element represents a section of a page that is related to the surrounding content, but could be considered separate.
EXERCISE 5: MAKE A WEBPAGE Use the HTML file you created in exercise 3 as a template to create a quick fact page about anything! This could be a kitten, dinosaur, band or your favourite food. Grab a few paragraphs of information from wiki and an image from google images. Be sure to also include a link to an external website.
THINGS TO DO W3 schools HTML Tutorial: http://www.w3schools.com/html/default.aps An inspiring HTML5 site worth looking at: Form Follows Function http://fff.cmiscm.com/