Scribd
Upload
6 views

Web Authoring

Web development consists of three main layers: Content Layer (HTML structure), Presentation Layer (design and formatting), and Behavior Layer (scripting for functionality). Key HTML elements include headings, tables, anchor links, images, videos, and lists. The document provides examples of how to use these elements effectively in web authoring.

Uploaded by

David Sami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Web Authoring

Web development consists of three main layers: Content Layer (HTML structure), Presentation Layer (design and formatting), and Behavior Layer (scripting for functionality). Key HTML elements include headings, tables, anchor links, images, videos, and lists. The document provides examples of how to use these elements effectively in web authoring.

Uploaded by

David Sami
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Web Authoring

Web development consists of 3 main layers.

• Content Layer
• Presentation Layer
• Behavior Layer

Content Layer – this is where all data Pages, frames, texts, images, links and videos are placed. This is
also known as Structure Layer. It is created using HTML. It is used to enter the content and create the
structure of a web page

Presentation Layer – This is where designs, color themes, fonts are put in. Presentation layer is used to
display and format elements within a web page

Behavior Layer – This is where all functioning of a web page take place. Behavior layer is for a scripting
language to control elements within a web page

Key HTML Elements for Exam


• Heading tags
o Metatags
o Titles
o CSS file Attaching
• Table Structures
• Anchor Links
o Websites
o Email
o bookmarks
• Inserting Images
• Inserting Videos
• Paragraphs Styles
• Heading Tags
• HTML attributes
• List
o Unordered Lists (ul)
o Ordered Lists (ol)
Head Section
Metatags
Metatags are usually defined at the top of the HTML structure in order set values for the web
page.
Example—
Question 1.
Set the author of web page to your name.
My name = Graham Brown
Ans:

This will set the author of the page as the name to be Graham Brown.

Title
HTML tags

<title>--</title>

Title tag is used to define the title of the web page which appears on the tab of the web.

Eg. <title>Youtube</title>
CSS file Attaching

<link rel="stylesheet" href="(relative file path of the css file)"


/>

Unlike Link is a self-closing tag which does not require close tag like others. </link> is not
needed.

Table Structures

Example.

<table border=”1”>
<tr> Border attribute is
<td>A</td> used to display borders.
<td>B</td>
</tr>
<td> tag represents columns in the
<tr> table which is called table data.
<td>C</td>
<td>D</td>
</tr> <tr> tag represents rows in the table
which is called table rows.
</table>
So without setting any width or height values, this set of code will look like this in
web.

A B

C D
Anchor Links

<a href=”(target link)” target=”_self”>---<a>

It will create a link and clicking will reach to the targeted link.

<a href=”mailto;(target email)?Subject=(email-


subject)?body=(bodytext)”target=”_self”>---<a>

It will create email link. Clicking this will send mail to the target email with a subject written and
body written.

<a href=”(#id)” >--</a>

It will create a bookmark. Clicking this will go to the page where this id is set.

Inserting Images
<img src=”(file path)” alt=”(name)”>

Inserting Videos
<video controls >
Error Messages!
<source src="(file_path)" type=”(vid_type)”>
</video>
Lists

Ordered List

<ol>
<li>Apple</li>
<li>Orange</li>
<li>Pearl</li>
</ol>

Unordered List
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pearl</li>
</ul>

Paragraph Styles
<p>---</p>

This tag will create a normal paragraph.


Heading Tags
<h1>Hello World!</h1>

<h2>Hello World!</h2>

<h3>Hello World!</h3>

<h4>Hello World!</h4>

<h5>Hello World!</h5>

<h6>Hello World!</h6>

You might also like