is1811 multimedia development for internet applications lecture 4: introduction to html rob gleasure...
TRANSCRIPT
IS1811 Multimedia Development for Internet ApplicationsLecture 4: Introduction to HTMLRob Gleasure
[email protected]://girtab.ucc.ie/rgleasure/index.html
IS1824: Introduction to Internet Multimedia
IS1824
Today’s lecture Continuous Assessment Part 1 and 2 details Explaining our first webpage HTML tags Exercise
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
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
Last Week
We had a look at the basic principles of HTML and designed our first simple webpage
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
So what did we do (continued)? The first tag in your HTML document is <html>. This tag tells your
browser that this is the start of an HTML document. The last tag in your document is </html>. 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 <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.
So what did we do (continued)? The text between the <title> tags is the title of your document. The
title is displayed in the tab of your browser
The text between the <body> tags is the text that will be displayed in your browser.
The text between the <b> and </b> tags will be displayed in a bold font.
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
HTML Tags
If we go back to our first example, what are the HTML elements?
The tags and their contents, e.g.
<b>This text is bold</b> The HTML element starts with a opening tag: <b> The content of the HTML element is: This text is bold The HTML element ends with an closing tag: </b>
This is also an HTML element:
<body> This is my first homepage.
<b>This text is bold</b>
</body>
Basic HTML Tags
Headings are defined with the <h1> to <h6> tags (<h1> defines the largest heading, <h6> defines the smallest heading)
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading.
Basic HTML Tags
Paragraphs are defined with the <p> tag. <p>This is a paragraph</p>
<p>This is another paragraph</p>
HTML automatically adds an extra blank line before and after
a paragraph.
Basic HTML Tags
Line Breaks (the <br> tag) Used when you want to break a line, but don't want to start a
new paragraph. The <br> tag forces a line break wherever you place it.
The <br> tag is an empty tag. It has no end tag like </br>, since a closing tag doesn't make any sense.
<br> or <br />
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.
<!-- This is a comment -->
Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
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.
<p color=“red”> Some red text </p>
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 finally3. a semicolon (;).
For example, to display a less than (<) we would write <
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
Working with HTML
Let’s open up our first web page - our HTML should look like this:
<html> <head>
<title>Title of page</title> </head> <body> This is my first homepage.
<b>This text is bold</b> </body>
</html>
Let’s add in a heading
<h1>Our Heading</h1>
After we open our body tag
Working with HTML
Our HTML will now be:
<html> <head>
<title>Title of page</title> </head> <body> <h1>Our Heading</h1>
This is my first homepage. <b>This text is bold</b>
</body> </html>
Now save our page and re-open the file in the browser (or just hit refresh if you didn’t close the browser tab).
Working with HTML
Now try adding the following attribute to the h1 tag:
<html> <head>
<title>Title of page</title> </head> <body> <h1 align = “center”>Our Heading</h1>
This is my first homepage. <b>This text is bold</b>
</body> </html>
Save our page and hit refresh in the browser.
Try changing “center” to “left” and “right”.
Working with HTML
Have a look at what happens when we add this to the body tag:
<html>
<head>
<title>Title of page</title>
</head>
<body bgcolor="yellow">
<h1 align = “center”>Our Heading</h1>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>
Exercise
Make a webpage called home.htm (this page will need the basic tags, <html>, <head> and <body>)
Add a <title> 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)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
IS1811
Next week Introduction to HTML layout
Tables Lists Images
Want to read more?
A reference for the tags commonly used in HTML 4.01 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/