HTML Updated 5 1

What is a website?
A website is a collection of individual but related web pages that are often stored together and hosted by a web server. Web pages can include
different objects such as text, sound, video and still images.
A web page is created using three layers. Each of these layers has a different purpose in the development of a web page. These are:
» the content layer

» the presentation layer
» the behaviour layer
The content layer
This layer is where the content of the web page, such as text and images, are placed. It is also where the page structure, such as frames, tables,
hyperlinks, etc. are placed. This layer is sometimes called the structure layer. You will develop the content/structure layer of your web pages in a
language called HTML.
What is HTML?
HTML is an abbreviation for HyperText Markup Language. It is a text-based language used to develop the content layer of websites. Files are
written in HTML using a simple text editor (or a web-authoring package such as Adobe Dreamweaver or Microsoft Expression Web). Files are
written in text format and are usually saved with an .htm (or .html) file extension. These files are recognised by web browsers such as Microsoft
Edge, Internet Explorer, Google Chrome or Mozilla Firefox as web pages.
The presentation layer
This layer is where the visual impact of the web page is created and contains the styles to be used, such as colour themes, fonts, etc. You will
develop the presentation layer of your web pages using CSS.
What is CSS?
CSS is an abbreviation for cascading stylesheet, another text-based language. Styles are created and added to web pages. CSS can be written
(embedded) into HTML but it is usually created in a separate file saved with a .css file extension. The stylesheet is then attached to a web page.
Many websites have one or more common stylesheets attached to every page in the website. This makes all the pages have a similar
appearance, with the same font styles and colour schemes, etc.
The behaviour layer
This layer is where all actions, such as controlling elements (except hyperlinks), on a web page are created. These are usually created using
scripting languages like JavaScript.
The reason for using tables to structure elements within a web page
Tables can be used to create the basic structure of many web pages. They can be used to organise page layout and are often used in web pages
even though their borders may not be visible. In more recent versions of HTML, tables have been replaced by semantic elements and other more
complex structures (including CSS structures) to layout full pages
HTML TAGS
<!DOCTYPE html> Although it has angle brackets, it is not an HTML tag. This declaration is an instruction to the
browser to tell it that the page is written in HTML rather than another markup language.
<html> The first tag that will usually appear in any web page .
</html> tells the browser that this is the end of this markup language and appears at the end of the
markup.
<head>..</head> Objects between these tags are not usually displayed by the web browser.
Only a few tags are universally accepted within the head section of a web page; these are:
<base>, <link>, <meta> , <title>, <style> and script>.
The head section should always contain a title. This is the name displayed in the browser
toolbar. It is the page title used if a page is added to your ‘favorites’ in your browser and is the
title displayed in search engine results.
<body>..</body> objects between these tags are usually displayed in the web page.
 Add comments to your HTML markup
<p>…</p> Paragraph
<h1> to <h6> Headings
<ol>..</ol> Ordered list
<ul>..</ul> unordered list
<li>..</li> list
<sup>..</sup> Superscript
<sub>..</sub> Subscript
<table>..</table> To insert a table
<caption>..</caption> Allows you to display a caption (usually centre aligned) above the table. If a caption is used it
must be the first HTML tag after the <table> tag
<tr>..</tr> Table row
<td>..</td> Table column
<table border=”1”> Makes the border visible
<table border=””> Hide the table border

<thead>..</thead> Header section for table
<tfooter>..</tfooter> Footer section for table
<tbody>..</tbody> Boy section for table
<th>..</th> create heading cells, which are bold and centre aligned
margin-left:auto; margin-right:auto; To make the table center align
<table border=”1” style=”margin-left:auto; margin-right:auto; border : solid 4px; vertical-align:top”>
<vertical_align> Vertically align the data in the table. It has the values: top, middle, right
colspan Merge the columns in the table
rowspan Merge the rows in the table
<br> Line break
<img src=”image.jpg” alt=”logo”> To insert an image called image.jpg and an alternative message if its displayed
<table border=’1” style=” padding :25px”> Table with 25 pixel padding for all sides
<table border=’1” style=” padding-top :25px 15px 10px Table with different padding values starting from top and rotating clockwise
5px”>
<table border=”1” style =”border _spacing: 20px Border spacing with horizontal value first then vertical value
10px”>
<table border=”1” style =”border _collapse:collapse”

<video width=”400” height=”224” controls>Your controls attribute shows the video controls and allows the user to control
browser does not support this type of video. (start/pause/maximise/adjust volume, etc.) the video.
<source src=”wreck.mp4” type=”video/mp4”>
</video> To remove the controls from the video simply remove the controls attribute
from the video tag. To ‘autoplay’ the video so that it runs as soon as it has
loaded onto the web page, replace the controls attribute with the autoplay
attribute. As many browsers refuse to autoplay, unless the video is muted, we
must also add the muted attribute to this tag. To get the video to play in a
continuous loop, the loop attribute is used.
<video width=”400” height=”224” autoplay loop To remove the controls from the video simply remove the controls attribute
muted>Your browser does not support this type of from the video tag. To ‘autoplay’ the video so that it runs as soon as it has
video. loaded onto the web page, replace the controls attribute with the autoplay
<source src=”wreck.mp4” type=”video/mp4”> attribute. As many browsers refuse to autoplay, unless the video is muted, we
</video> must also add the muted attribute to this tag. To get the video to play in a
continuous loop, the loop attribute is used.
<audio controls> Your browser does not support this To insert audio
type of audio file.
<source src=”whale.mp3” type=”audio/mpeg”>
</audio>
<h1 id=”top”> Go to the top of the page Bookmark

