Implementation (HTML) Flashcards
Describe and use HTML code: html, head, title, body
The structure of an HTML web page should be as follows:
The <html> and </html> tags tell the browser that everything between them is an html document
The head contains information about the page as well as links to CSS and Javascript files
The title appears in the browser tab
The body contains the content of the web page which will be displayed in the browser
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Describe and use HTML heading code
HTML has 6 different heading tags from h1 (most important) to h6 (least important).
Example
<h1>h1 is the most important heading tag</h1>
<h6>h6 is the least important heading tag</h6>
Describe and use HTML paragraph code
The <p> tag is used to define a paragraph.
Example
<p>This is a paragraph</p>
Describe and use HTML div code
The <div> tag is used to define a division or a section in an HTML document. The div can then be styled using CSS.
CSS
div {
color:darkorange;
}
HTML
<div>
<h3>Heading</h3>
<p>The heading above, this paragraph, and the paragraph below are all within a div.</p>
<p>CSS styles the text colour of the elements within the div to dark orange.</p>
</div>
Describe and use HTML hyperlinks
The <a> anchor tag defines a hyperlink. It uses the href attribute to specify the page that the link is to go to.</a>
Hyperlinks can be:
Internal
links to a different page within the same website
links to a different section on the same page
External - links to a page on a different website
Internal hyperlink example
A hyperlink to about.html, which is saved in the same physical location as the current page.
<a>About Me</a>
Describe and use HTML link code
The <link></link> tag is used to link to external CSS files.
Example
Link to the CSS file mystyle.css:
<head>
<link></link>
</head>
Describe and use HTML image code
The <img></img> tag is used to add an image to a web page.
The image tag uses the following attributes:
src: the location of the image file, including filename and file extension
alt: the alt text to be displayed when an image does not load, and also used by screen readers
height: height of the image (optional)
width: width of the image (optional)
Example
Display a JPEG photograph of animals in a zoo, stored in the same location as the web page.
<img></img>
Describe and use HTML audio code
The HTML audio element embeds audio in a web page.
The audio element uses the following attribute:
controls: adds audio controls (play, pause, volume)
The source element specifies the file to be played, and has the following attributes:
Example
Embed an MP3 audio file called “digital” on a web page
<audio>
<source></source>
</audio>
Describe and use HTML video code
The HTML video element embeds video in a web page.
The video element uses the following attributes:
width: the width of the video
height: the height of the video
controls: adds video controls (play, pause, volume)
Example
Embed an MP4 video file called “digital” on a web page, using a width of 320 and a height of 240.
<video>
<source></source>
</video>
Describe and use HTML ordered list code
An ordered list displays each list item after an item number.
Ordered lists use the <ol> tag
Each new item in a list needs to be placed between the list item <li> tag
Example
<ol>
<li>Computing Science</li>
<li>Mathematics</li>
<li>Physics</li>
</ol>
Output
Computing Science
Mathematics
Physics
Describe and use HTML unordered list code
An unordered list displays each list item after a bullet point.
Unordered lists use the <ul> tag
Each new item in a list needs to be placed between the list item <li> tag
Example
<ul>
<li>Computing Science</li>
<li>Mathematics</li>
<li>Physics</li>
</ul>
Output
Computing Science
Mathematics
Physics
Describe and use relative and absolute addressing
Relative links
A relative address is the path to a file starting from the current location, for example:
a relative link from home.html to about.html
refers to a web page about.html
in the same folder as home.html
a relative link from home.html to /images/flower.jpg
refers to an image flower.jpg
in the images folder
with the images folder in the same location as home.html
Absolute links
An absolute address is the full path to a file, for example:
http://mywebsite.co.uk/about.html
http://mywebsite.co.uk/images/flower.jpg
