Download presentation
Presentation is loading. Please wait.
1
Computer Fundamentals 2
21/01/04 Computer Fundamentals 2 Introduction to HTML by Markus A.Wolf
2
HTML A tool used to build Web pages. It’s easy to use!
Not a programming language HyperText Markup Language
3
HTML An HTML file is a text file containing small markup tags
26/05/2018 HTML An HTML file is a text file containing small markup tags < > </ > The markup tags tell the Web browser how to display the page An HTML file must have a .htm or .html file extension When you save an HTML file, you can use either the .htm or the .html extension. Initially, file extensions could only be 3 characters long the use of htm / html, is left to the author's personal preferences there is no difference between the two extensions. Both denote that the file contains HTML. This is really a matter of convention and is not an absolute, but most realize that a file whose extension is htm or html contains HTML
4
<h1> HTML</h1>
Tags embedded in a document that give information about how to display the document The tags are the markup that are included together with the document contents, but are not displayed Defined using SGML (Standard Generalised Markup Language)
5
21/01/04 Editors Create HTML documents using Notepad or more specialised text editors that let you see and understand the code better, such as Bluefish, EditPLUS, Arachnophilia, HTMLPad 2011. by Markus A.Wolf
6
Editors There are many WYSIWYG (what you see is what you get) tools for web development such as Microsoft FrontPage and Visual InterDev and Macromedia’s Dreamweaver and UltraDev.
7
Viewing HTML documents
To view HTML documents you require a browser There are many browsers available and they support different tags. The most popular are: Microsoft Internet Explorer Mozilla Firefox Netscape Navigator Most browsers are forgiving about sloppy HTML, but code can be validated at
8
Basic Structure of an HTML document
Document starts with <html> and ends with </html> <html> <head> <title>My first webpage</title> </head> <body> Hello World </body> </html> Head – contains information About the document (displays in browser tab) Body – contents of the document, which are displayed
9
Example explained First tag in your HTML document is <html>.
Tells your browser that this is the start of an HTML document. Last tag in your document is </html>. Tells your browser that this is the end of the HTML document. The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window. The text between the <title> tags is the title of your document. The title is displayed in your browser's caption. The text between the <body> tags is the text that will be displayed in your browser.
10
HTML Tags Tags are delimited using ‘<‘ and ‘>’
Most tags have a begin and an end structure (<…> and </…>) E.g. <p> Paragraph </p> Anything between the begin and end structure is the content Many tags can have one or more attributes
11
Attributes Only exist within the opening tag Order not important
Separated by spaces Usually name=“value” pairs E.g. <font color="red"> Red font. </font></p> Attribute values should always be enclosed in quotes. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML
12
Example – Fill in the missing tags
<html> <head> <title>My first image</title> </head> <body> My first image <img src=“jollypic.gif” align=“middle”> <!-- this is a comment:see explanation in the following slides --> </body> </html> 1. ? 2. ? 3. ? 4. ?
13
<img> (image tag)
Attributes Example <img> (image tag) <img src=“jollypic.gif” align=“middle”> NOTE: Tag and attribute names are NOT case sensitive, but attribute values may be. Align the image in the middle Source of the image
14
Comments Comments are ignored by the browser
Are used to make notes within the code, that can be read when looking at the code, but that are not displayed in the browser Are delimited using <!-- and --> <!-- this is a comment -->
15
Handling of unrecognised tags
Tags that don’t exist or that were introduced into HTML after the browser was written are ignored, but their content is displayed <html> <head> <title>Handling unrecognised tags</title> </head> <body> <kristen>This text is within an unrecognised tag</kristen> </body> </html>
16
Formatting and Layout Line breaks are ignored by browsers, so you must use <p></p> (paragraph) or <br /> (line break) Other formatting tags are: <i> (italics), <b> (bold), <font>, <center>, etc. Multiple spaces are also ignored by the browser, but you can use the character entity   (non-breaking space)
17
Character entities Use special combinations to represent characters
If you want to display characters that mean something in HTML, you have to use character entities I used the <img> tag on my page. Would be displayed as: I used the <img> tag on my page
18
Headings Use <h1> to <h6> (the h stands for header)
<html> <head> <title>Headings</title> </head> <body> <h1>Level 1 header</h1> <h2>Level 2 header</h2> <h3>Level 3 header</h3> <h4>Level 4 header</h4> <h5>Level 5 header</h5> <h6>Level 6 header</h6> </body> </html>
19
Lists - Unordered Used to produce bullet points, the <li> stands for list item <html> <head> <title>Unordered list</title> </head> <body> <ul> <li>milk</li> <li>bread</li> <li>cheese</li> </ul> </body> </html>
20
Lists - Ordered Used to produce numbered lists
Use attribute type to change the numbering e.g. <ol type=‘a’> or <ol type=‘I’> <ol> <li>milk</li> <li>bread</li> <li>cheese</li> </ol> <ol type="a"> <li>milk</li> <li>bread</li> <li>cheese</li> </ol>
21
Hyperlinks Hyperlinks are elements in an electronic document that link to another place in the same document or to an entirely different document Can be: Text An image
22
The <a> tag Hyperlinks are created using the <a> (anchor) tag The href attribute is used to give the URL (address) of the link <p>Here is a <a href=" link</a> to the university's page </p>
23
Hyperlinks II Links to documents that are stored in the same directory as the document do not require the entire path <p>Here is a <a href="otherPage.html">link</a> to a page within the same directory</p>
24
Links within a document
You can link to a location within a document , by using a name <p>Here is a <a href=“#otherLink">link</a> within the same document</p> … <a name=“otherLink”></a> Link to the named location within the document, using a “#” Target of the link, named using the “name=” attribute
25
Images Use the <img> tag to add an image
26/05/2018 Images Use the <img> tag to add an image The src attribute indicates the source (location) of the image Use the width and height attributes to change these values Note: Images are not inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image. <img src="mirror mirror.jpg“ height="100" width="90">
26
The alt attribute The alt attribute is used to provide a description of the image For visually impaired users “Screen reader" software For users with text only browsers Is displayed when you hover over the image <img src="mirror mirror.jpg“ alt=“Cat reflecting a lion”>
27
Images as Hyperlinks Images can be used as hyperlinks
<p>Click on the image to see more pictures </p> <a href=" com/funnycats/funny_cats.php"> <img src="singing%20cat.jpg" width="364" height="471" border="0"> </a>
28
Did you know? As a registered student, you are eligible for discounted (and in some cases, free software), e.g. MS Software & Development tools: Software4students: Microsoft Store:
Similar presentations
