21

Higher Computing Science HTML

Embed Size (px)

Citation preview

Page 1: Higher Computing Science HTML
Page 2: Higher Computing Science HTML

HTMLHTML is a computer language used to describe what is to appear on a web page.

HTML stands for Hyper Text Markup Language.

You can view the HTML that makes up any web page by right-clicking on the pages and selecting view source.

Page 3: Higher Computing Science HTML

HTMLThis is a sample HTML page

Page 4: Higher Computing Science HTML

Head and BodyAn HTML document is split into:head element (not displayed on the web page)body element (displayed on the web page)

Page 5: Higher Computing Science HTML

Elements and TagsAn HTML page is made up of elements.Each element has a start tag and an end tag with content in between

Page 6: Higher Computing Science HTML

Elements and TagsAn HTML page is made up of elements.Each element has a start tag and an end tag with content in between

Page 7: Higher Computing Science HTML

Elements and TagsAn HTML page is made up of elements.Each element has a start tag and an end tag with content in between

Page 8: Higher Computing Science HTML

AttributesElements can also contain attributes. These provide additional information about the element.

The <img> tag below uses attributes to provide more information about the image element:src – the source file location and namewidth – the width the image should be displayed atheight – the height the image should be displayed at

Page 9: Higher Computing Science HTML

HTMLHeading tag<h1> to <h6><h1> largest heading, <h6> smallestSearch engines will use headings to index the web page

Page 10: Higher Computing Science HTML

HTMLParagraph tag<p> defines a new paragraph

Line break tag<br> used to define a line break

Page 11: Higher Computing Science HTML

HTMLBold tag<b> defines bold text

Italics tag<i> defines italic text

Page 12: Higher Computing Science HTML

HTMLHyperlinksThe world wide web is built around the concept of hyperlinks, an idea conceived by Sir Tim Berners Lee in 1989.Hyperlinks allow the user to navigate from one web page to another.The <a> tag defines a hyperlinkThe href attribute defines the target web page

The content will be shown as a hyperlink

Page 13: Higher Computing Science HTML

HTMLExternal hyperlinksAn external hyperlink links to a page on another website

Internal hyperlinksAn internal hyperlink links to a page on the same website

Page 14: Higher Computing Science HTML

HTMLImagesThe <img> tag is used to define an imageUse the src attribute to set the image file location and nameUse the width attribute to set the image widthUse the height attribute to set the image heightUse the alt attribute to provide alternate text for an imageThe alt text will be displayed if the image could not be loadedThe alt text can be read by an image reader (accessibility)

Page 15: Higher Computing Science HTML

HTMLImages as hyperlinksAn image can be used as a hyperlinkUse the <a> tag with href attribute to set up the linkUse the image element as content

Page 16: Higher Computing Science HTML

HTMLTablesTables are made up of rows of table dataThe <table> tag defines the tableThe <tr> tag defines each rowThe <td> tag defines each item of table data within the rowThe <th> tag defines a table headingThere are also attributes for setting borders and spacing

Page 17: Higher Computing Science HTML

HTMLTables

Page 18: Higher Computing Science HTML

HTMLListsHTML can be either ordered (e.g. numbered items) or unordered (e.g. bulleted items)The <ol> tag defines an ordered listThe <ul> tag defines an unordered listThe <li> tag defines a list itemThe type attribute can be used with an ordered list to define the list marker (e.g. numbers, letters, Roman numerals)The style attribute can be used with an unordered list to define the list marker (e.g. bullets, circles, squares)

Page 19: Higher Computing Science HTML

HTMLLists

Page 20: Higher Computing Science HTML

HTMLFormsHTML forms can be used to collect user input

Page 21: Higher Computing Science HTML

HTMLMetadataMetadata is data that describes other dataMetadata will not be displayed on the pageMetadata can be used to tell search engines about a web pageMetadata can be used to tell browsers how to display contentThe <meta> tag is used to define metadata and should be placed inside the head element