1 / 15

CMPC1M01 Computing Systems I

CMPC1M01 Computing Systems I. Lecture 2 - Basic HTML. Objectives for this lecture. To understand the structure and process of writing basic HTML files To learn the standard HTML tags and the most commonly used attributes. Hypertext Markup Language (HTML).

janet
Download Presentation

CMPC1M01 Computing Systems I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CMPC1M01Computing Systems I Lecture 2 - Basic HTML

  2. Objectives for this lecture • To understand the structure and process of writing basic HTML files • To learn the standard HTML tags and the most commonly used attributes

  3. Hypertext Markup Language (HTML) • HTML was designed to be content-oriented, but: • No clean separation of display features from content • Lax standards made (or still make) it difficult to precisely specify meaning or display • Uses a simple tag structure • HTML display • Precise layout, use of fonts, ... depends on browser • Can make a browser display text in a particular way... • Often looks very different on another machine or browser • Focus on content-based features – leave display to CSS

  4. Tag syntax • HTML tags have • name • optional attributes • enclosed in angle brackets <xxx> • attributes may have values e.g. • width="6" • name=“coffee” • tags may be nested • most need an end </xxx> • tag names are case insensitive • attribute values are case sensitive • Comments • begin with <!-- • end with --> • e.g. <!-- table of lecture content -->

  5. Document Structure Tags • DOCTYPE: defines the HTML version used for the document (we’ll normally use XHTML 1.0 Strict) • html: defines the start and end of the HTML document • head:defines the non-printing section of the document • Used for embedding script, meta-tags, titles, styles, etc. • title: defines what is displayed in the browser title bar • body:defines the printing section of the document • h1 indicates that the enclosed text is a first level heading • p indicates that the enclosed text is a paragraph

  6. Example XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CMPC1M01 Computing Systems I</title> </head> <body> <h1>CMPC1M01 Computing Systems I</h1> <!-- main content here --> <p>The aims of this module are...</p> </body> </html>

  7. Text Formatting <h1>…<h6> heading styles <hr> horizontal rule <br /> line break <p> paragraph <em> emphasised text <strong> 'strong' text <i> italic text <b> bold text <html> <head> <title>CMPC1M01 Computing Systems I</title> </head> <body> <h1>CMPC1M01 Computing Systems I </h1> Welcome to the first lecture on HTML. We will focus on text formatting tags such as: <p> <strong>strong</strong> (or <b>bold</b>) <br /> <em>emphasised</em> (or <i>italics</i>) </p> Older tags tend to specify how to do the formatting, but it is better to specify the desired effect. <hr /> </body> </html>

  8. A note on formatting HTML • HTML is a mark-up language • Formatting of the document is based on the tags in the HTML document or CSS stylesheet • White space and other formatting commands (newlines, tabs, etc.) are ignored • The only way around this is to use the <pre>tag which produces verbatim, but inelegant, results <p> The lectures are: 1. Intro 2. HTML 3. Tables and forms 4. More HTML 5. etc. </p> <pre> 1. Intro 2. HTML 3. Tables and forms 4. More HTML 5. etc. </pre>

  9. Images • Images can be used within web documents using <img> • <img> links to images which appear embedded within the document • Attributes • srcis a reference to the image file • height and width can be used to change the image dimensions • alt is used to show text for the image • border indicates whether an image border is used • An image map can be created to define "hot-spots" within an image

  10. Image Formats • GIF • usually for logos and artwork with up to 256 colours • file size is typically small • one colour can be set as transparent • can be used for animations • PNG • a replacement for GIF which has no • JPEG • used for photo quality images • can contain up to millions of colours • File sizes are typically larger • can be controlled by file compression • the higher the compression, the lower the image quality

  11. Image size • High quality images are large - several megabytes • An image can be scaled to fit, but • Some browsers may complain or not display it correctly • The image may be distorted if the resizing does not respect the original proportions • Large images may take a long time to load (esp. over mobile connections) • What resolution do you need? • Will a thumbnail do, with an option to see a high resolution version?

  12. Hyperlinks (Anchor tags) • The hyperlink, or anchor, tag <a> is the most important tag … • Jump to absolute or relative URLs • Pages in other sites (use absolute URLs) • Other web pages in the same site (use relative URLs) • Other locations in the same page (bookmarks) • Documents and files (images, PDFs, etc.) • Email addresses • Tag and attributes • href attribute is the hyperlink reference • Content between <a> and </a> is the sensitive part of the document • The target attribute can be used to open a link in a new window

  13. Lists • There are three types of list available in HTML • ordered (numbered) lists, <ol> • unordered (bullet point) lists, <ul> • definition lists, <dl> • Within these outer tags, items are declared using: • <li> for ordered and unordered lists, • <dt> and <dd> for definition list terms and definitions

  14. Entities and Colours • Entities, sometimes called escape sequences, allow special characters to be inserted • These are needed for formatting and character set limitations • &lt; < &gt; > • &pound; £ &amp; & • &quot; " &nbsp; non-breaking space • Colours can be from a set of standard names, or RGB values • white black red blue green • #FFFFFF #000000 #FF0000 #00FF00 #0000FF • lightred lightblue lightgreen grey50 • #55000 #005500 #000055 #7F7F7F Next week we’ll see how to do display properly!

  15. Resources • Tutorial at • http://www.w3.org/MarkUp/Guide/ • W3C offers an HTML validation service • http://validator.w3.org/ • Firefox v.3 has built-in validation using the W3C validator

More Related