Presentation on theme: "MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5."— Presentation transcript:
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’.
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.
EXERCISE 1: HELLO WORLD! Hello World Hello World!
ANATOMY OF AN HTML PAGE The first piece of code is the DOCTYPE. This basically tells the browser how to handle your document. The tags. These tags contain all of the html code – that means that all tags found inside the tags are called ‘children’ of the html tag block. The tags. The head is the first child of the 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 tags and the page. The tags. The name of this section defines itself. Every element displayed on a HTML page is found inside the tags.
EXERCISE 2: A FEW MORE ELEMENTS Hello World | Part 2 Hello World! This is a h1 element This is an h2 element This is an h3 element This is a paragraph element. This is another paragraph.
ELEMENTS and ELEMENTS In HTML any area enclosed by tags is called an ‘element’ eg is referred to as the body element. The elements represent headings within the content. elements can be numbered through. This enables each page to have a heading hierarchy. eg would be the main heading of a page or content section while or 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 element is used for encapsulating paragraphs.
EXERCISE 3: IMAGES AND LINKS Hello World | Part 3 Example 1 Hello World! This is a h1 element This is an h2 element This is an h3 element This is an h4 element This is an h5 element This is an h6 element This is a paragraph element. This is another paragraph.
and ELEMENTS and ATTRIBUTES Some HTML elements contain tag attributes. A tag attribute identifies a characteristic about that element. Eg The tag uses the ‘href’ attribute to create a hyperlink. The 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, and 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,, and.
EXERCISE 4 : HTML5 ELEMENTS MIDM Web Page Interactive and Digital Media Home | About | Work | Contact Welcome to SCA Welcome to the MIDM course. News and Events
HTML5 ELEMENTS 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. This element represents a main navigation section of the page containing either internal or external links. 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. 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: An inspiring HTML5 site worth looking at: Form Follows Function