1. IS1811 Multimedia Development for Internet Applications Lecture 4: Introduction to HTML Rob Gleasure R.Gleasure@ucc.ie http://girtab.ucc.ie/rgleasure/index.html IS1824: Introduction to Internet Multimedia

2. IS1824 Today’s lecture  Continuous Assessment Part 1 and 2 details  Explaining our first webpage  HTML tags  Exercise

3. Continuous Assessment Part 1 Report due for 18/11/2014  50% of this part of IS1825  1200-2000 words  Identify 1 website whose design you feel is good  Identify 1 website whose design you feel is poor  For each website, describe what you like/don’t like in terms of Look and feel Navigation Language and tone Business role Audience focus

4. Continuous Assessment Part 2 MCQ scheduled in for 25/11/2014  50% of this part of IS1825  30 questions in 45 minutes  Negative marking will apply: 3 marks for a correct answer, -1 for an incorrect answer 0 if left blank

5. Last Week We had a look at the basic principles of HTML and designed our first simple webpage

6. So what did we do? 1. We created a HTML document We bundled some text up in tags.  The tags were organised into a hierarchy! 2. We saved it on our computer 3. We viewed it in a browser

7. So what did we do (continued)? The first tag in your HTML document is. This tag tells your browser that this is the start of an HTML document. The last tag in your document is. This tag tells your browser that this is the end of the HTML document.  Every HTML page we make will begin and end with these tags! The text between the tag and the tag is header information. Header information is not displayed in the browser window.

8. So what did we do (continued)? The text between the tags is the title of your document. The title is displayed in the tab of your browser The text between the tags is the text that will be displayed in your browser. The text between the and tags will be displayed in a bold font.

9. So what did we do (continued)? HTML mark-up is not programming!! HTML is about structuring text, hyperlinks, images and other forms of multimedia in a standard way that browsers can understand Think of it as a labelling system – the browser does the work

10. HTML Tags If we go back to our first example, what are the HTML elements?  The tags and their contents, e.g. This text is bold The HTML element starts with a opening tag: The content of the HTML element is: This text is bold The HTML element ends with an closing tag:  This is also an HTML element: This is my first homepage. This text isbold

11. Basic HTML Tags Headings are defined with the to tags ( defines the largest heading, defines the smallest heading) This is a heading HTML automatically adds an extra blank line before and after a heading.

12. Basic HTML Tags Paragraphs are defined with the tag.  This is a paragraph This is another paragraph HTML automatically adds an extra blank line before and after a paragraph.

13. Basic HTML Tags Line Breaks (the tag)  Used when you want to break a line, but don't want to start a new paragraph. The tag forces a line break wherever you place it.  The tag is an empty tag. It has no end tag like, since a closing tag doesn't make any sense.  or

14. Basic HTML Tags Comments in HTML  The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date. Note that you need an exclamation point after the opening bracket, but not before the closing bracket.

15. HTML Attributes We’ve looked at HTML elements, now we will look at Attributes that the HTML element tags can contain.  HTML tags can have attributes. Attributes provide additional information to an HTML element.  Attributes always come in name/value pairs like this: name="value“ And they are always specified in the start tag of a HTML element. E.g. Some red text

16. HTML Character Entities Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source. Character Entities  have three parts: 1. an ampersand (&), 2. an entity name or a # and an entity number, and finally 3. a semicolon (;). For example, to display a less than (<) we would write <

17. HTML Character Entities The most common character entities are The most common of these is which we use to add a space into the text (browsers ignore a series entered with the spacebar). A complete list can be found at http://www.w3schools.com/tags/ref_entities.asp http://www.w3schools.com/tags/ref_entities.asp

18. Working with HTML Let’s open up our first web page - our HTML should look like this: Title of page This is my first homepage. This text is bold Let’s add in a heading Our Heading After we open our body tag

19. Working with HTML Our HTML will now be: Title of page Our Heading This is my first homepage. This text is bold Now save our page and re-open the file in the browser (or just hit refresh if you didn’t close the browser tab).

20. Working with HTML Now try adding the following attribute to the h1 tag: Title of page Our Heading This is my first homepage. This text is bold Save our page and hit refresh in the browser. Try changing “center” to “left” and “right”.

21. Working with HTML Have a look at what happens when we add this to the body tag: Title of page Our Heading This is my first homepage. This text is bold

22. Exercise Make a webpage called home.htm (this page will need the basic tags,, and ) Add a tag with the text home page Add a main heading on the page with the text Learning HTML Add a smaller heading on the page (under the main heading) with the text What is HTML? Align this smaller heading to the centre Create a new paragraph under this smaller heading and copy and paste in the following text (from www.w3.org)www.w3.org HTML is the lingua franca for publishing hypertext on the World Wide Web. It is a non-proprietary format based upon SGML, and can be created and processed by a wide range of tools, from simple plain text editors - you type it in from scratch - to sophisticated WYSIWYG authoring tools. In the code, before the paragraph you just added – add a comment saying This text is from www.w3.org

23. IS1811 Next week  Introduction to HTML layout Tables Lists Images

24. Want to read more? A reference for the tags commonly used in HTML 4.01  http://www.w3schools.com/tags/default.asp http://www.w3schools.com/tags/default.asp An easy to follow HTML tutorial (stop after the page for ‘line breaks’)  http://www.tizag.com/htmlT/ http://www.tizag.com/htmlT/