Other HTML Features

Line breaks, horizontal rules, HTML entities, comments, image maps, frames and iframes. Presented to BIS1 on Friday 9th November 2012.

Transcript

1. Other HTML Features IS1103 Lab - Friday 9th November 2012
2. Since my last lab session Aidan and Kate have covered a lot over the past few sessions including... Unordered (bullet), ordered (numbered) and definition lists Introduction to HTML tables Some more advanced table concepts like colspan
3. What we’ll be covering in the coming weeks A brief overview of various other HTML features HTML Forms Basics More Forms Advanced Forms <div> and <span> tags Intro to CSS (Cascading Style Sheets) Styling and formatting content Using CSS to do layouts
4. Before we get started with Forms Let’s take a look at some of the other tags and features that HTML has to offer We have seen that we can use the <p> tag to create paragraphs in our pages. But what if we want to just insert a single line break? We can use the <br /> tag for that (self-closing tag).
5. Example of <br> in action <p>This is a paragraph.</p> <p> This is another paragraph.<br> This is another line in the second paragraph. </p> Amazing, right?
6. Horizontal Rules Similar to <br /> is the <hr /> tag (self-closing). Instead of a line break, the <hr> tag inserts a horizontal rule in your page. I put a <hr> between the two paragraphs in the previous example. Bored to tears yet? It gets even better...
7. What about adding extra spaces? You may (or probably have not) noticed that HTML pretty much completely ignores whitespace in your markup. While this is great because it doesn’t matter whether your code is one one line or spread over ten, it makes things difficult when you want to enter additional spaces in your text. <p>Check out this space.</p> results in: Basically, HTML only allows for single spaces.
8. HTML Entities to the rescue Thankfully, there is a way around this. To add spaces in our text, we can use the &nbsp; HTML entity.
9. &n what now? &nbsp; stands for non-breaking space. It is an example of an HTML entity - a method of inserting non-standard characters into your HTML page. <p>Check out this &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; space.</p> Are you not entertained?
10. Some other HTML entities HTML entities are also great for inserting characters that are usually used for HTML tags (like the greater than and less than symbols, and the double-quote symbol). Try them out for yourselves! &lt; < &copy; © &gt; > &reg; ® &quot; " &trade; ™ &amp; & &aacute; á &euro; € &Eacute; É &yen; ¥ &iuml; ï
11. Commenting HTML code You may have learned in VB about how you can add comments in to your code. Comments are useful for a number of reasons - they can explain code to others reading it, and they can also be used to quickly temporarily disable/remove code. <!-- This is a HTML comment --> Anything between the comments will not be rendered by the visitor’s Web browser.
12. Image Maps Image Maps were previously used for loads of things. Basically they allow you to chop up an image based on coordinates and make different parts of the image do different things. I haven’t seen one in use on a web page in YEARS. Long story short - unless you have a particular reason for using one, don’t worry about them.
13. Frames Never EVER use frames in your pages. EVER!
14. Except the <iframe> tag The exception to the rule on using frames is the <iframe> (inline frame) tag. These are generally considered okay, but only use them if you really need to. Basically an <iframe> allows you to embed an entire external web page in your HTML document. <iframe src="http://www.rte.ie" width=”640” height=”480”> </iframe>
15. RTE.ie in an <iframe>
16. Caveat! Some external websites, including Google and Yahoo! block their websites from being included in <iframe> tags by other websites.
17. More fun with <iframe> Let’s create a nice fun example of how we can use <iframe> to do something pretty cool. We’ll create a list of links to different cities, and when the user clicks on a link, we’ll show a map of that city right there on our HTML page. Introducing BIS Maps...
18. Next Week... Next week, we’ll get started with HTML Forms. I’m away the following week, Aidan and Kate will finish off forms with you on Thursday and Friday. When I get back, we’ll start looking at how to add some style to our pages using CSS.
19. Mahara As usual, everything from today’s session can be found on my Mahara profile page: http://tucana.ucc.ie/user/view.php?id=396 I usually put the slide deck, GitHub code and Mahara blog post up by about 2pm.