<a href=#top”>top</a>
<style> metatag is a tag that holds metadata. three attributes with the tag, these are:
<meta charset=”UTF-8”> charset, name and content
<meta name =”author” content=”BHIS”>
<meta name=”description” content=”Grade 10” Common example of character set are
<meta name=”keywords” content=”Good students, Best UTF-8, which is for Unicode, and ISO-8859-1.
students, Best results”> This metatag can be placed anywhere in the head section, except between
other tags. For example, it cannot be placed between the <style> and </style>
<meta name=”viewport” content=”width=device-width, tags, or between <title> and </title> .
initial-scale=1.0”>
</style> The name attribute is used to specify the four other elements required for this
task, these are: author, description, keywords and viewport. Each of these
name attributes is followed by a content attribute.
The content attribute is used with the name attribute and contains the value
assigned to the name. This value is in the form of text.
The keywords are used by search engines to try and find websites that match a
user’s search string.
The viewport is the user’s visible area of the web page. Using the viewport
setting can make a significant difference when using a smaller display size to
view a web page, for example, on a mobile phone or tablet. There are two
content parts to the viewport, the first is the width, which should normally be
set to the width of the device, and the second part is the initial scaling for the
web page
In css Class
.red {color:#aooooo;}
In HTML
<p class=”red”>
body {background-color: #90ee90;}

table {background-color:#52aacc;}
A hyperlink is a method of accessing another document or resource from your current application.
All browsers, using their default settings, display links like this:
» blue and underlined – a link that has not yet been used
» purple – a link that has been previously used

» red – an active link
A division starts with a <div> tag and ends with a </div> tag. Any content can be placed in a <div> tag.
File Types of image
• Bitmap grahics
• Vector graphics
Bitmap graphics (3 types)
.jpeg, .gif,. png
Vector graphics
.svg
Images can be resized using two methods
» The first method is to change the size of the displayed image in the markup. This is the easier of the two methods, but often uses large image
files, which are slower to upload and can delay the display of a completed web page.
» The second method is to physically resize the image in a graphics package. You did this in Task 12b. This method has the advantage of being
able to reduce the file size of an image so that a web page will be displayed more quickly. It has the disadvantage of using lower-resolution
images, which can appear pixelated, particularly if you wish to enlarge them
CSS
padding-top:5px
padding-bottom:10px
padding-left:15px
padding-rigth:20px
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<caption>ICT Marks </caption>
<th>Name</th>
<th>Marks</th>
<tr>
<td>Emil</td>
<td>16</td>
</tr>
<tr>
<td>Tobias</td>
<td>14</td>
</tr>
<tr>
<td>Linus</td>
<td>10</td>
</tr>
</table>
</body>
</html>
A bookmark is a named reference point in an electronic document. It is often used to hyperlink to that point from other locations.
A hyperlink is a method of accessing another document or resource from your current application.
All browsers, using their default settings, display links like this:
» blue and underlined – a link that has not yet been used
» purple – a link that has been previously used
» red – an active link.
The <div> tag is short for a division or section of an HTML document or page. It is also used as a container for HTML elements that
can be styled with CSS. A division starts with a <div> tag and ends with a </div> tag. Any content can be placed in a <div> tag.
Alt+Shift+D to show the merge date
Alt +F9 to show the merge fields in mail merge

HTML Updated 5 1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Updated 5 1

Uploaded by

Copyright:

Available Formats

What is a website?

» the content layer

The content layer

The presentation layer

The behaviour layer

Add comments to your HTML markup

<h1> to <h6> Headings

<ol>..</ol> Ordered list

<ul>..</ul> unordered list

<table>..</table> To insert a table

<tr>..</tr> Table row

<td>..</td> Table column

<table border=”1”> Makes the border visible

<table border=””> Hide the table border

<tfooter>..</tfooter> Footer section for table

<tbody>..</tbody> Boy section for table

margin-left:auto; margin-right:auto; To make the table center align

<table border=”1” style=”margin-left:auto; margin-right:auto; border : solid 4px; vertical-align:top”>

colspan Merge the columns in the table

rowspan Merge the rows in the table

<br> Line break

<table border=”1” style =”border _collapse:collapse”

<h1 id=”top”> Go to the top of the page Bookmark

body {background-color: #90ee90;}

» purple – a link that has been previously used

Bitmap graphics (3 types)

.jpeg, .gif,. png

Images can be resized using two methods

» purple – a link that has been previously used

» red – an active link.

Alt+Shift+D to show the merge date

Alt +F9 to show the merge fields in mail merge

You might also like