WEBSITE AUTHORING
WEB DEVELOPMENT LAYERS
1. CONTENT LAYER
•
The content layer forms the structure of a web page
•
This is where you enter the text, images, and other content that make
up the body of the web page
•
It's typically constructed using HTML (HyperText Markup
Language)
2. PRESENTATION LAYER
•
The presentation layer is used to display and format elements within
a web page
•
It controls how the content looks, including layout, colours, fonts, and
more
•
This layer is mainly handled by CSS (Cascading Style Sheets)
3. BEHAVIOUR LAYER
•
The behaviour layer uses scripting languages to control elements
within a web page
•
JavaScript is the primary language used for the behaviour layer.
HTML
•
The content layer of a web page is made up of HTML elements such as
headings (<h1>, <h2>, etc.), paragraphs (<p>), links (<a>), images (<img>), and
more
•
HTML elements are the building blocks of web pages and are used to structure
and organise the content.
There are two sections :
A. Head section
B. Body section
Head Section Elements
i.
Page Title
•
•
The <title> element is used to set the page title that displays in the browser tab
It is placed inside the <head> section of the HTML document
Steps
Go to code in Microsoft front page
Enter the title
ii.
External Stylesheets
•
•
•
External stylesheets are linked in the <head> section using the <link> element
The rel the attribute is set to "stylesheet", and the href the attribute contains the relative
file path to the CSS file
Stylesheets are loaded in the order they are listed, so hierarchy is important
Steps
1.Go to format
2.click Style Sheet Links
3.Click Add…
4.select the style sheet from the folder and
click ok
5.click ok
iii.
Metatags
•
•
•
•
•
Metatags are snippets of text in HTML that describe a page's content
They don't appear on the page itself but in the page's code.
<meta> tags always go inside the <head> element
Metatags provide additional information about the web page to the browser and
search engines
E.g.
o Charset
▪ The <meta charset="UTF-8"> the tag specifies the character encoding
for the HTML document
o Keywords
▪ The keywords attribute in a <meta> tag is a comma-separated list of
words that represent the content of the web page.
▪ <meta name="keywords" content="HTML, CSS, JavaScript">
o Author
▪ The author attribute in a <meta> the tag identifies the author of the
web page.
▪ <meta name="author" content="John Doe">
o Description
▪ The description attribute in a <meta> tag provides a concise
explanation of the content of the web page.
▪ <meta name="description" content="Free Web tutorials for
HTML and CSS">
o Viewport
▪ The <meta name="viewport" content="width=device-width,
initial-scale=1"> a tag makes your web page display correctly
on all devices (desktop, tablet, mobile)
▪ It controls the viewport size and the initial zoom level
Steps :
1.Go to design
2.Go to file
Properties
3.click Custom,in User variables click Add…
4.Type the Name and Value and click Ok
iv.
Default Target Windows
•
•
The target attribute of the <base> the element can set a default target window for
all links on a page
For example, <base target="_blank"> will open all links in a new window or tab.
Steps
1.Go to design
2.Go to file
Properties
3.Click General
Default target frame
4.Select the target and click ok
1.Same frame - _self
2.Whole page - _top
3.New Window - _blank
4.Parent frame - _parent
Creating Body Content
•
•
The <body> section of the HTML document is where the main content goes
This can include text, images, tables, links, and more
Inserting a Table
•
•
•
Tables in HTML are created using the <table> element
Table rows are defined with <tr>, headers with <th>, and data cells with <td>
Use rowspan and colspan attributes to make cells span multiple rows or columns
Table Attributes
•
•
Set table and cell sizes with the width and height attributes, using pixel or
percentage values
Apply styles to tables with inline CSS or by linking an external stylesheet
steps
1.Click table -> insert -> table
2.
Size-set rows and columns
Layout-set width,height,cell padding,cell
spacing
Borders – set border size
Background – set background
colour,background pictures
Cell properties
Set width and height in pixels or percent
Inserting Objects
•
•
•
•
•
Insert text with elements like <p> for paragraphs and <h1> to <h6> for headings
Insert images with the <img> element, using the src attribute to specify the image
source
Use the alt attribute to provide alternate text for images
Adjust image or video size with the width and height attributes
Insert sound clips and videos with the <audio> and <video> elements,
adding controls for playback controls, and autoplay to start automatically
Video tag
<video width=" " height=" ">
// set width and height
<source src=" " type=" ">
// add the video and give file format
Your browser does not support the video tag. //error message
</video>
I.
Controls
The controls attribute adds video controls, like play, pause, and volume.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
II.
Autoplay
To start a video automatically, use the autoplay attribute:
Example
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML <div> Tag
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then styled
with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Text Styling Tags
•
•
•
Use the <h1> to <h6> tags for headings, with <h1> being the largest and <h6> the
smallest
Use the <p> tag for paragraphs
Use the <li> tag for list items within <ul> (unordered/bullet list)
or <ol> (ordered/numbered list)
Example
<html>
<head>
<style>
.blue-text {
color: blue;
}
.large-font {
font-size: 20px;
}
</style>
</head>
<body>
<div class="blue-text large-font">
<h1>Blue Heading</h1>
<p>Blue paragraph.</p>
<ul style="list-style-type:circle;">
<li>Blue list item 1</li>
<li>Blue list item 2</li>
</ul>
</div>
</body>
</html>
Creating Hyperlinks
•
•
A hyperlink, often just called a 'link', is a reference to data that a reader can
directly follow by clicking or tapping
Hyperlinks are created using the <a> (anchor) tag in HTML
Hyperlink Types
Relative File Paths
•
•
A relative file path specifies the location of a file or directory about the current
location, or the location of the file that references it.
For instance, if an HTML file and an image are in the same directory, you can
reference the image in the HTML file using just its name (e.g., image.jpg).
Absolute File Paths
•
•
•
An absolute file path specifies the exact location of a file or directory, regardless
of the current location.
It includes the entire path from the root directory to the file or directory in
question.
For instance, an absolute file path on a Windows system might look
like C:\Users\Username\Documents\image.jpg
CSS
•
•
•
The presentation layer of a web page is defined by CSS (Cascading Style
Sheets). This layer deals with the layout, colours, fonts, and animations on the
page
It separates the content (HTML) from the appearance of the web page
CSS allows for better control and flexibility in designing a web page
CSS Syntax
Example
In this example all <p> elements will be center-aligned, with a red text color:
p {
color: red;
text-align: center;
}
CSS Comments
Comments are used to explain the code, and may help when you edit the
source code at a later date.Comments are ignored by browsers.
A CSS comment is placed inside the <style> element, and starts with /* and
ends with */:
Example
/* This is a single-line comment */
p {
color: red;
}
CSS Color Values
In CSS, colors can also be specified using RGB values, HEX values,
rgb(255, 99, 71) - RGB
#ff6347 -HEXADECIMAL
CSS Backgrounds
The CSS background properties are used to add background effects for
elements.
•
•
•
•
•
background-color
background-image
background-repeat
background-position
background
It will use on body tag
1.Create css page and go to format -> style
Click new and ok
1.give the name body
2.click format
3.click border
In shading we can set
background properties
Tables
CSS is used to style HTML tables, allowing us to define the appearance of
the table, table rows, table headers, and table data cells.
•
Size: Control the width and height of a table using width and height.
o e.g. width: 100%; height: 200px;
table {
width: 100%,height: 200px;
}
Collapse Table Borders
The border-collapse property sets whether the table borders should be
collapsed into a single border:
table {
border-collapse: collapse;
}
Let the table borders collapse
Firstname
Lastname
Peter
Griffin
Lois
Griffin
table {
border-collapse: seperate;
}
Let the table borders seperate
Firstname
Lastname
Peter
Griffin
Lois
Griffin
Horizontal and Vertical Alignment: Control alignment with text-align (horizontal)
and vertical-align (vertical).
o
e.g. text-align: center; vertical-align: middle;
Center Tables
margin-left: auto;
margin-right: auto;
Right alignment Table
margin-left: auto;
Left alignment Table
margin-right: auto;
Border
style,color,width,padding
Padding: Define the space between cell content and its border with padding
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
table {
border-spacing: 10px;
}
0
