HTML Basics

An introduction to HTML, presented during the BIS IS1103 lab session on Friday 19th October 2012 in UCC.

Transcript

1. HTML Basics IS1103 Lab - Friday 19th October 2012
2. From last week... Last week I asked if anyone had ever heard of a JavaScript framework, and if so could they name it. We got answers such as Nope, Noo and Nah. Let’s try again - hopefully some of you have found some interesting frameworks and libraries that we can talk about.
3. From last week (continued) • JavaScript frameworks include: • jQuery • Prototype.js & script.aculo.us • Dojo • ExtJS • YUI • MooTools • 1,000s more
4. From yesterday... skeleton.html You all created a skeleton HTML document. Today, we’ll learn how to expand on this and create some more useful documents. We’ll create a simple HTML page as an example.
5. Today • Basic HTML Formatting • Headings • Images • Absolute vs. Relative Paths • Useful Resources • For Next Week...
6. Some housekeeping All of the slides from my lab sessions will be available on Speaker Deck @ speakerdeck.com All of the code examples will be posted on GitHub @ github.com/joelennon/is1103-labs I will post links to everything on Mahara, so be sure to keep an eye on my profile there for updates each and every week.
7. Basic HTML Formatting Yesterday, you created a blank HTML document and printed out the “Hello, World!” message. Let’s make that text bold using the <strong> tag. Put an opening <strong> tag before your text, and add a closing </strong> tag after your text. <strong>Hello, World!</strong>
8. Basic HTML Formatting (continued) In addition to making text bold, we can italicise it. This is done using the <em> tag (emphasis). Remove the <strong> tags and replace them with <em> tags. <em>Hello, World!</em>
9. Basic HTML Formatting (continued) We can wrap text in multiple tags to apply multiple formatting styles to that text. Note that tags must be nested correctly. For example, to make text both bold and italic, you could use: <strong><em>Hello, World!</em></strong> or <em><strong>Hello, World!</strong></em>
10. Basic HTML Formatting (continued) Be careful when nesting multiple tags, as they can easily make your document syntax invalid if you use them incorrectly. The following are not valid HTML: <strong><em>Hello, World!</strong></em> or <em><strong>Hello, World</em></strong>
11. Basic HTML Formatting (continued) There are a lot of other tags you can use for basic formatting. These include: <small>Make text small</small> <s>Strikethrough</s> _Subscript ^Superscript <code>Monospaced font</code> There are other tags too, but...
12. Basic HTML Formatting (continued) In XHTML, many old formatting HTML tags are no longer considered valid. These include <b>, <i>, <u> and various others. To make things even more confusing, some of these tags are considered valid again in HTML5, but with a completely new meaning - <b> does not mean Bold! The simplest way to tackle this is to stay away from HTML formatting altogether and use CSS (Cascading Style Sheets) instead. We’ll be covering CSS in detail over the course of the year.
13. Headings HTML allows you to define a heading for a page using a series of number heading tags. <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
14. Images We can create images using the <img> tag. We include images by telling the <img> tag where to find the image using the src attribute. Attributes are key/value pairs of data that tell HTML tags extra information that is not usually rendered in the browser. <img src="myimage.png" />
15. Images (continued) There are a number of other attributes you should always include when using images in HTML width - The width (in pixels) of the image height - The height (in pixels) of the image alt - Alternative text to display if images are off <img src="myimage.png" width="200" height="200" alt="My Image" />
16. Images (continued) Using the <img> tag introduces us to a couple of new concepts. Firstly, you may have noticed that the <img> tag does not have a closing </img> tag. Instead, the tag is self-closing, <img />
17. Images (continued) The <img> tag also introduces us to the concept of a URL (Uniform Resource Locator). A URL is basically a Web address that points to a particular resource on a Web server. When we use the <img> tag, we tell the browser how to find the URL for the image by passing a resource path in the src attribute. Resource paths can be absolute or relative.
18. Absolute Resource Path An absolute resource path tells the Web browser how to find a Web resource using its full URL. For example, to include the Google logo, you’d use the following: <img src="http://www.google.ie/images/srpr/ logo3w.png">
19. Relative Resource Path A relative resource path tells the browser how to find a resource using a path that is relative to the HTML page itself. For example, if your HTML page is located at http://www.google.com/index.html, you could include the Google logo using the following: <img src="images/srpr/logo3w.png"> We’ll learn more about relative paths in future lab sessions.
20. Useful Resources Beginner Resources: • w3schools.com www.w3schools.com • Google Code University code.google.com/edu/submissions/html-css-javascript/ Intermediate/Advanced Resources: • MDN developer.mozilla.org/ • Web Platform www.webplatform.org/ • Dev.Opera dev.opera.com/web/
21. For Next Week... Create a blog post page using HTML that documents what you learned today. It should include: • Formatted text • Headings • Images
22. For Next Week... The end result should look something like this...
23. Next Week... We’ll look at how to use HTML to link to other pages and websites. We’ll see how you can create lists, and how to create lists within lists. You’ll learn about three types of lists - unordered (bullet), ordered (numbered) and definition (glossary-style) lists. You’ll learn how to build a table in HTML, with rows and columns like you might see in an Excel document. We’ll also talk a little bit about HTML frames.
24. Mahara Everything from today’s session can be found on my Mahara profile page: http://tucana.ucc.ie/user/view.php?id=396 Many of you have already set up LinkedIn profiles. The rest of you should do the same!